@charset "utf-8";

/* universal reset ------------------------- */

pre {
    white-space: pre-wrap!important;
}

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

html {
    height: 100%;
    overflow: auto;
}

body {
    background: #fff;
    color: #3a3a3a;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: "source-han-serif-japanese", serif;
    ;
    position: relative;
    margin: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    box-sizing: border-box;
}

button {
    color: #3a3a3a;
}

img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: #404040;
}

li {
    list-style: none;
}


/* common ------------------------- */

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


/* header ------------------------- */


/* ===== MV基礎はそのまま ===== */

.mv {
    position: relative;
    width: 100%;
    height: 100svh;
    /* fallback */
    height: 100vh;
    overflow: hidden;
    background: #000;
    background: #000 url("../image/top/poster.jpg") center center / cover no-repeat;
}

.mv__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: translateZ(0);
    opacity: 0;
    transition: opacity 1s ease; /* フェードイン */
}
/* 再生開始でフェードイン */
.mv__video.is-loaded {
    opacity: 1;
  }

/* ===== ロゴ箱＝テキストの当たり判定を中央寄せ ===== */

.mv__inner {
    position: absolute;
    bottom: clamp(16px, 8svh, 10%);
    right: clamp(16px, 6vw, 10%);
    width: clamp(240px, 36vw, 640px);
    aspect-ratio: 1220 / 960;
    /* ロゴ実寸比を維持 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* 日本語と英語の余白を詰める */
    color: #fff;
    font-weight: 700;
    text-align: center;
    isolation: isolate;
    /* ロゴとテキストの重なりを安定化 */
    z-index: 1;
}
/* ==========================================
   レスポンシブ時のみMVロゴ中央寄せ
   （既存CSSは変更せず上書き）
========================================== */
@media (max-width: 1024px) {
    .mv__inner {
      top: 50% !important;
      left: 50% !important;
      bottom: auto !important;
      right: auto !important;
      transform: translate(-50%, -50%) !important;
      width: 80% !important;
      aspect-ratio: auto !important;
    }
  }

/* ロゴ背景（透過） */

.mv__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../image/top/main_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* ← 透過度調整 (0.2〜0.3くらいが自然) */
    z-index: 0;
    pointer-events: none;
}


/* テキスト前面 */

.mv__inner>* {
    position: relative;
    z-index: 1;
}


/* サブキャッチ */

.txt01 {
    font-size: clamp(20px, 4vw, 32px);
    line-height: 1.2;
    margin: 0;
}

.txt02 {
    font-size: clamp(36px, 9vw, 72px);
    line-height: 1.1;
    margin: 0;
}

.txt03 {
    font-size: clamp(14px, 3.2vw, 20px);
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
    /* 英語との距離を最小化 */
    letter-spacing: 0.03em;
}

.gradient-text {
    background: linear-gradient(90deg, #ffffff 0%, #a8e6ff 50%, #0098cf 100%);
    -webkit-background-clip: text;
    /* Safari/Chrome必須 */
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* FireFox用 */
    color: transparent;
    /* 念のため */
}


/* ==============================
Header
============================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* デザイン通り薄め */
    z-index: 100;
    background: transparent;
    /* MV上は透明 */
    transition: background 0.3s, box-shadow 0.3s;
}


/* スクロール後のスタイル */

.header.scrolled {
    background: #fff;
}


/* 内部レイアウト */

.header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* 左ロゴ | 中央ナビ | 右アイコン */
    align-items: center;
    height: 80px;
    padding: 0 30px;
}


/* ロゴ */

.header__logo img {
    height: auto;
    width: 180px;
}

.logo-color {
    display: none !important;
}

.logo-white {
    display: block !important;
}

.header.scrolled .logo-white {
    display: none !important;
}

.header.scrolled .logo-color {
    display: block !important;
}


/* ==============================
Navigation
============================== */

.header__nav {
    justify-self: center;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
    font-weight: 500;
}

.header__nav ul {
    display: flex;
    gap: 32px;
}

.header__nav a {
    color: #fff;
    transition: color 0.3s;
}

.header__nav a:hover {
    color: #1b677b;
}

.header.scrolled .header__nav a {
    color: #333;
}


/* 英語＋日本語表記 */

.header__nav_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    letter-spacing: .1rem;
}

.header__nav_en {
    font-size: 14px;
    font-family: serif;
    text-transform: uppercase;
}

.header__nav_ja {
    font-size: 15px;
    font-weight: 700;
}


/* ==============================
Right Icons
============================== */

.header__icons {
    justify-self: end;
    display: flex;
    gap: 28px;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
    font-weight: 500;
}

.header__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    min-width: 56px;
    text-align: center;
}

.header.scrolled .header__icon {
    color: #333;
}

.header__icon img {
    width: 28px;
    height: 28px;
    margin-bottom: 3px;
}


/* アイコン切替 */

.icon-color {
    display: none !important;
}

.icon-white {
    display: block !important;
}

