/*
  maumbile 公開用サイト 共通スタイル
  mock/assets/css/site.css を下敷きに、公開版として以下を変更:
    - 朱書きレイヤーと上部注記バーのスタイルを全削除
      （検討段階だけで使う注釈の仕組みであり、公開版には存在しない要素のため）
    - 朱 --shu を「①ご予約・ご注文の導線（ボタン） ②価格の数字」に限定して解放
      （.btn--accent / .price を新設。それ以外には使わない）
  DESIGN_BRIEF.md のトークン・クラス語彙を踏襲。
*/

/* ==========================================================================
   0. トークン
   ========================================================================== */
:root{
  --moss-deep:#24352A;
  --moss:#3C5240;
  --moss-tint:#E6EAE1;
  --kinari:#F3EEE2;
  --kinari-2:#FAF7EF;
  --kiji:#8A6440;
  --sumi:#23211D;
  --sumi-60:#6B675F;
  --white:#FFFFFF;
  --shu:#B7452B;   /* 朱。公開版では「予約・注文の導線」と「価格の数字」だけに使う（他は緑/木肌で統一） */
  --shu-tint:#FBEFE9;

  --font-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;

  --wrap:1120px;
  --wrap-narrow:760px;
  --r:4px;
}

/* ==========================================================================
   1. リセット・ベース
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; } /* 375px幅で横スクロールを出さない（受入条件4） */
body{
  margin:0;
  background:var(--kinari);
  color:var(--sumi);
  font-family:var(--font-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p,ul,ol,dl,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; }
table{ border-collapse:collapse; }

:focus-visible{ outline:3px solid var(--kiji); outline-offset:2px; }

@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

main{ display:block; }

h4{
  margin:22px 0 8px;
  color:var(--moss-deep);
}

/* ==========================================================================
   2. レイアウト基礎
   ========================================================================== */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.wrap--narrow{ max-width:var(--wrap-narrow); margin-inline:auto; padding-inline:20px; }

.stack > * + *{ margin-top:16px; }
.sec-sub{ margin-top:56px; }
.sec-sub > p{ margin-bottom:24px; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }

.sec{ padding:56px 0; }
.sec--cream{ background:var(--kinari); }
.sec--white{ background:var(--white); }
.sec--dark{ background:var(--moss-deep); color:var(--white); }
@media (min-width:768px){
  .sec{ padding:88px 0; }
}

.sec-head{ margin-bottom:32px; }
.sec-head__ja{
  font-family:var(--font-display);
  font-size:1.6rem;
  line-height:1.5;
  color:var(--sumi);
  margin:0 0 6px;
}
.sec-head__en{
  display:block;
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--sumi-60);
  text-transform:uppercase;
}
.sec--dark .sec-head__ja{ color:var(--white); }
.sec--dark .sec-head__en{ color:var(--moss-tint); }
@media (min-width:768px){
  .sec-head__ja{ font-size:2.1rem; }
}

.lead{
  font-family:var(--font-display);
  font-size:1.05rem;
  line-height:2;
  color:var(--sumi);
}
.sec--dark .lead{ color:var(--white); }

/* ==========================================================================
   3. ボタン
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:.85em 1.7em;
  border-radius:var(--r);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--moss); color:var(--white); border-color:var(--moss); }
.btn--primary:hover{ background:var(--moss-deep); border-color:var(--moss-deep); }
.btn--ghost{ background:transparent; color:var(--moss-deep); border-color:var(--moss-deep); }
.btn--ghost:hover{ background:var(--moss-tint); }
/* 予約・注文の導線専用（朱）。他のボタン用途には使わない。 */
.btn--accent{ background:var(--shu); color:var(--white); border-color:var(--shu); }
.btn--accent:hover{ background:#8f341f; border-color:#8f341f; }
/* 濃緑地の上（ヘッダー・フッター・ヒーロー・sec--dark）では ghost を白反転 */
.site-header .btn--ghost,
.sec--dark .btn--ghost,
#hero .btn--ghost{
  color:var(--white);
  border-color:var(--white);
}
.site-header .btn--ghost:hover,
.sec--dark .btn--ghost:hover,
#hero .btn--ghost:hover{
  background:rgba(255,255,255,.14);
}
.btn--block{ display:flex; width:100%; justify-content:center; }
.btn[disabled],.btn.is-disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }

/* 価格の数字専用（朱）。それ以外のテキストには使わない。 */
.price{ color:var(--shu); font-weight:700; }
.sec--dark .price{ color:#E8A896; } /* 濃緑地でもコントラストを保つ明るめの朱 */

/* ==========================================================================
   4. グリッド・カード
   ========================================================================== */
.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
@media (min-width:768px){
  .grid--2{ grid-template-columns:repeat(2,1fr); gap:40px; }
  .grid--3{ grid-template-columns:repeat(3,1fr); gap:28px; }
}

.card{
  background:var(--kinari-2);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 3px rgba(35,33,29,.08);
  transition:box-shadow .15s ease,transform .15s ease;
}
.card:hover{ box-shadow:0 8px 20px rgba(35,33,29,.14); transform:translateY(-2px); }
.card__media{ --ph-ratio:4/3; }
.card__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:2px; flex:1; }
.card__title{ font-family:var(--font-display); font-size:1.2rem; color:var(--sumi); margin-bottom:6px; }
.card__sub{ font-family:var(--font-body); font-size:.88rem; color:var(--sumi-60); margin-bottom:14px; }
a.card{ text-decoration:none; color:inherit; }
a.card .card__body::after{
  content:"詳しく見る →";
  margin-top:auto;
  padding-top:10px;
  font-size:.85rem;
  font-weight:700;
  color:var(--moss-deep);
  display:inline-block;
  transition:transform .15s ease;
}
a.card:hover .card__body::after{ transform:translateX(3px); }
.sec--dark a.card .card__body::after{ color:var(--moss-deep); }

/* カードを小さめに扱いたい場合（低解像度写真など）。カード全体を控えめな幅にする
   （写真だけを縮めると、下の説明文の箱だけ幅広に残って不釣り合いになるため）。 */
.card--compact{ max-width:260px; }
.card--compact .card__media{ --ph-ratio:16/10; }

/* ==========================================================================
   5. 写真（.ph） — 画像が無い場合も崩れない
   ========================================================================== */
.ph{
  position:relative;
  overflow:hidden;
  border-radius:inherit;
  aspect-ratio:var(--ph-ratio,4/3);
  background:
    repeating-linear-gradient(135deg,var(--moss-tint) 0 10px,var(--kinari) 10px 20px);
}
.ph__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  color:transparent;
  font-size:0;
}
/* 表示ラベルの実物など、根拠として小さく示したいだけの写真用。 */
.ph--small{ max-width:180px; }

.ph__note{
  position:absolute;
  left:8px; bottom:8px;
  max-width:calc(100% - 16px);
  background:rgba(35,33,29,.72);
  color:var(--white);
  font-family:var(--font-body);
  font-size:.68rem;
  line-height:1.5;
  padding:4px 9px;
  border-radius:var(--r);
}

/* ==========================================================================
   6. 下層ページの見出し帯
   ========================================================================== */
.page-hero{ background:var(--moss-deep); color:var(--white); padding:56px 0 44px; }
.page-hero__title{ font-family:var(--font-display); font-size:1.9rem; margin-bottom:12px; }
.page-hero__lead{ font-family:var(--font-body); font-size:.95rem; color:var(--moss-tint); max-width:64ch; line-height:1.9; }
@media (min-width:768px){
  .page-hero{ padding:76px 0 56px; }
  .page-hero__title{ font-size:2.3rem; }
}

