/* ========================================
   和風デザイン - てのひらオアシスH₂calm
======================================== */

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

html {
    scroll-behavior: smooth;
}

:root {
    --navy: #34394f;
    --beige: #fbf4e5;
    --white: #ffffff;
    --light-beige: #fbf4e5;
    --gold: #d4af37;
    --text-dark: #2c2c2c;
    --text-light: #666;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-dark);
    line-height: 1.8;
    background: var(--light-beige);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   ヘッダー（バナー画像全体）
======================================== */

.header {
    background-image: url('header-banner.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--navy);
    padding: 0;
    text-align: center;
    position: relative;
    height: 350px;
}

.header a {
    display: block;
}

.header-banner {
    display: none;
}

/* ========================================
   ナビゲーション
======================================== */

.nav {
    background: var(--navy);
    border-bottom: 3px solid var(--gold);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    order: 1;
}

.nav-logo img {
    height: 90px;
    width: auto;
}

/* ハンバーガーメニューボタン */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 101;
    order: 3;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--white);
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 30px;
    order: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.nav-list a {
    text-decoration: none;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s;
    white-space: nowrap;
}

.nav-list a:hover {
    color: var(--gold);
}

.nav-cta {
    background: var(--gold);
    color: var(--navy);
    padding: 10px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
    order: 4;
}

.nav-cta:hover {
    background: var(--white);
    color: var(--navy);
}

/* ========================================
   セクション共通
======================================== */

section {
    padding: 60px 0;
    scroll-margin-top: 100px;
}

.section-title {
    font-size: clamp(36px, 6vw, 48px);
    font-weight: 700;
    font-family: 'Noto Serif JP', serif;
    color: var(--navy);
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--gold);
}

/* ========================================
   ヒーローセクション
======================================== */

.hero {
    background: var(--beige);
    padding: 80px 0;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
}

.hero-title {
    font-size: clamp(20px, 3vw, 32px);
    font-weight: 700;
    font-family: 'Noto Serif JP', serif;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 20px;
    white-space: normal;
}

.hero-text {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.8;
}

.hero-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.badge {
    background: var(--navy);
    color: var(--beige);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.btn-primary {
    display: inline-block;
    background: var(--navy);
    color: var(--beige);
    padding: 18px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-primary:hover {
    background: var(--gold);
    color: var(--navy);
    transform: translateY(-2px);
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* モバイル用ヒーロー画像（PC時は非表示） */
.hero-image-mobile {
    display: none;
}

.hero-image-mobile img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

.hero-image-placeholder {
    background: var(--beige);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--navy);
    color: var(--navy);
    font-weight: 600;
}

/* ========================================
   お悩みセクション
======================================== */

.worries {
    background: var(--beige);
}

.worries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.worry-item {
    background: var(--white);
    padding: 30px 20px;
    border-radius: 10px;
    border-left: 4px solid var(--navy);
    transition: all 0.3s;
}

.worry-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.worry-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.worry-item p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.7;
}

/* ========================================
   サービスセクション
======================================== */

.service {
    background: var(--white);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    text-align: center;
    padding: 40px 20px;
    background: var(--light-beige);
    border-radius: 10px;
    border: 2px solid var(--beige);
    transition: all 0.3s;
}

.service-card:hover {
    border-color: var(--navy);
    transform: translateY(-5px);
}

.service-image-placeholder {
    background: var(--beige);
    color: var(--navy);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    border: 2px solid var(--navy);
}

.service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.service-card p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-dark);
}

/* ========================================
   メニューセクション
======================================== */

.menu {
    background: var(--beige);
}

.menu-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-table {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--navy);
    min-width: 600px;
}

.menu-row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr;
    gap: 20px;
    padding: 20px 30px;
    border-bottom: 1px solid var(--beige);
    align-items: center;
}

.menu-row:last-child {
    border-bottom: none;
}

.menu-row-header {
    background: var(--navy);
    color: var(--beige);
    font-weight: 700;
}

.menu-row-popular {
    /* background: var(--light-beige); */
}

.menu-name {
    font-weight: 700;
    color: var(--navy);
}

.popular-badge {
    background: #ff6b6b;
    color: white;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 10px;
}

.menu-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
}

.menu-note {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-light);
}

/* ========================================
   効果セクション
======================================== */

.effect {
    background: var(--white);
}

.effect-section {
    margin-bottom: 60px;
}

.effect-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 30px;
    text-align: center;
}

.effect-image {
    text-align: center;
    margin-bottom: 40px;
}

.effect-image img {
    max-width: 600px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.effect-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.effect-item {
    background: var(--light-beige);
    padding: 30px;
    border-radius: 10px;
    border-left: 5px solid var(--navy);
}

.effect-number {
    font-size: 40px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 15px;
}

.effect-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.effect-item ul {
    list-style: none;
}

.effect-item li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.7;
}

.effect-item li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--navy);
    font-weight: 700;
}

/* ========================================
   水素機器セクション
======================================== */

.products {
    background: var(--beige);
}

.products-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    border: 3px solid var(--navy);
}

/* 縦配置レイアウト */
.products-content-vertical {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    border: 3px solid var(--navy);
}

.products-content-vertical .products-name {
    text-align: center;
    margin-bottom: 10px;
}

.products-content-vertical .products-maker {
    text-align: center;
    margin-bottom: 30px;
}

.products-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    grid-auto-rows: 1fr;
}

.products-images-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.products-info-full {
    width: 100%;
}

.products-spacing {
    margin-top: 60px;
}

.products-images-small {
    max-width: 600px;
}

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

.products-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.products-image-placeholder {
    background: var(--beige);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid var(--navy);
    color: var(--navy);
    font-weight: 600;
}

.products-name {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Noto Serif JP', serif;
    color: var(--navy);
    margin-bottom: 10px;
}

.products-maker {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.products-desc {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.products-specs,
.products-features {
    margin-bottom: 30px;
}

.products-specs h4,
.products-features h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.products-specs ul,
.products-features ul {
    list-style: none;
}

.products-specs li,
.products-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--beige);
    font-size: 14px;
}

.products-price {
    margin: 30px 0;
}

.price-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--navy);
}

.price-tax {
    font-size: 16px;
    color: var(--text-light);
}

.products-contact-text {
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--text-light);
}

.btn-outline {
    display: inline-block;
    border: 2px solid var(--navy);
    color: var(--navy);
    padding: 15px 35px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-outline:hover {
    background: var(--navy);
    color: var(--beige);
}

/* ========================================
   プロフィールセクション
======================================== */

.profile {
    background: var(--white);
}

.profile-content-single {
    background: var(--light-beige);
    padding: 40px;
    border-radius: 10px;
    max-width: 900px;
    margin: 0 auto;
}

.intro-section {
    margin-bottom: 40px;
    text-align: center;
}

.intro-text {
    font-size: 16px;
    line-height: 2;
    color: var(--text-dark);
    text-align: left;
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    border-left: 5px solid var(--navy);
}

.profile-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}

