/* ===========================
   カラー変数
=========================== */

:root {
    --color-teal: #1a7e9d;
    --color-teal-dk: #0f4a5d;
    --color-faq-q: #31b3bd;
    --color-yellow: #eacf1d;
    --color-coral: #ed7160;
    --color-navy: #334e6e;
    --color-navy-lt: #8fa0b2;
    --color-navy-dk: #1b3951;
    --color-text: #595959;
    --color-text-gray: #6a6a6a;
    --color-white: #ffffff;
    --color-gray: #f5f5f5;
    --color-border: #dddddd;
    --color-bg-sub: #dcedf2;
    --color-bg-yellow: #fff500;
    /* フォントサイズスケール (基準幅: 375px) */
    --text-xs: 2.667vw;
    /* ≈10px */
    --text-sm: 3.2vw;
    /* ≈12px */
    --text-base: 3.733vw;
    /* ≈14px */
    --text-md: 4.267vw;
    /* ≈16px */
    --text-lg: 4.8vw;
    /* ≈18px */
    --text-xl: 5.333vw;
    /* ≈20px */
    --text-2xl: 6.4vw;
    /* ≈24px */
    --text-3xl: 8.533vw;
    /* ≈32px */
    --text-4xl: 10.667vw;
    /* ≈40px */
    /* 余白スケール */
    --space-3xs: 1.02vw;
    --space-2xs: 1.067vw;
    /* ≈4px  */
    --space-xs: 2.133vw;
    /* ≈8px  */
    --space-sm: 3.2vw;
    /* ≈12px */
    --space-md: 4.267vw;
    /* ≈16px */
    --space-lg: 5.333vw;
    /* ≈20px */
    --space-xl: 6.4vw;
    /* ≈24px */
    --space-2xl: 8.533vw;
    /* ≈32px */
    --space-3xl: 10.667vw;
    /* ≈40px */
    --space-4xl: 12.8vw;
    /* ≈48px */
    /* 角丸スケール */
    --radius-sm: 1.067vw;
    /* ≈4px  */
    --radius-md: 2.133vw;
    /* ≈8px  */
    --radius-lg: 3.2vw;
    /* ≈12px */
    --radius-xl: 4.267vw;
    /* ≈16px */
    --radius-full: 9999px;
    /* pill  */
}


/* ===========================
   リセット & ベース
=========================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: noto-sans-cjk-jp, hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN", sans-serif;
}

body {
    font-weight: 400;
    font-style: normal;
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ===========================
   LP ラッパー + Swiper 本体
=========================== */

.lp-wrapper {
    display: block;
    position: relative;
    /* 高さは Swiper + スクロールセクションで自動 */
}

.lp-swiper {
    width: 100%;
    height: 100vh;
    /* フォールバック */
    height: 100svh;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* ===========================
   固定フッター（全スライド共通CTA）
=========================== */

.lp-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /*     max-width: 430px; */
    background: var(--color-white);
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 200;
    box-sizing: border-box;
}

.lp-footer__btn {
    display: block;
    width: 100%;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.lp-footer__btn--outline {
    border: 1px solid var(--color-teal);
    color: var(--color-teal);
    background: var(--color-white);
}

.lp-footer__btn--filled {
    background: var(--color-teal);
    color: var(--color-white);
    border: 1px solid var(--color-teal);
}


/* ===========================
   共通アニメーション
=========================== */


/* キーフレーム定義 */

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce-in {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    85% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes pulse-btn {
    0%,
    90%,
    100% {
        transform: scale(1);
    }
    93% {
        transform: scale(0.94);
    }
    96% {
        transform: scale(1.03);
    }
    99% {
        transform: scale(0.97);
    }
}

@keyframes phone-enter {
    0% {
        transform: translateX(-60%);
        opacity: 0;
    }
    55% {
        transform: translateX(0);
        opacity: 1;
    }
    65% {
        transform: translateX(0) scale(1.04);
    }
    75% {
        transform: translateX(0) scale(0.97);
    }
    85% {
        transform: translateX(0) scale(1.02);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes spin-in {
    from {
        transform: rotate(-180deg) scale(0);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes swipe-finger-h {
    0% {
        transform: translate(calc(-50% - var(--space-xs)), -50%);
        opacity: 0.5;
    }
    50% {
        transform: translate(calc(-50% + var(--space-xs)), -50%);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% - var(--space-xs)), -50%);
        opacity: 0.5;
    }
}

@keyframes swipe-finger-v {
    0% {
        transform: translate(-50%, calc(-50% + var(--space-xs)));
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, calc(-50% - var(--space-xs)));
        opacity: 1;
    }
    100% {
        transform: translate(-50%, calc(-50% + var(--space-xs)));
        opacity: 0.5;
    }
}


/* ぽよんと跳ねる（slide-10 スマホ個別ポップイン） */

@keyframes phone-pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    45% {
        opacity: 1;
        transform: scale(1.18);
    }
    62% {
        transform: scale(0.91);
    }
    77% {
        transform: scale(1.07);
    }
    88% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* ズームイン（slide-15 各セル） */

@keyframes zoom-in-cell {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }
    75% {
        opacity: 1;
        transform: scale(1.04);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* ボーダー緩やか出現（slide-15 外枠） */

@keyframes border-appear {
    from {
        border-color: transparent;
    }
    to {
        border-color: #1b7e9d;
    }
}


/* 横スワイプヒント（3回後消滅） */

@keyframes swipe-hint-3x {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-10px);
    }
    5% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(10px);
    }
    16% {
        opacity: 0.7;
        transform: translate(-50%, -50%) translateX(-10px);
    }
    27% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(10px);
    }
    38% {
        opacity: 0.7;
        transform: translate(-50%, -50%) translateX(-10px);
    }
    49% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(10px);
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


/* ぽよぼよ縮小する（slide-12 黄色丸） */

@keyframes bouncy-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    35% {
        transform: scale(0.88);
    }
    60% {
        transform: scale(1.05);
    }
    80% {
        transform: scale(0.97);
    }
}


/* ふわふわ揺れる（slide-10 黄色丸） */

@keyframes float-sway {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}


/* アニメーションクラス */

.anim-fadeup {
    animation: fadeup 0.6s ease both;
}

.anim-bounce {
    animation: bounce-in 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.3s both;
}

.anim-float {
    animation: float 3s ease-in-out infinite;
}

