/* ============================================================================
   祇園（伊東温泉 いなり寿し）サイト共通スタイル - style.css（1ファイルにまとめたもの）

   【目次】読み込み順（詳細度の弱い順）そのままに並べています。
   ページ内検索でこの見出しコメントに一致するキーワードを探すと該当箇所へ飛べます。

     1. Foundation / Reset      … リセットCSS
     2. Foundation / Variable   … 色・余白・フォント等のCSS変数
     3. Foundation / Base       … html/body等の基本スタイル
     4. Layout / Container      … .l-container, .l-section（コンテンツ幅・背景色）
     5. Layout / Header         … .l-header（ヘッダー）
     6. Layout / Footer         … .l-footer（フッター）
     7. Component / Button      … .c-btn
     8. Component / Heading     … .c-heading（花飾り見出し）
     9. Component / Nav         … .c-nav（グローバルナビ）
    10. Component / Hamburger   … .c-hamburger（SPメニュー開閉ボタン）
    11. Component / Card        … .c-card（商品カード）
    12. Component / Breadcrumb  … .c-breadcrumb（下層ページ用パンくず）
    13. Component / Form        … .c-form（フォーム部品）
    14. Project / MV            … .p-mv（メインビジュアル）
    15. Project / Greeting      … .p-greeting（ご挨拶）
    16. Project / History       … .p-history（祇園の歴史／タイムライン）
    17. Project / Kodawari      … .p-kodawari（いなり寿しへのこだわり）
    17b. Project / KodawariDetail … .p-kodawari-detail（こだわり詳細：米/揚げ/味）
    18. Project / Products      … .p-products（商品情報）
    19. Project / Shop          … .p-shop（店舗情報）
    20. Project / PageHeader    … .p-page-header（下層ページ共通タイトル）
    21. Project / Contact       … .p-contact（お問い合わせページ）
    22. Utility / Spacing       … .u-mt-*, .u-mb-* など
    23. Utility / Display       … .u-pc-only, .u-sp-only, .u-br-pc など
    24. Utility / Text          … .u-text-*, .u-fw-* など

   ※ 新しいページを作る際もこの1ファイルに追記していく運用とする。
      追記する場所は必ず該当レイヤーのブロック内（例：新しいプロジェクト用
      クラスは「Project」のブロックの中、既存プロジェクトの後ろ）に置くこと。
   ============================================================================ */

/* ==========================================================================
   Foundation / Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
dl, dd,
figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ==========================================================================
   Foundation / Variable
   ガイドライン 3章(余白) / 4章(コンテンツ幅) / 9章(共通CSS) 準拠
   ========================================================================== */
:root {
  /* ---------- color ---------- */
  --color-primary: #b3372c;      /* 花飾り・ロゴ・アクセントの朱赤 */
  --color-primary-dark: #8f2b22;
  --color-bg-cream: #fff6ef;     /* 祇園の歴史・商品情報セクションの淡いクリーム（元素材より採取） */
  --color-bg-peach: #fdebdd;     /* ご挨拶・こだわり・店舗情報セクションのピーチベージュ（元素材より採取） */
  --color-bg-white: #ffffff;
  --color-text-base: #3a2e28;    /* 本文の焦茶 */
  --color-text-sub: #6b5d52;
  --color-border: #d8c9ba;
  --color-white: #ffffff;
  --color-accent-yellow: #d9a441; /* （現在未使用）予備のアクセントカラー */
  --color-timeline: #f29b00;      /* 祇園の歴史タイムラインの線色（元素材より採取） */

  /* ---------- font ---------- */
  --font-serif: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-sans: "游ゴシック体", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

  --fs-lv1: 35px;
  --fs-lv2: 31px;
  --fs-lv3: 21px;
  --fs-base: 18px;
  --fs-small: 16px;

  --lh-base: 1.9;
  --lh-heading: 1.5;

  /* ---------- spacing (8pxベース) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ---------- layout ---------- */
  --content-width: 1140px;
  --content-width-wide: 1280px;
  --side-padding-pc: 40px;
  --side-padding-sp: 20px;
  --header-height: 60px;

  /* ---------- radius / shadow ---------- */
  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-card: 0 4px 16px rgba(58, 46, 40, 0.08);

  /* ---------- z-index ---------- */
  --z-header: 100;
  --z-modal: 1000;
}

