@charset "utf-8";

/* =============================================================
   手打うどん きさく ─ 第二案（和風・縦組み）
   第一案の style.css とは完全に独立。互いに影響しません。
   配色は第一案を継承しつつ、配分を変える：
     生成り #f4eee1 を地に、墨 #22201d を文字、藍 #1b3b5f を罫と見出し、
     朱 #b4432c は印章としてごく少量だけ使う（絞るほど格が上がる）
   ============================================================= */
:root {
  --ai:     #1b3b5f;
  --ai-p:   #3c5f85;
  --shu:    #b4432c;
  --kinari: #f4eee1;
  --washi:  #faf6ec;
  --sumi:   #22201d;
  --gray:   #6b6459;
  --rule:   #c9bfa9;
  --midashi: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --honbun:  "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  /* 品書きの短冊だけ手書き（筆）風。Klee One に替えると硬筆・鉛筆書き風になります */
  --tegaki:  "Yuji Syuku", "HG正楷書体-PRO", "HGSeikaishotaiPRO", "Yu Mincho", "YuMincho", serif;

  /* 青海波（せいがいは）─ 外部素材を使わず SVG で自作。文様自体は数百年前からの意匠 */
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%231b3b5f' stroke-opacity='.16' stroke-width='1.3'%3E%3Cpath d='M0 30a30 30 0 0 1 60 0'/%3E%3Cpath d='M7.5 30a22.5 22.5 0 0 1 45 0'/%3E%3Cpath d='M15 30a15 15 0 0 1 30 0'/%3E%3Cpath d='M22.5 30a7.5 7.5 0 0 1 15 0'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--honbun);
  font-size: 1.125rem;
  line-height: 2.0;
  color: var(--sumi);
  background: var(--kinari);
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;          /* ページ全体の横スクロールは絶対に出さない */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ai); }
a:hover { color: var(--shu); }

.wrap { width: 100%; max-width: 60rem; margin-inline: auto; padding-inline: 1.5rem; }

/* ===== 見出し（縦組みの柱） ===== */
.tate-midashi {
  writing-mode: vertical-rl;
  font-family: var(--midashi);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .28em;
  color: var(--ai);
  margin: 0 auto 2.5rem;
  padding-block: .5rem;
  border-block: 1px solid var(--ai);
  height: auto;
}
.tate-midashi::before, .tate-midashi::after { content: none; }

.sec { padding-block: 5rem; }
.sec--washi { background: var(--washi); }

/* 罫線＋中央の丸紋で区切る */
.kugiri {
  display: flex; align-items: center; gap: 1rem;
  max-width: 60rem; margin: 0 auto; padding-inline: 1.5rem;
}
.kugiri::before, .kugiri::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.kugiri img { width: 2.25rem; height: 2.25rem; border-radius: 50%; opacity: .85; }

/* =============================================================
   ヒーロー ─ 5枚のスライドショー（Ken Burns）
   フェードは親（.slide）、拡縮・パンは子（img）に分けて管理する
   ============================================================= */
.hero { position: relative; height: min(74vh, 660px); overflow: hidden; background: var(--ai); }
.hero__stage { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; animation: fade 40s linear infinite; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 8s; }
.slide:nth-child(3) { animation-delay: 16s; }
.slide:nth-child(4) { animation-delay: 24s; }
.slide:nth-child(5) { animation-delay: 32s; }

@keyframes fade {
   0%   { opacity: 0 }
   4%   { opacity: 1 }
  20%   { opacity: 1 }
  24%   { opacity: 0 }
 100%   { opacity: 0 }
}

/* Ken Burns：動きは控えめに（拡縮1.10以内・移動±2%）。大きいと酔います */
.slide:nth-child(1) img { animation: kb-in    40s linear infinite; }
.slide:nth-child(2) img { animation: kb-out   40s linear infinite; transform-origin: 45% 45%; animation-delay: 8s; }  /* 店主の手元に寄る */
.slide:nth-child(3) img { animation: kb-inpan 40s linear infinite; animation-delay: 16s; }
.slide:nth-child(4) img { animation: kb-out   40s linear infinite; animation-delay: 24s; }
.slide:nth-child(5) img { animation: kb-pan   40s linear infinite; animation-delay: 32s; }

