/* Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* CSS Variables → tokens.css（唯一の正）へ集約。ここでは定義しない。 */

        /* Base */
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                         "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
            font-size: var(--font-base);
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--bg-white);
        }

        /* Header / メニュー / フッターの chrome は site.css が唯一の正。lp.css では定義しない。 */

        .k2r-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-3);
        }

        /* Hero（複数写真のフェード切替スライドショー） */
        .hero {
            position: relative;
            overflow: hidden;
            background: #1a1a1a url('../images/hero-mitwork.jpg') center/cover no-repeat;
            min-height: 0;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            color: var(--bg-white);
        }

        .hero-slides {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .hero-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation: heroFade 16s infinite;
        }

        .hero-slide:nth-child(1) { animation-delay: 0s; }
        .hero-slide:nth-child(2) { animation-delay: 4s; }
        .hero-slide:nth-child(3) { animation-delay: 8s; }
        .hero-slide:nth-child(4) { animation-delay: 12s; }

        @keyframes heroFade {
            0%   { opacity: 0; }
            4%   { opacity: 1; }
            25%  { opacity: 1; }
            29%  { opacity: 0; }
            100% { opacity: 0; }
        }

        /* 暗幕（文字の可読性確保） */
        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.42);
            z-index: 1;
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-slide { animation: none; }
            .hero-slide:nth-child(1) { opacity: 1; }
            .hero-content > * { animation: none; }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-4);
        }

        .hero-title-line {
            display: block;
            white-space: nowrap;
        }

        /* 参考: b-monster / BurnesStyle / NOAのヒーロー構成。
           駅情報と主見出しを分け、WCAG 2.2の操作・可読性を損なわないライブテキストで表示。 */
        .hero-location {
            display: inline-flex;
            align-items: baseline;
            margin-bottom: var(--spacing-3);
            color: #ffffff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
        }

        .hero-location-copy {
            display: inline-flex;
            align-items: baseline;
            gap: 12px;
            color: #ffffff;
            line-height: 1.1;
        }

        .hero-station {
            font-size: 16px;
            font-weight: var(--weight-semibold);
            letter-spacing: 0.02em;
        }

        .hero-walk {
            display: inline-flex;
            align-items: baseline;
            gap: 3px;
            font-size: 18px;
            font-weight: var(--weight-semibold);
            letter-spacing: -0.03em;
        }

        .hero-walk strong {
            font-size: 48px;
            font-weight: var(--weight-bold);
            line-height: 0.8;
        }

        .hero h1 {
            font-family: var(--font-family);
            font-size: var(--font-h1);
            line-height: 1.3;
            letter-spacing: 0.01em;
            margin-bottom: var(--spacing-3);
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        .hero h1 em {
            font-style: normal;
            color: #58b8ff;
        }

        .hero-lead {
            font-size: var(--font-body);
            line-height: 1.85;
            max-width: 560px;
            margin: 0 0 var(--spacing-6);
            color: rgba(255, 255, 255, 0.94);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
        }
        .hero-lead em {
            font-style: normal;
            font-weight: var(--weight-bold);
            color: #58b8ff;
        }

        /* 元気さ：コンテンツがふわっと立ち上がる（reduced-motionでは無効化） */
        .hero-content > * {
            animation: heroRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .hero h1 { animation-delay: 0.15s; }
        .hero-lead { animation-delay: 0.28s; }
        .hero-buttons { animation-delay: 0.4s; }
        @keyframes heroRise {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: none; }
        }

        .hero-buttons {
            display: flex;
            justify-content: flex-start;
            gap: var(--spacing-2);
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        .hero-buttons .cta-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-width: 190px;
            min-height: 52px;
            background: linear-gradient(
                135deg,
                #003f9e 0%,
                #0076f5 48%,
                #58b8ff 100%
            );
            box-shadow: 0 10px 28px rgba(0, 77, 184, 0.38);
        }

        .hero-buttons .cta-button:hover {
            filter: brightness(1.06);
        }

        .trial-cta-icon {
            flex: none;
            font-size: 18px;
            line-height: 1;
        }

        .hero-buttons .hero-secondary-button {
            border: 2px solid rgba(255, 255, 255, 0.9);
            background: transparent;
            color: #ffffff;
        }

        .hero-buttons .hero-secondary-button:hover {
            border-color: #ffffff;
            background: rgba(255, 255, 255, 0.14);
        }

        /* Buttons */
        .cta-button {
            display: inline-block;
            background-color: var(--button-bg);
            color: var(--button-text);
            font-size: var(--font-button);
            font-weight: var(--weight-semibold);
            padding: calc(.667em + 2px) calc(1.333em + 2px);
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .cta-button:hover {
            background-color: var(--button-hover);
            transform: translateY(-2px);
        }

        .cta-button:focus {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }

        .cta-button:active {
            transform: translateY(1px);
        }

        .cta-button-secondary {
            background-color: transparent;
            color: var(--accent-primary);
            border: 2px solid var(--accent-primary);
        }

        .cta-button-secondary:hover {
            background-color: var(--accent-primary);
            color: var(--button-text);
        }

        .cta-button-line {
            background-color: #06C755;
            color: var(--button-text);
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-1);
        }

        .cta-button-line:hover {
            background-color: #05B04C;
        }

        .cta-button-tel {
            background-color: var(--accent-primary);
            color: var(--button-text);
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-1);
        }

        .cta-button-tel:hover {
            background-color: var(--accent-secondary);
        }

        /* ヒーロー内の連絡ボタン行（PCヘッダーのLINE・電話をモバイルでも拾う） */
        .hero-contact-buttons {
            display: flex;
            justify-content: center;
            gap: 0;
        }

        .hero-contact-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 46px;
            padding: 10px 16px;
            color: #ffffff;
            font-size: 14px;
            font-weight: var(--weight-semibold);
            text-decoration: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
        }

        .hero-contact-link + .hero-contact-link {
            border-left: 1px solid rgba(255, 255, 255, 0.5);
        }

        .hero-contact-link .fa-line { color: #06C755; font-size: 18px; }

        .hero-campaign-link {
            display: inline-grid;
            grid-template-columns: auto auto;
            align-items: end;
            column-gap: 12px;
            row-gap: 4px;
            color: #ffffff;
            text-align: left;
            text-decoration: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
        }

        .hero-campaign-link:hover {
            opacity: 0.82;
        }

        .hero-campaign-link > span:first-child {
            grid-column: 1 / -1;
            font-size: 11px;
            font-weight: var(--weight-semibold);
            letter-spacing: 0.2em;
            line-height: 1;
        }

        .hero-campaign-link strong {
            font-size: 20px;
            font-weight: var(--weight-bold);
            line-height: 1.25;
        }

        .hero-campaign-arrow {
            font-size: 18px;
            font-weight: var(--weight-medium);
            line-height: 1.35;
        }

        /* Sections */
        section {
            padding: var(--spacing-10) 0;
        }

        .section-alt {
            background-color: var(--bg-light);
        }

        .section-header {
            text-align: center;
            margin-bottom: var(--spacing-6);
        }

        .section-header h2 {
            font-size: var(--font-h2);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-2);
        }

        .section-desc {
            font-size: var(--font-base);
            color: var(--text-secondary);
        }

        .features-section-header {
            max-width: 760px;
            margin-right: auto;
            margin-bottom: var(--spacing-6);
            margin-left: auto;
            text-align: center;
        }

        .features-section-header h2 {
            font-size: var(--font-h2);
            font-weight: var(--weight-bold);
            line-height: 1.15;
            letter-spacing: -0.025em;
        }

        /* Pricing */
        .price-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-3);
            margin-bottom: var(--spacing-6);
        }

        .price-card {
            /* Layout */
            display: flex;
            flex-direction: column;

            /* Spacing */
            padding: var(--spacing-3);
            gap: var(--spacing-2);

            /* Visual */
            background: var(--bg-white);
            border: 1px solid var(--border-light);
            border-radius: 8px;

            /* Animation */
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        .price-card:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transform: translateY(-4px);
        }

        .price-name {
            font-size: var(--font-h4);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            text-align: center;
        }

        .price-amount {
            font-size: var(--font-h2);
            font-weight: var(--weight-bold);
            color: var(--accent-primary);
            text-align: center;
        }

        .price-unit {
            font-size: var(--font-base);
            color: var(--text-secondary);
        }

        .price-note {
            font-size: 12px;
            color: var(--text-secondary);
            text-align: center;
            min-height: 32px;
        }

        .pricing-info {
            max-width: 700px;
            margin: 0 auto var(--spacing-6);
            padding: var(--spacing-4);
            background: var(--bg-white);
            border: 1px solid var(--border-light);
            border-radius: 8px;
        }

        .pricing-info h3 {
            font-size: var(--font-h4);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-2);
        }

        .pricing-info p {
            margin-bottom: var(--spacing-1);
            font-size: var(--font-base);
        }

        .pricing-info .trial-price {
            font-size: var(--font-h3);
            font-weight: var(--weight-bold);
            color: var(--accent-primary);
            margin-bottom: var(--spacing-1);
        }

        /* Features */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-3);
        }

        .feature-card {
            text-align: center;
            padding: var(--spacing-4) var(--spacing-3);
        }

        .feature-icon {
            font-size: 48px;
            color: var(--accent-primary);
            margin-bottom: var(--spacing-2);
        }

        .feature-title {
            font-size: var(--font-h4);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-1);
        }

        .feature-desc {
            font-size: var(--font-base);
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Profile */
        .profile-container {
            max-width: 900px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: var(--spacing-6);
            padding: var(--spacing-6);
            background: var(--bg-white);
            border: 1px solid var(--border-light);
            border-radius: 8px;
        }

        .profile-images {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2);
        }

        .profile-images img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .profile-content h3 {
            font-size: var(--font-h3);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-1);
        }

        .profile-title {
            font-size: var(--font-base);
            font-weight: var(--weight-medium);
            color: var(--text-secondary);
            margin-bottom: var(--spacing-3);
        }

        .profile-desc {
            font-size: var(--font-base);
            color: var(--text-secondary);
            line-height: 1.8;
        }

        /* Instagram */
        .instagram-cta {
            text-align: center;
            margin-top: var(--spacing-4);
        }

        /* Schedule */
        .schedule-placeholder {
            text-align: center;
            padding: var(--spacing-6);
            background: var(--bg-white);
            border: 1px solid var(--border-light);
            border-radius: 8px;
            max-width: 600px;
            margin: 0 auto;
        }

        .schedule-placeholder p {
            margin-bottom: var(--spacing-3);
            color: var(--text-secondary);
        }

        /* About features (分離型: 写真＋01/タイトル/説明。WordPressの標準ブロックで無理なく再現可) */
        .about-features {
            max-width: 1040px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-6);
        }

        .about-feature-photo {
            aspect-ratio: 4 / 3;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: var(--spacing-3);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        .about-feature-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
        }

        .about-feature-num {
            font-size: 28px;
            font-weight: var(--weight-bold);
            font-style: italic;
            color: var(--accent-primary);
            line-height: 1;
            white-space: nowrap;
            margin-bottom: var(--spacing-1);
        }

        .about-feature-title {
            font-size: var(--font-h4);
            font-weight: var(--weight-bold);
            color: var(--text-primary);
            line-height: 1.4;
            text-wrap: balance;
            margin-bottom: var(--spacing-1);
        }

        .about-feature-desc {
            font-size: var(--font-base);
            color: var(--text-secondary);
            line-height: 1.8;
        }

        /* Program grid (参考: noadance.com「GENRE」= 写真全体がボタン、写真上に白文字でプログラム名) */
        .program-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-1);
            margin-bottom: var(--spacing-4);
        }

        .program-tile {
            position: relative;
            display: block;
            aspect-ratio: 4 / 3;
            border-radius: 0;
            overflow: hidden;
            text-decoration: none;
            box-shadow: none;
        }

        .program-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        .program-tile-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            padding: var(--spacing-2);
            background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 78%);
            transition: background 0.3s ease;
        }

        .program-tile-name {
            color: #ffffff;
            font-size: var(--font-h4);
            font-weight: var(--weight-bold);
            line-height: 1.4;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        }

        .program-tile:hover img {
            transform: scale(1.06);
        }

        .program-tile:hover .program-tile-overlay {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(33, 87, 211, 0.28) 55%, rgba(33, 87, 211, 0.08) 100%);
        }

        /* モーダルを開くタイルは button。見た目は a タイルと同一に揃える */
        button.program-tile {
            width: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            font: inherit;
            color: inherit;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
        }

        button.program-tile:focus-visible {
            outline: 3px solid var(--accent-secondary);
            outline-offset: 2px;
        }

        /* 動画タイルの再生バッジ（動画があることを示す） */
        .program-tile-play {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 54px;
            height: 54px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.45);
            transition: background 0.3s ease, transform 0.3s ease;
            z-index: 1;
            pointer-events: none;
        }

        .program-tile-play::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 54%;
            transform: translate(-50%, -50%);
            border-style: solid;
            border-width: 9px 0 9px 15px;
            border-color: transparent transparent transparent #ffffff;
        }

        .program-tile--video:hover .program-tile-play,
        .program-tile--video:focus-visible .program-tile-play {
            background: var(--accent-primary);
            transform: translate(-50%, -50%) scale(1.08);
        }

        /* レッスンプログラムのモーダル */
        .program-modal {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-2);
        }

        .program-modal[hidden] {
            display: none;
        }

        .program-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.72);
            animation: k2r-modal-fade 0.25s ease;
        }

        .program-modal-dialog {
            position: relative;
            width: 100%;
            max-width: 720px;
            max-height: 90vh;
            overflow-y: auto;
            background: var(--bg-white);
            border-radius: var(--radius-card);
            padding: var(--spacing-4);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
            animation: k2r-modal-pop 0.25s ease;
        }

        .program-modal-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 44px;
            height: 44px;
            z-index: 3;
            border: 0;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            border-radius: 50%;
        }

        .program-modal-close::before,
        .program-modal-close::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 2px;
            background: var(--text-primary);
        }

        .program-modal-close::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .program-modal-close::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        .program-modal-close:hover {
            background: #ffffff;
        }

        .program-modal-video {
            position: relative;
            aspect-ratio: 16 / 9;
            background: #000000;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: var(--spacing-3);
        }

        /* 動画なしタイルは動画枠を出さず、静止画＋説明を表示 */
        .program-modal--novideo .program-modal-video {
            display: none;
        }

        .program-modal-image {
            display: none;
            margin-bottom: var(--spacing-3);
        }

        .program-modal--novideo .program-modal-image {
            display: block;
        }

        .program-modal-image-el {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 6px;
        }

        .program-modal-player {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }

        .program-modal-title {
            font-size: var(--font-h3);
            font-weight: var(--weight-bold);
            line-height: 1.4;
            margin-bottom: var(--spacing-1);
            color: var(--accent-secondary);
        }

        .program-modal-desc {
            font-size: var(--font-base);
            line-height: 1.8;
            color: var(--text-primary);
        }

        body.k2r-modal-open {
            overflow: hidden;
        }

        @keyframes k2r-modal-fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes k2r-modal-pop {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: reduce) {
            .program-modal-backdrop,
            .program-modal-dialog {
                animation: none;
            }
            .program-tile img,
            .program-tile-play {
                transition: none;
            }
        }

        .schedule-cta {
            text-align: center;
        }

        /* Access */
        .access-info {
            max-width: 700px;
            margin: 0 auto;
            padding: var(--spacing-6);
            background: var(--bg-white);
            border: 1px solid var(--border-light);
            border-radius: 8px;
        }

        .access-info p {
            margin-bottom: var(--spacing-2);
            font-size: var(--font-base);
        }

        .access-info strong {
            color: var(--text-primary);
            font-weight: var(--weight-semibold);
        }

        /* Trial */
        .trial-methods {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-3);
            margin-bottom: var(--spacing-6);
        }

        .trial-method {
            text-align: center;
            padding: var(--spacing-4) var(--spacing-3);
            background: var(--bg-white);
            border: 1px solid var(--border-light);
            border-radius: 8px;
        }

        .trial-method-icon {
            font-size: 40px;
            color: var(--accent-primary);
            margin-bottom: var(--spacing-2);
        }

        .trial-method-name {
            font-size: var(--font-h4);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-2);
        }

        .trial-final-cta {
            text-align: center;
        }

        /* Campaign Banner */
        .campaign-card {
            text-align: center;
            padding: var(--spacing-3);
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: var(--bg-white);
            text-decoration: none;
            transition: all 0.3s ease;
            display: block;
        }

        .campaign-card:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
        }

        /* Responsive */
        @media (max-width: 767px) {
            .hero-buttons {
                flex-direction: column;
            }

            .program-tile-play {
                width: 44px;
                height: 44px;
            }

            .program-tile-play::after {
                border-width: 7px 0 7px 12px;
            }

            .program-modal-dialog {
                padding: var(--spacing-3) var(--spacing-2) var(--spacing-2);
            }

            /* モバイル：ヒーロー連絡ボタン（LINE・電話）は縦並び */
            .hero-contact-buttons {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                max-width: 320px;
                margin: 0 auto;
            }

            .hero-contact-buttons .cta-button {
                justify-content: center;
            }

            section {
                padding: var(--spacing-6) 0;
            }

            .k2r-container {
                padding: 0 var(--spacing-2);
            }

            .price-grid,
            .features-grid,
            .trial-methods {
                grid-template-columns: 1fr;
            }

            .about-features {
                grid-template-columns: 1fr;
                gap: var(--spacing-6);
            }

            .about-feature-photo {
                aspect-ratio: 16 / 10;
            }

            .program-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .profile-container {
                grid-template-columns: 1fr;
                padding: var(--spacing-4);
            }

            /* Profile section responsive */
            section div[style*="grid-template-columns: 280px 1fr"] {
                grid-template-columns: 1fr !important;
            }

            /* Contact section responsive */
            section .k2r-container div[style*="grid-template-columns: 1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }

            /* Campaign banner responsive */
            section div[style*="grid-template-columns: repeat(2, 1fr)"] {
                grid-template-columns: 1fr !important;
            }
        }

        @media (min-width: 768px) {
            /* ヒーローの連絡ボタンはモバイル専用（PCはヘッダーにLINE・電話があるため不要） */
            .hero-contact-buttons {
                display: none;
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .price-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .program-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        .about-feature-heading {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: var(--spacing-2);
        }

        .about-feature-heading .about-feature-num,
        .about-feature-heading .about-feature-title { margin: 0; }

        .trainer-card {
            max-width: 1040px;
            margin: 0 auto;
        }

        .trainer-layout {
            display: grid;
            grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
            gap: var(--spacing-6);
            align-items: center;
        }

        .trainer-photo {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            object-position: center 20%;
            display: block;
        }

        .trainer-role {
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-size: 16px;
            font-weight: var(--weight-semibold);
        }

        .trainer-name {
            font-size: clamp(38px, 5vw, 56px);
            font-weight: var(--weight-bold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-3);
            line-height: 1.15;
            letter-spacing: -0.035em;
        }

        .trainer-credentials {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 0;
            margin-bottom: var(--spacing-4);
            padding: 12px 0;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            color: var(--text-primary);
            font-weight: var(--weight-semibold);
        }

        .trainer-credential + .trainer-credential::before {
            content: "";
            display: inline-block;
            width: 1px;
            height: 1em;
            margin: 0 16px;
            vertical-align: -0.1em;
            background: var(--border-light);
        }

        .gallery-text-link {
            color: var(--text-secondary);
            font-weight: var(--weight-semibold);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .gallery-text-link:hover { color: var(--text-primary); }

        .access-details { width: 100%; }

        .access-copy {
            max-width: 820px;
            margin: 0 auto var(--spacing-4);
        }

        .access-map {
            width: 100%;
            overflow: hidden;
            border: 1px solid var(--border-light);
        }

        .access-map iframe {
            display: block;
            width: 100%;
            height: 420px;
            border: 0;
        }

        .access-map-link {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--spacing-2);
            margin-top: var(--spacing-2);
            text-align: center;
        }

        .access-map-link .cta-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            min-height: 52px;
            padding: 0 var(--spacing-3);
            font-size: var(--font-base);
        }

        .access-row {
            display: grid;
            grid-template-columns: 88px 1fr;
            gap: 20px;
            padding: 16px 0;
            border-bottom: 1px solid var(--border-light);
            line-height: 1.7;
        }

        .access-label {
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
        }

        .access-value { color: var(--text-secondary); }

        .recruit-link-wrap {
            margin-top: var(--spacing-6);
            text-align: center;
        }

        .recruit-link {
            color: var(--text-secondary);
            font-weight: var(--weight-semibold);
            text-decoration: none;
            border-bottom: 1px solid currentColor;
            padding-bottom: 3px;
        }

        .recruit-link:hover { color: var(--accent-primary); }

        @media (max-width: 768px) {
            .hero-content { padding: 96px 20px 32px; }
            .hero-content h1 { font-size: clamp(28px, 8vw, 32px); }
            .hero-location {
                margin-bottom: 18px;
            }
            .hero-location-copy {
                display: inline-flex;
                align-items: baseline;
                gap: 10px;
            }
            .hero-station {
                font-size: 15px;
            }
            .hero-walk {
                font-size: 16px;
            }
            .hero-walk strong {
                font-size: 40px;
            }
            .hero-buttons {
                flex-direction: row;
                flex-wrap: nowrap;
                width: 100%;
                gap: 8px;
            }
            .hero-buttons .cta-button {
                flex: 1 1 0;
                min-width: 0;
                min-height: 48px;
                padding-inline: 10px;
                font-size: 15px;
            }

            .hero-contact-buttons {
                display: grid;
                grid-template-columns: 1fr 1fr;
                width: 100%;
                gap: 0;
                margin-top: 10px;
            }

            .hero-contact-link {
                min-height: 44px;
                padding: 10px 8px;
                font-size: 13px;
            }

            .hero-campaign-link {
                column-gap: 10px;
            }

            .hero-campaign-link > span:first-child { font-size: 10px; }
            .hero-campaign-link strong { font-size: 18px; }
            .hero-campaign-arrow { font-size: 16px; }

            .about-feature-heading { gap: 10px; }
            .about-feature-heading .about-feature-num { font-size: 32px; }
            .about-feature-heading .about-feature-title { font-size: 18px; }

            .program-tile-name {
                display: block;
                width: 100%;
                padding-inline: 6px;
                font-size: clamp(14px, 3.8vw, 16px);
                line-height: 1.35;
                white-space: normal;
                word-break: keep-all;
            }

            .trainer-layout { grid-template-columns: 1fr; gap: var(--spacing-4); }
            .trainer-photo { aspect-ratio: 16 / 10; object-position: center 20%; }
            .trainer-role { font-size: 15px; }
            .trainer-name { font-size: 38px; }
            .trainer-credentials { display: grid; gap: 8px; }
            .trainer-credential + .trainer-credential::before { display: none; }

            .instagram-cta .cta-button {
                flex: 1 1 100%;
                width: 100%;
                min-height: 48px;
                justify-content: center;
            }

            .access-row { grid-template-columns: 64px 1fr; gap: 12px; }
            .access-map iframe { height: 300px; }
            .recruit-link-wrap { margin-top: 48px; }
        }

/*
 * K2R LP first-pass alignment fixes.
 * Source of truth: k2r/demo.html and k2r/design.md.
 * These body-scoped rules prevent Clarity Business styles from widening the LP.
 */
html:has(body.k2r-lp),
body.k2r-lp {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-y: none;
}

/*
 * Top-page refinement based on issue #7.
 * Keep the hero focused on the primary message and move campaign information
 * into its own high-contrast strip immediately below it.
 */
body.k2r-lp .hero::after {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.46) 34%,
            rgba(0, 0, 0, 0.12) 62%,
            rgba(0, 0, 0, 0.00) 100%
        );
}

