@charset "UTF-8";

/* =========================================================
   ■ 共通設定
========================================================= */
@media screen and (max-width:800px) {

   /* レイアウト */
   .inner{padding: 0 4%;}

   /* リンク */
   a[href*=tel]{pointer-events: auto;}

   html,
   body{font-size: 14px;}

}


/* =========================================================
   ■ デバイス切り替え
========================================================= */
@media screen and (max-width:800px) {
   .pc_cont{display: none !important;}
   .sp_cont{display: block !important;}
}


/* =========================================================
   ■ テンプレート共通
========================================================= */
@media screen and (max-width:800px) {
   .editor_contents { line-height: 1.65; }

   .editor_contents :is(h1,h2,h3,h4,h5,h6) { margin: 2rem 0 1rem; }

   .editor_contents h1 { font-size: 1.6rem; }
   .editor_contents h2 { font-size: 1.35rem; }
   .editor_contents h3 { font-size: 1.15rem; }

   .editor_contents :is(p, ul, ol) { margin-bottom: 1.25rem; }
   .editor_contents .wp-block-image { margin-bottom: 1.5rem; }
}

/* =========================================================
   ■ ヘッダー
========================================================= */
@media screen and (max-width:800px) {
   header{padding: .5em 5%;}
   header p{font-size: 2rem;}
   header p span{font-size: 2.85rem;}
}


/* =========================================================
■ フッター / 共通UI
========================================================= */
@media screen and (max-width:800px) {
   /* ページトップ */
   .pagetop{
      inset: auto 5% 20px auto;
      width: 35px;
      height: 35px;
   }
   .pagetop::before{
      width: 9px;
      height: 9px;
   }
   .pagetop:hover{opacity: 1;}

   /* footer */
   footer{
      font-size: 1rem;
      padding-block: 0.15em;
   }
}


/* =========================================================
   ■ 共通パーツ
========================================================= */
@media screen and (max-width:800px) {
   /* ボタン */
   .btn_cont .btn a{
      column-gap: 0.8em;
      font-size: 1.428rem;
      padding: .8em .75em;
   }
   .btn_cont .btn a::after{
      width: 1.4em;
      height: 1.4em;
   }
   .btn_cont .copy{
      font-size: 1.428rem;
      padding: 0 1em;
      line-height: 1.4;
   }

   main{padding: 0 0 24px;}

}