.profile-subtitle {
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 30px;
}

.profile-section {
    margin-bottom: 30px;
}

.profile-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.profile-section ul {
    list-style: none;
}

.profile-section li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    font-size: 15px;
    line-height: 1.7;
}

.profile-section li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--navy);
}

.profile-section p {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 15px;
}

.profile-message {
    background: var(--white);
    padding: 20px;
    border-left: 4px solid var(--gold);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.8;
}

/* ========================================
   お問い合わせセクション
======================================== */

.contact {
    background: var(--beige);
}

.contact-main {
    background: var(--navy);
    color: var(--beige);
    padding: 50px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 40px;
}

.contact-line h3 {
    font-size: 26px;
    margin-bottom: 15px;
    color: var(--beige);
}

.contact-line p {
    margin-bottom: 25px;
    font-size: 16px;
}

.btn-line {
    display: inline-block;
    background: #06C755;
    color: white;
    padding: 18px 50px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s;
}

.btn-line:hover {
    background: #05b04b;
    transform: translateY(-2px);
}

.contact-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.contact-grid .contact-card {
    max-width: 400px;
    width: 100%;
}

.contact-card {
    background: var(--white);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid var(--navy);
}

.contact-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.contact-value {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.8;
}

.contact-link {
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-area {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
}

.contact-area h3 {
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 15px;
}

.contact-area p {
    font-size: 16px;
    margin-bottom: 10px;
}

.contact-note {
    font-size: 14px;
    color: var(--text-light);
}

/* ========================================
   フッター
======================================== */

.footer {
    background: var(--navy);
    color: var(--beige);
    padding: 30px;
    text-align: center;
    font-size: 14px;
}

.footer-links {
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--beige);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--gold);
    text-decoration: underline;
}

.sp-br {
    display: none;
}

/* ========================================
   プライバシーポリシーページ
======================================== */

.privacy-page {
    background: var(--light-beige);
    padding: 60px 0;
}

.privacy-title {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Noto Serif JP', serif;
    color: var(--navy);
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--gold);
}

.privacy-content {
    background: var(--white);
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.privacy-section {
    margin-bottom: 40px;
}

.privacy-section:last-child {
    margin-bottom: 0;
}

.privacy-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--beige);
}

.privacy-section p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.privacy-section ul {
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 15px;
}

.privacy-section li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.privacy-contact {
    background: var(--light-beige);
    padding: 20px;
    border-radius: 5px;
    margin-top: 15px;
}

.privacy-contact p {
    margin-bottom: 8px;
}

.privacy-contact a {
    color: var(--navy);
    text-decoration: underline;
}

.privacy-contact a:hover {
    color: var(--gold);
}

.privacy-date {
    text-align: right;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--beige);
}

.privacy-date p {
    font-size: 14px;
    color: var(--text-light);
}

.privacy-back-link {
    text-align: center;
    margin-top: 40px;
}

/* ========================================
   レスポンシブ
======================================== */

@media (max-width: 1024px) {
    .hero .container,
    .products-content,
    .profile-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .worries-grid,
    .service-grid,
    .effect-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .menu-row {
        grid-template-columns: 1fr;
        gap: 10px;
    } */
}

@media (max-width: 768px) {
    .header {
        padding-top: 25%;
        min-height: 150px;
    }

    /* スマホ用ヘッダーバナー */
    .nav-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 8px 15px;
    }

    .nav-logo {
        flex: 1;
        order: 1;
    }

    .nav-logo img {
        display: none;
    }

    .nav-logo::before {
        content: '';
        display: block;
        width: 300px;
        height: 65px;
        background-image: url('header-mobile.png');
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
    }

    /* ハンバーガーメニュー - モバイル表示 */
    .hamburger {
        display: flex;
        position: relative;
        z-index: 102;
        order: 2;
        flex-shrink: 0;
    }

    .nav-list {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--navy);
        flex-direction: column;
        gap: 0;
        padding: 80px 0 120px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
        transition: right 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 101;
        transform: none;
    }

    .nav-list.active {
        right: 0;
    }

    .nav-list li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-list a {
        display: block;
        padding: 20px 30px;
        font-size: 16px;
        color: var(--white);
    }

    .nav-list a:hover {
        background: rgba(212, 175, 55, 0.2);
    }

    .nav-cta {
        position: fixed;
        bottom: 20px;
        right: -100%;
        width: calc(80% - 40px);
        max-width: 260px;
        text-align: center;
        transition: right 0.3s ease;
        z-index: 101;
    }

    .nav-cta.active {
        right: 20px;
    }

    .noren {
        flex-wrap: wrap;
    }

    .noren-item {
        padding: 10px 15px;
        font-size: 16px;
    }

    /* 人気No.1バッジを改行 */
    .popular-badge {
        display: block;
        margin-left: 0;
        margin-top: 8px;
        width: fit-content;
    }

    .worries-grid,
    .service-grid,
    .effect-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .hero {
        padding: 40px 0;
    }

    .hero-title {
        font-size: 26px;
    }

    .hero-image {
        display: none;
    }

    .hero-image-mobile {
        display: block;
    }

    .hero-text br {
        display: none;
    }

    .contact-main {
        padding: 30px 20px;
    }

    .privacy-title {
        font-size: 24px;
    }

    .privacy-content {
        padding: 30px 20px;
    }

    .privacy-section h2 {
        font-size: 18px;
    }

    .privacy-section p,
    .privacy-section li {
        font-size: 14px;
    }

    .sp-br {
        display: block;
    }
}

/* ========================================
   コース詳細ページ
======================================== */

.course-detail {
    padding: 60px 0;
    background: var(--light-beige);
}

.course-header {
    text-align: center;
    background: var(--white);
    padding: 50px 40px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.course-badge {
    display: inline-block;
    background: var(--navy);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.course-badge.popular {
    background: var(--gold);
    color: var(--navy);
}

.course-badge.premium {
    background: linear-gradient(135deg, var(--gold) 0%, #c19b3b 100%);
    color: var(--navy);
}

.course-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    font-family: 'Noto Serif JP', serif;
}

.course-price {
    font-size: 48px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.price-tax {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-light);
}

.course-time {
    font-size: 18px;
    color: var(--text-light);
}

.course-content {
    background: var(--white);
    padding: 50px;
    border-radius: 10px;
}

.course-section {
    margin-bottom: 40px;
}

.course-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--navy);
}

.course-section p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.course-list {
    list-style: none;
    padding: 0;
}

.course-list li {
    padding: 12px 0 12px 30px;
    position: relative;
    font-size: 16px;
    line-height: 1.8;
    border-bottom: 1px solid var(--beige);
}

.course-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--navy);
    font-weight: 700;
    font-size: 18px;
}

.course-note {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 15px;
    padding: 15px;
    background: var(--light-beige);
    border-radius: 5px;
}