body.k2r-lp .hero {
    height: calc(100svh - 192px);
    min-height: 520px;
    align-items: center;
}

body.k2r-lp .hero-content {
    box-sizing: border-box;
    width: min(calc(100% - 96px), 960px);
    margin-inline: auto;
    left: auto;
    right: auto;
    transform: none;
    padding: 56px 0;
    text-align: left;
}

body.k2r-lp .section-eyebrow {
    margin: 0 0 16px;
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: var(--weight-bold);
    line-height: 1.4;
    letter-spacing: 0.18em;
}

body.k2r-lp .section-header .section-eyebrow {
    margin-bottom: 10px;
}

body.k2r-lp .hero h1 {
    max-width: 500px;
    margin: 0 0 32px;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
}

body.k2r-lp .hero-title-line:first-child {
    margin-bottom: 10px;
    font-size: 0.37em;
    font-weight: 400;
    letter-spacing: -0.015em;
}

body.k2r-lp .hero-title-line:last-child {
    font-weight: 700;
}

body.k2r-lp .hero-title-intro {
    opacity: 0.92;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.65);
}

body.k2r-lp .hero-title-main {
    position: relative;
    width: fit-content;
    padding: 0.03em 0.08em 0.05em 0;
    color: #8fd3ff;
    transform: none;
    -webkit-text-stroke: 0.8px currentColor;
    paint-order: stroke fill;
}

