@charset "utf-8";
/* ============================================================
   Mano All Day Cafe & Roastery  /  mano.css
   ------------------------------------------------------------
   Mano 固有のスタイルだけを置く。
   系列共通の土台（reset / タイポグラフィ / ヘッダー / フッター /
   ボタン / カルーセル / ギャラリー / モーダル / ローディング /
   Go Top / スクロールアニメーション）は campagne-common.css 側。

   読み込み順：campagne-common.css  →  mano.css
   ※このファイルは必ず後に読み込むこと（ブランド色の上書きが効かなくなる）

   Mano 独自の方針（詳細は ../../DESIGN.md）
     ・斜めのセクション区切りを使わない
     ・セクションごとの背景色交互切替を使わない
     ・地色は --c-paper の1色で統一する
     ・切り替えは余白・写真サイズ・レイアウトで表現する

   目次
     00 brand tokens（共通の色スロットを上書き）
     01 header logo（Mano のロゴ実寸）
     02 hero（HERO 05。写真＋コーヒー豆の演出）
     03 food（scene）
     04 coffee
     05 dolce
     06 space（タブUI）
     07 party
     08 Mano 固有の追加演出（今後の追加はここへ）
   ============================================================ */


/* ============================================================
   00. Brand tokens
   campagne-common.css の色スロットを Mano の値で上書きする。
   ※ --c-white / --c-text / --c-line は系列共通のまま使う
   ============================================================ */
:root{
  /* Mano のブランド色。基準は正式ロゴ色 #45512F（Illustrator）。
     緑系は色相81.2°・彩度26.6%を共通にし、明度だけ変えて一貫させている。 */
  --c-main      : #45512f;   /* 正式ロゴ色そのまま。見出し・ボタン枠・リンクhover */
  --c-main-dark : #2f3720;   /* 同色相で明度17%。小見出し・強い文字・塗りボタンのhover */
  --c-load-bg   : #3a4427;   /* 同色相で明度21%。ローディングの全面塗り（main より少し深く） */
  --c-gold      : #a9853c;   /* [arco] information の dt は #c6901a。Manoはオリーブに合う金。緑系ではないため据え置き */
  --c-sage      : #9fa78b;   /* 補助色。色相を70°→78°に寄せて上の緑系と揃えた */
  --c-cream     : #f2efd8;   /* ローディングアイコンの色（SVG側にも同値を持たせている） */
  --c-wood      : #8a7355;

  --c-paper     : #fdfcf9;   /* ページ全体の唯一の地色 */
  --c-text-sub  : #6b6b63;
  --c-line-soft : #e2ded2;
}


/* ============================================================
   01. Header logo
   Mano のロゴは縦長（Mマーク／タグライン無し）なので高さ基準で揃える。
   ============================================================ */
.header-logo img{
  width:auto; height:44px;      /* ナビは背景ありの角版ロゴ（正方形） */
  transition:opacity .25s;
}
.header-logo a:hover img{ opacity:.72; }
.header.is-scrolled .header-logo img{ height:36px; }

/* ============================================================
   02. Hero（HERO 05 を本番へ統合 / 2026-09-27）
   ------------------------------------------------------------
   左：正式ロゴ＋コピー／右：写真。写真の縁から小さなコーヒー豆がこぼれる。
   ・仕様の正は、このファイル・index.html・mano.js の initHero()。
     hero-proposal-05.*（プロトタイプ）と HERO_05_HANDOFF.md は参照用
   ・高さは写真の幅と比率で決まる。100vh / min-height は使わない
   ・固定ヘッダーの補正は padding-top の1回だけ。
     PC 90+12 = 写真上端102px（プロトタイプの 84+18 と同じ位置）
     tablet 72+12 / SP 64+16 はプロトタイプと同値
   ・ブレークポイントは 1500 / 1100 / 980 / 640 / 600 / 350。
     1500 / 600 / 350 は HERO 専用（600 / 350 はロゴ＋コピーの並びだけ）
   ・下余白は「HERO の下端 → 次のコンテンツ」がプロトタイプと同じ間隔
     （PC 100 / tablet 65 / SP 62px）になるよう、CONCEPT 側の上余白
     （PC・tablet 40px / SP 20px）を差し引いた値にしている。CONCEPT 側は触らない
   ============================================================ */
.hero{
  max-width:1800px;
  margin:0 auto;
  padding:calc(var(--header-h) + 12px) 32px 60px clamp(40px, 5vw, 88px);
}
.hero__layout{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,2.12fr);
  gap:clamp(36px, 3.2vw, 58px);
  align-items:center;
}

/* --- 左：ロゴとコピー ---------------------------------------- */
.hero__intro{ position:relative; z-index:2; padding:0 0 18px; }
.hero__logo{ width:clamp(170px, 14.5vw, 226px); height:auto; }
.hero__words{ margin-top:39px; }
.hero__copy{
  font-size:clamp(23px, 2.05vw, 32px);
  font-weight:normal;
  line-height:1.8;
  letter-spacing:.11em;
  color:var(--c-main-dark);
}
.hero__lead{
  margin-top:22px;
  font-size:clamp(11px, .96vw, 14px);
  line-height:2.2;
  letter-spacing:.035em;
  color:var(--c-text-sub);
}

/* --- 右：写真と豆 ------------------------------------------- */
/* 豆の絶対配置の基準。豆が写真の外（紙色の余白）へ出るので、
   ここと .hero / .hero__layout には overflow:hidden を掛けないこと。
   切り抜くのは写真（.hero__picture）だけ */
.hero__scene{ position:relative; min-width:0; }
.hero__picture{ overflow:hidden; }
.hero__picture picture{ display:block; }
.hero__picture img{
  width:100%; height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:55% 50%;
}

.hero__beans{ position:absolute; inset:0; z-index:3; pointer-events:none; }
/* 外側の span が「置き方の角度」、内側の img が「転がる角度」を受け持つ。
   mano.js は --hero-turn を読んで、画面の下方向への移動をこの回転座標に変換する */
.hero__bean{
  position:absolute; display:block;
  transform:rotate(var(--hero-turn));
  filter:drop-shadow(1px 3px 2px rgba(53,34,15,.16));
}
.hero__bean img{ width:100%; height:auto; transform-origin:50% 50%; }   /* 回転軸は中心。50% 76% に戻さない */

/* 幅は回転前の画像幅。PC は 4粒 */
.hero__bean--one  { width:32.5px;  left:-12px; top:68%;       --hero-turn:-25deg; }
.hero__bean--two  { width:39px;    left:-43px; top:82%;       --hero-turn:24deg; }
.hero__bean--two img{ transform:rotate(-86deg); }                 /* 立った状態から横向きに倒れる */
.hero__bean--three{ width:28px;    left:-75px; top:91%;       --hero-turn:-42deg; }
.hero__bean--four { width:38.75px; left:21px;  bottom:-10px;  --hero-turn:73deg; }

/* --- 下：Scroll ---------------------------------------------
   英字と「動きを止める」は 2026-09-27 に削除。
   グリッドは残し、Scroll の位置を変えない（PC・tablet は中央列、SP は左） */
.hero__meta{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  height:76px;
  padding-top:8px;
  font:11px/normal var(--f-en);
  letter-spacing:.1em;
  color:var(--c-main);
}
.hero__scroll{ grid-column:2; display:flex; align-items:center; gap:20px; min-height:44px; }
.hero__scroll > span{ width:1px; height:25px; background:var(--c-sage); }
.hero a:focus-visible,
.hero button:focus-visible{ outline:2px solid var(--c-gold); outline-offset:5px; }

