/*
Theme Name: Beauty Clinic
Description: 美容クリニック専用WordPressテーマ(スマートフォン対応)
Author: Your Name
Version: 1.0
Text Domain: beauty-clinic
*/

/* ページ全体のスムーズスクロール */
html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* 上部固定ヘッダーとの共存を確実にする */
body {
    position: relative;
    margin: 0;
    padding: 0;
    padding-top: 70px; /* ヘッダーの高さ分の余白 */
    height: 100%;
}

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

body {
    font-family: 'Shippori Mincho', serif;
    background-color: #FFFFFF;
    color: #333333 !important;
    overflow-x: hidden;
}

/* メニュー開閉時のスクロール制御 */
body.menu-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ヘッダー - 上部固定、常に表示 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 0 0 20px; /* 右側のパディングを削除 */
    max-width: 100%;
    margin: 0 auto;
}

/* ロゴ */
.header-logo {
    flex-shrink: 0;
}

.header-logo a {
    text-decoration: none;
    display: block;
}

.logo-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: #333333 !important;
    letter-spacing: 0.1em;
    font-weight: 600;
    white-space: nowrap;
}

/* 右側のアイコングループ */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px; /* header-rightに右パディングを移動 */
}

/* インスタグラムアイコン */
.header-instagram {
    display: flex;
    align-items: center;
}

.header-instagram-link {
    display: block;
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
}

.header-instagram-link:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.header-instagram-link:active {
    transform: scale(1.05);
}

.header-instagram-link:focus {
    outline: 2px solid #333333 !important;
    outline-offset: 2px;
}

.header-instagram-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ハンバーガーメニュー */
.hamburger {
    width: 28px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin-right: 0; /* 右マージンを明示的に0に */
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #333333 !important;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger span:nth-child(3) {
    width: 60%;
}

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

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

.hamburger.active span:nth-child(3) {
    width: 100%;
    transform: rotate(-25deg) translate(4px, -5px);
}

.main-content {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-right: 0; /* 右側マージン削除 */
}

/* メインコンテンツ */
.menu-page {
    background: #FFFFFF;
    min-height: 100vh;
}

.menu-page .container {
    max-width: 100%;
    padding: 0 7%;
}

/* ページヘッダー */
.page-header {
    text-align: left;
    margin-bottom: 60px;
    letter-spacing: 0.1em;
    font-weight: 700;
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
    padding: 60px 0 30px;
}

.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    margin-bottom: 5px;
    margin-top: 0;
    text-align: left;
}

.page-subtitle {
    font-family: 'Shippori Mincho', serif;
    font-size: 12px;
    margin: 0;
}

/* パンくずリスト */
.breadcrumb {
    margin-bottom: 30px;
    text-align: right;
}

.breadcrumb-list {
     display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Shippori Mincho', serif;
    font-size: 10px;
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
}

.breadcrumb-item {
    line-height: 1;
}

.breadcrumb-item a {
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #333333 !important;
}

.breadcrumb-item.current {
    color: #333333 !important;
    font-weight: 500;
}

.breadcrumb-separator {
    color: #333333 !important;
    font-size: 10px;
}

/* =========================================================
   【無効化】ヒーローセクション - 動画版
   ========================================================= */
/*
.hero-text h1,
.hero-text p {
    ...
    background: linear-gradient(135deg, #FFFFFF 0%, #49bfd8 165%); <!- 変更: もし有効化された場合のために水色へ ->
    ...
}

.menu-btn {
    ...
    background: #49bfd8; <!- 変更 ->
    ...
}

.menu-btn:hover {
    background: #3baebd; <!- 変更 ->
    ...
}
*/
/* ========================================================= */


/* ナビゲーションメニュー - アニメーションなし（即座に表示） */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: none;
}

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

.nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    padding: 100px 40px 80px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.nav-item {
    margin-bottom: 25px;
    cursor: pointer;
    transition: none;
}

.nav-item:hover {
    opacity: 0.7;
    transform: translateY(-2px) scale(1.02);
}

.nav-overlay.active .nav-item {
    opacity: 1;
}