.anim-slide-phones {
    animation: phone-enter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

.anim-pulse {
    animation: pulse-btn 5s ease-in-out infinite;
}


/* ディレイ */

.anim-delay-1 {
    animation-delay: 0.15s;
}

.anim-delay-2 {
    animation-delay: 0.3s;
}

.anim-delay-3 {
    animation-delay: 0.45s;
}


/* float はディレイ付きで位相をずらす */

.anim-float.anim-delay-1 {
    animation-delay: 0s;
}

.anim-float.anim-delay-2 {
    animation-delay: 0.6s;
}

.anim-float.anim-delay-3 {
    animation-delay: 1.2s;
}


/* ===========================
   共通 slide-inner
=========================== */

.slide-inner {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 20px 40px;
}

.slide-inner--gallery {
    max-width: 100%;
    padding: 60px 0 40px;
}


/* ===========================
   共通 見出し
=========================== */

.slide-heading {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 20px;
    color: var(--color-text);
}

.slide-heading--white {
    color: var(--color-white);
}

.text-teal {
    color: var(--color-teal);
}


/* ===========================
   01: FV
=========================== */

.slide-01 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}


/* キャッチコピー帯 */

.slide-01__catch-bar {
    background: var(--color-navy-dk);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    flex-shrink: 0;
}

.slide-01__catch {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.7;
    color: var(--color-yellow);
}

.slide-01__catch em {
    font-style: normal;
}


/* 上部エリア（ライトブルー背景） */

.slide-01__upper {
    background: var(--color-bg-sub);
    padding: var(--space-md) var(--space-md) 0;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-height: 0;
}

.slide-01__sub {
    font-size: var(--text-2xl);
    font-weight: 900;
    margin-bottom: var(--space-2xs);
    color: var(--color-teal-dk);
    flex-shrink: 0;
}

.slide-01__title {
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: var(--space-xs);
    color: var(--color-teal);
    flex-shrink: 0;
}


/* ロゴ */

.slide-01__logo {
    width: 35%;
    height: auto;
    display: block;
    margin: 0 auto var(--space-lg);
    flex-shrink: 0;
}


/* スマホ横カルーセル */

.slide-01__phones-wrap {
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.swiper-phones {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* 隣スライドを見せる */
}


/* swiper-slideのグローバル設定を上書き */

.swiper-phones .swiper-slide {
    width: 35% !important;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    padding: 0 var(--space-xs);
    box-sizing: border-box;
    transition: transform 0.5s ease;
    /* 遠いスライド */
}

.swiper-phones .swiper-wrapper {
    height: auto !important;
}

.slide-01__phone {
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: var(--radius-lg);
}


/* 下部：濃いティール + 波形トップ */

.slide-01__bottom {
    background: var(--color-teal);
    border-radius: 100% 100% 0 0;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    text-align: center;
    flex-shrink: 0;
}

.slide-01__badges {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    margin-top: -15%;
}

.slide-01__badges img {
    width: 28%;
    height: auto;
}


/* 顧客満足度 */

.slide-01__achievement {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.3;
    text-align: center;
}

.slide-01__crown {
    display: inline;
    font-size: var(--text-xl);
    margin-right: var(--space-2xs);
}


/* ===========================
   02: スワイプLPとは？
=========================== */

.slide-02 {
    background: var(--color-bg-sub);
}

.slide-02__inner {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slide-02__heading {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-teal);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
    text-align: center;
}

.slide-02__desc {
    font-size: var(--text-sm);
    line-height: 1.8;
    margin-bottom: var(--space-md);
    color: var(--color-teal);
    text-align: center;
}

.slide-02__types {
    display: flex;
    flex-wrap: wrap;
    min-height: 0;
    justify-content: center;
    gap: var(--space-xs);
}

.slide-02__type {
    width: 45%;
    text-align: center;
    gap: var(--space-xs);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--space-2xl);
}

.slide-02__type img {
    width: 60%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
}

.slide-02__type span {
    font-size: var(--text-sm);
    font-weight: 900;
    color: var(--color-teal);
    flex-shrink: 0;
    margin-bottom: -30px;
}


/* カーテンリビール：初期状態はティールのレイヤーで覆う */

.slide-02__type::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-teal);
    transform: translateY(0%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    border-radius: var(--radius-lg);
}


/* is-animated が付いたときにレイヤーを上に抜く */

.slide-02.is-animated .slide-02__type:nth-child(1)::after {
    transform: translateY(-110%);
    transition-delay: 0.05s;
}

.slide-02.is-animated .slide-02__type:nth-child(2)::after {
    transform: translateY(-110%);
    transition-delay: 0.2s;
}

.slide-02.is-animated .slide-02__type:nth-child(3)::after {
    transform: translateY(-110%);
    transition-delay: 0.35s;
}

.slide-02.is-animated .slide-02__type:nth-child(4)::after {
    transform: translateY(-110%);
    transition-delay: 0.5s;
}


/* ===========================
   03: 縦長LPの問題点
=========================== */

.slide-03 {
    background: var(--color-bg-sub);
}

.slide-03__inner {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slide-03__heading {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin-bottom: var(--space-sm);
    color: var(--color-teal);
}


/* 黄色ハイライト：左から背景色が流れ込むアニメーション */

.slide-03__hl {
    background: linear-gradient(var(--color-bg-yellow), var(--color-bg-yellow)) no-repeat left center;
    background-size: 0% 100%;
    padding: var(--space-2xs);
    transition: background-size 0.7s ease 0.2s;
}

.slide-03.is-animated .slide-03__hl {
    background-size: 100% 100%;
}

.slide-03__big {
    font-style: normal;
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-teal);
    display: block;
    line-height: 1.2;
}

.slide-03__lead {
    font-size: var(--text-lg);
    text-align: center;
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: var(--space-md);
    color: var(--color-teal);
}

.slide-03__lead-hl {
    background: linear-gradient(var(--color-bg-yellow), var(--color-bg-yellow)) no-repeat left center;
    background-size: 0% 100%;
    font-weight: 700;
    padding: var(--space-2xs);
    display: inline-block;
    transition: background-size 0.7s ease 0.5s;
    /* .hlより少し遅らせる */
}

.slide-03.is-animated .slide-03__lead-hl {
    background-size: 100% 100%;
}


/* 2×2 アイコングリッド */

.slide-03__tries-grid {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    min-height: 0;
    margin-bottom: var(--space-lg);
}

.slide-03__try {
    width: 47%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.slide-03__try-img {
    width: 35%;
    height: auto;
}

.slide-03__try-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-gray);
    line-height: 1.4;
}