/* --- レスポンシブ ------------------------------------------ */
@media only screen and (min-width:1500px){
  .hero__layout{ grid-template-columns:minmax(0,.96fr) minmax(0,2.04fr); }
  .hero__break{ display:none; }
}
@media only screen and (min-width:981px) and (max-width:1100px){
  .hero__copy{ font-size:23px; }
  .hero__lead{ font-size:11px; }
}
/* tablet：ロゴ＋コピーを上段、写真を下段。豆は3粒（three は出さない） */
@media only screen and (max-width:980px){
  .hero{ padding-right:40px; padding-bottom:25px; padding-left:40px; }
  .hero__layout{ grid-template-columns:1fr; gap:30px; }
  .hero__intro{
    display:grid; grid-template-columns:148px 1fr; gap:48px;
    align-items:center;
    padding:4px 0 0;
  }
  .hero__logo{ width:148px; }
  .hero__words{ margin:0; }
  .hero__copy{ font-size:25px; }
  .hero__break{ display:none; }
  .hero__lead{ margin-top:14px; font-size:12px; }

  /* PC と SP のあいだを滑らかに補間する */
  .hero__bean--one { width:clamp(23.25px, calc(2.7206vw + 5.838px), 32.5px); }
  .hero__bean--two { width:clamp(29.25px, calc(2.8676vw + 10.897px), 39px); left:-28px; }
  .hero__bean--four{ width:clamp(23.25px, calc(4.5588vw - 5.926px), 38.75px); }
  .hero__bean--three{ display:none; }

  .hero__meta{ height:72px; }
}
/* SP：写真は 4:3。豆は one の1粒だけ、写真の下端から少しだけ出す */
@media only screen and (max-width:640px){
  .hero{ padding:calc(var(--header-h) + 16px) 20px 42px; }
  .hero__layout{ gap:27px; }

  .hero__scene{ margin-right:-4px; margin-left:-4px; }   /* 写真だけ左右に少し広げる */
  .hero__picture img{ aspect-ratio:4/3; object-position:50% 50%; }   /* SP 用ファイル（hero_01-sp）が 4:3 なので切り抜きなし */

  .hero__bean--one{ width:23.25px; left:9%; top:auto; bottom:-9px; --hero-turn:-18deg; }
  .hero__bean--two,
  .hero__bean--three,
  .hero__bean--four{ display:none; }

  /* Scroll は SP では中央に置く（2026-09-29） */
  .hero__meta{ grid-template-columns:1fr; height:83px; padding-top:24px; }
  .hero__scroll{ grid-column:1; justify-self:center; gap:14px; }
  .hero__scroll > span{ height:18px; }
}
/* SP のロゴ＋コピー（2026-09-29 調整）
   ・切り替え幅は 600px。tablet の並び（ロゴ148px＋コピー1行25px）はコピーの1行幅が 302px あり、
     約580px を下回ると窮屈になるため、その少し手前で2行のコピーに切り替える
   ・ロゴは 92px → 112px。コピーのブロック（高さ約121px）に対してロゴが約40px背低く浮いて見えていたので、
     「Mano」の上端がコピー1行目、タグラインの下端がサブコピー最終行とほぼ揃う大きさにした
     （120px だとロゴの主張が強くなる） */
@media only screen and (max-width:600px){
  .hero__intro{ grid-template-columns:112px 1fr; gap:25px; padding:0 4px; }
  .hero__logo{ width:112px; }
  .hero__copy{ font-size:20px; line-height:1.7; letter-spacing:.08em; }
  .hero__break{ display:inline; }
  .hero__lead{ margin-top:10px; font-size:11px; line-height:1.95; letter-spacing:0; }
}
/* さらに狭い幅は縦積み（横並びだとコピー「丁寧に満たす。」の1行 約149px が入らなくなる） */
@media only screen and (max-width:350px){
  .hero__intro{ grid-template-columns:1fr; gap:18px; padding:0; }
  .hero__logo{ width:104px; }
}
/* 動きを減らす設定：豆は mano.js 側で動かさない。
   範囲は HERO だけ（サイト全体の transition はここでは触らない） */
@media (prefers-reduced-motion:reduce){
  .hero *{ transition:none !important; }
}


/* ============================================================
   03. Food（カードUIにせず、ページの流れの中に配置）
   ============================================================ */
/* ------------------------------------------------------------
   ABOUT
   読ませるための本文ブロック。行長を詰めて視線の往復を減らす。
   ------------------------------------------------------------ */
.about{
  display:flex;                 /* 本文 : 写真 ＝ 1 : .62（横に並べるだけなので Flex） */
  column-gap:72px;
  align-items:flex-start;
  margin-top:-16px;             /* .area-head の 64px を少し詰める（読み物として近づける） */
}
.about > *{ min-width:0; }
.about__body{ flex:1 1 0; }
.about__pic{ flex:.62 1 0; }
.about__pic img{
  width:100%; display:block;
  aspect-ratio:1/1;             /* 2:3 は縦に長すぎたので詰める。本文の下が空きすぎない高さ */
  object-fit:cover;
  object-position:center bottom;/* 上（肩・エプロン）側だけを切る */
}
.about__pic .ph-note{ margin-top:12px; }
.about__body p{
  font-size:1.5rem;
  line-height:2.4;
  letter-spacing:.04em;
  color:var(--c-text);
}
.about__body p + p{ margin-top:1.8em; }

@media only screen and (max-width:768px){
  .about{ flex-direction:column; align-items:stretch; row-gap:34px; margin-top:0; }
  .about > *{ flex:none; }
  /* 写真は本文の下。幅は本文幅いっぱい（tablet で右が空かないように上限は付けない） */
  .about__body p{ font-size:1.4rem; line-height:2.2; }
}

/* ------------------------------------------------------------
   DOG FRIENDLY の利用案内（SPACE タブ内）
   参考: reference/dog-friendly-icons.png
   角丸の枠で囲ったアイコン＋短文の一覧。罫線は NEWS と同じ細さ・同じ色で
   1本だけ使い、中央に参考画像から切り出した肉球を置く。
   SPでは1列にして先頭3件だけ表示し、moreで残りを開く（CSSのみ・JSは使わない）。
   ------------------------------------------------------------ */
.dogguide{
  grid-column:1 / -1;           /* 写真＋本文の下に全幅で置く */
  margin-top:0;
  padding:44px 48px 40px;
  border:1px solid var(--c-line-soft);
  border-radius:18px;
}
.dogguide__lead{                /* ルール一覧の前置き。この直下に罫線を1本だけ置く */
  margin-bottom:0;
  text-align:center;
  font-size:1.3rem;
  line-height:2;
  color:var(--c-text-sub);
}

.dogguide__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:52px 24px;                /* 行間は段の区切りを兼ねる */
}
.dogguide__grid li{ text-align:center; }
.dogguide__grid img{
  height:62px; width:auto;
  display:block; margin:0 auto 14px;
}
.dogguide__grid p{
  font-size:1.25rem;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--c-text-sub);
}

/* NEWS と同じ罫線。中央に肉球を重ねる */
.dogguide__rule{
  position:relative;
  margin:34px 0;
  border-top:1px solid var(--c-line-soft);
}
.dogguide__paw{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  height:18px; width:auto;
  padding:0 14px;
  background:var(--c-paper);
  opacity:.75;
}

/* more（SPのみ）。丸くて線が細い、CTAより弱い見た目にする */
.dogguide__toggle{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;   /* 見えないがフォーカスは当たる */
}
.dogguide__morewrap{ display:none; margin-top:30px; text-align:center; }
.dogguide__more{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--c-line-soft);
  border-radius:50%;
  color:var(--c-text-sub);
  cursor:pointer;
  transition:border-color .3s, color .3s;
}
.dogguide__more::after{            /* 下向きの矢印。CTAのシェブロンと同じ作りで細め */
  content:"";
  width:8px; height:8px;
  margin-top:-3px;
  border-bottom:1.4px solid currentColor;
  border-right:1.4px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s;
}
.dogguide__more:hover{ border-color:var(--c-sage); color:var(--c-main); }
.dogguide__toggle:focus-visible ~ .dogguide__morewrap .dogguide__more{
  outline:2px solid var(--c-gold); outline-offset:3px;
}
/* 開いたら矢印を上向きに */
.dogguide__toggle:checked ~ .dogguide__morewrap .dogguide__more::after{
  margin-top:3px;
  transform:rotate(225deg);
}
/* 文言は読み上げ用に残す（視覚的には矢印だけ） */
.dogguide__more-open,
.dogguide__more-close{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;
}
.dogguide__toggle:checked ~ .dogguide__morewrap .dogguide__more-open{ display:none; }
.dogguide__toggle:not(:checked) ~ .dogguide__morewrap .dogguide__more-close{ display:none; }

