/*
変数・基本設定
----------------------------------------------------------- */
:root {
    --clr-black: #0B0704;
    --clr-beige: #FFFAF2;
    --clr-white: #ffffff;
    --ff-sans: 'Josefin Sans', sans-serif;
    --transition: 0.3s ease;

    /* フォントウェイトの変数を追加 */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-semi-bold: 600;
}

/* ヘッダーの高さを変数にすると管理が楽です */
:root {
    --header-height-pc: 230px; /* PCのヘッダー高さ */
    --header-height-sp: 90px;  /* スマホのヘッダー高さ */
}

html, body {
    overflow-x: clip;
}
body {
    font-family: 'Josefin Sans', sans-serif;
    color: var(--clr-black);
    background: var(--clr-white);
    line-height: 1.85;
}
section[id] {
    scroll-margin-top: 80px; /* ヘッダーの高さ分だけ余裕を持たせる（最新ブラウザ用） */
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Loading Screen 
----------------------------------------------------------- */
#loading {
    position: fixed;
    inset: 0;
    z-index: 9999; /* 全ての要素の上に配置 */
    background-color: var(--clr-white); /* Kotiのテーマカラー */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1.5s ease, visibility 1.5s ease; /* 消える時のアニメーション */
}

/* 読み込み完了後にJSで付与するクラス */
#loading.is-loaded {
    opacity: 0;
    visibility: hidden;
}

.loading-logo {
    animation: fadeInOut 2s infinite ease-in-out;
}

.loading-icon {
    width: 120px; /* ロゴのサイズ調整 */
    height: auto;
    margin: 0 auto 15px;
}

.loading-text {
    display: block;
    font-family: var(--ff-sans);
    font-size: 20px;
    letter-spacing: 0.2em;
    color: var(--clr-black);
    text-transform: uppercase;
}

/* ロゴの鼓動アニメーション */
@keyframes fadeInOut {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1); }
}

/* ローディング中は背後のスクロールを禁止する（おまじない） */
body.is-loading {
    overflow: hidden;
}

/*
共通レイアウト
----------------------------------------------------------- */
.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 15px;
}

/* ==========================================================================
    スクロールアニメーション（fade-in / slide-in）
   ========================================================================== */

/* 1. 初期状態：透明にして、少し下に配置 */
.fade-in, 
.slide-in {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
    /* transition: 時間(duration) タイミング(easing) 遅延(delay) */
    transition: opacity 1.5s ease-out, transform 1.2s ease-out;
}

/* スライドインだけ、最初は40px下に下げておく */
.slide-in {
    transform: translateY(40px);
}

/* 2. JavaScriptで .is-show クラスがついた時の状態 */
.fade-in.is-show,
.slide-in.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* 元の位置に戻る */
}

/* 
3. 複数要素を順番に出す（ディレイ設定）
同じ階層に並んでいる要素（StaffのカードやMenuの列など）を、
左から右へ、あるいは上から下へ、0.2秒ずつズラして表示します。
*/
.fade-in:nth-child(2), .slide-in:nth-child(2) { transition-delay: 0.2s; }
.fade-in:nth-child(3), .slide-in:nth-child(3) { transition-delay: 0.4s; }
.fade-in:nth-child(4), .slide-in:nth-child(4) { transition-delay: 0.6s; }
.fade-in:nth-child(5), .slide-in:nth-child(5) { transition-delay: 0.8s; }

/* 
4. 特にゆっくり出したい要素用のサブクラス（オプション）
HTMLで <h2 class="fade-in -slow"> と書くと、さらにゆっくり出ます。
*/
.-slow {
    transition-duration: 2.5s !important;
    transition-delay: 0.5s !important;
}

/* 5. アクセシビリティ対応：動きを最小限にする設定のユーザーには即座に表示 */
@media (prefers-reduced-motion: reduce) {
    .fade-in, .slide-in {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
}

/*
header
----------------------------------------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1300; /* 1100から1300に引き上げ */
    background-color: var(--clr-white);
    padding-top: 20px;
    transition: all 0.4s ease;
}


/* 上段：ロゴ中央・予約ボタン右 */
.header__top {
    display: flex;
    align-items: center;
    justify-content: center; /* ロゴを中央に */
    position: relative;
    padding-bottom: 40px;
}

.header__logo a {
    display: block;
    width: 130px; /* ロゴサイズ */
}

