/* ==========================================================================
   Base Styles - Noto Serif JP Priority (全デバイス明朝体強制)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    /* Noto Serif JP を最優先。Androidでも確実に明朝体を表示 */
    font-family: 'Noto Serif JP', "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
    color: #4A3A35;
    background-color: #fff;
    line-height: 1.8;
    overflow-x: hidden;
}

/* 全てのテキスト要素に対して明朝体を強制適用 */
h1, h2, h3, p, a, span, label, input, textarea, button, dt, dd, li, th, td {
    font-family: 'Noto Serif JP', serif !important;
}

button, input, select, textarea {
    font-family: inherit;
}

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

a:hover {
    opacity: 0.7;
}

ul {
    list-style: none;
}

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

/* ==========================================================================
   Hero Section & Header (PC Layout)
   ========================================================================== */
.hero-section {
    height: 100vh;
    background: url('../images/hero-full.webp') no-repeat center center/cover;
    position: relative;
    color: #fff;
    overflow: hidden;
}

.logo {
    position: absolute;
    top: 30px;
    left: 40px;
    z-index: 100;
}

.logo img {
    width: 125px;
}

/* 予約ボタン */
.header-reserve {
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 1100;
}

.header-reserve a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 125px;
    background: rgba(51, 41, 38, 0.85);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    color: #ffffff !important;
    transition: 0.3s, transform 0.3s;
}

.header-reserve a:hover {
    background: rgba(51, 41, 38, 1);
    transform: scale(1.05);
}