.header.scrolled .icon-white {
    display: none !important;
}

.header.scrolled .icon-color {
    display: block !important;
}


/* アイコン文字色：初期は白 */

.header__icon span {
    color: #fff;
    transition: color 0.3s;
}


/* スクロール後は黒 */

.header.scrolled .header__icon span {
    color: #0098cf;
}


/* ==============================
Hamburger
============================== */

.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 24px;
    cursor: pointer;
    z-index: 200;
    display: none;
    /* PCデフォルト非表示 */
}


/* ====== ハンバーガー初期状態 ====== */


/* MV内（デフォルトは白3本） */

.hamburger span,
.hamburger span::before,
.hamburger span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #fff;
    /* 白 */
    transition: all 0.3s ease;
    left: 0;
}

.hamburger span {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger span::before {
    top: -8px;
}

.hamburger span::after {
    top: 8px;
}


/* スクロール後は黒3本 */

.header.scrolled .hamburger span,
.header.scrolled .hamburger span::before,
.header.scrolled .hamburger span::after {
    background: #191919;
    /* 黒 */
}


/* ====== 開いたとき（X） ====== */


/* 真ん中は透明にして2本だけ残す */

.hamburger.active span {
    background: transparent !important;
}


/* before/after を黒に固定（MV内でもスクロール後でも黒） */

.hamburger.active span::before,
.hamburger.active span::after {
    background: #191919 !important;
}


/* 角度調整でXにする */

.hamburger.active span::before {
    transform: rotate(45deg);
    top: 0;
}

.hamburger.active span::after {
    transform: rotate(-45deg);
    top: 0;
}


/* ==============================
Mega Menu
============================== */

.header__mega {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 420px;
    height: 100%;
    transition: right 0.4s ease;
    z-index: 150;
    padding: 40px 30px;
    overflow-y: auto;
    background: linear-gradient(135deg, #f9f9f9 0%, #dcdcdc 50%, #bfbfbf 100%);
    /* 追加: フッターを最下部に寄せる */
    display: flex;
    flex-direction: column;
}

.header__mega.active {
    right: 0;
}

.header__mega ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 20px;
    margin-bottom: 50px;
    flex-shrink: 0;
}

.header__mega li a {
    font-size: 16px;
    color: #191919;
}

.header__mega li a strong {
    font-weight: 600;
    font-size: 15px;
}

.header__mega li a em {
    font-size: 12px;
    color: #666;
    margin-left: 6px;
}


/* 予約ボタン */


/* ハンバーガーメニューのボタンをテーマカラーに */

.header__mega .menu-btn {
    display: flex;
    /* アイコンとテキスト横並び */
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #0098cf;
    /* テーマカラー */
    border-radius: 40px;
    padding: 12px 18px;
    font-size: 15px;
    margin: 14px 0;
    color: #fff;
    /* 文字は白 */
    font-weight: 600;
    position: relative;
    text-align: left;
    transition: background 0.3s;
}

.header__mega .menu-btn:hover {
    background: #007aa8;
    /* 濃いめの青でホバー */
}

.header__mega .menu-btn img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.header__mega .menu-btn::after {
    content: ">";
    position: absolute;
    right: 18px;
    font-size: 16px;
}


/* お問い合わせ */

.header__mega .mega-contact {
    margin-top: 16px;
    font-size: 14px;
    text-decoration: underline;
    color: #191919;
    display: inline-block;
}


/* フッター（ロゴ＋住所を最下部へ） */

.header__mega .mega-footer {
    margin-top: auto;
    /* ← 最下部に固定 */
    text-align: center;
    font-size: 13px;
    color: #191919;
}

.header__mega .mega-footer img {
    max-width: 180px;
    margin: 0 auto 12px;
    display: block;
}


/* ==============================
表示切り替え PC / SP
============================== */


/* PCデフォルト */

.header__nav,
.header__icons {
    display: flex;
}

.hamburger {
    display: none;
}


/* SP: PCメニューを非表示、ロゴ＋ハンバーガーのみ */

@media (max-width: 1024px) {
    .header__nav,
    .header__icons {
        display: none !important;
        /* ← ここ追加 */
    }
    .hamburger {
        display: block !important;
    }
}


/* USP Section */

.usp {
    width: 100%;
    background-color: #f0ede9;
    /* 背景色 */
    padding: 80px 20px;
}

.usp__inner {
    max-width: 1536px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.usp__image,
.usp__text {
    flex: 1;
    /* 半々に分割 */
    max-width: 50%;
}

.usp__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-width: 420px;
    margin: 0 auto;
}

.usp__text {
    text-align: left;
}

.usp__text h2 {
    font-size: 32px;
    color: #0098cf;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 700;
}

.usp__text p {
    font-size: 16px;
    line-height: 2;
    letter-spacing: .1rem;
    color: #333;
}


/* スマホ対応 */

@media (max-width: 1024px) {
    .usp__inner {
        flex-direction: column;
        text-align: center;
    }
    .usp__image,
    .usp__text {
        max-width: 100%;
    }
    .usp__text {
        text-align: center;
    }
}


/* News Section */

.news {
    width: 100%;
    background-color: #f0ede9;
    /* 背景を全幅 */
    padding: 80px 20px;
}

.news__inner {
    max-width: 1000px;
    /* 中身は最大1000px */
    margin: 0 auto;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: left;
}

.section-title .en {
    color: #0098cf;
    font-size: 28px;
    letter-spacing: 0.15em;
    margin-right: 8px;
}

.section-title .ja {
    font-size: 16px;
    color: #333;
}


.news__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }
  
  .news__item {
    background: #fff;
    padding: 4px 8px;
    border-radius: 8px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  

.news__item img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 20px;
}