/* ==========================================================================
   7. 表・フォーム・補足
   ========================================================================== */
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th,.tbl td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--moss-tint); vertical-align:top; }
.tbl th{ font-size:.76rem; letter-spacing:.04em; color:var(--sumi-60); font-weight:700; }
.tbl caption{ text-align:left; font-size:.8rem; color:var(--sumi-60); margin-bottom:8px; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.field__label{ font-size:.85rem; font-weight:700; color:var(--sumi); }
.field__ctrl{
  padding:.75em .9em;
  border:1px solid var(--moss-tint);
  border-radius:var(--r);
  font-family:var(--font-body);
  font-size:.95rem;
  background:var(--white);
  color:var(--sumi);
}
.field__ctrl:focus-visible{ border-color:var(--kiji); }
.field__note{ font-size:.76rem; color:var(--sumi-60); }

.note{
  background:var(--moss-tint);
  border-left:4px solid var(--moss);
  border-radius:var(--r);
  padding:14px 18px;
  font-size:.88rem;
  line-height:1.8;
}
.note--warn{ background:#FBF0DE; border-left-color:var(--kiji); }

/* ==========================================================================
   8. サイト共通インフラ（ヘッダー・フッター）
   layout.js が全ページへ描画するチューム。4章の「コンテンツ用クラス語彙」の対象外。
   衝突を避けるため site- 接頭辞で統一。
   ========================================================================== */
.site-header{ background:var(--moss-deep); color:var(--white); }
.site-header__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.site-logo{ display:inline-flex; align-items:center; color:var(--white); flex-shrink:0; }
.site-logo svg, .site-logo img{ width:148px; height:auto; }

.nav-toggle{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:36px;
  background:transparent;
  border:none;
  cursor:pointer;
}
.nav-toggle__bar{
  display:block;
  width:24px; height:2px;
  background:var(--white);
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.site-nav{
  display:none;
  width:100%;
  padding:8px 0 20px;
  border-top:1px solid rgba(255,255,255,.12);
}
.nav-toggle[aria-expanded="true"] + .site-nav{ display:block; }
.site-nav__list{ display:flex; flex-direction:column; }
.site-nav__list a{
  display:block;
  padding:12px 4px;
  color:var(--white);
  text-decoration:none;
  font-size:.92rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-nav__list a[aria-current="page"]{ font-weight:700; color:var(--moss-tint); }
.site-nav__cta{ margin-top:16px; }
.site-nav__cta .btn{ flex:1 1 auto; justify-content:center; }

@media (min-width:768px){
  .nav-toggle{ display:none; }
  .site-nav{
    display:flex !important;
    width:auto;
    padding:0;
    border-top:none;
    align-items:center;
    gap:32px;
  }
  .site-nav__list{ flex-direction:row; gap:26px; }
  .site-nav__list a{
    padding:6px 0;
    border-bottom:none;
    position:relative;
  }
  .site-nav__list a[aria-current="page"]::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-6px;
    height:2px; background:var(--white);
  }
  .site-nav__cta{ margin-top:0; display:flex; gap:10px; }
  .site-nav__cta .btn{ flex:none; }
}

.site-footer{ position:relative; background:var(--moss-deep); color:var(--white); padding-top:34px; }
.site-footer::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cpolygon points='8,9 2,24 14,24' fill='%231A2620'/%3E%3Cpolygon points='21,2 13,24 29,24' fill='%231A2620'/%3E%3Cpolygon points='33,7 27,24 39,24' fill='%231A2620'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:bottom left;
  background-size:110px 24px;
  pointer-events:none;
}
.site-footer__top{
  display:grid;
  gap:26px;
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.site-footer__logo{ width:150px; height:auto; }
.site-footer__about p{ margin:0 0 8px; font-size:.84rem; color:var(--moss-tint); line-height:1.85; }
.site-footer__sns{ font-size:.84rem; color:var(--moss-tint); }
.site-footer__nav{ padding-block:26px; } /* 左右は .wrap の 20px を残す（padding:26px 0 だと左端にくっつく） */
.site-footer__nav ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px 18px; font-size:.83rem; }
.site-footer__nav a{ color:var(--moss-tint); text-decoration:none; }
.site-footer__nav li{ text-wrap:balance; } /* 長いラベルが 2 行になるとき 1 文字だけ残らないようにする */
.site-footer__nav a:hover{ color:var(--white); text-decoration:underline; }
.site-footer__bottom{ text-align:center; padding:18px 0 22px; font-size:.78rem; color:var(--moss-tint); }
.back-to-top{
  position:absolute; right:20px; bottom:20px;
  width:42px; height:42px; border-radius:50%;
  background:var(--white); color:var(--moss-deep);
  border:none; font-size:1.05rem; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.back-to-top:hover{ background:var(--moss-tint); }

@media (min-width:768px){
  .site-footer__top{ grid-template-columns:auto 1fr auto; align-items:start; gap:48px; }
  .site-footer__nav ul{ grid-template-columns:repeat(3,1fr); }
}

/* ==========================================================================
   9. index.html 専用フック（id指定・クラス語彙は増やさない）
   ========================================================================== */
#hero{
  position:relative;
  isolation:isolate;
  min-height:78vh;
  display:flex;
  align-items:flex-end;
  color:var(--white);
  overflow:hidden;
}
#hero .ph{
  position:absolute; inset:0;
  aspect-ratio:auto;
  border-radius:0;
  z-index:-2;
}
#hero::after{
  content:"";
  position:absolute; inset:0;
  /* 動画の上に白文字を置くための可読性グラデーション。下端は特に濃くし、
     見出し・リード文・ボタンが常に高コントラストで読めるようにする。 */
  background:linear-gradient(180deg,rgba(20,26,20,.20) 0%,rgba(18,24,18,.55) 55%,rgba(15,20,15,.88) 100%);
  z-index:-1;
}
#hero .ph video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 58%;
}
@media (prefers-reduced-motion:reduce){
  #hero .ph video{ display:none; }
}
#hero .wrap{ padding-block:48px 56px; }
#hero-logo{ width:130px; height:auto; margin-bottom:16px; }
#hero h1{
  font-family:var(--font-display);
  font-size:2rem;
  line-height:1.5;
  margin-bottom:18px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