.dogguide .ph-note{ margin-top:30px; }

@media only screen and (max-width:768px){
  .dogguide{ padding:30px 22px 28px; border-radius:14px; }
  .dogguide__grid{ grid-template-columns:1fr; gap:28px; }
  .dogguide__grid img{ height:52px; margin-bottom:10px; }
  .dogguide__grid p{ font-size:1.2rem; }
  .dogguide__rule{ margin:26px 0; }

  /* 先頭3件だけ表示し、more で残りを開く */
  .dogguide__grid li:nth-child(n+4){ display:none; }
  .dogguide__toggle:checked ~ .dogguide__grid li:nth-child(n+4){ display:block; }
  .dogguide__morewrap{ display:block; }
}

/* ------------------------------------------------------------
   CONCEPT のロゴロックアップ
   丸いカフェマークを「Mano」の M に少しかぶせ、英字サブを右に添える。
   マークは com/img/shop/project-icon02.svg（Caffe）の円形部分。
   ------------------------------------------------------------ */
/* ローディングの全面塗りだけ --c-main より一段深い色にする（面積が大きいため） */
.load{ background:var(--c-load-bg); }

.site-logo{
  display:flex; align-items:baseline; justify-content:center;
  flex-wrap:nowrap;
}
.site-logo__icon{
  height:58px; width:auto;
  align-self:center;
  /* reference/修正.jpg の配置：M の左上〜左側にかぶせ、1つのロックアップに見せる */
  margin:0 -30px 0 0;
  transform:translate(-10px, -25px);
  position:relative; z-index:1;
}
.site-logo__name{
  display:block; margin-top:0;
  position:relative; z-index:2;
  font-family:var(--f-en);
  font-size:5.4rem;
  line-height:1;
  letter-spacing:.01em;
  color:var(--c-main);
}
.site-logo__sub{
  margin-left:.62em;
  font-family:var(--f-en);
  font-size:2.4rem;
  line-height:1;
  letter-spacing:.14em;
  color:var(--c-main);
}
@media only screen and (max-width:768px){
  .site-logo{ flex-wrap:wrap; }
  .site-logo__icon{ height:46px; margin-right:-24px; transform:translate(-8px, -20px); }
  .site-logo__name{ font-size:4rem; }
  .site-logo__sub{ font-size:1.8rem; }
}

/* コンセプトの見出しが英字になったため、字形は --f-en に合わせ字間だけ詰める。
   サイズ・余白は .top-copy のまま。 */
.top-copy--en{
  font-family:var(--f-en);
  font-weight:500;              /* 同梱の WorkSans-Medium.woff（実ウェイト）を使う */
  letter-spacing:.22em;
}

/* 営業時間の L.O 表記・定休日の但し書き。本文より少し小さく・控えめに */
.information-dl dd .lo{
  font-size:.86em;
  color:var(--c-text-sub);
}

/* INFORMATION の項目区切り。NEWS の .news-list と同じ線を流用する */
.information-dl{ padding-bottom:22px; border-bottom:1px solid var(--c-line-soft); }
.information-dl + .information-dl{ margin-top:22px; }
.information-dl:last-of-type{ border-bottom:0; }

/* ------------------------------------------------------------
   FOOD 右上の葉っぱ（背景装飾）
   素材: reference/葉っぱ.png の葉の部分だけを切り出し、白を抜いたもの。
   見出し・説明文・MORNINGの見出し/写真には重ねない位置に収める。PCのみ。
   ------------------------------------------------------------ */
.area--food{ position:relative; }
.area--food > .area__inner,
.area--food > .scene{ position:relative; z-index:1; }   /* 本文を装飾より前面に */
.area--food::before{
  content:"";
  position:absolute; z-index:0;
  top:26px; right:-40px;          /* 上は切らずに余白を残し、右だけ少し逃がす */
  width:430px; height:420px;
  background:url("../img/home/leaf_food.png") no-repeat right top;
  background-size:contain;
  opacity:.9;
  pointer-events:none;
}
/* SPACE 右上のやしの葉（同じ扱い。素材は反転して使用）
   タブnavの上端(y342)に触れないよう FOOD より小さめに収める */
.area--space{ position:relative; }
.area--space > .area__inner{ position:relative; z-index:1; }
.area--space::before{
  content:"";
  position:absolute; z-index:0;
  top:18px; right:-40px;
  width:430px; height:380px;   /* タブnavの空いている右側までは重ねてよい（装飾は背面） */
  background:url("../img/home/leaf_space.png") no-repeat right top;
  background-size:contain;
  opacity:.9;
  pointer-events:none;
}

@media only screen and (max-width:768px){
  .area--food::before,
  .area--space::before{ display:none; }   /* SPでは出さない */
}

.scene{
  /* 3カテゴリ（Morning / Lunch / All Day）を縦に積むだけなので Flex の gap で間隔を取る。
     セクション自体の上下余白は .area（--gap-area）に任せ、ここでは下に余白を足さない。
     （以前は margin-bottom:96px が .area の余白に上乗せされ、FOOD→DOLCE だけ96px広かった） */
  display:flex; flex-direction:column;
  gap:120px;
}

/* HTML は 本文 → 写真 → ボタン の順（SP の読む順・タブ順と同じ）。
   PC は写真を4行ぶち抜きで置き、本文とボタンを隣の列の 2・3 行目に積む。
   上下の 1fr 行が余りを等分するので、本文＋ボタンのかたまりが写真に対して上下中央に来る。
   偶数番目（LUNCH）は左右を入れ替える（写真が右。写真の列が広いのは同じ） */
.scene__row{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:1fr auto auto 1fr;
  gap:0;
  width:100%;
  max-width:1360px;
  margin:0 auto;
}
.scene__pic{ position:relative; grid-column:1; grid-row:1 / -1; align-self:center; }
.scene__body{ grid-column:2; grid-row:2; padding:0 var(--pad-side); }
.scene__row > .btn-area{
  grid-column:2; grid-row:3;
  padding:0 var(--pad-side);
  /* 写真の下にはサムネイル列（88px）＋その上余白（10px）が付くので、同じ分だけ下に余白を作り、
     本文＋ボタンの中心をメイン写真の中心に合わせる。768px以下は1カラムになるので下で解除 */
  padding-bottom:98px;
}
.scene__row:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
.scene__row:nth-child(even) > .scene__pic{ grid-column:2; }
.scene__row:nth-child(even) > .scene__body,
.scene__row:nth-child(even) > .btn-area{ grid-column:1; }

.scene__pic .gallery__main img{ aspect-ratio:4/3; }
.scene__pic .gallery__thumbs{ padding:0 var(--pad-side) 0 0; }
.scene__row:nth-child(even) .scene__pic .gallery__thumbs{ padding:0 0 0 var(--pad-side); justify-content:flex-end; }
.scene__en{
  font-family:var(--f-en);
  font-size:3.2rem;
  line-height:1.2;
  letter-spacing:.04em;
  color:var(--c-main);
}
.scene__title{
  margin-top:14px;
  font-size:2rem;
  font-weight:normal;
  line-height:1.8;
  letter-spacing:.08em;
  color:var(--c-main-dark);
}
.scene__text{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--c-line-soft);
  font-size:1.4rem;
  line-height:2.2;
  color:var(--c-text-sub);
}
.scene__time{               /* .scene__en の直下。本文(1.4rem)より小さく控えめに */
  margin-top:10px;
  font-size:1.2rem;
  letter-spacing:.06em;
  color:var(--c-wood);
}
.scene__time small{ font-size:1.1rem; color:var(--c-text-sub); }
.scene__time + .scene__title{ margin-top:20px; }