.news__item .date {
    font-size: 13px;
    color: #777;
    margin-bottom: 4px;
}

.news__item .text {
    font-size: 15px;
    color: #333;
}

.news__item a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}



.news__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


/* SP対応 */

@media (max-width: 768px) {
    .news__list {
        flex-direction: column;
    }
}


/* パララックスセクション */

.parallax {
    position: relative;
    width: 100%;
    height: 70vh;
    background-image: url("../image/top/parallax.jpg");
    /* ここを正確に！ */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

@media only screen and (max-width: 1366px) {
    .parallax {
      background-attachment: scroll !important;
    }
  }


.parallax__content {
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    /* 少し濃く */
    padding: 40px 60px;
    /* 内側余白を広めに */
    border-radius: 16px;
    max-width: 480px;
    /* コンテンツ幅制限 */
}

.parallax__content h2 img {
    max-width: clamp(200px, 30vw, 320px);
    /* ロゴを大きめに可変 */
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

.parallax__content p {
    font-size: clamp(16px, 2.4vw, 24px);
    /* 文字サイズアップ */
    color: #fff;
    line-height: 1.6;
}


/* 半透明オーバーレイ */

.parallax__overlay {
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    /* うっすら黒背景で文字を読みやすく */
    padding: 40px 60px;
    border-radius: 12px;
}

.parallax__overlay h2 {
    font-size: clamp(28px, 5vw, 48px);
    margin-bottom: 16px;
    font-weight: 700;
}

.parallax__overlay p {
    font-size: clamp(16px, 3vw, 22px);
}


/* ===== FACILITYセクション ===== */

.facility__inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.facility__heading {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: #0098cf;
    letter-spacing: 0.2em;
    margin-bottom: 4px;
}

.facility__sub {
    font-size: 14px;
    color: #555;
    margin-bottom: 60px;
}


/* ===== アイテム部分 ===== */

.facility__item {
    margin-bottom: 80px;
    text-align: left;
}

.facility__imgwrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.facility__imgwrap img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.facility__title {
    position: absolute;
    left: 20px;
    bottom: 0;
    transform: translateY(50%);
    /* ← 半分下に出す */
    font-size: clamp(48px, 7vw, 80px);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #0098cf;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.7), 0 0 24px rgba(255, 255, 255, 0.5);
    line-height: 1;
    z-index: 2;
}
@media (max-width: 768px) {
    .facility__title {
      font-size: clamp(24px, 10vw, 40px) !important;
      letter-spacing: 0.08em !important;
      white-space: nowrap !important; /* 折り返し防止 */
      transform-origin: left center;  /* 左寄せで縮小 */
      text-align: left;
    }
  }

.facility__desc {
    margin-top: 60px;
    /* タイトル半分の余白を確保 */
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    padding-left: 20px;
}
.facility-section__btn {
    text-align: center;
    margin-top: 24px;
  }
  
  .facility-section__btn .info__pdfbtn {
    display: inline-block;
    background: #1b677b;
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.3s ease;
  }
  
  .facility-section__btn .info__pdfbtn:hover {
    background: #0f4e5c;
  }
  

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

.foods__inner {
    max-width: 1000px;
    margin: 0 auto;
}


/* ===== FACILITY ===== */

.facility {
    position: relative;
    background: #f0ede9;
    padding: 80px 20px 200px;
    /* 下に余白を増やす */
    z-index: 1;
}


/* ===== FOODS ===== */

.foods {
    position: relative;
    background: #fff;
    padding: 200px 20px 120px;
    /* 上に余白を増やす */
    z-index: 1;
}
/* ===== FOOD MENU PDFボタン ===== */
.food-menu__pdflink {
    text-align: center;
    margin-bottom: 60px;
}

.food-menu__pdfbtn {
    display: inline-block;
    background: #0098cf;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 34px;
    border-radius: 40px;
    text-decoration: none;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(0, 152, 207, 0.25);
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.food-menu__pdfbtn:hover {
    background: #007aa8;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 152, 207, 0.35);
}

.food-menu__pdfbtn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .food-menu__pdfbtn {
        font-size: 14px;
        padding: 12px 26px;
        border-radius: 30px;
    }
}



/* ===== FOODS スライダー ===== */


/* PC */

.foods-slider {
    position: absolute;
    left: 0;
    width: 60%;
    height: 300px;
    overflow: hidden;
    top: 0;
    transform: translateY(-50%);
    /* facility と foods の境界にまたがる */
    z-index: 10;
}


/* スマホ */

@media (max-width: 768px) {
    .foods-slider {
        width: 100%;
        /* 画面幅いっぱい */
        height: 200px;
        /* 高さ少し低め */
        left: 0;
        /* 左寄せ */
        transform: translateY(-50%);
        /* 境界に半分かぶせる */
    }
    .foods-item {
        width: 240px;
        /* カード幅は固定 */
    }
}

.foods-track {
    display: flex;
    gap: 40px;
    will-change: transform;
}


/* .foods-track {
display: flex;
gap: 40px;
will-change: transform;
animation: slideLoop 30s linear infinite;
} */

.foods-item {
    flex: 0 0 auto;
    width: 320px;
    border-radius: 8px;
    overflow: hidden;
}

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


/* @keyframes slideLoop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
} */

.foods__inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.foods__heading {
    font-size: 32px;
    font-weight: 700;
    color: #0098cf;
    /* 水色 */
    letter-spacing: 0.25em;
    margin-bottom: 6px;
}

.foods__sub {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #333;
}

.foods__desc {
    font-size: 15px;
    line-height: 2;
    color: #444;
}


/* ====== 営業案内セクション ====== */


/* ===== INFO セクション ===== */

.info {
    position: relative;
    background: url("../image/cmn/background.jpg") center/cover no-repeat;
    padding: 120px 20px 0;
    /* 下paddingは削除、footer側に任せる */
    border-radius: 40px 40px 0 0;
    overflow: hidden;
}


/* 上から下へ、黒へのグラデーション */

.info::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
    z-index: 1;
    pointer-events: none;
}


/* 既存の黒オーバーレイは少し薄く */

.info__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    /* ここを薄めに */
    border-radius: 40px 40px 0 0;
    z-index: 1;
}