#hero .lead{ color:var(--white); margin-bottom:26px; max-width:44ch; }
@media (min-width:768px){
  #hero{ min-height:88vh; align-items:center; }
  #hero-logo{ width:360px; margin-bottom:24px; }
  #hero h1{ font-size:2.9rem; }
}

#rates .tbl{ background:var(--kinari-2); border-radius:var(--r); overflow:hidden; }
#rates .tbl td:last-child,#rates .tbl th:last-child{ text-align:right; font-weight:700; }

#concept .lead{ white-space:pre-line; }
#concept-signature{
  display:block;
  margin-top:18px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  letter-spacing:.06em;
  color:var(--kiji);
}
#concept-photos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}
#concept-photos .ph{ --ph-ratio:1; }

#concept-side{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--moss);
}
#concept-side p{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.95rem;
  letter-spacing:.14em;
  line-height:1.9;
}
#concept-side svg{ width:60px; height:auto; color:var(--moss); }
@media (min-width:768px){
  #concept .grid--2{ align-items:center; }
}

#reserve-cta-inner{
  display:grid;
  gap:28px;
}
@media (min-width:768px){
  #reserve-cta-inner{ grid-template-columns:1fr 1fr; align-items:center; }
}

/* ==========================================================================
   10. 規約・ポリシーなど長い文章のページ（privacy / terms / shop-terms / cancel-policy）
   .wrap--narrow と同じ要素に .doc を付けて使う。リストの点・番号は上の共通リセットで
   消えているため、このブロックの中だけ戻す。表は .table-scroll で包んで使う。
   ========================================================================== */
.doc{ font-size:.95rem; line-height:1.95; }
.doc > * + *{ margin-top:14px; }
.doc h2{
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.5;
  margin-top:48px;
  padding-bottom:8px;
  border-bottom:2px solid var(--moss-tint);
}
.doc > h2:first-child{ margin-top:0; }
.doc h3{
  font-size:1rem;
  line-height:1.6;
  margin-top:28px;
  color:var(--moss-deep);
}
.doc ul{ list-style:disc; padding-left:1.5em; }
.doc ol{ list-style:decimal; padding-left:1.7em; }
.doc ul.doc__paren{ list-style:none; padding-left:.4em; }
.doc li + li{ margin-top:6px; }
.doc li > ul,.doc li > ol{ margin-top:6px; }
.doc .table-scroll{ border:1px solid var(--moss-tint); border-radius:var(--r); }
.doc .tbl th,.doc .tbl td{ font-size:.86rem; line-height:1.75; }
.doc .tbl th[scope="row"]{ color:var(--sumi); }
.doc .tbl:not(.tbl--stack) th[scope="row"]{ white-space:nowrap; }
/* 列の多い表（privacy.html の外部サービス一覧など）。狭い画面では 1 行ずつ縦に積む。
   各 td に data-label で見出しを持たせる。 */
