@charset "UTF-8";
body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, footer, header, section {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 16px;
   font: inherit;
   vertical-align: baseline;
   box-sizing: border-box;
   color: #574537;
}
ol, ul {
   list-style: none;
}
a {
   text-decoration: none;
   transition: .3s;
}
html, body, button, input, select, textarea {
   font-family: YakuHanJP_Noto, ryo-gothic-plusn, Zen Maru Gothic, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, Meiryo, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.pc_only {
   display: block;
}
.sp_only {
   display: none;
}
.wrapper {
   background-color: #fcc938;
   position: relative;
   box-sizing: border-box;
   min-height: 100vh;
}
.main {
   text-align: center;
   margin: 0 auto;
   padding: 75px 0 0;
}
.dear {
   background-color: #fff;
   padding: 20px 0;
   font-size: 1.2rem;
   letter-spacing: 0.1rem;
}
.fadein {
   opacity: 0;
   transition: 1.2s;
}
.scrollin {
   opacity: 1;
}
.note {
   font-size: 1.2rem;
}
@media screen and (max-width: 600px) {
   .dear {
      font-size: 1.05rem;
      letter-spacing: 0;
   }
}
@media screen and (max-width: 350px){
   .sp_only {
   display: block;
}

}
/*--------------ヘッダー-----------------*/
.header {
   background-color: #fcc938;
   box-sizing: border-box;
   width: 100%;
   height: 75px;
   position: fixed;
   z-index: 9999;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
}
.logo img {
   width: 8rem;
}
.request_button {
   width: 240px;
   height: auto;
   background-color: #ed6d34;
   border: 3px solid #574537;
   border-radius: 9999px;
   cursor: pointer;
   transition: .3s;
   box-shadow: 0 5px #574537;
}
.request_button a {
   color: #fff;
   display: block;
   height: auto;
   font-size: 1.4rem;
   padding: 3% 0 1% 22%;
}
.request_button:hover {
   box-shadow: unset;
   transform: translateY(5px);
}
.request_button a::before {
   content: '';
   display: inline-block;
   width: 28px;
   height: 28px;
   background-image: url(../images/materials.svg);
   background-size: contain;
   vertical-align: middle;
   margin-right: 10px;
   margin-bottom: 6px;
}
@media screen and (max-width: 600px) {
   .header {
      padding: 0 10px;
   }
}
@media screen and (max-width: 430px) {
   .logo {
      padding: 5px 0 0 5px;
   }
   .logo img {
      width: 6.5rem;
   }
   .request_button {
      width: 200px;
   }
   .request_button a {
      font-size: 1.2rem;
      padding: 2% 0 0 20%;
   }
}
/*------------メインビジュアル------------*/
.mv_container {
   position: relative;
   width: 100%;
   height: auto;
   background-image: url(../images/main_image_PC.jpg);
   background-size: cover;
   background-position: center center;
   display: flex;
   justify-content: center;
   align-items: center;
}
.mv_ttl img {
   width: 100%;
   max-width: 550px;
   margin-top: 60%;
   margin-left: -20%;
   margin-bottom: 60%;
}
@media screen and (max-width: 600px) {
   .mv_ttl img {
      width: 100%;
      max-width: 360px;
      margin: 80% auto 60%;
      padding-left: 5%;
   }
}
.fadein_animation {
   animation: fade-in 3s;
   animation-fill-mode: forwards;
}
@keyframes fade-in {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
@media screen and (min-width:601px) and (max-width:800px) {
   .mv_ttl img {
      width: 90%;
      margin-top: 60%;
      margin-left: 0;
      margin-bottom: 60%;
   }
}

@media screen and (max-width: 400px){
   .dear {
      font-size: 0.95rem;
   }
}

/*----------------about----------------*/
.about_container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px 10px 30px;
   height: auto;
}
.about_bg img {
   width: 100%;
   max-width: 1000px;
}
.about_ttl {
   position: relative;
   padding: .5rem .7rem;
   border-radius: 5px;
   background-color: #ed6d34;
   color: #fff;
   font-size: 1.5rem;
   display: inline-block;
   width: 250px;
   margin: 20px 0 30px;
}
.about_ttl::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 45%;
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-top: 10px solid #ed6d34;
}
.about_detail {
   font-size: 1.3rem;
   line-height: 2.5rem;
   letter-spacing: 0.1rem;
}
@media screen and (max-width: 500px) {
   .about_ttl {
      font-size: 1.3rem;
   }
   .about_bg {
      background-image: none;
   }
   .about_ttl {
      width: 200px;
   }
   .about_detail {
      font-size: 1.1rem;
      margin-bottom: 10px;
   }
}
.benefit img {
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
}
/*----------------メリット----------------*/
.merit {
   background-color: #f4961c;
}
.merit_container {
   padding: 50px 20px 60px;
   max-width: 1200px;
   margin: 0 auto;
}
.merit_ttl {
   display: flex;
   justify-content: center;
   align-items: center;
   color: #574537;
   font-size: 1.5rem;
   font-weight: bold;
   margin-bottom: 40px;
}
.merit_ttl::before, .merit_ttl::after {
   width: 3px;
   height: 30px;
   background-color: #574537;
   content: '';
}
.merit_ttl::before {
   transform: rotate(-35deg);
   margin-right: 30px;
}
.merit_ttl::after {
   transform: rotate(35deg);
   margin-left: 30px;
}
.merit_contents {
   display: flex;
   justify-content: space-between;
   margin: 100px 0 0 0;
}
.merit_item {
   background-color: #fcfaec;
   border-radius: 20px;
   width: calc(33.33% - 15px);
   height: auto;
   position: relative;
   padding: 20px 30px;
   border: 3.5px solid #574537;
   display: flex;
   flex-flow: column;
}
.merit_number img {
   width: 120px;
   display: inline-block;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   margin: -20% auto;
}
.merit_overview {
   font-size: 1.6rem;
   font-weight: bold;
   margin: 15% 0 10% 0;
   color: #ed6d34;
   letter-spacing: 0.1rem;
}
.merit_detail {
   text-align: left;
   line-height: 1.6rem;
   margin-bottom: 20px;
}
.merit_detail2 {
   display: inline-block;
   position: absolute;
   bottom: 6%;
   right: 10%;
}
.merit_detail_sup {
   text-align: left;
   background-color: #bce2e8;
   border-radius: 10px;
   padding: 10px;
   margin-top: auto;
   position: relative;
   display: inline-block;
}
.merit_detail_sup::after {
   content: '';
   position: absolute;
   bottom: 100%;
   left: 10%;
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-bottom: 10px solid #bce2e8;
}
@media screen and (min-width:801px) and (max-width:1000px) {
   .merit_overview {
      font-size: 1.43rem;
      font-weight: bold;
      margin: 30% 0 10% 0;
      color: #ed6d34;
      letter-spacing: 0.1rem;
   }
   .merit_item {
      width: calc(33.33% - 10px);
   }
}
@media screen and (min-width:601px) and (max-width:800px) {
   .merit_contents {
      flex-flow: column;
      margin-top: 20px;
   }
   .merit_item {
      width: 60%;
      margin: 6% auto;
   }
   .merit_number img {
      width: 110px;
      margin: -15% auto;
   }
}
@media screen and (max-width: 600px) {
   .merit_ttl {
      font-size: 1.4rem;
   }
   .merit_ttl::before {
      transform: rotate(-30deg);
      margin-right: 15px;
   }
   .merit_ttl::after {
      transform: rotate(30deg);
      margin-left: 15px;
   }
   .merit_contents {
      flex-flow: column;
      margin-top: 20px;
   }
   .merit_item {
      width: 90%;
      margin: 12% auto;
      min-height: 380px;
   }
   .merit_detail2 {
      position: absolute;
      bottom: 6%;
      right: 10%;
   }
   .merit_number img {
      width: 100px;
      margin: -12% auto;
   }
   .merit_overview {
      font-size: 1.5rem;
      margin: 20% 0 10% 0;
   }
   .merit_container {
      padding: 50px 10px 40px;
   }
}
/*----------------導入方法----------------*/
.howto {
   background-color: #efefef;
}
.howto_container {
   padding: 40px 10px;
   max-width: 1200px;
   margin: 0 auto;
}
.howto_ttl, .form_ttl {
   display: inline-block;
   position: relative;
   padding: 0 4rem;
   color: #574537;
   margin: 20px 0 40px;
   font-size: 1.5rem;
   font-weight: bold;
}
.howto_ttl::before, .howto_ttl::after, .form_ttl::before, .form_ttl::after {
   content: '';
   display: inline-block;
   position: absolute;
   top: 50%;
   width: 45px;
   height: 2px;
   background-color: #574537;
}
.howto_ttl::before, .form_ttl::before {
   left: 0;
}
.howto_ttl::after, .form_ttl::after {
   right: 0;
}
.howto_contents {
   display: flex;
   justify-content: space-between;
   margin: 30px 10px;
}
.howto_item {
   background-color: #fff;
   border-radius: 10px;
   width: 30%;
   height: auto;
   position: relative;
   padding: 20px 10px;
   border: 2px solid #eee;
}
.howto_item:nth-child(n+2)::before {
   content: '';
   display: inline-block;
   width: 40px;
   height: 40px;
   background-image: url(../images/arrow_row.png);
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   top: 40%;
   left: -12%;
}
.howto_overview {
   background-color: #ed6d34;
   font-size: 1.2rem;
   color: #fff;
   width: 10rem;
   padding: 5px 10px;
   border-radius: 20px;
   display: inline-block;
   position: absolute;
   right: 0;
   left: 0;
   margin: -40px auto;
}
.howto_image, .howto_detail1, .howto_detail2, .howto_detail3 {
   display: inline-block;
   margin-top: 20px;
}
.howto_img1 {
   width: 80px;
   margin: 20px 15px 0 0;
}
.howto_img2 {
   width: 80px;
   margin: 10px 30px 0 0;
}
.howto_img3 {
   width: 75px;
   margin: 10px 30px 0 0;
}
.howto_detail1, .howto_detail2, .howto_detail3 {
   vertical-align: top;
   font-size: 1rem;
   text-align: left;
}
.howto_detail1 {
   padding-top: 20px;
}
.howto_detail2 {
   padding-top: 20px;

}
.howto_detail3 {
   padding-top: 10px;
}
@media screen and (max-width: 1100px) {
   .howto_image, .howto_detail1, .howto_detail2, .howto_detail3 {
      display: block;
   }
   .howto_img1, .howto_img2, .howto_img3 {
      margin: 0;
   }
   .howto_img1 {
      width: 100px;
      padding-top: 10px;
   }
   .howto_detail1, .howto_detail2, .howto_detail3 {
      padding: 0;
   }
   .howto_detail1, .howto_detail2 {
      margin-top: 30px;
   }
      .pc_only {
      display: none;
   }

}
@media screen and (max-width: 600px) {
   .howto_contents {
      flex-flow: column;
   }
   .howto_item {
      width: 90%;
      margin: 7% auto;
      padding-right: 30px;
      padding-left: 30px;
   }
   .howto_image, .howto_detail1, .howto_detail2, .howto_detail3 {
      display: inline-block;
   }
   .howto_image {
      width: 50%;
   }
   .howto_item:nth-child(n+2)::before {
      content: '';
      display: inline-block;
      width: 40px;
      height: 40px;
      background-image: url(../images/arrow_culumn.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: -25%;
      left: 45%;
   }
}
@media screen and (max-width: 450px) {
   .howto_contents {
   margin: 10px 10px;
}

   .howto_item {
      width: 100%;
            margin: 10% auto;

   }
      .howto_item:nth-child(n+2)::before {
            top: -24%;   
}
         .howto_item:nth-child(n+3)::before {
            top: -22%;   
}

}
.request_button_main {
   width: 300px;
   margin: 60px auto 30px;
}
.request_button_main a {
   font-size: 1.4rem;
   padding: 3% 0 1% 0;
}
@media screen and (max-width: 600px) {
   .request_button_main {
   margin: 20px auto 30px;
}

}
/*----------------よくある質問----------------*/
.faq {
   padding: 50px 10px;
}
.faq_container {
   max-width: 1200px;
   margin: 0 auto 60px;
}
.faq_ttl {
   display: inline-block;
   position: relative;
   font-size: 1.5rem;
   font-weight: bold;
   margin: 0 0 50px 0;
}
.faq_ttl::before {
   content: '';
   display: inline-block;
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background-color: #574537;
}
.accordion {
   margin-top: 10px;
}
.accordion_area .accordion .accordion_header {
   background-color: #efefef;
   border: 1px solid #ccc;
   padding: 1.5rem 4rem 1.5rem 2rem;
   position: relative;
   z-index: +1;
   cursor: pointer;
   transition: .2s;
   text-align: left;
}
.accordion_area .accordion .accordion_header:not(.open):hover {
   background-color: #fff;
}
.accordion_area .accordion:nth-child(odd) .accordion_header {
   background-color: #efefef;
}
.accordion_area .accordion:nth-child(odd) .accordion_header:not(.open):hover {
   background-color: #fff;
}
.accordion_area .accordion .accordion_header .ac_box {
   position: absolute;
   top: 50%;
   right: 2rem;
   width: 20px;
   height: 20px;
   margin-top: -10px;
}
.accordion_area .accordion .accordion_header .ac_box:before, .accordion_area .accordion .accordion_header .ac_box:after {
   position: absolute;
   content: "";
   margin: auto;
   box-sizing: border-box;
   vertical-align: middle;
}
.accordion_area .accordion .accordion_header .ac_box:before {
   border-top: 2px solid #574537;
   width: 20px;
   height: 0;
   top: 0;
   bottom: 0;
   right: 0;
}
.accordion_area .accordion .accordion_header .ac_box:after {
   border-left: 2px solid #574537;
   width: 0;
   height: 20px;
   top: 0;
   bottom: 0;
   right: 9px;
   transition: .3s;
}
.accordion_area .accordion .accordion_header.open .ac_box:after {
   height: 0;
}
.accordion_area .accordion .ac_inner {
   display: none;
   padding: 1.5rem 2rem 1.5rem 2rem;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   box-sizing: border-box;
   background: #fff;
   text-align: left;

}
.p-faq_headinner {
   display: block;
   padding-left: 35px;
   position: relative;
   line-height: 1.5;
}
.p-faq_headinner::before {
   position: absolute;
   left: 0;
   content: "Q．";
   color: #574537;
   font-size: 1.1rem;
   font-weight: bold;
}
.p-faq_headinner p.p-faq_q-txt {
   font-size: 1.1rem;
}
.p-faq__bodyinner {
   display: block;
   padding-left: 35px;
   position: relative;
   line-height: 1.5;
}
.p-faq__bodyinner::before {
   position: absolute;
   left: 0;
   content: "A．";
   color: #ed6d34;
   font-size: 1.1rem;
   font-weight: bold;
}
.p-faq__bodyinner p.p-faq__a-txt {
   font-size: 1rem;
}
/*--------------フォーム------------------*/
.form {
   background-color: #fcf7ea;
}
.form_container {
   padding: 40px 10px;
   max-width: 1200px;
   margin: 0 auto;
}
.c-form {
   max-width: 640px;
   margin: 30px auto;
   text-align: left;
}
.c-form__item {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 20px;
}
.c-form__label, .c-form__input {
   padding: 10px;
}
.c-form__label {
   width: 90%;
}
.c-form__input {
   width: 90%;
   font-size: 16px;
   border: solid 2px #fabf13;
   border-radius: 4px;
}
.c-form__input:focus-visible {
   outline: #ed6d34 auto 2px;
}
.c-form__required {
   color: #fff;
   background-color: #ed6d34;
   border-radius: 4px;
   padding: 1px 8px 3px;
   margin: 0 0 0 18px;
   font-size: 0.8rem;
}
textarea.c-form__input {
   height: 160px;
}
@media (min-width: 640px) {
   .c-form__item {
      flex-wrap: nowrap;
   }
   .c-form__label {
      width: 40%;
   }
   .c-form__input {
      width: 55%;
   }
}

.checkbox {
   padding: 0 5px;
   margin-bottom: 30px;
   
}
.checkbox_txt {
   padding: 3px;
   margin-top: 10px;
}
.checkbox_info {
   text-decoration: underline;
   color: #009cd0;
}
.agree_caution {
   text-align: center;
   position: relative;
   margin-bottom: 15px;
}
.agree_caution_txt {
      background-color: #ed6d34;
   display: inline-block;
   border-radius: 10px;
   padding: 10px;
   color: #fff;
   font-size: 0.9rem;
}

.agree_caution_txt::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 48.5%;
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-top: 10px solid #ed6d34;
}