.nav-overlay.active .nav-item:nth-child(8) { 
    margin-bottom: 0;
    height: 30px;
}

.nav-item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #333333 !important;
    margin-bottom: 2px;
    text-align: right;
}

.nav-item p {
    font-family: 'Shippori Mincho', serif;
    font-size: 11px;
    color: #333333 !important;
    letter-spacing: 0.05em;
    margin: 0;
    text-align: right;
}

/* ドロップダウンメニュー */
.nav-item-dropdown {
    position: relative;
}

.nav-item-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    position: relative;
}

.dropdown-arrow {
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    color: #333333 !important;
    transition: transform 0.3s ease;
}

.nav-item-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease, margin-bottom 0.3s ease;
    padding-left: 0;
    padding-right: 20px;
    margin-top: 0;
    margin-bottom: 0;
}

.nav-item-dropdown.active .nav-dropdown-menu {
    max-height: 400px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.nav-dropdown-item {
    padding: 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dropdown-item:hover {
    opacity: 0.7;
    transform: translateX(-5px);
}

.nav-dropdown-item p {
    font-family: 'Shippori Mincho', serif;
    font-size: 11px;
    color: #333333 !important;
    letter-spacing: 0.05em;
    margin: 0;
    text-align: right;
}

/* SNSアイコン */
.sns-icons {
    display: flex;
    gap: 30px;
    transition: none;
    justify-content: flex-end;
}

.nav-overlay.active .sns-icons {
    opacity: 0.8;
}

.sns-icon {
    display: block;
    width: 45px !important;
    height: 45px !important;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

.sns-icon:hover {
    transform: translateY(-3px) scale(1.1);
}

.sns-icon:active {
    transform: translateY(-1px) scale(1.05);
}

.sns-icon-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 45px !important;
    max-height: 45px !important;
    object-fit: contain !important;
    transition: all 0.3s ease;
}

.sns-icon:focus {
    outline-offset: 2px;
}

.reservation-btn {
    margin-top: 40px;
}

.nav-overlay.active .reservation-btn {
    opacity: 1;
}

/* FAQセクション */
.faq-section {
    background: #FFFFFF;
    padding-top: 60px;
    padding-bottom: 0;
}

.faq-section .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 7%;
}

/* セクションヘッダー */
.faq-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.faq-section .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 700;
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.faq-section .section-subtitle {
    font-family: 'Shippori Mincho', serif;
    font-size: 12px;
    font-weight: 700;
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
    letter-spacing: 0.05em;
    margin: 0;
}

/* FAQリスト */
.faq-list {
    max-width: 100%;
}

.faq-item {
    margin-bottom: 15px;
    /* 変更: ゴールドから水色へ */
    border-bottom: 1px solid #49bfd8;
    padding-bottom: 10px;
}

/* FAQ質問部分 */
.faq-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    /* 変更: 背景のゴールド薄塗り→水色薄塗り */
    background: rgba(73, 191, 216, 0.05);
}

.faq-icon-q {
    width: 37px;
    height: 37px;
    /* 変更: ゴールドから水色へ */
    background: #49bfd8;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-question-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 12px;
    font-weight: 700;
    color: #333333 !important;
    letter-spacing: 0.05em;
    flex-grow: 1;
    margin: 0;
    line-height: 1.4;
}

.faq-toggle {
    width: 35px;
    height: 35px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    border: none;
}

.faq-toggle-icon {
    font-family: 'Cormorant Garamond', serif;
    font-size: 50px;
    color: #333333 !important;
    transition: color 0.3s ease;
}

/* FAQ回答部分 */
.faq-answer {
    display: none;
    padding: 10px 0 10px 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    opacity: 1;
    transform: translateY(0);
}

.faq-item.active .faq-toggle-icon {
    content: "−";
}

.faq-icon-a {
    width: 37px;
    height: 37px;
    background: #FFFFFF;
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
    /* 変更: ゴールドから水色へ */
    border: 2px solid #49bfd8;
}

.faq-answer-content {
    flex-grow: 1;
    padding-right: 10px;
}