.doc .tbl--stack{ min-width:640px; }
@media (max-width:720px){
  .doc .tbl--stack{ min-width:0; }
  .doc .tbl--stack,.doc .tbl--stack tbody{ display:block; }
  .doc .tbl--stack thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .doc .tbl--stack tr{ display:block; padding:14px 14px 4px; border-bottom:1px solid var(--moss-tint); }
  .doc .tbl--stack tr:last-child{ border-bottom:0; }
  .doc .tbl--stack th,.doc .tbl--stack td{ display:block; padding:0 0 10px; border-bottom:0; }
  .doc .tbl--stack td::before{
    content:attr(data-label);
    display:block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--sumi-60);
  }
}

/* ==========================================================================
   11. （欠番）電話番号のリンクの決まりは、電話番号を載せないことにしたので外した
   （決定 inline-2026-10-14-no-phone-hide-shop・DD-05-069。出力に電話のリンクの文字が 1 つも無いことをビルドが確かめる）
   ========================================================================== */

/* ==========================================================================
   12. 予約のページ（reserve.html）。#rsv-root（.rsv）の中だけに効く。上の既存の決まりは変えない。
   幅に効く決まり（.wrap など）は触らない（layout-sizes.mjs の定数と対＝code-invariants S-4）。
   ========================================================================== */
/* .field・.cluster などは display を持つので、hidden を確実に効かせる */
.rsv [hidden]{ display:none !important; }
/* 入力欄そのものに .field__ctrl を付ける。文字は 16px 以上（iOS が入力で画面を拡大しない） */
.rsv .field__ctrl{ width:100%; min-width:0; min-height:44px; font-size:16px; line-height:1.5; }
.rsv .field__ctrl[readonly]{ background:var(--kinari-2); }
.rsv .field__ctrl[aria-invalid="true"]{ border:2px solid var(--kiji); }
.rsv .rsv-err{ color:var(--kiji); font-size:.84rem; font-weight:700; }
.rsv .note p + p{ margin-top:6px; }
.rsv-sub{ margin-bottom:6px; font-size:1rem; line-height:1.6; color:var(--moss-deep); }
.rsv .tbl th,.rsv .tbl td{ padding:10px; }
.rsv .tbl th{ width:38%; }
.rsv .tbl td{ overflow-wrap:anywhere; }

/* カレンダー（7 列。375px 幅でも横にあふれない） */
.rsv-cal__nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rsv-cal__nav .btn{ padding:.6em 1em; font-size:.85rem; }
.rsv-cal__month{ flex:1; text-align:center; font-family:var(--font-display); font-size:1.1rem; font-weight:600; }
.rsv-cal{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:3px; }
.rsv-cal th{ padding:4px 0; text-align:center; font-size:.72rem; font-weight:700; color:var(--sumi-60); }
.rsv-cal td{ padding:0; text-align:center; vertical-align:top; }
.rsv-day{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; min-width:0; min-height:48px; padding:2px 0;
  border:1px solid var(--moss-tint); border-radius:var(--r);
  background:var(--white); color:var(--sumi);
  font-family:inherit; line-height:1.25;
}
.rsv-day__n{ font-size:.8rem; }
.rsv-day__m{ font-size:1rem; font-weight:700; }
button.rsv-day{ cursor:pointer; }
.rsv-day--open{ border-color:var(--moss); background:var(--kinari-2); color:var(--moss-deep); }
.rsv-day--open:hover{ background:var(--moss-tint); }
.rsv-day--open[aria-pressed="true"]{ border-color:var(--moss); background:var(--moss); color:var(--white); }
.rsv-day--today{ border-style:dashed; border-color:var(--kiji); background:var(--white); color:var(--kiji); }
.rsv-day--today .rsv-day__m{ font-size:.72rem; }
.rsv-day--off{ border-color:transparent; background:transparent; color:var(--sumi-60); }
.rsv-day--x{ border-color:var(--moss-tint); background:var(--kinari); }