.course-price-box {
    background: var(--light-beige);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.price-main {
    font-size: 56px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.price-main span {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-light);
}

.price-note {
    font-size: 14px;
    color: var(--text-light);
}

.course-cta {
    text-align: center;
    margin-top: 50px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.course-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.option-item {
    background: var(--light-beige);
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid var(--navy);
}

.option-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.option-item p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
}

/* メニューテーブルの「詳細を見る」ボタン */
.menu-detail-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--navy);
    color: var(--white);
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.menu-detail-btn:hover {
    background: var(--gold);
    color: var(--navy);
}

/* メニューセクション - メニュー詳細リンク */
.menu-detail-link {
    text-align: center;
    margin-top: 30px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .course-header {
        padding: 30px 20px;
    }

    .course-title {
        font-size: 26px;
    }

    .course-price {
        font-size: 36px;
    }

    .course-content {
        padding: 30px 20px;
    }

    .course-section h2 {
        font-size: 20px;
    }

    .course-options {
        grid-template-columns: 1fr;
    }

    .course-cta {
        flex-direction: column;
    }

    .course-cta a {
        width: 100%;
    }
}

/* ========================================
   製品詳細ページ
======================================== */

.product-detail {
    padding: 60px 0;
    background: var(--light-beige);
}

/* タブナビゲーション */
.product-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.tab-button {
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--white);
    border: 3px solid var(--navy);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Noto Sans JP', sans-serif;
}

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

.tab-button.active {
    background: var(--navy);
    color: var(--beige);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s;
}

.tab-content.active {
    display: block;
}

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

.product-header {
    text-align: center;
    background: var(--white);
    padding: 50px 40px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.product-header-sub {
    margin-top: 40px;
}

.product-header-sub .product-title {
    font-size: 32px;
}

.product-spec-title {
    font-size: 28px;
    color: var(--navy);
    margin-bottom: 30px;
    text-align: center;
}

.product-spec-title-space {
    margin: 80px 0 30px;
}

.product-image-spacing {
    margin-bottom: 20px;
}

.product-badge {
    display: inline-block;
    background: var(--navy);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.product-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
    font-family: 'Noto Serif JP', serif;
}

.product-subtitle {
    font-size: 18px;
    color: var(--text-light);
}

.product-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: var(--white);
    padding: 50px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.product-image-section {
    text-align: center;
}

.product-main-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.product-image-small {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.product-image-placeholder {
    background: var(--beige);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--navy);
    color: var(--navy);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 15px;
}

.product-image-caption {
    font-size: 14px;
    color: var(--text-light);
}

.product-info-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--navy);
}

.product-feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.product-feature-list li {
    padding: 12px 0 12px 30px;
    position: relative;
    font-size: 15px;
    line-height: 1.8;
    border-bottom: 1px solid var(--beige);
}

.product-feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--navy);
    font-weight: 700;
    font-size: 18px;
}

.product-price-box {
    background: var(--light-beige);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.product-price-main {
    font-size: 48px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.product-price-main span {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-light);
}

.product-price-note {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.product-content {
    background: var(--white);
    padding: 50px;
    border-radius: 10px;
}

.product-section {
    margin-bottom: 50px;
}

.product-section h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--navy);
}

.product-section h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.product-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.product-spec-table th,
.product-spec-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--beige);
}

.product-spec-table th {
    background: var(--light-beige);
    font-weight: 700;
    color: var(--navy);
    width: 35%;
}

.product-spec-table td {
    color: var(--text-dark);
}

.feature-item {
    margin-bottom: 30px;
    padding: 25px;
    background: var(--light-beige);
    border-radius: 10px;
    border-left: 4px solid var(--navy);
}

.feature-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-dark);
}

.product-maintenance-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.product-maintenance-table thead {
    background: var(--navy);
    color: var(--white);
}

.product-maintenance-table th,
.product-maintenance-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid var(--beige);
}

.product-maintenance-table tbody tr:nth-child(even) {
    background: var(--light-beige);
}

.maintenance-note {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 15px;
    padding: 15px;
    background: var(--light-beige);
    border-radius: 5px;
}

.option-box {
    background: var(--light-beige);
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid var(--gold);
}

.option-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
}

.option-box p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-dark);
}

.product-contact-text {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.product-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.product-back-link {
    text-align: center;
    margin-top: 40px;
}

/* 水素機器セクションのボタン配置 */
.products-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .product-header {
        padding: 30px 20px;
    }

    .product-title {
        font-size: 26px;
    }

    .product-main {
        grid-template-columns: 1fr;
        padding: 30px 20px;
    }

    .product-image-placeholder {
        height: 250px;
    }

    .product-content {
        padding: 30px 20px;
    }

    .product-section h2 {
        font-size: 22px;
    }

    .product-spec-table th {
        width: 40%;
        font-size: 14px;
    }

    .product-spec-table td {
        font-size: 14px;
    }

    .product-cta {
        flex-direction: column;
    }

    .product-cta a {
        width: 100%;
    }

    .products-buttons {
        flex-direction: column;
    }

    .products-buttons a {
        width: 100%;
    }
}

/* ========================================
   統合メニュー詳細ページ
======================================== */

.menu-detail-page {
    padding: 60px 0;
    background: var(--light-beige);
}

.menu-detail-header {
    text-align: center;
    background: var(--white);
    padding: 50px 40px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.menu-detail-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
    font-family: 'Noto Serif JP', serif;
}

.menu-detail-subtitle {
    font-size: 18px;
    color: var(--text-light);
}

.menu-course-card {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 40px;
    border: 3px solid var(--navy);
}

.menu-course-card.popular-course {
    border-color: var(--gold);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.menu-course-header {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--beige);
    margin-bottom: 30px;
}

.menu-course-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    font-family: 'Noto Serif JP', serif;
}

.menu-course-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.menu-course-time {
    font-size: 18px;
    color: var(--text-dark);
    padding: 8px 20px;
    background: var(--light-beige);
    border-radius: 20px;
}

.menu-course-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--navy);
}

.menu-course-content {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
    align-items: start;
}

.menu-course-image {
    /* position: sticky; */
    /* top: 100px; */
}

.menu-course-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.course-image-placeholder {
    background: var(--beige);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--navy);
    color: var(--navy);
    font-weight: 600;
    font-size: 16px;
}

.menu-course-info .course-section {
    margin-bottom: 30px;
}

.menu-course-info .course-section h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 4px solid var(--navy);
}

.menu-course-info .course-section p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.course-cta-inline {
    text-align: center;
    margin-top: 30px;
}

.menu-area-info {
    background: var(--navy);
    color: var(--white);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 40px;
}

.menu-area-info h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.area-text {
    font-size: 18px;
    margin-bottom: 10px;
}

.area-note {
    font-size: 14px;
    color: var(--beige);
}

.menu-back-link {
    text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .menu-detail-header {
        padding: 30px 20px;
    }

    .menu-detail-title {
        font-size: 26px;
    }

    .menu-course-card {
        padding: 25px 20px;
    }

    .menu-course-title {
        font-size: 18px;
        letter-spacing: -0.5px;
    }

    .menu-course-price {
        font-size: 28px;
    }

    .menu-course-content {
        grid-template-columns: 1fr;
    }

    .menu-course-image {
        position: static;
    }

    .course-image-placeholder {
        height: 250px;
    }

    .menu-area-info {
        padding: 30px 20px;
    }
}