body.k2r-lp .hero-description {
    max-width: 460px;
    margin: 0 0 36px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(16px, 1.2vw, 17px);
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.025em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

body.k2r-lp .hero-description p {
    margin: 0;
}

body.k2r-lp .hero-description p + p {
    margin-top: 14px;
}

body.k2r-lp .hero-location {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    height: auto;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-size: clamp(17px, 1.3vw, 19px);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.k2r-lp .hero-location > span {
    white-space: nowrap;
}

body.k2r-lp .hero-location .fa-location-dot {
    flex: none;
    font-size: 1.15em;
}

body.k2r-lp .hero-buttons {
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 0;
}

body.k2r-lp .hero-buttons .cta-button {
    min-width: 280px;
    min-height: 58px;
    padding: 14px 28px;
    font-size: 18px;
    font-weight: 700;
}

body.k2r-lp .hero-quick-links {
    padding: 0;
    background: #ffffff;
}

body.k2r-lp .hero-quick-links-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
}

body.k2r-lp .hero-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4px 16px;
    min-height: 104px;
    padding: 22px 32px;
    text-align: center;
    text-decoration: none;
}

body.k2r-lp .hero-quick-link > span:first-child {
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.18em;
}

body.k2r-lp .hero-quick-link strong {
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.35;
    min-height: 2.7em;          /* 常に2行分の高さを確保 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    /* 1行でも2行分の中央に来る＝両セルの高さ・アイブロウ位置が揃う */
}