.header__reserve {
    position: absolute;
    right: 0;
    background: var(--clr-black);
    color: var(--clr-white);
    padding: 8px 24px;
    font-size: 20px;
    font-weight: var(--fw-light);
    text-decoration: none;
    font-family: var(--ff-sans);
    transition: opacity var(--transition);
    border-radius: 4px;
}

.header__reserve .arrow {
    display: inline-block;
    transition: transform var(--transition);
}

@media (hover: hover) {
    .header__reserve:hover {
    background-color: var(--clr-white);
    color: var(--clr-black);
    border: 1px solid var(--clr-black);
    }
    /* ホバーした時、中の矢印だけ右上に動く */
    .header__reserve:hover .arrow {
        transform: translate(3px, -3px);
    }
}

/* 下段：ナビとSNSの横並び + 上の仕切り線 */
.header__bottom {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央寄せ */
    border-top: 1px solid #ddd; /* 画像にある仕切り線 */
    padding-block: 15px;
    position: relative;
}

.header__nav-list {
    display: flex;
    gap: 60px;
    list-style: none;
}

.header__nav-list a {
    text-decoration: none;
    color: var(--clr-black);
    font-size: 20px;
    font-family: var(--ff-sans);
    font-weight: var(--fw-light);
    position: relative; /* 下線の位置基準にするために必要 */
    display: inline-block;
}

/* 下線の形を作る */
.header__nav-list a::after {
    content: '';
    position: absolute;
    bottom: -4px;   /* 文字の下からの距離 */
    left: 0;
    width: 100%;
    height: 1px;    /* 線の太さ */
    background: var(--clr-black);
    transform: scaleX(0); /* 最初は長さを0にする */
    transform-origin: bottom right; /* 右に消えていく */
    transition: transform 0.3s ease; /* 線の動きの速さ */
}

/* ホバーした時に線を伸ばす */
@media (hover: hover) {
    .header__nav-list a:hover::after {
        transform: scaleX(1); /* 長さを100%にする */
        transform-origin: bottom left; /* 左から伸びてくる */
    }
}

/* ハンバーガーボタン（デフォルトは非表示、スマホ幅で表示） */
.header__hamburger {
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 32px;
    height: 22px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1400; /* ボタン単体でも高い値を持たせておく */
}

.header__hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--clr-black);
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.header__hamburger span:nth-child(1) { top: 0; }
.header__hamburger span:nth-child(2) { top: 10px; }
.header__hamburger span:nth-child(3) { top: 20px; }

/* 開いている時はバツ印に変形 */
.header__hamburger.is-active span:nth-child(1) {
    top: 10px;
    transform: rotate(45deg);
}
.header__hamburger.is-active span:nth-child(2) {
    opacity: 0;
}
.header__hamburger.is-active span:nth-child(3) {
    top: 10px;
    transform: rotate(-45deg);
}

/* SNSアイコン（ナビの右側に配置） */
.header__sns {
    display: flex;
    gap: 15px;
    list-style: none;
    position: absolute; /* 右端に固定 */
    right: 0;
}

.header__sns i {
    font-size: 26px;
    color: var(--clr-black);
    transition: color var(--transition);
}

.header__sns a:hover i {
    color: #999;
}

/* ==========================================================
スクロール後のスタイル (.is-scrolled)
   ========================================================== */
.header.is-scrolled {
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header.is-scrolled .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 両端に広げる */
    height: 80px; /* お好みの高さに調整 */
}

/* 
重要：TopとBottomという「枠」を無視して中身を並べる設定 
*/
.header.is-scrolled .header__top,
.header.is-scrolled .header__bottom {
    display: contents; /* これにより、中のロゴやナビが直接header__innerの子要素として動きます */
}

/* 1. ロゴ：一番左 (order: 1) */
.header.is-scrolled .header__logo {
    order: 1;
    margin-right: 0;
}

.header.is-scrolled .header__logo a {
    width: 80px; /* スクロール後はロゴを小さく */
}

/* 2. ナビ：中央 (order: 2) */
.header.is-scrolled .header__nav {
    order: 2;
    margin-inline: auto; /* 左右に自動マージンを入れて中央固定 */
}

.header.is-scrolled .header__nav-list {
    gap: 60px; /* ナビ同士の間隔 */
}

.header.is-scrolled .header__nav-list a {
    font-size: 20px; /* 少しだけ小さくして整える */
}