.slide-03__result-box {
    background: #d6d6d6;
    padding: var(--space-xs);
    font-size: var(--text-md);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--space-xs);
    flex-shrink: 0;
    color: var(--color-text-gray);
}

.slide-03__result-em {
    font-size: var(--text-lg);
    font-weight: 900;
    text-align: center;
    color: var(--color-teal);
    flex-shrink: 0;
}


/* ===========================
   04: 導線
=========================== */

.slide-04 {
    display: flex;
    flex-direction: column;
}

.slide-04__upper {
    background: var(--color-bg-sub);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    gap: var(--space-sm);
}

.slide-04__pre {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-teal);
    line-height: 1.7;
}

.slide-04__pre span {
    color: var(--color-text);
}

.slide-04__mid {
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-teal);
}

.slide-04__keyword {
    margin: var(--space-2xs) 0;
}


/* 初期状態：非表示（回転＆縮小） */

.slide-04__keyword em {
    font-style: normal;
    writing-mode: vertical-rl;
    font-size: 19.2vw;
    font-weight: 900;
    color: var(--color-teal);
    background: var(--color-bg-yellow);
    display: inline-block;
    padding: var(--space-xl) var(--space-xs);
    letter-spacing: var(--space-md);
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}


/* 初回アニメーション */

.slide-04.is-animated .slide-04__keyword em {
    animation: spin-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* 再訪問時：アニメーションなしで表示維持 */

.slide-04.has-animated .slide-04__keyword em {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    animation: none;
}

.slide-04__suffix {
    font-size: 6.933vw;
    font-weight: 900;
    color: var(--color-teal);
}

.slide-04__cable {
    width: 13.333vw !important;
    height: auto !important;
    display: block;
    margin: var(--space-xs) auto 0;
}


/* ===========================
   05: 形へ
=========================== */

.slide-05 {
    display: flex;
    flex-direction: column;
}

.slide-05__inner {
    background: var(--color-bg-sub);
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl) var(--space-lg) var(--space-md);
    gap: var(--space-xs);
    box-sizing: border-box;
}

.slide-05__heading {
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.5;
    text-align: center;
}

.slide-05__heading span {
    color: var(--color-teal);
}

.slide-05__heading span.gray {
    color: var(--color-text);
}


/* 「スマホで迷わず読める」バウンスアニメ */

.slide-05__hl {
    display: inline-block;
    opacity: 0;
    transform: scale(0.3);
}

.slide-05.is-animated .slide-05__hl {
    animation: bounce-in 0.7s ease 0.3s forwards;
}

.slide-05__desc {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal);
    text-align: center;
    margin-bottom: var(--space-md);
}

.slide-05__visual {
    position: relative;
    width: 55%;
}

.slide-05__frame {
    width: 100%;
    height: auto;
    display: block;
}


/* スマホ内スクリーン（静的） */

.slide-05__screen {
    position: absolute;
    top: 10%;
    left: 8%;
    width: 84%;
    height: 78%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}


/* 5種類サムネイルグリッド */

.slide-05__types {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

.slide-05__types-row {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
}

.slide-05__type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    flex: 1;
    max-width: 30%;
}

.slide-05__types-row:last-child .slide-05__type {
    max-width: 40%;
}

.slide-05__type img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    display: block;
}

.slide-05__type span {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-navy);
    text-align: center;
    line-height: 1.3;
}


/* ===========================
   06: SNS/ECのUI
=========================== */

.slide-06 {
    display: flex;
    flex-direction: column;
}

.slide-06__upper {
    background: var(--color-bg-sub);
    flex: 1;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.slide-06__heading {
    font-size: var(--text-md);
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
    color: var(--color-teal);
}


/* 2+3グリッド */

.slide-06__grid {
    display: flex;
    flex-direction: column;
}

.slide-06__row2 {
    margin-bottom: var(--space-md);
}

.slide-06__row2,
.slide-06__row3 {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

.slide-06__phone-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 27%;
}

.slide-06__phone {
    display: block;
    border-radius: var(--radius-md);
}


/* 指+方向アイコン オーバーレイ */

.slide-06__overlay-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    pointer-events: none;
}

.slide-06__finger {
    width: 10vw;
    height: auto;
}

.slide-06__dir-icon {
    width: 5.333vw;
    height: auto;
}

.slide-06__brand {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-navy);
    margin-top: var(--space-2xs);
    text-align: center;
}


/* 指アニメーション（is-animatedでループ） */

.slide-06.is-animated .slide-06__phone-wrap--yoko .slide-06__overlay-wrap {
    animation: swipe-finger-h 1.4s ease-in-out infinite;
}

.slide-06.is-animated .slide-06__phone-wrap--tate .slide-06__overlay-wrap {
    animation: swipe-finger-v 1.4s ease-in-out infinite;
}


/* ===========================
   07〜09: CVRが変わる3つの理由
=========================== */

.slide-07,
.slide-08,
.slide-09 {
    background: var(--color-bg-sub);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl) var(--space-md) var(--space-md);
    gap: var(--space-xs);
    box-sizing: border-box;
}


/* カード外: シリーズタイトル＋番号サークル */

.slide-reason__meta {
    text-align: center;
    width: 100%;
}

.slide-reason__series {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}

.slide-reason__series span {
    color: var(--color-teal);
}

.slide-reason__series strong {
    font-size: var(--text-3xl);
}

.slide-reason__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14.4vw;
    height: 14.4vw;
    border-radius: 50%;
    border: 2px solid var(--color-teal);
    background: var(--color-white);
    z-index: 100;
    position: relative;
}

.slide-reason__circle span {
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-teal);
    line-height: 1;
}


/* 白いカード（bounce-in アニメーション） */

.slide-07 .slide-inner,
.slide-08 .slide-inner,
.slide-09 .slide-inner {
    background: var(--color-white);
    border: 2px solid var(--color-teal);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-lg) var(--space-xl) var(--space-lg);
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    /* 初期状態: 非表示 */
    opacity: 0;
    transform: scale(0.3);
    margin-top: -10%;
    z-index: 1;
}

.slide-07.is-animated .slide-inner,
.slide-08.is-animated .slide-inner,
.slide-09.is-animated .slide-inner {
    animation: bounce-in 0.7s ease forwards;
}

.slide-07.has-animated .slide-inner,
.slide-08.has-animated .slide-inner,
.slide-09.has-animated .slide-inner {
    opacity: 1;
    transform: none;
    animation: none;
}

