.hero-nav {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 900;
    padding-top: 0;
    height: 100vh;
    overflow: hidden;
}

/* is-open がついたときだけ表示 */
.hero-nav.is-open {
    display: block;
    /* justify-content: center;
    align-items: center; */
}

.hero-nav .container-fluid,
.hero-nav .row {
    height: 100%;
    background-color: rgb(218, 212, 190);
}

.hero-nav .nav-area {
    display: flex;
    overflow-y: auto;
    justify-content: center;
    align-items: center;
}

.hero-nav .image-area {
    overflow-y: auto;
}

/* メニューリスト */
.hero-nav .nav-area ul {
    text-align: center;
}

.hero-nav li + li {
    margin-top: 1rem;
}

.hero-nav a {
    color: #333;
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ハンバーガー：画面サイズ関係なく右上固定 */
.hamburger {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    width: 40px;
    height: 32px;
    border: none;
    background: transparent;
    padding: 0;
}

/* ハンバーガーの3本線 */
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #fff;
    transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease,
        opacity 0.2s ease;
}

/* 上・真ん中・下の位置を指定 */
.hamburger span:nth-child(1) {
    top: 0; /* ★ 追加 */
}
.hamburger span:nth-child(2) {
    top: 50%; /* ★ 追加 */
    transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
    bottom: 0; /* ★ 追加 */
}

.hamburger.is-open span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.carousel-item img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    transform: scale(1.1);
    opacity: 0;
}

/* キャプション全体を左下に固定 */
.carousel-caption-custom {
    position: absolute;
    left: 5%;
    bottom: 5%;
    z-index: 10;
    color: #fff;
    max-width: 90vw;
    opacity: 0;
}

/* 見た目調整（お好みで） */
.carousel-caption-custom h3 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: 'Hannari';
    text-shadow: 0 0 8px #080808;
}

.carousel-caption-custom p {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.7;
    font-family: 'Hannari';
}

/* --- PCレイアウト（md以上） --- */
@media (min-width: 768px) {
    .hero-row {
        min-height: 80vh;
    }

    .hero-nav li + li {
        margin-top: 20px;
    }

    .hero-nav a {
        font-size: 1rem;
    }
}

/* 小さい画面では文字を少し小さくして、画像内に収まりやすく */
@media (max-width: 576px) {
    .carousel-caption-custom {
        left: 5%;
        bottom: 5%;
    }

    .carousel-caption-custom h3 {
        font-size: 1.2rem;
    }

    .carousel-caption-custom p {
        font-size: 0.9rem;
        margin-bottom: 0;
    }
}

/* 営業日 */

#Calender {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示させたいときに付けるクラス */
#Calender.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* カレンダー全体の雰囲気 */
.calendar-wrapper {
    max-width: 900px;
}

/* 年月表示 */
.calendar-year {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
}

.calendar-month {
    font-size: 1.6rem;
    font-weight: 600;
}

/* テーブルレイアウト調整 */
.calendar-table th,
.calendar-table td {
    width: calc(100% / 7);
    vertical-align: top;
    padding: 0.5rem;
}

.calendar-table td.empty {
    background-color: #f8f9fa;
}

/* 各日の中身 */
.calendar-day {
    min-height: 80px; /* マスの高さ */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-date {
    font-weight: 600;
    font-size: 0.95rem;
}

/* 営業・休み・イベントのバッジ */
.calendar-badge-open {
    background-color: #198754; /* Bootstrap success */
}

.calendar-badge-closed {
    background-color: #dc3545; /* danger */
}

.calendar-badge-event {
    background-color: #fd7e14; /* orange-ish */
}

/* 休業日の背景を少しトーンダウン */
.calendar-day.is-closed {
    background-color: #f8d7da; /* 薄い赤 */
    border-radius: 4px;
}

/* 凡例の小さい四角 */
.legend-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

.legend-open {
    background-color: #198754;
}

.legend-closed {
    background-color: #dc3545;
}

.legend-event {
    background-color: #fd7e14;
}

/* スマホ用調整 */
@media (max-width: 576px) {
    .calendar-day {
        min-height: 60px;
    }
    .calendar-month {
        font-size: 1.3rem;
    }
    .calendar-table th,
    .calendar-table td {
        padding: 0.35rem;
    }
}

/* コンセプト */
#Concept {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示させたいときに付けるクラス */
#Concept.is-show {
    opacity: 1;
    transform: translateY(0);
}