@media only screen and (max-width:980px){
  .scene__en{ font-size:2.6rem; }
  .scene__title{ font-size:1.8rem; }
}
@media only screen and (max-width:768px){
  .scene{ gap:72px; }
  /* SP は1列。HTML の順（本文 → 写真 → ボタン）にそのまま並ぶ */
  .scene__row,
  .scene__row:nth-child(even){ grid-template-columns:1fr; grid-template-rows:none; }
  /* PC の .scene__row > .btn-area / :nth-child(even) > … は詳細度が高く、* だけでは打ち消せないので個別に戻す */
  .scene__row > *,
  .scene__row > .btn-area,
  .scene__row:nth-child(even) > *,
  .scene__row:nth-child(even) > .scene__pic,
  .scene__row:nth-child(even) > .scene__body,
  .scene__row:nth-child(even) > .btn-area{ grid-column:auto; grid-row:auto; }
  .scene__en{ margin-top:28px; }
  .scene__pic{ margin-top:28px; }
  .scene__row > .btn-area{ padding-bottom:0; }
  .scene__pic .gallery__thumbs,
  .scene__row:nth-child(even) .scene__pic .gallery__thumbs{
    padding:0 var(--pad-side); justify-content:flex-start;
  }
}


/* ============================================================
   04. Coffee
   ============================================================ */
.coffee{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  grid-template-rows:auto auto 1fr;
  column-gap:72px; row-gap:0;
  align-items:start;
}
/* PCは 左＝本文＋CTA＋注記 ／ 右＝ギャラリー（3行ぶち抜き） */
.coffee__body   { grid-column:1; grid-row:1; }
.coffee__gallery{ grid-column:2; grid-row:1 / span 3; }
.coffee > .btn-area{ grid-column:1; grid-row:2; }
.coffee > .ph-note { grid-column:1; grid-row:3; }
.coffee__text{
  font-size:1.6rem;
  line-height:2.4;
  letter-spacing:.06em;
  color:var(--c-main-dark);
}
.coffee__text + .coffee__text{ margin-top:1.4em; }

.coffee__facts{ margin-top:48px; }
.coffee__facts > div{
  padding:20px 0;
  border-top:1px solid var(--c-line-soft);
}
.coffee__facts > div:last-child{ border-bottom:1px solid var(--c-line-soft); }
.coffee__facts dt{
  font-size:1.4rem;
  letter-spacing:.1em;
  color:var(--c-main);
}
.coffee__facts dd{
  margin-top:8px;
  font-size:1.35rem;
  line-height:2;
  color:var(--c-text-sub);
}

/* PC は 4:5（2026-09-29 に 3:4 から変更。SP と同じ比率。左の本文の列とも高さが近い）。
   tablet（641〜980px）だけは 4:3（下の 980px の指定） */
.coffee__gallery .gallery__main img{ aspect-ratio:4/5; }
/* PC：画面の高さが低いノートPCでも「写真＋サムネ」が1画面に収まるよう、
   写真の列の幅を画面の高さから決める（4:5 のまま小さくなる）。
   縮んだ分は本文の列に回すので、本文と写真のすき間は 72px のまま。
   1つ目の値＝元の 1:1.02 の割合、2つ目＝画面の高さから出した幅（小さい方を使う）。
   240px ＝ ヘッダー 91 ＋ サムネ行 98 ＋ 上下の余白。384px 未満だとサムネが2段に折れるので、それより小さくはしない */
.coffee{
  grid-template-columns:minmax(0,1fr) min(calc((100% - 72px) * 1.02 / 2.02), max(384px, calc((100vh - 240px) * .8)));
  grid-template-columns:minmax(0,1fr) min(calc((100% - 72px) * 1.02 / 2.02), max(384px, calc((100svh - 240px) * .8)));
}

/* --- SP：3つの特徴をアコーディオンに（開閉は mano.js の initCoffeeFacts） ---
   .is-accordion は 640px 以下でだけ JS が付ける。PC / tablet は従来どおり全文表示 */
.coffee__fact-btn{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%;
  min-height:48px;                          /* 行全体が押せる。タップしやすい高さ */
  padding:0 2px 0 0;
  text-align:left;
  color:inherit;
  font:inherit; letter-spacing:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
/* 右端の小さな丸枠＋下向き矢印（DOG FRIENDLY の「more」と同じ作りを小さくしたもの）。開くと上向き */
.coffee__fact-icon{
  position:relative; flex:0 0 auto;
  width:26px; height:26px;
  border:1px solid var(--c-line-soft);
  border-radius:50%;
  color:var(--c-main);
  transition:border-color .2s, background-color .2s;
}
.coffee__fact-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px;
  margin:-4.5px 0 0 -3px;
  border-bottom:1.4px solid currentColor;
  border-right:1.4px solid currentColor;
  transform:rotate(45deg);
  transition:transform .25s, margin .25s;
}
.coffee__fact-btn[aria-expanded="true"] .coffee__fact-icon::after{
  transform:rotate(225deg);
  margin-top:-1.5px;
}
/* hover / focus / タップで薄く反応（ベタ塗りにはしない） */
.coffee__fact-btn:hover,
.coffee__fact-btn:focus-visible{ color:var(--c-main-dark); }
.coffee__fact-btn:hover .coffee__fact-icon,
.coffee__fact-btn:focus-visible .coffee__fact-icon{ border-color:var(--c-sage); }
.coffee__fact-btn:active .coffee__fact-icon{ background-color:rgba(69,81,47,.08); }
.coffee__fact-btn:focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }
.coffee__facts.is-accordion > div{ padding:0; }
/* 余白は margin ではなく padding で持つ（高さのアニメーションに含めて、閉じたときに段差を残さない） */
.coffee__facts.is-accordion dd{ margin:0; padding:0 0 16px; }
.coffee__facts.is-accordion dd[hidden]{ display:none; }

@media only screen and (max-width:980px){
  .coffee{ grid-template-columns:1fr; grid-template-rows:none; gap:44px; }
  /* 1カラムでは自動配置に戻す（本文 → 写真 → メニューPDF の順。FOOD / DOLCE と同じ考え方）。
     PC 用の .coffee > .btn-area{grid-row:2} は詳細度が高く、* だけでは打ち消せないので個別に戻す
     （以前はこれが効かず、tablet・SP で CTA が写真の上に出ていた） */
  .coffee > *,
  .coffee > .btn-area{ grid-column:auto; grid-row:auto; }
  .coffee > .btn-area{ margin-top:0; }        /* 写真との間は gap:44px で取る */
  .coffee__gallery .gallery__main img{ aspect-ratio:4/3; }
}
@media only screen and (max-width:640px){
  .coffee__text{ font-size:1.45rem; line-height:2.2; }
  .coffee__facts{ margin-top:32px; }
  /* SP は縦長 4:5（2026-09-29）。写真は4枚とも 3:4 の縦長で、4:3 だと上下が大きく切れていたため。
     tablet は写真が画面幅いっぱいになり縦長だと高くなりすぎるので 4:3 のまま */
  .coffee__gallery .gallery__main img{ aspect-ratio:4/5; }
}


/* ============================================================
   05. Dolce（カルーセルなし・写真4枚の固定レイアウト）
   ============================================================ */
.dolce{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:72px; row-gap:0;
  align-items:start;            /* COFFEE と同じ。説明文の上端を写真の上端に揃える */
}
/* PC は 左＝本文＋メニューPDF ／ 右＝写真（2行ぶち抜き）。
   HTML では CTA を写真一覧の後ろに置いてあり、980px 以下はその順（本文 → 写真 → CTA）で並ぶ */
.dolce__body{ grid-column:1; grid-row:1; }
.dolce__pics{ grid-column:2; grid-row:1 / span 2; }
.dolce__cta { grid-column:1; grid-row:2; }
.dolce__body{ padding-bottom:8px; }
.dolce__text{
  font-size:1.5rem;
  line-height:2.3;
  letter-spacing:.04em;
}
.dolce__text + .dolce__text{ margin-top:1.5em; }
.dolce__text em{ color:inherit; }   /* 店名。リンクに見えないよう本文と同じ色にする（2026-10-03） */