@keyframes kb-in    {  0% { transform: scale(1.00) }  24% { transform: scale(1.07) } 100% { transform: scale(1.07) } }
@keyframes kb-out   {  0% { transform: scale(1.08) }  24% { transform: scale(1.00) } 100% { transform: scale(1.00) } }
@keyframes kb-inpan {  0% { transform: scale(1.03) translateX(0) }    24% { transform: scale(1.10) translateX(-2%) } 100% { transform: scale(1.10) translateX(-2%) } }
@keyframes kb-pan   {  0% { transform: scale(1.06) translateX(2%) }   24% { transform: scale(1.06) translateX(-2%) } 100% { transform: scale(1.06) translateX(-2%) } }

/* 屋号は画像に焼き込まず、必ずHTMLのテキストで重ねる */
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,32,48,.06) 40%, rgba(20,32,48,.52) 100%);
}
/* 屋号は縦書きで固定。右に「手打うどん」、その左に大きく「きさく」の二列組み。
   縦組みでは flex-direction: column が「右から左」に並ぶ方向になります。 */
.hero__name {
  position: absolute; top: 2.75rem; right: 2rem; bottom: 2.75rem;
  writing-mode: vertical-rl;
  text-orientation: upright;          /* 文字を常に立てる（横倒しにさせない） */
  font-family: var(--midashi); font-weight: 700; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;             /* 縦組みでは block 方向＝右→左 */
  align-items: flex-start;            /* 上端をそろえる */
  gap: .875rem;
}
.hero__name .kanmuri {
  writing-mode: vertical-rl; white-space: nowrap;
  font-size: clamp(.875rem, 2.3vw, 1.0625rem);
  letter-spacing: .34em;
}
.hero__name .yago {
  writing-mode: vertical-rl; white-space: nowrap;
  font-size: clamp(2.5rem, 7.5vw, 3.75rem);
  letter-spacing: .12em;
  padding-top: 1.5rem;                /* 冠より少し下げて始める（縦組みでは block 方向が横になるため物理指定） */
}
.hero__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(27,59,95,.88); color: var(--kinari);
  padding: .75rem 1.5rem; text-align: center;
  font-size: 1rem; letter-spacing: .06em;
}
.hero__info b { color: #f0c9a8; font-weight: 700; }

/* 青海波の帯 */
.nami {
  height: 30px;
  background-image: var(--seigaiha), var(--seigaiha);
  background-size: 60px 30px;
  background-position: 0 0, 30px 15px;
  background-color: var(--kinari);
}

/* ===== 目次（ページ先頭のジャンプメニュー） ===== */
.mokuji { background: var(--washi); border-bottom: 1px solid var(--rule); }
.mokuji ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  max-width: 60rem; margin: 0 auto; padding: .5rem 1rem;
  list-style: none;
}
.mokuji li { display: flex; }
.mokuji li + li { border-left: 1px solid var(--rule); }   /* 区切りの細罫 */
.mokuji a {
  display: flex; align-items: center; min-height: 2.75rem;   /* 押しやすい高さ */
  padding: .25rem 1.125rem;
  font-family: var(--midashi); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: .16em; text-indent: .16em;
  color: var(--ai); text-decoration: none;
}
.mokuji a:hover { color: var(--shu); background: var(--kinari-d, transparent); }

/* 飛んだ先の見出しが画面の上端に貼りつかないように */
section[id] { scroll-margin-top: 1.25rem; }