.hero-container {
    height: 100%;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* PC用サイドメニュー */
.side-nav {
    position: absolute;
    top: 66%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 10;
}

.side-nav ul li {
    margin-bottom: 35px;
}

.side-nav ul li a {
    display: flex;
    flex-direction: column;
    letter-spacing: 0.15em;
    transition: opacity 0.3s;
    text-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.side-nav ul li a .en { font-size: 22px; text-transform: uppercase; }
.side-nav ul li a .ja { font-size: 14px; opacity: 0.8; margin-top: 0px; }

/* PCメインコピー：左下固定 */
.hero-copy {
    position: absolute;
    right: 20px;
    bottom: 80px;
    z-index: 5;
    text-align: right;
}

.hero-copy h1 {
    font-size: 50px;
    font-weight: normal;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-shadow: 0 2px 25px rgba(0,0,0,0.5);
}

/* ==========================================================================
   Common Section Styles (Vertical Titles & Headers)
   ========================================================================== */
.vertical-title {
    writing-mode: vertical-rl;
    font-size: 13px;
    letter-spacing: 0.4em;
    border-left: 1px solid #4A3A35;
    padding-right: 15px;
    margin-right: 50px;
    display: flex;
}

.vertical-title .en { font-size: 28px; margin-bottom: 15px; }
.vertical-title .ja { font-size: 24px; opacity: 0.8; }

.section-header { text-align: center; margin-bottom: 60px; }
.en-title { font-size: 12px; letter-spacing: 0.2em; margin-bottom: 10px; }
.ja-title { font-size: 26px; font-weight: normal; }

/* About Section */
.about-flex {
    display: flex;
    align-items: flex-start;
    margin-bottom: 80px;
}

.about-content h2 {
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 30px;
    line-height: 1.4;
}

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

/* ==========================================================================
   Trial Menu Section (復元：中央寄せ・赤字・余白詰め)
   ========================================================================== */
.trial-section { background-color: #F9F7F2; }
.trial-list { max-width: 850px; margin: 0 auto; }

.trial-item {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央寄せ */
    background: #fff;
    padding: 22px 30px;
    margin-bottom: 15px;
    border: 1px solid #eceae4;
    gap: 20px; /* 要素間の隙間を適切に確保 */
}

.trial-item .label {
    background: #4A3A35;
    color: #fff;
    padding: 5px 15px;
    font-size: 16px;
    min-width: 140px;
    text-align: center;
}

.trial-item .price-old {
    font-size: 16px;
    color: #4A3A35;
}

.trial-item .arrow {
    font-size: 18px;
    color: #4A3A35;
}

.trial-item .price-new {
    color: #D15B5B !important; /* 以前の赤字を復元 */
    font-weight: bold;
    font-size: 22px;
}

.trial-note { text-align: center; margin-top: 25px; font-size: 13px; opacity: 0.8; }

/* ==========================================================================
   Member Menu Section (タブ切り替え・料金表)
   ========================================================================== */
.member-section { background-color: #fff; }
.entrance-fee { text-align: center; color: #D15B5B; margin-bottom: 30px; font-weight: bold; }

.tab-wrapper { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.tab-btn {
    flex: 1;
    max-width: 190px;
    padding: 18px;
    border: none;
    background: #f4f4f4;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.tab-btn.active { background: #4A3A35; color: #fff; }
.tab-btn.color1 { background: #b57778; color: #fff; }
.tab-btn.color2 { background: #758a5e; color: #fff; }
.tab-btn.color3 { background: #709ab5; color: #fff; }

.tab-content { display: none; max-width: 950px; margin: 0 auto; }
.tab-content.active { display: block; }

.price-table { width: 75%; border-collapse: collapse; margin: 0 auto;}
.price-table tr { border-bottom: 1px solid #eee; }
.price-table th, .price-table td { padding: 25px 15px; text-align: center; vertical-align: middle; }
.price-table td span { font-size: 12px; color: #888; line-height: 1.4; display: block; }

/* ==========================================================================
   Access Section (PC版)
   ========================================================================== */
.access-flex {
    display: flex;
    gap: 60px;
    align-items: stretch;
}

.access-info {
    flex: 1;
    display: flex;
}

.address-box dt { font-weight: bold; font-size: 18px; margin-top: 25px; }
.address-box dd { font-size: 14px; margin-bottom: 8px; }

.map-area {
    flex: 1.5;
}

.map-area iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: 1px solid #ddd;
}

/* ==========================================================================
   Contact Section (バナーエリア・オーバーレイ)
   ========================================================================== */
.contact-section {
    background: url('../images/image-12-4176d0ef-c78c-4b9e-836d-dda4df4dc6bb.webp') no-repeat center center/cover;
    height: 500px;
    position: relative;
}

.contact-overlay {
    background: rgba(0, 0, 0, 0.45); /* 背景を暗くして文字を読みやすく */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.contact-inner .en-label { font-size: 14px; letter-spacing: 0.3em; margin-bottom: 10px; }
.contact-inner h2 { font-size: 36px; margin-bottom: 25px; font-weight: normal; }
.contact-inner .desc { font-size: 16px; line-height: 2; margin-bottom: 45px; }

.contact-btn {
    display: inline-block;
    padding: 18px 80px;
    border: 1px solid #fff;
    border-radius: 50px;
    font-size: 16px;
    color: #fff;
    transition: 0.4s;
    background: transparent;
}

.contact-btn:hover {
    background: #fff;
    color: #4A3A35;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: #332926; color: #fff; padding: 80px 0 30px; }
.footer-flex { display: flex; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.footer-right { text-align: right; }
.footer-nav li { margin-bottom: 25px; list-style: none; }
.copyright { text-align: center; font-size: 11px; border-top: 1px solid #444; margin-top: 70px; padding-top: 30px; opacity: 0.5; }

/* ==========================================================================
   Responsive (iPad & Mobile - 大事故防止：全修正適用済)
   ========================================================================== */
@media (max-width: 1024px) {
    .logo {
    position: absolute;
    top: 15px;
    left: 15px;}
    .logo img { width: 25%; }
    
    /* ハンバーガーメニュー */
    .hamburger {
        display: block; position: fixed; top: 30px; right: 30px;
        width: 30px; height: 24px; z-index: 2000; cursor: pointer;
    }
    .hamburger span { display: block; position: absolute; width: 100%; height: 2px; background-color: #fff; transition: 0.3s; }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { top: 22px; }
    .hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* 予約ボタン：モバイル右下固定 */
    .header-reserve { position: fixed; top: auto; bottom: 30px; right: 30px; z-index: 1500; }
    .header-reserve a {
        width: 75px; height: 75px; font-size: 12px; color: #fff !important;
        background: rgba(74, 58, 53, 0.95); box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    /* 全画面ナビゲーション */
    .side-nav {
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
        background: rgba(74, 58, 53, 0.98); z-index: 1800;
        display: flex; justify-content: center; align-items: center; transition: 0.5s ease;
        transform: none; left: auto;
        visibility: hidden; /* 初期状態の誤表示を防止 */
    }
    .side-nav.is-active { right: 0; visibility: visible; }
    .side-nav ul { text-align: center; }
    .side-nav ul li a .en { font-size: 24px; color: #fff; text-shadow: none; }
    .side-nav ul li a .ja { font-size: 14px; color: #fff; }

    /* キャッチコピー：画面中央 */
    .hero-container { display: flex; justify-content: center; align-items: center; }
    .hero-copy { position: static; text-align: center; margin: 0; }
    .hero-copy h1 { font-size: 28px; line-height: 1.6; }

    /* --- 🚨 Access Section Fix: 絶対に横並びにしない・縦に積み上げる --- */
    .access-flex {
        display: block !important; /* 横並びを完全に排除 */
        width: 100% !important;
    }

    .access-info {
        display: block !important; /* 見出しと住所の横並びを完全に解除 */
        width: 100% !important;
        flex: none !important; /* PC版の幅1を破棄 */
        margin-bottom: 50px;
    }

    /* 見出しを横書き化し中央へ */
    .vertical-title {
        writing-mode: horizontal-tb !important; 
        border-left: none !important;
        border-bottom: 1px solid #4A3A35;
        padding: 0 0 10px 0 !important;
        margin: 0 0 30px 0 !important;
        display: block !important;
        text-align: center;
        width: 100%;
    }
    .vertical-title .en { font-size: 24px; margin-bottom: 5px; display: block; }
    .vertical-title .ja { font-size: 16px; display: block; }

    /* 住所情報を画面幅いっぱいに中央寄せ */
    .address-box {
        width: 100% !important;
        padding: 0 !important;
        text-align: center;
    }
    .address-box dt { font-size: 16px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
    .address-box dd { font-size: 16px; padding: 10px 0 20px 0; }

    /* 地図を画面幅いっぱいに表示 */
    .map-area {
        display: block !important;
        width: 100% !important;
        flex: none !important; /* PC版の幅1.5を破棄 */
    }
    .map-area iframe {
        width: 100% !important;
        height: 350px !important; /* タブレット・スマホで見やすい高さ */
        border-radius: 15px;
    }

    .price-table { width: 100%;}
    .price-table th, .price-table td { padding: 25px 5px; text-align: left; }
    /* その他調整 */
    .about-flex { display: block; }
    .about-content h2 { font-size: 23px; text-align: center; }
    .contact-inner h2 { font-size: 28px; }
    .contact-inner .desc { font-size: 14px; padding: 0 20px; }
    
    /* 施術メニューレスポンシブ */
    .trial-item { flex-direction: column; text-align: center; padding: 30px; gap: 10px; }
}

@media (max-width: 768px) {
    .logo img { width: 20%; }
    .container { padding: 20px 20px; }
    .hero-copy h1 { font-size: 22px; }
    .footer-flex { flex-direction: column; text-align: center; gap: 40px; }
    .tab-wrapper { flex-wrap: wrap; }
    .tab-btn { flex: 1 1 45%; }
    .price-table { font-size: 13px; }
    .about-flex {margin-bottom: 20px;
}
}