/* ==========================================================================
   13. 注文のページ（order）と、決済の後・やめたときのページ（order-complete・order-cancelled）。
   #ord-root・#oc-root・#ox-root（.ord）の中だけに効く。上の既存の決まりは変えない。
   幅に効く決まり（.wrap など）は触らない（layout-sizes.mjs の定数と対＝code-invariants S-4）。
   商品の写真は、実行時に API の image_url から作る（原稿に <img> を書かない）ので、画像の sizes の推定には入らない。
   ========================================================================== */
.ord [hidden]{ display:none !important; }
.ord .field__ctrl{ width:100%; min-width:0; min-height:44px; font-size:16px; line-height:1.5; }
.ord .field__ctrl[aria-invalid="true"]{ border:2px solid var(--kiji); }
.ord .ord-err{ color:var(--kiji); font-size:.84rem; font-weight:700; }
.ord .note p + p{ margin-top:6px; }
.ord .tbl th,.ord .tbl td{ padding:10px; }
.ord .tbl th{ width:38%; }
.ord .tbl td{ overflow-wrap:anywhere; }
.ord-sub{ margin-bottom:6px; font-size:1rem; line-height:1.6; color:var(--moss-deep); }

/* 商品の欄（写真・名前・価格・説明・在庫の状態・数量） */
.ord-list{ display:grid; gap:14px; }
.ord-item{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; padding:14px; background:var(--kinari-2); border:1px solid var(--moss-tint); border-radius:var(--r); }
.ord-item--off{ opacity:.7; }
.ord-item__img{ width:88px; height:88px; object-fit:contain; border-radius:var(--r); background:var(--moss-tint); }
.ord-item__ph{ width:88px; height:88px; border-radius:var(--r); background:var(--moss-tint); }
.ord-item__name{ font-family:var(--font-display); font-size:1.05rem; line-height:1.5; color:var(--moss-deep); }
.ord-item__meta{ font-size:.88rem; }
.ord-item__desc{ margin-top:4px; font-size:.82rem; line-height:1.7; color:var(--sumi-60); overflow-wrap:anywhere; }
.ord-badge{ display:inline-block; margin-left:.5em; padding:0 .7em; border-radius:999px; background:#FBF0DE; color:var(--kiji); font-size:.72rem; font-weight:700; line-height:1.9; }
.ord-qty{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; }
.ord-qty__btn{ width:44px; height:44px; border:1px solid var(--moss); border-radius:var(--r); background:var(--white); color:var(--moss-deep); font-size:1.25rem; line-height:1; cursor:pointer; }
.ord-qty__btn[disabled]{ opacity:.4; cursor:not-allowed; }
.ord .ord-qty__val{ width:64px; text-align:center; }
@media (min-width:560px){
  .ord-item{ grid-template-columns:120px minmax(0,1fr); }
  .ord-item__img,.ord-item__ph{ width:120px; height:120px; }
}

/* カートの合計・最終確認の 6 項目 */
.ord-sum td:last-child{ text-align:right; white-space:nowrap; }
.ord-sum .ord-total th,.ord-sum .ord-total td{ font-size:1.05rem; color:var(--sumi); border-bottom:0; }
.ord-six{ display:grid; gap:12px; }
.ord-six__row{ padding:12px 14px; background:var(--kinari-2); border:1px solid var(--moss-tint); border-radius:var(--r); }
.ord-six__label{ margin-bottom:4px; font-size:.82rem; font-weight:700; color:var(--moss-deep); }
.ord-six__body{ font-size:.92rem; line-height:1.8; overflow-wrap:anywhere; }
.ord-six__body ul{ list-style:none; }
.ord-six__body li + li{ margin-top:2px; }
.ord-steps{ margin-bottom:6px; font-size:.78rem; color:var(--sumi-60); }