/* 3. SNS：ナビの右 (order: 3) */
.header.is-scrolled .header__sns {
    order: 3;
    position: static; /* 絶対配置を解除 */
    display: flex;
    gap: 15px;
    padding: 0;
}

.header.is-scrolled .header__sns i {
    font-size: 22px;
}

/* 4. 予約ボタン：一番右 (order: 4) */
.header.is-scrolled .header__reserve {
    order: 4;
    position: static; /* 絶対配置を解除 */
    margin-left: 40px;
    padding: 8px 20px;
    font-size: 16px;
}

/* 仕切り線や余白の解除 */
.header.is-scrolled .header__bottom {
    border-top: none;
}
.header.is-scrolled .header__top {
    padding-bottom: 0;
}


/* pagetop-btn 
----------------------------------------------------------- */
.pagetop {
    position: fixed;
    right: 30px;      /* 右からの位置 */
    bottom: 30px;     /* 下からの位置 */
    width: 50px;      /* ボタンの幅 */
    height: 50px;     /* ボタンの高さ */
    background-color: var(--clr-black); /* 変数の黒 */
    color: var(--clr-white);           /* 変数の白 */
    border-radius: 50%; /* 正円にする */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 999;
    
    /* 初期状態は非表示（JSでクラスを付けて表示させる） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* 少し下に置いておく */
    transition: all 0.3s ease;
}

/* スクロールして表示された時 */
.pagetop.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pagetop i {
    font-size: 18px; /* 三角（アイコン）のサイズ */
}

/* ホバーアクション */
@media (hover: hover) {
    .pagetop:hover {
        opacity: 0.7;
        transform: translateY(-5px); /* 少し上に跳ねる */
    }
}


/* 
Main-visual
----------------------------------------------------------- */
.main-visual {
    position: relative;
    margin-top: var(--header-height-pc);
    /* margin-topで引いた分と、calcで引く値を一致させる */
    height: calc(100vh - var(--header-height-pc)); 
    overflow: hidden;
    background-color: var(--clr-black);
}

/* Slickの内部要素すべてに高さを継承させる */
.main-visual__slider,
.js-hero-slider,
.js-hero-slider .slick-list,
.js-hero-slider .slick-track,
.main-visual__item {
    height: 100% !important;
}

.main-visual__item picture {
    display: block;
    height: 100%;
}

.main-visual__item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* これで画像が歪まずに枠を埋めます */
}


.js-hero-slider .slick-current {
    z-index: 2;
}

.js-hero-slider .slick-track {
    height: 100%;
}

.js-hero-slider .slick-slide > div {
    height: 100%;
} 

/* 
Concept Section
----------------------------------------------------------- */
.concept {
    background-color: var(--clr-beige); /* 変数のベージュを使用 */
    padding-block: 80px; /* 上下の余白をたっぷり取る */
    text-align: center;
}

.concept__ttl {
    font-family: var(--ff-sans);
    font-size: 36px;
    font-weight: 400; /* Josefin Sansの細めのウェイト */
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    color: var(--clr-black);
}

.concept__text {
    max-width: 800px;
    margin: 0 auto;
}

.concept__text p {
    font-size: 15px;
    font-weight: var(--fw-light);
    line-height: 2.4; /* 行間を広くして読みやすく、美しく */
    margin-bottom: 15px; /* 段落ごとの間隔 */
    color: var(--clr-black);
}

/* 最後の段落はマージン不要 */
.concept__text p:last-child {
    margin-bottom: 0;
}

/* 
Style Summary Section
----------------------------------------------------------- */
.style-section {
    background-color: var(--clr-white);
    padding-block: 100px;
    overflow-x: hidden; /* 画像の拡大などがはみ出さないように */
}

/* タイトルエリア */
.style__header {
    text-align: center;
    margin-bottom: 60px;
}

.style__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 32px;
    font-weight: var(--fw-regular);
}

.style__ttl::before,
.style__ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ddd;
    margin-inline: 40px;
}

/* ★グリッドエリア：画面いっぱいに広げる設定 */
.style__grid {
    display: flex;
    width: 100%;
    margin-bottom: 80px; /* 写真と下のボタンとの間隔 */
    gap: 4px; /* 写真の間の隙間（お好みで 0 にすれば隙間なしになります） */
}