/* ========================================
   サロン導入サポートセクション
======================================== */

.salon-support {
    background: var(--navy);
    padding: 60px 0;
}

.salon-support .section-title {
    color: var(--beige);
}

.salon-support .section-title::after {
    background: var(--gold);
}

.salon-support-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.salon-support-text p {
    color: var(--beige);
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 15px;
}

.salon-support-lead {
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 25px !important;
}

.salon-support-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.salon-support .btn-outline {
    border-color: var(--beige);
    color: var(--beige);
}

.salon-support .btn-outline:hover {
    background: var(--beige);
    color: var(--navy);
}

@media (max-width: 768px) {
    .salon-support .section-title {
        font-size: 28px;
    }

    .salon-support-lead {
        font-size: 18px !important;
    }

    .salon-support-buttons {
        flex-direction: column;
    }

    .salon-support-buttons a {
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   お問い合わせフォーム
======================================== */

.contact-form-section {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    scroll-margin-top: 100px;
    margin-bottom: 40px;
    border: 2px solid var(--navy);
}

.contact-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-form-header h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    font-family: 'Noto Serif JP', serif;
}

.contact-form-header p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
}

.contact-form .form-section {
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--beige);
}

.contact-form .form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.contact-form h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid var(--navy);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.form-group .required {
    color: #ff6b6b;
    font-size: 12px;
    margin-left: 5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 15px;
    border: 2px solid var(--beige);
    border-radius: 5px;
    font-family: 'Noto Sans JP', sans-serif;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--navy);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-note {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 5px;
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    padding: 8px 12px;
    background: var(--light-beige);
    border-radius: 5px;
    transition: background 0.3s;
}

.checkbox-label:hover,
.radio-label:hover {
    background: var(--beige);
}

.checkbox-label input,
.radio-label input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.date-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.date-group label {
    min-width: 80px;
    margin-bottom: 0;
}

.date-group input {
    flex: 1;
}

.fee-info {
    background: var(--light-beige);
    padding: 15px 20px;
    border-radius: 5px;
}

.fee-info p {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.fee-info p:last-child {
    margin-bottom: 0;
}

.privacy-check {
    text-align: center;
    padding: 20px;
    background: var(--light-beige);
    border-radius: 5px;
}

.privacy-check .checkbox-label {
    justify-content: center;
    background: transparent;
}

.privacy-check a {
    color: var(--navy);
    text-decoration: underline;
}

.privacy-check a:hover {
    color: var(--gold);
}

.form-submit {
    text-align: center;
    margin-top: 30px;
}

.form-submit button {
    padding: 18px 60px;
    font-size: 18px;
    cursor: pointer;
    border: none;
}

/* フォームレスポンシブ */
@media (max-width: 768px) {
    .contact-form-section {
        padding: 25px 20px;
    }

    .contact-form-header h3 {
        font-size: 22px;
    }

    .checkbox-group,
    .radio-group {
        flex-direction: column;
        gap: 8px;
    }

    .checkbox-label,
    .radio-label {
        width: 100%;
    }

    .date-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .date-group label {
        margin-bottom: 5px;
    }

    .date-group input {
        width: 100%;
    }

    .form-submit button {
        width: 100%;
        padding: 15px;
    }
}

/* ==========================================================================
   新規コンポーネント（2026-04-23追加）
   Google広告流入対応・成約導線強化
   ========================================================================== */

/* ===== 0. body余白調整（スマホ固定CTA分） ===== */
body {
    padding-bottom: 80px;
}
@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* ===== 1. スマホ固定CTAバー（最優先） ===== */
.mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--gold);
    box-shadow: 0 -4px 16px rgba(52, 57, 79, 0.08);
}
.mobile-cta-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 4px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.mobile-cta-bar a:active {
    transform: scale(0.96);
    opacity: 0.85;
}
.mobile-cta-bar a i {
    font-size: 18px;
}
.mobile-cta-bar .cta-line {
    background: #06c755;
    color: var(--white);
}
.mobile-cta-bar .cta-tel {
    background: var(--navy);
    color: var(--beige);
}
.mobile-cta-bar .cta-form {
    background: var(--beige);
    color: var(--navy);
    border: 1.5px solid var(--gold);
}
@media (min-width: 768px) {
    .mobile-cta-bar {
        display: none;
    }
}

/* ===== 2. 希少性メッセージブロック ===== */
.scarcity-section {
    padding: 60px 20px;
    background: var(--beige);
    text-align: center;
}
.scarcity-section .scarcity-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    position: relative;
    background: var(--white);
}
.scarcity-section .scarcity-inner::before {
    content: "限";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    background: var(--beige);
    padding: 0 12px;
}
.scarcity-section .scarcity-inner::after {
    content: "定";
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    background: var(--beige);
    padding: 0 12px;
}
.scarcity-section .scarcity-lead {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 16px;
}
.scarcity-section .scarcity-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 2;
    color: var(--text-dark);
    margin: 0;
}
.scarcity-section .scarcity-text strong {
    color: var(--gold);
    font-weight: 700;
}