.slide-09 .slide-inner {
    padding-bottom: var(--space-xs)
}


/* カード内コンテンツ */

.slide-reason__title {
    font-size: var(--text-md);
    font-weight: 900;
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    color: var(--color-teal);
}

.slide-reason__hl {
    background: var(--color-bg-yellow);
    padding: var(--space-2xs);
}

.slide-reason__desc {
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.9;
    color: var(--color-text);
}

.slide-reason__circle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.slide-reason__option {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-coral);
    border-radius: 100px;
    padding: var(--space-2xs) var(--space-sm);
    position: absolute;
    top: -10%;
    right: -200%;
    white-space: nowrap;
    line-height: 1.6;
}


/* 3台スマホ（slide-07） */

.slide-07__phones {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.slide-reason__phone {
    position: relative;
}

.slide-reason__phone-frame {
    width: 80%;
    height: auto;
    display: block;
}

.slide-reason__phone-screen {
    position: absolute;
    top: 10%;
    left: 8%;
    width: 66%;
    height: 68%;
    object-fit: cover;
}

.slide-07__chevron {
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--color-teal);
    flex-shrink: 0;
}


/* slide-08 */

.slide-08__visual {
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: center;
}

.slide-08__visual img {
    width: 60%;
    height: auto;
    margin-top: var(--space-xl);
}

.slide-08__note {
    font-size: var(--text-xs);
    color: var(--color-navy-lt);
    margin-top: var(--space-xs);
    line-height: 1.6;
}


/* slide-09 */

.slide-09__visual {
    margin-bottom: var(--space-sm);
}

.slide-09__visual img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}


/* ===========================
   10: ギャラリー
=========================== */

.slide-10 {
    background: var(--color-bg-sub);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm) var(--space-xs);
    gap: var(--space-sm);
}


/* ---- スマホグリッド ---- */

.slide-10__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    width: 85%;
    margin-top: -25%;
    margin-bottom: 50px;
}


/* 初期状態: 非表示（ぽよんと跳ねる準備） */

.slide-10__phone {
    opacity: 0;
    transform: scale(0);
}

.slide-10__phone img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}


/* アニメーション on: 各スマホを時差でポップイン */

.slide-10.is-animated .slide-10__phone {
    animation: phone-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.slide-10.is-animated .slide-10__phone:nth-child(1) {
    animation-delay: 0.32s;
}

.slide-10.is-animated .slide-10__phone:nth-child(2) {
    animation-delay: 0.08s;
}

.slide-10.is-animated .slide-10__phone:nth-child(3) {
    animation-delay: 0.56s;
}

.slide-10.is-animated .slide-10__phone:nth-child(4) {
    animation-delay: 0.20s;
}

.slide-10.is-animated .slide-10__phone:nth-child(5) {
    animation-delay: 0.48s;
}

.slide-10.is-animated .slide-10__phone:nth-child(6) {
    animation-delay: 0.04s;
}

.slide-10.is-animated .slide-10__phone:nth-child(7) {
    animation-delay: 0.64s;
}

.slide-10.is-animated .slide-10__phone:nth-child(8) {
    animation-delay: 0.16s;
}

.slide-10.is-animated .slide-10__phone:nth-child(9) {
    animation-delay: 0.40s;
}

.slide-10.is-animated .slide-10__phone:nth-child(10) {
    animation-delay: 0.60s;
}

.slide-10.is-animated .slide-10__phone:nth-child(11) {
    animation-delay: 0.24s;
}

.slide-10.is-animated .slide-10__phone:nth-child(12) {
    animation-delay: 0.44s;
}

.slide-10__badges {
    margin-bottom: 0;
}


/* ===========================
   11: 丸投げでOK
=========================== */

.slide-11 {
    background: var(--color-bg-sub);
}

.slide-11 .slide-inner {
    padding-top: 15px;
}

.slide-11 .slide-heading {
    font-size: var(--text-base);
    color: var(--color-teal);
}


/* 「すべて丸投げでOKです」ポップアップ（初回のみ） */

.slide-11__main-heading {
    font-size: var(--text-2xl);
    display: block;
    opacity: 0;
    transform: scale(0.3);
    font-weight: 900;
}

.slide-11.is-animated .slide-11__main-heading {
    animation: bounce-in 0.7s ease forwards;
    animation-delay: 0.1s;
}

.slide-11.has-animated .slide-11__main-heading {
    opacity: 1;
    transform: none;
    animation: none;
}


/* フィーチャーボックス */

.slide-11__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.slide-11__feature {
    background: var(--color-white);
    /*     overflow: hidden; */
    margin-bottom: var(--space-xs);
}

.slide-11__feature-title {
    font-size: var(--text-md);
    font-weight: 900;
    color: var(--color-white);
    background: var(--color-teal);
    text-align: center;
    padding: var(--space-2xs) var(--space-sm);
    width: 75%;
    margin: 0 auto;
    margin-top: -15px;
}


/* オレンジ文字：滑らかにフェードアップ */

.slide-11__feature-sub {
    font-size: var(--text-md);
    font-weight: 700;
    text-align: center;
    color: var(--color-coral);
    padding: var(--space-xs) var(--space-sm) 0;
    opacity: 0;
    transform: translateY(var(--space-xs));
    line-height: 1.4;
}

.slide-11.is-animated .slide-11__feature:nth-child(1) .slide-11__feature-sub {
    animation: fadeup 0.6s ease forwards;
    animation-delay: 0.5s;
}

.slide-11.is-animated .slide-11__feature:nth-child(2) .slide-11__feature-sub {
    animation: fadeup 0.6s ease forwards;
    animation-delay: 0.8s;
}

.slide-11.is-animated .slide-11__feature:nth-child(3) .slide-11__feature-sub {
    animation: fadeup 0.6s ease forwards;
    animation-delay: 1.1s;
}

.slide-11.has-animated .slide-11__feature-sub {
    opacity: 1;
    transform: none;
    animation: none;
}

.slide-11__feature p:last-child {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-teal);
    font-weight: 600;
    padding: 0 var(--space-sm) var(--space-xs) var(--space-sm);
}

.slide-11__cta-text {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--color-teal);
}


/* ===========================
   12: 大手サイト比較
=========================== */

.slide-12 {
    background: var(--color-bg-sub);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
}


/* 上部テキストエリア */

.slide-12__top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-md) var(--space-lg) var(--space-sm);
}

.slide-12__heading {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-teal);
    text-align: center;
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.slide-12__hl {
    border-bottom: 4px solid var(--color-coral);
    padding-bottom: 3px;
}