.faq-answer-content p {
    font-family: 'Shippori Mincho', serif;
    font-size: 12px;
    font-weight: 700;
    color: #333333 !important;
    line-height: 1.7;
    letter-spacing: 0.05em;
    margin: 0;
    padding-top: 8px;
}

/* アニメーション用 */
.faq-answer.expanding {
    display: flex;
    animation: expandAnswer 0.3s ease forwards;
}

.faq-answer.collapsing {
    animation: collapseAnswer 0.3s ease forwards;
}

@keyframes expandAnswer {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

@keyframes collapseAnswer {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
}

/* WordPress デフォルトスタイルのリセット */
.wp-block-image {
    margin: 0;
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
    .hamburger span,
    .nav-overlay,
    .nav-item,
    .reservation-btn,
    .menu-btn {
        transition: none;
    }
}

/* セーフエリア対応（iPhone X以降） */
@supports (padding: max(0px)) {
    .header-content {
        padding-left: max(20px, env(safe-area-inset-left));
    }
    
    .header-right {
        padding-right: max(20px, env(safe-area-inset-right));
    }
    
    .nav-menu {
        padding-left: max(40px, env(safe-area-inset-left) + 40px);
        padding-right: max(40px, env(safe-area-inset-right) + 40px);
    }
}

/* 予約お問い合わせセクション */
.reservation-section {
    position: relative;
    margin-top: 60px;
    background: transparent;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 0;
    background: #FCFCFC;
    margin: 0 calc(50% - 50vw);
}

/* 既存の背景半円 */
.circle-decoration {
    position:relative;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #FCFCFC;
    width: 500px;
    height: 150px;
    border-radius: 50% / 100% 100% 0 0;
}

.circle-decoration.white {
    background: #FFFFFF;
}

.background-gray-area {
    background: #FCFCFC;
}

.reservation-section .container {
    max-width: 100%;
    margin: 0 auto;
}

.reservation-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333 !important;
    line-height: 3.0;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    padding-left: 7%;
    text-align: center;
}

.reservation-btn-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 12px;
    font-weight: 500;
    color: #333333 !important;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    padding-left: 7%;
    text-align: center;
}

.reservation-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
}

.reservation-section-btn {
    display: block;
    width: 300px;
    max-width: 100%;
    padding: 15px 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-align: center;
    /* 変更: ゴールドから水色へ */
    background: #49bfd8;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.reservation-section-btn:hover {
    /* 変更: ホバー時の水色 */
    background: #3baebd;
}

.contact-section-btn {
    display: block;
    width: 300px;
    max-width: 100%;
    padding: 15px 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-align: center;
    background: #FFFFFF;
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
    transition: all 0.3s ease;
    /* 変更: ボーダーを水色へ */
    border: 1px solid #49bfd8;
}



/* ページ全体の構造 */
.site {
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
}

/* ウィジェット用スタイル */
.widget {
    margin-bottom: 30px;
}

.widget-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: #333333 !important;
    margin-bottom: 15px;
    text-align: center;
}

.widget ul {
    list-style: none;
    padding: 0;
}

.widget li {
    margin-bottom: 8px;
}

.widget a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.widget a:hover {
    /* 変更: ゴールドから水色へ */
    color: #49bfd8;
}

/* 通知スタイル */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    z-index: 10000;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-width: 300px;
    word-wrap: break-word;
}

.notification-success {
    /* 変更: ゴールドから水色へ */
    background: #49bfd8;
    color: #FFFFFF;
}

.notification-error {
    background: #e74c3c;
    color: #FFFFFF;
}

.notification-info {
    background: #3498db;
    color: #FFFFFF;
}

/* 遅延読み込み用画像スタイル */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazy.loaded {
    opacity: 1;
}

/* ==================================================
   常設CTA（電話・WEB予約・LINE登録）吹き出し付き
   ================================================== */