/* ===== 3. 初回改善体験オファーブロック ===== */
.intro-offer-section {
    padding: 60px 20px;
    background: var(--white);
}
.intro-offer-card {
    position: relative;
    max-width: 680px;
    margin: 30px auto 0;
    padding: 50px 24px 32px;
    background: var(--light-beige);
    border: 2px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--gold);
    text-align: center;
}
.intro-offer-card .offer-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 22px;
    background: var(--navy);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 4px;
    white-space: nowrap;
}
.intro-offer-card .offer-ribbon-large {
    top: -22px;
    padding: 10px 32px;
    font-size: 16px;
    letter-spacing: 0.15em;
    box-shadow: 0 4px 14px rgba(28, 47, 80, 0.25);
}
@media (min-width: 768px) {
    .intro-offer-card .offer-ribbon-large {
        font-size: 18px;
        padding: 12px 40px;
    }
}
.intro-offer-card .offer-subtitle-lead {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 26px 0 10px;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .intro-offer-card .offer-subtitle-lead {
        font-size: 22px;
        margin-top: 36px;
    }
}
.intro-offer-card .offer-title {
    font-family: "Noto Serif JP", serif;
    font-size: 26px;
    color: var(--navy);
    margin: 10px 0 20px;
    padding: 0;
}
.intro-offer-card .offer-title::after {
    display: none;
}
.intro-offer-card .offer-price {
    margin: 20px 0 28px;
    font-family: "Noto Serif JP", serif;
}
.intro-offer-card .price-old {
    display: inline-block;
    color: var(--text-light);
    font-size: 18px;
    text-decoration: line-through;
    margin-right: 10px;
}
.intro-offer-card .price-arrow {
    color: var(--gold);
    margin: 0 6px;
    font-weight: 700;
}
.intro-offer-card .price-new {
    color: var(--gold);
    font-size: 34px;
    font-weight: 700;
}
.intro-offer-card .price-new-red {
    color: #e02b2b;
    font-weight: 800;
}
.intro-offer-card .price-once {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 12px;
    background: #fff;
    border: 1.5px solid #e02b2b;
    border-radius: 999px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #e02b2b;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
@media (max-width: 767px) {
    .intro-offer-card .price-once {
        display: block;
        margin: 8px auto 0;
        width: fit-content;
    }
}
.intro-offer-card .offer-scarcity {
    margin: 8px 0 24px;
    padding: 16px 18px;
    background: rgba(245, 224, 173, 0.18);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    text-align: left;
}
.intro-offer-card .offer-scarcity-lead {
    font-family: "Noto Serif JP", serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 6px;
}
.intro-offer-card .offer-scarcity-text {
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-dark);
    margin: 0;
}
@media (min-width: 768px) {
    .intro-offer-card .offer-scarcity-lead {
        font-size: 16px;
    }
    .intro-offer-card .offer-scarcity-text {
        font-size: 14px;
    }
}
.intro-offer-card .offer-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 24px;
    max-width: 360px;
    text-align: left;
}
.intro-offer-card .offer-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dotted var(--gold);
    font-size: 14px;
    color: var(--text-dark);
}
.intro-offer-card .offer-list li i {
    color: var(--gold);
    margin-right: 8px;
}
.intro-offer-card .offer-target {
    font-weight: 700;
    color: var(--navy);
    margin: 16px 0 6px;
    font-size: 15px;
}
.intro-offer-card .offer-note {
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 24px;
}
.intro-offer-card .offer-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 768px) {
    .intro-offer-card {
        padding: 60px 40px 40px;
    }
    .intro-offer-card .price-new {
        font-size: 42px;
    }
    .intro-offer-card .offer-ctas {
        flex-direction: row;
        justify-content: center;
    }
    .intro-offer-card .offer-ctas > * {
        min-width: 220px;
    }
}

/* ===== 4. FAQアコーディオン ===== */
.faq-section {
    padding: 60px 20px;
    background: var(--white);
}
.faq-list {
    max-width: 760px;
    margin: 30px auto 0;
}
.faq-item {
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    background: var(--white);
}
.faq-item summary {
    position: relative;
    display: block;
    padding: 20px 48px 20px 44px;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary:hover {
    background: var(--light-beige);
}
.faq-item summary::before {
    content: "Q";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
}
.faq-item summary::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 14px;
    transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}
.faq-item p {
    padding: 0 20px 20px 44px;
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
    animation: faqOpen 0.3s ease;
}
@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== 5. 郵便番号エリアチェッカー ===== */
.zip-checker {
    padding: 50px 20px;
    background: var(--light-beige);
}
.zip-checker .zip-inner {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px 20px;
    background: var(--white);
    border: 1.5px solid var(--gold);
    border-radius: 10px;
    text-align: center;
}
.zip-checker .zip-title {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: 20px;
    margin: 0 0 6px;
}
.zip-checker .zip-title i {
    color: var(--gold);
    margin-right: 8px;
}
.zip-checker .zip-lead {
    color: var(--text-light);
    font-size: 13px;
    margin: 0 0 18px;
}
.zip-checker .zip-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
}
.zip-checker .zip-form input {
    padding: 14px 16px;
    border: 1px solid #d6cdb4;
    border-radius: 6px;
    font-size: 16px;
    background: var(--white);
    color: var(--text-dark);
    font-family: inherit;
}
.zip-checker .zip-form input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}
.zip-checker .zip-form button {
    padding: 14px 24px;
    background: var(--navy);
    color: var(--beige);
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    font-family: inherit;
    transition: background 0.2s ease;
}
.zip-checker .zip-form button:hover {
    background: #1f2438;
}
.zip-checker .zip-result {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    display: none;
    line-height: 1.7;
}
.zip-checker .zip-result.zc-ok {
    display: block;
    background: #e6f4ea;
    color: #1e7b3a;
    border-left: 4px solid #2e7d32;
}
.zip-checker .zip-result.zc-warn {
    display: block;
    background: #fdf5d9;
    color: #8a6d1a;
    border-left: 4px solid var(--gold);
}
.zip-checker .zip-result.zc-ng {
    display: block;
    background: #fbe5e5;
    color: #9b2323;
    border-left: 4px solid #9b2323;
}
@media (min-width: 768px) {
    .zip-checker .zip-form {
        flex-direction: row;
        max-width: 520px;
    }
    .zip-checker .zip-form input {
        flex: 1;
    }
}