/* 写真4枚を 2×2 で固定表示（カルーセル・切り替えUIは持たせない） */
.dolce__pics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px 18px;
}
.dolce__pic img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.dolce__pic figcaption{
  margin-top:9px;
  font-size:1.2rem;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--c-text-sub);
}

@media only screen and (max-width:980px){
  .dolce{ grid-template-columns:1fr; grid-template-rows:none; gap:44px; }
  .dolce > *{ grid-column:auto; grid-row:auto; }
  .dolce__cta{ margin-top:0; }                 /* gap:44px で写真との間を取る（COFFEE と同じ間隔） */
}
@media only screen and (max-width:640px){
  .dolce__pics{ gap:14px 10px; }
  .dolce__pic figcaption{ font-size:1.1rem; }
}


/* ============================================================
   06. Space（タブで特徴を選んで見るUI／カルーセルではない）
   ============================================================ */
.space-tab__nav{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--c-line-soft);
  margin-bottom:44px;
}
.space-tab__btn{
  position:relative;
  padding:12px 30px 16px 0;
  margin-right:30px;
  font-family:var(--f-en);
  font-size:1.6rem;
  letter-spacing:.1em;
  line-height:1.3;
  color:var(--c-text-sub);
  text-align:left;
  transition:color .25s;
}
.space-tab__btn span{
  display:block;
  margin-top:5px;
  font-family:var(--f-base);
  font-size:1.15rem;
  letter-spacing:.12em;
  color:var(--c-sage);
  transition:color .25s;
}
.space-tab__btn::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:calc(100% - 30px); height:2px;
  background:var(--c-main);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .25s, opacity .2s;
}
/* hover / focus-visible：文字を少し濃く＋選択中より弱い下線。選択中（.is-current）が一番強く見えるようにする */
.space-tab__btn:hover,
.space-tab__btn:focus-visible{ color:#4f5641; }
.space-tab__btn:hover span,
.space-tab__btn:focus-visible span{ color:var(--c-text-sub); }
.space-tab__btn:not(.is-current):hover::after,
.space-tab__btn:not(.is-current):focus-visible::after{ transform:scaleX(1); opacity:.28; }
.space-tab__btn.is-current{ color:var(--c-main); }
.space-tab__btn.is-current span{ color:var(--c-main); }
.space-tab__btn.is-current::after{ transform:scaleX(1); }
.space-tab__btn:focus-visible{ outline:2px solid var(--c-gold); outline-offset:-4px; }
/* タブだと分かるよう、項目の間にごく薄い縦線（ブランド色の低い不透明度）。
   線はボタンの右端＝文字と文字の間のちょうど中央に来る。最後の項目には付けない */
.space-tab__btn:not(:last-child)::before{
  content:""; position:absolute; right:0; top:50%;
  width:1px; height:26px; margin-top:-14px;
  background:rgba(69,81,47,.18);
}

/* タブ列の左右に重ねる小さな矢印（横スクロールの補助。2026-10-05）
   ・タブ列が横スクロールになる 768px 以下だけ。PC には出さない
   ・左右に続きがあるときだけ表示する（mano.js が枠に is-scroll-prev / is-scroll-next を付ける）
   ・矢印の背後は地色へのグラデーション。タブの文字と重ならないようにする
   ・線は CTA のシェブロンと同じ作り（border を 45° 回転）で、細く小さく */
.space-tab__navwrap{ position:relative; }
.space-tab__scroll{ display:none; }
@media only screen and (max-width:768px){
  .space-tab__scroll{
    position:absolute; top:0; bottom:1px; z-index:1;       /* 下はタブ列の下線 1px を避ける */
    width:40px; padding:0;
    align-items:center;
    color:var(--c-main);
  }
  .space-tab__scroll::before{
    content:""; display:block;
    width:7px; height:7px;
    border-top:1.4px solid currentColor;
    border-right:1.4px solid currentColor;
  }
  .space-tab__scroll--next{
    right:0; justify-content:flex-end; padding-right:9px;
    background:linear-gradient(to right, rgba(253,252,249,0), var(--c-paper) 55%);
  }
  .space-tab__scroll--next::before{ transform:rotate(45deg); }
  .space-tab__scroll--prev{
    left:0; justify-content:flex-start; padding-left:9px;
    background:linear-gradient(to left, rgba(253,252,249,0), var(--c-paper) 55%);
  }
  .space-tab__scroll--prev::before{ transform:rotate(-135deg); }
  .space-tab__navwrap.is-scroll-next .space-tab__scroll--next,
  .space-tab__navwrap.is-scroll-prev .space-tab__scroll--prev{ display:flex; }
}
@media only screen and (max-width:480px){
  /* タブ列を画面の右端まで伸ばしている幅（下の 480px の指定）では、右の矢印を画面の端に合わせる。
     左の矢印も同じく画面の端に寄せ、左右の矢印が画面の端から同じ距離（9px）になるようにする */
  .space-tab__scroll--next{ right:calc(var(--pad-side) * -1); }
  /* 左の矢印はページの余白（--pad-side）の中に収める。タブ列の中へは 6px のぼかしだけ掛ける
     ＝左端にそろって止まったタブ（選択中の INTERIOR & EXTERIOR など）の頭文字を隠さない */
  .space-tab__scroll--prev{
    left:calc(var(--pad-side) * -1); width:calc(var(--pad-side) + 6px);
    background:linear-gradient(to right, var(--c-paper) calc(100% - 6px), rgba(253,252,249,0));
  }
}

.space-tab__panel{
  /* DOG FRIENDLY は 写真＋本文 の下に わんちゃんガイドが全幅で入る2段構成なので Grid のまま（Flex にしないこと） */
  display:grid;
  /* PC：写真を主役に（2026-10-03。1.35fr / gap 56px → 1.75fr / 列間 48px。1440px で写真の幅 600 → 約670px）
     文字サイズは変えない。本文の列は約383px になり、長い見出し（INTERIOR & EXTERIOR）は2行になる（ユーザー了承）
     980px 以下は下の @media で1カラムに戻すので、tablet / SP の大きさは変わらない */
  grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
  gap:56px 48px;
  align-items:center;
  animation:mano-fade .4s ease forwards;   /* 自然なfade程度に留める */
}
.space-tab__panel[hidden]{ display:none; }
/* 共通側の cg-fade と同内容。SPACE でしか使わないためこちらに置く */
@keyframes mano-fade{ from{opacity:0;} to{opacity:1;} }
.space-tab__pic img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
/* 大きい写真の下にサムネイルを置く（共通の .gallery / js-gallery を使用。2026-10-05 に正式採用）。
   TERRACE / INTERIOR & EXTERIOR / DOG FRIENDLY が対象。GREEN は写真1枚なのでサムネイル無し。
   上の .space-tab__pic img（4:3）がサムネイルにも当たるので、COFFEE / FOOD と同じ正方形に戻す。
   サムネイルは PC・tablet で 76px 固定（6枚でも1段）。SP（640px 以下）は共通側の「4枚で1段」のまま（6枚は4枚＋2枚）。
   商品名の帯（.gallery__cap）は出さない */
.space-tab__pic .gallery__thumb img{ aspect-ratio:1/1; }
@media only screen and (min-width:641px){
  .space-tab__pic .gallery__thumbs > li{ flex:0 0 76px; }
}
.space-tab__body h3{
  font-size:2rem;
  font-weight:normal;
  line-height:1.8;
  letter-spacing:.08em;
  color:var(--c-main-dark);
  padding-bottom:18px;
  border-bottom:1px solid var(--c-gold);
}
/* 見出しが1行に収まらないときは、<span> で区切った文節の切れ目（読点のあと）で折り返す。収まる幅では1行のまま */
.space-tab__body h3 span{ display:inline-block; }
.space-tab__body p{
  margin-top:20px;
  font-size:1.4rem;
  line-height:2.2;
  color:var(--c-text-sub);
}

@media only screen and (max-width:980px){
  .space-tab__panel{ grid-template-columns:1fr; gap:28px; }
}
@media only screen and (max-width:768px){
  /* SPではタブを横スクロールできるようにする */
  .space-tab__nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-bottom:32px;
  }
  .space-tab__nav::-webkit-scrollbar{ display:none; }
  .space-tab__btn{
    flex:0 0 auto;
    padding:10px 22px 14px 0;
    margin-right:22px;
    font-size:1.4rem;
  }
  .space-tab__btn::after{ width:calc(100% - 22px); }
  .space-tab__body h3{ font-size:1.7rem; }
}
/* スマートフォン：右端に次のタブを少しだけ見切れさせ、横に続くことを分かるようにする（2026-09-29）
   ・タブ列の右端を画面の端まで伸ばす（右の余白 --pad-side ぶんを使う）
   ・タブ間を 22+22px → 18+18px に詰める（区切り線は文字と文字のちょうど中央のまま）
     → 360px で DOG FRIENDLY が約35px 見える（375px 約50px / 390px 約65px）
   ・右端 20px にごく薄いフェード（見切れた文字が薄くなりすぎない幅）。最後まで送ったときに DOG FRIENDLY が隠れないよう、末尾に余白を足す
   ・スクロールバーは非表示（上の 768px の指定を継承）。scroll-snap で項目の頭にゆるく止まる
   タブが1行に収まらず実際に横スクロールが起きる 480px 以下だけに掛ける
   （481px 以上と tablet / PC は従来どおり） */