/* スクロールで出現する */
.fadein_scroll {
	opacity: 0;
  	transform: translateY(-30px);
}
.fadein_scroll.is-active {
	animation: fadein_scroll 1.3s ease 0s forwards;/* ショートハンド　名前、掛かる時間、変化する速度、0.5秒遅れて動作、1回のみ、最後のスタイル */
}

@keyframes fadein_scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  	transform: translateY(0px);
  }
}
/* スクロールで出現する end */


/*
  ブレイクポイント（コメントとして明記。メディアクエリ側で直接数値を使用）
  SP     : 〜767px
  Tablet : 768px〜1023px（必要な場合のみ使用）
  PC     : 1024px〜
*/
/* ==========================================================================
   Foundation / Base
   ========================================================================== */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-base);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: break-word;
}

a {
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

/* キーボード操作時のフォーカスを明示（アクセシビリティ） */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* ==========================================================================
   Layout / Container, Section
   ========================================================================== */
.l-container {
  width: 100%;
  max-width: calc(var(--content-width) + var(--side-padding-pc) * 2);
  margin-inline: auto;
  padding-inline: var(--side-padding-pc);
}

@media (max-width: 767px) {
  .l-container {
    padding-inline: var(--side-padding-sp);
  }
}

/* セクション共通の外枠。上下の余白と背景色をここで一括管理する */
.l-section {
  padding-block: var(--space-7);
  /* アンカーリンクで移動した際、見出しがヘッダーに隠れないための余白 */
  scroll-margin-top: 110px;
  /* 和紙の繊維テクスチャ。乗算(multiply)で重ねることで、各背景色modifierの色味を保ったまま質感だけ足す */
  background-image: url("../img/common/washi-texture.png");
  background-repeat: repeat;
  background-blend-mode: multiply;
}

.l-section--bg-cream {
  background-color: var(--color-bg-cream);
}

.l-section--bg-peach {
  background-color: var(--color-bg-peach);
}

.l-section--bg-white {
  background-color: var(--color-bg-white);
}

.l-section--flush {
  padding-block: 0;
}

@media (max-width: 767px) {
  .l-section {
    padding-block: var(--space-6);
    scroll-margin-top: 80px;
  }
}
/* ==========================================================================
   Layout / Header
   PC：1行構成。左＝ロゴ（右側グループの高さに対して縦中央）／
       右＝お問合せボタンとグローバルナビを1つにまとめたグループ
   SP：ロゴ＋ハンバーガーの1行。お問合せボタンはハンバーガーメニュー内へ。
   ========================================================================== */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-bg-white);
  /*background-image: url("../img/common/washi-texture.png");*/
  background-repeat: repeat;
  background-blend-mode: multiply;
  margin-bottom: 10px; /* ヘッダーとメインビジュアルの間の余白 */
}

.l-header__inner {
  display: flex;
  align-items: center; /* ロゴを右側グループの高さに対して縦中央に */
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3); /* 余裕は持たせつつ、ロゴ上の余白を抑える */
}

.l-header__logo {
  flex-shrink: 0;
}

.l-header__logo img {
  height: 50px;
  width: auto;
}

/* お問合せボタン＋グローバルナビをまとめた右側グループ（PC） */
.l-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.l-header__utility-inner {
  display: flex;
  justify-content: flex-end;
}

.l-header__nav {
  display: flex;
  justify-content: flex-end;
}

/* SPのみ表示するお問合せCTA（ハンバーガーメニュー内・最下部） */
.l-header__nav-cta {
  padding: var(--space-4) var(--side-padding-sp);
}