/* ===== 6. お悩み診断ウィジェット ===== */
.concern-picker {
    padding: 50px 20px 0;
    background: var(--beige);
}
.concern-picker .cp-lead {
    text-align: center;
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 0.15em;
    margin: 0 0 8px;
    font-weight: 600;
}
.concern-picker .cp-title {
    text-align: center;
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: 22px;
    margin: 0 0 24px;
}
.concern-picker .cp-grid {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.concern-picker .cp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 110px;
    padding: 20px 12px;
    background: var(--white);
    border: 1.5px solid var(--gold);
    border-radius: 10px;
    color: var(--navy);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease;
}
.concern-picker .cp-btn i {
    font-size: 26px;
    color: var(--gold);
    transition: color 0.2s ease;
}
.concern-picker .cp-btn:hover,
.concern-picker .cp-btn:focus {
    background: var(--navy);
    color: var(--gold);
    border-color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 57, 79, 0.18);
}
.course-highlight {
    animation: courseFlash 2s ease;
    box-shadow: 0 0 0 3px var(--gold) !important;
}
@keyframes courseFlash {
    0%, 100% { box-shadow: 0 0 0 0 var(--gold); }
    50% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.3); }
}
@media (min-width: 1200px) {
    .concern-picker .cp-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== 7. ご利用の流れ 6ステップ ===== */
.flow-section {
    padding: 60px 20px;
    background: var(--light-beige);
}
.flow-list {
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.flow-step {
    position: relative;
    padding: 28px 20px 20px;
    background: var(--white);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 10px;
    text-align: center;
}
.flow-step .fs-num {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 40px;
    height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: var(--gold);
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    border-radius: 4px;
}
.flow-step .fs-icon {
    font-size: 28px;
    color: var(--gold);
    margin: 8px 0 10px;
}
.flow-step h4 {
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 8px;
}
.flow-step p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0 0 14px;
}
.flow-step .fs-photo {
    aspect-ratio: 4 / 3;
    background: var(--beige);
    border: 1px dashed var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 12px;
    border-radius: 6px;
}
@media (min-width: 768px) {
    .flow-list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1200px) {
    .flow-list {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }
    .flow-step {
        padding: 24px 14px 16px;
    }
}

/* ===== 8. メニュー各行のLINE予約CTA ===== */
.menu-row-cta {
    grid-column: 1 / -1;
    padding: 10px 0 0;
    text-align: right;
}
.menu-row-cta a {
    display: inline-block;
    padding: 8px 16px;
    background: #06c755;
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}
.menu-row-cta a:hover {
    opacity: 0.85;
}
.menu-row-cta a i {
    margin-right: 6px;
}

/* ===== 9. LINE大型CTAブロック（お問い合わせ冒頭） ===== */
.line-prime-cta {
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 32px 20px;
    background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
    border-radius: 12px;
    text-align: center;
    color: var(--white);
    box-shadow: 0 8px 24px rgba(6, 199, 85, 0.25);
}
.line-prime-cta h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    margin: 0 0 10px;
    color: var(--white);
}
.line-prime-cta p {
    font-size: 14px;
    margin: 0 0 20px;
    line-height: 1.8;
    opacity: 0.95;
}
.line-prime-cta .btn-prime-line {
    display: inline-block;
    padding: 14px 36px;
    background: var(--white);
    color: #06c755;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}
.line-prime-cta .btn-prime-line:hover {
    transform: translateY(-2px);
}
.line-prime-cta .btn-prime-line i {
    margin-right: 8px;
}

/* ===== 10. Navigation CTA アイコン強化 ===== */
.nav-cta i {
    margin-right: 6px;
}
.nav-cta.nav-cta-line {
    background: #06c755;
    color: var(--white);
}
.nav-cta.nav-cta-line:hover {
    background: #05a847;
    color: var(--white);
}

/* ===== 11. こんな方へ（改善トーン） ===== */
.target-audience-section {
    padding: 60px 20px 40px;
    background: var(--white);
}
.target-audience-section .ta-lead {
    text-align: center;
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 0.15em;
    margin: 0 0 8px;
    font-weight: 600;
}
.target-audience-section .ta-title {
    text-align: center;
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: 24px;
    margin: 0 0 30px;
    padding-bottom: 15px;
    position: relative;
}
.target-audience-section .ta-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--gold);
}
.target-audience-section .ta-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.target-audience-section .ta-card {
    padding: 30px 24px;
    background: var(--light-beige);
    border-left: 4px solid var(--gold);
    border-radius: 6px;
    text-align: center;
}
.target-audience-section .ta-icon {
    font-size: 32px;
    color: var(--gold);
    margin-bottom: 14px;
}
.target-audience-section .ta-card h4 {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 14px;
    line-height: 1.5;
}
.target-audience-section .ta-card p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-dark);
    margin: 0;
    text-align: left;
}
@media (min-width: 768px) {
    .target-audience-section .ta-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .target-audience-section .ta-title {
        font-size: 28px;
    }
}

/* ========== 新規コンポーネント ここまで ========== */

/* ========================================
   継続サポートセクション (continue-support)
   和モダン: 藍 × ベージュ × 金
======================================== */

.continue-support-section {
    background: var(--beige);
    padding: 80px 0;
    position: relative;
}

.continue-support-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.continue-support-section .section-title {
    margin-bottom: 16px;
}

.cs-lead {
    text-align: center;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 48px;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 3カードグリッド */
.cs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

/* カード本体 */
.cs-card {
    background: var(--white);
    border: 1px solid rgba(52, 57, 79, 0.1);
    border-radius: 4px;
    padding: 40px 28px 32px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 12px rgba(52, 57, 79, 0.04);
}

.cs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.cs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(52, 57, 79, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
}

.cs-card:hover::before {
    transform: scaleX(1);
}

/* 中央カードを少しだけ強調（控えめに） */
.cs-card-featured {
    border-color: rgba(212, 175, 55, 0.35);
}

.cs-card-featured::before {
    transform: scaleX(0.5);
}

/* アイコン円 */
.cs-icon-wrap {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--beige);
    border: 1px solid rgba(212, 175, 55, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.cs-card:hover .cs-icon-wrap {
    background: var(--navy);
    border-color: var(--navy);
}

.cs-icon {
    font-size: 30px;
    color: var(--navy);
    transition: color 0.3s ease;
}

.cs-card:hover .cs-icon {
    color: var(--gold);
}

/* ナンバリング */
.cs-number {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--gold);
    margin-bottom: 8px;
    font-weight: 500;
}

/* タイトル */
.cs-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 14px;
    letter-spacing: 0.04em;
}

.cs-title::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gold);
    margin: 12px auto 0;
}

/* 対象者 */
.cs-target {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.7;
    margin: 0;
}

/* 注記 */
.cs-note {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 56px;
    line-height: 1.7;
}

/* 区切り装飾 */
.cs-divider {
    width: 100%;
    max-width: 240px;
    height: 1px;
    margin: 0 auto 48px;
    background: linear-gradient(90deg, transparent, rgba(52, 57, 79, 0.25), transparent);
    position: relative;
}

.cs-divider::after {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--gold);
    font-size: 10px;
    background: var(--beige);
    padding: 0 12px;
}

/* 安心感ボックス */
.cs-reassurance {
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 4px;
    padding: 48px 32px 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(52, 57, 79, 0.05);
}

.cs-reassurance-badge {
    width: 56px;
    height: 56px;
    margin: -76px auto 20px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(52, 57, 79, 0.2);
}

.cs-reassurance-badge i {
    color: var(--gold);
    font-size: 22px;
}

.cs-reassurance-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    letter-spacing: 0.06em;
}

.cs-reassurance-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 2;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.cs-reassurance-text strong {
    color: var(--navy);
    font-weight: 700;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
}

.cs-reassurance-assure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: var(--navy);
    background: var(--beige);
    padding: 12px 24px;
    border-radius: 999px;
    margin: 0;
    line-height: 1.6;
}

.cs-reassurance-assure i {
    color: var(--gold);
    font-size: 14px;
}

/* スマホ簡略版（デフォルト非表示。768未満で表示） */
.cs-mobile-summary {
    display: none;
}

.pc-only { display: inline; }

/* ========================================
   継続サポート レスポンシブ
======================================== */

/* タブレット以上: 3カラム横並び */
@media (min-width: 768px) {
    .continue-support-section {
        padding: 100px 0;
    }
    .cs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-bottom: 40px;
    }
    .cs-card {
        padding: 48px 28px 36px;
    }
    .cs-title {
        font-size: 22px;
    }
    .cs-reassurance {
        padding: 56px 56px 44px;
    }
}

@media (min-width: 1200px) {
    .cs-grid {
        gap: 36px;
    }
    .cs-card {
        padding: 56px 32px 44px;
    }
    .cs-icon-wrap {
        width: 84px;
        height: 84px;
    }
    .cs-icon {
        font-size: 34px;
    }
    .cs-title {
        font-size: 24px;
    }
}

