/* --- DESIGN SYSTEM --- */
        :root {
            /* Colors based on provided image & Official Logo */
            /* Logo Color: #25a9e1 */
            --c-blue-hero: #0066CC;
            /* ロゴと調和する、少し落ち着いたロイヤルブルー */
            --c-blue-dark: #004099;
            /* 深いブルー */
            --c-cyan: #25A9E1;
            /* 公式ロゴカラー（アクセントとして使用） */

            --c-text-main: #222222;
            --c-text-light: #555555;
            --c-bg-light: #F8FAFC;
            --c-border: #E0E6ED;

            /* Fonts */
            --f-main: 'Noto Sans JP', sans-serif;
            --f-mono: 'Roboto Mono', monospace;

            /* Layout */
            --w-max: 1200px;
            --sp-side: 4%;
        }

        /* --- RESET & BASE --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--f-main);
            color: var(--c-text-main);
            background-color: #fff;
            line-height: 1.8;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: 0.3s;
        }

        ul {
            list-style: none;
        }

        strong {
            font-weight: 700;
        }

        /* --- UTILITIES --- */
        .mono {
            font-family: var(--f-mono);
            letter-spacing: 0.05em;
        }

        .fw-bold {
            font-weight: 700;
        }

        .text-blue {
            color: var(--c-blue-hero);
        }

        .text-red {
            color: #D32F2F;
        }

        /* セクション共通 */
        .section-header {
            padding: 6rem var(--sp-side) 3rem;
            max-width: var(--w-max);
            margin: 0 auto;
        }

        .section-tag {
            display: block;
            font-family: var(--f-mono);
            font-weight: 700;
            color: var(--c-blue-hero);
            margin-bottom: 0.5rem;
            letter-spacing: 0.1em;
        }

        /* --- STICKY CTA --- */
        .sticky-cta {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transform: translateY(150%);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .sticky-cta.visible {
            transform: translateY(0);
        }

        .cta-bubble {
            background: #222;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            position: absolute;
            top: -40px;
            right: 0;
            white-space: nowrap;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .cta-bubble::after {
            content: '';
            position: absolute;
            bottom: -6px;
            right: 20px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #222;
        }

        .btn-sticky {
            background: linear-gradient(#ffa54b 0%, #fe7f00 100%);
            color: white;
            width: 260px;
            padding: 1rem;
            border-radius: 50px;
            text-align: center;
            font-weight: 700;
            font-size: 1.1rem;
            box-shadow: 0 5px 20px rgba(254, 127, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: 0.3s;
            border: 2px solid white;
        }

        .btn-sticky:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(254, 127, 0, 0.6);
        }

        /* --- TESTIMONIALS --- */
        .voice-section {
            padding: 6rem 0;
            background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
        }

        .voice-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1200px;
            margin: 3rem auto 0;
            padding: 0 20px;
        }

        .user-card {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        /* 使わなくなった引用マーク
        .user-card::before {
            content: '\f10d';
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: -15px;
            left: 20px;
            width: 40px;
            height: 40px;
            background: var(--c-cyan);
            color: var(--c-blue-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        } */

        .user-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 1rem;
        }

        .user-thumb {
            width: 50px;
            height: 50px;
            background: #eee;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 1.5rem;
        }

        .user-meta h4 {
            font-size: 0.95rem;
            margin-bottom: 2px;
        }

        .user-meta p {
            font-size: 0.8rem;
            color: #666;
        }

        .user-comment {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #333;
        }

        /* @media (max-width: 900px) {
            .voice-grid {
                grid-template-columns: 1fr;
            }

            .sticky-cta {
                left: 10px;
                right: 10px;
                bottom: 10px;
                width: auto;
            }

            .btn-sticky {
                width: 100%;
            }
        } */

        .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 900;
            line-height: 1.2;
        }

        .container {
            max-width: var(--w-max);
            /* 1200px */
            margin: 0 auto;
            padding: 0 var(--sp-side);
            /* 左右に4%ずつの余白 */
        }

        /* --- OFFICIAL HEADER STYLE (Corp Only) --- */
        .header-corp-strip {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: white;
            z-index: 1001;
            border-bottom: 2px solid #003288;
            display: flex;
            align-items: center;
        }

        .header-corp-inner {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .corp-logo {
            display: flex;
            align-items: center;
            font-weight: 700;
            color: #222;
            gap: 5px;
            font-size: 1.2rem;
        }

        .corp-links a {
            font-size: 0.9rem;
            margin-left: 20px;
            padding-left: 15px;
            background: url("//product.jc-edu.co.jp/assets/img/ico-arrow-01.svg") left center no-repeat;
            background-size: 8px 8px;
            color: #222;
        }

        .corp-links a:hover {
            color: var(--c-blue-hero);
            text-decoration: underline;
        }

        /* --- HEADER (Modern Glass) Adjusted --- */
        header {
            position: fixed;
            top: 40px;
            /* Below the corp strip */
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            height: 80px;
            display: flex;
            align-items: center;
        }

        .header-inner {
            width: 100%;
            max-width: var(--w-max);
            margin: 0 auto;
            padding: 0 var(--sp-side);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo img {
            height: 48px;
            width: auto;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            font-family: var(--f-mono);
            font-weight: 700;
            font-size: 0.9rem;
            color: #444;
        }

        .nav-links a:hover {
            color: var(--c-blue-hero);
        }

        .btn-header {
            background: var(--c-blue-hero);
            color: white;
            padding: 0.6rem 1.8rem;
            border-radius: 4px;
            font-family: var(--f-mono);
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.05em;
        }

        .btn-header:hover {
            background: var(--c-blue-dark);
        }

        /* --- HERO SECTION (Grid BG + Glass Card + Center Ten Content) --- */
        .hero {
            position: relative;
            min-height: 100vh;
            /* ロゴカラーから深い青へのグラデーション */
            background: linear-gradient(135deg, var(--c-blue-hero) 0%, var(--c-blue-dark) 100%);
            color: white;
            padding-top: 120px;
            /* ヘッダー分 (40 + 80 + margin) */
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        /* 方眼紙グリッドパターン */
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
        }

        /* 背景の巨大文字装飾 */
        .hero-bg-typo {
            position: absolute;
            font-family: var(--f-mono);
            font-weight: 900;
            font-size: 25vw;
            color: rgba(255, 255, 255, 0.03);
            white-space: nowrap;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .hero-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 4rem var(--sp-side);
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-tag {
            background: var(--c-cyan);
            color: var(--c-blue-dark);
            padding: 4px 12px;
            font-family: var(--f-mono);
            font-weight: 700;
            display: inline-block;
            margin-bottom: 2rem;
            font-size: 0.9rem;
            letter-spacing: 0.05em;
        }

        .release-badge {
            display: inline-flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.4);
            padding: 4px 16px 4px 6px;
            border-radius: 30px;
            margin-bottom: 1.5rem;
            backdrop-filter: blur(5px);
            font-family: var(--f-mono);
            font-weight: 700;
            font-size: 0.9rem;
        }

        .rb-year {
            background: #FFD700;
            color: #000;
            padding: 2px 10px;
            border-radius: 20px;
            margin-right: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            font-weight: 900;
            line-height: 1.2;
            margin-bottom: 2rem;
            letter-spacing: -0.02em;
        }

        .hero-desc {
            font-size: 1.1rem;
            line-height: 1.8;
            opacity: 0.95;
            margin-bottom: 3rem;
            border-left: 3px solid var(--c-cyan);
            padding-left: 1.5rem;
        }

        .hero-btns {
            display: flex;
            gap: 1rem;
        }

        .btn-white {
            background: white;
            color: var(--c-blue-hero);
            padding: 1rem 2.5rem;
            font-weight: 700;
            font-family: var(--f-mono);
            display: flex;
            align-items: center;
            gap: 10px;
            transition: 0.3s;
            border-radius: 4px;
            letter-spacing: 0.05em;
        }

        .btn-white:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .btn-trans {
            border: 1px solid rgba(255, 255, 255, 0.6);
            color: white;
            padding: 1rem 2.5rem;
            font-weight: 700;
            font-family: var(--f-mono);
            background: transparent;
            border-radius: 4px;
            letter-spacing: 0.05em;
            transition: 0.3s;
        }

        .btn-trans:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: white;
        }

        /* 右側のガラスモーフィズムカード */
        .glass-card {
            position: relative;
            width: 100%;
            max-width: 420px;
            height: 500px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            margin: 0 auto;
            transform: perspective(1000px) rotateY(-12deg) rotateX(6deg);
            box-shadow: 20px 30px 60px rgba(0, 0, 0, 0.3);
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
        }

        /* カード右上の枠線装飾 */
        /* .glass-card::before {
            content: '';
            position: absolute;
            top: -30px;
            right: -30px;
            width: 100px;
            height: 100px;
            border: 2px solid var(--c-cyan);
            z-index: 1;
        } */

        /* カード内部 */
        .glass-card-img {
            width: 100%;
            height: 100%;
            background: #000;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .glass-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
            transition: 0.3s;
        }

        .glass-card:hover .glass-card-img img {
            opacity: 1;
            transform: scale(1.02);
        }

        .glass-badge {
            position: absolute;
            top: 20px;
            right: -20px;
            background: #D32F2F;
            color: white;
            padding: 8px 16px;
            font-weight: 700;
            font-family: var(--f-mono);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: rotate(5deg);
        }

        .scroll-down {
            position: absolute;
            bottom: 3rem;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--f-mono);
            font-size: 0.8rem;
            opacity: 0.7;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .scroll-down::after {
            content: '';
            width: 1px;
            height: 40px;
            background: white;
        }

        /* --- OVERVIEW SECTION --- */
        .overview-section {
            padding: 6rem 0;
            text-align: center;
            background: #fff;
        }

        .overview-box {
            background: var(--c-bg-light);
            border: 1px solid var(--c-border);
            padding: 3rem;
            margin-bottom: 2rem;
            border-radius: 8px;
        }

        /* --- SUBJECTS (Grid Layout) --- */
        .subjects-section {
            border-top: 1px solid var(--c-border);
        }

        .subjects-grid {
            display: grid;
            /* PC: 4 columns */
            grid-template-columns: repeat(4, 1fr);
            /* ↓これを追加：行の高さを「一番高いもの」に合わせる */
            grid-auto-rows: 1fr;
            border-left: 1px solid var(--c-border);
            max-width: 1400px;
            margin: 0 auto;
        }

        .subject-card {
            background: white;
            border-right: 1px solid var(--c-border);
            border-bottom: 1px solid var(--c-border);
            padding: 2.5rem 2rem;
            transition: all 0.3s;
            position: relative;

            /* ↓ min-heightを消して height: 100% に変更 */
            height: 100%;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .subject-card:hover {
            z-index: 10;
            box-shadow: 0 20px 40px rgba(0, 80, 239, 0.15);
            transform: translateY(-5px);
        }

        /* Color tops for subjects */
        .subject-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
        }

        .subj-eng::after {
            background: #E91E63;
        }

        .subj-jpn::after {
            background: #D32F2F;
        }

        .subj-math::after {
            background: #1976D2;
        }

        .subj-sci::after {
            background: #388E3C;
        }

        .subj-soc::after {
            background: #FBC02D;
        }

        .sc-tag {
            font-family: var(--f-mono);
            color: var(--c-blue-hero);
            font-weight: 700;
            display: block;
            margin-bottom: 1rem;
            font-size: 0.85rem;
        }

        .sc-icon {
            font-size: 2.5rem;
            color: #ccc;
            margin-bottom: 1.5rem;
            transition: 0.3s;
        }

        .subject-card:hover .sc-icon {
            color: var(--c-blue-hero);
        }

        .sc-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .sc-desc {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.6;
        }

        .sc-link {
            align-self: flex-end;
            margin-top: 1.5rem;
            font-family: var(--f-mono);
            font-size: 0.8rem;
            font-weight: 700;
            border-bottom: 1px solid transparent;
        }

        .subject-card:hover .sc-link {
            border-bottom-color: var(--c-blue-hero);
            color: var(--c-blue-hero);
        }

        /* --- WORKFLOW (Steps) --- */
        .workflow-section {
            background: var(--c-bg-light);
            padding: 6rem 0;
        }

        .steps-container {
            display: flex;
            justify-content: space-between;
            gap: 2rem;
            margin-top: 3rem;
            flex-wrap: wrap;
        }

        .step-box {
            background: white;
            flex: 1;
            min-width: 280px;
            padding: 2.5rem;
            border: 1px solid var(--c-border);
            position: relative;
            border-radius: 4px;
        }

        .step-num {
            font-family: var(--f-mono);
            font-weight: 900;
            font-size: 3rem;
            color: var(--c-bg-light);
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            -webkit-text-stroke: 1px var(--c-blue-hero);
        }

        /* --- FEATURES (Grid) --- */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            border-top: 1px solid var(--c-border);
            max-width: 1400px;
            margin: 0 auto;
        }

        .feat-item {
            padding: 4rem 3rem;
            border-right: 1px solid var(--c-border);
            border-bottom: 1px solid var(--c-border);
            position: relative;
            background: white;
        }

        .feat-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            color: var(--c-blue-hero);
        }

        .feat-desc {
            font-size: 0.95rem;
            color: #555;
        }

        /* --- PHILOSOPHY --- */
        .phi-section {
            padding: 6rem 0;
            background: white;
        }

        .phi-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: flex-start;
        }

        .voice-card {
            background: var(--c-bg-light);
            padding: 1.5rem;
            border-left: 4px solid var(--c-blue-hero);
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }

        .voice-icon {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: #ddd;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 0.8rem;
            margin-right: 0.5rem;
        }

        /* --- PRICING --- */
        .pricing-section {
            background: #fff;
            padding-bottom: 6rem;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border: 1px solid var(--c-border);
            margin-top: 2rem;
        }

        .pricing-col {
            padding: 3rem 2rem;
            text-align: center;
            border-right: 1px solid var(--c-border);
        }

        .pricing-col:last-child {
            border-right: none;
        }

        .pricing-col.featured {
            background: #F0F6FF;
            position: relative;
        }

        .pricing-col.featured::before {
            content: "RECOMMENDED";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: var(--c-blue-hero);
            color: white;
            font-size: 0.7rem;
            padding: 4px 0;
            font-family: var(--f-mono);
        }

        .price-val {
            font-family: var(--f-mono);
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--c-blue-hero);
        }

        .price-sub {
            font-size: 0.8rem;
            color: #888;
        }

        /* --- SPECS --- */
        .specs-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 2rem;
            font-size: 0.9rem;
        }

        .specs-table th,
        .specs-table td {
            border: 1px solid var(--c-border);
            padding: 1.2rem;
            text-align: left;
        }

        .specs-table th {
            background: var(--c-bg-light);
            width: 25%;
            font-weight: 700;
        }

        /* --- CTA SECTION (Strong Impact) --- */
        .cta-section {
            background-image: linear-gradient(rgba(0, 10, 40, 0.85), rgba(0, 10, 40, 0.85)), url("./images/bg_cta_tech.png");
            background-size: cover;
            background-position: center;
            color: white;
            padding: 8rem var(--sp-side);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            /* Optional: Additional overlay if needed, or remove if gradient is enough */
            content: none;
        }

        /* --- BACKGROUND TEXTURE CLASS --- */
        .bg-texture {
            background-image: url("./images/bg_texture_geo.png");
            background-size: 400px;
            background-repeat: repeat;
            position: relative;
        }

        .bg-texture::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            /* Fade texture */
            pointer-events: none;
            z-index: 0;
        }

        .bg-texture>* {
            position: relative;
            z-index: 1;
        }

        .cta-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 3rem;
            flex-wrap: wrap;
        }

        .btn-cta {
            background: var(--c-blue-hero);
            color: white;
            padding: 1.2rem 3.5rem;
            font-weight: 700;
            font-size: 1.1rem;
            border-radius: 4px;
            transition: 0.3s;
            letter-spacing: 0.05em;
        }

        .btn-cta:hover {
            background: white;
            color: var(--c-blue-hero);
        }

        .btn-cta-sub {
            border: 1px solid white;
            color: white;
            padding: 1.2rem 3rem;
            font-weight: 700;
            font-size: 1.1rem;
            border-radius: 4px;
            transition: 0.3s;
        }

        .btn-cta-sub:hover {
            background: white;
            color: #111;
        }

        /* --- FOOTER --- */
        footer {
            background: #F8FAFC;
            color: #333;
            padding: 5rem var(--sp-side) 2rem;
            border-top: 1px solid #ddd;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto 4rem;
        }

        .footer-col h4 {
            font-family: var(--f-mono);
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--c-blue-hero);
            font-size: 1.1rem;
        }

        .footer-col ul li {
            margin-bottom: 0.8rem;
        }

        .footer-col a {
            color: #555;
            font-size: 0.9rem;
            border-bottom: 1px solid transparent;
        }

        .footer-col a:hover {
            color: var(--c-blue-hero);
            border-bottom-color: var(--c-blue-hero);
        }

        @media (max-width: 1024px) {
            .subjects-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-col {
                border-right: none;
                border-bottom: 1px solid var(--c-border);
            }
        }

        /* --- ZIG-ZAG FEATURES（現行サイト再現・1200pxフル活用版） --- */
        .features-list {
            display: flex;
            flex-direction: column;
            gap: 10rem;
            /* セクション間のゆったりした余白 */
            max-width: var(--w-max);
            /* 1200px */
            margin: 0 auto;
            padding: 0;
            /* 左右の余白を消して1200pxをフルに使う！ */
        }

        .feat-row {
            display: flex;
            align-items: center;
            gap: 6rem;
            /* 画像と文字の間の広い溝 */
        }

        /* 偶数番目を反転させる魔法 */
        .feat-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        .feat-img,
        .feat-text {
            flex: 1;
            /* 5:5をキープして中心を固定 */
        }

        .feat-text {
            padding: 0 20px;
            /* 文字が端に張り付かないための最低限の余白 */
        }

        /* 文字自体のボリュームを現行サイトに合わせる */
        .feat-text h3 {
            /* 1. 太字(900)をやめて、標準〜やや太め(500)くらいに落とす */
            font-weight: 600;

            /* 2. サイズを 1.8rem〜1.9rem 程度に抑えて1行に収める */
            font-size: 1.9rem;

            line-height: 1.4;
            margin-bottom: 1.5rem;

            /* 3. 文字の間隔は自然な広さに戻す */
            letter-spacing: 0.02em;

        }

        .feat-text p {
            /* 本文も本家の読みやすさに合わせた 1.1rem */
            font-size: 1.1rem;
            line-height: 1.9;
            color: #444;
            /* 少し濃くして視認性アップ */
        }

        /* --- MOBILE OPTIMIZATION (900px以下) --- */
        @media (max-width: 900px) {

            /* 1. ヘッダー・ヒーロー周り */
            .header-corp-strip,
            .scroll-down,
            .glass-card,
            .hero-bg-typo,
            .nav-links {
                display: none !important;
            }

            header {
                top: 0;
            }

            .hero {
                padding-top: 80px;
            }

            .hero-container {
                grid-template-columns: 1fr;
                text-align: center;
                padding-top: 2rem;
            }

            .hero-desc {
                border: none;
                padding: 0;
            }

            .hero-btns {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }

            .btn-white,
            .btn-trans {
                width: 100%;
                max-width: 320px;
                justify-content: center;
            }

            /* 2. 特徴（ジグザグ）セクションの調整 */
            .features-list {
                padding: 0 var(--sp-side);
                /* 端に張り付かないよう余白を戻す */
                gap: 5rem;
            }

            .feat-row,
            .feat-row:nth-child(even) {
                flex-direction: column;
                /* 強制的に縦並び */
                gap: 2rem;
            }

            .feat-img {
                width: 100%;
                aspect-ratio: 16/9;
                margin-bottom: 20px;
            }

            .feat-text {
                text-align: center;
                padding: 0;
            }

            .feat-text h3 {
                font-size: 1.6rem;
                word-break: normal;
            }

            /* 3. コンテンツ・カード・テーブル周り */
            .voice-grid,
            .features-grid,
            .phi-layout,
            .note-grid {
                grid-template-columns: 1fr;
            }

            .specs-table th,
            .specs-table td {
                display: block;
                width: 100%;
            }

            /* 4. 固定CTA（スマホ版） */
            .sticky-cta {
                left: 10px;
                right: 10px;
                bottom: 10px;
                width: auto;
            }

            .btn-sticky {
                width: 100%;
            }
        }

        /* --- スクリーンショット表示の最終調整（直角バージョン） --- */

        /* 1. 画像を入れる「箱」の設定 */
        .feat-img {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            /* どんな時も16:9をキープ */

            /* ↓角丸を完全にやめる（0にする） */
            border-radius: 0;

            overflow: hidden;
            /* containment(はみ出しの禁止令) */
            background-color: #f8f8f8;
            border: 1px solid #eee;
            /* 外側の枠線 */
        }

        /* 2. 画像「本体」の設定（ここはcontainのまま） */
        .feat-screenshot {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            /* containment */
            display: block;
            /* 画像自体のborderは消したまま */
            box-sizing: border-box;
        }

        /* --- HEROセクション：DVDパッケージ 3D表示設定 --- */

        .glass-card {
            position: relative;
            width: 100%;
            max-width: 440px;
            /* 表面のみなら440px、背表紙ありなら460pxくらいがベスト */
            height: auto;
            margin: 0 auto;

            /* 1. 3D効果：斜めに浮かせる魔法の角度 */
            transform: perspective(2000px) rotateY(-18deg) rotateX(8deg);

            /* 2. 本体の質感：うっすら透けるガラス感 */
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);

            /* 3. 影の魔術：2段構えで「重厚感」と「浮遊感」を両立 */
            box-shadow:
                10px 10px 20px rgba(0, 0, 0, 0.5),
                /* 手前の濃い影（これが厚みを生む） */
                30px 40px 80px rgba(0, 0, 0, 0.3);
            /* 奥に広がる薄い影（これが浮かせる） */

            /* 4. エッジの強調：右と下に光を当てて「角」を出す */
            border-right: 2px solid rgba(255, 255, 255, 0.2);
            border-bottom: 2px solid rgba(0, 0, 0, 0.2);

            padding: 0;
            overflow: hidden;
            border-radius: 4px;
            display: flex;
        }

        .hero-package-img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            /* 画像の左端（背表紙側）にほんの少し影を落として立体感を強調 */
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* --- FAQセクション専用スタイル --- */
        .faq-section {
            background: #fff;
            padding: 6rem 0;
            border-top: 1px solid var(--c-border);
        }

        .faq-grid-b {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .faq-grid-b {
                grid-template-columns: 1fr;
            }
        }

        .faq-item-b {
            background: white;
            border: 1px solid var(--c-border);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            transition: 0.3s;
        }

        .faq-item-b:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            border-color: var(--c-cyan);
        }

        .faq-head-b {
            background: var(--c-bg-light);
            padding: 1.5rem 1.5rem 1rem 1.5rem;
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            border-bottom: 1px dashed var(--c-border);
        }

        .q-mark {
            background: var(--c-blue-hero);
            color: white;
            font-family: var(--f-mono);
            font-weight: 700;
            min-width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-top: -2px;
        }

        .q-text {
            font-size: 1.05rem;
            font-weight: 700;
            line-height: 1.6;
            margin: 0;
        }

        .faq-body-b {
            padding: 1.5rem;
            display: flex;
            gap: 1rem;
            flex-grow: 1;
        }

        .a-mark {
            color: var(--c-cyan);
            font-family: var(--f-mono);
            font-weight: 700;
            font-size: 1.2rem;
            min-width: 32px;
            text-align: center;
            line-height: 1.6;
        }

        .faq-body-b p {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.8;
            margin: 0;
        }

        /* --- 見出し内のサブテキスト設定 --- */
        .hero-sub-title {
            font-size: 0.6em;
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        /* --- 動作環境セクションの微調整 --- */
        .spec-title {
            margin-bottom: 2rem;
        }

        .spec-note {
            font-size: 0.8rem;
        }

        .text-gray {
            color: #666;
        }

        /* --- 価格に追加 --- */
        /* カラム全体の基本設定 */
        .pricing-col {
            position: relative;
            padding-top: 3.5rem;
            background: #fff;
            /* 全ての基本を白背景に */
            border-right: 1px solid var(--c-border);
        }

        /* アップグレード・メディア販売（真ん中）だけ薄いブルーにする */
        .pricing-col.featured-blue {
            background: #F0F6FF;
        }

        /* --- PRICING SECTION UPDATES (ラベル全周枠線版) --- */

        /* 上部の帯ラベル共通設定 */
        .plan-user-label {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 0.75rem;
            padding: 6px 0;
            font-weight: 700;
            text-align: center;
            box-sizing: border-box;
            /* 枠線を含めたサイズ計算 */
        }

        /* 【新規用】白背景 × 青文字 × 全周青枠 */
        .label-new-white {
            background: #fff;
            color: var(--c-blue-hero);
            border: 1px solid var(--c-blue-hero);
            /* 一周青い枠線 */
        }

        /* 【アプグレ用】青背景 × 白文字 */
        /* 枠線を付けないままだと新規用より1px小さく見えるのを防ぐため、同色の枠線を入れます */
        .label-upgrade-blue {
            background: var(--c-blue-hero);
            color: #fff;
            border: 1px solid var(--c-blue-hero);
        }

        /* 見出しの配置調整 */
        .pricing-col .feat-title {
            justify-content: center;
            margin-top: 1rem;
        }

        /* 金額エリア・注意書きなどは変更なし */
        .price-box {
            margin: 2rem 0;
        }

        .price-set-box {
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px dashed #ccc;
        }

        .no-stock-text {
            padding: 1rem 0;
        }

        .pricing-notes {
            background: #f9f9f9;
            padding: 1.5rem;
            margin-top: 2rem;
            font-size: 0.85rem;
            color: #666;
        }

        .pricing-notes ul {
            list-style: disc;
            padding-left: 1.5rem;
        }

        /* 注意書き内のリンクエリア */
        .pricing-links {
            margin-top: 1.5rem;
            padding-top: 1.2rem;
            border-top: 1px solid #ddd;
            /* 上の箇条書きと区切る線 */
        }

        .pricing-links p {
            margin-bottom: 0.8rem;
            font-weight: 700;
        }

        .pricing-link-btns {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .pricing-link-btns a {
            color: var(--c-blue-hero);
            text-decoration: none;
            font-weight: 700;
            border-bottom: 1px solid transparent;
            transition: 0.3s;
        }

        .pricing-link-btns a:hover {
            border-bottom-color: var(--c-blue-hero);
            opacity: 0.8;
        }

        .pricing-link-btns i {
            font-size: 0.9em;
            margin-right: 4px;
        }

        /* 箇条書きの中のリンク用スタイル */
        .note-link-item {
            margin-top: 1rem;
            /* 前の項目と少し距離をあける */
            padding-top: 1rem;
            border-top: 1px dashed #ddd;
            /* 区切り線を入れて目立たせる */
            list-style: none !important;
            /* この項目だけ黒丸を消す（お好みで） */
            margin-left: -1.5rem;
            /* 黒丸を消した分、左に寄せて調整 */
            padding-left: 0.5rem;
        }

        .note-link {
            color: var(--c-blue-hero);
            font-weight: 700;
            text-decoration: underline;
            /* リンクであることを強調 */
            transition: 0.3s;
        }

        .note-link:hover {
            color: var(--c-cyan);
            text-decoration: none;
        }

        /* --- OVERVIEW SECTION UPDATES --- */

        /* 白いボックス全体の調整 */
        .overview-box {
            background: var(--c-bg-light);
            border: 1px solid var(--c-border);
            padding: 3rem;
            margin-bottom: 2rem;
            border-radius: 8px;
        }

        /* ボックス内の見出し：1777pxの壁を突破するサイズ設定 */
        .overview-box .section-title {
            margin-bottom: 1rem;
            font-size: clamp(1.8rem, 3.8vw, 2.4rem);
            letter-spacing: -0.02em;
        }

        /* メインの説明文 */
        .overview-box .main-text {
            font-size: 1.1rem;
            line-height: 1.6;
        }

        /* 下部のスッキリさせた注釈 */
        .overview-box .sub-note {
            margin-top: 1.5rem;
            font-size: 0.8rem;
            color: #888;
            line-height: 1.5;
        }

        /* ボックス外の太字テキスト */
        .overview-lead {
            font-size: 1.5rem;
            font-weight: 700;
        }

        /* 収録内容（仮） */
        /* --- DATABASE DETAILS (収録内容詳細) --- */
        .details-section {
            background: #fff;
            padding: 6rem 0;
            /* border-top: 1px solid var(--c-border); */
        }

        /* 見出し：DATABASEタグは共通設定で青、タイトルは黒に */
        .details-section .section-title {
            color: var(--c-text-main);
        }

        .details-container {
            margin-top: 3rem;
        }

        .responsive-table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
        }

        /* PC版：テーブルの基本スタイル */
        .responsive-table th,
        .responsive-table td {
            padding: 1.5rem;
            border: 1px solid var(--c-border);
            text-align: left;
            vertical-align: middle;
        }

        .responsive-table thead th {
            background: var(--c-bg-light);
            font-weight: 700;
        }

        .table-category {
            font-weight: 700;
            background: #fafafa;
            color: var(--c-blue-hero);
        }

        /* 補足事項の2カラムレイアウト */
        .note-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* 左右2分割 */
            gap: 2rem;
        }

        .note-sub-title {
            font-weight: 700;
            color: var(--c-blue-hero);
            margin-bottom: 0.8rem;
            font-size: 1.05rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.5rem;
        }

        /* 【スマホ版：テーブルをカード形式に変換】 */
        @media (max-width: 768px) {

            /* 補足事項を縦並びに */
            .note-grid {
                grid-template-columns: 1fr;
            }

            /* テーブルの見た目を解除 */
            .responsive-table thead {
                display: none;
                /* 見出しを隠す */
            }

            .responsive-table tr {
                display: block;
                margin-bottom: 2rem;
                border: 2px solid var(--c-blue-hero);
                /* カードの枠線 */
                border-radius: 8px;
                overflow: hidden;
            }

            .responsive-table td {
                display: block;
                padding: 1rem;
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 35%;
                /* 項目ラベル用の余白 */
                text-align: left;
                font-size: 0.9rem;
            }

            /* HTMLのdata-labelから項目名を表示 */
            .responsive-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 1rem;
                font-weight: 700;
                color: var(--c-blue-hero);
                font-size: 0.85rem;
            }

            /* 3番目の列（収録内容）は長文なのでラベルを上に配置 */
            .responsive-table td:last-child {
                padding-left: 1rem;
            }

            .responsive-table td:last-child::before {
                position: static;
                display: block;
                margin-bottom: 0.5rem;
            }
        }

        /* --- DATABASE DETAILS SECTION --- */

        /* 表のすぐ下の右寄せ注釈 */
        .details-disclaimer {
            text-align: right;
            margin-top: 0.5rem;
            /* 表との距離（近くする） */
            margin-bottom: 2.5rem;
            /* 下の枠との距離（遠ざける） */
            color: #888;
            font-size: 0.85rem;
            line-height: 1.4;
        }

        /* 下の枠（グレーのボックス）自体の余白をリセット */
        .details-section .pricing-notes {
            margin-top: 0;
        }

        /* スマホ版の微調整 */
        @media (max-width: 768px) {
            .details-disclaimer {
                text-align: left;
                /* スマホでは左寄せ */
                padding: 0 5px;
                /* 枠からはみ出さない程度の微調整 */
                margin-bottom: 2rem;
                /* スマホでも下の枠としっかり離す */
            }
        }

        /* --- セクションごとのスクロール位置微調整（ページ内リンク） --- */
        /* --- 動作環境セクションの余白を他と合わせる --- */
        #spec {
            padding-top: 6rem;
            /* これを追加 */
            padding-bottom: 6rem;
        }

        /* --- 全リンク先共通：ヘッダーに少し被るくらいでジャンプさせる --- */
        #top,
        #spec,
        #workflow,
        #pricing,
        #subjects,
        #details {
            scroll-margin-top: 30px;
        }

        /* --- フッター連絡先（メニュー内）の設定 --- */

        /* 連絡先セクション全体の枠 */
        .footer-tel-item {
            margin-top: 1.5rem !important;
            /* 上のメニューとの間隔 */
            line-height: 1.6;
            color: #666;
            list-style: none;
            /* 点が出ないように念のため */
        }

        /* 「ご不明な点〜」などの文章 */
        .footer-contact-text {
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
            color: #666;
        }

        /* メールリンクと電話番号の共通スタイル */
        .footer-contact-link a,
        .footer-contact-tel span {
            display: inline-block;
            font-weight: 700;
            font-size: 1.1rem;
            color: #888;
            /* 他のメニューと同じグレー */
            text-decoration: none;
            font-family: var(--f-mono);
        }

        /* アイコンの共通設定 */
        .footer-contact-link i,
        .footer-contact-tel i {
            margin-right: 8px;
            font-size: 0.9em;
            width: 1.2em;
            /* アイコンの幅を揃えて縦をピシッとさせる */
            text-align: center;
        }

        /* 各要素の隙間調整 */
        .footer-contact-link {
            margin-top: 0.4rem;
        }

        .footer-contact-tel {
            margin-top: 0.2rem;
        }

        /* スマホ版：メニューの並びに合わせる */
        @media (max-width: 900px) {
            footer {
                /* 下の余白を多めにとる（ボタンに隠れないように） */
                padding-bottom: 100px;
            }

            .footer-tel-item {
                margin-top: 1rem;
                padding-bottom: 1rem;
            }
        }

        /* 他製品バナーセクションのスタイル */
.other-products-banner {
    padding: 4rem 20px; /* 上下に余白を持たせる */
    background-color: #f9f9f9; /* 背景を少し変えて区切りを明確にする（任意） */
    text-align: center;
}

.other-products-banner .container {
    max-width: 1000px; /* バナーの最大幅（バナー画像に合わせて調整してください） */
    margin: 0 auto;
}

.banner-link {
    display: block;
    transition: opacity 0.3s ease;
}

.banner-link:hover {
    opacity: 0.8; /* ホバー時に少し透明にしてクリックできることを示す */
}

.banner-img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 角を少し丸くするとモダンに見えます */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 軽い影をつけて浮かび上がらせる */
}