/* =========================================================
    ■ KV
========================================================= */
@media screen and (max-width:800px) {
   /* kv_top */
   .kv .kv_top .inner{padding: 0 3%;}
   .kv .kv_top .balloon{
      font-size: 1.57rem;
      line-height: 1.5;
      margin: 0 auto 25px;
   }
   .kv .kv_top .balloon::before{
      inset: calc(100% - 1px) 70px auto 0;
      width: 20px;
      height: 12px;
   }
   .kv .kv_top .balloon .fz_s{font-size: 17px;}
   .kv .kv_top .balloon .fz_l{font-size: 3rem;}
   .kv .kv_top .balloon .txt_orange:last-of-type{font-size: 2em;}
   .kv .kv_top .balloon .txt_orange .fz_s{font-size: 22px;}

   .kv .kv_top .balloon + p{font-size: 1.85rem;}

   /* kv_bottom */
   .kv .kv_bottom{
      display: flex;
      flex-direction: column-reverse;
      padding: 0 0 45px;
   }
   .kv .kv_bottom > figure{
      position: relative;
      z-index: 0;
      inset: -12px auto auto;
      max-width: 350px;
      margin: 0 auto;
      transform: translate(-50px);
   }
   .kv .kv_bottom .inner{
      position: relative;
      z-index: 1;
      top: -80px;
      margin-bottom: -80px;
      max-width: 450px;
   }
   .kv .kv_bottom h1 .top .bg_white{font-size: 2.5rem;}
   .kv .kv_bottom h1 .top .bg_white::after{
      position: absolute;
      z-index: -2;
      inset: 0 100% 0 auto;
      margin: auto;
      content: '';
      width: 100%;
      height: 100%;
      background: #fff;
   }
   .kv .kv_bottom h1 .top .bg_white .fz_s{font-size: 1.85rem;}
   .kv .kv_bottom h1 .bottom{
      text-align: center;
      line-height: 1.3;
      font-size: 1.85rem;
      filter:
         drop-shadow(0 0 6px #fff)
         drop-shadow(0 0 2px #fff)
         drop-shadow(0 0 1px #fff)
      ;
      transform: translateZ(0) skew(-5deg);
      margin: 0 0 40px;
   }
   .kv .kv_bottom h1 .bottom span{font-size: 3.57rem;}
}

/* =========================================================
    ■ sec_problem
========================================================= */
@media screen and (max-width:800px) {
   /* first */
   .sec_problem .first{padding: 8vw 0 40px;}
   .sec_problem .first::before{height: 70px;}
   .sec_problem .first .inner{max-width: 500px;}

   .sec_problem .first h2{font-size: 2.15rem;}
   .sec_problem .first h2 span{font-size: 3.5rem;}
   .sec_problem .first .balloon_base{margin: 15px auto 0;}
   .sec_problem .first .balloon_base p{
      font-size: 1rem;
      padding: 2.2em 1.1em;
   }
   .sec_problem .first .balloon_base p:nth-of-type(3){inset: 50% auto auto 10%;}

   /* second */
   .sec_problem .second{padding: 30px 0 0;}
   .sec_problem .second .inner{max-width: 500px;}
   .sec_problem .second .inner > p{font-size: 1.43rem;}
   .sec_problem .second .inner > p::before{
      width: 2em;
      height: .85em;
   }
   .sec_problem .second .second_tel p{
      font-size: 2rem;
      line-height: 1.4;
      letter-spacing: .15em;
   }

   /* third */
   .sec_problem .third .alert{
      padding: 15px;
      margin: 0 auto 15px;
      background:repeating-linear-gradient(-45deg, #FFE500, #FFE500 7px, #000 7px, #000 14px);
   }
   .sec_problem .third .alert span{
      font-size: 1.42rem;
      padding: .5em .7em;
   }
   .sec_problem .third .alert + p{
      font-size: 1rem;
      margin: 0 auto 2rem;
      letter-spacing: 0.05em;
   }
   .sec_problem .third .alert + p .has_underline{padding-bottom: 0.2em;}
   .sec_problem .third .alert + p .has_underline::before{height: 3px;}
   .sec_problem .third .alert + p .txt_yellow{font-size: 1.42rem;}

   /* penalt */
   .sec_problem .third .penalty{
      font-size: 1.14rem;
      margin: 0 auto 1.14rem;
   }
   .sec_problem .third .penalty span{
      font-size: 2.5rem;
      padding: .2em;
   }
   .sec_problem .third .penalty span:nth-of-type(1){margin-top: 0.1em;}
   .sec_problem .third .penalty span:not(:last-of-type){margin-bottom: 0.1em;}

   .sec_problem .third .panalty_list{
      --gap: 4.5%;
      margin: 0 auto 1.12rem;
   }
   .sec_problem .third .panalty_list > li{
      padding: 10px 6px;
   }
   .sec_problem .third .panalty_list > li .lead{font-size: 10px;}
   .sec_problem .third .panalty_list > li .num{font-size: 1rem;}
   .sec_problem .third .panalty_list > li .num span{font-size: 3.42rem;}

   .sec_problem .third .panalty_list + p{font-size: 10px;}
   .sec_problem .third .panalty_list + p .txt_yellow{font-size: 1rem;}
}

/* =========================================================
    ■ sec_buyuden
========================================================= */
@media screen and (max-width:800px) {
   .sec_buyuden{
      padding: 70px 0 40px;
   }
   .sec_buyuden::before{height: 70px;}
   .sec_buyuden p{
      font-size: 1.357rem;
      font-weight: 900;
   }
   .sec_buyuden h2{
      color: #2D2D2D;
      font-size: 2rem;
   }
   .sec_buyuden h2 span{
      font-size: 2.64rem;
      font-feature-settings: "halt";
   }
}

/* =========================================================
    ■ sec_benefit
========================================================= */
@media screen and (max-width:800px) {
   .sec_benefit .mv::before{
      inset: auto 0 -30px 290px;
      margin: auto;
      width: 158px;
   }

   /* mv top ================= */
   .sec_benefit .mv .top{padding: 0 0 10px;}

   .sec_benefit .mv .top p{
      font-size: 3rem;
      width: 100%;
      line-height: 1.4;

   }
   .sec_benefit .mv .top p .fz_s{font-size: .7em;}
   .sec_benefit .mv .top p .fude{
      --stroke-size: 2px;
      font-size: 2.7rem;
      padding: 0.9em 0.25em 0.7em 0.4em;
      margin-top: -20px;
   }
   .sec_benefit .mv .top p .box_white{margin: 10px 0 0;}


   /* mv bottom ================= */
   .sec_benefit .mv .bottom{padding: 45px 0 0;}
   .sec_benefit .mv .bottom .inner{max-width: 450px;}
   .sec_benefit .mv .bottom .balloon{
      font-size: 1.7rem;
      margin: 0 0 20px;
   }
   .sec_benefit .mv .bottom .balloon::before{
      width: 25px;
      height: 17px;
   }

   .sec_benefit .mv .bottom .main_heading{
      font-size: 1.4285rem;
      filter:
         drop-shadow(0 0 6px #fff)
         drop-shadow(0 0 5px #fff)
         drop-shadow(0 0 2px #fff)
      ;
      line-height: 1.4;
   }
   .sec_benefit .mv .bottom .main_heading span{font-size: 2.4285rem;}

   /* desc ================= */
   .sec_benefit .desc{padding: 60px 0 24px;}
   .sec_benefit .desc h3{
      font-size: 1.71rem;
      margin: 0 auto 54px;
   }
   .sec_benefit .desc h3 span{font-size: 2.07rem;}

   .sec_benefit .desc ol{flex-direction: column;}
   .sec_benefit .desc ol li{
      width: 100%;
      padding-inline: 3%;
   }
   .sec_benefit .desc ol li::before{font-size: 32px;}

   .sec_benefit .desc ol li .text{min-height: 1px;}
   .sec_benefit .desc ol li .next{font-size: 1.15em;}
   .sec_benefit .desc ol li .result{font-size: 1.285rem;}

   /* cta ========== */
   .cta{margin: 0 auto 25px;}
   .cta .main_heading{
      font-size: 16px;
      margin: 0 auto 30px;
      letter-spacing: 0.05em;
   }
   .cta .main_heading span{font-size: 2.4285rem;letter-spacing: 0;}
}
@media screen and (max-width:470px) {
      .sec_benefit .mv::before{
      inset: auto 0 -30px auto;
   }
}

/* =========================================================
    ■ sec_introduce
========================================================= */
@media screen and (max-width:800px) {
   .sec_introduce{
      padding: 25px 0 80px;
      background: url(../img/page/lp_202605/intro_bg.jpg) no-repeat left top / cover;
   }
   .sec_introduce h2{
      font-size: 34px;
      padding: 0 0 0.5em;
      margin: 0 auto 1em;
   }
   .sec_introduce .flex{
      flex-direction: column;
      margin: 0 auto 30px;
   }
   .sec_introduce .flex::before{
      inset: 0 -100% auto;
      height: 430px;
   }
   .sec_introduce .flex > figure{
      width: 100%;
      max-width: 290px;
      margin: 0 auto;
   }
   .sec_introduce .flex > div{
      position: relative;
      z-index: 0;
      width: 100%;
   }
   .sec_introduce .flex > div::before{
      position: absolute;
      z-index: -1;
      inset: -100%;
      margin: auto;
      content: '';
      width: 100vw;
      height: 100%;
      background: #fff;
   }
   .sec_introduce .flex > div .name{
      font-size: 24px;
      margin: 0 0 .25em;
   }
   .sec_introduce .flex > div .name .role,
   .sec_introduce .flex > div .name .furigana{font-size: 1rem;}

   .sec_introduce .flex > div .text{margin: 0 0 1.5rem;}

   .ac_cont > dt{font-size: 18px;}
   .ac_cont > dd{padding: 20px 2%;}
   .ac_cont > dd dl{
      --w: 75px;
      flex-direction: column;
   }
   .ac_cont > dd dl:not(:last-of-type){margin-bottom: 18px;}
   .ac_cont > dd dl dt{margin-bottom: 0.3em;}
   .ac_cont > dd dl dd{
      width: 100%;
      padding: 0 0 0 1.5em;
      min-height: 1px0;
   }
}

/* =========================================================
    ■ sec_about
========================================================= */
@media screen and (max-width:800px) {
   .sec_about .bg_gray{
      padding: 50px 0 26px;
      background: 
         rgba(255, 255, 255, .5)
         url(../img/page/lp_202605/bg_gray_bg.jpg) no-repeat center bottom / cover
      ;
   }
   .sec_about .bg_gray h2 span{
      --shape: 30px;
      font-size: 16px;
      padding: 0.4em 1.5em;
   }
   .sec_about .bg_gray h2::before{
      --shape: 13px;
      width: calc(100% + 26px);
      height: calc(50% - 2px);
   }
   .sec_about .bg_gray .btn_cont{margin: 50px auto 0;}
   .sec_about .bg_gray .btn_cont .copy,
   .sec_about .bg_gray .btn_cont .btn a{font-size: 18px;}
   .sec_about .bg_gray .btn_cont .btn a{
      min-height: 70px;
      min-width: 100%;
   }
   /* フローティングCTA */
   .floating_cta{padding: 30px 2% 15px;}
   .floating_cta,
   .loaded .floating_cta.is_hidden,
   .loaded .floating_cta.is_closed{transform: translateY(calc(100% + 35px));}
   .floating_cta .close{
      width: 40px;
      height: 40px;
   }
   .floating_cta .close::before,
   .floating_cta .close::after{width: 32px;}
}

/* =========================================================
    下層共通
========================================================= */
@media screen and (max-width:800px) {
   main:not(.home){padding: 80px 0;}
   /* kv_sub */
   .kv_sub .ttl_cont .ttl_en{font-size: 28px;}
   .kv_sub .ttl_cont .ttl_ja{font-size: 16px;}

   /* contents_wrapper */
   .page .contents_wrapper{padding: 50px 0 0;}
}

/* =========================================================
   お問い合わせ
========================================================= */
@media screen and (max-width:800px) {
   /* フォーム共通 */
   .page_contact form .smf-item__label__text,
   .page_contact form .smf-text-control,
   .page_contact form .smf-textarea-control{
      font-size: 16px;
   }

   /* 必須 */
   .page_contact form .smf-form .smf-item:has([data-validations~="required"]) .smf-item__label{padding: 0 2.6em 0 0;}
   .page_contact form .smf-form .smf-item:has([data-validations~="required"]) .smf-item__label::before{
      inset: 0.35em 0 auto auto;
      color: #fff;
      font-size: 8px;
      padding: .3em .6em;
   }
}
@media screen and (max-width:640px) {
   /* 幅 */
   .smf-form--simple-table .smf-item{display: block;}
   .page_contact form .smf-form .smf-item__col--label{width: fit-content;}
   .page_contact form .smf-form .smf-item__col--controls{width: 100%;}
   /* btn */
   .page_contact form .smf-action .smf-button-control__control {
      font-size: 16px;
      padding: 0.6em 1.5em;
   }
}