/* 内部はグラデーションより上に */

.info__inner {
    position: relative;
    max-width: 1460px;
    margin: 0 auto;
    z-index: 2;
    /* ←1→2に修正 */
}


/* .info {
position: relative;
background: url("../image/cmn/background.jpg") center/cover no-repeat;
padding: 120px 20px;
border-radius: 40px 40px 0 0;
}

.info__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
border-radius: 40px 40px 0 0;
}

.info__inner {
position: relative;
max-width: 1460px;
margin: 0 auto;
z-index: 1;
} */


/* ===== 見出し ===== */

.info__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    color: #fff;
}

.info__icon {
    width: 28px;
    height: 28px;
}

.info__heading h2 {
    font-size: 22px;
    font-weight: 700;
}

.info__line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}


/* ===== カード本体 ===== */

.info__card {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    background: #fff;
    border-radius: 14px;
    padding: 40px 50px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}


/* ===== 左右レイアウト ===== */

.info__left {
    flex: 0 0 45%;
    /* 左を少し狭く */
    min-width: 0;
}

.info__right {
    flex: 0 0 50%;
    /* 右を広めに */
    min-width: 0;
    padding-left: 20px;
    box-sizing: border-box;
}


/* ===== 左側テキスト ===== */

.info__row {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 16px 0;
    align-items: flex-start;
}

.info__row:last-child {
    border-bottom: none;
}

.info__row dt {
    width: 120px;
    font-weight: 700;
    color: #333;
    text-align: left;
}

.info__row dd {
    flex: 1;
    line-height: 1.8;
    color: #444;
    font-size: 14px;
    text-align: left;
}

.info__row small {
    font-size: 12px;
    color: #777;
}


/* ===== 右側（混雑状況） ===== */

.info__right h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: left;
}

.chart-block {
    margin-bottom: 28px;
}

.chart-block h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
    color: #333;
}


/* ===== グラフ本体 ===== */

.chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100px;
    border-bottom: 1px solid #ddd;
    padding: 0 2px;
    margin-bottom: 6px;
}

.bar {
    flex: 1;
    max-width: 8px;
    /* 細めにして本数が収まるように */
    margin: 0 1px;
    background: #0098cf;
    border-radius: 2px 2px 0 0;
    transition: background 0.2s;
}


/* ===== 横ラベル ===== */

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #666;
    letter-spacing: -0.5px;
}


/* タブレット以下 */

@media (max-width: 1024px) {
    .info__card {
        flex-direction: column;
        padding: 30px 24px;
    }
    .info__left,
    .info__right {
        flex: 1 1 auto;
        width: 100%;
        padding-left: 0;
    }
    .info__row dt {
        width: 100px;
        font-size: 13px;
    }
    .info__row dd {
        font-size: 13px;
    }
    .info__right h3 {
        margin-top: 24px;
        text-align: center;
    }
    .chart {
        height: 80px;
    }
    .bar {
        max-width: 6px;
    }
    .chart-labels {
        font-size: 9px;
    }
}