.l-header__nav-cta .c-btn {
  width: 100%;
}

/* ヘッダーとメインビジュアルの境目はメインビジュアル側でぼかす（p-mv参照） */

@media (max-width: 767px) {
  .l-header__inner {
    min-height: 64px;
    padding-block: 0;
  }

  .l-header__logo img {
    height: 30px;
  }

  /* SPではお問合せボタン単体行を非表示（ハンバーガーメニュー内に移動） */
  .l-header__right > .l-header__utility-inner {
    display: none;
  }

  .l-header__right {
    display: contents; /* 列グループを解除し、navだけをドロップダウン表示させる */
  }

  .l-header__nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    display: block; /* PC用のflex(justify-content:flex-end)を無効化し、中央寄せ崩れを解消 */
    background-color: var(--color-bg-white);
    box-shadow: var(--shadow-card);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .l-header__nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* ==========================================================================
   Layout / Footer
   ========================================================================== */
.l-footer {
  background-color: var(--color-bg-white);
  padding-block: var(--space-6);
  text-align: center;
}

.l-footer__logo {
  display: inline-flex;
}

.l-footer__logo img {
  height: 50px;
  width: auto;
  margin-inline: auto;
}

.l-footer__copyright {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}
/* ==========================================================================
   Component / Button
   ガイドライン 6章 準拠
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-small);
  font-weight: bold;
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.c-btn--primary:hover {
  background-color: var(--color-primary-dark);
  opacity: 1;
}

.c-btn--secondary {
  background-color: var(--color-text-sub);
  color: var(--color-white);
}

.c-btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.c-btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

.c-btn--large {
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-base);
}

.c-btn--small {
  padding: var(--space-1) var(--space-5);
  font-size: 13px;
}

.c-btn.is-disabled {
  background-color: var(--color-border);
  color: var(--color-text-sub);
  border-color: var(--color-border);
  pointer-events: none;
}
/* ==========================================================================
   Component / Heading
   ガイドライン 7章 準拠
   ========================================================================== */
.c-heading {
  font-family: var(--font-serif);
  line-height: var(--lh-heading);
  color: var(--color-text-base);
}

.c-heading--lv1 {
  font-size: var(--fs-lv1);
  font-weight: bold;
}

.c-heading--lv2 {
  font-size: var(--fs-lv2);
  font-weight: bold;
  text-align: center;
}

.c-heading--lv3 {
  font-size: var(--fs-lv3);
  font-weight: bold;
}

/* 花飾り付き見出し（ご挨拶/祇園の歴史/こだわり/商品情報/店舗情報 で使用） */
.c-heading--decorated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.c-heading__ornament {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("../img/common/ornament.svg");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-heading--lv1 {
    font-size: 25px;
  }

  .c-heading--lv2 {
    font-size: 25px;
  }

  .c-heading__ornament {
    width: 18px;
    height: 18px;
  }

  .c-heading--decorated {
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
}
/* ==========================================================================
   Component / Nav
   ========================================================================== */
.c-nav {
  display: flex;
  align-items: center;
}

.c-nav__item {
  padding-inline: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.c-nav__item:first-child {
  border-left: none;
  padding-left: 0;
}

.c-nav__item:last-child {
  padding-right: 0;
}

.c-nav__link {
  font-size: var(--fs-small);
  font-weight: bold;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: var(--space-1);
}

.c-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: right 0.2s ease;
}

.c-nav__link:hover::after,
.c-nav__link.is-current::after {
  right: 0;
}

@media (max-width: 767px) {
  .c-nav {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3) var(--side-padding-sp) var(--space-4);
  }

  .c-nav__item {
    padding-inline: 0;
    border-left: none;
    border-bottom: 1px solid var(--color-border);
  }

  .c-nav__link {
    display: block;
    padding: var(--space-3) 0;
    text-align: center;
  }
}
/* ==========================================================================
   Component / Hamburger（SPのみ表示するナビ開閉ボタン）
   ========================================================================== */
.c-hamburger {
  display: none;
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.c-hamburger__line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background-color: var(--color-text-base);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.c-hamburger__line:nth-child(1) { top: 10px; }
.c-hamburger__line:nth-child(2) { top: 16px; }
.c-hamburger__line:nth-child(3) { top: 22px; }

.c-hamburger.is-active .c-hamburger__line:nth-child(1) {
  top: 16px;
  transform: rotate(45deg);
}

.c-hamburger.is-active .c-hamburger__line:nth-child(2) {
  opacity: 0;
}

.c-hamburger.is-active .c-hamburger__line:nth-child(3) {
  top: 16px;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .c-hamburger {
    display: block;
  }
}
/* ==========================================================================
   Component / Card（商品カード）
   ========================================================================== */
.c-card {
  background-color: transparent;
}

.c-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.c-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
}

.c-card__title {
  font-size: var(--fs-lv3);
  font-weight: bold;
}

.c-card__price {
  margin-left: auto;
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

.c-card__figure {
  background-color: transparent;
}

.c-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* ==========================================================================
   Component / Breadcrumb（下層ページ用パンくず）
   ========================================================================== */
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-breadcrumb__item:not(:last-child)::after {
  content: "/";
  color: var(--color-border);
}

.c-breadcrumb__link:hover {
  color: var(--color-primary);
}
/* ==========================================================================
   Component / Form（お問い合わせフォーム等で使用）
   ========================================================================== */
.c-form__row {
  margin-bottom: var(--space-5);
}

.c-form__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-weight: bold;
}

.c-form__required {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: 11px;
  font-weight: bold;
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: var(--radius-s);
}

.c-form__input,
.c-form__textarea {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--color-text-base);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  transition: border-color 0.2s ease;
}