.style__item {
    flex: 1; /* 4枚が均等に画面いっぱいに広がる */
}

.style__img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4; /* 縦長比率を維持 */
}

.style__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* ホバー時の暗転レイヤー */
.style__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.style__name {
    color: var(--clr-white);
    font-family: var(--ff-sans);
    font-weight: var(--fw-light);
    font-size: 24px;
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

/* ホバーアクション */
@media (hover: hover) {
    .style__item a:hover .style__overlay {
        opacity: 1;
    }
    .style__item a:hover .style__name {
        transform: translateY(0);
    }
    .style__item a:hover img {
        transform: scale(1.08);
    }
}

/* ボタンエリア（containerの中なので中央に来る） */
.style__footer {
    text-align: center;
}

.view-more-btn {
    display: inline-block;
    background-color: var(--clr-black);
    color: var(--clr-white);
    padding: 14px 60px;
    font-family: var(--ff-sans);
    font-weight: var(--fw-light);
    font-size: 18px;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid var(--clr-black);
    transition: all var(--transition);
}

.view-more-btn:hover {
    background-color: var(--clr-white);
    color: var(--clr-black);
}

/* Menu Section
----------------------------------------------------------- */
.menu-section {
    background-color: var(--clr-beige);
    padding-block: 120px;
}

.menu__header {
    text-align: center;
    margin-bottom: 80px;
}

.menu__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 36px;
    font-weight: 400;
}

.menu__ttl::before,
.menu__ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #aaa;
    margin-inline: 40px;
}

/* メニューレイアウト：2列 */
.menu__grid {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 120px;
}

.menu__col {
    flex: 1;
}

.menu__category {
    margin-bottom: 60px;
}

/* カテゴリ見出し */
.menu__cat-ttl {
    font-family: var(--ff-sans);
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid var(--clr-black);
    padding-bottom: 10px;
    margin-bottom: 25px;
    color: var(--clr-black);
}

/* メニュー各行 */
.menu__item {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.menu__label {
    flex-shrink: 0;
    font-family: var(--ff-sans);
    color: var(--clr-black);
}

.menu__label small {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    color: #555;
    margin-left: 8px;
    font-weight: 400;
}

/* 注意書き（Treatment等の下の小さい文字） */
.menu__note {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    font-family: "Noto Sans JP", sans-serif;
}

/* 点線 */
.menu__dots {
    flex-grow: 1;
    border-bottom: 1px dotted #bbb;
    margin-inline: 12px;
    position: relative;
    top: -5px; /* 点線の高さを調整 */
}

/* 金額 */
.menu__price {
    flex-shrink: 0;
    width: 90px;       /* ★重要：金額エリアの横幅を固定する（入り切らない場合は100px等に調整） */
    text-align: left;  /* ★重要：エリア内で左揃えにする */
    
    font-family: var(--ff-sans);
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: 400;
    padding-left: 5px; /* 点線との間に少しだけ隙間を作る */
}


/* 動画セクション全体 */
.menu__video-area {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.video-click-wrapper {
    display: block;
    position: relative;
    text-decoration: none;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    overflow: hidden;
}

.video-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.5s ease;
}

/* ホバー時に画像を暗くしてフォーカスさせる */
.video-click-wrapper:hover .video-thumbnail-img {
    transform: scale(1.03);
    filter: brightness(0.5);
}

/* --- 外側の丸（線のみ） --- */
.play-button-outline {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.8); /* 少し透明度を入れた白線 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: all 0.4s ease;
}

/* --- 三角形（▷） --- */
.play-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    /* 
        上下の幅を12px、左の幅（底辺から頂点まで）を20pxに設定
        これで高さ24pxの三角形になります
    */
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff; /* 左側だけ白、あとは透明 */
    
    /* 
        三角形は図形の特性上、真ん中に置くと少し左に寄って見えるため
        margin-leftで視覚的な中心（右側）に少しずらします
    */
    margin-left: 6px; 
    transition: all 0.4s ease;
}

/* --- ホバー時の演出 --- */
/* 丸枠を少し大きく、線を白くする */
.video-click-wrapper:hover .play-button-outline {
    border-color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(255, 255, 255, 0.1); /* ほんの少し光らせる */
}

/* 三角形を少し大きくする */
.video-click-wrapper:hover .play-triangle {
    transform: scale(1.1);
}


