/* ====================================
       Design Tokens (CSS Variables)
    ==================================== */
    :root {
        --color-accent: #D00F00;
        --color-accent-shadow: #961E1E;
        --color-accent-dark: #9c221a;
        --color-cream: #FFF8DF;
        --color-sky: #E6F2F7;
        --color-text: #191919;
        --color-muted: #6b6b6b;
        --color-bg: #FFFFFF;
        --color-dark: #000000;
        --color-yellow-highlight: #F3C82D;
  
        --font-jp: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
        --font-handwritten: "Yusei Magic", var(--font-jp);
  
        --container-max: 767px;
        --container-pad: clamp(16px, 5vw, 24px);
        --section-pad-y: clamp(48px, 10vw, 80px);
      }
  
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
  
      body {
        font-family: var(--font-jp);
        line-height: 1.4;
        color: var(--color-text);
        max-width: var(--container-max);
        margin: 0 auto;
        background-color: var(--color-bg);
      }
  
      /* PC時: 767px以上では見切れ領域を薄いグレーにして中央コンテナを強調 */
      @media (min-width: 768px) {
        html { background-color: #f0f0f0; }
        body { box-shadow: 0 0 24px rgba(0, 0, 0, 0.08); }
      }
  
      /* ====================================
         Common Components
      ==================================== */
      /* CTAボタン（赤・シャインアニメ付き） */
      .c_btn_accent {
        background-color: var(--color-accent);
        color: #fff;
        padding: 16px 24px;
        border-radius: 4px;
        box-shadow: 0 3px 0 0 var(--color-accent-shadow);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: clamp(15px, 4vw, 18px);
        font-weight: 700;
        line-height: 1.4;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        animation: dokundokun 1300ms ease infinite;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
      }
      .c_btn_accent::before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        animation: btn_shine 4s ease-in-out infinite;
        -webkit-animation: btn_shine 4s ease-in-out infinite;
      }
      .c_btn_accent:active {
        transform: translateY(2px);
        box-shadow: 0 1px 0 0 var(--color-accent-shadow);
        animation: none;
      }
  
      /* ====================================
         共通吹き出しコンポーネント（.c_bubble）
         - 見た目は元仕様（2px ピンク縁 + 純色ピンクオフセット影）を再現
         - 尾の向きは修飾子で切替（--tail-right / --tail-left）
         - 位置（top/left/right）はセクション固有のクラスで個別指定
      ==================================== */
      .c_bubble {
        position: absolute;
        background: #fff;
        border: 2px solid #f5c6c2;
        border-radius: 999px;
        padding: clamp(10px, 2.8vw, 14px) clamp(18px, 4.8vw, 28px);
        font-size: clamp(11px, 3.2vw, 14px);
        line-height: 1.6;
        letter-spacing: 0.04em;
        color: var(--color-text);
        white-space: nowrap;
        text-align: center;
        z-index: 3;
        /* 白紙の右後ろにピンクの紙が重なった立体感（drop-shadow で tail にも適用） */
        filter: drop-shadow(3px 4px 0 rgba(245, 198, 194, 0.95));
      }
  
      /* 尾: 右下向き（ミキティが右側にいる場合） */
      .c_bubble--tail-right::before {
        content: "";
        position: absolute;
        bottom: -22px;
        right: 26px;
        width: 22px;
        height: 20px;
        background: #f5c6c2;
        clip-path: polygon(0 0, 100% 0, 85% 100%);
      }
  
      .c_bubble--tail-right::after {
        content: "";
        position: absolute;
        bottom: -16px;
        right: 28px;
        width: 18px;
        height: 18px;
        background: #fff;
        clip-path: polygon(0 0, 100% 0, 85% 100%);
      }
  
      /* 尾: 左下向き（ミキティが左側にいる場合） */
      .c_bubble--tail-left::before {
        content: "";
        position: absolute;
        bottom: -22px;
        left: 26px;
        width: 22px;
        height: 20px;
        background: #f5c6c2;
        clip-path: polygon(0 0, 100% 0, 15% 100%);
      }
  
      .c_bubble--tail-left::after {
        content: "";
        position: absolute;
        bottom: -16px;
        left: 28px;
        width: 18px;
        height: 18px;
        background: #fff;
        clip-path: polygon(0 0, 100% 0, 15% 100%);
      }
  
      /* セクション見出し 赤アンダーライン */
      .c_underline_accent {
        display: inline-block;
        padding-bottom: 4px;
        background-image: linear-gradient(transparent 85%, var(--color-accent) 85%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
  
      /* SP Header Styles */
      .sp-header {
        display: flex;
        width: 100%;
        background-color: white;
        position: relative;
        justify-content: space-between;
        align-items: center;
        padding: 20px clamp(12px, 4vw, 20px);
        gap: clamp(8px, 2vw, 16px);
      }
  
      .sp-header-logo {
        width: clamp(120px, 38vw, 168px);
        flex-shrink: 1;
        min-width: 0;
      }
  
      .sp-header-logo img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
  
      .sp-header-button {
        background-color: var(--color-accent);
        padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3.2vw, 18px);
        border-radius: 4px;
        box-shadow: 0 3px 0 0 var(--color-accent-shadow);
        display: inline-flex;
        align-items: center;
        gap: clamp(6px, 1.6vw, 10px);
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }
  
      .sp-header-button::before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        animation: btn_shine 4s ease-in-out infinite;
        -webkit-animation: btn_shine 4s ease-in-out infinite;
      }
  
      .sp-header-button-text {
        color: white;
        font-size: clamp(12px, 3.2vw, 15px);
        font-weight: 700;
        line-height: 1.32;
        white-space: nowrap;
        position: relative;
        z-index: 1;
      }
  
      .sp-header-button-arrow {
        width: clamp(12px, 3vw, 14px);
        height: clamp(12px, 3vw, 14px);
        position: relative;
        z-index: 1;
        flex-shrink: 0;
      }
  
      .sp-header-button-arrow img {
        width: 100%;
        height: 100%;
      }
  
      /* ボタンアニメーション（どくんどくん） */
      @keyframes dokundokun {
      0%  { transform: scale(1); }
      15% { transform: scale(1.04); }
      30% { transform: scale(1); }
      45% { transform: scale(1.04); }
      70% { transform: scale(1); }
      }
  
      @keyframes btn_shine {
      0% { transform: scale(0) rotate(45deg); opacity: 0; }
      80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
      81% { transform: scale(4) rotate(45deg); opacity: 1; }
      100% { transform: scale(50) rotate(45deg); opacity: 0; }
      }
  
      @-webkit-keyframes btn_shine {
      0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
      80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
      81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
      100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
      }
  
      /* ====================================
         SEC_01 Section (FV)
      ==================================== */
      .sec_01 {
        background-color: #fff;
        /* padding-top は画像シフト量 (64px) と同値にし、狭幅でも画像上端が section top と一致して見切れないようにする */
        padding: 64px 0 0;
        position: relative;
        overflow: hidden;
      }
  
      .sec_01_container {
        position: relative;
        padding-inline: var(--container-pad);
        /* 画像 (width: clamp(180px, 55vw, 450px), aspect 1:1.5) の自然高さから 64px 引いた値を
           container min-height にすることで、画像 top が content top より 64px 上になり、
           画像 bottom は container bottom と一致する */
        min-height: calc(clamp(180px, 55vw, 450px) * 1.5 - 64px);
      }
  
      .sec_01_content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 3.5vw, 22px);
      }
  
      .sec_01_body {
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 3.5vw, 22px);
        width: clamp(195px, 50%, 320px);
      }
  
      .sec_01_subtitle {
        font-family: var(--font-handwritten);
        font-size: clamp(14px, 3.8vw, 18px);
        font-weight: 400;
        color: var(--color-text);
        line-height: 1.4;
        align-self: flex-start;
        text-decoration: underline solid var(--color-accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        white-space: nowrap;
      }
  
      .sec_01_subtitle--em {
        color: var(--color-accent);
      }
  
      .sec_01_title {
        font-size: clamp(20px, 5.6vw, 32px);
        font-weight: 800;
        line-height: 1.45;
        color: var(--color-text);
        letter-spacing: 0.01em;
      }
  
      .sec_01_cta {
        align-self: flex-start;
        color: #fff;
        font-size: clamp(14px, 3.8vw, 17px);
        padding: clamp(12px, 3vw, 16px) clamp(16px, 4.5vw, 24px);
        max-width: 100%;
      }
  
      .sec_01_cta-arrow {
        width: clamp(12px, 3vw, 14px);
        height: clamp(12px, 3vw, 14px);
        flex-shrink: 0;
        position: relative;
        z-index: 1;
      }
  
      .sec_01_image {
        position: absolute;
        right: -28px;
        bottom: 0;
        width: clamp(180px, 55vw, 450px);
        z-index: 1;
      }
  
      .sec_01_image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
      }
  
      /* ====================================
         SEC_02 Section (Catch)
      ==================================== */
      .sec_02 {
        background-color: #fff;
      }
  
      .sec_02_hero {
        width: 100%;
      }
  
      .sec_02_hero img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
  
      .sec_02_text {
        padding: clamp(24px, 8vw, 32px) var(--container-pad);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: clamp(16px, 4vw, 24px);
      }
  
      .sec_02_title {
        font-size: clamp(18px, 5vw, 24px);
        font-weight: 700;
        line-height: 1.55;
        color: var(--color-text);
      }
  
      .sec_02_subtitle {
        font-size: clamp(17px, 4.6vw, 22px);
        font-weight: 700;
        line-height: 1.5;
        color: var(--color-text);
      }
  
      .sec_02_lead {
        font-size: clamp(14px, 3.8vw, 15px);
        line-height: 1.9;
        color: var(--color-text);
        text-align: left;
        width: 100%;
      }
  
      .sec_02_accent {
        display: inline-block;
        font-size: clamp(16px, 4.6vw, 20px);
        font-weight: 700;
        color: var(--color-text);
        text-decoration: underline solid var(--color-accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        line-height: 1.5;
      }
  
      .sec_02_cta {
        color: #fff;
        min-width: min(280px, 100%);
        padding: clamp(14px, 3.5vw, 18px) clamp(20px, 5vw, 32px);
      }
  
      /* ====================================
         SEC_MERIT_01 Section
      ==================================== */
      .sec_merit_01 {
        background-color: #fff;
      }
  
      .sec_merit_01_text {
        padding: clamp(24px, 8vw, 32px) var(--container-pad) clamp(24px, 6vw, 40px);
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 4vw, 24px);
      }
  
      .sec_merit_01_head {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: clamp(14px, 4vw, 20px);
        align-items: center;
      }
  
      .sec_merit_01_label_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
      }
  
      .sec_merit_01_label {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text);
        letter-spacing: 0.08em;
        margin-bottom: clamp(2px, 1vw, 4px);
      }
  
      .sec_merit_01_num {
        font-family: "Montserrat", var(--font-jp);
        font-size: clamp(56px, 16vw, 88px);
        font-weight: 800;
        color: var(--color-text);
        line-height: 1;
        letter-spacing: -0.02em;
      }
  
      .sec_merit_01_title {
        font-size: clamp(18px, 5vw, 24px);
        font-weight: 800;
        line-height: 1.45;
        color: var(--color-text);
      }
  
      .sec_merit_01_desc {
        font-size: clamp(14px, 3.8vw, 15px);
        line-height: 1.9;
        color: var(--color-text);
        text-align: left;
      }
  
      .sec_merit_01_visual {
        position: relative;
        width: 100%;
      }
  
      .sec_merit_01_visual_bg {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
  
      /* ミキティ + 吹き出しの共通グループ
         - ミキティと同じ幅でアンカーし、吹き出しはグループ基準の % で位置指定
         - ブラウザ幅が広がっても、ミキティと吹き出しの相対位置は変わらない */
      .sec_merit_01_mikity_group {
        position: absolute;
        right: 0;
        bottom: 0;
        width: clamp(140px, 42vw, 300px);
        z-index: 2;
      }
  
      .sec_merit_01_mikity {
        width: 100%;
      }
  
      .sec_merit_01_mikity img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
      }
  
      /* merit01: 位置のみ指定（見た目は .c_bubble に統合） */
      .sec_merit_01_bubble {
        /* 上: セクションテキスト下部に若干かかる（負の値でビル群画像の上に突き出す） */
        top: calc(clamp(-28px, -5vw, -16px) - 16px);
        /* 右: ミキティ幅の 50% 地点に吹き出し右端を置く（ミキティの頭付近へ尾が向く） */
        right: 60%;
      }
  
      /* ====================================
               SEC_04 Section
            ==================================== */
      .sec_04 {
        background-color: #FFF8DF;
        padding: 42px 0;
      }
  
      .sec_04_container {
        margin: 0 auto;
        padding: 0 20px;
      }
  
      .sec_04_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
      }
  
      /* Header Section */
      .sec_04_header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
      }
  
  
      .sec_04_subtitle {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.4;
        color: #191919;
        margin: 0;
      }
  
      .sec_04_title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 20px;
      }
  
      .sec_04_title-highlight {
        padding: 0 4px;
        display: inline;
        text-decoration: underline;
        text-decoration-thickness: 16px;
        text-decoration-color: #F3C82D;
        text-underline-offset: -0.1em;
        font-weight: 800;
      }
  
  
      .sec_04_description {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        color: #191919;
        margin: 0;
        text-align: left;
      }
  
      /* Comparison Section */
      .sec_04_comparison {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
      }
  
      /* Bar Chart Image */
      .sec_04_chart {
        width: 100%;
        max-width: 335px;
        display: flex;
        justify-content: center;
        background-color: white;
        padding: 16px 12px 24px;
      }
  
      .sec_04_chart picture {
        width: 100%;
      }
  
      .sec_04_chart img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
  
  
      .sec_04_footer {
        background: #fff;
        padding: clamp(24px, 6vw, 40px) var(--container-pad);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(8px, 2vw, 12px);
        text-align: center;
      }
  
      .sec_04_footer-text {
        font-size: clamp(17px, 4.8vw, 22px);
        font-weight: 800;
        color: var(--color-text);
        line-height: 1.5;
        letter-spacing: 0.02em;
        text-decoration: underline solid var(--color-accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 8px;
      }
  
      /* ====================================
         SEC_MERIT_02 Section
      ==================================== */
      .sec_merit_02 {
        background-color: #fff;
      }
  
      .sec_merit_02_text {
        padding: clamp(12px, 8vw, 20px) var(--container-pad) clamp(24px, 6vw, 40px);
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 4vw, 24px);
      }
  
      .sec_merit_02_head {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: clamp(14px, 4vw, 20px);
        align-items: center;
      }
  
      .sec_merit_02_label_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
      }
  
      .sec_merit_02_label {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text);
        letter-spacing: 0.08em;
        margin-bottom: clamp(2px, 1vw, 4px);
      }
  
      .sec_merit_02_num {
        font-family: "Montserrat", var(--font-jp);
        font-size: clamp(56px, 16vw, 88px);
        font-weight: 800;
        color: var(--color-text);
        line-height: 1;
        letter-spacing: -0.02em;
      }
  
      .sec_merit_02_title {
        font-size: clamp(18px, 5vw, 24px);
        font-weight: 800;
        line-height: 1.45;
        color: var(--color-text);
      }
  
      .sec_merit_02_desc {
        font-size: clamp(14px, 3.8vw, 15px);
        line-height: 1.9;
        color: var(--color-text);
        text-align: left;
      }
  
      /* Before / After 画像 */
      .sec_merit_02_ba {
        position: relative;
        width: 100%;
      }
  
      .sec_merit_02_ba_img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
  
      .sec_merit_02_ba_label {
        position: absolute;
        bottom: clamp(12px, 3vw, 22px);
        left: clamp(12px, 3.5vw, 24px);
        color: #fff;
        font-family: "Montserrat", var(--font-jp);
        font-size: clamp(22px, 6.5vw, 34px);
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        z-index: 2;
      }
  
      /* AFTER 画像上のミキティ + 吹き出し
         - mikity_group で bubble + mikity をラップし、group 高さ = mikity 高さ
         - bubble は group top 基準で固定オフセット配置 → ブラウザ幅が変わっても
           mikity との垂直距離が一定（400px 時の距離感を維持） */
      .sec_merit_02_ba--after {
        --mikity-w: clamp(130px, 38vw, 270px);
      }
  
      .sec_merit_02_mikity_group {
        position: absolute;
        right: 0;
        bottom: 0;
        width: var(--mikity-w);
      }
  
      .sec_merit_02_mikity {
        width: 100%;
      }
  
      .sec_merit_02_mikity img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
      }
  
      /* merit02: 位置のみ指定（見た目は .c_bubble に統合、group 内基準） */
      .sec_merit_02_bubble {
        /* group top（= mikity top）より 50px 上 → 400px 幅時の -12 (figure top) と合致 */
        top: -50px;
        /* mikity 幅の 50% を右から取って、尾先がミキティの頭方向を向く */
        right: 50%;
      }
  
      /* 間取り図 */
      .sec_merit_02_floorplans {
        padding: clamp(28px, 7vw, 48px) var(--container-pad);
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 4vw, 24px);
      }
  
      .sec_merit_02_floorplan {
        width: 100%;
      }
  
      .sec_merit_02_floorplan img {
        width: 100%;
        height: auto;
        display: block;
      }
  
      /* CTA フッター */
      .sec_merit_02_cta {
        padding: 0 var(--container-pad) clamp(20px, 10vw, 32px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(14px, 3.5vw, 20px);
        text-align: center;
      }
  
      .sec_merit_02_cta_small {
        font-size: clamp(14px, 3.8vw, 16px);
        font-weight: 700;
        line-height: 1.6;
        color: var(--color-text);
      }
  
      /* ====================================
         SEC_MERIT_03 Section
      ==================================== */
      .sec_merit_03 {
        background-color: #fff;
      }
  
      .sec_merit_03_text {
        padding: clamp(24px, 8vw, 32px) var(--container-pad) clamp(24px, 6vw, 40px);
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 4vw, 24px);
      }
  
      .sec_merit_03_head {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: clamp(14px, 4vw, 20px);
        align-items: center;
      }
  
      .sec_merit_03_label_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
      }
  
      .sec_merit_03_label {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text);
        letter-spacing: 0.08em;
        margin-bottom: clamp(2px, 1vw, 4px);
      }
  
      .sec_merit_03_num {
        font-family: "Montserrat", var(--font-jp);
        font-size: clamp(56px, 16vw, 88px);
        font-weight: 800;
        color: var(--color-text);
        line-height: 1;
        letter-spacing: -0.02em;
      }
  
      .sec_merit_03_title {
        font-size: clamp(18px, 5vw, 24px);
        font-weight: 800;
        line-height: 1.45;
        color: var(--color-text);
      }
  
      .sec_merit_03_desc {
        font-size: clamp(14px, 3.8vw, 15px);
        line-height: 1.9;
        color: var(--color-text);
        text-align: left;
      }
  
      /* Voice カード配置ラッパー（sec_07_voice_card を流用してこの中に配置） */
      .sec_merit_03_voice {
        padding: 0 var(--container-pad) clamp(24px, 6vw, 40px);
      }
  
      /* CTA フッター */
      .sec_merit_03_cta {
        padding: 0 var(--container-pad) clamp(20px, 10vw, 32px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(14px, 3.5vw, 20px);
        text-align: center;
      }
  
      .sec_merit_03_cta_small {
        font-size: clamp(14px, 3.8vw, 16px);
        font-weight: 700;
        line-height: 1.6;
        color: var(--color-text);
      }
  
      /* ====================================
         SEC_MERIT_04 Section
      ==================================== */
      .sec_merit_04 {
        background-color: #fff;
      }
  
      .sec_merit_04_text {
        padding: clamp(24px, 8vw, 32px) var(--container-pad) clamp(24px, 6vw, 40px);
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 4vw, 24px);
      }
  
      .sec_merit_04_head {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: clamp(14px, 4vw, 20px);
        align-items: center;
      }
  
      .sec_merit_04_label_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
      }
  
      .sec_merit_04_label {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text);
        letter-spacing: 0.08em;
        margin-bottom: clamp(2px, 1vw, 4px);
      }
  
      .sec_merit_04_num {
        font-family: "Montserrat", var(--font-jp);
        font-size: clamp(56px, 16vw, 88px);
        font-weight: 800;
        color: var(--color-text);
        line-height: 1;
        letter-spacing: -0.02em;
      }
  
      .sec_merit_04_title {
        font-size: clamp(18px, 5vw, 24px);
        font-weight: 800;
        line-height: 1.45;
        color: var(--color-text);
      }
  
      .sec_merit_04_desc {
        font-size: clamp(14px, 3.8vw, 15px);
        line-height: 1.9;
        color: var(--color-text);
        text-align: left;
      }
  
      /* Hero building image */
      .sec_merit_04_hero {
        width: 100%;
      }
  
      .sec_merit_04_hero img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
  
      /* Check items section: 物件選びでプロが必ず確認する5項目 */
      .sec_merit_04_check {
        padding: clamp(28px, 7vw, 48px) var(--container-pad);
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
  
      .sec_merit_04_check_title {
        font-size: clamp(20px, 5vw, 24px);
        font-weight: 800;
        line-height: 1.5;
        color: var(--color-text);
        padding-bottom: clamp(10px, 2.5vw, 16px);
      }
  
      .sec_merit_04_list {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: clamp(15px, 4.4vw, 18px);
        font-weight: 700;
        line-height: 1.7;
        color: var(--color-text);
      }
  
      /* Shop interior image - full width */
      .sec_merit_04_shop {
        width: 100%;
      }
  
      .sec_merit_04_shop img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
  
      /* House + mikity + bubble
         - mikity_group で bubble + mikity をラップ → ブラウザ幅に関わらず
           mikity と bubble の相対距離が一定（400px 幅時の距離感を維持） */
      .sec_merit_04_house {
        position: relative;
        width: 100%;
        --mikity-w: clamp(128px, 36vw, 230px);
      }
  
      .sec_merit_04_house_img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
  
      .sec_merit_04_house_mikity_group {
        position: absolute;
        left: clamp(4px, 1.5vw, 12px);
        bottom: 0;
        width: var(--mikity-w);
      }
  
      .sec_merit_04_house_mikity {
        width: 100%;
      }
  
      .sec_merit_04_house_mikity img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
      }
  
      /* merit04: 位置のみ指定（見た目は .c_bubble に統合、group 内基準） */
      .sec_merit_04_house_bubble {
        /* group top（= mikity top）から -50px → 400px 幅時と同等のかかり具合 */
        top: -50px;
        /* mikity 幅の 55% + 右オフセット（mikity の右上付近） */
        left: calc(var(--mikity-w) * 0.55 + 16px);
      }
  
      /* ====================================
         SEC_CTA Section（最終 CTA）
      ==================================== */
      .sec_cta {
        background-color: #fff;
      }
  
      /* 上段: テキスト + ボタン */
      .sec_cta_top {
        padding: clamp(12px, 10vw, 24px) var(--container-pad) clamp(8px, 6vw, 16px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(14px, 3.5vw, 20px);
        text-align: center;
      }
  
      .sec_cta_top_text {
        font-size: clamp(14px, 3.8vw, 16px);
        font-weight: 700;
        line-height: 1.6;
        color: var(--color-text);
      }
  
      /* ロゴ */
      .sec_cta_logo {
        padding: clamp(20px, 5vw, 36px) var(--container-pad);
        display: flex;
        justify-content: center;
      }
  
      .sec_cta_logo img {
        width: clamp(240px, 60vw, 420px);
        height: auto;
        display: block;
      }
  
      /* Hero: ミキティ + 吹き出し + CTA ボタン
         - mikity_group で bubble + mikity をラップし、group 高さ = mikity 高さ
         - bubble は group top 基準で固定オフセット配置 → ブラウザ幅が変わっても
           mikity との位置関係が一定（400px 幅時の距離感を維持） */
      .sec_cta_hero {
        position: relative;
        width: 100%;
        --mikity-w: clamp(240px, 62vw, 400px);
        min-height: calc(var(--mikity-w) * 1.5);
        margin-top: 32px;
      }
  
      .sec_cta_mikity_group {
        position: absolute;
        left: 0;
        bottom: 0;
        width: var(--mikity-w);
        z-index: 1;
      }
  
      .sec_cta_mikity {
        width: 100%;
      }
  
      .sec_cta_mikity img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
      }
  
      /* 最終 CTA: 位置 + 元仕様固有の見た目（角丸 32px、大きめ padding、軽め font-weight） */
      .sec_cta_bubble {
        /* group top（= mikity top）から -28px → 400px 幅時の位置関係と合致 */
        top: -28px;
        left: calc(var(--mikity-w) * 0.55 + 68px);
        border-radius: 32px;
        padding: clamp(12px, 3.2vw, 18px) clamp(20px, 5vw, 30px);
        font-size: clamp(12px, 3.4vw, 16px);
        font-weight: 500;
        line-height: 1.65;
      }
  
      /* 最終 CTA のみ尾をさらに左へ傾ける（ミキティが遠めのため） */
      .sec_cta_bubble::before,
      .sec_cta_bubble::after {
        clip-path: polygon(0 0, 100% 0, -20% 100%);
      }
  
      /* Hero 内の CTA ボタン（右下アンカー） */
      .sec_cta_hero_btn {
        position: absolute;
        right: clamp(16px, 4vw, 32px);
        bottom: clamp(64px, 16vw, 140px);
        z-index: 2;
      }
  
      /* CTA Wrapper */
      .sec_04_cta-wrapper {
        position: relative;
        display: flex;
        align-items: flex-end;
        margin-top: 24px;
        flex-direction: column;
        align-items: center;
        width: 295px;
      }
  
      .sec_04_cta-text {
        width: auto;
        height: auto;
        z-index: 2;
      }
  
      .sec_04_cta-text img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
  
      /* CTA Button */
      .sec_04_cta-btn {
        background-color: #00375F;
        color: #FFFFFF;
        width: 295px;
        height: 64px;
        padding: 0 20px;
        border-radius: 16px;
        box-shadow: 0px 6px 0px 0px #052337;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1.08px;
        line-height: 1.6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        animation: dokundokun 1300ms ease infinite;
        overflow: hidden;
      }
  
      .sec_04_cta-btn::before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        animation: btn_shine 4s ease-in-out infinite;
        -webkit-animation: btn_shine 4s ease-in-out infinite;
      }
  
      .sec_04_cta-btn:active {
        transform: translateY(3px);
        box-shadow: 0px 3px 0px 0px #052337;
        animation: none;
      }
  
      .sec_04_cta-arrow {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.2s ease;
        position: absolute;
        right: 20px;
        z-index: 1;
      }
  
      .sec_04_cta-arrow img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: brightness(0) invert(1);
      }
  
      /* ====================================
               SEC06 Section (3つの理由)
            ==================================== */
      .sec_reason {
        background-color: #DCF5FA;
        padding: 24px 20px 8px;
      }
  
      .sec_reason_container {
        max-width: 335px;
        margin: 0 auto;
        padding: 0;
      }
  
      /* Title Section */
      .sec_reason_head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 32px;
      }
  
      .sec_reason_lead {
        font-size: 18px;
        font-weight: 700;
        color: #191919;
        letter-spacing: 1.44px;
        margin: 0;
      }
  
      .sec_reason_badge {
        background-color: #119CDA;
        color: #FFFFFF;
        padding: 10px 8px;
        border-radius: 1px;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 0.05em;
        height: 52px;
        width: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
  
      .sec_reason_badge_num {
        font-size: 32px;
        font-weight: 700;
      }
  
      /* Reason Cards Container */
      .sec_reason_list {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 24px;
        margin-left: auto;
        margin-right: auto;
      }
  
      /* Reason Card */
      .sec_reason_card {
        background-color: #FFFFFF;
        border-radius: 8px;
        padding: 40px 16px 16px;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }
  
      /* Reason Number Badge */
      .sec_reason_card_num {
        position: absolute;
        top: -23.5px;
        left: 16px;
        width: 62px;
        height: 87px;
      }
  
      .sec_reason_card_num img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
  
      /* Reason Content Wrapper */
      .sec_reason_content {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        flex-direction: column-reverse;
      }
  
      /* Reason Image */
      .sec_reason_image {
        flex-shrink: 0;
        width: 100%;
        margin-bottom: 0;
      }
  
      .sec_reason_image img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
  
      /* Reason Text */
      .sec_reason_text {
        flex: 1;
      }
  
      /* Reason Header */
      .sec_reason_card_head {
        text-align: center;
        margin-bottom: 8px;
      }
  
      .sec_reason_tag {
        color: #E1323C;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
      }
  
      .sec_reason_card_title {
        color: #191919;
        font-size: 22px;
        letter-spacing: 0.15em;
        font-weight: 500;
        margin: 0;
      }
  
      .sec_reason_card_subtitle {
        color: #191919;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.15em;
        margin: 4px 0 0 0;
      }
  
      /* Reason Description */
      .sec_reason_desc {
        font-size: 16px;
        line-height: 1.6;
        font-weight: 400;
        color: #191919;
        text-align: justify;
        letter-spacing: 0.06em;
      }
  
      /* ====================================
               SEC_07 Section (SP Only)
            ==================================== */
      .sec_07 {
        display: block;
        background-color: #FFFFFF;
        padding: 96px 0 12px;
      }
  
      .sec_07_container {
        max-width: 375px;
        margin: 0 auto;
        padding: 0;
      }
  
      /* Header */
      .sec_07_header {
        position: relative;
        margin-bottom: 40px;
        overflow: visible;
      }
  
      .sec_07_subtitle {
        font-size: 26px;
        font-weight: 900;
        color: #D9D9D9;
        text-align: center;
        position: absolute;
        top: -42px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        white-space: nowrap;
      }
  
      .sec_07_title_wrapper {
        position: relative;
        text-align: center;
      }
  
      .sec_07_title {
        font-size: 28px;
        font-weight: 800;
        color: #191919;
        position: relative;
        display: inline-block;
        padding: 0;
        margin: 0;
        line-height: 1.4;
      }
  
      .sec_07_title_highlight {
        padding: 0 4px;
        display: inline;
        background: linear-gradient(transparent 65%, #F3C82D 65%, #F3C82D 100%);
      }
  
      /* Voice Cards */
      .sec_07_voices {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 0 12px;
      }
  
      .sec_07_voice_card {
        background-color: #FFFFFF;
        border-radius: 4px;
        padding: 24px 20px 24px;
        width: 100%;
        margin: 0 auto;
      }
  
      .sec_07_voice_header {
        text-align: center;
        margin-bottom: 24px;
      }
  
      .sec_07_voice_number {
        font-size: 16px;
        font-weight: 900;
        color: #191919;
        margin-bottom: 12px;
      }
  
      .sec_07_voice_title {
        font-size: 22px;
        font-weight: 500;
        color: #191919;
        letter-spacing: 0.15em;
        line-height: 1.5;
        margin: 0;
      }
  
      .sec_07_voice_image {
        width: 100%;
        margin: 0 auto 24px;
        position: relative;
      }
  
      .sec_07_voice_image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
      .sec_07_voice_cost {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #FFFFFF;
        padding: 4px 12px 0;
        border-top-left-radius: 6px;
        font-size: 14px;
        font-weight: 700;
        color: #191919;
        line-height: 1.4;
      }
  
      .sec_07_voice_details {
        margin-bottom: 16px;
      }
  
      .sec_07_voice_divider {
        width: 100%;
        height: 1px;
        background-color: #191919;
        margin: 0 auto;
      }
  
      .sec_07_voice_info {
        margin: 12px 0;
      }
  
      .sec_07_voice_plan {
        font-size: 18px;
        font-weight: 700;
        color: #191919;
        line-height: 1.6;
        margin-bottom: 4px;
      }
  
      .sec_07_voice_arrow {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        position: relative;
        top: -1.5px;
      }
  
      .sec_07_voice_client {
        font-size: 16px;
        font-weight: 500;
        color: #191919;
        line-height: 1.5;
      }
  
      .sec_07_voice_description {
        font-size: 16px;
        line-height: 1.7;
        color: #191919;
        text-align: justify;
        letter-spacing: 0.06em;
        width: 100%;
        margin: 0 auto;
      }
  
      /* ====================================
       Footer Section
    ==================================== */
      .footer {
        height: auto;
        min-height: 528px;
        position: relative;
        background-image: url('{$AWS_ASSETS_RENOVEFUDOSAN}assets/images/lp/real-estate/footer-photo.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 64px 20px 80px;
        color: white;
      }
  
      .footer_overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.75);
        z-index: 1;
      }
  
      .footer_container {
        max-width: 544px;
        margin: 20px auto 0;
        position: relative;
        z-index: 2;
        padding: 0;
      }
  
      .footer_content {
        display: block;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 32px;
      }
  
      .footer_logos {
        display: flex;
        align-items: center;
        gap: 32px;
        padding-bottom: 64px;
        flex-direction: column;
      }
  
      .footer_logo-main {
        width: 240px;
      }
  
      .footer_logo-sub {
        height: auto;
        width: auto;
        max-height: 70px;
      }
  
      .footer_info {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 32px;
      }
  
      .footer_address {
        font-size: 14px;
        font-weight: 700;
        margin: 0;
      }
  
      .footer_contact {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        text-align: center;
      }
  
      .footer_contact-tel {
        color: #119CDA;
        text-decoration: none;
        transition: color 0.3s ease;
        cursor: pointer;
      }
  
      .footer_privacy {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 40px;
      }
  
      .footer_privacy-link {
        color: white;
        text-decoration: none;
        font-size: inherit;
        border-bottom: 1px solid transparent;
        transition: color 0.3s ease;
        cursor: pointer;
      }
  
      .footer_copyright {
        font-size: 10px;
        font-weight: 400;
      }
  
      /* ====================================
               SP Fixed Footer CTA
       ==================================== */
      .sp-fixed-cta {
        position: fixed;
        bottom: 0;
        left: 50%;
        /* translate3d で GPU 合成レイヤー化し、モバイルブラウザのアドレスバー伸縮時のズレを抑える */
        transform: translate3d(-50%, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
        width: 100%;
        max-width: 767px;
        z-index: 9999;
        background-color: #00375F;
      }
  
      .sp-fixed-cta__link {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        /* bar 高さ固定 */
        height: 52px;
        /* 左パディングでアイコン領域（幅 + 左余白 + 右余白）を確保 */
        padding-left: 120px;
        text-decoration: none;
        color: #fff;
      }
  
      /* アイコン: サイズはそのまま、bar の底辺より下へ -60px シフトして overhang を抑える
         （request_icon.png の下部には余白があるため、下側のクリップは design 本体に影響しない想定） */
      .sp-fixed-cta__icon {
        position: absolute;
        left: 4px;
        bottom: -24px;
        width: calc((clamp(80px, 13vw, 80px) + 20px) * 1.2);
        height: calc((clamp(72px, 13vw, 72px) + 20px) * 1.2);
      }
  
      .sp-fixed-cta__icon img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }
  
      .sp-fixed-cta__text {
        flex: 1;
        font-family: var(--font-jp);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.04em;
        text-align: center;
        color: #fff;
        white-space: nowrap;
      }
  
      .sp-fixed-cta__arrow {
        flex-shrink: 0;
        width: clamp(40px, 10vw, 56px);
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #052337;
      }
  
      .sp-fixed-cta__arrow img {
        width: clamp(14px, 3.6vw, 18px);
        height: auto;
        filter: brightness(0) invert(1);
      }
  
      /* bodyに固定フッター分の余白を追加（bar 高さと一致） */
      body {
        padding-bottom: 50px;
      }
  
      /* 540px 以上の画面では bar 幅を 400px に絞って中央寄せ
         （left: 50% + transform: translateX(-50%) が既にあるため幅だけ上書きすれば中央に収まる） */
      @media (min-width: 540px) {
        .sp-fixed-cta {
          width: 400px;
          max-width: 400px;
        }
      }
  
      /* 印刷時は非表示 */
      @media print {
        body {
          padding-bottom: 0;
        }
  
        .sp-fixed-cta {
          display: none;
        }
      }