/* =========================================================
   Cafe - liten knopp  (full stylesheet)
   Palette: Deep Green × Gold × Paper White
========================================================= */

/* ===== Cafe New Color Theme - Soft Mint Green ===== */

:root{
  --bg-mint:#91C4C3; 
  --bg-mint-dark:#6BA7A6; /* 少し濃い陰色 */

  --green: #0e5b5f;
  --green-700:#0a4a4e;
  --green-600:#0c5357;
  --green-500:#13747f;

  --paper:#ffffff;
  --ink:#233130;
  --gold:#b69045; /* 少し濃く調整 */
  --shadow: 0 12px 26px rgba(0,0,0,.15);
  --shadow-soft: 0 8px 18px rgba(0,0,0,.10);
}

/* =========================================================
   Base
========================================================= */
body.cafe-page{
  background: linear-gradient(180deg, var(--bg-mint) 0%, var(--bg-mint-dark) 100%);
  color: var(--ink);
}

#container{
    padding-top: 54px;
}

/* ページの左右余白を柔らかめに */
.cafe-page #container,
.cafe-page .content { max-width: 980px; margin: 0 auto; }

/* カード（全セクションに使用） */
.cafe-card{
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.8rem;
  margin: 1.8rem auto 2.2rem;
}

/* セクション見出し（カード内） */
.cafe-section-title{
  position: relative;
  font-weight: 700;
  margin: .2rem 0 1.0rem;
  color: var(--green-700);
  font-size: clamp(1.28rem, 2.2vw, 1.6rem);
  padding-bottom: .35rem; /* ゴールド線の余白 */
}
.cafe-section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 140px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}

/* 画像スライダー/ヒーローがある場合の余白補正だけ */
.cafe-hero{ margin: 0 auto 1.2rem; }

/* =========================================================
   Page In-page Navigation (sticky tabs)
   - 白背景 + 透過 + blur
   - top: 46px（ご指定）
========================================================= */
.cafe-nav{
  position: sticky;
  top: 46px;
  z-index: 999;
  display: flex;
  justify-content: center;
  gap: .8rem;
  padding: .6rem .8rem;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(0,0,0,.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.cafe-nav a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem 1.0rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid var(--green-200);
  border-radius: 9999px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.cafe-nav a:hover{
  transform: translateY(-2px);
  background: var(--green-700);
  color: #fff;
  border-color: var(--green-700);
  box-shadow: var(--shadow-soft);
}

/* ナビ内リンクをアイコン付きで横並び（オプション） */
.hmbmenu-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.hmbmenu-nav ul li {
  flex: 0 1 45%;
  margin: 4px;
}
.hmbmenu-nav ul li a {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}

/* ================================
   スマホ用ナビゲーション調整
   ================================ */
@media (max-width: 768px) {
  .cafe-nav{ flex-wrap: wrap; gap: .5rem; padding: .5rem .6rem; top:0px; }
  
  /* メニュー全体（開いた状態） */
  nav#site-navigation,
  .hmbmenu-nav {
    padding: 10px 0;
  }

  /* メニューリンク */
  .hmbmenu-nav ul li a,
  #site-navigation ul li a {
    display: block;
    padding: 10px 16px;        /* ← 以前は20〜30pxあることが多い */
    font-size: 15px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    text-align: center;
    color: #fff;
    transition: background 0.3s ease;
  }

  /* 最後のリンクだけボーダーを消す */
  .hmbmenu-nav ul li:last-child a,
  #site-navigation ul li:last-child a {
    border-bottom: none;
  }

  /* ホバーやタップ時の視認性 */
  .hmbmenu-nav ul li a:hover,
  #site-navigation ul li a:hover {
    background: rgba(255,255,255,0.1);
  }

  /* メニュー間隔を詰める */
  .hmbmenu-nav ul li,
  #site-navigation ul li {
    margin: 2px 0;    /* ← 以前は10px前後あるケースが多い */
  }

  /* ボタン部分（開閉アイコン）の調整 */
  .hmbmenu-btn,
  .menu-toggle {
    padding: 6px 10px;
    line-height: 1;
  }

  /* ナビが開いた時のスクロール余白除去 */
  body.menu-open {
    overflow: hidden;
  }
}


/* =========================================================
   News（#news 専用・このブロックだけで完結）
   HTMLは現状のまま（ulに日付<li>＋タイトル<li>）でOK。
   将来、カテゴリのpill（.post_category_ttl 等）が
   中間<li>に来ても体裁が崩れないよう対応済み。
========================================================= */

/* セクション余白 */
#news.cafe-card {
  padding: 1.6rem 1.6rem 1.2rem;
  border-radius: 12px;
}

/* 見出し */
#news .cafe-section-title {
  margin-bottom: 1rem;
}