/* サイトリスト */

.slide-12__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-sm);
}

.slide-12__item {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-teal);
}

.slide-12__name-price {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1.4;
}

.slide-12__name-price span {
    color: var(--color-teal);
}

.slide-12__note {
    font-size: var(--text-base);
    color: var(--color-teal);
    margin-top: 0.4vw;
}

.slide-12__summary {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-coral);
    margin-bottom: var(--space-xs);
    text-align: center;
}

.slide-12__memo-lead {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-teal);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.slide-12__memo-logo {
    height: 6.4vw;
    width: auto;
}


/* 黄色丸エリア */

.slide-12__circles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    position: relative;
    z-index: 2;
}

.slide-12__circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25.333vw;
    height: 25.333vw;
    background: var(--color-yellow);
    border-radius: var(--radius-full);
    text-align: center;
    line-height: 1.2;
}


/* ぽよぼよ縮小アニメーション（スライドがアクティブな間ループ） */

.slide-12.is-animated .slide-12__circle:nth-child(1) {
    animation: bouncy-pulse 2s ease-in-out infinite;
    animation-delay: 0s;
}

.slide-12.is-animated .slide-12__circle:nth-child(2) {
    animation: bouncy-pulse 2s ease-in-out infinite;
    animation-delay: 0.4s;
}

.slide-12.is-animated .slide-12__circle:nth-child(3) {
    animation: bouncy-pulse 2s ease-in-out infinite;
    animation-delay: 0.8s;
}

.slide-12__circle-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.slide-12__circle-monthly {
    font-size: var(--text-xs);
    font-weight: 700;
}

.slide-12__circle-price {
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--color-text);
    line-height: 1;
}

.slide-12__circle-unit {
    font-size: var(--text-xs);
    font-weight: 700;
}

.slide-12__circle--text .slide-12__circle-msg {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
}


/* フッターダークバナー */

.slide-12__footer {
    background: var(--color-navy);
    border-radius: 40% 40% 0 0 / var(--space-2xl) var(--space-2xl) 0 0;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    text-align: center;
}

.slide-12__footer p {
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.4;
}

.slide-12__footer strong {
    color: var(--color-yellow);
}


/* ===========================
   13: 料金プラン
=========================== */

.slide-13 {
    background: var(--color-bg-sub);
    display: flex;
    flex-direction: column;
    padding: var(--space-sm) 0 0;
    overflow: hidden;
}


/* ヘッダー */

.slide-13__head {
    padding: 0 var(--space-lg) var(--space-xs);
    text-align: center;
    flex-shrink: 0;
}

.slide-13__title {
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--color-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xs);
    line-height: 1.2;
}

.slide-13__logo {
    height: 7.467vw;
    width: auto;
}

.slide-13__sub {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-2xs);
    color: var(--color-teal);
    font-weight: 600;
}

.slide-13__tax {
    font-size: var(--text-xs);
    color: var(--color-teal);
}


/* 横スワイパーラップ */

.slide-13__swiper-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


/* 横スワイプヒント */

.slide-13__swipe-hint {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
}

.slide-13__swipe-hint.hint-active {
    animation: swipe-hint-3x 3.5s 0.4s ease forwards;
}

.slide-13__swipe-finger {
    font-size: var(--text-2xl);
    line-height: 1;
}

.slide-13__swipe-label {
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}


/* 横スワイパー本体 */

.swiper-plans {
    height: 100%;
    padding: var(--space-xs) var(--space-sm) var(--space-xs) !important;
    box-sizing: border-box;
}


/* プランカード1枚ラップ */

.slide-13__plan {
    height: auto !important;
    display: flex;
    flex-direction: column;
}

.slide-13__plan-tag {
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: center;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    flex-shrink: 0;
}

.slide-13__plan-tag--yellow {
    background: var(--color-yellow);
    color: var(--color-text);
}

.slide-13__plan-tag--popular {
    background: var(--color-coral);
    color: var(--color-white);
}

.slide-13__plan-tag--teal {
    background: var(--color-teal);
    color: var(--color-white);
}

.slide-13__plan-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    /*     flex: 1; */
    border: 1px solid var(--color-teal);
}

.slide-13__plan-card--popular .slide-13__plan-head-bar {
    background: var(--color-teal);
}

.slide-13__plan-head-bar {
    background: var(--color-navy);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
}

.slide-13__plan-head-bar h3 {
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.2;
}

.slide-13__plan-body {
    background: var(--color-white);
    padding: var(--space-xs);
}

.slide-13__plan-price {
    font-size: var(--text-base);
    text-align: center;
    margin-bottom: var(--space-2xs);
    line-height: 1;
    color: var(--color-teal);
}

.slide-13__plan-price span {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-teal);
    display: inline-block;
    line-height: 1;
}

.slide-13__plan-device {
    font-size: var(--text-base);
    text-align: center;
    color: var(--color-teal);
    margin-bottom: var(--space-xs);
}

.slide-13__plan-volume {
    display: block;
    background: var(--color-teal);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    text-align: center;
    box-sizing: border-box;
    width: 80%;
    margin: 0 auto;
}

.slide-13__items {
    list-style: none;
}

.slide-13__items li {
    font-size: var(--text-xs);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-teal);
    line-height: 1.4;
    color: #444;
    text-align: center;
}

.slide-13__items li:last-child {
    border-bottom: none;
}

.slide-13__items em {
    font-style: normal;
    font-weight: 700;
}

.slide-13__items .ok {
    color: var(--color-coral);
}

.slide-13__items .ng {
    color: var(--color-text);
}

.slide-13__items .opt {
    color: var(--color-coral);
}

.slide-13__footnote {
    font-size: var(--text-xs);
    color: #888;
    margin-top: var(--space-xs);
    line-height: 1.5;
}


/* 説明ボタン */

.slide-13__popup-wrap {
    padding: var(--space-xs) var(--space-lg) var(--space-sm);
    text-align: center;
    flex-shrink: 0;
}

.slide-13__popup-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block;
    width: 100%;
}

.slide-13__popup-btn img {
    max-width: 100%;
    height: auto;
}


/* ポップアップモーダル */

.slide-13__modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    box-sizing: border-box;
}

.slide-13__modal.is-open {
    display: flex;
}

.slide-13__modal-inner {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    width: 100%;
    max-height: 80svh;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
}

.slide-13__modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: none;
    border: none;
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--color-text);
    line-height: 1;
    width: var(--space-2xl);
    height: var(--space-2xl);
}