.c-form__input::placeholder,
.c-form__textarea::placeholder {
  color: var(--color-text-sub);
  opacity: 0.6;
}

.c-form__input:focus,
.c-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.c-form__textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.8;
}

.c-form__note {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

.c-form__submit {
  margin-top: var(--space-6);
  text-align: center;
}
/* ==========================================================================
   Project / メインビジュアル（p-mv）
   ========================================================================== */
.p-mv {
  position: relative;
  background-image: url("../img/pages/top/mv-bg.jpg");
  background-size: cover;
  background-position: center 50%; /* いなり寿しが多く見えるよう上側を優先表示 */
  min-height: 520px; /* 高さを増やし、画像の見える範囲を広げる */
  display: flex;
  align-items: center;
}

.p-mv::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(58, 46, 40, 0.15);
  z-index: 0;
}

/* ヘッダー（白）からメインビジュアルへ自然に溶け込むフェード。
   ヘッダーの背景色と同じ白から始めて、ゆるやかな曲線で透明へ抜く。 */
.p-mv::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    var(--color-bg-white) 0%,
    rgba(255, 255, 255, 0.6) 35%,
    rgba(255, 255, 255, 0.25) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.p-mv__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.p-mv__copy {
  position: relative;
  text-align: center;
  padding: var(--space-6) var(--space-6);
}

.p-mv__text {
  position: relative;
  z-index: 1;
  display: block;
}

.p-mv__text-img {
  display: block;
  width: min(760px, 88vw);
  height: auto;
  margin-inline: auto;
  /* 文字の輪郭にぴったり沿う白いぼかし（グロー）を何重にも重ねて強調させる */
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 1))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 42px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 64px rgba(255, 255, 255, 0.5))
    drop-shadow(0 2px 6px rgba(58, 46, 40, 0.15));
}

@media (max-width: 767px) {
  .p-mv {
    min-height: 280px;
  }

  .p-mv::after {
    height: 90px;
  }

  .p-mv__copy {
    padding: var(--space-4);
  }

  .p-mv__text-img {
    width: 90vw;
  }
}
/* ==========================================================================
   Project / ご挨拶（p-greeting）
   ========================================================================== */
