@charset "UTF-8";
/* =====================================================================
   wp-components-common.css ｜ LP系ページ共通の「デザイン」共有
   ---------------------------------------------------------------------
   wp-override-common.css が「WP / Cocoon / style_common.css の“打ち消し”」専用なのに対し、
   こちらは打ち消しではない “純粋なデザイン指定” のうち、TOP(front-page.php) と
   ヒゲ(page-hige.php) で共通の UI コンポーネントスタイルを集約する。
   - 責務を分離することで、将来 WordPress / Cocoon から脱却しても、デザイン分は
     この1ファイルを引き継げばよく、打ち消し(override)と一緒に破棄されない。
   - functions.php で対象ページ限定 enqueue（is_front_page / is_page('hige')）。
     読み込み順は wp-override-common.css の後、各ページ style-wp.css の前。
     セレクタは #section .__cta（詳細度 0,1,1,0）で、各 style-wp.css の同名ルールより
     先に読み込まれるため、必要ならページ側で素直に上書きできる（カスケード自然順）。
   ===================================================================== */

/* ---------------------------------------------------------------------
   丸枠アウトラインCTAボタン共通（透明背景＋白2px枠＋角丸pill＋テキスト＋矢印）
   ---------------------------------------------------------------------
   対象（実機DOMで確認した同一レイアウトの全ボタン）:
     TOP(front-page.php) : #features/#plans/#case/#parts/#qa/#column .__cta
     ヒゲ(page-hige.php)  : #reason/#no-extra/#qa/#greeting/#popular .__cta
   ・hover で opacity:0.8（#section .__cta:hover = (0,1,2,0) で Cocoon の a:hover{opacity}
     (0,0,1,1) や override の a:hover{opacity:1} に詳細度で勝つ）。
   ・transition は opacity と clip-path。clip-path は [data-cta-reveal] による
     スクロール・ワイプ表示（左→右）と timing を合わせた指定で、リビール機能を
     後からマークアップに付与しても破綻しないようにするための将来互換分。
     ※ #section .__cta (0,1,1,0) は [data-cta-reveal] (0,1,0) より優先するが値は同一。
   ・各 __cta の枠線・角丸・寸法など “見た目本体” は各ページ style-wp.css に残す
     （transition / hover の挙動だけをここへ一本化）。
   --------------------------------------------------------------------- */
#features .features__cta,
#plans .plans__cta,
#case .case__cta,
#parts .parts__cta,
#qa .qa__cta,
#column .column__cta,
#reason .reason__cta,
#no-extra .no-extra__cta,
#greeting .greeting__cta,
#popular .column__cta {
   transition:
      opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
      clip-path 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#features .features__cta:hover,
#plans .plans__cta:hover,
#case .case__cta:hover,
#parts .parts__cta:hover,
#qa .qa__cta:hover,
#column .column__cta:hover,
#reason .reason__cta:hover,
#no-extra .no-extra__cta:hover,
#greeting .greeting__cta:hover,
#popular .column__cta:hover {
   opacity: 0.8;
}

/* ---------------------------------------------------------------------
   ページトップへ戻るボタン（見本サイト準拠 / 縦線 + ドット + PAGE TOP 縦書き）
   ---------------------------------------------------------------------
   TOP(front-page.php) / ヒゲ(page-hige.php) 共通の追従ボタン。両ページで同一のため
   ここへ一本化（旧: 各 style-wp.css に重複定義していた分を集約）。
   ・マークアップ … 各テンプレートの <a class="pagetop">…</a>
   ・出現/挙動    … 各 script.js（window.scrollY > innerHeight*0.8 で is-visible 付与、
                    クリックで window.scrollTo({top:0, behavior:'smooth'})）
   ・Cocoon 既定 #go-to-top の非表示は wp-override-common.css 側（打ち消し責務）に置く。
   値は見本サイト（hige_datumou）の実機 .pagetop と一致。
   --------------------------------------------------------------------- */
.pagetop {
   position: fixed;
   right: 15px;
   bottom: 130px;
   z-index: 9998;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   width: 36px;
   text-decoration: none;
   color: #FFFFFF;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
}