.slide-13__modal-title {
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--color-coral);
    margin-bottom: var(--space-md);
    text-align: center;
}

.slide-13__modal-list dt {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-navy);
    margin-top: var(--space-sm);
    border-left: 3px solid var(--color-teal);
    padding-left: var(--space-xs);
}

.slide-13__modal-list dd {
    font-size: var(--text-xs);
    color: #555;
    line-height: 1.7;
    margin-top: var(--space-2xs);
    padding-left: var(--space-sm);
}


/* ===========================
   14: 安心保守パック
=========================== */

.slide-14 {
    background: var(--color-bg-sub);
}

.slide-14 .slide-inner {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}


/* 白カード：初回のみぽよんと跳ねる */

.slide-14__pack {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-sm);
    opacity: 0;
    transform: scale(0.3);
}

.slide-14.is-animated .slide-14__pack {
    animation: bounce-in 0.7s ease forwards;
}

.slide-14.has-animated .slide-14__pack {
    opacity: 1;
    transform: none;
    animation: none;
}


/* カードヘッダー帯 */

.slide-14__pack-head {
    background: var(--color-teal);
    color: var(--color-white);
    font-size: var(--text-xl);
    font-weight: 900;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
}


/* タグチップ群 */

.slide-14__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
}

.slide-14__tags li {
    background: var(--color-teal);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px var(--space-xs);
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

.slide-14__tag--note {
    background: transparent !important;
    color: var(--color-navy-lt) !important;
    border: 1px solid var(--color-navy-lt);
}


/* スペック＋価格 横並びラッパー */

.slide-14__middle-row {
    display: flex;
    align-items: center;
    padding: 0 var(--space-md) var(--space-xs);
    border-top: 1px solid var(--color-border);
    gap: var(--space-xs);
}


/* スペックボックス */

.slide-14__specs {
    display: flex;
    gap: var(--space-xs);
    padding: 0;
    flex: 0 0 auto;
}

.slide-14__spec-item {
    flex: 1;
    background: var(--color-teal);
    border-radius: var(--radius-sm);
    text-align: center;
    padding: var(--space-xs) var(--space-2xs);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
}

.slide-14__spec-num {
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1;
}

.slide-14__spec-label {
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.3;
}


/* 価格行 */

.slide-14__price-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 0;
    border-top: none;
}

.slide-14__all {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1.3;
}

.slide-14__price {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1;
}

.slide-14__price-num {
    font-size: var(--text-3xl);
    color: var(--color-teal);
    display: inline-block;
}


/* 「3,500」ぽよぼよ縮小ループ */

.slide-14.is-animated .slide-14__price-num {
    animation: bouncy-pulse 2s ease-in-out infinite;
    animation-delay: 0.8s;
}


/* カード内注記（赤） */

.slide-14__pack-note {
    font-size: var(--text-xs);
    color: var(--color-coral);
    font-weight: 700;
    line-height: 1.6;
    padding: var(--space-xs) var(--space-md) var(--space-2xs);
    border-top: 1px solid var(--color-border);
}


/* カード内説明文（黒） */

.slide-14__pack-desc {
    font-size: var(--text-xs);
    color: var(--color-text);
    line-height: 1.7;
    padding: 0 var(--space-md) var(--space-sm);
}


/* 9割テキスト */

.slide-14__ratio {
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--color-navy);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.slide-14__ratio-num {
    font-size: var(--text-4xl);
    color: var(--color-teal);
    line-height: 1;
    vertical-align: bottom;
}


/* メリットリスト */

.slide-14__merits {
    list-style: none;
    font-size: var(--text-sm);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.slide-14__merits li {
    padding-left: var(--space-md);
    position: relative;
    color: #444;
}

.slide-14__merits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-teal);
    font-weight: 700;
}

.slide-14__btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-teal);
    border-radius: var(--radius-full);
    color: var(--color-teal);
    font-size: var(--text-sm);
    font-weight: 700;
    background: var(--color-white);
    text-decoration: none;
    margin-bottom: var(--space-sm);
    box-sizing: border-box;
    gap: var(--space-xs);
}


/* ===========================
   15: オプション料金
=========================== */

.slide-15 {
    background: var(--color-bg-sub);
}

.slide-inner--15 {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    display: flex;
    flex-direction: column;
}

.slide-15__title {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-teal);
    text-align: center;
    flex-shrink: 0;
}


/* ---- グリッド外枠（ボーダー緩やか出現） ---- */

.slide-15__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.8s ease;
}

.slide-15.is-animated .slide-15__grid {
    border-color: #1b7e9d;
}


/* ---- セル ---- */

.slide-15__cell {
    padding: var(--space-xs) var(--space-sm);
    border-right: 1px solid #1b7e9d;
    border-bottom: 1px solid #1b7e9d;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 初期状態 */
    opacity: 0;
    transform: scale(0.55);
}

.slide-15__cell:nth-child(even) {
    border-right: none;
}

.slide-15__cell:nth-last-child(-n+2) {
    border-bottom: none;
}


/* ズームイン（上から順に） */

.slide-15.is-animated .slide-15__cell {
    animation: zoom-in-cell 0.4s ease forwards;
}

.slide-15.is-animated .slide-15__cell:nth-child(1) {
    animation-delay: 0.10s;
}

.slide-15.is-animated .slide-15__cell:nth-child(2) {
    animation-delay: 0.18s;
}

.slide-15.is-animated .slide-15__cell:nth-child(3) {
    animation-delay: 0.26s;
}

.slide-15.is-animated .slide-15__cell:nth-child(4) {
    animation-delay: 0.34s;
}

.slide-15.is-animated .slide-15__cell:nth-child(5) {
    animation-delay: 0.42s;
}

.slide-15.is-animated .slide-15__cell:nth-child(6) {
    animation-delay: 0.50s;
}

.slide-15.is-animated .slide-15__cell:nth-child(7) {
    animation-delay: 0.58s;
}

.slide-15.is-animated .slide-15__cell:nth-child(8) {
    animation-delay: 0.66s;
}

.slide-15.is-animated .slide-15__cell:nth-child(9) {
    animation-delay: 0.74s;
}

.slide-15.is-animated .slide-15__cell:nth-child(10) {
    animation-delay: 0.82s;
}

.slide-15__cell-name {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.4;
    margin-bottom: var(--space-2xs);
}

.slide-15__cell-name small {
    display: block;
    font-weight: 400;
    color: #888;
    font-size: var(--text-xs);
}