/* スマホ以下 */

@media (max-width: 600px) {
    .info {
        padding: 80px 16px;
    }
    .info__heading {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .info__icon {
        width: 22px;
        height: 22px;
    }
    .info__heading h2 {
        font-size: 18px;
    }
    .info__line {
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.5);
    }
    .info__card {
        padding: 20px 16px;
        gap: 24px;
    }
    .info__row {
        flex-direction: column;
        padding: 12px 0;
    }
    .info__row dt {
        width: 100%;
        margin-bottom: 4px;
        font-size: 13px;
    }
    .info__row dd {
        font-size: 13px;
    }
    .chart {
        height: 70px;
    }
    .bar {
        max-width: 5px;
        margin: 0 0.5px;
    }
    .chart-labels {
        font-size: 8px;
    }
}


/* Google Map */

.info__map {
    margin-top: 40px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.info__map iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}


/* ===== footer全体 ===== */

.footer {
    width: 100%;
    color: #fff;
    background: #000;
    font-family: "Noto Sans JP", sans-serif;
}


/* ===== 上部フッター ===== */

.footer-top {
    padding: 50px 20px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-top__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-logo img {
    height: 36px;
    filter: brightness(0) invert(1);
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-nav a:hover {
    opacity: 0.7;
}

.footer-sns {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-sns img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

.footer-sns a:hover img {
    opacity: 0.7;
}

.footer-bottom {
    background: #000;
    color: #fff;
    padding: 40px 20px 20px;
}

.footer-bottom__inner {
    display: flex;
    justify-content: center;
    /* 中央寄せ */
    align-items: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.footer-bottom__logo img {
    height: 36px;
    width: auto;
    display: block;
}

.footer-company {
    display: grid;
    grid-template-columns: auto 1fr;
    /* 左ラベル, 右本文 */
    gap: 6px 16px;
    /* 行の間, 列の間 */
    align-items: start;
    font-size: 13px;
    line-height: 1.8;
    max-width: 1000px;
    /* 中央寄せの制御 */
    margin: 0 auto;
}

.footer-company p {
    margin: 0;
    display: contents;
    text-align: left;
    /* grid の中で p はラッパーにしない */
}

.footer-company strong {
    font-weight: 700;
    white-space: nowrap;
    /* 改行させない */
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    /* 縦線 */
    padding-right: 8px;
}

.copyright {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

/* ===== 備品PDFボタン ===== */
.info__pdfbtn {
    display: inline-block;
    background: #0098cf;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}

.info__pdfbtn:hover {
    background: #007aa8;
    transform: translateY(-2px);
}

.info__pdfbtn:active {
    transform: translateY(0);
}


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

@media (max-width: 768px) {
    .footer-top__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-nav ul {
        justify-content: center;
    }
    .footer-bottom__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-company p {
        justify-content: center;
    }
    .footer-company .label {
        border: none;
        padding-right: 0;
        margin-right: 4px;
        width: auto;
    }
}


/* ===== 下層ページMV（全画面画像＋暗く調整） ===== */

.sub-mv.full {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
}

.sub-mv__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

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


/* ===== ブラー解除エフェクト ===== */

.mv-blur {
    filter: blur(20px);
    opacity: 0.6;
    animation: blurFade 1.5s ease forwards;
    will-change: filter, opacity;
}

@keyframes blurFade {
    100% {
        filter: blur(0);
        opacity: 1;
    }
}


/* ===== オーバーレイ（暗め） ===== */

.sub-mv.full::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}


/* ===== テキスト部分 ===== */

.sub-mv__inner {
    position: absolute;
    bottom: 8%;
    left: 6%;
    z-index: 2;
    color: #fff;
    text-align: left;
}

.sub-mv__title {
    font-size: clamp(28px, 6vw, 56px);
    font-weight: 700;
    margin-bottom: 6px;
}

.sub-mv__subtitle {
    font-size: clamp(14px, 3vw, 22px);
    font-weight: 500;
    color: #a8e6ff;
    letter-spacing: 0.15em;
}


/* ===== パンくずリスト（オシャレ版） ===== */

.breadcrumb {
    width: 100%;
    background: #f8f8f8;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    /* 細い仕切り */
}

.breadcrumb__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: 6%;
    margin-right: auto;
    max-width: calc(100% - 12%);
    padding: 12px 0;
}

.breadcrumb a {
    color: #0098cf;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: all 0.3s;
}

.breadcrumb a:hover {
    color: #006d92;
    text-decoration: underline;
}

.breadcrumb .sep {
    color: #aaa;
    /* 少し淡いグレー */
    font-size: 13px;
    /* 小さめで主張を抑える */
    margin: 0 6px;
}

.breadcrumb .current {
    color: #555;
    font-weight: 600;
}


/* ホバー時に下線アニメーション */

.breadcrumb a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #0098cf, #a8e6ff);
    transition: width 0.3s;
}

.breadcrumb a:hover::after {
    width: 100%;
}


/* スマホ */

@media (max-width: 600px) {
    .breadcrumb {
        font-size: 12px;
    }
    .breadcrumb__inner {
        margin-left: 16px;
        max-width: calc(100% - 32px);
        padding: 8px 0;
    }
}





/* ===== 営業案内カード ===== */

.notice-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 10px;
    overflow: visible;
    /* ← はみ出した✗を隠さない */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    max-width: 380px;
    font-size: 14px;
    z-index: 9999;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}


/* hover時に浮かせる */

.notice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/* 左側（日付・営業中） */

.notice-card__left {
    background: #444;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 140px;
}

.notice-card__left .date {
    font-weight: 600;
    margin-bottom: 6px;
}

.notice-card__left .status {
    font-size: 13px;
    background: #0098cf;
    /* テーマカラー */
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    display: inline-block;
    color: #fff;
}

.notice-card__left .status.closed {
    background: #dc3545;
    /* 営業終了は赤 */
}


/* 右側（営業時間） */

.notice-card__right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 18px;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
}


/* ✗ボタン（角の中心に揃える） */
.notice-card__close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background: #fff;
    border: 2px solid #666;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    z-index: 10000;
}