.pagetop.is-visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.pagetop:hover {
   opacity: 0.65;
}

.pagetop__bar {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0;
}

.pagetop__dot {
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #FFFFFF;
}

.pagetop__line {
   display: block;
   width: 2px;
   height: 40px;
   background: #FFFFFF;
}

.pagetop__text {
   font-family: "Anton", sans-serif;
   font-weight: 400;
   font-size: 20px;
   line-height: 1;
   letter-spacing: 0.04em;
   color: #FFFFFF;
   writing-mode: vertical-rl;
   text-orientation: sideways;
}

@media (prefers-reduced-motion: reduce) {
   .pagetop {
      transition: opacity .4s ease, visibility .4s ease;
      transform: none;
   }

   .pagetop.is-visible {
      transform: none;
   }
}

@media screen and (max-width: 781px) {
   .pagetop {
      right: 16px;
      bottom: 110px;
      gap: 14px;
      width: 28px;
   }

   .pagetop__dot {
      width: 8px;
      height: 8px;
   }

   .pagetop__line {
      height: 30px;
   }

   .pagetop__text {
      font-size: 24px;
   }
}

/* ===== SP追従CTA（.floating-banner）：TOP（front-top-page）／ヒゲ（wp-hige-page）共通定義 =====
   ・元はヒゲ版（mens-wp-hige/style-wp.css）の定義。両ページで同一表示にするため共通CSS（純粋デザインUI）へ集約。
   ・SP/タブレット用(max-width:1024px)。PCは disp_no_pc が効いたままなので display:flex を当てず、PCには出さない。
   ・追従（position:fixed / bottom:0 等）はここ(max-width:1024px)で当てる。css/style_common.css の
     .floating-banner は fixed を max-width:480px でしか付けないため、481〜1024px で「表示はされるが
     追従しない」宙ぶらりん状態になる。表示ルールと同じ 1024px に揃えてこの隙間を解消する。
   ・表示は「常時表示（スクロール連動なし）」。css/style_common.css の .floating-banner{opacity:0;
     pointer-events:none}（≤480px・旧 <img> バナー用フェード）と .blockIn{opacity:1} は他ページ用に残すが、
     当2ページの新CTAはこのスコープ(詳細度 0,0,2,1 > 旧 0,0,1,0)で opacity:1 / pointer-events:auto に上書きし、
     blockIn（テーマ本体JSがスクロールで付与）に依存しない常時表示にする。
   ・要素はテーマ footer.php がページラッパーの外に出力するため、ラッパースコープを付けず body クラスで当てる。 */
@media screen and (max-width: 1024px) {

   body.front-top-page .floating-banner,
   body.wp-hige-page .floating-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 2;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      /* レガシー style_common.css(≤480px) の opacity:0 / pointer-events:none を打ち消し、常時表示にする */
      opacity: 1;
      pointer-events: auto;
      transition: none;
      /* レガシー style_common.css(≤480px) の半透明白背景も、当2ページは 1024px まで効かせる */
      background-color: rgba(255, 255, 255, 0.5);
   }

   body.front-top-page .floating-banner .footer-banner__cta,
   body.wp-hige-page .floating-banner .footer-banner__cta {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.923vw;
      width: 66.667vw;
      height: 15.385vw;
      background: linear-gradient(0deg, #BB0001 0%, #FF0001 100%);
      box-shadow: 0 6px 10.5px rgba(0, 0, 0, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 3px 0 0 rgba(255, 255, 255, 0.2), inset -3px 0 0 rgba(0, 0, 0, 0.2);
      border-radius: 12.821vw;
      text-decoration: none;
      box-sizing: border-box;
      overflow: hidden;
   }

   body.front-top-page .floating-banner .footer-banner__cta-text,
   body.wp-hige-page .floating-banner .footer-banner__cta-text {
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700;
      font-size: 4.038vw;
      line-height: 1.2;
      letter-spacing: -0.06em;
      color: #FFFFFF;
      white-space: nowrap;
   }

   body.front-top-page .floating-banner .footer-banner__cta-arrow,
   body.wp-hige-page .floating-banner .footer-banner__cta-arrow {
      flex: none;
      width: 0;
      height: 0;
      border-top: 1.667vw solid transparent;
      border-bottom: 1.667vw solid transparent;
      border-left: 1.795vw solid #FFFFFF;
   }

   /* ホバー時：CTA上に「キラッ」と光が走る */
   body.front-top-page .floating-banner .footer-banner__cta::before,
   body.wp-hige-page .floating-banner .footer-banner__cta::before {
      content: "";
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 100%);
      transform: skewX(-20deg);
      transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
   }

   body.front-top-page .floating-banner .footer-banner__cta:hover::before,
   body.front-top-page .floating-banner .footer-banner__cta:focus-visible::before,
   body.front-top-page .floating-banner .footer-banner__cta:active::before,
   body.wp-hige-page .floating-banner .footer-banner__cta:hover::before,
   body.wp-hige-page .floating-banner .footer-banner__cta:focus-visible::before,
   body.wp-hige-page .floating-banner .footer-banner__cta:active::before {
      left: 125%;
   }
}