.p-greeting__body {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.p-greeting__body p {
  margin-bottom: var(--space-3);
}

.p-greeting__body p:last-child {
  margin-bottom: 0;
}

/* オープン告知（赤字2行）：2行を1ブロックにして中央に置き、左右の端を揃える */
.p-greeting__open {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.p-greeting__open-line {
  font-size: 30px;
  font-weight: bold;
  color: #bf1920;
}

.p-greeting__open-line:not(:last-child) {
  margin-bottom: 5px;
}

/* PCのみ：2行の日付部分（2026年…日）を同じ列に並べ、列の幅（＝長い方の日付）に
   合わせて短い方の日付の文字間隔を自動で広げる → 日付の右端が揃い、
   続く「（木）本店オープン」「（日）伊東駅店オープン」も同じ位置から始まる。
   SPは折り返すため、この揃えは使わず通常の左揃えのまま */
@media (min-width: 768px) {
  .p-greeting__open {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 5px;
  }

  .p-greeting__open-line {
    display: contents; /* 中の日付・テキストを親のgridに直接参加させる（列を揃えるため） */
    margin-bottom: 0;
  }

  .p-greeting__open-date {
    text-align: justify;
    text-align-last: justify;
  }
}

@media (max-width: 767px) {
  .p-greeting__body {
    text-align: left;
  }
}
/* ==========================================================================
   Project / 祇園の歴史（p-history）
   タイムラインの線とドットは同じ中心軸(--history-marker-size の中心)に
   揃うよう計算式で位置決めする（線幅・ドット径は元素材から実測）。
   ========================================================================== */
.p-history__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-7);
}

.p-history__timeline {
  --history-marker-size: 22px; /* ドット直径（元素材実測を基に設定） */
  --history-marker-gap: var(--space-4); /* ドットと本文の間隔 */
  --history-line-width: 4px; /* 縦線の太さ（元素材実測を基に設定） */

  flex: 1;
  position: relative;
  padding-left: calc(var(--history-marker-size) + var(--history-marker-gap));
}

/* 縦線：ドット中心と同じx位置に来るよう左端をcalcで算出。
   上端は最初のドットの中心から始める（丸を突き抜けないように） */
.p-history__timeline::before {
  content: "";
  position: absolute;
  top: calc(4px + var(--history-marker-size) / 2);
  bottom: 0;
  left: calc(var(--history-marker-size) / 2 - var(--history-line-width) / 2);
  width: var(--history-line-width);
  background-color: var(--color-timeline);
}

.p-history__figure {
  flex: 0 0 420px;
}

.p-history__figure img {
  border-radius: var(--radius-m);
}

.p-history__item {
  position: relative;
  margin-bottom: var(--space-6);
}

.p-history__item:last-child {
  margin-bottom: 0;
}

/* ドット：timelineのpadding-left分をそのまま打ち消せば、縦線と同じ中心軸に揃う */
.p-history__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--history-marker-size) + var(--history-marker-gap)));
  top: 4px;
  width: var(--history-marker-size);
  height: var(--history-marker-size);
  border-radius: 50%;
  background-color: var(--color-primary);
}

.p-history__year {
  margin-bottom: var(--space-2);
}

.p-history__text {
  padding-left: var(--space-4);
  color: var(--color-text-sub);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .p-history__inner {
    flex-direction: column;
    gap: var(--space-5);
  }

  .p-history__figure {
    flex: none;
    width: 100%;
  }
}
/* ==========================================================================
   Project / いなり寿しへのこだわり（p-kodawari）
   通常レイアウト：画像＋テキストを横並び（PC）／縦積み（SP）
   ========================================================================== */