/* Staff Section
----------------------------------------------------------- */
.staff-section {
    background-color: var(--clr-white);
    padding-block: 100px;
}

.staff__header {
    text-align: center;
    margin-bottom: 80px;
}

.staff__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 32px;
    font-weight: 400;
}

.staff__ttl::before,
.staff__ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ddd;
    margin-inline: 40px;
}

/* スタッフの並び：2カラム */
.staff__grid {
    display: flex;
    justify-content: center;
    gap: 60px; /* スタッフ間の距離 */
}

.staff__item {
    flex: 0 1 450px; /* 最大幅を450pxに制限して中央に寄せる */
}

/* 写真部分 */
.staff__img {
    margin-bottom: 30px;
    background-color: #f9f9f9;
}

.staff__img img {
    width: 100%;
    height: auto;
    display: block;
    /* 写真のトーンを合わせるための微調整（必要であれば） */
    filter: contrast(1.02);
}

/* テキスト部分 */
.staff__info {
    text-align: left;
}

.staff__job {
    font-family: var(--ff-sans);
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.staff__name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--clr-black);
}

.staff__name small {
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: var(--fw-light);
    color: #666;
    margin-left: 5px;
}

.staff__text {
    font-size: 13px;
    font-weight: var(--fw-light);
    line-height: 1.8;
    color: var(--clr-black);
}


/* Information Section
----------------------------------------------------------- */
.info-section {
    background-color: var(--clr-beige);
    padding-block: 100px;
}

.info__header {
    text-align: center;
    margin-bottom: 80px;
}

.info__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 32px;
    font-weight: 400;
}

.info__ttl::before,
.info__ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #aaa;
    margin-inline: 40px;
}

/* 3カラムグリッド */
.info__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 80px;
}

/* 各記事アイテム */
.info__link {
    text-decoration: none;
    display: block;
    color: var(--clr-black);
}

.info__img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #eee; /* Kotiロゴの背景などのために薄い枠線 */
}

.info__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.info__content {
    text-align: left;
}

.info__date {
    display: block;
    font-family: var(--ff-sans);
    font-size: 13px;
    font-weight: var(--fw-light);
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.info__post-ttl {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

/* ホバーエフェクト */
@media (hover: hover) {
    .info__link:hover img {
        transform: scale(1.08); /* 画像を少しズーム */
    }
    .info__link:hover .info__post-ttl {
        opacity: 0.7;
    }
}

/* ボタンエリア（Styleセクションと共通のクラスを使用） */
.info__footer {
    text-align: center;
}

/* Access Section
----------------------------------------------------------- */
.access-section {
    background-color: var(--clr-white);
    padding-top: 100px;
    padding-bottom: 0;
}

/* タイトルエリア（他のセクションと共通） */
.access__header {
    text-align: center;
    margin-bottom: 80px;
}

.access__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 32px;
    font-weight: 400;
}

.access__ttl::before,
.access__ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ddd;
    margin-inline: 40px;
}

/* ★右端いっぱいまで広げるレイアウト設定 */
.access__wide-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* 
左側：店舗情報
1300px幅のコンテナの左端と、文字の開始位置を合わせる
*/
.access__info-side {
    width: 48%; /* 全体の約半分弱 */
    /* 左側の余白を計算：(全幅 - 1300px)/2 + コンテナ内パディング(15px) */
    padding-left: calc((100% - 1300px) / 2 + 15px);
    padding-right: 60px; /* 地図との隙間 */
    padding-top: 40px;
    padding-bottom: 60px;
}

/* 画面が1300px以下の時は、通常のコンテナ余白(15px)に合わせる */
@media screen and (max-width: 1300px) {
    .access__info-side {
        padding-left: 15px; 
    }
}

.access__list {
    border-top: 1px solid #ddd;
}

.access__item {
    display: flex;
    padding-block: 25px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}

.access__item dt {
    width: 110px;
    font-family: var(--ff-sans);
    font-weight: var(--fw-light);
    color: #888;
    flex-shrink: 0;
}

/* 
右側：地図（画面右端に吸い付く）
*/
.access__map-side {
    flex: 1; 
    min-height: 500px;
    background-color: #eee;
}

.access__map-side iframe {
    width: 100%;
    height: 100%;
    display: block;
    filter: grayscale(0.2);
}


/* Footer
----------------------------------------------------------- */
.footer {
    padding-block: 40px;
    background-color: var(--clr-white);
    text-align: center;
}