.c-form__submit {
   text-align: center;
}
.submit-btn:disabled {
   padding: 10px 20px;
   display: block;
   width: 200px;
   border-radius: 10px;
   font-size: 1rem;
   margin: 0 auto;
   background-color: #ccc;
   color: #535353;
   cursor: not-allowed;
   border: 2px solid #aaa;
}
.submit-btn{
   padding: 10px 20px;
   display: block;
   width: 200px;
   border-radius: 10px;
   font-size: 1rem;
   margin: 0 auto;
   background-color: #ed6d34;
   color: #fff;
    cursor: pointer;
   border: 2px solid #574537;
}

/*--------------フッター------------------*/
.footer {
   background-color: #fff;
   text-align: center;
   padding: 30px 0 15px;
}
.fotter_box {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   gap: 30px;
   align-items: center;
}
.footer_logo_box {
   max-width: 1200px;
   margin: 30px auto;
   display: flex;
   justify-content: center;
   gap: 40px;
}
.footer_logo {
   display: flex;
   align-items: center;
   gap: 10px;
}
.footer_logo_img {
   width: 150px;
}
.tohonav {
   display: flex;
   justify-content: center;
   gap: 40px;
   max-width: 1200px;
   margin: 20px auto 40px;
   flex-wrap: wrap;
}
.tohonav_item {
   font-size: 0.8rem;
}
.copy {
   font-size: 0.8rem;
}
@media screen and (max-width: 1100px) {
   .fotter_box {
      flex-direction: column;
   }
   .footer_logo_box {
      margin: 10px auto;
   }
   .tohonav {
      margin: 0 auto 20px;
   }
}
@media screen and (max-width: 600px) {
   .footer_logo_ttl {
      font-size: 0.8rem;
   }
   .footer_logo_img {
      width: 120px;
   }
   .tohonav {
      gap: 20px;
   }
   .tohonav_item {
      margin: 0;
   }
}
@media screen and (max-width: 420px) {
   .footer_logo {
      flex-direction: column;
   }
}
/* -------------トップに戻る---------------*/
.float-button_wrap {
   display: none;
   position: fixed;
   bottom: 10px;
   right: 10px;
   z-index: 10;
}
.float-button_wrap img {
   width: 80px;
}
.float-button_wrap a {
   display: flex;
}
@media screen and (min-width:541px) and (max-width:1000px) {
   .float-button_wrap img {
      width: 70px;
   }
}
@media screen and (max-width: 540px) {
   .float-button_wrap img {
      width: 60px;
   }
}
/* -------------サンクスページ---------------*/
.thanks {
   background-color: #fcf7ea;
}
.thanks_container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 30px 0;
}
.thanks_ttl {
   padding: 100px 0 40px 0;
   font-size: 2rem;
   font-weight: bold;
}
.thanks_txt{
   font-size: 1.2rem;
   margin-bottom: 100px;
}
.home-button {
   width: 240px;
   height: auto;
   font-size: 18px;
   font-weight: bold;
   color: #fff;
   background-color: #ed6d34;
   border: solid 3px #574537;
   border-radius: 10px;
   padding: 10px 0;
   transition: .3s;
   cursor: pointer;
   box-shadow: 0 5px #574537;
   text-align: center;
   margin: 30px auto 100px;

}
.home-button:hover {
   box-shadow: unset;
   transform: translateY(5px);
}
.home-button a {
   color: #fff;
}