/* コンテナ - スマホ版（画面下部） */
.fixed-cta-container {
    position: fixed;
    bottom: 15px;
    left: 15px;
    right: 15px;
    z-index: 998;
    display: flex;
    flex-direction: row;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fixed-cta-container.visible {
    opacity: 1;
    visibility: visible;
}

/* 上段：電話とWEB予約を横並び（削除：全て1列に） */
.fixed-cta-top-row {
    display: flex;
    gap: 8px;
    flex: 1;
}

/* 共通ボタンスタイル */
.fixed-cta-phone,
.fixed-cta-reservation,
.fixed-cta-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 12px;
    text-decoration: none;
    font-family: 'Shippori Mincho', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fixed-cta-phone:active,
.fixed-cta-reservation:active,
.fixed-cta-line:active {
    transform: scale(0.98);
}

/* 電話ボタン（グレー）- 1/3幅 */
.fixed-cta-phone {
    background: #868686;
    color: #FFFFFF;
    flex: 1;
}

.fixed-cta-phone:hover {
    background: #757575;
}

/* WEB予約ボタン（ゴールド）- 1/3幅 */
.fixed-cta-reservation {
    /* 変更: ゴールドから水色へ */
    background: #49bfd8;
    color: #FFFFFF;
    flex: 1;
}

.fixed-cta-reservation:hover {
    /* 変更: ホバー時の水色 */
    background: #3baebd;
}

/* LINE登録ボタン（緑）- 1/3幅 */
.fixed-cta-line {
    /* LINEの色はブランドカラーのため維持 */
    background: #06C755;
    color: #FFFFFF;
    flex: 1;
}

.fixed-cta-line:hover {
    background: #05b04a;
}

/* 吹き出しバッジ */
.fixed-cta-badge {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.05em;
    z-index: 1;
}

/* 吹き出しの三角形（尖り部分） */
.fixed-cta-badge::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000000;
}

/* アイコン */
.fixed-cta-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* SVGアイコンの色 */
.fixed-cta-phone svg,
.fixed-cta-reservation svg {
    stroke: currentColor;
}

/* テキスト */
.fixed-cta-text {
    font-size: 11px;
    line-height: 1.3;
    color: #FFFFFF;
    text-align: center;
}

/* スライドアップアニメーション */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 印刷時は非表示 */
@media print {
    .fixed-cta-container {
        display: none;
    }
}

/* アクセシビリティ：フォーカス状態 */
.fixed-cta-phone:focus,
.fixed-cta-reservation:focus,
.fixed-cta-line:focus {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}


/* タブレット対応 */
@media (min-width: 480px){
    .circle-decoration {
        width: 620px;
    }

    .fixed-cta-container {
        gap: 10px;
    }

    .fixed-cta-phone,
    .fixed-cta-reservation,
    .fixed-cta-line {
        padding: 13px 14px;
        font-size: 12px;
    }

    .fixed-cta-icon {
        width: 22px;
        height: 22px;
    }

    .fixed-cta-text {
        font-size: 12px;
    }
    
    .fixed-cta-badge {
        font-size: 10px;
        padding: 5px 13px;
    }
}

@media (min-width: 600px){
    .circle-decoration {
        width: 830px;
    }

    .fixed-cta-phone,
    .fixed-cta-reservation,
    .fixed-cta-line {
        padding: 14px 16px;
        font-size: 13px;
    }

    .fixed-cta-icon {
        width: 24px;
        height: 24px;
    }

    .fixed-cta-text {
        font-size: 13px;
    }
    
    .fixed-cta-badge {
        font-size: 10px;
        padding: 5px 14px;
        top: -29px;
    }
}

@media (min-width: 800px){
    .circle-decoration {
        width: 1020px;
    }

    /* タブレットでもmarginを調整 */
    .fixed-cta-container {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }
    
    .fixed-cta-badge {
        top: -30px;
    }
}