.to-top { margin-top: 2.25rem; }
.to-top a { color: #c3d2e2; font-size: .9375rem; letter-spacing: .1em; text-decoration: none; }
.to-top a:hover { color: #fff; }

/* ===== 口上 ===== */
.kojo { max-width: 38rem; margin-inline: auto; text-align: center; }
/* 手で入れた改行は、広い画面でだけ効かせる。
   狭い画面で効かせると、かえって中途半端なところで折り返してしまうため */
.br-pc { display: none; }
@media (min-width: 42rem) { .br-pc { display: inline; } }
.kojo p { margin: 0 0 1.5rem; font-size: 1.1875rem; line-height: 2.2; }
.kojo .shirushi {
  display: inline-block; margin-top: .5rem;
  font-family: var(--midashi); color: var(--shu);
  border: 1px solid var(--shu); border-radius: 3px;
  padding: .25rem .5rem; font-size: .9375rem; letter-spacing: .2em;
  writing-mode: vertical-rl;
}

/* =============================================================
   お品書き（縦書き）
   vertical-rl では「高さ」が行の長さ、「幅」は列数で決まります
   ============================================================= */
/* 御品書と日替りを、二枚の短冊として並べる（狭い画面では縦に積む） */
/* 御品書と日替りは、二枚の短冊を上下に重ねて並べる。
   一列のグリッドなので、どちらの枠も必ず同じ幅になります */
.shina-wrap {
  overflow-x: auto; padding-block: .5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; justify-items: stretch;
  max-width: 40.5rem; margin-inline: auto;   /* ★枠の横幅。増減はここ */
}
.shina {
  writing-mode: vertical-rl;
  display: flex; flex-direction: column;   /* 縦組みでは block 方向＝右から左 */
  gap: .5em;
  justify-content: space-between;  /* 列を枠の幅いっぱいに散らす（縦組みでは主軸＝横） */
  line-height: 1.4;          /* 縦組みでは line-height が「列の幅」を決めます */
  height: 21rem;
  width: 100%;
  font-family: var(--tegaki);
  background: var(--washi);
  border: 1px solid var(--ai);
  padding: 2rem 2.25rem;
  position: relative;
}
/* 見出しの列に入りきらず折り返していたので、独立した列にした */
.shina__zenpin {
  margin: 0; align-self: flex-start; white-space: nowrap;
  font-size: 1.0625rem;      /* ＝ .shina__hin と同じ大きさ */
  font-weight: 400; letter-spacing: .1em; color: var(--gray);
}
.shina__title {
  margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: .32em;
  color: var(--ai); align-self: flex-start;
}
.shina__row {
  display: flex; flex-direction: row;      /* 縦組みでは inline 方向＝上から下 */
  justify-content: space-between;
  height: 100%;
  font-size: 1.1875rem; letter-spacing: .1em;
}
.shina__row--main { font-weight: 700; font-size: 1.3125rem; }
/* 大盛：もり・かけの脇に添える一列。主役の二品より控えめにし、落款は押さない */
.shina__row--sub { font-size: 1.0625rem; font-weight: 400; }
.shina__row--sub > span:first-child { padding-top: 1.5em; }
/* 大盛は括弧でくくり、品名と値段を上下に振り分けずひと続きに書く。
   独立した品ではなく「うどんの但し書き」だと一目で分かります。
   縦書きは行が右→左に進むので、margin-block-end が「左隣（天ぷらの列）との間」になります */
.shina__row--tsuzuki {
  justify-content: flex-start; margin-block-end: 1.5em;
  letter-spacing: .04em;     /* 文が長いので字間を詰め、狭い画面でも列に収める */
}
.shina__row--tsuzuki > span:first-child { padding-top: 0; }   /* 但し書きなので頭から書く */
.shina__row .nedan { color: var(--ai); font-weight: 700; }
/* 日替りの短冊：一品ずつを一列に。改行が生じないので端がそろいます */
.shina--hi { background: var(--kinari); border-color: var(--rule); gap: .5em; padding-left: 2.25rem; }
.shina--hi .shina__title { font-size: 1.25rem; letter-spacing: .22em; }
.shina__hin {
  font-size: 1.0625rem; letter-spacing: .1em; white-space: nowrap;
  align-self: flex-start;
}
.shina__soegaki {
  margin: 0; font-size: .875rem; line-height: 1.7; color: var(--gray);
  letter-spacing: .06em; align-self: flex-start;
}
/* 落款「手打」は、もりうどん・かけうどんの列のなかに置く。
   列は「品名 → 落款 → 値段」を上下に振り分ける（justify-content: space-between）*/
.shina__inkan {
  flex: none; align-self: center;
  width: 1.75rem; height: 2.5rem; border-radius: 3px;
  background: var(--shu); color: var(--kinari);
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; font-weight: 400;
  font-size: .875rem; letter-spacing: .08em;
}
.shina-soe { text-align: center; margin: 2rem auto 0; max-width: 32rem; font-size: 1rem; color: var(--gray); }

/* ===== お料理（写真） ===== */
/* 料理写真は本文や店内写真より一回り小さく見せる。
   枠の幅で大きさを抑え、列の数は画面幅で切り替える */
.ryori {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  max-width: 46rem; margin-inline: auto;
}
.ryori figure { margin: 0; }
.ryori img { width: 100%; border: 1px solid var(--rule); }
.ryori figcaption {
  margin-top: .625rem; font-size: .9375rem; color: var(--gray);
  text-align: center; line-height: 1.7;
}
.ryori figcaption b {
  color: var(--ai); font-family: var(--midashi); font-weight: 700;
  letter-spacing: .08em;
}
.ryori--3 { gap: .875rem; }

/* 小見出し。両側に細い罫を引く */
.koban {
  display: flex; align-items: center; gap: 1.25rem;
  max-width: 46rem; margin: 3.5rem auto 1.75rem;
  font-family: var(--midashi); font-weight: 700;
  font-size: 1.25rem; color: var(--ai);
  letter-spacing: .3em; text-indent: .3em;
}
.koban::before, .koban::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* ===== 手仕事 ===== */
.tesigoto { display: grid; gap: 2.5rem; }
.tesigoto p { margin: 0 0 1.375rem; }
.tesigoto figure { margin: 0; }
.tesigoto img { width: 100%; border: 1px solid var(--rule); }
.tesigoto figcaption { margin-top: .625rem; font-size: .9375rem; color: var(--gray); text-align: center; }

/* ===== 土地の記 ===== */
.tochi { background: var(--ai); color: var(--kinari); }
.tochi .tate-midashi { color: var(--kinari); border-color: rgba(244,238,225,.45); }
.tochi__body { max-width: 36rem; margin-inline: auto; }
.tochi__body p { margin: 0 0 1.5rem; }
.tochi__body .ryu { color: #f0c9a8; font-weight: 700; }

/* ===== 店内 ===== */
.zashiki { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.zashiki figure { margin: 0; }
.zashiki img { width: 100%; border: 1px solid var(--rule); }
.zashiki figcaption { margin-top: .5rem; font-size: .9375rem; color: var(--gray); }

/* ===== ご案内 ===== */
.annai { max-width: 42rem; margin-inline: auto; }
.annai__row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem;
  padding-block: 1.125rem; border-bottom: 1px solid var(--rule);
}
.annai__row dt { font-family: var(--midashi); font-weight: 700; color: var(--ai); letter-spacing: .1em; }
.annai__row dd { margin: 0; }
.annai__row .sub { display: block; font-size: .9375rem; color: var(--gray); margin-top: .25rem; }
.shu-flag { color: var(--shu); font-weight: 700; border-bottom: 2px solid var(--shu); }

.btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .75rem 1.75rem;
  font-family: var(--midashi); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: .14em; text-decoration: none;
  border: 1px solid var(--ai); color: var(--ai); background: transparent;
}
.btn:hover { background: var(--ai); color: var(--kinari); }
.btn--shu { border-color: var(--shu); color: var(--shu); }
.btn--shu:hover { background: var(--shu); color: #fff; }
.btn svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

/* ===== フッター ===== */
.footer { background: var(--ai); color: var(--kinari); text-align: center; padding-block: 3rem; }
.footer img { width: 4.5rem; height: 4.5rem; border-radius: 50%; margin: 0 auto 1.25rem; }
.footer .yago { font-family: var(--midashi); font-size: 1.375rem; font-weight: 700; letter-spacing: .18em; }
.footer p { margin: .375rem 0; font-size: 1rem; }
.footer a { color: #c3d2e2; }
.footer .fine { margin-top: 1.75rem; font-size: .8125rem; color: #90a4bb; line-height: 1.8; }

/* 料理写真の列数。ほかより早い段階で2列・3列にする */
@media (min-width: 34rem) {
  .ryori { grid-template-columns: 1fr 1fr; }
  .ryori--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 画面が広いとき ===== */
@media (min-width: 44rem) {
  .sec { padding-block: 6.5rem; }
  .tate-midashi { font-size: 1.75rem; }
  .tesigoto { grid-template-columns: 1fr 1fr; align-items: center; }
  .zashiki { grid-template-columns: 1fr 1fr; }
  .shina { height: 24rem; }
  .hero__name { top: 3.5rem; bottom: 3.5rem; right: 3rem; }
}

/* ===== 画面が狭いとき ===== */
@media (max-width: 26rem) {
  body { font-size: 1.0625rem; }
  /* 縦組みでは gap が「列の間隔」＝横幅に効きます。狭い画面では詰めて収める */
  .shina { height: 18rem; padding: 1.25rem 1rem; gap: .45em; }
  .shina__inkan { width: 1.5rem; height: 2.125rem; font-size: .75rem; }
  .shina__row { font-size: .9375rem; }
  .shina__row--main { font-size: 1rem; }
  .shina__title { font-size: 1rem; }
  .shina--hi .shina__title { font-size: .9375rem; }
  .shina__hin, .shina__zenpin { font-size: .9375rem; }
  .annai__row { grid-template-columns: 1fr; gap: .25rem; }
  .hero { height: min(68vh, 520px); }
  .mokuji a { font-size: .9375rem; padding: .25rem .75rem; }
  .koban { font-size: 1.0625rem; margin: 2.75rem 0 1.25rem; }
}

/* =============================================================
   動きを減らす設定の端末では、スライドショーを止めて1枚目を静止表示
   （高齢の閲覧者が多い前提。動きを止めても情報は欠けません）
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide, .slide img { animation: none !important; }
  .slide { opacity: 0; }
  .slide:nth-child(1) { opacity: 1; }
}

/* ===== 一時掲示：メニュー変更のお知らせ（2026年9月9日〜） =====
   落ち着いたら、このブロックごと削除してください。
   .shina__row--sub（大盛）だけは恒久的なので残します。 */
.oshirase-obi {
  margin: 0; background: var(--kinari); border-bottom: 1px solid var(--rule);
  text-align: center; font-size: .9375rem; letter-spacing: .06em; line-height: 1.8;
}
.oshirase-obi a { display: block; padding: .625rem 1.5rem; color: var(--sumi); text-decoration: none; }
.oshirase-obi a::before {
  content: "お知らせ"; color: var(--shu); margin-right: .75em; letter-spacing: .16em;
}
.oshirase-obi a:hover { color: var(--shu); }

.oshirase {
  max-width: 36rem; margin: 3rem auto 0; padding: 1.75rem 1.5rem 1.5rem;
  background: var(--washi); border-block: 1px solid var(--shu);
  text-align: center; line-height: 2; scroll-margin-top: 1.25rem;
}
.oshirase__title {
  margin: 0 0 .75rem; font-family: var(--midashi); font-weight: 700;
  font-size: 1rem; letter-spacing: .32em; text-indent: .32em; color: var(--shu);
}
.oshirase p { margin: 0 0 1rem; font-size: 1.0625rem; }
.oshirase p:last-child { margin-bottom: 0; }
.oshirase__list {
  list-style: none; margin: 0 0 1rem; padding: 0;
  font-family: var(--midashi); font-weight: 700; color: var(--ai);
  font-size: 1.0625rem;      /* 本文と同じ大きさ。大きいと1行に収まらず「ます」だけ次行に落ちる */
}
.oshirase__list li::before { content: "・"; }
/* ===== 一時掲示ここまで ===== */