/* 中のアイコンは削除して、擬似要素でバツ線を描く */
.notice-card__close i {
    display: none !important;
}

/* バツ線 */
.notice-card__close::before,
.notice-card__close::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    background-color: #000;
    border-radius: 1px;
    transition: background-color 0.2s;
}

.notice-card__close::before {
    transform: rotate(45deg);
}

.notice-card__close::after {
    transform: rotate(-45deg);
}

/* hover時 */
.notice-card__close:hover {
    border-color: #1b677b;
    background: #f8f8f8;
}

.notice-card__close:hover::before,
.notice-card__close:hover::after {
    background-color: #1b677b;
}




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

@media (max-width: 768px) {
    .notice-card {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 15px;
        width: 90%;
        max-width: 320px;
    }
    .notice-card:hover {
        transform: translateX(-50%) translateY(-4px);
    }
}


/* ===== 下層ページ共通コンテンツエリア ===== */

.sub-content {
    width: 100%;
    /* 横幅100%に */
    padding: 80px 0;
    /* 背景を全幅で敷くため左右paddingは不要 */
    background: #fff;
    /* 背景は全幅で適用される */
}

.sub-content__inner {
    max-width: 1000px;
    /* 中身は1000pxに制限 */
    margin: 0 auto;
    /* 中央寄せ */
    padding: 0 20px;
    /* 内側余白（スマホ対策） */
    text-align: left;
}


/* お知らせページ専用 */

#news-page {
    background: #f0ede9;
}


/* ===== 下層ページ共通 見出し ===== */

.sub-content__heading {
    margin-bottom: 40px;
    text-align: left;
}

.sub-content__heading.center {
    text-align: center;
}

.sub-content__title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    color: #0098cf;
    margin-bottom: 6px;
}

.sub-content__subtitle {
    font-size: 13px;
    font-weight: 600;
    color: #777;
    letter-spacing: 0.15em;
}


/* ===== ニュース詳細 ===== */

.news-detail__title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    color: #0098cf;
    margin-bottom: 10px;
}

.news-detail__date {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.news-detail__thumb {
    margin-bottom: 24px;
}

.news-detail__thumb img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    display: block;
}

.news-detail__body {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 40px;
}

.news-detail__body p {
    margin-bottom: 16px;
}

.news-detail__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.news-detail__nav a {
    font-size: 14px;
    font-weight: 600;
    color: #0098cf;
    text-decoration: none;
    transition: color 0.3s;
}

.news-detail__nav a:hover {
    color: #006d92;
}

.news-detail__nav .back {
    margin: 0 auto;
}


/* ===== 施設セクション ===== */

#facility-page .facility-section {
    width: 100%;
    position: relative;
    background: #fff;
    padding: 80px 20px;
}


/* 区切り線：左端から inner の右端まで */


/* 区切り線：左端から inner の右端まで（余白付き） */


/* PC: 1000px幅の右端で止める */

@media (min-width: 1001px) {
    #facility-page .facility-section::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: calc((100% - 1000px) / 2);
        /* ← innerの右端で止める */
        height: 1px;
        background: #d1d1d1;
    }
}


/* SP/タブレット: 少し余白を残す */

@media (max-width: 1000px) {
    #facility-page .facility-section::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 5%;
        /* ← 画面幅の5%分あける（自然な余白） */
        height: 1px;
        background: #d1d1d1;
    }
}

.facility-section__inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-bottom: 40px;
    /* 区切り線の余白 */
}

.facility-section__title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    margin-bottom: 6px;
}

.facility-section__catch {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.facility-section__desc {
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
    margin-top: 20px;
    color: #333;
}


/* ===== スライダー ===== */

.facility-slider {
    margin-bottom: 24px;
}


/* メイン画像 */

.facility-slider__main img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}


/* サムネイル */