body.k2r-lp .hero-quick-link strong > span {
    display: block;
    white-space: nowrap;
}

body.k2r-lp .hero-quick-link-price {
    color: var(--accent-primary);
    background: #f0f6ff;
}

body.k2r-lp .hero-quick-link-campaign {
    color: #ffffff;
    background: var(--accent-primary);
}

body.k2r-lp .hero-quick-link:hover {
    filter: brightness(0.96);
}

body.k2r-lp .features-section-header {
    max-width: 760px;
}

body.k2r-lp .features-section-header h2 {
    margin-bottom: 0;
    font-size: clamp(32px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #222222;
}

body.k2r-lp .section-header:not(.features-section-header) h2 {
    margin-bottom: 16px;
    color: #222222;
    font-size: clamp(32px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

body.k2r-lp .trainer-eyebrow {
    margin-bottom: 8px;
}

body.k2r-lp .about-feature-photo {
    overflow: hidden;
}

body.k2r-lp .about-feature-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

body.k2r-lp .about-feature:first-child .about-feature-photo img {
    object-position: center 18%;
    transform: none;
}

body.k2r-lp .trainer-layout > div:first-child {
    overflow: hidden;
}

body.k2r-lp .trainer-photo {
    aspect-ratio: 1 / 1;
    object-position: 50% 28%;
    /* リサーチ結果: k2r/IMAGE_CORNER_RESEARCH.md */
    border-radius: var(--radius-card);
    transform: none;
}

/* リサーチ結果: k2r/IMAGE_CORNER_RESEARCH.md */
body.k2r-lp .program-tile {
    overflow: hidden;
    border-radius: var(--radius-card);
}

body.k2r-lp .about-feature-heading {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

body.k2r-lp .about-feature-num {
    width: 38px;
    min-width: 38px;
}

body.k2r-lp .about-feature-title {
    min-width: 0;
}

body.k2r-lp .instagram-gallery {
    display: block;
    margin-bottom: var(--spacing-4);
}

body.k2r-lp .instagram-slider {
    position: relative;
}

body.k2r-lp .instagram-gallery #sb_instagram {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

body.k2r-lp .instagram-gallery #sbi_images {
    display: flex !important;
    gap: var(--spacing-2);
    overflow-x: auto;
    padding: 0 !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

body.k2r-lp .instagram-gallery #sbi_images::-webkit-scrollbar {
    display: none;
}

body.k2r-lp .instagram-gallery #sbi_images .sbi_item {
    flex: 0 0 calc((100% - (var(--spacing-2) * 3)) / 4) !important;
    width: calc((100% - (var(--spacing-2) * 3)) / 4) !important;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-card);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

body.k2r-lp .instagram-gallery #sbi_images .sbi_photo,
body.k2r-lp .instagram-gallery #sbi_images img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

body.k2r-lp .instagram-gallery .sb_instagram_header,
body.k2r-lp .instagram-gallery #sbi_load {
    display: none !important;
}

body.k2r-lp .instagram-slider-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: var(--spacing-2);
}