/* モバイル: 簡略リストを表示、フル版テキストの改行を解除 */
@media (max-width: 767px) {
    .continue-support-section {
        padding: 64px 0;
    }
    .continue-support-section .section-title {
        font-size: 26px;
    }
    .cs-lead {
        font-size: 14px;
        margin-bottom: 32px;
        padding: 0 8px;
    }
    .cs-card {
        padding: 32px 20px 28px;
    }
    .cs-icon-wrap {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }
    .cs-icon {
        font-size: 26px;
    }
    .cs-title {
        font-size: 19px;
    }
    .cs-target {
        font-size: 14px;
    }
    .cs-note {
        font-size: 12px;
        margin-bottom: 40px;
        padding: 0 12px;
    }
    .cs-reassurance {
        padding: 40px 20px 32px;
    }
    .cs-reassurance-title {
        font-size: 19px;
    }
    .cs-reassurance-text {
        font-size: 14px;
        line-height: 1.9;
    }
    .cs-reassurance-assure {
        font-size: 13px;
        padding: 10px 18px;
    }
    .pc-only { display: none; }

    /* モバイル簡略リスト表示 */
    .cs-mobile-summary {
        display: block;
        list-style: none;
        margin: 32px auto 0;
        padding: 20px 24px;
        max-width: 320px;
        background: var(--white);
        border-left: 3px solid var(--gold);
        border-radius: 2px;
    }
    .cs-mobile-summary li {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 14px;
        color: var(--navy);
        padding: 8px 0;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px dashed rgba(52, 57, 79, 0.12);
    }
    .cs-mobile-summary li:last-child { border-bottom: none; }
    .cs-mobile-summary li i {
        color: var(--gold);
        font-size: 12px;
    }
}

/* ========================================
   最後のCTA（final-cta）
   FAQ → final-cta → contact の順で配置
   ======================================== */
.final-cta {
    position: relative;
    padding: 72px 20px 80px;
    background:
        radial-gradient(ellipse at top, rgba(212, 175, 55, 0.18) 0%, transparent 60%),
        linear-gradient(135deg, #2a2f44 0%, #34394f 50%, #1f2336 100%);
    color: var(--white);
    text-align: center;
    overflow: hidden;
}
.final-cta::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.final-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}
.final-cta-eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    letter-spacing: 0.25em;
    color: var(--gold);
    margin: 0 0 20px;
    font-weight: 500;
}
.final-cta-title {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    line-height: 1.85;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 24px;
    letter-spacing: 0.04em;
}
.final-cta-title .pc-only { display: none; }
.final-cta-title .sp-only { display: inline; }
.final-cta-sub {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 32px;
}
.final-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    max-width: 360px;
    margin: 0 auto 24px;
}
.final-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 6px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.05em;
    min-height: 52px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.final-cta-btn i {
    font-size: 18px;
}
.final-cta-btn-primary {
    background: linear-gradient(135deg, #e6c25a 0%, var(--gold) 50%, #b8941f 100%);
    color: var(--navy);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}
.final-cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.5);
    color: var(--navy);
}
.final-cta-btn-secondary {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.final-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--white);
    transform: translateY(-2px);
    color: var(--white);
}
.final-cta-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .final-cta {
        padding: 96px 24px 104px;
    }
    .final-cta-eyebrow {
        font-size: 14px;
    }
    .final-cta-title {
        font-size: 28px;
        line-height: 2.0;
        margin: 0 0 28px;
    }
    .final-cta-title .pc-only { display: inline; }
    .final-cta-title .sp-only { display: none; }
    .final-cta-sub {
        font-size: 15px;
        margin: 0 0 40px;
    }
    .final-cta-buttons {
        flex-direction: row;
        max-width: none;
        justify-content: center;
        gap: 20px;
    }
    .final-cta-btn {
        min-width: 240px;
        font-size: 17px;
        padding: 18px 36px;
    }
    .final-cta-note {
        font-size: 13px;
    }
}

/* PC/SP切替ヘルパー（final-cta-btn 内） */
.final-cta-btn .pc-only { display: none; }
.final-cta-btn .sp-only { display: inline; }
@media (min-width: 768px) {
    .final-cta-btn .pc-only { display: inline; }
    .final-cta-btn .sp-only { display: none; }
}

/* ========================================
   店舗情報（location-info）
   contact → location-info → footer
   ======================================== */
.location-info {
    background: var(--beige);
    padding: 64px 20px 72px;
    border-top: 1px solid rgba(52, 57, 79, 0.08);
}
.location-inner {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}
.location-brand {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    color: var(--navy);
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    font-weight: 600;
}
.location-brand sub {
    font-size: 0.7em;
    vertical-align: -0.2em;
}
.location-title {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    color: var(--navy);
    margin: 0 0 12px;
    padding-bottom: 14px;
    position: relative;
    font-weight: 600;
}
.location-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: var(--gold);
}
.location-tagline {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    color: var(--navy);
    opacity: 0.75;
    letter-spacing: 0.1em;
    margin: 0 0 36px;
}
.location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
}
.location-card {
    background: var(--white);
    border-radius: 8px;
    padding: 28px 24px;
    box-shadow: 0 4px 14px rgba(52, 57, 79, 0.06);
    border-top: 3px solid var(--gold);
}
.location-card-icon {
    color: var(--gold);
    font-size: 22px;
    margin-bottom: 12px;
}
.location-card-title {
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    color: var(--navy);
    margin: 0 0 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.location-card-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.85;
    color: var(--navy);
    margin: 0 0 8px;
}
.location-card-text strong {
    display: inline-block;
    min-width: 4.5em;
    color: var(--gold);
    font-weight: 700;
    margin-right: 6px;
}
.location-card-note {
    font-size: 12px;
    color: rgba(52, 57, 79, 0.6);
    margin: 4px 0 0;
    line-height: 1.7;
}
.location-mark {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: rgba(52, 57, 79, 0.75);
}
.location-usage {
    margin-top: 32px;
    padding: 28px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.location-usage-title {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    color: var(--navy);
    margin: 0 0 14px;
    text-align: center;
}
.location-usage-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    gap: 10px;
}
.location-usage-list li {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.6;
}
.location-usage-list li i {
    color: var(--gold);
    margin-right: 8px;
}
.location-usage-address {
    font-size: 13px;
    color: rgba(52, 57, 79, 0.7);
    margin: 12px 0 0;
    text-align: center;
    padding-top: 12px;
    border-top: 1px dotted rgba(52, 57, 79, 0.2);
}
@media (min-width: 768px) {
    .location-usage-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 24px;
    }
    .location-usage-title {
        font-size: 20px;
    }
}

@media (min-width: 768px) {
    .location-info {
        padding: 80px 24px 96px;
    }
    .location-title {
        font-size: 28px;
    }
    .location-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .location-card {
        padding: 32px 28px;
    }
}

/* ==========================================================================
   新規コンポーネント Phase 2（2026-04-27追加）
   - ヒーロー新コピー（3行）+ 補足キャッチ
   - お悩みセクション リード文・締め文
   - 選ばれる3つの理由
   - お客様の声
   ========================================================================== */