@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */

    /* ヘッダー - PC版 */
    .header {
        height: 80px;
    }
    
    .header-content {
        padding: 0 0 0 40px; /* 右側のパディングを削除 */
    }
    
    .logo-text {
        font-size: 24px;
    }
    
    .header-right {
        gap: 30px;
        padding-right: 40px; /* PC版の右パディング */
    }
    
    .header-instagram-link {
        width: 36px;
        height: 36px;
    }
    
    .hamburger {
        width: 32px;
        gap: 8px;
    }

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

    .hamburger.active span:nth-child(3) {
        transform: rotate(-25deg) translate(5px, -6px);
    }
    
    body {
        padding-top: 80px; /* PC版ヘッダー高さ */
    }

    /* ナビゲーションメニューをグリッド配置 */
    .nav-menu {
        margin: 8% 10% 8% 12%;  /* 左マージンを10%から12%に増加 */
        padding: 5;
        padding-top: 100px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto auto auto;
        grid-column-gap: 50px;
        grid-row-gap: 40px;
        height: auto;
        align-content: center;
    }

    /* 1〜7番目のメニュー項目を3x3グリッドに配置 */
    .nav-item:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2;
    }

    .nav-item:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
    }

    .nav-item:nth-child(3) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .nav-item:nth-child(4) {
        grid-area: 2 / 1 / 3 / 2;
    }

    .nav-item:nth-child(5) {
        grid-area: 2 / 2 / 3 / 3;
    }

    .nav-item:nth-child(6) {
        grid-area: 2 / 3 / 3 / 4;
    }
    
    .nav-item:nth-child(7) {
        grid-area: 3 / 1 / 4 / 2;
    }

    /* 8番目（SNS）を4行目に配置 - 左揃え */
    .nav-item:nth-child(8) {
        grid-area: 4 / 1 / 5 / 4;
        margin-top: 80px;
    }

    /* 9番目（予約ボタン）を5行目に配置 - 左揃え */
    .nav-item:nth-child(9) {
        grid-area: 5 / 1 / 6 / 4;
        margin-top: 40px;
    }

    .nav-item {
        height: auto;
        margin-bottom: 0;
    }

    .nav-item h3 {
        font-size: 36px;
        margin-bottom: 8px;
        text-align: left;  /* 追加 */
    }

    .nav-item p {
        font-size: 18px;
        text-align: left;  /* 追加 */
    }

    /* MENUドロップダウンの構造を縦並びに */
    .nav-item-main {
        display: flex;
        flex-direction: column;  /* 縦並びに変更 */
        align-items: flex-start; /* 左揃え */
        gap: 8px;  /* h3とpの間隔を調整 */
    }

    /* ドロップダウンメニュー（PC版） */
    .dropdown-arrow {
        font-size: 16px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav-dropdown-menu {
        padding-left: 20px;  /* 左側にスペースを追加 */
        padding-right: 0;    /* 右側のpaddingを削除（左揃えのため） */
    }

    .nav-item-dropdown {
        position: relative;  /* 相対配置を追加 */
    }

    .nav-dropdown-item p {
        font-size: 16px;
        text-align: left;
    }

    .nav-dropdown-item p {
        font-size: 16px;
        text-align: left;  /* 追加 */
    }

    .sns-icons {
        gap: 60px;
        justify-content: flex-start;
    }

    .sns-icon {
        display: block;
        width: 65px !important;
        height: 65px !important;
    }
    
    .sns-icon-image {
        max-width: 65px !important;
        max-height: 65px !important;
    }

    .reservation-btn {
        margin-top: 0;
        display: flex;
        justify-content: flex-start;
    }
    
    /* =========================================================
       【無効化】PC版 - ヒーローセクション マージン調整
       ========================================================= */
    /*
    .hero-section {
        margin-top: -80px;
    }

    .hero-text h1 {
        ...
    }
    */
    /* ========================================================= */


    .faq-section .section-title {
        font-size: 54px;
        margin-bottom: 10px;
    }

    .faq-section {
        padding: 130px 0;
    }

    .faq-icon-a,
    .faq-icon-q {
        font-size: 40px;
        width: 78px;
        height: 78px;
    }

    .faq-question-text,
    .faq-answer-content p {
        font-size: 24px;
    }

    .faq-toggle-icon {
        font-size: 80px;
    }

    .faq-answer {
        padding-top: 25px;
    }

    .circle-decoration {
        width: 1200px;
    }

    .reservation-section {
        padding: 50px 0;
    }
    
    .reservation-text {
        font-size: 32px;
        margin-bottom: 65px;
    }

    .reservation-contact-btn-area {
        display: flex;
        gap: 80px;
        justify-content: center;
        align-items: center; 
    }

    .reservation-btn-area,
    .contact-btn-area {
        height: 200px;
    }

    .reservation-section-btn,
    .contact-section-btn {
        font-size: 36px;
        width: 320px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reservation-btn-text {
        padding: 0;
        height: 30px;
        font-size: 16px;
        align-items: flex-end;
    }

    .page-header {
        padding-top: 10%;
    }

    .page-title {
        font-size: 54px;
    }

    .page-subtitle {
        font-size: 32px;
    }

    .breadcrumb {
        margin-bottom: 60px;
    }

    .breadcrumb-list {
        font-size: 16px;
    }

    /* ==================================================
       常設CTA - PC版（右下）吹き出し付き
       ================================================== */
    
    .fixed-cta-container {
        bottom: 30px;
        top: auto;
        transform: none;
        left: auto;
        right: 30px;
        width: auto;
        max-width: 420px;
        gap: 10px;
        flex-direction: row;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .fixed-cta-container.visible {
        opacity: 1;
        visibility: visible;
    }

    .fixed-cta-phone,
    .fixed-cta-reservation,
    .fixed-cta-line {
        flex: 1;
        padding: 13px 16px;
        font-size: 12px;
        border-radius: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .fixed-cta-phone:hover,
    .fixed-cta-reservation:hover,
    .fixed-cta-line:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    }

    .fixed-cta-phone:active,
    .fixed-cta-reservation:active,
    .fixed-cta-line:active {
        transform: translateY(-1px) scale(0.98);
    }

    .fixed-cta-icon {
        width: 18px;
        height: 18px;
    }

    .fixed-cta-text {
        font-size: 12px;
        white-space: nowrap;
    }
    
    /* PC版吹き出しバッジ */
    .fixed-cta-badge {
        top: -30px;
        padding: 5px 14px;
        font-size: 10px;
        border-radius: 14px;
    }
    
    .fixed-cta-badge::after {
        bottom: -5px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #000000;
    }
}


@media (min-width: 1165px){
    .circle-decoration {
        top: 45px;
        width: 1500px;
    }
}

@media (min-width: 1480px){
    .circle-decoration {
        top: 45px;
        width: 1900px;
    }
}

@media (min-width: 1880px){
    .circle-decoration {
        top: 45px;
        width: 2500px;
    }
}

@media (max-width: 420px){
    .fixed-cta-phone,
    .fixed-cta-reservation,
    .fixed-cta-line {
        padding: 10px 8px;
        font-size: 10px;
        gap: 6px;
    }

    .fixed-cta-icon {
        width: 18px;
        height: 18px;
    }

    .fixed-cta-text {
        font-size: 10px;
    }
    
    .fixed-cta-badge {
        font-size: 8px;
        padding: 3px 10px;
        top: -10px;
        border-radius: 10px;
    }
    
    .fixed-cta-badge::after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #000000;
        bottom: -3px;
    }
}

/* ==================================================
   症例ページ - 件数表示
   ================================================== */

.case-count-display {
    text-align: center;
    margin: 30px 0;
}

.case-count-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 500;
    color: #333333 !important;
    letter-spacing: 0.1em;
}

/* ==================================================
   お悩みボタン - アクティブ状態
   ================================================== */

.concern-button {
    position: relative;
    transition: all 0.3s ease;
}

.concern-button.active {
    /* 変更: ゴールドから水色へ */
    background: #49bfd8;
}

.concern-button.active p {
    color: #FFFFFF;
    font-weight: 700;
}

.concern-button:hover {
    transform: translateY(-2px);
    /* 変更: ホバー時の影を水色系へ */
    box-shadow: 0 4px 8px rgba(73, 191, 216, 0.3);
}

/* 症例ナビゲーション矢印 */
.nav-arrow-area {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0;
}

.nav-arrow {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-arrow:hover {
    transform: scale(1.1);
}

/* PC版 */
@media screen and (min-width: 960px) {
    .case-count-text {
        font-size: 20px;
    }
    
    .nav-arrow {
        width: 60px;
        height: 60px;
    }
}