.footer__copyright {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.05em;
}


/* 次のページ　Style Page 
----------------------------------------------------------- */
/* Style Page 
----------------------------------------------------------- */
.style-page {
    padding-top: 250px;
    overflow-x: hidden; /* 画像拡大時のはみ出し防止 */
}

/* タイトルエリア（変更なし） */
.style-page__header {
    text-align: center;
    margin-bottom: 80px;
}

.style-page__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 36px;
    font-weight: 400;
}

.style-page__ttl::before,
.style-page__ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ddd;
    margin-inline: 40px;
}

/* ★グリッド：画面いっぱいに広げる設定 */
.style-page__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 横3枚 */
    width: 100%;
    gap: 40px; /* 写真の間の隙間（0にすれば完全に密着します） */
    margin-bottom: 0;
}

.style-page__item {
    width: 100%;
}

.style-page__img-box {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4; /* 全ての写真を同じ比率に統一 */
}

.style-page__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* ホバー時の暗転レイヤー */
.style-page__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left; /* 左揃えにして「：」の位置を合わせる */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 複数行をまとめる箱 */
.style-page__info-wrap {
    transform: translateY(15px); /* まとめて下から浮き上がらせる */
    transition: transform 0.4s ease;
}

/* テキストをまとめるGridの設定 */
.style-page__info-grid {
    display: grid;
    /* 1列目（Style）を55px、2列目（:〜）を自動幅にする */
    grid-template-columns: 55px auto; 
    column-gap: 0; /* 隙間はお好みで調整 */
    row-gap: 5px;  /* 行の間隔 */
    
    transform: translateY(15px);
    transition: transform 0.4s ease;
}

/* ラベル部分（Style） */
.info-label {
    color: var(--clr-white);
    font-family: var(--ff-sans);
    font-weight: var(--fw-light);
    font-size: 24px;
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

/* 値の部分（: Short など） */
.info-value {
    color: var(--clr-white);
    font-family: var(--ff-sans);
    font-weight: var(--fw-light);
    font-size: 24px;
    transform: translateY(10px);
    transition: transform 0.4s ease;
    white-space: nowrap; /* 改行させない */
}

/* ホバーアクション */
@media (hover: hover) {
    .style-page__img-box:hover .style-page__overlay {
        opacity: 1;
    }
    .style-page__img-box:hover .style-page__info-wrap {
        transform: translateY(0);
    }
}

/* 次のページ　Information Archive Page 
----------------------------------------------------------- */
/* Information Archive Page 
----------------------------------------------------------- */
.info-page {
    padding-top: 150px; /* ヘッダーとの干渉防止 */
    background-color: var(--clr-white);
}

.info-page__header {
    text-align: center;
    margin-bottom: 80px;
}

.info-page__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 36px;
    font-weight: 400;
}

.info-page__ttl::before,
.info-page__ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ddd;
    margin-inline: 40px;
}

/* 一覧グリッド：3カラム */
.info-page__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px; /* 上下60px 左右40px */
    margin-bottom: 80px;
}

.info-page__link {
    text-decoration: none;
    color: var(--clr-black);
    display: block;
}

.info-page__img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形 */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.info-page__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.info-page__date {
    display: block;
    font-family: var(--ff-sans);
    font-size: 13px;
    font-weight: var(--fw-light);
    color: #888;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.info-page__post-ttl {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

/* ホバー */
@media (hover: hover) {
    .info-page__link:hover img {
        transform: scale(1.08);
    }
    .info-page__link:hover .info-page__post-ttl {
        opacity: 0.6;
    }
}

/* ページネーション（お好みのスタイルに） */
.pagination {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 100px;
    font-family: var(--ff-sans);
}

.pagination a, .pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    color: var(--clr-black);
    border: 1px solid #ddd;
    font-size: 14px;
    transition: all 0.3s;
}

.pagination .current,
.pagination a:hover {
    background-color: var(--clr-black);
    color: var(--clr-white);
    border-color: var(--clr-black);
}

/* 次のページ　Information Single Page 
----------------------------------------------------------- */
/* Information Single Page 
----------------------------------------------------------- */
.info-single {
    padding-top: 350px; /* 固定ヘッダーに被らないよう余白を確保 */
    padding-bottom: 120px;
    background-color: var(--clr-white);
}

.info-single__header {
    text-align: left;
    margin-bottom: 40px;
}