body.k2r-lp .instagram-slider:not(.is-ready) .instagram-slider-controls {
    display: none;
}

body.k2r-lp .instagram-slider-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--accent-primary);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

body.k2r-lp .instagram-slider-button:disabled {
    opacity: 0.35;
    cursor: default;
}

body.k2r-lp .instagram-slider-button:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 3px;
}

body.k2r-lp .instagram-cta .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 52px;
}

body.k2r-lp .program-tile-name {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.35;
    text-align: center;
    overflow-wrap: normal;
    word-break: keep-all;
}

body.k2r-lp .program-tile-overlay {
    justify-content: center;
}

body.k2r-lp .program-tile-name-inner {
    display: block;
    max-width: 100%;
    text-align: center;
}

@media (max-width: 768px) {
    body.k2r-lp .program-tile-name {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.7em;
        font-size: clamp(14px, 3.8vw, 16px);
        text-align: center;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    body.k2r-lp .hero-content {
        width: 100%;
        max-width: 100vw;
        min-height: calc(100svh - 152px);
        padding: 0 20px 92px;
        margin-inline: 0;
        left: 0;
        right: 0;
        transform: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: left;
    }

    body.k2r-lp .hero {
        min-height: calc(100svh - 152px);
        height: auto;
    }

    body.k2r-lp .hero::after {
        background: rgba(0, 0, 0, 0.5);
    }

    body.k2r-lp .hero h1 {
        margin-bottom: 24px;
        font-size: clamp(34px, 10.5vw, 46px);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    body.k2r-lp .hero-location {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        margin: 24px 0 22px;
        font-size: 17px;
        text-align: left;
    }

    body.k2r-lp .hero-content h1 {
        max-width: 100%;
        min-height: 0;
        margin: 0;
        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.08;
        letter-spacing: -0.06em;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.k2r-lp .hero-title-line:first-child {
        margin-bottom: 9px;
        font-size: 0.58em;
    }

    body.k2r-lp .hero-description {
        max-width: 34em;
        margin: 0;
        font-size: 16px;
        line-height: 1.85;
    }

    body.k2r-lp .hero-description p + p {
        margin-top: 10px;
    }

    body.k2r-lp .hero-description-break {
        display: none;
    }

    body.k2r-lp .access-map-link {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body.k2r-lp .access-map-link .cta-button {
        width: 100%;
        height: 64px;
        min-height: 64px;
        padding: 8px 16px;
        line-height: 1.35;
    }

    body.k2r-lp .section-header:not(.features-section-header) h2 {
        font-size: clamp(28px, 7.4vw, 32px);
        font-weight: 800;
        line-height: 1.15;
    }

    body.k2r-lp .section-header .section-eyebrow {
        font-size: 12px;
        font-weight: 700;
    }

    body.k2r-lp .features-section-header h2 {
        font-size: clamp(28px, 7.4vw, 32px);
        font-weight: 800;
        line-height: 1.15;
    }

    body.k2r-lp .about-feature-heading .about-feature-num {
        font-size: 26px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
    }

    body.k2r-lp .about-feature-heading .about-feature-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.35;
    }

    body.k2r-lp .hero-title-line {
        max-width: 100%;
        white-space: nowrap;
    }

    body.k2r-lp .hero-buttons,
    body.k2r-lp .hero-contact-buttons {
        display: none;
    }

    body.k2r-lp .hero-quick-link {
        min-height: 96px;
        padding: 18px 16px;
    }

    body.k2r-lp .hero-quick-link > span:first-child {
        font-size: 10px;
    }

    body.k2r-lp .hero-quick-link strong {
        font-size: clamp(15px, 4.2vw, 18px);
    }

    body.k2r-lp .hero-contact-link {
        box-sizing: border-box;
        min-width: 0;
        white-space: nowrap;
    }

    body.k2r-lp .hero-slide:nth-child(1) {
        background-image: url('../images/hero-mitwork-mobile.jpg') !important;
        background-position: center;
    }

    body.k2r-lp .about-feature-photo,
    body.k2r-lp .trainer-photo {
        aspect-ratio: 4 / 3;
    }

    body.k2r-lp .trainer-photo {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: 50% 28%;
        transform: none;
    }

    body.k2r-lp .about-feature-heading {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    body.k2r-lp .about-feature-num {
        width: 34px;
        min-width: 34px;
    }

    body.k2r-lp .instagram-gallery #sbi_images .sbi_item {
        flex-basis: 100% !important;
        width: 100% !important;
    }

}