.slide-15__cell-price {
    font-size: var(--text-sm);
    font-weight: 900;
    color: var(--color-teal);
    line-height: 1.2;
}

.slide-15__cell-price--lg {
    font-size: var(--text-md);
}

.slide-15__cell-price strong {
    font-size: var(--text-xs);
}

.slide-15__cell-note {
    font-size: var(--text-xs);
    color: var(--color-coral);
    line-height: 1.3;
    margin-top: var(--space-2xs);
}

.slide-15__monthly {
    font-size: var(--text-xs);
    vertical-align: middle;
}


/* ---- PDCAセクション ---- */

.slide-15__pdca {
    background: var(--color-white);
    border: 2px solid #1b7e9d;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    flex-shrink: 0;
}

.slide-15__pdca-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2xs);
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.slide-15__pdca-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.slide-15__pdca-tag {
    background: var(--color-coral);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.slide-15__pdca-name {
    font-size: var(--text-base);
    font-weight: 900;
    color: var(--color-navy);
}

.slide-15__pdca-price {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal);
}

.slide-15__pdca-price strong {
    font-size: var(--text-lg);
}

.slide-15__pdca-btn {
    background: var(--color-teal);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.slide-15__pdca-req {
    font-size: var(--text-xs);
    color: #888;
    margin-bottom: var(--space-2xs);
}

.slide-15__pdca-desc {
    font-size: var(--text-xs);
    color: #444;
    line-height: 1.7;
    margin-bottom: var(--space-xs);
}

.slide-15__pdca-visual img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}


/* ---- PDCAポップアップ ---- */

.slide-15__modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    box-sizing: border-box;
}

.slide-15__modal.is-open {
    display: flex;
}

.slide-15__modal-inner {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    width: 100%;
    max-height: 80svh;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
}

.slide-15__modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: none;
    border: none;
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--color-text);
    line-height: 1;
}

.slide-15__modal-title {
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--color-teal);
    margin-bottom: var(--space-xs);
}

.slide-15__modal-price {
    font-size: var(--text-base);
    color: var(--color-teal);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.slide-15__modal-price strong {
    font-size: var(--text-2xl);
}

.slide-15__modal-req {
    font-size: var(--text-xs);
    color: var(--color-coral);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.slide-15__modal-desc {
    font-size: var(--text-sm);
    color: #444;
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.slide-15__modal-items {
    list-style: none;
    font-size: var(--text-sm);
    line-height: 2;
}

.slide-15__modal-items li::before {
    content: '✓ ';
    color: var(--color-teal);
    font-weight: 700;
}


/* ===========================
   16-17: 導入の流れ
=========================== */

.slide-16,
.slide-17 {
    background: var(--color-bg-sub);
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* slide-inner を高さいっぱいに伸ばす */

.slide-16 .slide-inner,
.slide-17 .slide-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    padding-bottom: 24vw;
    /* 固定フッター分の余白 */
    overflow: hidden;
}

.slide-flow {
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.slide-flow__img {
    width: auto;
    height: 100%;
    max-width: 30%;
    max-height: none;
    flex-shrink: 0;
    object-fit: contain;
    object-position: top;
}

.slide-flow__steps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.slide-16 .slide-heading,
.slide-17 .slide-heading {
    color: var(--color-teal);
    font-size: var(--text-2xl);
}

.slide-flow__step {
    display: flex;
    align-items: flex-start;
}

.slide-flow__step-body h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-2xs);
    color: var(--color-teal);
}

.slide-flow__step-body p {
    font-size: var(--text-base);
    line-height: 1.7;
    font-weight: 600;
    color: var(--color-teal);
    margin-bottom: var(--space-md);
}


/* ===========================
   18: よくある質問
=========================== */

.slide-18 {
    background: var(--color-bg-sub);
}

.slide-18 .slide-heading {
    font-size: var(--text-3xl);
    color: var(--color-teal);
    margin-bottom: var(--space-lg);
}

.slide-faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}


/* Q と A は独立したブロック */

.slide-faq__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}


/* Q バー：両端丸い独立ブロック */

.slide-faq__q {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
    font-weight: 700;
    background: var(--color-faq-q);
    color: var(--color-white);
    border-radius: 100px;
}


/* Q. プレフィックス */

.slide-faq__q::before {
    content: 'Q.';
    font-weight: 700;
    flex-shrink: 0;
}


/* 右端の矢印アイコン */

.slide-faq__q::after {
    content: '';
    display: block;
    width: var(--space-xs);
    height: var(--space-xs);
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    transform: rotate(45deg) translateY(-2px);
    margin-left: auto;
    flex-shrink: 0;
}


/* A テキスト：背景なし、テキスト色はcolor-text */

.slide-faq__a {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--text-xs);
    line-height: 1.8;
    color: var(--color-text);
    background: transparent;
}

.slide-faq__a::before {
    content: 'A.';
    color: var(--color-teal);
    font-weight: 700;
    flex-shrink: 0;
}


/* ===========================
   19: 運営会社
=========================== */

.slide-19 {
    background: var(--color-bg-sub);
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: var(--space-2xl);
    padding-bottom: calc(var(--space-2xl) + 34vw);
    overflow-y: auto;
}

@media (min-width: 431px) {
    .slide-19 {
        padding-bottom: calc(var(--space-2xl) + 146px);
    }
}

.slide-19__inner {
    width: 90%;
    margin: 0 auto;
}

.slide-19__heading {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-teal);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-teal);
    margin-bottom: var(--space-sm);
}

.slide-19__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
}

.slide-19__item dt {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
}

.slide-19__item dd {
    font-size: var(--text-xs);
    color: var(--color-teal);
    line-height: 1.5;
    font-weight: 700;
}

.slide-footer {
    text-align: center;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
}

.slide-footer__logo {
    height: 7.467vw;
    width: auto;
    margin: 0 auto var(--space-xs);
}

@media (min-width: 431px) {
    .slide-footer__logo {
        height: 32.1px;
    }
}

.slide-footer__copy {
    font-size: var(--text-xs);
    color: var(--color-text-light);
}


/* ===========================
   Swiper ページネーション
=========================== */

.swiper-pagination-bullet {
    background: var(--color-navy-lt);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--color-teal);
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--color-teal);
}


/* ===========================
   PC(431px+): CSS変数をpx固定値に切り替え（vw巨大化防止）
=========================== */