.p-kodawari__inner {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.p-kodawari__body p {
  margin-bottom: var(--space-3);
}

.p-kodawari__body p:last-child {
  margin-bottom: 0;
}

.p-kodawari__figure {
  flex: 0 0 490px; /* 画像サイズをさらに拡大 */
}

.p-kodawari__figure img {
  width: 100%;
  display: block;
}

.p-kodawari__body {
  flex: 1;
}

@media (max-width: 767px) {
  .p-kodawari__inner {
    flex-direction: column;
    gap: var(--space-4);
  }

  .p-kodawari__figure {
    flex: none;
    width: 60%;
    margin-inline: auto;
  }
}
/* ==========================================================================
   Project / いなり寿しへのこだわり（詳細）（p-kodawari-detail）
   米・揚げ・味、それぞれの仕立てをアイコン＋見出し＋本文で説明する3行リスト
   ========================================================================== */
.p-kodawari-detail__lead {
  max-width: 720px;
  margin: 0 auto var(--space-6);
  text-align: center;
  line-height: 2;
}

.p-kodawari-detail__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* ブロック間の間隔を詰める */
  max-width: 880px;
  margin-inline: auto;
}

.p-kodawari-detail__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

/* アイコン＋ラベル（左列）。imgのsrcを差し替えるだけで本番アイコンに切り替え可能 */
.p-kodawari-detail__icon {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto var(--space-2);
  object-fit: contain;
}

.p-kodawari-detail__aside {
  flex: 0 0 190px;
  text-align: center;
  color: var(--kodawari-detail-color, var(--color-primary));
}

.p-kodawari-detail__label {
  font-size: var(--fs-lv3);
  font-weight: bold;
}

/* 見出し＋本文（右列） */
.p-kodawari-detail__content {
  flex: 1;
  padding-top: 0;
}

.p-kodawari-detail__heading {
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--fs-lv3);
  font-weight: bold;
  color: var(--kodawari-detail-color, var(--color-primary));
  border-bottom: 1px solid var(--kodawari-detail-color, var(--color-primary));
}