@media only screen and (max-width:480px){
  .space-tab__nav{
    margin-right:calc(var(--pad-side) * -1);
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
  .space-tab__nav::after{ content:""; flex:0 0 14px; }     /* 末尾の余白（最後のタブをフェードの外へ出す） */
  .space-tab__btn{
    padding-right:18px;
    margin-right:18px;
    scroll-snap-align:start;
  }
  .space-tab__btn:last-of-type{ margin-right:0; }
  .space-tab__btn::after{ width:calc(100% - 18px); }
}
/* 320px 前後の狭い端末：タブ間をさらに 14+14px に詰めて、DOG FRIENDLY の頭が見えるようにする */
@media only screen and (max-width:350px){
  .space-tab__btn{ padding-right:14px; margin-right:14px; }
  .space-tab__btn:last-of-type{ margin-right:0; }
  .space-tab__btn::after{ width:calc(100% - 14px); }
}


/* ============================================================
   07. Party
   ============================================================ */
.party{
  display:flex;
  /* 写真 : 本文 ＝ 1.25 : 1。他セクションの写真幅（COFFEE 519px / SPACE 600px）の間に収める */
  gap:72px;
  /* PCの2カラムでは写真の上端とテキストの上端を揃える */
  align-items:flex-start;
}
.party > *{ min-width:0; }
.party__pics{ flex:1.25 1 0; }
.party__body{ flex:1 1 0; }
.party__pics{ padding:0; }   /* 矢印は left/right:-22px で外にはみ出す。写真幅を削らない */
/* PCの2カラムではチラ見せしない（写真エリアがごちゃつくため）。
   1カラムになる980px以下でだけ前後を見せる（下の media query 参照） */
.party__pics .carousel{ --peek:0; --peek-gap:0; }
.party__text{ font-size:1.5rem; line-height:2.2; }
/* 写真は 7:8（2026-09-29）。縦長の印象は残しつつ、以前の 4:5 より少しだけ短くした
   （1440px で 714px → 653px。右の説明列の高さ 621px に近い）。画像も 7:8 で書き出してある */
.party__pics .carousel--photo .carousel__slide img{ aspect-ratio:7/8; }

/* 飲み放題：箇条書き＋小さな注記 */
.plan__list li{ position:relative; padding-left:1em; }
.plan__list li::before{ content:"・"; position:absolute; left:0; }
.plan__note{ margin-top:6px; font-size:1.2rem; line-height:1.8; color:var(--c-text-sub); }

/* 予約サイトへの CTA（HOT PEPPER / 食べログ）。見た目は通常の .btn、矢印の代わりに外部リンクのアイコン */
.party__ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.btn--ext::before,
.btn--ext::after{ content:none; }
.btn__ext{
  position:absolute; top:50%; right:26px;
  width:14px; height:14px; margin-top:-7px;
  fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.btn__sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media only screen and (max-width:768px){
  .party__ctas{ justify-content:center; }
}

/* 写真の上に重ねる注記（系列店での提供写真・ドリンク名など）。
   共通CSSの .carousel__cap は「写真の下の文字」なので、PARTY だけ写真の上へ移す。
   COFFEE / FOOD の商品名表示（.gallery__cap）と同じ、下からの暗いグラデーションに白文字。
   文字にしているので、拡大表示（モーダル）にも同じ文言が出る */
.party__pics .carousel__cap{
  position:absolute; left:0; right:0; bottom:0;
  margin:0;
  padding:48px 18px 14px;
  background:linear-gradient(to top, rgba(18,22,14,.72) 0%, rgba(18,22,14,.38) 50%, rgba(18,22,14,0) 100%);
  color:var(--c-paper);
  font-size:1.3rem;
  line-height:1.6;
  letter-spacing:.06em;
  pointer-events:none;           /* 写真クリックでの拡大表示を邪魔しない */
}
.party__pics .carousel__cap span{ display:block; font-size:1.1rem; opacity:.85; }

.plan{ margin-top:36px; border-top:1px solid var(--c-main); }
.plan__item{
  display:flex;                 /* 項目名 150px ＋ 内容 */
  gap:20px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--c-line-soft);
}
.plan__item > dt{ flex:0 0 150px; }
.plan__item > dd{ flex:1 1 0; min-width:0; }
.plan__item dt{
  font-size:1.4rem;
  letter-spacing:.08em;
  color:var(--c-main);
}
.plan__price{
  font-family:var(--f-en);
  font-size:2.6rem;
  line-height:1.1;
  color:var(--c-main-dark);
}
.plan__unit{ font-size:1.3rem; margin-left:3px; }
.plan__desc{
  display:block;
  margin-top:6px;
  font-size:1.3rem;
  line-height:1.9;
  color:var(--c-text-sub);
}
.plan__item--opt dd{ font-size:1.35rem; line-height:1.9; color:var(--c-text-sub); }

@media only screen and (max-width:980px){
  .party{ flex-direction:column; align-items:stretch; gap:44px; }
  .party > *{ flex:none; }
  /* 1カラムではカルーセルだけ通常の左右余白（--pad-side）から外して画面幅いっぱいに使う。
     [前スライド] gap [大きめのメイン] gap [次スライド] にしたいので、
     余白を守るためにメインを縮めるのではなく、前後スライドを余白の外まで見せる。
     グリッド項目なので width:auto + ネガティブマージンで stretch がそのまま広がる */
  .party__pics{ width:auto; max-width:none; margin:0 calc(var(--pad-side) * -1); }
  /* --peek は viewport の padding-inline（% は画面幅基準）。
     1/6(16.7%)を超えると measure() の round(viewport / slide) が 2 になるので超えない。
     見える量 = --peek − --peek-gap */
  .party__pics .carousel{ --peek:12%; --peek-gap:24px; }
  /* 画面端に出した矢印は前後スライドの上に乗ってしまうので、メイン画像の左右の縁に重ねる */
  .party__pics .carousel__arrow--prev{ left:calc(var(--peek) - 22px); }
  .party__pics .carousel__arrow--next{ right:calc(var(--peek) - 22px); }
}
@media only screen and (max-width:640px){
  .plan__item{ flex-direction:column; align-items:stretch; gap:8px; padding:18px 0; }
  .plan__item > dt,
  .plan__item > dd{ flex:none; }   /* PC の dt 150px（詳細度が高い）を打ち消す */
  /* SPは幅が狭いので gap を詰めて覗きを残す。「別の写真がある」と分かる量は確保、0にはしない */
  .party__pics .carousel{ --peek:12%; --peek-gap:14px; }
  .party__pics .carousel__arrow--prev{ left:calc(var(--peek) - 19px); }   /* 矢印38pxの半分 */
  .party__pics .carousel__arrow--next{ right:calc(var(--peek) - 19px); }
}



/* ============================================================
   08. Mano 固有の追加演出
   ------------------------------------------------------------
   FV のコーヒー豆演出など、Mano だけで使う装飾は
   （共通化しないものとして）ここに追加する。
   ============================================================ */

/* ============================================================
   INFORMATION 専用の小さな CTA（.info-chip）
   ------------------------------------------------------------
   「今月のお休み／来月のお休み」「HOT PEPPER グルメ」「食べログ」
   「Google Mapsで開く」をすべてこの1種類に揃える（2026-09-27）。
   通常の大きな CTA（.btn：高さ60px前後）とは差を付け、
   高さ32px（SP 34px）の細い枠線の pill にする。
   ホバーは薄いブランド色の面、キーボード操作時は金色のフォーカスリング。
   ============================================================ */
.info-chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:32px;
  padding:0 14px;
  border:1px solid var(--c-main);
  border-radius:999px;
  background:transparent;
  color:var(--c-main);
  font-family:inherit;
  font-size:1.2rem;
  line-height:1;
  letter-spacing:.06em;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s, color .2s;
}
.info-chip:hover{ background:rgba(69,81,47,.08); }          /* --c-main #45512f の 8% */
.info-chip:focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }
.info-chip__icon{
  flex:0 0 auto;
  width:13px; height:13px;
  fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* 画面には出さない補足（「新しいタブで開きます」など） */
.info-chip__sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* 電話で予約（ご予約）：SP（768px 以下＝ .sp-view と同じ境界）だけ表示。PC は FaceTime 等が起動するので出さない。
   受話器アイコンは viewBox が 24 なので、ほかのアイコン（16 で 1.2）と同じ太さに見える線幅にする */
.info-chip--tel{ display:none; }
.info-chip__icon--tel{ stroke-width:1.8; }
@media only screen and (max-width:768px){
  .info-chip--tel{ display:inline-flex; }
}
@media only screen and (max-width:640px){
  .info-chip{ min-height:34px; padding:0 15px; }            /* SP はタップしやすいよう少しだけ高く */
}

/* 並べ方 */
.information-dl dd .info-chips{              /* ご予約：HOT PEPPER / 食べログ を横並び */
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:10px;
}
.info__map-link{ margin-top:14px; }          /* Google Mapsで開く：地図のすぐ下 */

/* 営業時間 → 定休日は少し離し、定休日 → お休みカレンダーは近づける */
.information-dl dd .info-closed{ margin-top:10px; }

/* 将来 INFORMATION に素のテキストリンクを置いたとき用（今は使っていない）。
   共通CSSの a{color:inherit;text-decoration:none} だと本文と区別が付かないため */
.information-dl dd a:not(.info-chip){
  border-bottom:1px solid var(--c-line-soft);
  padding-bottom:1px;
}
.information-dl dd a:not(.info-chip):hover{ color:var(--c-main); border-bottom-color:var(--c-main); }
.information-dl dd a:not(.info-chip):focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }

/* INSTAGRAM
   ------------------------------------------------------------
   枠の数（6枚）とグリッドの列数は campagne-common.css の .insta-grid のまま使う。
   ここで足しているのは次の2つだけ。

     1. 枠の比率を 1:1 → 4:5（縦長）に上書きする
        Instagram の現在のフィード投稿に近い比率にするため。
        共通CSSは他店舗でも使うので触らず、Mano側で上書きしている。
        PC / tablet / SP すべて 4:5。ブレークポイントごとの分岐は持たせない。

     2. 取得に成功したときだけ、破線プレースホルダーの見た目を解除する
        取得できなかったときは .is-loaded が付かないので仮枠のまま。 */

/* --- 1. 枠の比率（仮枠・実投稿どちらも 4:5） --------------- */
.insta-grid li{
  aspect-ratio:4 / 5;             /* [override] 共通CSSの 1/1 を上書き */
}

/* --- 2. 実投稿が入ったときの見せ方 ------------------------- */
.insta-grid.is-loaded li{
  border:none;
  background:var(--c-line-soft);   /* 画像読み込み中の下地 */
  overflow:hidden;
}
.insta-grid.is-loaded li a{
  display:block;
  width:100%; height:100%;
}
.insta-grid.is-loaded li img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;               /* 元画像が正方形でも横長でも枠は 4:5 に統一 */
  /* 構図の調整用。既定は中央。
     特定の枠だけ寄せたいときは、その li に --insta-pos を指定する。
       例）3枚目だけ上寄せにする
           .insta-grid li:nth-child(3){ --insta-pos:center top; }
       例）全体を少し上寄せにする
           .insta-grid{ --insta-pos:center 40%; }
     （API側・HTML側は触らずCSSだけで調整できるようにしている） */
  object-position:var(--insta-pos, center center);
  transition:opacity .2s;
}
.insta-grid.is-loaded li a:hover img{ opacity:.78; }
.insta-grid.is-loaded li a:focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }


/* ============================================================
   INFORMATION：定休日カレンダー
   ------------------------------------------------------------
   通常は毎週水曜が定休のため、変更がある月だけ
   「今月のお休み／来月のお休み」のボタンを出し、
   クリックでモーダルに月間カレンダーを出す。
   ボタンも中身も mano.js が api/holidays.php の結果から作る。
   変更が無い月は #js-holiday-links が hidden のままなので何も出ない。
   ============================================================ */

/* --- 入口（INFORMATION の「毎週水曜日が定休日です」の直下） ---
   ボタン自体は INFORMATION 共通の小さな CTA（.info-chip）。
   定休日の一文に近づけて、ひとまとまりに見せる */
.information-dl dd .holiday-links{
  margin-top:6px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.information-dl dd .holiday-links[hidden]{ display:none; }

/* --- モーダル ---------------------------------------------- */
.holiday-modal{ position:fixed; inset:0; z-index:60; }
.holiday-modal[hidden]{ display:none; }
.holiday-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(47,55,32,.55);
}
.holiday-modal__dialog{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:calc(100% - 40px); max-width:420px;
  max-height:calc(100svh - 40px);
  overflow-y:auto;                       /* SPでは中身をスクロールできるように */
  padding:48px 32px 32px;
  background:var(--c-paper);
  border-radius:4px;                     /* 大きな角丸にはしない */
}
.holiday-modal__close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border:0; background:none; cursor:pointer;
}
.holiday-modal__close::before,
.holiday-modal__close::after{
  content:""; position:absolute; top:50%; left:50%;
  width:18px; height:1px;
  background:var(--c-main);
}
.holiday-modal__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.holiday-modal__close::after{  transform:translate(-50%,-50%) rotate(-45deg); }
.holiday-modal__close:focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }

.holiday-modal__heading{
  font-size:1.7rem;
  color:var(--c-main-dark);
  letter-spacing:.06em;
}
.holiday-modal__label{
  margin-top:4px;
  font-family:var(--f-en);
  font-size:1.3rem;
  letter-spacing:.08em;
  color:var(--c-text-sub);
}