.concept .image-area img {
    width: 100%;
    height: 100vh;
    object-fit: cover; /* 画像をトリミングしつつ全体にフィット */
    opacity: 0.6; /* ここで薄くする（0〜1で調整） */
    display: block;
}
/* コンセプト全体の高さをそろえる */
.concept .concept-body {
    min-height: 100vh;
}

/* 右側テキストエリア */
.concept .text-area {
    background-color: rgb(255, 253, 245);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

#Concept.is-show .text-area {
    opacity: 1;
    transform: translateY(0);
}

/* 見出しを縦書きに */
.concept .text-area h3 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 2;
    font-size: 1.2rem;
    font-family: 'Hannari';
}

/* セクション全体を絶対配置の土台に */
.concept {
    position: relative;
}

/* 見出し（01 concept） */
.concept-heading {
    display: flex; /* 念のため flex 明示 */
    align-items: baseline;
    position: absolute;
    top: 3rem;
    left: 2rem;
    z-index: 20;
}

.concept .number {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.concept .text {
    font-size: 1.1rem;
    letter-spacing: 0.3em;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* 本文エリア（前に作っているならそのままでOK） */
.concept-body {
    min-height: 100vh;
}

/* Read More：右下に固定 */
.concept .read-more {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    z-index: 20;
}

.concept .read-more a {
    display: inline-block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-decoration: none;

    border-bottom: 1px solid #333; /* 下線だけボーダー */
    padding-bottom: 0.25rem;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@media (max-width: 767.98px) {
    /* rowを相対配置にして、上にテキストを絶対配置する土台にする */
    .concept .concept-body {
        position: relative;
        min-height: 60vh;
    }

    /* 画像エリアの高さ調整 */
    .concept .image-area {
        height: 60vh;
    }

    .concept .image-area img {
        height: 100%;
    }

    /* テキストを画像の上に重ねる */
    .concept .text-area {
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 と同じ */
        background: rgba(255, 253, 245, 0.6); /* 半透明の背景で読みやすく */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem;
    }

    /* スマホでは横書き＆中央寄せに */
    .concept .text-area h3 {
        writing-mode: horizontal-tb;
        text-align: center;
        line-height: 1.8;
        font-size: 1rem;
    }

    .concept-heading {
        position: static;
        padding: 1.5rem 1.5rem 0;
        justify-content: flex-start; /* 左寄せ */
    }

    .concept .number {
        font-size: 2.2rem;
    }

    .concept .text {
        font-size: 1rem;
    }

    /* 本文コンテンツは上で作った「重ねるレイアウト」があればそのまま */
    .concept-body {
        position: relative;
        min-height: 60vh;
    }

    /* Read More：テキストエリアの下に、右寄せで配置 */
    .concept .read-more {
        position: static; /* 絶対配置を解除して通常フローへ */
        text-align: right;
        padding: 1rem 1.5rem 0;
    }

    .concept .read-more a {
        font-size: 0.85rem;
    }
}

/* ビジュアル */
/* ビジュアル：見出し行を素直に配置 */

.Visual .visual-row {
    opacity: 0;
    transform: translateY(40px); /* 少し下から */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.Visual .visual-row.is-show {
    opacity: 1;
    transform: translateY(0);
}

.Visual {
    background-color: #f4f4f4;
    padding-top: 20px;
}

.Visual .visual-heading {
    position: static;
    margin: 1.5rem 1.5rem 1rem;
}

/* 左側の「02 Visual」を横並びにしてベースライン揃え */
.Visual .visual-heading > .col-auto.d-flex {
    display: flex;
    align-items: baseline; /* ★ここがポイント */
    gap: 0.75rem;
}

/* 番号とタイトル（モバイル基準のサイズ） */
.Visual .number {
    font-size: 2.4rem; /* スマホでは少し小さめ */
    font-weight: 500;
    line-height: 1;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.Visual h2 {
    font-size: 1rem; /* 数字より少し小さめ */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* Read More */
.Visual .read-more a {
    display: inline-block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-decoration: none;
    border-bottom: 1px solid #333;
    padding-bottom: 0.2rem;
}

/* PCサイズ（>=768px）で少し大きく＆高さそろえ */
@media (min-width: 768px) {
    .Visual .visual-heading {
        margin: 1.5rem 1.5rem 1rem;
        align-items: center; /* 行全体の縦位置 */
    }

    .Visual .number {
        font-size: 2.4rem; /* ★PCの方を大きく */
    }

    .Visual .concept.text {
        font-size: 1.1rem;
    }

    .Visual .visual-row {
        height: 60vh;
    }

    .Visual .visual-img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
    }
}

/* スマホサイズ（<768px）：画像は自然な高さ */
@media (max-width: 767.98px) {
    .Visual .visual-row {
        height: auto;
    }

    .Visual .visual-img {
        height: auto;
        width: 100%;
        display: block;
    }
}

/* メニュー */

#Menu {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#Menu .text-area {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
    /* ↑ 0.2s 遅らせて「本体のあとにフワッ」と出るようにしている */
}

#Menu.is-show {
    opacity: 1;
    transform: translateY(0);
}

.menu .image-area img {
    width: 100%;
    height: 100vh;
    object-fit: cover; /* 画像をトリミングしつつ全体にフィット */
    opacity: 0.6; /* ここで薄くする（0〜1で調整） */
    display: block;
}

/* 右側テキストエリア */
.menu .text-area {
    background-color: rgb(255, 253, 245);
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

#Menu.is-show .text-area {
    opacity: 1;
    transform: translateY(0);
}

/* 見出しを縦書きに */
.menu .text-area h3 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 2;
    font-size: 1.2rem;
    font-family: 'Hannari';
}

/* セクション全体を絶対配置の土台に */
.menu {
    position: relative;
}

/* 見出し（01 concept） */
.menu .concept-heading {
    position: absolute;
    top: 3rem;
    left: 2rem;
    z-index: 20;
}

.menu .concept-heading > .col-auto {
    /* 追加 */
    display: flex; /* 修正 */
    align-items: baseline; /* 修正：文字のベースラインで揃える */
    gap: 0.75rem;
}

.menu .number {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.menu .text {
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* 本文エリア（前に作っているならそのままでOK） */
.menu .concept-body {
    min-height: 100vh;
}

/* Read More：右下に固定 */
.menu .read-more {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    z-index: 20;
}

.menu .read-more a {
    display: inline-block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-decoration: none;

    border-bottom: 1px solid #333; /* 下線だけボーダー */
    padding-bottom: 0.25rem;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@media (max-width: 767.98px) {
    /* rowを相対配置にして、上にテキストを絶対配置する土台にする */
    /* .menu .row {
        position: relative;
        min-height: 60vh;
    } */

    .menu .concept-body {
        position: relative; /* 修正 */
        min-height: 60vh; /* 修正 */
    }

    /* 画像エリアの高さ調整 */
    .menu .image-area {
        height: 60vh;
    }

    .menu .image-area img {
        height: 100%;
    }

    /* テキストを画像の上に重ねる */
    .menu .text-area {
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 と同じ */
        background: rgba(255, 253, 245, 0.6); /* 半透明の背景で読みやすく */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem;
    }

    /* スマホでは横書き＆中央寄せに */
    .menu .text-area h3 {
        writing-mode: horizontal-tb;
        text-align: center;
        line-height: 1.8;
        font-size: 1rem;
    }

    .menu .concept-heading {
        position: static;
        padding: 1.5rem 1.5rem 0;
    }

    .menu .concept-heading > .col-auto {
        align-items: baseline;
    }

    .menu .number {
        font-size: 2.2rem;
    }

    .menu .text {
        font-size: 1.2rem;
    }

    /* 本文コンテンツは上で作った「重ねるレイアウト」があればそのまま */
    .menu .concept-body {
        position: relative;
        min-height: 60vh;
    }

    /* Read More：テキストエリアの下に、右寄せで配置 */
    .menu .read-more {
        position: static; /* 絶対配置を解除して通常フローへ */
        text-align: right;
        padding: 1rem 1.5rem 0;
    }

    .menu .read-more a {
        font-size: 0.85rem;
    }
}

/* =========================
   アクセス
   ========================= */

#Access {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.access {
    background-color: rgb(255, 253, 245);
    padding-bottom: 3rem; /* 下にゆとりを持たせる */
    /* height: 80vh; は削除 → コンテンツ量に任せる */
}

/* 見出し（04 Access） */
.access .visual-heading {
    position: static; /* concept セクションの absolute を打ち消す */
    margin: 0 1.5rem 1.5rem;
}

.access .number {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.access .concept.text {
    font-size: 1.1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    font-family: 'Cormorant Infant', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* 右側テキストエリア 共通 */
.access .text-area {
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

#Access.is-show {
    opacity: 1;
    transform: translateY(0);
}

#Access.is-show .text-area {
    opacity: 1;
    transform: translateY(0);
}

/* PC以上：高さをそろえて縦書きに */
@media (min-width: 768px) {
    .access .visual-row {
        min-height: 60vh; /* 好きな高さに調整してOK（固定 height ではなく min-height） */
        align-items: stretch;
    }

    .access .visual-img {
        height: 100%;
        width: 100%;
        object-fit: cover; /* トリミングしつつ枠いっぱいに表示 */
        display: block;
    }

    .access .text-area h3 {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        line-height: 2;
        font-size: 1.2rem;
        font-family: 'Hannari';
    }
}

/* スマホ：1列＆横書きに戻す／自然な高さに */
@media (max-width: 767.98px) {
    .access .visual-row {
        height: auto;
    }

    .access .visual-img {
        width: 100%;
        height: auto; /* 画像の縦横比を保つ */
        display: block;
    }

    .access .text-area {
        padding: 1.5rem;
        align-items: flex-start;
    }

    .access .text {
        padding-top: 2.5rem;
        align-items: flex-end;
    }

    .access .text-area h3 {
        writing-mode: horizontal-tb; /* スマホは横書きの方が読みやすい */
        line-height: 1.8;
        font-size: 1rem;
        font-family: 'Hannari';
    }
}

/* フッター */

/* フッターのリストの点を消す */
.footer-nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* リスト間の余白 */
.footer-nav li {
    margin-bottom: 0.4rem;
}

/* リンクのベーススタイル */
.footer-nav a {
    color: #fff;
    text-decoration: none; /* デフォルトの下線を消す */
    position: relative;
    display: inline-block;
    padding-bottom: 0.1rem;
}

/* 下線用の擬似要素（普段は幅0） */
.footer-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #fff;
    transition: width 0.2s ease;
}

/* ホバーしたときに下線がスッと伸びる */
.footer-nav a:hover::after {
    width: 100%;
}

/* ★ スマホサイズで横並びにする */
@media (max-width: 767.98px) {
    .footer-nav ul {
        display: flex;
        flex-wrap: wrap; /* はみ出したら折り返し */
        gap: 0.75rem 1.5rem; /* 行間・列間の余白 */
        justify-content: center; /* 全体を中央寄せ */
    }

    .footer-nav li {
        margin-bottom: 0; /* 縦方向の余白は不要になるのでリセット */
    }

    /* 上のセクション側に余白を足す例 */
    .concept,
    .Visual {
        padding-bottom: 3rem; /* 絶対配置のテキスト分の“逃げ”を作る */
    }

    /* フッター自体も、ちょっと上にゆとりを作る */
    footer {
        margin-top: 2rem;
    }
}