@media (min-width: 431px) {
     :root {
        --text-xs: 11.47px;
        --text-sm: 13.76px;
        --text-base: 16.05px;
        --text-md: 18.35px;
        --text-lg: 20.64px;
        --text-xl: 22.93px;
        --text-2xl: 27.52px;
        --text-3xl: 36.69px;
        --text-4xl: 45.87px;
        --space-2xs: 4.59px;
        --space-xs: 9.17px;
        --space-sm: 13.76px;
        --space-md: 18.35px;
        --space-lg: 22.93px;
        --space-xl: 27.52px;
        --space-2xl: 36.69px;
        --space-3xl: 45.87px;
        --space-4xl: 55.04px;
        --radius-sm: 4.59px;
        --radius-md: 9.17px;
        --radius-lg: 13.76px;
        --radius-xl: 18.35px;
    }
    /* slide-04: 直接vw指定したフォントサイズをpx固定 */
    .slide-04__mid,
    .slide-04__suffix {
        font-size: 29.81px;
        /* 6.933vw × 430 ÷ 100 */
    }
    .slide-04__keyword em {
        font-size: 82.56px;
        /* 19.2vw × 430 ÷ 100 */
    }
    .slide-04__cable {
        width: 57.33px !important;
        /* 13.333vw × 430 ÷ 100 */
    }
    /* slide-06: 直接vw指定した画像サイズをpx固定 */
    .slide-06__finger {
        width: 43px;
        /* 10vw × 430 ÷ 100 */
    }
    .slide-06__dir-icon {
        width: 22.93px;
        /* 5.333vw × 430 ÷ 100 */
    }
    /* slide-07〜09: 番号サークルをpx固定 */
    .slide-reason__circle {
        width: 61.92px;
        /* 14.4vw × 430 ÷ 100 */
        height: 61.92px;
    }
    /* slide-09: ※オプションバッジをpx固定 */
    .slide-reason__option {
        top: -6.88px;
        /* 1.6vw × 430 ÷ 100 */
        right: -57.33px;
        /* 13.333vw × 430 ÷ 100 */
        padding: 1.72px 9.17px;
    }
    /* slide-10: 統計丸をpx固定 */
    .slide-10__stat {
        width: 114.67px;
        /* 26.667vw × 430 ÷ 100 */
        height: 114.67px;
    }
    /* slide-12: 黄色丸をpx固定 */
    .slide-12__circle {
        width: 108.93px;
        /* 25.333vw × 430 ÷ 100 */
        height: 108.93px;
    }
    .slide-12__memo-logo {
        height: 27.52px;
        /* 6.4vw × 430 ÷ 100 */
    }
    /* slide-16/17: フッター余白をpx固定 */
    .slide-16 .slide-inner,
    .slide-17 .slide-inner {
        padding-bottom: 90px;
        /* 24vw × 375 ÷ 100 ≈ 90px */
    }
}


/* ===========================
   SP大画面(376px〜430px): CSS変数を375px基準のpx値に固定（XR等でのvwスケール崩れ防止）
=========================== */

@media (min-width: 376px) and (max-width: 430px) {
     :root {
        --text-xs: 10px;
        --text-sm: 12px;
        --text-base: 14px;
        --text-md: 16px;
        --text-lg: 18px;
        --text-xl: 20px;
        --text-2xl: 24px;
        --text-3xl: 32px;
        --text-4xl: 40px;
        --space-3xs: 4px;
        --space-2xs: 4px;
        --space-xs: 8px;
        --space-sm: 12px;
        --space-md: 16px;
        --space-lg: 20px;
        --space-xl: 24px;
        --space-2xl: 32px;
        --space-3xl: 40px;
        --space-4xl: 48px;
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
    }
    /* slide-04: 直接vw指定したフォントサイズをpx固定 */
    .slide-04__mid,
    .slide-04__suffix {
        font-size: 26px;
        /* 6.933vw × 375 ÷ 100 */
    }
    .slide-04__keyword em {
        font-size: 72px;
        /* 19.2vw × 375 ÷ 100 */
    }
    .slide-04__cable {
        width: 50px !important;
        /* 13.333vw × 375 ÷ 100 */
    }
    /* slide-06: 直接vw指定した画像サイズをpx固定 */
    .slide-06__finger {
        width: 38px;
        /* 10vw × 375 ÷ 100 */
    }
    .slide-06__dir-icon {
        width: 20px;
        /* 5.333vw × 375 ÷ 100 */
    }
    /* slide-07〜09: 番号サークルをpx固定 */
    .slide-reason__circle {
        width: 54px;
        /* 14.4vw × 375 ÷ 100 */
        height: 54px;
    }
    /* slide-09: ※オプションバッジをpx固定 */
    .slide-reason__option {
        top: -6px;
        right: -50px;
        /* 13.333vw × 375 ÷ 100 */
        padding: 1.5px 8px;
    }
    /* slide-12: 黄色丸をpx固定 */
    .slide-12__circle {
        width: 95px;
        /* 25.333vw × 375 ÷ 100 */
        height: 95px;
    }
    .slide-12__memo-logo {
        height: 24px;
        /* 6.4vw × 375 ÷ 100 */
    }
    /* slide-13: ロゴをpx固定 */
    .slide-13__logo {
        height: 28px;
        /* 7.467vw × 375 ÷ 100 */
    }
    /* フッターロゴをpx固定 */
    .slide-footer__logo {
        height: 28px;
        /* 7.467vw × 375 ÷ 100 */
    }
}


/* ===========================
   PC(769px+): SP幅センター＋両脇メインカラー
=========================== */

@media (min-width: 769px) {
    /* Swiper全体を中央480px幅に固定 */
    #swipe-lp {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background: var(--color-teal);
        position: relative;
    }
    /* 両脇の装飾エリア */
    #swipe-lp::before,
    #swipe-lp::after {
        content: '';
        flex: 1;
        background: var(--color-teal);
        align-self: stretch;
    }
    /* lp-wrapperにサイズを集約 */
    .lp-wrapper {
        width: 480px;
        flex-shrink: 0;
        box-shadow: 0 0 40px rgba(0, 0, 0, .25);
        position: relative;
        z-index: 1;
        background: var(--color-white);
    }
    .lp-swiper {
        width: 100%;
        height: 100svh;
    }
    .lp-footer {
        max-width: 480px;
    }
    /* ヘッダーもSP幅に合わせる */
    .lp-header {
        width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
    /* slide-innerはSP幅なのでPC調整不要 */
    .slide-inner {
        max-width: 100%;
    }
}