.info-single__date {
    display: block;
    font-family: var(--ff-sans);
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.info-single__ttl {
    font-size: 20px;
    font-weight: 400;
    color: var(--clr-black);
}

/* 本文テキスト */
.info-single__body {
    margin-bottom: 80px;
}

.info-single__body p {
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 2.2; /* 行間を広くして上品に */
    margin-bottom: 1.8em;
    color: var(--clr-black);
}

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

/* ★3枚並びのギャラリー */
.info-single__gallery.fade-in {
    display: grid !important; /* 強制的にgridを適用 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.info-single__img {
    aspect-ratio: 1 / 1; /* 正方形にする（画像に合わせて調整可） */
    overflow: hidden;
    background-color: #f9f9f9;
    border: 1px solid #eee;
}

.info-single__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 戻るボタン */
.info-single__footer {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 60px;
}

/*
drawer (nav)
----------------------------------------------------------- */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%; /* スマホなら100%の方が綺麗です */
    height: 100vh;
    height: 100dvh;
    background-color: var(--clr-white);
    z-index: 1200; /* 【重要】ヘッダー(1100)より上に設定 */
    padding: 120px 30px 40px; /* 上の余白を少し調整 */
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer__nav-list {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column; /* 縦並びを確定させる */
    align-items: center;    /* 中央寄せ */
    gap: 30px;              /* メニュー間の隙間 */
    padding: 0;
    margin: 0 0 40px;       /* 下に余白 */
}

.drawer__nav-list a {
    text-decoration: none;
    color: var(--clr-black);
    font-size: 24px;        /* スマホで見やすいサイズに */
    font-family: var(--ff-sans);
    font-weight: var(--fw-light);
    display: block;
    width: 100%;
}

.drawer__nav-list li {
    display: block;         /* 横並び設定を解除 */
    width: 100%;
}

.drawer__sns {
    display: flex;
    gap: 20px;
    list-style: none;
}

.drawer__sns i {
    font-size: 26px;
    color: var(--clr-black);
}

.drawer__reserve {
    display: inline-block;
    background: var(--clr-black);
    color: var(--clr-white);
    padding: 10px 30px;
    font-size: 18px;
    font-weight: var(--fw-light);
    text-decoration: none;
    font-family: var(--ff-sans);
    border-radius: 4px;
}

/* ドロワーの背後を暗くするオーバーレイ */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1100; /* ヘッダー・ドロワーよりさらに下 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ドロワーが開いている間は背後のスクロールを禁止 */
body.is-drawer-open {
    overflow: hidden;
}
body.is-drawer-open .header {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
レスポンシブ対応（モバイル / タブレット）
   ========================================================================== */

/* ---------- タブレット〜（960px以下） ---------- */
@media screen and (max-width: 960px) {

    /* 予約ボタンのフォントサイズ調整（デスクトップ用は非表示だが念のため） */
    .pagetop {
        right: 15px;
        bottom: 15px;
        width: 44px;
        height: 44px;
    }

    /* Concept */
    .concept {
        padding-block: 60px;
    }
    .concept__ttl {
        font-size: 28px;
        margin-bottom: 25px;
    }

    /* Style（トップページ内サマリー） */
    .style-section {
        padding-block: 70px;
    }
    .style__ttl {
        font-size: 26px;
    }
    .style__grid {
        flex-wrap: wrap;
    }
    .style__item {
        flex: 1 1 calc(50% - 2px);
    }

    /* Menu */
    .menu-section {
        padding-block: 70px;
    }
    .menu__ttl {
        font-size: 28px;
    }
    .menu__header {
        margin-bottom: 50px;
    }
    .menu__grid {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 60px;
    }

    /* Staff */
    .staff-section {
        padding-block: 70px;
    }
    .staff__ttl {
        font-size: 26px;
    }
    .staff__grid {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
    .staff__item {
        flex: 0 1 100%;
        max-width: 450px;
    }

    /* Information */
    .info-section {
        padding-block: 70px;
    }
    .info__ttl {
        font-size: 26px;
    }
    .info__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 20px;
    }

    /* Access */
    .access-section {
        padding-top: 70px;
    }
    .access__ttl {
        font-size: 26px;
    }
    .access__wide-wrap {
        flex-direction: column;
    }
    .access__info-side {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 30px;
    }
    .access__map-side {
        flex: none; /* flex:1(flex-basis:0%)を無効化 */
        height: 320px;
    }

    .style-page__ttl,
    .info-page__ttl,
    .info-single__header {
        padding-top: 80px;
    }

    /* Style Page */
    .style-page {
        padding-top: 100px;
    }
    .style-page__ttl {
        font-size: 26px;
    }
    .style-page__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Information Archive Page */
    .info-page {
        padding-top: 100px;
    }
    .info-page__ttl {
        font-size: 26px;
    }
    .info-page__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        margin-bottom: 60px;
    }

    /* Information Single Page */
    .info-single {
        padding-top: 120px;
        padding-bottom: 80px;
    }
    .info-single__gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 60px;
    }
}