.facility-slider__thumbs {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    /* 左寄せ */
    margin-top: 12px;
}

.facility-slider__thumbs img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s;
}

.facility-slider__thumbs img.active,
.facility-slider__thumbs img:hover {
    opacity: 1;
    border: 2px solid #0098cf;
    transform: scale(1.05);
}


/* タブレット以下 */

@media (max-width: 900px) {
    .facility-slider__thumbs img {
        width: 80px;
        height: 80px;
    }
}


/* スマホ（横幅狭い時） → 横スクロールに */

@media (max-width: 600px) {
    .facility-slider__thumbs {
        flex-wrap: nowrap;
        /* 折り返さない */
        overflow-x: auto;
        /* 横スクロール */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox: スクロールバー非表示 */
    }
    .facility-slider__thumbs::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari: スクロールバー非表示 */
    }
    .facility-slider__thumbs img {
        flex: 0 0 auto;
        /* 横スクロール用に固定幅 */
        width: 70px;
        height: 70px;
    }
}


/* ===== FOOD ABOUT セクション ===== */

.food-about {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin: 270px auto 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
}

.food-about__body {
    position: relative;
    flex: 0 1 50%;
    width: 50%;
    height: auto;
}

.sectionlabel {
    font-size: clamp(22px, 4vw, 32px);
    color: #0098cf;
    letter-spacing: .1rem;
    font-weight: 300;
}

.food-about__body__content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 585px;
    height: auto;
    padding: 0 30px 0 80px;
    margin: 0 0 0 auto;
    text-align: left;
}

.food-about__body__content p {
    font-size: 30px;
    line-height: 60px;
    letter-spacing: .15em;
    margin: 106px 0 82px;
    font-family: harenosora, serif;
    font-weight: 400;
    font-style: normal;
}

body.loading_harenosola .food-about__body__content p {
    color: rgba(0, 0, 0, 0)!important;
}

.food-about__visual {
    position: relative;
    flex: 0 1 50%;
    width: 50%;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
}

.food-about__visual.scrollFx {
    overflow: visible;
}

.food-about__visual.scrollFx:before {
    display: none;
}

.food-about__visual__img {
    flex: 0 1 50%;
    width: 50%;
    height: auto;
}

.food-about__visual__img div {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 150%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}


/* 背景画像指定（差し替え可） */

.food-about__visual__img:first-child div {
    margin-top: 25%;
    background-image: url("../image/food/intro01.jpg");
}

.food-about__visual__img:nth-child(2) div {
    background-image: url("../image/food/intro02.jpg");
}

.food-about__visual.scrollFx.appear .food-about__visual__img:first-child div:before {
    transition-delay: .25s;
}

.food-about__visual.scrollFx.appear .food-about__visual__img:nth-child(2) div:before {
    transition-delay: .45s;
}


/* 初期状態（透明・縮小） */

.scrollFx {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s ease-out;
}


/* 表示時（共通） */

.scrollFx.appear {
    opacity: 1;
    transform: scale(1);
}


/* 左右で遅延をつける */

.food-about__visual__img:nth-child(1) .scrollFx {
    transition-delay: 0.2s;
}

.food-about__visual__img:nth-child(2) .scrollFx {
    transition-delay: 0.5s;
}


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

@media (max-width: 1023px) {
    .food-about__body__content {
        max-width: 545px;
        padding: 0 30px 0 40px;
    }
    .food-about__body__content p {
        margin: 50px 0;
        font-size: 27px;
        line-height: 54px;
        letter-spacing: .15em;
    }
}

@media (max-width: 767px) {
    .food-about {
        width: calc(100% - 64px);
        margin: 86px auto 0;
        display: block;
    }
    .food-about__body,
    .food-about__visual {
        width: 100%;
    }
    .food-about__body__content {
        position: relative;
        padding: 37px 0 0;
        max-width: 100%;
    }
    .food-about__body__content .sectionlabel {
        position: absolute;
        left: 0;
        top: 0;
    }
    .food-about__body__content:before {
        content: "";
        display: block;
        width: 100%;
        height: 0;
        padding-top: 87.5%;
    }
    .food-about__body__content p {
        font-size: 18px;
        line-height: 36px;
        letter-spacing: .15em;
        margin: 20px 0 30px;
    }
    .food-about__body__content p br {
        display: none;
    }
    .food-about__body__content a {
        display: block;
        margin: 0 auto;
    }
    .food-about__visual {
        position: absolute;
        top: 37px;
        left: 0;
    }
}


/* ===== FOOD MENU セクション ===== */

.food-menu {
    margin-top: 100px;
    width: 100%;
    padding: 80px 20px;
    background: #f0ede9;
    /* 背景色 */
}

.food-menu__inner {
    max-width: 1440px;
    margin: 0 auto;
}

.food-menu__title {
    font-size: 32px;
    font-weight: 700;
    color: #0098cf;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
}


/* ===== タブボタン ===== */


/* ===== タブ全体 ===== */