/* リスト全体の枠線と内側余白 */
#news .content_list {
  border-top: 2px solid var(--green-500, #13747f);
  border-bottom: 2px solid var(--green-500, #13747f);
  padding: .25rem 0;
  background: transparent;
}

/* 1件（1行）ごとの並び */
#news .content_list ul {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: .75rem 0;
  border-bottom: 1px dotted rgba(0,0,0,.12);
}
#news .content_list ul:last-child { border-bottom: none; }

/* ───────── 日付バッジ（先頭の<li>）───────── */
#news .content_list ul li:first-child {
  background: var(--green-700, #0f5e66);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  min-width: 8em;              /* 横幅が一定で並びが安定 */
  text-align: center;
  letter-spacing: .02em;
  flex: 0 0 auto;
}
#news .content_list ul li:first-child b { font-weight: 700; }

/* ───────── カテゴリPill（中間<li>に入る場合）─────────
   例）<li><p class="post_category_ttl">News</p></li>
*/
#news .content_list .post_category_ttl,
#news .content_list .post_category_ttl_tsubomi {
  margin: 0;
  padding: .15rem .6rem;
  line-height: 1.9;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  text-align: center;
  display: inline-block;
  color: #fff;
  background: var(--green-700, #0f5e66);
}
#news .content_list .post_category_ttl_tsubomi { background: #d05291; } /* 既存ピンク */

/* ───────── タイトル（末尾の<li>内リンク）───────── */
#news .content_list ul li:last-child a {
  color: #0a3f3f;       /* 読みやすい濃いグリーン */
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
  display: inline-block;
}
#news .content_list ul li:last-child a:hover {
  color: var(--gold, #b88b2e);  /* カフェゴールド */
  text-decoration: underline;
  transform: translateX(1px);
}

/* ───────── レスポンシブ調整 ───────── */
@media (max-width: 680px) {
  #news .content_list ul { 
    flex-wrap: wrap; 
    gap: 8px 10px;
    padding: .65rem 0;
  }
  #news .content_list ul li:first-child {
    min-width: 7.2em; /* モバイルで少し短く */
  }
  #news .content_list .post_category_ttl,
  #news .content_list .post_category_ttl_tsubomi {
    line-height: 1.8;
    font-size: .7rem;
  }
}

/* ==========================
   MENU（#menu）見た目強化
   HTMLは現状のままでOK
   メニュー表示（画像 + 商品名 + 説明）
========================== */

/* 旧スタイルの影響を無効化（安全網） */
#menu.cafe-card .menu-item{
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* カードのグリッド */
#menu.cafe-card .menu-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
@media (min-width: 860px){
  #menu.cafe-card .menu-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1枚のカード */
#menu.cafe-card .menu-card{
  background: #ffffff;
  border: 1px solid rgba(19,116,127,.12);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(16,60,62,.10);
  padding: 12px;
  overflow: hidden;
}

#menu.cafe-card .menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16,60,62,.15);
  transition: transform .3s ease, box-shadow .3s ease;
}


/* 画像（WPの figure をそのまま使用） */
#menu.cafe-card .menu-card figure{
  margin: 0;                     /* WPのデフォルト余白を打ち消し */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(19,116,127,.12);
}
#menu.cafe-card .menu-card figure img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}
@media (hover: hover){
  #menu.cafe-card .menu-card figure:hover img{
    transform: scale(1.03);
    filter: saturate(1.03) contrast(1.02);
  }
}

/* 商品名（<p><strong>…</strong></p> をバッジ風に） */
#menu.cafe-card .menu-card > p{           /* 直下の p の基本余白を調整 */
  margin: 0;
}
#menu.cafe-card .menu-card > p > strong{
  display: inline-block;
  margin-top: .85rem;
  padding: .35rem .75rem;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0a4a4e;
  background: rgba(220,250,247,0.95); /* 少し濃いグリーン系に */
  border: 1px solid rgba(19,116,127,.18);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(16,60,62,.06) inset;
  line-height: 1.25;
  white-space: nowrap;
}

/* オプション：価格を strong 内に <span class="menu-price">¥380</span> で表示 */
#menu.cafe-card .menu-card > p > strong .menu-price{
  margin-left: .55em;
  color: #b88b2e;
  font-weight: 800;
}

/* 説明文（商品名の次の p：strong を含まない段落） */
#menu.cafe-card .menu-card > p + p{
  margin-top: .55rem;
  padding: .75rem 1rem;
  background: rgba(241,252,250,.9);
  border: 1px solid rgba(19,116,127,.12);
  border-radius: 10px;
  line-height: 1.7;
  color: #215154;
  font-size: .95rem;
}

/* 画面端とのにじみ対策（カードが並ぶ外側余白） */
#menu.cafe-card .menu-grid{
  /* 必要に応じて親側で余白が無いテーマ向けの微調整 */
  margin-top: 10px;
}

