@charset "utf-8";
/* Common */
.is--pc {display: block !important;}
.is--sp {display: none !important;}
.bold{font-weight: bold !important;}
.txt--c{text-align: center;}
*[animation]{visibility: hidden;}

/* Print */
@media print{
body {zoom: 0.45;}
*[animation]{visibility: visible !important;}
}
/* Common */


/* All */
html{
   font-size: 62.5%;
}
body {
   position: relative;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 400;
   font-size: 1.6rem;
   line-height: 3.0rem;
   min-height: 100vh;
   color: #000;
}
main{
   position: relative;
   margin: 0 auto;
   /* overflow: hidden; */
}
.header{
   position: relative;
   width: calc(100% - 60px);
   max-width: 1260px;
   min-width: 60vw;
   margin: 0 auto;
   padding: 18px;
   display: flex;
   justify-content: space-evenly;
   z-index: 10;
   border-radius: 0 0 24px 24px;
   box-shadow: 0 3px 8px #00000022;
}

.header_logo img{
   display: block;
   width: 320px;
}
.header_menubtn{
   display: none;
}
.header_area2{
   width: 100%;
   max-width: 760px;
}
.header_area2 ul{
   display: flex;
   justify-content: space-around;
}
.header_area2 ul li a{
   display: block;
   text-decoration: none;
   color: #000;
}
.header_menuclose_wrap{
   display: none;
}
.top_kv{
   position: relative;
   padding: 0 25px;
   overflow: hidden;
}
.top_kv_inner{
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 20px;
   width: 100%;
   max-width: 1260px;
   margin: 0 auto;
}
.top_kv_txt{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   padding: 20px 10px;
}
.top_kv_txt h1{
   width: 100%;
   margin-bottom: 18px;
   font-size: 38px;
   color: #083660;
   line-height: 1.8em;
   letter-spacing: 4px;
}
.top_kv_txt h1 img{
   display: block;
}
.top_kv_txt p{
   margin-bottom: 46px;
   line-height: 1.75em;
   font-size: 24px;
   font-weight: bold;
   color: #333;
}
.top_kv_img img{
   display: block;
}
.point_wrap{
   width: 100%;
   max-width: 1120px;
   margin: 0 auto;
}
.point{
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 60px;
   margin-bottom: 80px;
}
.point_txt{
   order: 2;
}
.point_txt h4{
   margin-bottom: 10px;
   font-size: 30px;
   line-height: 50px;
}
.point_txt h4 span{
   padding: 0 5px;
   color: #0085d6;
   background: linear-gradient(transparent 76%, #caf3ff 76%);
}
.point_img{
   order: 3;
}
.point_img div{
   display: grid;
   place-items: center;
   background-color: #fff;
   width: 280px;
   height: 280px;
   margin: 0 auto 0 0;
   border-radius: 50%;
   box-shadow: 3px 3px 8px #00000022;
}
.point_img div img{
   display:block;
   max-width: 200px;
   max-height: 200px;
   object-fit: contain;
}
.point_wrap .point:nth-child(2n) .point_img{
   order: 1;
}
.point_wrap .point:nth-child(2n) .point_img div{
   margin: 0 0 0 auto;
}
.datalist_wrap{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   width: 1000px;
   max-width: 100%;
   margin: 0 auto;
   gap: 40px;
}
.datalist{
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   width: calc((100% / 3) - 40px);
   padding: 30px;
   background-color: #fff;
   border-radius: 24px;
   box-shadow: 3px 3px 8px #00000022;
}
.datalist h4{
   margin-bottom: 30px;
   font-size: 26px;
   line-height: 36px;
   text-align: center;
}
.datalist_data1{
   text-align: center;
}
.datalist_data1 p{
   line-height: 70px;
   font-size: 32px;
   font-weight: bold;
}
.datalist_data1 p span{
   font-family: "Oswald", sans-serif;
   font-weight: 500;
   font-size: 70px;
   color: #f50;
}
.datalist_data2 dl{
   display: grid;
   grid-template-columns: 1fr 1.5fr;
}
.datalist_data2 dl dt{
   line-height: 46px;
   font-size: 32px;
}
.datalist_data2 dl dd{
   margin: 0;
   font-size: 32px;
   text-align: right;
}
.datalist_data2 dl dd span{
   font-size: 34px;
   color: #f50;
   font-weight: 800;
}
.datalist__txt{
   text-align: center;
   padding: 30px 0 60px;
}
.datalist__txt p{
   font-size: 19px;
}
.flow_wrap{
   display: grid;
   grid-template-columns: 1fr;
   gap: 50px;
}
.flow{
   position: relative;
   display: grid;
   grid-template-columns: 1fr 2fr;
   place-items: center start;
   gap: 30px;
   background-color: #fff;
   color: #333;
   padding: 20px 30px;
}
.flow_ttl h4{
   font-size: 27px;
}
.flow_ttl h4 span{
   font-size: 20px;
}
.flow:after{
   content: "";
   position: absolute;
   bottom: -36px;
   left: 50%;
   transform: translateX(-50%);
   display: block;
   border-style: solid;
   border-width: 20px 30px 0 30px;
   border-color: #e5dfda transparent transparent transparent;
}
.flow_wrap .flow:last-child:after{
   display: none;
}
.introduction_panel{
   display: flex;
   justify-content: center;
   gap: 8px;
   max-width: 1260px;
   margin: 0 auto 50px;
}
.introduction_panel img{
   display: block;
}
.introduction_wrap{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.introduction_box{
   display: grid;
   grid-template-columns: 130px 1fr;
   width: calc(50% - 30px);
   margin: 15px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 3px 3px 8px #00000022;
}
.introduction_box__photo{
   padding-left: 20px;
   align-self: flex-end;
}
.introduction_box__photo img{
   display: block;
}
.introduction_box__txt{
   padding: 20px;
}
.introduction_box__txt h4{
   margin-bottom: 10px;
   font-size: 1.30em;
}
.introduction_photos__wrap{
   display: grid;
   padding: 30px 0;
   place-items: center;
}
.introduction_photos__wrap h3{
   display: inline-block;
   padding: 10px 30px;
   transform: translateY(50%);
   font-size: 1.5em;
   font-weight: normal;
   color: #fff;
   background-color: #99866d;
}
.introduction_photos{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 50px;
   padding: 60px 80px;
   border-radius: 10px;
   background-color: #fff;
   box-shadow: 3px 3px 8px #00000022;
}
.introduction_photos img{
   display:block;
   max-width: 320px;
   max-height: 320px;
   object-fit: contain;
}
.faq_wrap{
   display: grid;
   gap: 20px;
}
.faq{
   position: relative;
   padding: 25px 60px 25px 25px;
   background-color: #fff;
   border: 1px solid #0085d6;
   border-radius: 20px;
   cursor: pointer;
}
.faq:after{
   content: "";
   position: absolute;
   top: calc(50% - 8px);
   right: 24px;
   display: block;
   width: 16px;
   height: 16px;
   border-width: 2px;
   border-style: solid;
   border-color: #0085d6 #0085d6 transparent transparent;
   transform: translateY(-25%) rotate(135deg);
}
.faq.is--open:after{
   transform: translateY(25%) rotate(-45deg);
}
.faq_ttl{
   position: relative;
   padding-left: 1em;
   color: #0085d6;
   font-weight: bold;
   font-size: 1.2em;
}
.faq_ttl:before{
   content: "Q.";
   margin-left: -1em;
}
.faq_txt{
   display: none;
   position: relative;
   padding: 10px 0 0 1em;
}
.faq_txt:before{
   content: "A.";
   margin-left: -1em;
}
.contact{
   margin: 40px 0;
   text-align: center;
   display: inline-block;
   padding: 26px 80px;
   background-color: #f9f7f4;
}
.contact2 h3{
   margin-bottom: 20px;
}


.contents_wrap{
   position: relative;
   padding: 80px 0;
}
.contents_wrap--lower{
   padding: 40px 0;
}
.bg--1{
   background-color: #f9f7f4;
}
.bg--2{
   background-color: #fff6ee;
}
.bg--2:after{
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
   background: url(../img/top/datalist_bg.svg) center bottom repeat-x;
   background-size: 1000px;
}
.bg--3{
   background-color: #fff6ee;
}
.contents_inner{
   position: relative;
   width: 100%;
   max-width: 1260px;
   margin: 0 auto;
   padding: 0 15px;
   z-index: 1;
}
.contents_inner--1400{
   max-width: 1400px;
}
.contents_ttl{
   padding: 10px;
   margin-bottom: 80px;
   text-align: center;
}
.contents_ttl h2{
   position: relative;
   display: inline-block;
   font-size: 34px;
   letter-spacing: 4px;
   text-align: center;
   color: #333;
}
.contents_ttl--color2 h2{
   padding-bottom: 30px;
}
.contents_ttl--color2 h2:after{
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 8px;
   background-color: #ffdfc5;
}
.contents_ttl h2 span{
   padding: 0 3px;
   color: #0085d6;
   background-color: #fff;
   box-shadow: 2px 2px 4px #00000022;
}
.contents_ttl--color2 h2 span{
   color: #ff5500;
   background-color: transparent;
   box-shadow: none;
}
.contents_ttl--color3 h2 span{
   color: #fc47a2;
   background-color: transparent;
   box-shadow: none;
}
.contents_ttl h2.deco--line{
   position: relative;
   padding-bottom: 36px;
}
.contents_ttl h2.deco--line:after{
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   display: block;
   width: 50px;
   height: 6px;
   background-color: #0085d6;
}
.btnwrap{
   margin-bottom: 15px;
   text-align: center;
}
.btnwrap--start{
   text-align: left;
}
.btn_01{
   position: relative;
   display: inline-block;
   padding: 12px 44px 12px 30px;
   font-size: 17px;
   line-height: 22px;
   border-radius: 23px;
   text-align: center;
   text-decoration: none;
   color: #fff;
   background-color: #0056a3;
   box-shadow: 3px 3px 8px #00000022;
}
.btn_01:after{
   content: "";
   position: absolute;
   top: 50%;
   right: 24px;
   display: block;
   width: 10px;
   height: 10px;
   border-width: 2px;
   border-style: solid;
   border-color: #fff #fff transparent transparent;
   transform: translateY(-50%) rotate(45deg);
}
.btn_02{
   position: relative;
   display: inline-block;
   padding: 20px 100px;
   font-size: 25px;
   font-weight: bold;
   line-height: 30px;
   border-radius: 35px;
   text-align: center;
   text-decoration: none;
   color: #fff;
   background-color: #0056a3;
}
.btn_03{
   position: relative;
   display: inline-block;
   padding: 12px 30px;
   font-size: 17px;
   line-height: 22px;
   text-align: center;
   text-decoration: none;
   font-weight: bold;
   color: #000;
   border: 2px solid #000;
}

.pagetop_wrap {
   position: fixed;
   bottom: 0;
   right: 0;
   display: block;
   width: 50px;
   height: 50px;
   margin-left: auto;
   overflow: hidden;
   z-index: 6;
}
.btn__pagetop {
   position: relative;
   bottom: -50px;
   display: block;
   width: 50px;
   height: 50px;
   background: #0056a3;
   transition: all 0.3s;
}
.btn__pagetop.hover{
   opacity: 0.8;
}
.btn__pagetop:after{
   content: "";
   position: absolute;
   top: 20px;
   left: 0;
   right: 0;
   display: block;
   width: 20px;
   height: 20px;
   margin: auto;
   border-width: 2px 2px 0 0;
   border-style: solid;
   border-color: #fff;
   transform: rotate(-45deg);
}
.btn__pagetop.btn__pagetop--show{
   bottom: 0;
}
.footer{
   padding: 15px;
   text-align: center;
   background-color: #f9f7f4;
}
.footer_logo{
   margin-bottom: 5px;
   text-align: center;
}
.footer_logo img{
   width: 300px;
   max-width: 100%;
}
.copyright{
   font-size: 14px;
}



@media screen and (max-width: 1024px) {
   .is--pc {display: none !important;}
   .is--sp {display: block !important;}

   body {
      font-size: 1.5rem;
   }
   main{
      padding-bottom: 60px;
   }
   .header{
      width: 100%;
      padding: 10px;
      border-radius: 0;
      box-shadow: none;
   }
   .header_area1{
      display: grid;
      grid-template-columns: 1fr 50px;
      width: 100%;
      gap: 15px;
   }
   .header_logo p{
      padding-left: 18px;
      font-size: 15px;
   }
   .header_menubtn{
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
   }
   .header_menubtn:before{
      content: "";
      position: absolute;
      top: 8px;
      left: 6px;
      display: block;
      width: 38px;
      height: 2px;
      background-color: #00599b;
      transition: all 0.3s;
   }
   .header_menubtn:after{
      content: "";
      position: absolute;
      bottom: 8px;
      left: 6px;
      display: block;
      width: 38px;
      height: 2px;
      background-color: #00599b;
      transition: all 0.3s;
   }
   .header_menubtn .header_menubtn__parts{
      position: absolute;
      top: calc(50% - 1px);
      left: 6px;
      display: block;
      width: 38px;
      height: 2px;
      background-color: #00599b;
   }
   .header_menubtn.is--active:before{
      content: "";
      position: absolute;
      top: calc(50% - 1px);
      transform: rotate(45deg);
   }
   .header_menubtn.is--active:after{
      content: "";
      position: absolute;
      top: calc(50% - 1px);
      transform: rotate(-45deg);
   }
   .header_menubtn.is--active .header_menubtn__parts{
      display: none;
   }
   .header_area2{
      position: absolute;
      top: 80px;
      left: 0;
      z-index: 20;
      display: none;
   }
   .header_area2.is--open{
      display: block;
   }
   .header_area2 ul{
      padding: 0;
      flex-direction: column;
      background-color: #fff;
   }
   .header_area2 ul li{
      width: 100%;
      padding: 15px;
      border-bottom: 1px solid #eee;
      text-align: center;
   }
   .header_area2 ul li:first-child{
      border-top: 1px solid #eee;
   }
   .top_kv{
      padding: 0 15px;
   }
   .top_kv:after{
      height: 80px;
   }
   .top_kv_inner{
      gap: 20px;
      grid-template-columns: 1fr 1fr;
      align-items: center;
   }
   .top_kv_txt{
      padding: 40px 0;
   }
   .top_kv_txt h1{
      font-size: 26px;
      letter-spacing: 2px;
      margin-bottom: 5px;
   }
   .top_kv_txt h1 span{
      font-size: 32px;
   }
   .top_kv_txt h2{
      width: 100%;
      max-width: 352px;
      margin-bottom: 30px;
      padding: 5px 10px 7px;
      font-size: 15px;
   }
   .top_kv_txt p{
      margin-bottom: 20px;
      font-size: 18px;
   }
   .contents_wrap{
      padding: 50px 0;
   }
   .bg--2:after{
      background-size: 800px;
   }
   .contents_inner{
      padding: 0 10px;
   }
   .contents_ttl{
      margin-bottom: 40px;
      padding: 10px 0;
   }
   .contents_ttl h2{
      font-size: 34px;
      line-height: 1.8em;
      letter-spacing: 1px;
   }
   .contents_ttl--color2 h2{
      padding-bottom: 15px;
      line-height: 1.5em;
   }
   .contents_ttl h2.deco--line{
      line-height: 1.5em;
      padding-bottom: 25px;
   }
   .contents_ttl--color3 h2{
      line-height: 1.5em;
   }
   .btn_02{
      font-size: 22px;
      padding: 20px 40px;
   }
   .footer{
      padding: 20px 10px 15px;
   }
   .footer_logo{
      font-size: 17px;
   }
   .point{
      grid-template-columns: 1fr;
      gap: 30px;
      margin-bottom: 50px;
      padding-bottom: 50px;
      border-bottom: 2px dashed #ffffff;
   }
   .point_txt{
      order: 4;
   }
   .point_txt h4{
      font-size: 26px;
      text-align: center;
   }
   .point_txt p{
      max-width: 500px;
      margin: 0 auto;
   }
   .point_img div{
      width: 180px;
      height: 180px;
      margin: 0 auto !important;
   }
   .point_img div img{
      max-width: 100px;
      max-height: 100px;
   }
   .datalist_wrap{
      gap: 16px;
   }
   .datalist{
      width: calc(50% - 8px);
      padding: 15px;
      border-radius: 16px;
   }
   .datalist h4{
      font-size: 20px;
      margin-bottom: 5px;
   }
   .datalist_data1 p{
      padding: 15px 0;
      line-height: 40px;
      font-size: 30px;
   }
   .datalist_data1 p span{
      font-size: 50px;
      margin-right: 5px;
   }
   .datalist_data2 dl dt{
      line-height: 34px;
      font-size: 20px;
   }
   .datalist_data2 dl dd{
      font-size: 20px;
   }
   .datalist_data2 dl dd span{
      font-size: 24px;
   }
   .datalist__txt p{
      font-size: 16px;
   }
   .flow{
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      padding: 30px 20px;
      grid-template-columns: 1fr;
      gap: 20px;
   }
   .flow_ttl h4{
      font-size: 24px;
   }
   .flow_ttl h4 span{
      font-size: 17px;
   }
   .introduction_wrap{
      flex-direction: column;
      gap: 20px 0;
   }
   .introduction_panel{
      flex-wrap: wrap;
   }
   .introduction_panel > div{
      width: calc((100% / 3) - 8px);
   }
   .introduction_box{
      grid-template-columns: 110px 1fr;
      width: 100%;
      margin: 0;
   }
   .introduction_box__txt{
      padding: 20px 15px 20px 10px;
   }
   .introduction_box__txt h4{
      font-size: 1.2em;
   }
   .introduction_box__txt p{
      line-height: 1.6em;
   }
   .introduction_box__photo{
      padding-left: 10px;
   }
   .introduction_photos__wrap h3{
      font-size: 1.3em;
   }
   .introduction_photos{
      padding: 45px 50px 30px;
      flex-direction: column;
   }
   .introduction_photos img{
      width: 400px;
      max-width: 100%;
      max-height: inherit;
   }
   .faq{
      padding: 15px 40px 15px 20px;
   }
   .faq:after{
      top: calc(50% - 6px);
      right: 16px;
      width: 12px;
      height: 12px;
   }
   .contact{
      width: 100%;
      padding: 20px;
   }

}


@media screen and (max-width: 680px){
   .bg--2:after{
      background-size: 600px;
   }
   .contents_ttl h2{
      font-size: 30px;
   }
   .top_kv_inner {
      padding: 20px 0 0;
      grid-template-columns: 1fr;
      gap: 10px;
      place-items: center;
   }
   .top_kv_txt{
      width: 100%;
      padding: 10px 0;
      order: 2;
   }
   .top_kv_txt h1{
      margin-bottom: 0;
   }
   .top_kv_txt p{
      margin-bottom: 30px;
   }
}