.p-kodawari-detail__text {
  font-size: 18px;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* 行ごとの色（米＝赤／揚げ＝琥珀／味＝緑）。アイコンを差し替える際もこの変数を流用できる */
.p-kodawari-detail__item--rice  { --kodawari-detail-color: #7f0b0b; }
.p-kodawari-detail__item--abura { --kodawari-detail-color: #ad6c06; }
.p-kodawari-detail__item--aji   { --kodawari-detail-color: #0a4501; }

@media (max-width: 767px) {
  .p-kodawari-detail__list {
    gap: var(--space-6);
  }

  .p-kodawari-detail__item {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
  }

  .p-kodawari-detail__aside {
    flex: none;
  }

  .p-kodawari-detail__content {
	width: 85%;
    padding-top: 0;
    text-align: left;
  }
}
/* ==========================================================================
   Project / 商品情報（p-products）
   ========================================================================== */
.p-products__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (max-width: 767px) {
  .p-products__list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
/* ==========================================================================
   Project / 店舗情報（p-shop）
   ========================================================================== */
/* 見出し（【本店】など）とテーブルを1つのブロックにまとめ、
   ブロックの幅をテーブルの幅に自動で合わせる（幅の固定値は使わない） */
.p-shop__block {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.p-shop__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-base);
  font-weight: bold;
}

.p-shop__map {
  margin-top: 30px;
}

/* 地図の下に続く2つ目以降のブロックとの間隔 */
.p-shop__map + .p-shop__block {
  margin-top: 30px;
}

.p-shop__table {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto auto; /* 見出し列の幅を全行で揃える */
  align-items: start; /* 値が折り返して複数行になっても、見出しは上端に揃える */
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

/* 自身は箱を作らず、中のlabel/valueを親のgridに直接参加させる（列揃えのため） */
.p-shop__row {
  display: contents;
}

/* 「本店」「TEL」「駐車場」は画像化（左右の余白まで完全に揃えるため。
   assets/img/pages/top/shop-label-*.png を差し替えれば文言変更にも対応可） */
.p-shop__label {
  display: block;
  height: 17px;
  width: auto;
  /* 値の1行目の高さの中央に見出し画像が来るよう、上余白を計算で調整
     （1行の高さ = 文字サイズ × 行間、そこから画像の高さ17pxを引いて半分） */
  margin-top: calc((var(--fs-base) * var(--lh-base) - 17px) / 2);
}

@media (max-width: 767px) {
  .p-shop__table {
    column-gap: var(--space-3);
  }
}
/* ==========================================================================
   Project / ページ見出し（p-page-header）
   下層ページ共通のタイトルエリア（パンくず＋見出し）
   ========================================================================== */
.p-page-header {
  padding-block: var(--space-6);
}

.p-page-header__breadcrumb {
  margin-bottom: var(--space-4);
}

.p-page-header__title {
  text-align: center;
}

@media (max-width: 767px) {
  .p-page-header {
    padding-block: var(--space-5);
  }
}
/* ==========================================================================
   Project / お問い合わせ（p-contact）
   ========================================================================== */
.p-contact__lead {
  max-width: 640px;
  margin: 0 auto var(--space-7);
  text-align: center;
  color: var(--color-text-sub);
}

.p-contact__form {
  max-width: 640px;
  margin-inline: auto;
}
/* ==========================================================================
   Utility / Spacing
   ガイドライン 10章 準拠。個別ページでの微調整用（!important許可）
   ========================================================================== */
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }

.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }

.u-pt-1 { padding-top: var(--space-1) !important; }
.u-pt-2 { padding-top: var(--space-2) !important; }
.u-pt-3 { padding-top: var(--space-3) !important; }

.u-pb-1 { padding-bottom: var(--space-1) !important; }
.u-pb-2 { padding-bottom: var(--space-2) !important; }
.u-pb-3 { padding-bottom: var(--space-3) !important; }
/* ==========================================================================
   Utility / Display（PC/SP出し分け）
   ========================================================================== */
.u-pc-only {
  display: block;
}

.u-sp-only {
  display: none;
}

@media (max-width: 767px) {
  .u-pc-only {
    display: none !important;
  }

  .u-sp-only {
    display: block !important;
  }
}

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

/* PC時のみ改行するbr（brはdisplay:blockにすると余分な高さが出るためinlineのままdisplay:noneのみ切替） */
.u-br-pc {
  display: inline;
}

@media (max-width: 767px) {
  .u-br-pc {
    display: none;
  }
}
/* ==========================================================================
   Utility / Text
   ========================================================================== */
.u-text-center { text-align: center !important; }
.u-text-left   { text-align: left !important; }
.u-text-right  { text-align: right !important; }

.u-fw-bold   { font-weight: bold !important; }
.u-fw-normal { font-weight: normal !important; }

.u-color-primary { color: var(--color-primary) !important; }
.u-color-sub     { color: var(--color-text-sub) !important; }

/* ==========================================================================
   Interaction / Scroll Reveal
   スクロールで各セクションがふんわりフェード＋少し下から浮き上がって出現する。
   JS側（main.js）でスクロール位置を判定し、画面内に入ったら
   .is-visible を付与するとフェードインする仕組み。
   ========================================================================== */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.4s ease, transform 1.4s ease; /* ゆっくりめのフェード */
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーションを好まない設定のユーザーには即表示する */
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* スクロールで出現する（廃止：.js-reveal に統一） */


input[type="text"] , textarea {
	width: 100%;
    padding: var(--space-3);
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--color-text-base);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    transition: border-color 0.2s ease;
}

input.submit {
	font-size: 16px;
	font-weight: bold;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: solid 0px;
	border-radius: 10px;
	padding: 20px 40px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s eas
}

input.back {
	font-size: 16px;
	font-weight: bold;
	background-color: #666;
	color: var(--color-white);
	border: solid 0px;
	border-radius: 10px;
	padding: 20px 40px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s eas
}


input.submit:hover , input.back:hover {
	background-color: var(--color-primary-dark);
	opacity: 1;
}
.caution {
	color: var(--color-primary);
}