/* 低解像度端末でのタップ快適性を少し上げる */
@media (max-width: 359px){
  #menu.cafe-card .menu-card{
    border-radius: 12px;
    padding: 10px;
  }
  #menu.cafe-card .menu-card > p > strong{
    font-size: .9rem;
    padding: .3rem .65rem;
  }
}

/* 万一、他プラグインが figure 内に余白を入れる場合の打ち消し */
#menu.cafe-card .menu-card figure > a,
#menu.cafe-card .menu-card figure > picture{
  display: block;
}

@media (max-width: 859px) {
  #menu.cafe-card .menu-grid {
    gap: 34px; /* ← 26 → 34 に変更 */
  }
}


/* ==========================
   Hours (営業時間)
========================== */
#eig.cafe-card{
  background: var(--green-500); /* 💡 ほんのり色付き背景 */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  padding: 2rem 2rem 1.4rem;
  box-shadow: var(--shadow-soft);
  margin-top: 2.5rem;
}

/* タイトルは強調（既存と同じトーン） */
#eig .cafe-section-title{
  color: var(--paper);
  margin-top: 0;
}

/* テキストカード風 */
#eig p{
  margin: .6rem 0 0;
  padding: 1.1rem 1.4rem;
  background: #fff;
  border-left: 4px solid var(--gold); /* アクセント */
  border-radius: 12px;
  line-height: 1.9;
  color: var(--green-500);
  font-weight: 500;
  white-space: pre-line; /* ブロックエディタ改行を生かす */
}

/* スマホ */
@media(max-width:600px){
  #eig.cafe-card{
    padding: 1.6rem 1.2rem 1.2rem;
    border-radius: 14px;
  }
  #eig p{
    padding: 0.9rem 1rem;
    border-left-width: 3px;
  }
}



/* =========================================================
   Instagram Section
========================================================= */
.cafe-instagram .cafe-section-title{ margin-bottom: 1.2rem; }
.cafe-instagram-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.2rem;
}
@media (max-width: 860px){
  .cafe-instagram-grid{ grid-template-columns: 1fr; }
}

/* 埋め込みが暗くなる場合用の軽いフレーム */
.cafe-embed-frame{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   Access Section
========================================================= */
.cafe-access .map-wrap{
  border-radius: 12px; overflow:hidden; border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-soft);
}
.cafe-access .access-lines{
  margin-top:.9rem; display:grid; gap:.4rem;
}
.cafe-access .access-lines p{
  margin:0; padding:.5rem .9rem; line-height:1.8;
  background:#fff; border-left:4px solid var(--gold); border-radius: 8px;
  color: var(--ink);
}

/* =========================================================
   “かぶり下線”ヘッダー（カード外で使う場合に）
========================================================= */
.cafe-title-underline{
  display:inline-block; font-weight: 800; color:#fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: .6rem 0 1rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% .22em;
  background-position: 0 88%;
}

/* =========================================================
   Utilities
========================================================= */
.cafe-mt-0{ margin-top:0 !important; }
.cafe-mb-0{ margin-bottom:0 !important; }
.cafe-center{ text-align:center; }

/* =========================================================
   Footer（カフェページ下の余白が詰まらないよう）
========================================================= */
.cafe-page #footer_cr{ margin-top: 1.6rem; }


#footer-container {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    overflow: hidden;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.15);
}

footer #footer_cr{
    border-top: 0;
    text-align: center;
    color: #13747f;
}



/* ==========================
   cafe top slick slider style
========================== */

#toppage-slider {
    max-width: 100%;
    margin: 0 auto 2.5rem;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    position: relative;
}

/* hoverで写真が少し浮く */
#toppage-slider:hover img.slick-active {
    filter: brightness(1.05);
}

/* 画像を優しくフェード */
#toppage-slider img {
    filter: brightness(0.98);
    transition: opacity 1.6s ease-in-out, filter .8s ease;
}
#toppage-slider img.slick-active {
    filter: brightness(1);
}

/* slick dots カスタム */
#toppage-slider .slick-dots {
    bottom: 18px;
}
/* hoverで写真が少し浮く */
#toppage-slider:hover img.slick-active {
    filter: brightness(1.05);
}

/* Mobile */
@media(max-width: 600px) {
    #toppage-slider {
        border-radius: 14px;
        margin-bottom: 1.6rem;
    }

    #toppage-slider img {
        height: 260px;
        object-fit: cover;
    }
}

/* 固定ヘッダーぶんだけ余白を持たせる（JSなしでも効く） */
:root{
  /* デフォルトの安全オフセット（環境で若干ズレる場合は②で自動化） */
  --cafe-offset: 145px;
}

/* 対象セクション（ID付き）に上マージンとして適用 */
#news, #menu, #eig, #insta, #access{
  scroll-margin-top: var(--cafe-offset);
}

/* スムーススクロール（好みで） */
html { scroll-behavior: smooth; }

/* 参考：スマホは少し小さめにしたい場合
@media (max-width: 768px){
  :root{ --cafe-offset: 96px; }
}
*/