@charset "UTF-8";
@media screen and (max-width: 1080px){
  .contents{
    width: 1080px !important;
  }
}
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
/*topview*/
.area_view {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  text-align: -webkit-center;
}
.area_view .container{
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
} 
.area_view .img {
  display: flex;
}
.area_view .img img{
  width: 100%;
}
/*navi*/
.area_navi{
  margin: 40px 0 0;
}
/*list_navi*/
.list_navi {
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  margin: 0;
  padding: 0;
}
.list_navi li.topic_1,
.list_navi li.topic_2,
.list_navi li.topic_3 {
  position: relative;
}
.list_navi li.topic_1::before,
.list_navi li.topic_2::before,
.list_navi li.topic_3::before{
  position: absolute;
  content: '';
  top: -4px;
  left: 32%;
  width: 100px;
  height: 28px;
  transform: translatey(-50%);
  z-index: 1;
}
.list_navi li.topic_1::before{
  background: url(../images/topic_1.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_navi li.topic_2::before{
  background: url(../images/topic_2.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_navi li.topic_3::before{
  background: url(../images/topic_3.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_navi li.topic_1::after,
.list_navi li.topic_2::after,
.list_navi li.topic_3::after{
  position: absolute;
  content: '';
  top: 42px;
  right: 16px;
  width: 32px;
  height: 12px;
  transform: translatey(-50%);
  background: url(../images/arrow_down.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.list_navi >li {
  list-style-type: none;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-radius: 6px;
  margin: 8px;
}
.list_navi a {
  text-decoration: auto;
  text-align: center;
  align-content: center;
  position: relative;
  padding: 18px 0 16px;
  background: #fff;
  border: 2px solid #479FD8;
  flex: 1;
}
.list_navi a:hover {
  background: #d1f1ff;
}
.list_navi .ttl {
  margin: 0;
  color: #36393B;
  font: 600 14px / 1.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.02em;
}
/*force*/
.area_force{
  padding: 80px 0 0;
  position: relative;
}
.area_force::before{
  position: absolute;
  content: '';
  top: 80px;
  left: 60px;
  width: 390px;
  height: 110px;
  transform: translatey(-50%);
  background: url(../images/force_text.png) no-repeat center center !important;
  background-size: contain !important;
}
.area_force .beside{
  display: flex;
  align-items: center;
}
.area_force .head{
  z-index: 1;
  flex: 40%;
}
.area_force .img{
  text-align: center;
}
.area_force .img img{
  width: 70%;
}
.area_force .body{
  flex: 50%;
}
.area_force .description{
  margin: 0;
  color: #36393B;
  font: 400 14px / 2.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
  position: relative;
}
.area_force .description strong{
  margin: 0;
  color: #36393B;
  font: 600 18px / 2.2em "Noto Sans JP", sans-serif;
}
.area_force .description::before{
  position: absolute;
  content: '';
  top: -12px;
  left: -40px;
  width: 30px;
  height: 30px;
  transform: translatey(-50%);
  background: url(../images/parentheses_1.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_force .description::after{
  position: absolute;
  content: '';
  bottom: -36px;
  right: 48px;
  width: 30px;
  height: 30px;
  transform: translatey(-50%);
  background: url(../images/parentheses_2.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
/*imaging*/
.area_imaging{
  margin: 100px 0 0;
  background: #298ED0;
  padding: 95px 90px;
  position: relative;
}
.area_imaging::before{
  position: absolute;
  content: '';
  top: 7%;
  right: 95px;
  width: 520px;
  height: 170px;
  transform: translatey(-50%);
  background: url(../images/imaging_text.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_imaging .text img{
  width: 40%;
}
.area_imaging .body{
  margin: 60px 0 0;
}
/*list*/
.list_imaging {
  padding: 0;
}
.list_imaging >li{
  list-style-type: none;
}
.list_imaging >li+li{
  margin: 24px 0 0;
}
.list_imaging .imaging_1,
.list_imaging .imaging_2,
.list_imaging .imaging_3{
  margin: 0;
  padding: 0 0 12px;
  color: #FFF;
  font: 600 24px / 1em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
  border-bottom: 2px dotted #FFF;
}
/*list*/
.list_change{
  display: flex;
  justify-content: center;
  padding: 10px 24px;
  margin: 8px 0 0;
}
.list_change >li{
  display: flex;
  list-style-type: none;
  padding: 10px;
}
.list_change article{
  background: #fff;
  padding: 24px 24px;
  border: 2px solid #479DD8;
  box-shadow: 6px 6px 0px rgb(255, 233, 70)
}
.list_change .img{
  text-align: center;
}
.list_change .img img{
  width: 55%;
}
.list_change .now{
  font: 500 14px / 1em "Alata", sans-serif;
  color: #ffffff;
  letter-spacing: 0.150em;
  font-style: normal;
  background: #479FD8;
  padding: 6px 22px 6px 24px;
  margin: 0;
  border-radius: 40px;
  display: inline-block;
}
.list_change .description{
  text-align: center;
  color: #262626;
  font: 500 13px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
  margin: 0;
}
/*active*/
.area_active{
  z-index: 1;
  margin: 100px 0 85px;
  position: relative;
}
.area_active::before{
  position: absolute;
  content: '';
  top: 5%;
  right: 26%;
  width: 514px;
  height: 150px;
  transform: translatey(-50%);
  background: url(../images/active_text.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: -1;
}
.area_active .head .text{
  text-align: center;
}
.area_active .text img{
  width: 60%;
}
.area_active .body{
  margin: 60px 0 0;
}
/*list*/
.list_active{
  padding: 0;
  margin: 0 120px;
}
.list_active >li{
  list-style-type: none;
  padding: 10px;
}
.list_active li.active_1,
.list_active li.active_2,
.list_active li.active_3 {
  position: relative;
}
.list_active li.active_1::before,
.list_active li.active_2::before,
.list_active li.active_3::before{
  position: absolute;
  content: '';
  top: 40px;
  left: 45%;
  width: 88px;
  height: 28px;
  transform: translatey(-50%);
  z-index: 1;
}
.list_active li.active_1::before{
  background: url(../images/part1.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_active li.active_2::before{
  background: url(../images/part2.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_active li.active_3::before{
  background: url(../images/part3.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_active article{
  background: #fff;
  padding: 40px 100px 36px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  border-radius: 40px;
  border: 2px solid #479FD8;
}
.list_active .flex{
  display: flex;
  align-items: center;
}
.list_active .img{
  width: 30%;
}
.list_active .img img{
  width: 90%;
}
.list_active .text{
  width: 70%;
  margin: 10px 0 0 24px;
}
.list_active .text .force{
  color: #479FD8;
  font: 400 20px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
  margin: 0 0 0 30px;
  position: relative;
}
.list_active .text .force::before{
  position: absolute;
  content: '';
  bottom: -6px;
  left: -30px;
  width: 22px;
  height: 22px;
  transform: translatey(-50%);
  background: url(../images/check_maru.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 1;
}
.list_active .text .force strong{
  position: relative;
  z-index: 1;
}
.list_active .text .force strong::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 14px;
  left: 0;
  bottom: 2px;
  z-index: -1;
  border-bottom: 10px solid #FCFC54;
}
.list_active .text .description{
  margin: 5px 0 0;
  color: #575757;
  font: 400 14px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
}
/*information*/
.area_information{
  background: #479FD8;
  padding: 40px 0;
  border: 2px solid #efefef;
  box-shadow: 0 0 0px 10px #479FD8;
  position: relative;
}
.area_information::before{
  position: absolute;
  content: '';
  bottom: -140px;
  left: 16%;
  width: 160px;
  height: 185px;
  transform: translatey(-50%);
  background: url(../images/information_human1.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 1;
}
.area_information::after{
  position: absolute;
  content: '';
  bottom: -87px;
  right: 17%;
  width: 150px;
  height: 145px;
  transform: translatey(-50%);
  background: url(../images/information_human2.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 1;
}
.area_information .head{
  text-align: center;
}
.area_information .description{
  margin: 0;
  color: #FFF;
  font: 500 18px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
}
.area_information .description strong{
  margin: 0;
  color: #FFF;
  font: 500 28px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
}
.area_information .body{
  margin: 30px 0 0;
}
.area_information .btnarea{
  display: flex;
  justify-content: center;
}
.area_information .btnarea .btn{
  text-decoration: auto;
  flex: 1;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  color: #479fd8;
  background: #ffffff;
  border-bottom: 3px solid #FEE100;
  letter-spacing: .12em;
  max-width: 495px;
  padding: 24px 0 24px 0;
  font: 500 20px / 1em "Noto Sans JP", sans-serif;
  position: relative;
  text-align: center;
  transition-duration: .4s;
}
.area_information .btnarea .btn:hover{
  background: #FEE100;
  color: #479fd8;
  border-bottom: 3px solid #479fd8;
}
/*interview*/
.area_interview{
  position: relative;
  padding: 80px 0 0;
}
.area_interview .img{
  text-align: center; 
}
.area_interview .img img{
  width: 25%;
}
.area_interview .head .text{
  text-align: center;
  margin: 20px 0 0;
  color: #000;
  font: 500 16px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
}
.area_interview .head .text strong{
  text-align: center;
  margin: 20px 0 0;
  color: #000;
  font: 500 24px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
  position: relative;
  z-index: 1;
}
.area_interview .head .text strong::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 14px;
  left: 0;
  bottom: 2px;
  z-index: -1;
  border-bottom: 10px solid #FCFC54;
}
.area_interview .keyword{
  background: #479FD9;
  margin: 20px -20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.area_interview .keyword .ttl{
  font: 600 14px / 1em "Alata", sans-serif;
  color: #32373B;
  letter-spacing: 0.150em;
  font-style: normal;
  background: #FFDC00;
  padding: 10px 15px 8px 20px;
  margin: 11px;
  display: inline-block;
}
.area_interview .keyword .item{
  margin: 0;
  color: #FFF;
  font: 500 16px / 1em "Noto Sans JP", sans-serif;
  letter-spacing: 0.16em;
}
/*list*/
.list_interview{
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 24px 30px 45px;
  flex-flow: wrap;
}
.list_interview >li{
  padding: 8px 8px;
  width: 48%;
  list-style-type: none;
  display: flex;
}
.list_interview article{
  padding: 15px;
  border-radius: 24px;
}
.list_interview .text .ttl{
  margin: 0 0 0 18px;
  color: #0E3853;
  font: 500 18px / 1em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
  position: relative;
}
.list_interview .text .ttl::before{
  content: "";
  background: #479FD8;
  width: 7px;
  height: 30px;
  position: absolute;
  left: -18px;
  top: 48%;
  transform: translateY(-50%);
}
.list_interview .text .description{
  margin: 22px 0 0;
  color: #474242;
  font: 400 13px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
}
.list_interview .img img{
  width: 100%;
}
.area_interview .foot{
  text-align: center;
}
.area_interview .foot .description{
  margin: 0;
  color: #0E0F10;
  font: 500 16px / 2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
}
.area_interview .foot .description strong{
  margin: 0;
  color: #479FD8;
  font: 600 22px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
  position: relative;
  z-index: 1;
}
.area_interview .foot .description strong::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 14px;
  left: 0;
  bottom: 2px;
  z-index: -1;
  border-bottom: 8px solid #FCFC54;
}
/*about*/
.area_about{
  margin: 40px 0 345px;
  background: #298ED0;
  padding: 80px 70px 50px;
  position: relative;
}
.area_about::before{
  position: absolute;
  content: '';
  top: 12%;
  right: 95px;
  width: 520px;
  height: 170px;
  transform: translatey(-50%);
  background: url(../images/about_text.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_about .text img{
  width: 32%;
}
.area_about .text .description{
  margin: 40px 0 0;
  color: #fff;
  font: 400 14px / 2.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
  text-align: center;
}
.area_about .body{
  margin: 0;
}
.area_about .body .img {
  position: relative;
  text-align: center;
}
.area_about .body .img img{
  width: 90%;
  position: absolute;
  z-index: 1;
  content: '';
  top: 0;
  right: 42px;
}
/*about*/
.area_reason{
  margin: 40px 0 0;
  padding: 60px 58px 24px;
  position: relative;
  z-index: 1;
}
.area_reason::before{
  position: absolute;
  content: '';
  top: 18%;
  right: 95px;
  width: 520px;
  height: 170px;
  transform: translatey(-50%);
  background: url(../images/reason_text.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: -1;
}
.area_reason .text img{
  width: 45%;
}
.area_reason .text .description{
  margin: 40px 0 0;
  color: #fff;
  font: 400 16px / 2.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
  text-align: center;
}
.area_reason .body{
  margin: 18px 0 0;
}
.area_reason .body .img img{
  width: 100%;
}
/*list*/
.list_reason{
  display: flex;
  justify-content: center;
  padding: 10px;
  margin: 8px 0 0;
}
.list_reason >li {
  display: flex;
  list-style-type: none;
  padding: 10px;
}
.list_reason article {
  background: #fff;
  border: 2px solid #479DD8;
}
.list_reason .text{
  padding: 16px 20px 24px;
  text-align: center;
}
.list_reason .text .ttl{
  margin: 0;
  color: #3D83B1;
  font: 500 18px / 1.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
}
.list_reason .text .note{
  margin: 4px 0 0;
  color: #454242;
  font: 400 12px / 1.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
}
/*system*/
.area_system{
  margin: 40px 0 100px;
  position: relative;
}
.area_system .text img{
  width: 100%;
}
/*list*/
.list_system{
  justify-content: center;
  padding: 10px;
  margin: 14px 70px 0;
  display: flex;
  flex-wrap: wrap;
}
.list_system >li {
  list-style-type: none;
  padding: 18px 8px;
}
.list_system article {
  padding: 36px 28px;
  background: #fff;
  box-shadow: 5px 1px 12px #091a2429;
  display: flex;
  align-items: center;
}
.list_system .img img{
  width: 100%;
  display: flex
;
}
.list_system .text{
  margin: 0 0 0 24px;
  width: 60%;
}
.list_system .text .name{
  margin: 0;
  color: #0c0808;
  font: 500 22px / 1.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.1em;
}
.list_system .text .pleace{
  margin: 6px 0 0;
  color: #454242;
  font: 400 12px / 1.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
}
.list_system .text .pr{
  margin: 14px 0 0;
  color: #0e0c0c;
  font: 400 16px / 1.6em "Noto Sans JP", sans-serif;
  letter-spacing: 0.10em;
}
.list_system .btnarea {
  margin: 20px 0 0;
}
.list_system .btnarea .btn{
  text-decoration: auto;
  display: block;
  background: #4AABE9;
  color: #fff;
  letter-spacing: .12em;
  padding: 10px;
  font: 500 15px / 1em "Noto Sans JP", sans-serif;
  position: relative;
  text-align: center;
  transition-duration: .4s;
  border-radius: 40px;
}
.list_system .btnarea .btn:hover{
  background: #FFDC00;
}