/* --- カレンダー本体 ---------------------------------------- */
.holiday-cal{
  width:100%;
  margin-top:20px;
  border-collapse:collapse;
  table-layout:fixed;
}
.holiday-cal th{
  padding:0 0 10px;
  font-size:1.2rem;
  font-weight:normal;
  letter-spacing:.04em;
  color:var(--c-text-sub);
  border-bottom:1px solid var(--c-line-soft);
}
.holiday-cal td{
  height:40px;
  padding:2px 0;
  text-align:center;
  vertical-align:middle;
  font-size:1.4rem;
  line-height:1;
  color:var(--c-text);
}
.holiday-cal td.is-empty{ color:transparent; }
/* 日曜・祝日。オリーブ系の配色に合わせた、彩度を落とした赤（レンガ寄り）。地色 #fdfcf9 とのコントラスト 5.9:1 */
.holiday-cal th.is-sun,
.holiday-cal td.is-sun{ color:#a0463a; }

/* 休業日。丸ドットのページネーションと同じトーンで、塗りだけで示す */
.holiday-cal__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--c-main);
  color:var(--c-paper);
}
/* 凡例の丸は数字を持たないので少し小さく */
.holiday-modal__legend .holiday-cal__mark{
  width:14px; height:14px;
  margin-right:8px;
  vertical-align:-2px;
}
/* 読み上げ用のテキスト（画面には出さない） */
.holiday-cal__sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.holiday-modal__legend{
  margin-top:16px;
  font-size:1.2rem;
  color:var(--c-text-sub);
}
.holiday-modal__note{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--c-line-soft);
  font-size:1.3rem;
  line-height:1.9;
  color:var(--c-text-sub);
}
.holiday-modal__note[hidden]{ display:none; }

@media only screen and (max-width:640px){
  .holiday-modal__dialog{ padding:44px 20px 24px; }
  .holiday-cal td{ height:36px; font-size:1.3rem; }
  .holiday-cal__mark{ width:28px; height:28px; }
}



/* ============================================================
   09. フッターのポリシーリンク・ポリシーモーダル
   ------------------------------------------------------------
   CAMPAGNE RESTAURANT GROUP 共通機能（ポリシーモーダル本体・
   フッターのポリシーリンク配置）を、現在Manoで先行実装している。
   MAMP / PHP化前提の共通フッター（include化）がまだ無いため、
   現状はこのページ内にCSSも置いているが、店舗固有の見た目ではない。
   将来フッターを共通化する際は、このセクションごと共通CSS側へ
   移設する想定（今回はまだPHP化しない）。
   ============================================================ */

/* SOCIAL グループ（SOCIAL / SNSアイコン / ポリシーリンク）の入れ物。
   PCではポリシーリンクを絶対配置で外に出すため、この箱の幅は
   footer-sns ぶんだけになる（＝arcoのSNS位置を動かさない）*/
.footer-social{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:32px;                     /* SNSと別グループに見えるよう、ある程度離す。詰まりすぎない量 */
}

/* 今は1項目だが、将来「プライバシーポリシー ｜ ハラスメントに関する方針」のように
   増やす前提の構造。区切り記号は今回付けない（増えたら li 側で足す） */
.footer-policy-nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.footer-policy-nav > li a,
.footer-policy-nav > li button{
  display:inline-block;
  border:0; margin:0; padding:0;
  font:inherit;                 /* footer の 12px を継承 */
  line-height:1;                /* footer の line-height:1.0 を継承 */
  text-align:left;
}
.footer-policy-nav > li a:hover,
.footer-policy-nav > li button:hover{ color:var(--c-main); }   /* division-nav の hover と同じ挙動 */

/* ------------------------------------------------------------
   PC（981px以上）は arco の元レイアウトを基準にする。
   arco実測（1440px / footer-content 1100px 基準の左端）：
     copyright   0 〜 334.5
     footer-sns  375 〜 490（width:115px。SOCIAL 375〜418／Instagram 470〜490）
     CAMPAGNEロゴ 898 〜 1100
   arco由来の .footer-info（max-width:490px / row-reverse / space-between）は
   そのまま使い、footer-sns を arco と同じ 115px 幅に保つことで
   SOCIAL の左端を 375px に揃える。
   「ハラスメントに関する方針」は絶対配置で footer-social の外へ出し、
   通常フローの幅に影響させない＝SOCIAL・Instagram・copyright・ロゴを
   一切ずらさずに、Instagram の右側にだけ追加する。
   ------------------------------------------------------------ */
@media only screen and (min-width:981px){
  .footer-sns{
    min-width:115px;            /* [arco] footer-sns width:115px。SOCIALの左端を揃えるため */
  }
  .footer-policy-nav{
    position:absolute;
    left:100%;                  /* footer-sns（=footer-social）の右隣 */
    top:50%;
    transform:translateY(-50%);
    margin-left:32px;
    white-space:nowrap;         /* 折り返してレイアウトを崩さない */
  }
}

/* 980px以下は縦3段の中央揃えにする。
     1段目 SOCIAL ＋ Instagramアイコン
     2段目 ハラスメントに関する方針
     3段目 copyright
   ロゴのSP挙動（≤768で mpc-view へ切り替え）は arco の既存仕様のまま触らない。
   ※ 768px以下では common.css 側の
      .footer-info{ display:block; margin:20px auto 0; text-align:center }
      .footer-sns{ margin:0 auto 16px } も併せて効く */
@media only screen and (max-width:980px){
  .footer-info{ display:block; text-align:center; }
  .footer-social{ display:block; }
  /* 1段目：SOCIAL と Instagram を同じ行のまま中央へ。
     下マージンは 768px以下の [arco] margin:0 auto 16px も兼ねて上書きし、
     980px以下で段間を一定にする */
  .footer-sns{ justify-content:center; min-width:0; margin:0 auto 12px; }
  /* 2段目：ポリシーリンクは絶対配置を解除して次の行へ */
  .footer-policy-nav{
    position:static;
    transform:none;
    margin-left:0;
    justify-content:center;
    white-space:normal;         /* 文言が長くなっても折り返して収まるように */
  }
  /* 3段目 */
  .copyright{ margin-top:14px; }
}

/* ------------------------------------------------------------
   ポリシーモーダル本体
   既存の画像拡大モーダル（#js-modal / .modal__*）とは
   完全に別クラス。JS も別ファイル（com/js/policy-modal.js）で、
   店舗名に依存しない共通機能として実装している。
   ------------------------------------------------------------ */
.policy-modal{ position:fixed; inset:0; z-index:300; }
.policy-modal[hidden]{ display:none; }
.policy-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(47,55,32,.6);        /* c-main-dark系の半透明。写真モーダルより薄め */
  animation:cg-fade .3s ease forwards;  /* 既存の @keyframes cg-fade を流用（common.css） */
}
.policy-modal__dialog{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100% - 32px));
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--c-paper);
  border:1px solid var(--c-line-soft);
  padding:56px 40px 40px;
  animation:cg-fade .3s ease forwards;
}
.policy-modal__close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px;
}
.policy-modal__close::before,
.policy-modal__close::after{
  content:""; position:absolute; top:50%; left:7px;
  width:22px; height:1px; background:var(--c-main-dark);
}
.policy-modal__close::before{ transform:rotate(45deg); }
.policy-modal__close::after{ transform:rotate(-45deg); }
.policy-modal__close:hover{ opacity:.7; }
.policy-modal__close:focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }

.policy-modal__title{
  font-size:2.2rem;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--c-main-dark);
}
.policy-modal__body{ margin-top:24px; font-size:1.4rem; line-height:2; }
.policy-modal__body p + p{ margin-top:1.2em; }
.policy-modal__body .tentative-tag{ margin-right:.4em; }

.policy-modal__cta-area{ margin-top:32px; text-align:center; }

/* CTAは既存の .btn を継承しない（カプセル形状・矢印・ホバー浮き上がりが今回の指定と相反するため）。
   #e7380d は今回の指定色。他ページを参照して探した色ではない */
.policy-modal__cta{
  display:inline-flex;
  align-items:center; justify-content:center;
  min-height:52px;
  padding:0 32px;
  background-color:#e7380d;
  color:#ffffff;
  font-size:1.4rem;
  letter-spacing:.06em;
  border-radius:0;              /* 角丸なし */
  box-shadow:none;              /* 影なし */
  transition:background-color .2s;  /* 過度なアニメーションはしない */
}
.policy-modal__cta:hover{
  background-color:rgba(231,56,13,.5);   /* #e7380d を約50%の不透明度に。文字色はそのまま#fffで維持 */
}
.policy-modal__cta:focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }

@media only screen and (max-width:640px){
  .policy-modal__dialog{ padding:48px 24px 32px; }
  .policy-modal__title{ font-size:1.9rem; }
}