/* ===== ヒーロー新コピー（3行構成） ===== */
.hero-title-new {
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}
.hero-title-new .hero-line {
    display: block;
    font-weight: 700;
    color: var(--navy);
    font-family: "Noto Serif JP", serif;
}
.hero-title-new .hero-line + .hero-line {
    margin-top: 0.4em;
}
.hero-title-new .hero-line-accent {
    color: var(--gold);
    font-weight: 700;
}
@media (max-width: 767px) {
    .hero-title-new {
        font-size: 1.4rem;
        line-height: 1.6;
    }
    .hero-title-new .hero-line-accent {
        font-size: 1.3rem;
    }
}
@media (min-width: 768px) {
    .hero-title-new {
        font-size: 1.95rem;
    }
    .hero-title-new .hero-line-accent {
        font-size: 1.85rem;
    }
}

/* ===== ヒーロー補足キャッチ ===== */
.hero-subcatch {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--navy);
    opacity: 0.85;
    letter-spacing: 0.03em;
    border-left: 3px solid var(--gold);
    padding: 0.5em 1em;
    background: var(--beige);
    display: inline-block;
    border-radius: 2px;
}
@media (max-width: 767px) {
    .hero-subcatch {
        font-size: 0.78rem;
        display: block;
        text-align: left;
        margin-top: 1.2rem;
    }
}

/* ===== お悩みセクション リード文・締め文 ===== */
.worries-lead {
    text-align: center;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--navy);
    margin: -1rem auto 2.5rem;
    max-width: 640px;
    letter-spacing: 0.04em;
}
.worries-lead strong {
    color: var(--gold);
    font-weight: 700;
    border-bottom: 1px dotted var(--gold);
    padding-bottom: 2px;
}
.worries-cta-note {
    text-align: center;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--navy);
    margin: 2.5rem auto 0;
    max-width: 720px;
    padding: 24px 20px;
    background: var(--beige);
    border-radius: 8px;
    border-left: 4px solid var(--gold);
}
.worries-cta-note strong {
    color: var(--gold);
    font-weight: 700;
}
@media (max-width: 767px) {
    .worries-lead, .worries-cta-note {
        font-size: 0.95rem;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===== 選ばれる3つの理由セクション ===== */
.reasons-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, var(--white) 0%, var(--light-beige) 100%);
}
.reasons-section .section-title .title-accent {
    color: var(--gold);
}
.reasons-lead {
    text-align: center;
    font-size: 16px;
    color: var(--navy);
    opacity: 0.85;
    margin: 24px 0 48px;
    letter-spacing: 0.05em;
}
.reasons-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.reason-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 48px 28px 36px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(52, 57, 79, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.reason-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(52, 57, 79, 0.12);
}
.reason-number {
    font-family: "Noto Serif JP", serif;
    font-size: 48px;
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.reason-number::after {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    background: var(--gold);
    margin: 14px auto 0;
}
.reason-icon {
    font-size: 28px;
    color: var(--navy);
    margin: 20px 0 18px;
    opacity: 0.85;
}
.reason-title {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.5;
    margin-bottom: 18px;
    letter-spacing: 0.05em;
}
.reason-text {
    font-size: 14px;
    line-height: 1.9;
    color: var(--navy);
    opacity: 0.85;
    text-align: left;
    margin: 0;
}
.reason-text-sp {
    display: none;
    font-size: 14px;
    line-height: 1.8;
    color: var(--navy);
    opacity: 0.85;
    text-align: center;
    margin: 0;
}
@media (max-width: 767px) {
    .reason-text {
        display: none;
    }
    .reason-text-sp {
        display: block;
    }
}
@media (min-width: 768px) {
    .reasons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

/* ===== お客様の声セクション ===== */
.testimonials-section {
    padding: 80px 20px;
    background: var(--beige);
}
.testimonials-lead {
    text-align: center;
    font-size: 15px;
    color: var(--navy);
    opacity: 0.85;
    margin: 20px 0 40px;
    letter-spacing: 0.04em;
}
.testimonials-grid {
    max-width: 1100px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.testimonial-card {
    position: relative;
    padding: 32px 24px 24px;
    background: var(--white);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(52, 57, 79, 0.05);
}
.testimonial-quote-icon {
    color: var(--gold);
    font-size: 28px;
    opacity: 0.6;
    margin-bottom: 10px;
}
.testimonial-text {
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.7;
    margin: 0 0 16px;
}
.testimonial-meta {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
    text-align: right;
}
.testimonials-disclaimer {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    margin: 24px 0 32px;
}
.testimonials-cta-block {
    text-align: center;
    padding: 24px 20px;
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    border: 1px dashed var(--gold);
    border-radius: 8px;
}
.testimonials-cta-lead {
    font-size: 14px;
    color: var(--navy);
    margin: 0 0 14px;
    font-weight: 600;
}
@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
@media (min-width: 1200px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== Phase 2 ここまで ========== */

/* ========== Phase 3: 5/7 改修（先方仕様反映） ========== */

/* FV 初回価格ブロック */
.hero-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 18px auto 14px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #fffaf0, #fff7e3);
    border: 1px solid var(--gold);
    border-radius: 12px;
    max-width: 420px;
    box-shadow: 0 2px 10px rgba(180, 140, 60, 0.08);
}
.hero-pricing-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
}
.hero-pricing-main {
    font-family: 'Noto Serif JP', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}
.hero-pricing-leaf {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
}
.hero-pricing-limit {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #c0392b;
    background: #fff;
    border: 1.5px solid #c0392b;
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}
.hero-pricing-strike {
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
    font-size: 0.85em;
    margin-right: 6px;
}
.hero-pricing-now {
    color: #c0392b;
    font-weight: 800;
}
@media (min-width: 768px) {
    .hero-pricing-main {
        font-size: 30px;
    }
    .hero-pricing-limit {
        font-size: 13px;
    }
}

/* 各セクション末の CTA ブロック */
.section-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 32px auto 0;
    max-width: 600px;
    padding: 0 16px;
}
.section-cta .btn-primary,
.section-cta .btn-outline {
    flex: 1 1 240px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.section-cta .btn-primary:hover,
.section-cta .btn-outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
@media (max-width: 640px) {
    .section-cta {
        gap: 10px;
    }
    .section-cta .btn-primary,
    .section-cta .btn-outline {
        flex: 1 1 100%;
        font-size: 15px;
    }
}

/* お悩み診断 フッターノート */
.cp-foot-note {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin: 18px auto 0;
    max-width: 480px;
    line-height: 1.7;
}

/* 初回体験オファー サブタイトル */
.offer-subtitle {
    text-align: center;
    font-size: 15px;
    color: var(--text-light);
    margin: -4px 0 12px;
    letter-spacing: 0.02em;
}
.intro-offer-section .price-new {
    font-family: 'Noto Serif JP', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--navy);
}
.intro-offer-section .price-new small {
    font-size: 14px;
    color: var(--text-light);
    margin-left: 4px;
}

/* ========== Phase 3 ここまで ========== */