/* ---------- スマホ（600px以下） ---------- */
@media screen and (max-width: 600px) {

    .container {
        padding-inline: 20px;
    }

    /* Concept */
    .concept__ttl {
        font-size: 24px;
    }
    .concept__text p {
        font-size: 14px;
        line-height: 2.1;
    }

    /* Style（トップページ内サマリー） */
    .style__ttl,
    .style-page__ttl,
    .info-page__ttl,
    .menu__ttl,
    .staff__ttl,
    .info__ttl,
    .access__ttl {
        font-size: 22px;
    }
    .style-page__ttl,
    .info-page__ttl,
    .info-single__header {
        padding-top: 80px;
    }
    .style__ttl::before, .style__ttl::after,
    .menu__ttl::before, .menu__ttl::after,
    .staff__ttl::before, .staff__ttl::after,
    .info__ttl::before, .info__ttl::after,
    .access__ttl::before, .access__ttl::after,
    .style-page__ttl::before, .style-page__ttl::after,
    .info-page__ttl::before, .info-page__ttl::after {
        margin-inline: 20px;
    }
    .style__grid {
        gap: 2px;
    }
    .style__item {
        flex: 1 1 calc(50% - 1px);
    }
    .view-more-btn {
        padding: 12px 40px;
        font-size: 15px;
    }

    /* Menu */
    .menu__item {
        flex-wrap: wrap; /* ラベルが長い場合に折り返す */
        font-size: 13px;
        margin-bottom: 16px;
    }
    .menu__label {
        flex: 1 1 100%; /* ラベルだけで1行を占有 → 中の文字が折り返せる */
        flex-shrink: 1;
        min-width: 0;
        margin-bottom: 4px;
    }
    .menu__dots {
        top: 0; /* 別行になるのでベースライン補正は不要 */
    }
    .menu__price {
        width: 75px;
    }
    .menu__cat-ttl {
        font-size: 18px;
    }
    .menu__video-area {
        padding-inline: 0;
    }

    /* Staff */
    .staff__name {
        font-size: 17px;
    }

    /* Information（トップ）とArchiveページ：スマホは1カラムに */
    .info__grid,
    .info-page__grid,
    .style-page__grid {
        grid-template-columns: 1fr;
    }
    .info-page__grid {
        gap: 40px;
    }

    /* Access */
    .access__item {
        font-size: 13px;
    }
    .access__item dt {
        width: 90px;
    }

    /* Information Single Page */
    .info-single {
        padding-top: 100px;
    }
    .info-single__ttl {
        font-size: 18px;
    }
    .info-single__gallery.fade-in {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .footer {
        padding-block: 30px;
    }
}
/* ==========================================================
スマホ用設定（960px以下はハンバーガーメニューに切り替え）
========================================================== */
@media screen and (max-width: 960px) {
    .header__nav, .header__sns, .header__reserve {
        display: none;
    }
    .header__hamburger {
        display: block;
    }
    /* ナビ・SNSが消えて空になった下段バーは非表示にして高さを詰める */
    .header__bottom {
        display: none;
    }
    .header {
        padding-top: 15px;
    }
    .header__top {
        padding-bottom: 15px;
    }
    .header__logo a {
        width: 100px;
    }
}

@media screen and (max-width: 960px) {
    .main-visual {
        margin-top: var(--header-height-sp);
        height: calc(100svh - var(--header-height-sp)); /* 100svhはスマホのバーを除いた高さ */
    }
}

/* 画面が1300px以下の時は、通常のコンテナ余白(15px)に合わせる */
@media screen and (max-width: 1300px) {
    .access__info-side {
        padding-left: 15px; 
    }
}