/* =========================================================
   イングリード LP - スタイルシート
   ※ Swiper の CSS 読み込み後に適用される想定
   ========================================================= */

        :root {
            /* イングリード提供のブランドカラー */
            --primary-blue: #004098;
            --sub-blue: #00b0f0;
            --accent-orange: #ee8800;
            --light-blue: #F4FAFE;

            /* 追加ブランドカラー */
            --color-p1: #e6f0fc;
            --color-attention: #ee8800;
            --color-primary-navy: #002b5c;

            --text-main: #333333;
            --text-muted: #666666;
            --bg-gray: #F8F9FA;
            --white: #FFFFFF;
            --line-green: #06C755;
            --chat-bg: #8EADC8;
        }

        /* -------------------------------------------
           最優先：レスポンシブ修正 (box-sizing の徹底)
           ------------------------------------------- */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        html,
        body {
            overflow-x: hidden;
            /* スマホで右側がはみ出るのを防ぐ最終防衛線 */
            width: 100%;
        }

        body {
            font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
            color: var(--text-main);
            /* 440px を超えた外側に見える色（mainを際立たせる濃色） */
            background-color: #222831;
            line-height: 1.8;
            letter-spacing: 0.03em;
            min-height: 100vh;
        }

        /* -------------------------------------------
           モバイル専用フレーム
           - main は 440px までしか広がらない
           - cqw（コンテナクエリ単位）の基準コンテナ
           - 440px を超えた領域は body の背景色のみ表示
           ------------------------------------------- */
        main {
            container-type: inline-size;
            display: block;
            width: 100%;
            max-width: 440px;
            margin-inline: auto;
            min-height: 100vh;
            background-color: var(--bg-gray);
            overflow-x: clip;
            position: relative;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            /* 画像の下にできる不要な余白を消す */
        }

        .container {
            width: 100%;
            max-width: 266.6667cqw;
            margin: 0 auto;
            padding: 0 6.1538cqw;
        }

        /* セクションの余白設定 */
        section {
            padding: 25.641cqw 0;
            width: 100%;
        }

        
            section {
                padding: 15.3846cqw 0;
            }
        

        section:nth-child(even) {
            background-color: var(--white);
        }

        .section-title {
            text-align: center;
            font-size: 8.2051cqw;
            color: var(--primary-blue);
            margin-bottom: 15.3846cqw;
            font-weight: 900;
            line-height: 1.3;
            overflow-wrap: anywhere;
        }



        
            .section-title {
                font-size: 5.641cqw;
                line-height: 1.4;
                margin-bottom: 10.2564cqw;
                padding: 0 5.1282cqw;
            }
        


        /* -------------------------------------------
           Header (Hero)
           ------------------------------------------- */
        header {
            --header-grain-opacity: 0.28;
            --header-grain-size: 128px;
            --hero-bg-duration: 28s;
            background-color: #001428;
            color: var(--white);
            padding: 23.0769cqw 5.1282cqw 30.7692cqw;
            min-height: 145cqw;
            text-align: center;
            width: 100%;
            position: relative;
            isolation: isolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hero-bg {
            position: absolute;
            inset: -12%;
            z-index: 0;
            background-image: url('../../images/FV_bg.webp');
            background-size: cover;
            background-position: 58% center;
            background-repeat: no-repeat;
            transform-origin: center center;
            will-change: transform;
            animation: heroBgKenBurns var(--hero-bg-duration) ease-in-out infinite;
        }

        @keyframes heroBgKenBurns {
            0%, 100% {
                transform: scale(1.1) translate3d(0, 0, 0);
            }
            33% {
                transform: scale(1.18) translate3d(-2.5%, -1.5%, 0);
            }
            66% {
                transform: scale(1.14) translate3d(2%, -2%, 0);
            }
        }

        /* primary-blue を乗算で重ねる */
        header::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-color: var(--primary-blue);
            mix-blend-mode: multiply;
            opacity: 0.72;
        }

        /* 控えめなザラザラ質感（調整: --header-grain-opacity / --header-grain-size） */
        header::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            opacity: var(--header-grain-opacity);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: var(--header-grain-size) var(--header-grain-size);
            mix-blend-mode: overlay;
        }

        header .container {
            position: relative;
            z-index: 3;
            width: 100%;
            max-width: 266.6667cqw;
            margin: 0 auto;
            padding: 0 4.1026cqw;
        }

        header .scroll-down {
            z-index: 3;
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-bg {
                animation: none;
                inset: 0;
                transform: none;
            }
        }

        
            header {
                padding: 18.4615cqw 3.8462cqw 27.6923cqw;
                min-height: 132cqw;
            }
        

        .hero-logo-wrapper {
            margin: 0 auto 8.2051cqw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-logo-img {
            width: 72.3077cqw;
            max-width: 318px;
            height: auto;
        }

        /* 画像が読み込めなかった時のフォールバックテキスト用 */
        .hero-logo-text {
            font-size: 6.6667cqw;
            color: var(--primary-blue);
            font-weight: 900;
            letter-spacing: 0.3846cqw;
            display: none;
        }

        .hero-catchphrase {
            font-size: 7.6923cqw;
            font-weight: 900;
            color: var(--white);
            margin-bottom: 8.2051cqw;
            line-height: 1.45;
            letter-spacing: 0.06em;
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
        }

        .hero-catchphrase::before {
            content: '';
            display: block;
            width: 40.1026cqw;
            height: 0.5128cqw;
            margin: 0 auto 4.6154cqw;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, var(--sub-blue), transparent);
        }

        .hero-message {
            color: rgba(255, 255, 255, 0.94);
            font-size: 3.5897cqw;
            font-weight: 500;
            line-height: 1.85;
            text-align: center;
            max-width: 100%;
            margin: 0 auto;
            padding: 5.641cqw 4.6154cqw;
            letter-spacing: 0.04em;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 2.5641cqw;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .hero-message p {
            margin-bottom: 4.6154cqw;
        }

        .hero-message span {
            display: inline;
        }

        .hero-message p:last-child {
            margin-bottom: 0;
        }

        .scroll-down {
            position: absolute;
            bottom: 8.2051cqw;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255, 255, 255, 0.88);
            font-size: 3.0769cqw;
            font-weight: 700;
            letter-spacing: 0.3846cqw;
            animation: bounce 2s infinite;
        }

        .scroll-down-arrow {
            width: 3.8462cqw;
            height: 3.8462cqw;
            border-right: 2px solid rgba(255, 255, 255, 0.9);
            border-bottom: 2px solid rgba(255, 255, 255, 0.9);
            transform: rotate(45deg);
            margin-top: 2.0513cqw;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translate(-50%, 0);
            }

            40% {
                transform: translate(-50%, -2.5641cqw);
            }

            60% {
                transform: translate(-50%, -1.2821cqw);
            }
        }

        
            .hero-logo-img {
                width: 66.6667cqw;
            }

            .hero-logo-wrapper {
                margin-bottom: 7.1795cqw;
            }

            .hero-catchphrase {
                font-size: 6.4103cqw;
                margin-bottom: 7.1795cqw;
            }

            .hero-message {
                font-size: 3.3333cqw;
                padding: 5.1282cqw 3.8462cqw;
            }

            .scroll-down {
                bottom: 5.1282cqw;
            }
        

        
            .voice-card-body {
                flex-direction: column;
                gap: 5.1282cqw;
            }
        

        .voice-profile {
            flex-shrink: 0;
            text-align: center;
            width: 30.7692cqw;
        }

        
            .voice-profile {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        

        .voice-profile img {
            border-radius: 50%;
            width: 20.5128cqw;
            height: 20.5128cqw;
            object-fit: cover;
            margin-bottom: 2.5641cqw;
            border: 2px solid var(--sub-blue);
        }

        .voice-profile p {
            font-size: 3.8462cqw;
            font-weight: 700;
        }

        .voice-players {
            flex-grow: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5.1282cqw;
            width: 100%;
        }

        
            .voice-players {
                grid-template-columns: 1fr;
            }
        

        .player-box {
            background: var(--bg-gray);
            padding: 5.1282cqw;
            border-radius: 2.0513cqw;
            width: 100%;
        }

        .player-label {
            font-size: 3.5897cqw;
            font-weight: 700;
            margin-bottom: 3.0769cqw;
            color: var(--primary-blue);
            display: flex;
            align-items: center;
            gap: 1.2821cqw;
        }

        audio {
            width: 100%;
            height: 10.2564cqw;
            outline: none;
        }

        /* -------------------------------------------
           LINE Support
           ------------------------------------------- */
        .chat-container {
            display: flex;
            justify-content: center;
            gap: 10.2564cqw;
            flex-wrap: wrap;
            width: 100%;
        }

        .chat-phone {
            width: 100%;
            max-width: 87.1795cqw;
            /* スマホ枠の最大幅を制限 */
            background-color: var(--chat-bg);
            border-radius: 7.6923cqw;
            border: 10px solid var(--text-main);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .chat-header {
            background: rgba(255, 255, 255, 0.95);
            padding: 4.1026cqw;
            text-align: center;
            font-weight: 700;
            font-size: 3.8462cqw;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            color: var(--text-main);
            flex-shrink: 0;
        }

        .chat-body {
            /* スクロールLINE: 高さ102.5641cqw指定 */
            height: 102.5641cqw;
            padding: 5.1282cqw 3.8462cqw;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4.1026cqw;
        }

        /* Custom scrollbar for chat */
        .chat-body::-webkit-scrollbar {
            width: 1.5385cqw;
        }

        .chat-body::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
        }

        .chat-body::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 2.5641cqw;
        }

        .chat-bubble {
            max-width: 85%;
            padding: 3.0769cqw 4.1026cqw;
            border-radius: 4.1026cqw;
            font-size: 3.5897cqw;
            line-height: 1.5;
            position: relative;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .chat-bubble.left {
            align-self: flex-start;
            background: var(--white);
            border-top-left-radius: 0.5128cqw;
        }

        .chat-bubble.right {
            align-self: flex-end;
            background: #85E249;
            border-top-right-radius: 0.5128cqw;
        }

        .chat-time {
            font-size: 2.8205cqw;
            color: rgba(255, 255, 255, 0.9);
            align-self: flex-end;
            margin: 0 1.5385cqw;
            margin-bottom: 0.5128cqw;
            flex-shrink: 0;
        }

        .chat-row {
            display: flex;
            align-items: flex-end;
        }

        .chat-row.right {
            flex-direction: row-reverse;
        }

        /* -------------------------------------------
           Counseling Video
           ------------------------------------------- */
        .video-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 3.0769cqw;
            box-shadow: 0 10px 30px rgba(0, 64, 152, 0.1);
            background-color: #000;
            margin: 10.2564cqw 0;
        }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .video-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('https://via.placeholder.com/1200x675/004098/FFFFFF?text=Counseling+Video') center/cover;
        }

        .play-btn {
            width: 17.9487cqw;
            height: 17.9487cqw;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.3s ease, background 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        
            .play-btn {
                width: 12.8205cqw;
                height: 12.8205cqw;
            }

            .play-btn::after {
                border-top: 10px solid transparent !important;
                border-left: 15px solid var(--accent-orange) !important;
                border-bottom: 10px solid transparent !important;
                margin-left: 1.0256cqw !important;
            }
        

        .play-btn:hover {
            transform: scale(1.1);
            background: var(--white);
        }

        .play-btn::after {
            content: '';
            border-top: 14px solid transparent;
            border-left: 20px solid var(--accent-orange);
            border-bottom: 14px solid transparent;
            margin-left: 1.5385cqw;
        }

        /* -------------------------------------------
           Features (flat / minimal)
           ------------------------------------------- */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2.5641cqw;
            width: 100%;
        }

        
            .feature-grid {
                gap: 4.1026cqw;
            }
        

        .feature-item {
            background: var(--bg-gray);
            padding: 7.1795cqw 4.1026cqw;
            text-align: center;
            border-radius: 3.0769cqw;
            border: 1px solid var(--white);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .feature-icon {
            font-size: 10.7692cqw; /* 見出し・本文より一段大きく */
            margin-bottom: 4.1026cqw;
            line-height: 1;
            color: var(--primary-blue);
        }

        .feature-title {
            font-size: 4.8718cqw;
            font-weight: 700;
            margin-bottom: 2.5641cqw;
            color: var(--primary-blue);
            line-height: 1.4;
        }

        .feature-desc {
            font-size: 2.8205cqw;
            color: var(--text-muted);
            line-height: 1.65;
            text-align: center;
        }

        .feature-logo-title {
            text-align: center;
            margin-bottom: 10.2564cqw;
        }

        .feature-logo-title img {
            max-height: 11.2821cqw;
            margin: 0 auto;
            display: inline-block;
        }

        .coach-name {
            font-size: 4.6154cqw;
            font-weight: 700;
            margin-bottom: 3.0769cqw;
            color: var(--primary-blue);
        }

        /* -------------------------------------------
           Modal for Coach Pop-up
           ------------------------------------------- */
        .modal-overlay {
            position: fixed;
            inset: 0;
            width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: 16px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 幅を 440px で cap（LP の main と同じ）。中身の cqw 基準にもなる */
        .modal-shell {
            width: min(440px, calc(100vw - 32px));
            max-width: 440px;
            min-width: 0;
            flex: 0 0 auto;
            margin: auto;
            container-type: inline-size;
            container-name: service-modal;
        }

        .modal-content {
            background: var(--white);
            border-radius: 12px;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            position: relative;
            transform: translateY(20px) scale(0.95);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            max-height: calc(100dvh - 32px);
        }

        /* モーダル枠（cqw が viewport 基準にならないよう px で固定） */
        .modal-content .modal-close {
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            font-size: 20px;
        }

        .modal-content .modal-close:hover {
            transform: scale(1.1);
        }

        .modal-content .mt-2 {
            padding: 20px 20px 8px;
            flex-shrink: 0;
        }

        .modal-content .modal-name,
        .modal-content .mt-3 {
            font-size: 18px;
            margin-bottom: 0;
        }

        .modal-content .mt-4,
        .modal-content #serviceModalBody {
            padding: 12px 20px 20px;
            min-height: 0;
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        

        .modal-overlay.active .modal-content {
            transform: translateY(0) scale(1);
        }

        #serviceModal > .modal-shell {
            width: min(440px, calc(100vw - 32px));
            max-width: 440px;
        }

        .modal-close {
            position: absolute;
            top: 3.8462cqw;
            right: 3.8462cqw;
            width: 9.2308cqw;
            height: 9.2308cqw;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 6.1538cqw;
            font-weight: bold;
            color: var(--text-main);
            transition: background 0.2s, transform 0.2s;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            line-height: 1;
        }

        .modal-close:hover {
            background: #fff;
            transform: scale(1.1);
        }

        .modal-img-container {
            width: 100%;
            height: 64.1026cqw;
            background: var(--bg-gray);
            position: relative;
            flex-shrink: 0;
        }

        

        .modal-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            /* 読み込めない時対策 */
            color: transparent;
        }

        .modal-info {
            padding: 7.6923cqw;
            flex-grow: 1;
            overflow-y: auto;
            /* 詳細テキストが長い場合のスクロール */
        }

        .modal-name {
            font-size: 6.1538cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 2.5641cqw;
        }

        .modal-spec {
            font-size: 3.3333cqw;
            color: var(--white);
            background: var(--accent-orange);
            padding: 1.0256cqw 2.5641cqw;
            border-radius: 1.0256cqw;
            display: inline-block;
            margin-bottom: 5.1282cqw;
            font-weight: 700;
        }

        .modal-desc-title {
            font-size: 3.5897cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 2.0513cqw;
            border-bottom: 2px solid var(--light-blue);
            padding-bottom: 1.0256cqw;
        }

        .modal-desc {
            font-size: 3.5897cqw;
            color: var(--text-muted);
            line-height: 1.7;
        }



        /* -------------------------------------------
           Footer & CTA
           ------------------------------------------- */
        footer {
            background: var(--bg-gray);
            padding: 15.3846cqw 5.1282cqw 7.6923cqw;
            text-align: center;
            border-top: 1px solid #EAEAEA;
            width: 100%;
        }

        .cta-container {
            background: var(--white);
            padding: 8.9744cqw 5.1282cqw;
            border-radius: 3.0769cqw;
            max-width: 205.1282cqw;
            margin: 0 auto 10.2564cqw;
            box-shadow: 0 8px 30px rgba(0, 64, 152, 0.08);
            border: 2px solid var(--primary-blue);
            width: 100%;
            word-break: keep-all;
            overflow-wrap: anywhere;
            text-align: center; /* 追加: コンテナ内を強制的に中央揃え */
        }

        .cta-text {
            font-size: 5.1282cqw;
            font-weight: 700;
            margin-bottom: 6.4103cqw;
            color: var(--primary-blue);
            line-height: 1.8;
            text-align: center;
        }

        .btn-line {
            position: relative;
            display: flex;
            margin: 0 auto;
            align-items: center;
            justify-content: center;
            background-color: var(--line-green);
            color: var(--white);
            text-decoration: none;
            font-size: 5.1282cqw;
            font-weight: 900;
            padding: 4.6154cqw 10.2564cqw 4.6154cqw 24.359cqw;
            border-radius: 10.2564cqw;
            transition: opacity 0.3s, transform 0.2s, box-shadow 0.3s;
            box-shadow: 0 6px 15px rgba(6, 199, 85, 0.3);
            letter-spacing: 0.2564cqw;
            width: 100%;
            max-width: 102.5641cqw;
            word-break: normal;
            overflow-wrap: normal;
        }

        .btn-line:hover {
            opacity: 0.9;
            transform: translateY(-0.5128cqw);
            box-shadow: 0 8px 20px rgba(6, 199, 85, 0.4);
        }

        .line-logo {
            flex-shrink: 0;
            width: auto;
            display: block;
        }

        .btn-line .line-logo {
            position: absolute;
            left: 8.2051cqw;
            top: 50%;
            transform: translateY(-50%);
            height: 13.3333cqw;
        }

        .btn-line-text {
            width: 100%;
            text-align: center;
            line-height: 1.4;
        }

        .btn-line-text-sub {
            font-size: 0.85em;
            white-space: nowrap;
        }

        .btn-line-text > span:not(.btn-line-text-sub) {
            white-space: nowrap;
        }

        .copyright {
            color: var(--text-muted);
            font-size: 3.3333cqw;
            font-weight: 500;
        }

        
            footer {
                padding: 10.2564cqw 3.8462cqw 5.1282cqw;
            }

            .cta-container {
                padding: 6.4103cqw 3.8462cqw;
                margin-bottom: 7.6923cqw;
            }

            .cta-text {
                font-size: 3.3333cqw;
                /* Changed to ~0.85x */
                margin-bottom: 5.1282cqw;
            }

            .btn-line {
                font-size: 0.9rem;
            }
        

        /* Narrow mobile adjustments for footer */
        
            .cta-container {
                padding: 5.1282cqw 3.8462cqw;
            }

            .cta-text {
                font-size: 3.2051cqw;
            }

            .btn-line {
                font-size: 4.1026cqw;
                padding: 3.8462cqw 5.1282cqw 3.8462cqw 20.5128cqw;
            }

            .btn-line .line-logo {
                height: 11.2821cqw;
                left: 6.4103cqw;
            }
        


        
            .schedule-container {
                gap: 12.8205cqw;
            }
        

        /* -------------------------------------------
           Service
           ------------------------------------------- */
        #sec-service,
        #sec-cta {
            --service-grain-opacity: 1;
            --service-grain-size: 128px;
            position: relative;
            background-color: var(--primary-blue);
            overflow: visible;
        }

        /* ザラザラ質感（調整: --service-grain-opacity / --service-grain-size） */
        #sec-service::before,
        #sec-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: var(--service-grain-opacity);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: var(--service-grain-size) var(--service-grain-size);
            mix-blend-mode: multiply;
        }

        #sec-service .sec-service-float {
            position: absolute;
            top: 0;
            right: 0;
            width: 115cqw;
            max-width: 506px;
            height: auto;
            transform: translate(38%, -20%);
            pointer-events: none;
            z-index: 0;
        }

        #sec-service .container,
        #sec-cta .container {
            position: relative;
            z-index: 1;
        }

        /* -------------------------------------------
           CTA Reconsult（ヘッダーと同系統の背景）
           ------------------------------------------- */
        .sec-cta-reconsult {
            --header-grain-opacity: 0.28;
            --header-grain-size: 128px;
            --hero-bg-duration: 28s;
            background-color: #001428;
            color: var(--white);
            padding: 15.3846cqw 5.1282cqw;
            position: relative;
            isolation: isolate;
            overflow: hidden;
            text-align: center;
        }

        .sec-cta-reconsult::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-color: var(--primary-blue);
            mix-blend-mode: multiply;
            opacity: 0.72;
        }

        .sec-cta-reconsult::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            opacity: var(--header-grain-opacity);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: var(--header-grain-size) var(--header-grain-size);
            mix-blend-mode: overlay;
        }

        .sec-cta-reconsult .container {
            position: relative;
            z-index: 3;
        }

        .sec-cta-reconsult .cta-heading {
            font-size: 5.641cqw;
            font-weight: 900;
            color: var(--white);
            margin-bottom: 7.6923cqw;
            line-height: 1.45;
            letter-spacing: 0.05em;
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
            text-align: center;
        }

        .sec-cta-reconsult .cta-heading-nowrap {
            display: inline-block;
            white-space: nowrap;
        }

       

        #sec-service .section-title {
            color: var(--white);
        }

        #sec-service .section-title::after {
            background-color: var(--sub-blue);
        }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3.0769cqw;
            width: 100%;
        }

        
            .service-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2.5641cqw;
            }
        

        .service-item {
            --service-item-border-width: 1.5px;
            --service-border-duration: 10s;
            position: relative;
            background: var(--white);
            border-radius: 3.0769cqw;
            padding: 7.6923cqw 5.1282cqw;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
            aspect-ratio: 1 / 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            isolation: isolate;
        }

        /* Example2 型: 光筋が枠の縁（--service-item-border-width）だけを回る */
        .service-item::before {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200%;
            height: 180%;
            margin-left: -31%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(0, 176, 240, 0.5) 10%,
                rgba(120, 230, 255, 1) 24%,
                rgba(220, 250, 255, 1) 36%,
                #ffffff 44%,
                #ffffff 56%,
                rgba(220, 250, 255, 1) 64%,
                rgba(0, 176, 240, 1) 80%,
                rgba(0, 100, 180, 0.85) 90%,
                transparent 100%
            );
            transform: rotate(0deg);
            transform-origin: top center;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            will-change: transform;
            animation: service-item-border-run var(--service-border-duration) linear infinite;
            z-index: 0;
            pointer-events: none;
        }

        .service-item::after {
            content: '';
            position: absolute;
            inset: var(--service-item-border-width);
            background: var(--white);
            border-radius: calc(3.0769cqw - var(--service-item-border-width));
            z-index: 1;
            pointer-events: none;
        }

        .service-item > * {
            position: relative;
            z-index: 2;
        }

        @keyframes service-item-border-run {
            to {
                transform: rotate(1turn);
            }
        }

        /* 8枚それぞれ光筋の位相をずらす */
        .service-item:nth-child(1)::before { animation-delay: 0s; }
        .service-item:nth-child(2)::before { animation-delay: calc(var(--service-border-duration) * -1 / 8); }
        .service-item:nth-child(3)::before { animation-delay: calc(var(--service-border-duration) * -2 / 8); }
        .service-item:nth-child(4)::before { animation-delay: calc(var(--service-border-duration) * -3 / 8); }
        .service-item:nth-child(5)::before { animation-delay: calc(var(--service-border-duration) * -4 / 8); }
        .service-item:nth-child(6)::before { animation-delay: calc(var(--service-border-duration) * -5 / 8); }
        .service-item:nth-child(7)::before { animation-delay: calc(var(--service-border-duration) * -6 / 8); }
        .service-item:nth-child(8)::before { animation-delay: calc(var(--service-border-duration) * -7 / 8); }

        
            .service-item {
                padding: 3.8462cqw 2.5641cqw;
            }
        

        .service-item:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 25px rgba(0, 64, 152, 0.15);
        }
        @keyframes tile-bounce {
            0%   { transform: translateY(0) scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
            30%  { transform: translateY(-3.0769cqw) scale(1.04); box-shadow: 0 16px 30px rgba(0,64,152,0.18); }
            55%  { transform: translateY(-1.2821cqw) scale(1.02); }
            75%  { transform: translateY(-2.3077cqw) scale(1.03); }
            100% { transform: translateY(0) scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        }
        .service-item.hint-bounce {
            animation: tile-bounce 1s ease forwards;
        }
        .service-hint {
            display: block;
            width: fit-content;
            margin: -4.1026cqw auto 7.1795cqw;
            padding: 1.5385cqw 4.6154cqw;
            text-align: center;
            font-size: 3.8462cqw;
            font-weight: 700;
            color: var(--white);
            background-color: var(--accent-orange);
            border-radius: 9999px;
            letter-spacing: 0.04em;
            animation: service-hint-pulse 2.4s ease-in-out infinite;
        }

        .service-hint i {
            display: inline-block;
            transform: scaleY(-1);
        }

        @keyframes service-hint-pulse {
            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.04);
            }
        }

        .service-icon {
            font-size: 15.2564cqw;
            color: var(--primary-blue);
            margin-bottom: 3.8462cqw;
            line-height: 1;
        }

        .service-title {
            font-size: 3.5897cqw;
            font-weight: 700;
            color: var(--primary-blue);
            word-break: keep-all;
            overflow-wrap: anywhere;
            text-align: center;
            max-width: 100%;
        }

        
            .service-title {
                font-size: 3.3333cqw;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                word-break: keep-all;
                overflow-wrap: anywhere;
                line-height: 1.4;
            }
        

        /* -------------------------------------------
           Flow (Card Style)
           ------------------------------------------- */
        .flow-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: 3.8462cqw;
            margin-bottom: 7.6923cqw;
            max-width: 179.4872cqw;
            margin-left: auto;
            margin-right: auto;
        }

        .flow-card {
            background: #fff;
            border-radius: 3.0769cqw;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 7.6923cqw 6.4103cqw;
            width: 100%;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--white);
        }

        .flow-card-num {
            position: absolute;
            bottom: -1.2821cqw;
            right: 3.8462cqw;
            font-size: 20.5128cqw;
            font-weight: 900;
            color: rgba(0, 64, 152, 0.04);
            line-height: 1;
            z-index: -1;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            pointer-events: none;
            letter-spacing: -0.7692cqw;
        }

        .flow-label {
            font-size: 4.6154cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 3.0769cqw;
            letter-spacing: 0.05em;
        }

        .flow-sub {
            font-size: 3.5897cqw;
            color: var(--text-main);
            line-height: 1.7;
        }

        .flow-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.2821cqw 0;
            color: #d6d6d6;
            font-size: 4.6154cqw;
        }

        .flow-notes {
            text-align: center;
            font-size: 3.3333cqw;
            color: var(--text-muted);
            line-height: 1.6;
            margin-top: 7.6923cqw;
        }
        /* ===== ご家族との相談トグル ===== */
        .family-toggle-wrap {
            width: 100%;
            margin: 1.0256cqw 0;
        }
        .family-toggle-btn {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 2.5641cqw;
            padding: 3.5897cqw 5.1282cqw;
            background: #fffbf0;
            border: 1.5px solid #f0a830;
            border-radius: 3.0769cqw;
            cursor: pointer;
            font-size: 3.5897cqw;
            font-weight: 700;
            color: #b37700;
            text-align: left;
            transition: background 0.2s;
        }
        .family-toggle-btn:hover { background: #fff3d0; }
        .family-toggle-btn .ft-chevron {
            margin-left: auto;
            font-size: 3.0769cqw;
            transition: transform 0.3s;
            color: #f0a830;
        }
        .family-toggle-btn[aria-expanded="true"] .ft-chevron {
            transform: rotate(180deg);
        }
        .family-toggle-btn[aria-expanded="true"] {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .family-toggle-body {
            background: #fffbf0;
            border: none;
            border-bottom-left-radius: 3.0769cqw;
            border-bottom-right-radius: 3.0769cqw;
            padding: 0 5.1282cqw;
            max-height: 0;
            overflow: hidden;
            visibility: hidden;
            transition:
                max-height 0.45s ease,
                padding 0.35s ease,
                border-color 0.25s ease,
                visibility 0s linear 0.45s;
        }
        .family-toggle-body.is-open {
            max-height: 615.3846cqw;
            padding: 6.1538cqw 5.1282cqw;
            border: 1.5px solid #f0a830;
            border-top: none;
            visibility: visible;
            transition:
                max-height 0.45s ease,
                padding 0.35s ease,
                border-color 0.25s ease,
                visibility 0s;
        }
        /* 家族の声 */
        .ft-review-title {
            font-size: 3.8462cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 2.5641cqw;
        }

        .ft-review-grid {
            display: flex;
            flex-direction: column;
            gap: 5.1282cqw;
            margin-bottom: 7.1795cqw;
        }
        .ft-review-card {
            border-left: 3px solid #f0a830;
            padding: 1.0256cqw 0 1.0256cqw 4.1026cqw;
        }
        .ft-review-text {
            font-size: 3.5897cqw;
            color: var(--text-dark);
            line-height: 1.85;
            font-style: italic;
            margin-bottom: 2.5641cqw;
        }
        .ft-review-name {
            font-size: 3.0769cqw;
            font-weight: 700;
            color: var(--text-muted);
        }
        .ft-review-sub {
            font-size: 2.8205cqw;
            color: var(--text-muted);
            opacity: 0.7;
        }
        /* 家族に起きる変化 */
        .ft-change-title {
            font-size: 4.6154cqw;
            font-weight: 800;
            color: var(--primary-blue);
            line-height: 1.4;
            margin-bottom: 1.5385cqw;
        }
        /* ① 冒頭メッセージ */
        .ft-intro {
            font-size: 3.3333cqw;
            color: var(--text-muted);
            line-height: 1.85;
            margin-bottom: 6.1538cqw;
            padding-bottom: 5.1282cqw;
            border-bottom: 1px solid #f0e0b0;
        }
        /* ② サービスサマリー */
        .ft-summary {
            margin-bottom: 5.1282cqw;
            padding-bottom: 5.1282cqw;
            border-bottom: 1px solid #f0e0b0;
        }
        .ft-summary-title {
            font-size: 3.8462cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 2.5641cqw;
        }
        .ft-summary-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 1.7949cqw;
        }
        .ft-summary-list li {
            font-size: 3.3333cqw;
            color: var(--text-dark);
            line-height: 1.6;
            display: flex;
            align-items: flex-start;
            gap: 2.0513cqw;
        }
        .ft-summary-list li::before {
            content: "✓";
            color: #f0a830;
            font-weight: 700;
            flex-shrink: 0;
            margin-top: 0.2564cqw;
        }
        /* ③ 費用について */
        .ft-price {
            margin-bottom: 6.1538cqw;
            padding-bottom: 5.1282cqw;
            border-bottom: 1px solid #f0e0b0;
        }
        .ft-price-title {
            font-size: 3.8462cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 2.0513cqw;
        }
        .ft-price-amount {
            font-size: 5.641cqw;
            font-weight: 900;
            color: var(--primary-blue);
            line-height: 1.2;
            margin-bottom: 2.5641cqw;
            background: var(--white);
            border: 1.5px solid #f0a830;
            border-radius: 2.0513cqw;
            padding: 3.5897cqw 4.1026cqw;
            text-align: center;
        }
        .ft-price-amount span {
            font-size: 3.3333cqw;
            font-weight: 500;
            color: var(--text-muted);
        }
        .ft-price-note {
            font-size: 3.0769cqw;
            color: var(--text-muted);
            line-height: 1.7;
        }
        /* Q&A section */
        .ft-qa-title {
            font-size: 3.8462cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-top: 6.1538cqw;
            padding-top: 6.1538cqw;
            border-top: 1px solid #f0e0b0;
            margin-bottom: 2.5641cqw;
        }

        .ft-qa-section {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        .ft-qa-item {
            margin-bottom: 5.1282cqw;
        }
        .ft-qa-item:last-child { margin-bottom: 0; }
        .ft-qa-q {
            font-size: 3.5897cqw;
            font-weight: 700;
            color: #7a4f00;
            margin-bottom: 2.0513cqw;
            line-height: 1.5;
        }
        .ft-qa-a {
            font-size: 3.3333cqw;
            color: var(--text-dark);
            line-height: 1.9;
            padding-left: 5.1282cqw;
            border-left: 2px solid #f0c870;
        }
        .ft-qa-a b {
            color: var(--primary-blue);
        }

        

        /* -------------------------------------------
           Sticky LINE CTA Bar (Mobile Only)
           ------------------------------------------- */
        .sticky-line-cta {
            display: none;
        }

        
            .sticky-line-cta {
                display: block;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 998;
                background-color: #06C755;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
                transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }

            .sticky-line-cta.is-hidden {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(100%);
            }

            .sticky-cta-reconsult,
            .sticky-line-cta.sticky-cta-reconsult {
                background-color: var(--accent-orange);
            }

            .sticky-line-cta a {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5.1282cqw;
                width: 100%;
                padding: 3.5897cqw 4.1026cqw;
                color: #FFFFFF;
                text-decoration: none;
                font-size: 3.5897cqw;
                font-weight: 700;
                letter-spacing: 0.03em;
                line-height: 1;
            }

            .sticky-line-cta a .line-logo {
                height: 9.2308cqw;
                margin-left: 2.5641cqw;
            }
        
    

        /* Swiper Customize */
        .coach-swiper {
            width: 100%;
            padding-bottom: 10.2564cqw;
            /* ページネーション用の余白 */
            overflow: hidden;
        }

        .swiper-pagination-bullet-active {
            background: var(--primary-blue);
        }

        /* スマホ表示（基本） */
        .swiper-slide {
            width: 80% !important;
            /* これで端が少し見える状態（1.2枚）になる */
            box-sizing: border-box;
            backface-visibility: hidden;
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0);
        }

        .swiper-slide img {
            backface-visibility: hidden;
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0);
        }

        /* デイリーコーチング Swiper 調整 */
        .daily-swiper .swiper-slide {
            width: 85% !important;
        }

        .daily-swiper .chat-board {
            width: 100%;
        }

        /* ===== Modal: Daily LINE Title Height Fix ===== */
        #modal-daily .slide-title {
            height: 13.8462cqw; /* 完全固定で押し下げを防止 */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2.5641cqw;
            font-weight: 700;
            color: var(--primary-blue);
            text-align: center;
            line-height: 1.4;
            overflow: hidden; /* 予期せぬはみ出しをカット */
        }

        /* PC表示（196.9231cqw以上）の調整 */
        

        /* nth-child ズレ防止 */
        #enrollment-flow { background-color: var(--bg-gray) !important; }
        #sec-cta {
            padding: 10.2564cqw 0;
        }

        #sec-cta .cta-container {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            padding: 5.1282cqw 5.1282cqw;
            margin-bottom: 0;
        }

        .sec-cta-reconsult .cta-container {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            padding: 5.641cqw 4.6154cqw;
            margin: 0 auto;
            max-width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 2.5641cqw;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        #sec-cta .cta-container-float {
            position: absolute;
            top: 0;
            right: 0;
            width: 115cqw;
            max-width: 506px;
            height: auto;
            transform: translate(38%, -20%);
            pointer-events: none;
            z-index: 0;
        }

        .sec-cta-reconsult .cta-container-float {
            position: absolute;
            top: 0;
            right: 0;
            width: 115cqw;
            max-width: 506px;
            height: auto;
            transform: translate(38%, -20%);
            pointer-events: none;
            z-index: 0;
            opacity: 0.25;
        }

        #sec-cta .cta-container > :not(.cta-container-float),
        .sec-cta-reconsult .cta-container > :not(.cta-container-float) {
            position: relative;
            z-index: 1;
        }

        #sec-cta .cta-text {
            margin-bottom: 4.1026cqw;
            line-height: 1.65;
        }

        .sec-cta-reconsult .cta-text {
            margin-bottom: 0;
            line-height: 1.85;
            color: rgba(255, 255, 255, 0.94);
            font-size: 3.5897cqw;
            font-weight: 500;
            letter-spacing: 0.04em;
        }

        #sec-cta .cta-divider,
        .sec-cta-reconsult .cta-divider {
            margin: 2.5641cqw 0 0.5128cqw;
        }

        #sec-cta .btn-jicoo,
        .sec-cta-reconsult .btn-jicoo {
            margin-top: 2.5641cqw;
        }

        .sec-cta-reconsult .cta-actions {
            display: flex;
            flex-direction: column;
            gap: 3.0769cqw;
            margin-top: 5.1282cqw;
        }

        .sec-cta-reconsult .btn-cta-reconsult {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            padding: 4.6154cqw 8.2051cqw;
            background-color: var(--accent-orange);
            color: var(--white);
            text-decoration: none;
            font-size: 4.1026cqw;
            font-weight: 700;
            letter-spacing: 0.03em;
            line-height: 1.4;
            border-radius: 10.2564cqw;
            border: 2px solid var(--accent-orange);
            transition: opacity 0.3s, transform 0.2s, box-shadow 0.3s;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
        }

        .sec-cta-reconsult .btn-cta-reconsult:hover {
            opacity: 0.92;
            transform: translateY(-0.5128cqw);
            box-shadow: 0 8px 20px rgba(238, 136, 0, 0.4);
        }

        #site-footer {
            padding: 5.1282cqw 5.1282cqw 5.1282cqw;
        }

        #site-footer .copyright {
            margin: 0;
        }

        /* ===== Scroll-triggered fade-in ===== */
        .pre-animate {
            opacity: 0;
            transform: translateY(6.1538cqw);
            transition: opacity 0.55s ease, transform 0.55s ease;
        }
        .pre-animate.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== Jicoo CTA button ===== */
        .btn-jicoo {
            display: flex;
            margin: 4.1026cqw auto 0;
            align-items: center;
            justify-content: center;
            gap: 2.5641cqw;
            background-color: var(--accent-orange);
            color: var(--white);
            text-decoration: none;
            font-size: 4.1026cqw;
            font-weight: 700;
            padding: 3.8462cqw 8.2051cqw;
            border-radius: 10.2564cqw;
            border: 2px solid var(--accent-orange);
            transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
            max-width: 102.5641cqw;
            width: 100%;
            letter-spacing: 0.1282cqw;
        }
        .btn-jicoo:hover {
            background-color: #d97a00;
            border-color: #d97a00;
            color: var(--white);
            transform: translateY(-0.5128cqw);
            box-shadow: 0 8px 20px rgba(238, 136, 0, 0.35);
        }
        .cta-divider {
            text-align: center;
            color: var(--text-muted);
            font-size: 3.3333cqw;
            margin: 3.5897cqw 0 0.5128cqw;
        }
        
            .btn-jicoo { font-size: 3.5897cqw; padding: 3.3333cqw 5.1282cqw; }
        

        /* ===== Section eyebrow label ===== */
        .section-title[data-label]::before {
            content: attr(data-label);
            display: block;
            font-size: 2.3077cqw;
            font-weight: 700;
            letter-spacing: 0.2em;
            color: var(--sub-blue);
            margin-bottom: 1.2821cqw;
        }

        /* ===== Highlight numbers ===== */
        .highlight-num {
            color: var(--accent-orange);
            font-weight: 900;
        }
    

        .sp-only {
            display: none;
        }

        
            .sp-only {
                display: block;
            }
        

        /* ===== Modal: Curriculum scroll animation ===== */
        .book-scroll-track {
            display: flex;
            gap: 3.0769cqw;
            animation: scrollBooks 18s linear infinite;
            width: max-content;
        }
        .book-scroll-wrap {
            overflow: hidden;
            position: relative;
            margin-bottom: 5.1282cqw;
        }
        .book-scroll-wrap::before,
        .book-scroll-wrap::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 15.3846cqw;
            z-index: 2;
            pointer-events: none;
        }
        .book-scroll-wrap::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
        .book-scroll-wrap::after  { right: 0; background: linear-gradient(to left,  var(--white), transparent); }
        @keyframes scrollBooks {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .book-card {
            flex-shrink: 0;
            background: #ffffff;
            padding: 1.0256cqw;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            border-radius: 1.0256cqw;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .book-card img {
            width: 20.5128cqw;
            height: 28.2051cqw;
            object-fit: contain;
            display: block;
        }

        /* ===== Modal: Daily LINE chat ===== */
        .chat-board {
            background: #8EADC8;
            border-radius: 3.0769cqw;
            padding: 5.1282cqw 2.5641cqw;
            display: flex;
            flex-direction: column;
            gap: 3.0769cqw;
            margin-bottom: 5.1282cqw;
            max-height: 82.0513cqw;
            overflow-y: auto;
        }
        .chat-row-m { width: 100%; display: flex; align-items: flex-end; gap: 2.0513cqw; }
        .bubble-left, .bubble-right {
            max-width: 100%;
            padding: 2.5641cqw 3.5897cqw;
            border-radius: 4.1026cqw;
            font-size: 3.3333cqw;
            line-height: 1.5;
            box-shadow: 0 1px 2px rgba(0,0,0,.12);
        }
        .bubble-left  { background: #fff; border-top-left-radius: 0.5128cqw; }
        .bubble-right { background: #85E249; border-top-right-radius: 0.5128cqw; }
        .chat-name { font-size: 2.8205cqw; color: #fff; margin-bottom: 0.5128cqw; }

        @keyframes hintBounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-1.2821cqw);}
            60% {transform: translateY(-0.7692cqw);}
        }

        /* ===== Modal: Routine timeline ===== */
        .timeline {
            position: relative;
            padding-left: 7.1795cqw;
            margin-bottom: 5.1282cqw;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 2.0513cqw;
            top: 1.0256cqw;
            bottom: 1.0256cqw;
            width: 0.5128cqw;
            background: var(--sub-blue);
        }
        .tl-node {
            position: relative;
            margin-bottom: 6.1538cqw;
        }
        .tl-node:last-child { margin-bottom: 0; }
        .tl-node::before {
            content: '';
            position: absolute;
            left: -6.1538cqw;
            top: 1.0256cqw;
            width: 3.0769cqw;
            height: 3.0769cqw;
            border-radius: 50%;
            background: var(--primary-blue);
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px var(--primary-blue);
        }
        .tl-time {
            font-size: 3.0769cqw;
            font-weight: 700;
            color: var(--sub-blue);
            margin-bottom: 0.5128cqw;
        }
        .tl-label {
            font-size: 3.5897cqw;
            font-weight: 700;
            color: var(--color-primary-navy);
            margin-bottom: 0.5128cqw;
        }
        .tl-desc {
            font-size: 3.3333cqw;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* ===== Modal: Routine Mobile Font Adjust ===== */
        
            .routine-final-msg {
                font-size: 4.1026cqw !important;
                display: block;
                white-space: nowrap;
            }
        

        /* ===== Modal: Staff Swipe Hint & Swiper ===== */
        .swipe-hint {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 5.1282cqw;
            color: var(--text-muted);
        }
        .swipe-hand {
            font-size: 6.1538cqw;
            color: var(--sub-blue);
            animation: swipeHand 2.5s infinite ease-in-out;
        }
        @keyframes swipeHand {
            0%, 100% { transform: translateX(5.1282cqw); opacity: 0.3; }
            50% { transform: translateX(-5.1282cqw); opacity: 1; }
        }
        
        .staff-carousel {
            display: block;
            overflow: hidden;
            padding-top: 2.5641cqw; 
            padding-bottom: 10.2564cqw;
            margin-bottom: 4.1026cqw;
        }

        /* 競合の根源を破壊：幅の制限を完全に無効化し、1枚を画面いっぱいに */
        .staff-carousel .swiper-slide {
            width: 100% !important;
            max-width: 100% !important; /* ←ここで102.5641cqwの制限を打ち消す */
            display: flex !important;
            flex-direction: column;
            align-items: center; /* 中身を強制的にド真ん中へ */
        }

        .staff-card {
            background: transparent;
            text-align: center;
            box-sizing: border-box;
            padding: 0 5.1282cqw 5.1282cqw;
            /* width や max-width は親で100%にするため全削除 */
        }

        .staff-avatar {
            width: 100%;
            aspect-ratio: 16 / 10;
            height: auto;
            border-radius: 3.0769cqw;
            object-fit: cover;
            object-position: center 28%;
            margin: 1.2821cqw auto 5.1282cqw;
            display: block;
            box-shadow: 0 4px 12px rgba(0, 64, 152, 0.1);
        }
        .staff-name { font-size: 4.6154cqw; font-weight: 700; color: var(--primary-blue); margin-bottom: 2.0513cqw; }
        .staff-spec { font-size: 3.5897cqw; color: var(--text-muted); line-height: 1.6; }
        .summit-wrap {
            margin-top: 8.2051cqw;
        }
        .summit-img {
            width: 100%;
            border-radius: 3.0769cqw;
            display: block;
        }
        .summit-caption {
            margin-top: 3.5897cqw;
            font-size: 3.3333cqw;
            color: var(--text-muted);
            line-height: 1.75;
            text-align: center;
        }

        /* Swiper Navigation Light Gray */
        .swiper-button-prev, .swiper-button-next {
            color: #ccc !important;
            transform: scale(0.7);
        }
        .swiper-button-prev:after, .swiper-button-next:after {
            font-size: 8.2051cqw !important;
        }

        /* ===== Modal: Counseling video & 3 Features ===== */
        .modal-video-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 2.5641cqw;
            overflow: hidden;
            background: #000;
            margin-bottom: 4.6154cqw;
        }
        .modal-video-wrap iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        .counseling-features {
            display: flex;
            gap: 3.8462cqw;
            margin-top: 7.6923cqw;
            justify-content: center;
        }
        .c-feature-card {
            flex: 1;
            background: var(--white);
            padding: 6.1538cqw 3.8462cqw;
            border-radius: 3.0769cqw;
            box-shadow: 0 4px 12px rgba(0, 64, 152, 0.05);
            text-align: center;
            border: 1px solid #eee;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 41.0256cqw;
        }
        .c-feature-num {
            display: block;
            font-size: 2.8205cqw;
            font-weight: 900;
            color: var(--sub-blue);
            margin-bottom: 2.0513cqw;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .c-feature-icon {
            font-size: 7.1795cqw;
            color: var(--primary-blue);
            margin-bottom: 3.8462cqw;
        }
        .c-feature-title {
            font-size: 3.3333cqw;
            font-weight: 700;
            line-height: 1.5;
            color: var(--color-primary-navy);
            word-break: keep-all;
        }
        
            .counseling-features { flex-direction: column; }
            .c-feature-card { min-height: auto; padding: 5.1282cqw; }
        

        /* ===== Modal: Results Before/After ===== */
        .results-player-card {
            background: var(--white);
            border-radius: 3.0769cqw;
            padding: 4.1026cqw;
            margin-bottom: 3.5897cqw;
            box-shadow: 0 4px 16px rgba(0, 64, 152, 0.08);
            border: 1px solid #eaeaea;
        }
        .results-player-card:last-of-type { margin-bottom: 0; }
        .results-card-header {
            margin-bottom: 3.0769cqw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2.0513cqw;
            flex-wrap: wrap;
        }
        .results-card-header span:first-child {
            font-size: clamp(12px, 3.5vw, 14px);
            font-weight: 700;
            color: var(--primary-blue);
            white-space: nowrap;
        }
        .results-score-badge {
            background: var(--color-p1);
            color: var(--primary-blue);
            font-size: 3.0769cqw;
            padding: 0.5128cqw 2.0513cqw;
            border-radius: 5.1282cqw;
            border: 1px solid var(--sub-blue);
        }
        .results-score-badge b { color: var(--accent-orange); }
        .results-ba-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2.5641cqw;
        }
        
            .results-ba-grid { grid-template-columns: 1fr; }
        
        .results-player-box {
            background: var(--bg-gray);
            border-radius: 2.0513cqw;
            padding: 3.0769cqw;
        }
        .results-player-label {
            font-size: 3.0769cqw;
            font-weight: 700;
            margin-bottom: 2.0513cqw;
        }
        .results-player-label.before { color: #cc3333; }
        .results-player-label.after  { color: #1a8c3a; }
        .results-player-box audio {
            width: 100%;
            height: 8.7179cqw;
            outline: none;
        }

        /* ===== Modal: Voice cards & Rich Story UI ===== */
        .voice-modal-card {
            background: var(--bg-gray);
            border-radius: 3.0769cqw;
            padding: 4.1026cqw;
            margin-bottom: 5.1282cqw;
            border: 1px solid #eee;
        }
        .voice-modal-card:last-child { margin-bottom: 0; }
        .voice-modal-card audio { width: 100%; height: 9.2308cqw; outline: none; }

        .voice-modal-card--rich {
            padding: 0 !important;
            background: var(--white);
            box-shadow: 0 4px 16px rgba(0, 64, 152, 0.08);
            border: 1px solid #eaeaea;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .voice-story-header {
            display: flex;
            align-items: center;
            gap: 4.1026cqw;
            padding: 5.1282cqw;
            background: linear-gradient(to right, #f4fafe, #ffffff);
            border-bottom: 1px solid #edf2f7;
        }
        .voice-thumb-wrap {
            width: 20.5128cqw;
            height: 20.5128cqw;
            flex-shrink: 0;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--sub-blue);
            box-shadow: 0 4px 10px rgba(0, 176, 240, 0.2);
        }
        .voice-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .voice-meta-wrap { flex-grow: 1; }
        .voice-attr {
            font-size: 3.0769cqw;
            color: var(--text-muted);
            font-weight: 700;
            margin-bottom: 1.0256cqw;
            word-break: keep-all;
            overflow-wrap: anywhere;
        }
        .voice-score-badge {
            display: flex;
            align-items: center;
            gap: 2.0513cqw;
            flex-wrap: wrap; /* スマホでスコアがはみ出るのを防ぐ */
        }
        .voice-score-val {
            font-size: 6.1538cqw;
            font-weight: 900;
            color: var(--primary-blue);
            line-height: 1;
        }
        .voice-score-val.after { color: var(--accent-orange); }
        .voice-arrow { color: var(--text-muted); font-size: 3.5897cqw; }

        .voice-story-body {
            padding: 6.1538cqw 5.1282cqw;
        }
        .voice-magazine-quote {
            font-size: 4.6154cqw;
            font-weight: 900;
            color: var(--primary-blue);
            line-height: 1.5;
            margin-bottom: 5.1282cqw;
            padding-left: 4.1026cqw;
            border-left: 5px solid var(--sub-blue);
            position: relative;
        }
        .voice-magazine-quote::after {
            content: '”';
            position: absolute;
            right: 0;
            bottom: -2.5641cqw;
            font-size: 15.3846cqw;
            color: rgba(0, 64, 152, 0.05);
            font-family: serif;
            line-height: 1;
        }
        .voice-story-text {
            font-size: 3.5897cqw;
            color: var(--text-dark);
            line-height: 1.9;
            margin-top: 4.1026cqw;
        }

        /* Voice Detail Accordion */
        .voice-detail-btn {
            background: none;
            border: none;
            color: var(--primary-blue);
            font-size: 3.3333cqw;
            font-weight: 700;
            cursor: pointer;
            padding: 2.0513cqw 0;
            display: flex;
            align-items: center;
            gap: 1.0256cqw;
            margin-top: 2.5641cqw;
        }
        .voice-detail-btn::after {
            content: '↓';
            font-size: 2.5641cqw;
            transition: transform 0.3s;
        }
        .voice-detail-btn.active::after {
            transform: rotate(180deg);
        }
        .voice-detail-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
        }
        .voice-detail-content.active {
            max-height: 256.4103cqw;
            transition: max-height 0.8s ease-in;
        }
        .voice-detail-inner {
            background: rgba(0, 64, 152, 0.03);
            border-radius: 2.0513cqw;
            padding: 4.1026cqw;
            margin-top: 3.0769cqw;
            display: flex;
            flex-direction: column;
            gap: 4.1026cqw;
            text-align: left;
        }
        .voice-detail-sec-title {
            font-size: 3.3333cqw;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1.0256cqw;
            display: flex;
            align-items: center;
            gap: 1.5385cqw;
        }
        .voice-detail-text {
            font-size: 3.3333cqw;
            color: var(--text-muted);
            line-height: 1.6;
        }
        .voice-detail-close-btn {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 1.5385cqw;
            padding: 2.0513cqw;
            font-size: 3.0769cqw;
            color: var(--text-muted);
            cursor: pointer;
            text-align: center;
            margin-top: 1.0256cqw;
            width: 100%;
        }

        /* ===== Modal: Media real achievements ===== */
        .media-item .modal-video-wrap {
            margin-bottom: 0;
            border-radius: 0;
        }
        .media-card {
            background: var(--white);
            border-radius: 3.0769cqw;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0, 64, 152, 0.08);
            border: 1px solid #eaeaea;
            margin-bottom: 4.1026cqw;
        }
        .media-card:last-child { margin-bottom: 0; }
        .media-thumb {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: block;
        }
        .media-card-body {
            padding: 3.5897cqw 4.1026cqw;
        }
        .media-tag {
            font-size: 2.8205cqw;
            font-weight: 700;
            color: var(--white);
            background: var(--primary-blue);
            display: inline-block;
            padding: 0.7692cqw 2.0513cqw;
            border-radius: 5.1282cqw;
            margin-bottom: 2.0513cqw;
        }
        .media-title {
            font-size: 3.5897cqw;
            font-weight: 700;
            color: var(--color-primary-navy);
            line-height: 1.5;
            margin-bottom: 1.5385cqw;
        }
        .media-desc {
            font-size: 3.0769cqw;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* =========================================================
           モバイル専用化：固定要素・モーダルの 440px 整合 & cqw 基準
           （main は container だが position:fixed を壊すため、
             固定要素は main の外に出し、それぞれ独自に container 化）
           ========================================================= */

        /* Sticky LINE CTA（main の外・viewport 基準で固定／440px 中央寄せ） */
        .sticky-line-cta {
            display: block;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            max-width: 440px;
            margin-inline: auto;
            z-index: 998;
            container-type: inline-size;   /* 内側 <a> の cqw 基準 */
        }

        .sticky-line-cta.sticky-cta-reconsult {
            background-color: var(--accent-orange);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
        }

        .sticky-line-cta.sticky-cta-reconsult a {
            gap: 0;
        }