.food-menu__tabs {
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto 50px;
    background: #f3f3f3;
    /* 薄グレー背景 */
    border-radius: 30px;
    padding: 6px;
}


/* ===== タブボタン ===== */

.tab-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 30px;
    background: transparent;
    font-weight: 700;
    color: #777;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 15px;
}


/* ホバー時 */

.tab-btn:hover {
    color: #0098cf;
}


/* アクティブ時 */

.tab-btn.active {
    background: #0098cf;
    /* サイトカラー */
    color: #fff;
    /* 白文字 */
    box-shadow: 0 4px 12px rgba(0, 152, 207, 0.3);
    /* ふんわり影 */
}


/* ===== タブコンテンツ ===== */

.food-menu__content {
    display: none;
    animation: fadeIn 0.6s ease;
}

.food-menu__content.active {
    display: block;
}

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


/* ===== メニューカード ===== */

.food-menu__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.food-menu__item {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.food-menu__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}


/* ===== 画像部分 ===== */

.food-menu__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* ← 正方形から横長に変更 */
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 16px;
}

.food-menu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 中央でトリミング */
    display: block;
}

.food-menu__item:hover .food-menu__thumb img {
    transform: scale(1.05);
}


/* ===== テキスト部分 ===== */

.food-menu__name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #333;
}

.food-menu__price {
    font-size: 16px;
    font-weight: 600;
    color: #0098cf;
    margin-bottom: 12px;
}

.food-menu__desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 10px;
}


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

@media (max-width: 1024px) {
    .food-menu__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .food-menu__list {
        grid-template-columns: 1fr;
    }
    .food-menu__title {
        font-size: 26px;
    }
    .tab-btn {
        padding: 8px 20px;
        font-size: 14px;
    }
}


/* ===== 忘れ物専用MV（改善版） ===== */


/* ===== 忘れ物専用MV（レスポンシブ対応） ===== */

.lost-mv {
    position: relative;
    width: 100%;
    height: 280px;
    /* デフォルト：スマホ用 */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 6% 32px;
    text-align: left;
    background: linear-gradient(160deg, #007aa8 0%, #0098cf 60%, #62b9e7 100%);
    background-size: cover;
    color: #fff;
    overflow: hidden;
}

.lost-mv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.lost-mv .sub-mv__inner {
    position: relative;
    z-index: 2;
    color: #fff;
}

.lost-mv .sub-mv__title {
    font-size: clamp(22px, 4vw, 36px);
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.lost-mv .sub-mv__subtitle {
    font-size: clamp(12px, 2.6vw, 18px);
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #e7f1f2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}


/* タブレット以上（768px～） */

@media (min-width: 768px) {
    .lost-mv {
        height: 340px;
        /* タブレット用に少し高め */
        padding-bottom: 40px;
    }
}


/* PC（1025px～） */

@media (min-width: 1025px) {
    .lost-mv {
        height: 420px;
        /* PCではしっかり高さを取る */
        padding-bottom: 50px;
    }
}


/* ===== 忘れ物専用フォーム ===== */


/* ===== セクション全体 ===== */

.white-bg {
    background: #fff;
    padding: 60px 20px;
}

.lost-contact__inner {
    max-width: 1000px;
    margin: 0 auto;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}

.lost-contact__title {
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
}

.lost-contact__desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}


/* ===== グリッドレイアウト ===== */

.lost-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.required {
    color: #c0392b;
    margin-left: 4px;
    font-size: 13px;
}


/* ===== 入力欄（薄い青背景・ボーダーなし） ===== */

.lost-form-grid input,
.lost-form-grid textarea {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 6px;
    background: #f0f7fb;
    /* 薄い青 */
    font-size: 15px;
    transition: box-shadow 0.3s;
}

.lost-form-grid input:focus,
.lost-form-grid textarea:focus {
    box-shadow: 0 0 0 2px rgba(0, 152, 207, 0.25);
    outline: none;
}


/* ===== 忘れ物内容（フォーム幅いっぱい） ===== */

#desc {
    width: 100%;
    resize: vertical;
    /* 縦方向だけ伸縮OK */
}


/* ===== 写真添付（フラットな全幅ボタン） ===== */

.form-group input[type="file"] {
    display: none;
    /* デフォルトのinputを隠す */
}

.file-label {
    display: block;
    width: 100%;
    /* 横幅いっぱい */
    background: #f0f7fb;
    /* 入力欄と同じ淡い青 */
    color: #333;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s;
}

.file-label:hover {
    background: #e1eff7;
    /* 少し濃い水色に */
}

.file-name {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #555;
}


/* ===== 送信ボタン ===== */

.form-group.center {
    text-align: center;
}

.form-btn {
    background: #0098cf;
    color: #fff;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.3s;
}

.form-btn:hover {
    background: #007aa8;
}


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

@media (max-width: 768px) {
    .lost-form-grid {
        grid-template-columns: 1fr;
    }
    #desc {
        max-width: 100%;
    }
}