@media screen and (min-width: 481px) {

   body.front-top-page .floating-banner .footer-banner__cta,
   body.wp-hige-page .floating-banner .footer-banner__cta {

      width: 49.667vw;
      height: 8.385vw;
   }

   body.front-top-page .floating-banner .footer-banner__cta .footer-banner__cta-text,
   body.wp-hige-page .floating-banner .footer-banner__cta .footer-banner__cta-text {
      font-size: 3vw;
   }

   body.front-top-page .floating-banner .footer-banner__cta .footer-banner__cta-arrow,
   body.wp-hige-page .floating-banner .footer-banner__cta .footer-banner__cta-arrow {
      border-top: 1vw solid transparent;
      border-bottom: 1vw solid transparent;
      border-left: 1vw solid #FFFFFF;
   }
}

/* ========================================================================
   FLOW セクション（TOP・ヒゲ共通） / 共通パーシャル mens-wp-common/component/flow-section.php 用
   ※ 元は mens-wp-top/style-wp.css・mens-wp-hige/style-wp.css に分散していたものを共通化。
      ソース順は TOP の元ファイルを踏襲（base → 780サブセット → 1050 → 780）。
======================================================================== */
   /* ========================================
   FLOW
======================================== */
   #flow {
      position: relative;
      width: 100%;
      padding: 0 0 200px;
      box-sizing: border-box;
      overflow-x: clip;
   }

   #flow .flow__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 1120px;
      width: 100%;
      margin: 0 auto;

      box-sizing: border-box;
   }

   #flow .flow__head {
      display: flex;
      flex-direction: column;
      width: clamp(905px, 86.15vw, 1120px);
      padding-bottom: 80px;
   }

   #flow .flow__h2 {
      margin: 0;
      font-family: "Anton", sans-serif;
      font-weight: 400;
      font-size: 160px;
      line-height: 1.1;
      color: #ffffff;
   }

   #flow .flow__h2 span {
      display: inline-block;
      opacity: 0;
      transform: translate(0, 60px) rotate(12deg);
      transform-origin: 0 100%;
      transition:
         opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
         transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
   }

   #flow .flow__h2.is-animated span {
      opacity: 1;
      transform: translate(0, 0) rotate(0);
   }

   #flow .flow__h2.is-animated span:nth-child(1) {
      transition-delay: 0ms;
   }

   #flow .flow__h2.is-animated span:nth-child(2) {
      transition-delay: 60ms;
   }

   #flow .flow__h2.is-animated span:nth-child(3) {
      transition-delay: 120ms;
   }

   #flow .flow__h2.is-animated span:nth-child(4) {
      transition-delay: 180ms;
   }

   #flow .flow__h3 {
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700;
      font-size: 26px;
      line-height: 1.5;
      letter-spacing: -0.02em;
      color: #8e8e8e;
   }

   /* FLOW - スライダー（4枚カード横並び） */
   #flow .flow__slider {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   #flow .flow__cards {
      display: flex;
      flex-direction: row;
      gap: clamp(22px, 2.308vw, 30px);
      padding: 0 0 80px clamp(680px, 68.462vw, 890px);
      width: max-content;
      max-width: none;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
   }

   #flow .flow__cards.is-dragging {
      cursor: grabbing;
      transition: none;
   }

   #flow .flow__card-img {
      pointer-events: none;
      -webkit-user-drag: none;
   }

   #flow .flow__card {
      position: relative;
      flex: none;
      width: clamp(354px, 35.385vw, 460px);
      aspect-ratio: 460 / 465;
      height: auto;
      scroll-snap-align: start;
   }

   /* FLOW - カード見出し（番号 + タイトル） */
   #flow .flow__card-head {
      position: absolute;
      top: 0;
      height: 52px;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      gap: 15px;
   }

   #flow .flow__card--01 .flow__card-head {
      left: 0;
   }

   #flow .flow__card--02 .flow__card-head {
      left: 0;
   }

   #flow .flow__card--03 .flow__card-head {
      left: 0;
   }

   #flow .flow__card--04 .flow__card-head {
      left: 0;
   }

   #flow .flow__card-num {
      display: inline-block;
      height: auto;
      font-family: "Anton", sans-serif;
      font-weight: 400;
      font-size: clamp(45px, calc(6vw - 18px), 60px);
      line-height: 1;
      letter-spacing: 0;
      color: transparent;
      -webkit-text-stroke: 1.5px #ffffff;
   }

   #flow .flow__card-title {
      margin: 0;
      padding-top: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700;
      font-size: clamp(30px, calc(4vw - 12px), 40px);
      line-height: 1;
      letter-spacing: 0;
      color: #ffffff;
   }

   #flow .flow__card-image {
      position: absolute;
      left: 0;
      top: 19.78%;
      width: 100%;
      aspect-ratio: 460 / 270;
      height: auto;
      overflow: hidden;
      border-radius: 7.5px;
      opacity: 0.9;
      background: #a4a4a4;
   }

   #flow .flow__card-img {
      position: absolute;
      max-width: none;
      display: block;
   }

   /* 各カードの画像クロップ位置 */
   #flow .flow__card--01 .flow__card-img {
      width: 118.7%;
      height: auto;
      left: 0;
      top: -17.44%;
      /* -52.5/270 */
   }

   #flow .flow__card--02 .flow__card-img {
      width: 116.25%;
      height: auto;
      left: -10.87%;
      /* -50/460 */
      top: -5.28%;
      /* -14.25/270 */
   }

   #flow .flow__card--03 .flow__card-img {
      width: 124.57%;
      height: auto;
      left: -17.93%;
      /* -82.5/460 */
      top: -10.28%;
      /* -27.75/270 */
   }

   #flow .flow__card--04 .flow__card-img {
      width: 110%;
      height: auto;
      left: -1.52%;
      /* -30/460 */
      top: -2%;
   }

   #flow .flow__card-desc {
      position: absolute;
      left: 0;
      top: 86.45%;
      width: 100%;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 500;
      font-size: 18px;
      line-height: 1.6;
      color: #ffffff;
   }

   #flow .flow__slider-track {
      display: flex;
      flex-direction: row;
      width: 660px;
      height: 8px;
   }

   #flow .flow__slider-segment {
      display: block;
      width: 159px;
      height: 8px;
      background: #a4a4a4;
      cursor: pointer;
      transition: background 0.3s;
   }

   #flow .flow__slider-segment--active {
      background: #ffffff;
   }

   /* FLOW SP（Figma 780px設計値）: 元 TOP の @media(max-width:780px) 内 #flow サブセット */
   @media (max-width: 780px) {
      /* ===== FLOW SP ===== Figma 780px設計値 */

      #flow {
         padding: 0 0 23.077vw;
      }

      #flow .flow__inner {
         width: 100%;
      }

      #flow .flow__head {
         width: 89.744vw;
         padding-bottom: 10.256vw;
      }
   }

   /* ========================================
   FLOW: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替
   ※ サイズは min(Xvw, Ypx) で cap：viewport 780pxまでFigma実値、 780以下はvw比例
======================================== */
   @media (max-width: 1050px) {
      #flow {
         padding: 0 40px 200px;
      }

      #flow .flow__head {
         width: min(89.744vw, 700px);
         padding-bottom: min(5.128vw, 40px);
         align-self: flex-start;
      }

      #flow .flow__h2 {
         font-size: min(17.949vw, 120px);
         line-height: 1.1;
      }

      #flow .flow__h3 {
         font-size: min(4.615vw, 25px);
         color: #8e8e8e;
         letter-spacing: -0.02em;
      }

      /* cards container：SPは1カードずつフル表示、 align-self flex-start で中央寄せ解除 */
      #flow .flow__cards {
         align-self: flex-start;
         gap: min(3.846vw, 30px);
         padding: 0 0 min(10.256vw, 80px) 0;
      }

      /* card 660×688 → cap */
      #flow .flow__card {
         width: min(84.615vw, 660px);
         aspect-ratio: 660 / 688;
         height: auto;
      }

      /* card head: SPは左寄せ */
      #flow .flow__card--01 .flow__card-head,
      #flow .flow__card--02 .flow__card-head,
      #flow .flow__card--03 .flow__card-head,
      #flow .flow__card--04 .flow__card-head {
         left: 0;
         height: min(19.205vw, 150px);
         gap: min(3.846vw, 30px);
      }

      /* num 120 / title 50 */

      #flow .flow__card-num {
         height: auto;
         font-size: min(15.385vw, 70px);
         line-height: 1;
         letter-spacing: 0;
         -webkit-text-stroke-width: min(0.256vw, 2px);
      }

      #flow .flow__card-title {
         padding-top: 0;
         font-size: min(6.41vw, 34px);
         line-height: 1;
         letter-spacing: 0;
      }

      #flow .flow__card-image {
         top: 26.74%;
         width: 100%;
         aspect-ratio: 660 / 360;
         height: auto;
         border-radius: min(1.282vw, 10px);
      }

      #flow .flow__card--01 .flow__card-img {
         width: 110.3%;
         height: auto;
         left: 0;
         top: -19.44%;
         /* -70/360 */
      }

      #flow .flow__card--02 .flow__card-img {
         width: 108.03%;
         height: auto;
         left: -6.06%;
         /* -40/660 */
         top: -5.28%;
         /* -19/360 */
      }

      #flow .flow__card--03 .flow__card-img {
         width: 115.76%;
         height: auto;
         left: -10.61%;
         /* -70/660 */
         top: -10.28%;
         /* -37/360 */
      }

      #flow .flow__card--04 .flow__card-img {
         width: 115.76%;
         height: auto;
         left: 0;
         top: 0;
      }

      #flow .flow__card-desc {
         top: 87.79%;
         width: 100%;
         font-size: min(3.59vw, 22px);
         line-height: 1.6;
      }

      #flow .flow__slider-track {
         gap: 0;
         width: min(84.615vw, 660px);
         height: min(1.026vw, 8px);
      }

      #flow .flow__slider-segment {
         width: min(20.385vw, 159px);
         height: min(1.026vw, 8px);
      }
   }

   /* ========================================
   FLOW: 780以下はFigma実値（vw比例）で 1050 MQ の cap を上書き
======================================== */
   @media (max-width: 780px) {
      #flow .flow__head {
         padding-bottom: 10.256vw;
         /* 80 = Figma実値に戻す */
      }

      #flow .flow__h2 {
         font-size: 17.949vw;
      }

      #flow .flow__h3 {
         font-size: 4.615vw;
      }

      #flow .flow__card-num {
         font-size: 15.385vw;
         height: 14vw;
         -webkit-text-stroke-width: 0.256vw;
      }

      #flow .flow__card-title {
         font-size: 6.41vw;
         padding-top: 2.821vw;
      }

      #flow .flow__card-desc {
         font-size: 3.59vw;
      }
   }

   /* ブレイクポイント追加
   --------------------------------------------------------------------- */


   @media screen and (min-width:769px) {
      .rn_sp-only {
         display: none !important;
      }
   }

   @media screen and (max-width:768px) {
      .rn_pc-only {
         display: none !important;
      }
   }

   /* 共通セクションの余白調整
   --------------------------------------------------------------------- */
   @media screen and (max-width:768px) {
      #flow {
         padding-bottom: 187px;
      }
   }