@charset "UTF-8";

/* ==========================================================================
   美濃・八百津の栗きんとん 特設サイト
   Design: 和モダン洗練デザインシステム
   ========================================================================== */

/* ---------------------------------
   デザインシステム トークン & 和テクスチャ
---------------------------------*/
:root {
  --font-serif: "Zen Old Mincho", "Noto Serif JP", serif;
  --font-sans: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-en: "Oswald", sans-serif;
  --font-accent: "Lora", serif;

  /* 和テクスチャ（512px×512px ループ背景） */
  --texture-washi-kinari: url("../images/textures/washi-kinari.webp");
  --texture-washi-unryu: url("../images/textures/washi-unryu.webp");
  --texture-shikkui-shironeri: url("../images/textures/shikkui-shironeri.webp");
  --texture-tsuchikabe-suna: url("../images/textures/tsuchikabe-suna.webp");

  /* 和モダン基調色 */
  --color-washi-kinari: #f2eee4;
  --color-washi-unryu: #f3f1eb;
  --color-shikkui: #e9e6df;
  --color-tsuchikabe: #d6c9b4;
  --color-sumi: #1a1714;
  --color-bengara: #a34a3a;
  --color-kuri: #8c4a2a;

  /* トランジション & イージング設計 */
  --ease-out-cubic: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 0.25s var(--ease-out-cubic);
  --transition-base: 0.4s var(--ease-out-smooth);
  --transition-slow: 0.8s var(--ease-out-smooth);

  /* タイポグラフィ変形設計 (格式ある和文平体) */
  --scale-font-vert: scaleY(0.84);

  /* レイヤー深度 (Z-Index) */
  --z-base: 1;
  --z-content: 10;
  --z-header: 1000;
  --z-mega-menu: 1500;
  --z-toggle-btn: 2000;
}

/* テクスチャ共通ユーティリティ */
.texture-washi-kinari {
  background-color: var(--color-washi-kinari);
  background-image: var(--texture-washi-kinari);
  background-repeat: repeat;
  background-size: 512px 512px;
}
.texture-washi-unryu {
  background-color: var(--color-washi-unryu);
  background-image: var(--texture-washi-unryu);
  background-repeat: repeat;
  background-size: 512px 512px;
}
.texture-shikkui-shironeri {
  background-color: var(--color-shikkui);
  background-image: var(--texture-shikkui-shironeri);
  background-repeat: repeat;
  background-size: 512px 512px;
}
.texture-tsuchikabe-suna {
  background-color: var(--color-tsuchikabe);
  background-image: var(--texture-tsuchikabe-suna);
  background-repeat: repeat;
  background-size: 512px 512px;
}

/* ---------------------------------
   共通リセット & ベースタイポグラフィ
---------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: #faf9f6;
  background-image:
    linear-gradient(rgba(252, 251, 248, 0.78), rgba(252, 251, 248, 0.78)),
    var(--texture-washi-unryu);
  background-repeat: repeat;
  background-size: 512px 512px;
}

body {
  font-family: "Zen Old Mincho", serif;
  color: var(--color-sumi);
  background-color: #faf9f6;
  background-image:
    linear-gradient(rgba(252, 251, 248, 0.78), rgba(252, 251, 248, 0.78)),
    var(--texture-washi-unryu);
  background-repeat: repeat;
  background-size: 512px 512px;
  font-weight: 500;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  overflow-x: hidden;
  display: flow-root; /* 最上部マージン突き抜けを確実に防止し、天面からテクスチャを巻く */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.l-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flow-root;
}

ul, ol, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a, a:visited {
  color: #000;
  transition: all .3s ease;
  text-decoration: none;
}

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

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

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: none;
  border-radius: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* 欧文・数字フォント */
.oswald {
  font-family: "Oswald", sans-serif;
}
.zen-kaku {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* 基本コンテナ幅 (SP左右20pxでゆったり表示) */
.l-container {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media screen and (min-width: 768px){
  .l-container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media screen and (min-width: 1201px){
  .l-container {
    padding-left: 140px;
    padding-right: 140px;
  }
}

/* ボタン (直角・白背景黒枠・黒反転ホバー) */
.button-1 {
  font-weight: 600;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  height: 54px;
  padding: 0 28px;
  font-size: 14px;
  letter-spacing: 0.1em;
  transition: all .3s ease;
  border-radius: 0;
  box-sizing: border-box;
  max-width: 100%;
  white-space: nowrap; /* 不自然な1文字改行を完全防止 */
}

@media screen and (max-width: 767px){
  .button-1 {
    height: 48px;
    padding: 0 14px;
    font-size: 13px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

.button-1:hover {
  background: #c9402a;
  border-color: #c9402a;
  color: #fff;
}

/* 括弧付きテキストリンク: （ <a href="...">リンク</a> ） */
.text-link {
  display: inline-block;
  font-weight: 600;
}

.text-link a {
  position: relative;
  display: inline-block;
  padding: 2px 2px;
  color: #2c251f;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.text-link a:hover {
  background: transparent;
  color: #a34a3a;
}

/* 縦書き見出し (格式ある明朝平体文字) */
.c-section-title {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0 auto 40px;
  font-size: 26px;
  letter-spacing: 0.22em;
  line-height: 1.5;
  transform: scaleY(0.84);
  transform-origin: top center;
  white-space: nowrap; /* どんな画面・デバイスでも縦方向の改行・折返しを確実に防止 */
}

/* 縦書き見出し内の公式LINEアイコン（同軸センタリング完全保証） */
.c-section-title.c-section-title--line {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  writing-mode: horizontal-tb !important;
  margin: 0 auto 40px !important;
  transform: none !important;
  white-space: nowrap !important;
}

.c-section-title.c-section-title--line .icon-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  line-height: 1 !important;
  transform: none !important;
}

.c-section-title.c-section-title--line .icon-line svg {
  width: 30px !important;
  height: 30px !important;
  fill: #06c755 !important;
  display: block !important;
}

.c-section-title.c-section-title--line .tl-txt {
  writing-mode: vertical-rl !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  letter-spacing: 0.22em !important;
  line-height: 1.5 !important;
  transform: scaleY(0.84) !important;
  transform-origin: top center !important;
  white-space: nowrap !important;
  display: block !important;
}

.l-section {
  margin-top: 140px;
}

@media screen and (min-width: 768px){
  .l-section {
    margin-top: 220px;
  }
  .c-section-title {
    font-size: 35px;
    margin-bottom: 70px;
  }
  .c-section-title.c-section-title--line {
    margin-bottom: 70px !important;
  }
  .c-section-title.c-section-title--line .icon-line {
    margin-bottom: 16px !important;
  }
  .c-section-title.c-section-title--line .icon-line svg {
    width: 38px !important;
    height: 38px !important;
  }
  .c-section-title.c-section-title--line .tl-txt {
    font-size: 35px !important;
  }
}

/* ---------------------------------
   ヘッダー (四隅固定 & mix-blend-mode: difference)
---------------------------------*/
.header-menu,
.header-copy {
  mix-blend-mode: difference;
  position: fixed;
  z-index: 1000;
  color: #fff;
}

/* 左上: 公式ロゴマーク＆組合名（公式シンボル＋格調高い縦書き） */
.header-logo {
  position: fixed;
  z-index: 1000;
  top: 24px;
  left: 28px;
  right: auto;
}

.header-logo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.header-logo .brand-crest {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo .brand-mark-svg {
  width: 60px;
  height: 52px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

.header-logo .brand-mark-svg .cls-1 {
  fill: #a34a3a;
}

.header-logo .brand-mark-svg .cls-2 {
  fill: #d0b59b;
}

.header-logo:hover .brand-mark-svg {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.95));
}

.header-logo .brand-name-vert {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 21px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: #1a1714;
  line-height: 1.3;
  display: inline-block;
  transform: scaleY(0.82);
  transform-origin: top center;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 4px rgba(255, 255, 255, 0.9);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.header-logo:hover .brand-name-vert {
  color: #a34a3a;
  text-shadow: 0 0 14px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 255, 255, 0.95);
}

@media screen and (max-width: 767px){
  /* =========================================================================
     SPヘッダー完全調和レイアウト:
     ・上部中央（センタリング）: 水引マーク ＋ 岐阜県・八百津町生菓子組合
     ・スクロール時は通常フローで上にスクロールアウト
     ・右上固定: 高い視認性を誇る端正な円形ハンバーガーメニュー
     ========================================================================= */

  /* ロゴエリア: 画面中央・通常スクロールフロー（水引マーク ＋ 縦書き組合名） */
  .header-logo {
    position: relative; /* fixed解除: スクロールで自然に流れる */
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding: 84px 20px 10px; /* メニュー開閉時の「緑屋」上端ライン（84px）と一致 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  .header-logo a {
    display: flex;
    flex-direction: column; /* 上にロゴ、下に縦書き文字 */
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
  }
  .header-logo .brand-mark-svg {
    width: 46px;
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  }
  .header-logo .brand-name-vert {
    writing-mode: vertical-rl; /* 凛とした縦書きセンタリング */
    font-family: var(--font-serif);
    font-size: 20.5px; /* PCの雰囲気に合わせて堂々と大きく */
    font-weight: 600;
    letter-spacing: 0.11em; /* 平体に調和するよう文字間をキュッと引き締め */
    color: #1a1714;
    line-height: 1.25;
    display: inline-block;
    text-align: center;
    transform: scaleY(0.82); /* 格調高い老舗の平体を適用 */
    transform-origin: top center;
    margin-bottom: 0;
  }

  /* 右上固定: ハンバーガーメニュー & 公式LINEボタン (墨色・視認性確保) */
  .header-menu {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* SPヘッダー: ハンバーガーメニューの下にLINEアイコンを配置 (PC時と完全一致の margin-top: 20px) */
  .header-line-btn {
    display: block !important;
    margin-top: 20px;
  }
  .header-line-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #06c755 !important; /* 公式LINEカラーで鮮明に表示 */
    text-decoration: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .header-line-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
  }
  .header-line-btn .icon-tip {
    display: none !important;
  }

  /* ハンバーガーボタン: 横向き3本線（洗練された和モダン墨色デザイン） */
  .header-open-menu {
    display: inline-block;
    padding: 6px;
    margin: -6px;
    cursor: pointer;
  }
  .header-open-menu .button {
    cursor: pointer;
    height: 16px;
    width: 26px;
    position: relative;
    display: block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .header-open-menu .button span {
    background: #1a1714 !important; /* 墨色で美しく鮮明に表示 */
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    margin: 0 !important;
    border-radius: 1px;
    box-shadow: none !important;
    transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
    pointer-events: none;
  }
  .header-open-menu .button span:nth-child(1) {
    top: 0;
    bottom: auto;
    margin-left: 0 !important;
    transform: none;
    opacity: 1;
  }
  .header-open-menu .button span:nth-child(2) {
    top: 7px;
    bottom: auto;
    margin-left: 0 !important;
    transform: none;
    opacity: 1;
  }
  .header-open-menu .button span:nth-child(3) {
    top: 14px;
    bottom: auto;
    margin-left: 0 !important;
    transform: none;
    opacity: 1;
  }

  /* メニューオープン時（アクティブ）: 端正なクロス（×） */
  .header-open-menu .button.active span:nth-child(1) {
    top: 7px;
    margin-left: 0 !important;
    transform: rotate(45deg);
  }
  .header-open-menu .button.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .header-open-menu .button.active span:nth-child(3) {
    top: 7px;
    bottom: auto;
    margin-left: 0 !important;
    transform: rotate(-45deg);
  }

  /* お知らせ速報（.p-news-ticker）の余白調整（タイトルと心地よい間隔で配置） */
  .p-news-ticker {
    margin-top: 14px !important;
    margin-bottom: 24px;
    padding: 0 16px;
  }
}

/* PCヘッダー縦書きグローバルメニュー (八百津オリジナル和モダンデザイン) */
.header-page-menu {
  display: none;
}

.header-page-menu {
  writing-mode: vertical-rl;
  font-weight: 600;
}

.header-page-menu ul li a {
  position: relative;
  display: inline-block;
  padding: 8px 4px;
  color: #1a1714;
  text-decoration: none;
  font-family: var(--font-serif);
  border-radius: 2px;
  transform: scaleY(0.88);
  transform-origin: top center;
  transition: all .28s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

/* 縦書きメニュー: 文字の左側にスッと走る1pxの茜色ラインと文字色変化 */
.header-page-menu ul li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 1px;
  height: 100%;
  background-color: #c9402a;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.header-page-menu ul li a:hover {
  color: #c9402a;
  background: transparent;
}

.header-page-menu ul li a:hover::after {
  transform: scaleY(1);
  transform-origin: top;
}

@media screen and (min-width: 768px){
  .header-page-menu {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0 48px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin-top: 50px;
    writing-mode: horizontal-tb; /* 水平コンテナで全体を完全センター配置 */
    position: relative;
    z-index: 100;
  }
  .header-page-menu ul {
    display: block;
    writing-mode: vertical-rl; /* 縦書き列組み */
  }
  .header-page-menu ul li {
    margin: 0 24px;
    display: block;
  }
  .header-page-menu-about {
    font-size: 15px; /* 文字サイズ拡大 */
    letter-spacing: 0.14em;
    position: relative;
  }
  .header-page-menu-genre {
    font-size: 17px; /* 四つの名店側を大きく堂々と */
    letter-spacing: 0.16em;
  }

  .menu-divider {
    display: none !important;
  }
}

@media screen and (min-width: 1401px){
  .header-page-menu {
    padding-left: 0;
  }
  .header-page-menu ul li {
    margin: 0 28px;
  }
  .header-page-menu-about {
    font-size: 15.5px;
  }
  .header-page-menu-genre {
    font-size: 17.5px;
  }
}

/* 左上: 公式LINEボタン (三本線の下に配置) */
.header-line-btn {
  margin-top: 20px;
  position: relative;
}

.header-line-btn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #fff;
  transition: transform .25s ease, opacity .25s ease;
  text-decoration: none;
}

.header-line-btn a:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.header-line-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* 和モダンツールチップ (公式LINE: アイコンの左側へ表示) */
.header-line-btn .icon-tip {
  position: absolute;
  right: calc(100% + 12px);
  left: auto;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  color: #fff;
  background: rgba(30, 24, 20, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.header-line-btn .icon-tip::before {
  content: "";
  position: absolute;
  left: 100%;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px 0 4px 5px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(30, 24, 20, 0.92);
}

.header-line-btn a:hover .icon-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* 右上: 三本線ハンバーガーボタン (PC時は右上配置) */
@media screen and (min-width: 768px){
  .header-menu {
    top: 24px;
    right: 24px;
    left: auto;
    z-index: 2000; /* メガメニュー (z-index: 1500) より常に最前面 */
  }
}

.header-open-menu {
  display: inline-block;
  padding: 6px;
  margin: -6px;
  cursor: pointer;
}

.header-open-menu .button {
  cursor: pointer;
  height: 16px;
  width: 26px;
  position: relative;
  display: block;
}

.header-open-menu .button span {
  background: #fff;
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  border-radius: 1px;
  transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
  pointer-events: none;
}

.header-open-menu .button span:nth-child(1) {
  top: 0;
  bottom: auto;
  transform: none;
}

.header-open-menu .button span:nth-child(2) {
  top: 7px;
  bottom: auto;
  transform: none;
}

.header-open-menu .button span:nth-child(3) {
  top: 14px;
  bottom: auto;
  transform: none;
}

.header-open-menu .button.active span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.header-open-menu .button.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header-open-menu .button.active span:nth-child(3) {
  top: 7px;
  bottom: auto;
  transform: rotate(-45deg);
}

/* 左下: 縦書きコピーライト (非表示) */
.header-copy {
  display: none !important;
}

/* 下層ページ（白地・和紙背景）におけるヘッダーボタン墨色表示保証 */
body:not(.home) .header-menu {
  mix-blend-mode: normal;
}
body:not(.home) .header-open-menu .button span {
  background: #1a1714;
}
body:not(.home) .header-line-btn a {
  color: #06c755;
}

@media screen and (min-width: 768px){
  .header-logo { top: 40px; left: 50px; right: auto; }
  .header-menu { top: 40px; right: 50px; left: auto; }
  .header-copy {
    display: none !important;
  }
  }
}

/* SP・タブレット (1024px以下): スクロール停止時の自動フェードアウト（ハンバーガーとLINEアイコンのみ） */
@media screen and (max-width: 1024px){
  .header-menu {
    transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.25s ease;
  }

  /* スクロール停止で静かにフェードアウト (0.6秒かけて優雅に消滅、メニューオープン時は絶対に非表示にしない) */
  body.is-header-hidden:not(.is-menu-open) .header-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s ease;
  }
}

/* 開閉メガメニュー (八百津オリジナル 和モダン全画面ナビゲーション: 雲龍和紙の最背面) */
.header-wide-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #faf9f6;
  background-image:
    linear-gradient(rgba(252, 251, 248, 0.78), rgba(252, 251, 248, 0.78)),
    var(--texture-washi-unryu);
  background-repeat: repeat;
  background-size: 512px 512px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1500;
  writing-mode: horizontal-tb; /* デフォルト水平 */
}

body.is-menu-open {
  overflow: hidden;
}

/* メニューオープン時: 右上のLINEボタン、左上のロゴ、左下のコピーライトを非表示化し、右上の開閉トグルボタン（×）を墨色で鮮明に残す */
body.is-menu-open .header-line-btn,
body.is-menu-open .header-logo,
body.is-menu-open .header-copy {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.is-menu-open .header-menu {
  mix-blend-mode: normal !important;
}

body.is-menu-open .header-open-menu .button span {
  background: #1a1714 !important; /* 開閉時は墨色の×アイコンを鮮明に表示 */
}

.header-wide-menu-in {
  box-sizing: border-box;
}

/* ---------------------------------
   SP・タブレット (1100px以下): 端正な横書き・1カラム中央揃えリスト
---------------------------------*/
@media screen and (max-width: 1100px){
  .header-wide-menu-in {
    padding-top: 84px;
    padding-bottom: 64px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 440px;
    margin: 0 auto;
  }
  .header-wide-menu-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .header-wide-menu-genre,
  .header-wide-menu-about {
    writing-mode: horizontal-tb !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  /* 四つの名店 (主役: 堂々たる明朝体) */
  .header-wide-menu-genre {
    gap: 12px;
  }
  .header-wide-menu-genre li {
    width: 100%;
    text-align: center;
    margin: 0;
  }
  .header-wide-menu-genre li a {
    font-family: var(--font-serif);
    font-size: 17.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #1a1714;
    display: inline-block;
    padding: 6px 14px;
    text-decoration: none;
    transform: none;
    transition: color .2s ease;
  }
  .header-wide-menu-genre li a:active,
  .header-wide-menu-genre li a:hover {
    color: #c9402a;
  }

  .header-wide-menu-about {
    margin-top: 24px;
    padding-top: 0;
    position: relative;
    gap: 10px;
  }
  .header-wide-menu-about::before {
    display: none !important;
  }
  .header-wide-menu-about li {
    width: 100%;
    text-align: center;
    margin: 0;
  }
  .header-wide-menu-about li a {
    font-family: var(--font-serif);
    font-size: 14.5px;
    font-weight: 500;
    color: #4a443e;
    letter-spacing: 0.1em;
    display: inline-block;
    padding: 5px 12px;
    text-decoration: none;
    transform: none;
    transition: color .2s ease;
  }
  .header-wide-menu-about li a:active,
  .header-wide-menu-about li a:hover {
    color: #c9402a;
  }

  /* 下部: LINE公式アカウント案内 (BOX完全撤廃・背景調和の洗練された佇まい) */
  .wide-menu-line {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #dcd7cf;
    text-align: center;
    width: 100%;
  }
  .wide-menu-line-tl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: #1a1714;
    letter-spacing: 0.14em;
    margin: 0 0 8px;
  }
  .wide-menu-line-icon {
    display: inline-flex;
    align-items: center;
  }
  .wide-menu-line-icon svg {
    width: 18px;
    height: 18px;
    fill: #1a1714;
  }
  .wide-menu-line-sub {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: #2b2520;
    letter-spacing: 0.1em;
    margin: 0 0 8px;
  }
  .wide-menu-line-comment {
    font-size: 12px;
    color: #6a635c;
    line-height: 1.85;
    letter-spacing: 0.03em;
    margin: 0 0 18px;
  }
  .wide-menu-line-comment span {
    display: inline-block;
  }
  .wide-menu-line-btn .wide-menu-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 24px;
    border: 1px solid #1a1714;
    color: #1a1714;
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    background: transparent;
    border-radius: 2px;
    transition: all .25s ease;
  }
  .wide-menu-line-btn .wide-menu-btn-link:hover,
  .wide-menu-line-btn .wide-menu-btn-link:active {
    background: #1a1714;
    color: #f7f5f0;
  }
}

/* ---------------------------------
   PC (1101px以上): 縦書きエディトリアルレイアウト
---------------------------------*/
@media screen and (min-width: 1101px){
  .header-wide-menu-in {
    padding-top: 130px;
    padding-bottom: 80px;
    max-width: 1140px;
    margin: 0 auto;
  }
  .header-wide-menu-list {
    display: flex;
    justify-content: center;
    gap: 90px;
    flex-direction: row-reverse;
  }
  .header-wide-menu-genre,
  .header-wide-menu-about {
    writing-mode: vertical-rl;
    font-weight: 600;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .header-wide-menu-genre {
    font-size: 21px;
    letter-spacing: 0.18em;
  }
  .header-wide-menu-genre li {
    margin: 0 32px;
  }
  .header-wide-menu-about {
    font-size: 14.5px;
    letter-spacing: 0.14em;
  }
  .header-wide-menu-about li {
    margin: 0 18px;
  }
  .header-wide-menu-list li a {
    position: relative;
    display: inline-block;
    padding: 6px 3px;
    color: #1a1714;
    text-decoration: none;
    font-family: var(--font-serif);
    transition: color 0.25s ease;
    white-space: nowrap;
  }
  .header-wide-menu-list li a:hover {
    color: #c9402a;
  }

  /* PC下部: LINE公式アカウント案内 (BOXなし・背景調和) */
  .wide-menu-line {
    margin-top: 90px;
    text-align: center;
    border-top: 1px solid #d5d0c8;
    padding-top: 40px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }
  .wide-menu-line-tl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: #1a1714;
    letter-spacing: 0.14em;
    margin: 0 0 12px;
  }
  .wide-menu-line-icon svg {
    width: 20px;
    height: 20px;
    fill: #1a1714;
  }
  .wide-menu-line-sub {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: #1a1714;
    letter-spacing: 0.14em;
    margin: 0 0 10px;
  }
  .wide-menu-line-comment {
    font-size: 13px;
    color: #665f58;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin: 0 0 24px;
  }
  .wide-menu-line-btn .wide-menu-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 36px;
    border: 1px solid #1a1714;
    color: #1a1714;
    font-family: var(--font-serif);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    background: transparent;
    border-radius: 2px;
    transition: all .25s ease;
  }
  .wide-menu-line-btn .wide-menu-btn-link:hover {
    background: #1a1714;
    color: #f7f5f0;
  }
}

/* ---------------------------------
   お知らせ速報ティッカー (メニューに合わせて完全水平センター配置)
---------------------------------*/
.p-news-ticker {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 14px; /* タイトルと程よく心地よい呼吸余白 */
  margin-bottom: 24px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.p-news-ticker p {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.p-news-ticker p a {
  display: flex;
  flex-direction: column; /* SP時は縦にセンタリング並び */
  align-items: center;
  justify-content: center;
  gap: 13px 0; /* 日付・栗・タイトルの行間隔をゆったり広げる */
  color: #2c251f;
  text-decoration: none;
  transition: opacity .2s ease;
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
}
.p-news-ticker p a:hover {
  opacity: 1;
}
.p-news-ticker .date {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #635345;
  margin: 0;
  line-height: 1;
}
.p-news-ticker .kuri-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 50 6 C 58 24 90 48 90 72 C 90 92 72 96 50 96 C 28 96 10 92 10 72 C 10 48 42 24 50 6 Z' fill='%23c9402a'/%3E%3Cpath d='M 14 74 C 30 84 70 84 86 74 C 88 84 74 96 50 96 C 26 96 12 84 14 74 Z' fill='%23f3cfbc'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
  margin: 2px 0;
}
#news-ticker.p-news-ticker .tl {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(12.5px, 3.6vw, 13.5px);
  font-weight: 500;
  color: #2c251f;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
#news-ticker.p-news-ticker a:hover .tl {
  color: #a34a3a;
}

@media screen and (min-width: 768px){
  .p-news-ticker {
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 0 40px;
  }
  .p-news-ticker p a {
    flex-direction: row; /* PC時は水平横並び（日付 栗 タイトル） */
    gap: 0 16px;
  }
  .p-news-ticker .date {
    font-size: 13.5px;
    letter-spacing: 0.1em;
  }
  .p-news-ticker .kuri-icon {
    margin: 0;
  }
  #news-ticker.p-news-ticker .tl {
    font-size: 14.5px;
    letter-spacing: 0.06em;
    max-width: none;
    white-space: nowrap;
  }
}

@media screen and (min-width: 1401px){
  .p-news-ticker {
    padding: 0;
  }
}

/* ---------------------------------
   ファーストビュー (八百津オリジナル「茶巾絞り・木曽川清流ウェーブ」マスク & パララックス)
---------------------------------*/
.p-hero-slider {
  position: relative;
  line-height: 0;
}
.p-hero-slider img {
  display: block;
}

@media screen and (min-width: 768px){
  .p-hero-slider.sp {
    display: none !important;
  }
  .p-hero-slider.pc {
    display: block !important;
    position: relative;
    width: 100%;
    margin-bottom: 60px;
  }
  .p-hero-slider.pc .fade-slider {
    position: relative;
    width: 100%;
    /* 端正で洗練された優美なアーチ (鮮明なSVGベクターマスクで切れ目もくっきりシャープ) */
    -webkit-mask-image: url('../images/yaotsu_curve_mask.svg');
    mask-image: url('../images/yaotsu_curve_mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    aspect-ratio: 1920 / 1200;
    max-height: 85vh;
    overflow: hidden;
  }
  .p-hero-slider.pc .fade-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none !important;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    pointer-events: none;
  }
  .p-hero-slider.pc .fade-slider img.active {
    opacity: 1;
  }
}

@media screen and (max-width: 767px){
  .p-hero-slider.pc {
    display: none !important;
  }
  .p-hero-slider.sp {
    display: block !important;
    margin-top: 60px;
  }
  .p-hero-slider.sp .fade-slider {
    position: relative;
    width: 100%;
    height: 120vw;
  }
  .p-hero-slider.sp .fade-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
  }
  .p-hero-slider.sp .fade-slider img.active {
    opacity: 1;
  }
}

/* ---------------------------------
   コンセプト訴求 (.p-concept)
---------------------------------*/
.p-concept {
  margin-top: 60px;
}

.p-concept__inner {
  width: 100%;
}

.p-concept .image {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.p-concept .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.p-concept__content {
  margin-top: 32px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.p-concept__content .tl {
  font-family: var(--font-serif);
  font-size: clamp(22px, 4.5vw, 28px);
  font-weight: 600;
  margin-bottom: 18px;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

.p-concept__content .tx {
  font-size: 15px;
  line-height: 2.1;
  color: #222;
}

.p-concept__content .link {
  font-size: 16px;
  margin-top: 24px;
}

/* タブレット (768px〜1024px): 上部大迫力画像 ＋ ゆったりテキストで写真の縮小を完全防止 */
@media screen and (min-width: 768px){
  .p-concept {
    margin-top: 80px;
  }
  .p-concept .image {
    max-width: 860px;
  }
  .p-concept__content {
    margin-top: 40px;
    max-width: 860px;
  }
}

/* PC (1025px以上): 堂々たる写真 ＋ 風雅な縦書きエディトリアル横並び */
@media screen and (min-width: 1025px){
  .p-concept {
    margin-top: 100px;
  }
  .p-concept__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(40px, 5vw, 70px);
    max-width: 1200px;
    margin: 0 auto;
  }
  .p-concept .image {
    flex: 1 1 52%;
    min-width: 440px; /* どんなウィンドウ幅でも絶対に小さく押しつぶされないよう最小幅を担保 */
    max-width: 660px;
    margin: 0;
    flex-shrink: 0; /* Flexboxによる縮小破綻を完全防止 */
  }
  .p-concept__content {
    writing-mode: vertical-rl;
    margin: 0;
    width: auto;
    max-width: none;
    flex-shrink: 0; /* 縦書きの自然な文字幅を保持 */
  }
  .p-concept__content .tl {
    font-size: clamp(24px, 2.2vw, 32px);
    margin-bottom: 0;
    margin-left: 45px;
    letter-spacing: 0.18em;
    line-height: 1.6;
  }
  .p-concept__content .tx {
    font-size: 15px;
    max-height: 380px;
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  .p-concept__content .link {
    margin-top: 0;
    margin-right: 35px;
    text-align: end;
  }
}

/* ---------------------------------
   お薦め商品スライダー (Swiper)
---------------------------------*/
#recommend-slider {
  overflow: hidden;
  position: relative;
}

.p-recommend__slider {
  padding-bottom: 20px;
}

.p-recommend__slider .swiper-slide {
  width: 76vw;
  max-width: 280px;
  box-sizing: border-box;
}

@media screen and (min-width: 768px){
  .p-recommend__slider .swiper-slide {
    width: 320px;
    max-width: none;
  }
}

.p-recommend__slider .swiper-slide a {
  display: block;
  position: relative;
}

.p-recommend__slider .img-wrap {
  position: relative;
  width: 100%;
}

.p-recommend__slider .img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}

.p-recommend__slider .item_name {
  position: absolute;
  bottom: -18px;
  right: 9px;
  font-family: var(--font-serif);
  font-weight: 600;
  writing-mode: vertical-rl;
  font-size: 16.5px;
  letter-spacing: 0.14em;
  z-index: 5;
  background: rgba(250, 248, 245, 0.96);
  color: #1a1714;
  padding: 10px 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.p-recommend__slider .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.p-recommend__slider a:hover .img img {
  transform: scale(1.04);
}

.p-recommend__slider .item_price {
  margin-top: 32px;
  font-size: 14px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #444;
  font-weight: 500;
}

/* ---------------------------------
   お薦めスライダー コントロール (完全水平・垂直中央アライメント & 極細シェブロン矢印)
---------------------------------*/
.swiper-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 28px;
  margin-top: 40px;
  position: relative;
  width: 100%;
}

.swiper-control .swiper-pagination {
  position: relative !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 8px !important;
  height: 20px !important;
  line-height: 1 !important;
}

.swiper-control .swiper-pagination .swiper-pagination-bullet {
  width: 1.5px !important;
  height: 8px !important;
  background: #8c827a !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: height .25s ease, background .25s ease !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.swiper-control .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  height: 20px !important;
  background: #1a1714 !important;
}

.swiper-control .swiper-button-prev,
.swiper-control .swiper-button-next {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1a1714 !important;
  cursor: pointer !important;
  transition: opacity .2s ease !important;
}

.swiper-control .swiper-button-prev:hover,
.swiper-control .swiper-button-next:hover {
  opacity: 0.5;
}

.swiper-control .swiper-button-prev::after,
.swiper-control .swiper-button-next::after {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 1.5px solid #1a1714 !important;
  border-left: 1.5px solid #1a1714 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 0 !important;
}

.swiper-control .swiper-button-prev::after {
  transform: rotate(-45deg) translate(1px, 1px) !important;
}

.swiper-control .swiper-button-next::after {
  transform: rotate(135deg) translate(-1px, -1px) !important;
}

/* ---------------------------------
   【核心】四つの名店 全画面スタッキング・ピン留め (GSAP ScrollTrigger タイムライン)
---------------------------------*/
.p-masters-stack {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.p-masters-stack .p-masters__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #f6f5f2;
}

.p-masters-stack .p-masters__item--midoriya { z-index: 1; }
.p-masters-stack .p-masters__item--kameki { z-index: 2; }
.p-masters-stack .p-masters__item--umeya { z-index: 3; }
.p-masters-stack .p-masters__item--fujinoya { z-index: 4; }

.p-masters-stack .p-masters__pin {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-masters-stack .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.p-masters-stack .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-masters-stack .p-masters__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* 縦書きテキスト: 凛とした右寄せ上下中央エディトリアル */
.p-masters__card {
  writing-mode: vertical-rl;
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.9);
  color: #111;
}

/* 梅屋（茜色背景）: 深みのあるシックな深紅シャドウで可読性を極大化 */
.p-masters-stack .p-masters__item--umeya .p-masters__card {
  text-shadow: 0 2px 12px rgba(80, 10, 15, 0.6), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.p-masters__card p {
  margin: 0;
}

.p-masters__card p.tl {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.4;
  transform: scaleY(0.85);
  transform-origin: top right;
}

.p-masters__card p.tx {
  font-family: var(--font-serif);
  line-height: 2.3;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: #222;
}

.p-masters__card p.link {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.14em;
  align-self: flex-end;
  margin-top: auto;
}


.p-masters__card p.link a {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  color: #1a1714;
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.16em;
  transform: scaleY(0.88);
  transform-origin: top center;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-masters__card p.link a:hover {
  color: #c9402a;
}

/* 各スライドの背景色（写真の端の色と完全一致させ、継ぎ目を自然に消失: PC・SP共通） */
.p-masters-stack .p-masters__item--midoriya .p-masters__pin { background-color: #c8bfb8; }
.p-masters-stack .p-masters__item--kameki .p-masters__pin { background-color: #f6f5f2; }
.p-masters-stack .p-masters__item--umeya .p-masters__pin { background-color: #c5363a; }
.p-masters-stack .p-masters__item--fujinoya .p-masters__pin { background-color: #e1e2e6; }

/* SP時: 「写真と文字の完全な上下住み分け」（上部に和菓子写真＋下部に静謐で極めて読みやすいテキスト） */
@media screen and (max-width: 767px){
  /* 写真: 画面上部約54%に配置し、下端を背景色へ滑らかにフェードアウト */
  .p-masters-stack .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 54vh;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    z-index: 1;
  }
  .p-masters-stack .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
  }

  /* テキスト: 画面下部の静謐な無地エリアに配置（写真と一切被らず、抜群の可読性を実現） */
  .p-masters__card {
    writing-mode: horizontal-tb !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48vh !important;
    max-height: 48vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 24px 28px !important;
    box-sizing: border-box !important;
    text-shadow: none !important;
    z-index: 10;
  }
  .p-masters__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 0 12px 0 !important;
  }
  .p-masters__head .tl {
    font-family: var(--font-serif) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.25 !important;
    margin: 0 0 6px 0 !important;
    color: #1a1714 !important;
    transform: none !important;
  }
  .p-masters__head .store {
    font-family: var(--font-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    color: #554e47 !important;
    margin: 0 !important;
  }
  /* 繊細な和の区切り線 */
  .p-masters__head::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: #a8a096;
    margin-top: 10px;
  }
  .p-masters__card .tx {
    font-family: var(--font-serif) !important;
    font-size: 13.5px !important;
    line-height: 2.05 !important;
    letter-spacing: 0.08em !important;
    color: #2b2521 !important;
    margin: 0 !important;
    max-width: 320px !important;
    max-height: none !important;
  }

  /* 梅屋（茜色背景）の完全視認性保証 */
  .p-masters-stack .p-masters__item--umeya .p-masters__head .tl {
    color: #ffffff !important;
  }
  .p-masters-stack .p-masters__item--umeya .p-masters__head .store {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  .p-masters-stack .p-masters__item--umeya .p-masters__head::after {
    background: rgba(255, 255, 255, 0.5) !important;
  }
  .p-masters-stack .p-masters__item--umeya .p-masters__card .tx {
    color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* PC時: 案1「写真と文字の住み分け」（写真を左寄せフェード＋右側余白に文字を凛と配置） */
@media screen and (min-width: 768px){

  /* 写真の配置: 左側に寄せて和菓子を主役に引き立て、右端を背景色へ滑らかにフェード */
  .p-masters-stack .p-masters__item--midoriya .image {
    width: 62%;
    left: -3%;
    -webkit-mask-image: linear-gradient(to right, #000 65%, transparent 100%);
    mask-image: linear-gradient(to right, #000 65%, transparent 100%);
  }
  .p-masters-stack .p-masters__item--kameki .image {
    width: 66%;
    left: -2%;
    -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 100%);
    mask-image: linear-gradient(to right, #000 74%, transparent 100%);
  }
  .p-masters-stack .p-masters__item--umeya .image {
    width: 66%;
    left: -3%;
    -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 100%);
    mask-image: linear-gradient(to right, #000 75%, transparent 100%);
  }
  .p-masters-stack .p-masters__item--fujinoya .image {
    width: 63%;
    left: -2%;
    -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 100%);
    mask-image: linear-gradient(to right, #000 68%, transparent 100%);
  }

  /* 縦書きテキスト: 写真と重ならず、右側の静謐な余白に美しく配置 */
  .p-masters__card {
    display: block !important;
    top: 50% !important;
    bottom: auto !important;
    right: 8.5% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    max-height: 75vh !important;
  }
  .p-masters__head {
    display: inline-block !important;
    vertical-align: top !important;
    margin-left: clamp(36px, 3.8vw, 58px) !important;
  }
  .p-masters__head .tl {
    display: inline-block !important;
    font-family: var(--font-serif);
    font-size: clamp(34px, 3.2vw, 48px);
    letter-spacing: 0.22em;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    white-space: nowrap;
    transform: scaleY(0.85);
    transform-origin: top center;
  }
  .p-masters__head .store {
    display: inline-block !important;
    font-family: var(--font-serif);
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 500;
    letter-spacing: 0.2em;
    color: #444;
    margin: 0;
    margin-top: 18px;
    margin-left: 0;
    white-space: nowrap;
  }
  .p-masters__card .tx {
    display: inline-block !important;
    vertical-align: top !important;
    font-size: clamp(15.5px, 1.3vw, 18.5px);
    line-height: 2.35;
    letter-spacing: 0.16em;
    margin: 0;
    margin-left: clamp(28px, 3.0vw, 46px);
    height: auto;
    max-height: 65vh;
    color: #222;
  }

  /* 梅屋の文字色および光彩調整（赤背景に調和するシックな深紅シャドウ） */
  .p-masters-stack .p-masters__item--umeya .p-masters__card {
    text-shadow: 0 2px 12px rgba(80, 10, 15, 0.6), 0 1px 3px rgba(0, 0, 0, 0.35);
  }
  .p-masters-stack .p-masters__item--umeya .p-masters__card .tl,
  .p-masters-stack .p-masters__item--umeya .p-masters__card .tx {
    color: #ffffff !important;
  }
  .p-masters-stack .p-masters__item--umeya .p-masters__card .store {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}

/* ---------------------------------
   四季の和菓子 (.p-seasons)
---------------------------------*/
.p-seasons__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.p-seasons__item .p-seasons__link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.p-seasons__item .p-seasons__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.p-seasons__item .p-seasons__link:hover::after {
  opacity: 0.75;
}

.p-seasons__item .p-seasons__link .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-seasons__item .p-seasons__link .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: brightness(0.9);
}

.p-seasons__item .p-seasons__link:hover .image img {
  transform: scale(1.08);
  filter: brightness(0.96);
}

/* 季節の特大オーバーレイ半透明白文字 */
.p-seasons__item .season-char {
  position: absolute;
  right: -0.04em;
  bottom: -0.08em;
  z-index: 2;
  font-family: var(--font-serif);
  font-size: clamp(140px, 17vw, 260px);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.28);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  user-select: none;
  letter-spacing: normal;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.6s ease, text-shadow 0.6s ease;
}

.p-seasons__item .p-seasons__link:hover .season-char {
  transform: scale(1.08) translate(-1%, -1%);
  color: rgba(255, 255, 255, 0.42);
  text-shadow: 0 8px 36px rgba(0, 0, 0, 0.35);
}

/* 和菓子名（SPは横書き、PCは縦書き） */
.p-seasons__item .p-seasons__link .name {
  position: relative;
  z-index: 3;
  writing-mode: horizontal-tb;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 20px rgba(0, 0, 0, 0.5);
  margin: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.p-seasons__item .p-seasons__link:hover .name {
  transform: scale(1.04);
}

@media screen and (min-width: 768px){
  .p-seasons__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .p-seasons__item .p-seasons__link {
    aspect-ratio: 16 / 9;
  }
  .p-seasons__item .p-seasons__link .name {
    writing-mode: vertical-rl;
    font-size: 28px;
    letter-spacing: 0.26em;
  }
}

/* ---------------------------------
   店舗・自然のご案内 (.p-culture)
---------------------------------*/
.p-culture__item {
  margin-bottom: 60px;
}

.p-culture__item .image {
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.p-culture__item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.p-culture__item .tx-wrap {
  margin-top: 24px;
}

.p-culture__item .tl {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 0 0 14px;
}

.p-culture__item .tx {
  font-size: 15px;
  line-height: 2.1;
  color: #222;
  margin: 0 0 20px;
}

@media screen and (max-width: 1300px){
  .p-culture__item {
    max-width: 520px;
    margin: 0 auto;
  }
  .p-culture__item .tx-wrap {
    margin-top: 20px;
  }
  .p-culture__item + .p-culture__item {
    margin-top: 70px;
  }
}

@media screen and (min-width: 1301px){
  .p-culture {
    display: flex;
    gap: 64px;
  }
  .p-culture__item {
    flex: 1;
    display: flex;
    gap: 36px;
    margin-bottom: 0;
    align-items: flex-start;
  }
  .p-culture__item .image {
    width: 44%;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    overflow: hidden;
  }
  .p-culture__item .tx-wrap {
    writing-mode: vertical-rl;
    margin-top: 0;
    flex: 1;
    min-width: 0;
  }
  .p-culture__item .tl {
    font-size: 24px;
    letter-spacing: 0.16em;
    margin: 0 0 0 20px;
  }
  .p-culture__item .tx {
    max-height: 400px;
    margin: 0;
    line-height: 2.05;
    letter-spacing: 0.08em;
  }
}

/* ---------------------------------
   お知らせリスト (.p-topics)
---------------------------------*/
.p-topics {
  position: relative;
  display: flex;
  flex-direction: column;
}

.p-topics .c-section-title {
  order: 1;
}

.p-topics__list {
  order: 2;
  width: 100%;
  max-width: 100%;
}

.p-topics .link {
  order: 3; /* SP時はリストを読み終えた末尾に配置 */
  text-align: center;
  margin-top: 32px;
  font-size: 15px;
}

.p-topics__list p {
  margin: 0;
  border-top: 1px solid #ccc;
  width: 100%;
  max-width: 100%;
}

.p-topics__list p:last-child {
  border-bottom: 1px solid #ccc;
}

.p-topics__list p a {
  display: block;
  padding: 20px 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.p-topics__list p a:hover {
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.p-topics__list .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.p-topics__list .date {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  color: #555;
  display: inline-block;
  margin-bottom: 0;
  line-height: 1;
}

/* =========================================================================
   共通カテゴリーバッジ (.cat-badge)
   トップ・一覧・個別記事・店舗ページのどこでも端正なバッジとして描画
   ========================================================================= */
.cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff !important;
  background-color: var(--color-bengara); /* デフォルト: 弁柄色 #a34a3a */
  padding: 3.5px 10px 4px;
  border-radius: 3px;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cat-badge:empty {
  display: none !important;
}

/* 店舗別・組合別の端正な和のテーマカラー */
.cat-badge--union {
  background-color: #a34a3a; /* 組合: 格式ある弁柄 */
}
.cat-badge--midoriya {
  background-color: #3b5f4c; /* 緑屋老舗: 深い常磐緑・抹茶 */
}
.cat-badge--kameki {
  background-color: #8c4a2a; /* 亀喜総本家: 芳醇な栗渋・琥珀 */
}
.cat-badge--umeya {
  background-color: #8a3848; /* 梅屋: 上品な紅梅・臙脂 */
}
.cat-badge--fujinoya {
  background-color: #5c436b; /* 藤乃屋: 気品ある古代紫・藤 */
}
.cat-badge--custom,
.cat-badge--general {
  background-color: #6a6259; /* その他: 洗練された墨茶 */
}

a:hover .cat-badge {
  opacity: 0.88;
}

.p-topics__list .tl {
  position: relative;
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1a1714;
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-topics__list p a:hover .tl {
  color: #a34a3a;
}

@media screen and (min-width: 768px){
  .p-topics {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }
  .p-topics .c-section-title {
    margin: 0;
    order: unset;
  }
  .p-topics__list {
    width: 72%;
    max-width: 880px;
    margin-top: 0;
    order: unset;
  }
  .p-topics .link {
    writing-mode: vertical-rl;
    margin: 0;
    align-self: flex-end;
    font-size: 16px;
    order: unset;
  }
  .p-topics__list p a {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 26px 32px;
  }
  .p-topics__list .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    width: 190px;
    flex-shrink: 0;
  }
  .p-topics__list .date {
    margin-bottom: 0;
    width: auto;
    flex-shrink: 0;
  }
}

/* ---------------------------------
   お問い合わせ・案内カード (.c-guide-card)
---------------------------------*/
.c-guide-card .tl {
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  margin: 0 auto 36px;
  letter-spacing: 0.14em;
}

.c-guide-card__inner {
  background: #fff;
  padding: 36px 24px;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid #e8e5e0;
  box-sizing: border-box;
}

@media screen and (min-width: 768px){
  .c-guide-card__inner {
    padding: 48px 40px;
  }
}

.c-guide-card__item {
  text-align: center;
  padding-bottom: 28px;
  border-bottom: 1px solid #eee;
}

.c-guide-card__item .sub-tl {
  font-size: 13.5px;
  color: #777;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
}

.c-guide-card__item .tel {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #1a1714;
  margin: 0 0 16px;
}

.c-guide-card__item .comment {
  font-size: 14px;
  color: #444;
  line-height: 2.1;
  letter-spacing: 0.05em;
  margin: 0;
}

.c-guide-card .c-guide-card__btn {
  margin-top: 36px;
  text-align: center;
}

.c-guide-card .c-guide-card__btn .button-1 {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* 栗きんとんロード: 店舗一覧（センター軸の統一・端正な和の案内板） */
.p-road .c-guide-card__inner {
  max-width: 800px;
}

@media screen and (min-width: 768px){
  .p-road .c-guide-card__inner {
    padding: 56px 60px 48px;
  }
}

.p-road .c-guide-card__item {
  border-bottom: 1px solid #ede8e1;
  padding-bottom: 32px;
}

.p-road .road-stores {
  margin: 0 auto;
  max-width: 620px;
}

.p-road .road-store-item {
  text-align: center;
  padding: 22px 0;
  border-bottom: 1px solid #ede8e1;
}

.p-road .store-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: #1a1714;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  line-height: 1.4;
}

.p-road .store-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13.5px;
  color: #666;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.p-road .store-info .tel {
  font-family: "Oswald", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #8c4a2a;
  text-decoration: none;
  transition: color 0.25s ease;
}

.p-road .store-info .tel:hover {
  color: #c9402a;
}

.p-road .store-info .holiday {
  font-size: 12.5px;
  color: #888;
  letter-spacing: 0.03em;
}

.p-road .c-guide-card .c-guide-card__btn {
  margin-top: 40px;
}

/* 栗きんとんロード & 公式LINE SP対応 */
@media screen and (max-width: 767px){
  .p-road .c-guide-card__inner,
  .p-line .c-guide-card__inner {
    padding: 36px 18px 32px;
  }
  .p-road .c-guide-card__item,
  .p-line .c-guide-card__item {
    padding-bottom: 22px;
  }
  .p-road .c-guide-card__item .tel,
  .p-line .c-guide-card__item .tel {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .p-road .c-guide-card__item .comment,
  .p-line .c-guide-card__item .comment {
    font-size: 13px;
    line-height: 1.95;
  }
  .p-road .c-guide-card__item .comment span,
  .p-line .c-guide-card__item .comment span {
    display: inline-block;
  }
  .p-road .road-store-item {
    padding: 16px 0;
  }
  .p-road .store-name {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .p-road .store-info {
    font-size: 12.5px;
    gap: 6px 14px;
    line-height: 1.5;
  }
  .p-road .store-info .tel {
    font-size: 13.5px;
  }
  .p-road .store-info .holiday {
    font-size: 11.5px;
  }
  .p-road .c-guide-card .c-guide-card__btn,
  .p-line .c-guide-card .c-guide-card__btn {
    margin-top: 28px;
  }
}

/* ---------------------------------
   フッター (.l-footer: 白練り漆喰の最背面)
---------------------------------*/
.l-footer {
  margin-top: 180px;
  background-color: var(--color-shikkui);
  background-image: var(--texture-shikkui-shironeri);
  background-repeat: repeat;
  background-size: 512px 512px;
  border-top: 1px solid #d4cdbf;
}

/* ---------------------------------
   八百津町ふるさと納税 上品で軽やかなインライン導線（4カラム直上）
---------------------------------*/
.footer-furusato-inline {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #dad3c6;
}

.footer-furusato-inline__text {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-furusato-inline__tag {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8c7355;
  border: none;
  padding: 0;
  background-color: transparent;
  line-height: 1.4;
}

.footer-furusato-inline__msg {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #332f2b;
  line-height: 1.6;
}

.footer-furusato-inline__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #1a1714;
  background: #ffffff;
  border: 1px solid #1a1714;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.footer-furusato-inline__link svg.external-icon {
  fill: currentColor;
  transition: transform 0.25s ease;
}

.footer-furusato-inline__link:hover {
  background: #8c4a2a;
  border-color: #8c4a2a;
  color: #ffffff;
}

.footer-furusato-inline__link:hover svg.external-icon {
  transform: translate(2px, -2px);
  fill: #ffffff;
}

@media screen and (max-width: 820px) {
  .footer-furusato-inline {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 30px 16px 26px;
  }
  .footer-furusato-inline__text {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .footer-furusato-inline__tag {
    font-size: 11.5px;
    letter-spacing: 0.2em;
    color: #8c7355;
  }
  .footer-furusato-inline__msg {
    font-size: 13.5px;
    line-height: 1.8;
    color: #2c251f;
    text-align: center;
  }
  .footer-furusato-inline__link {
    margin-top: 4px;
    height: 38px;
    padding: 0 20px;
    font-size: 13px;
  }
}

.footer-link {
  padding: 44px 0;
  border-bottom: 1px solid #dad3c6;
}

.footer-link ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 40px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.footer-menu {
  padding: 64px 0 50px;
}

.footer-wide-menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  font-size: 15px;
}

@media screen and (min-width: 768px){
  .footer-wide-menu-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 767px){
  .l-footer {
    margin-top: 100px;
  }
  .footer-link {
    padding: 30px 0;
  }
  .footer-link ul {
    gap: 14px 24px;
    font-size: 13.5px;
  }
  .footer-menu {
    padding: 40px 0;
  }
  .footer-wide-menu-list {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
    font-size: 14px;
  }
  .footer-wide-menu-list h4 {
    margin-bottom: 14px;
    font-size: 16px;
  }
  .footer-wide-menu-list ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-info-address {
    font-size: 13px;
  }
}

.footer-wide-menu-list h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: 0.08em;
  color: #1a1714;
}

.footer-wide-menu-list ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-wide-menu-list ul li {
  line-height: 1.6;
}

.footer-info-address {
  font-size: 13.5px;
  line-height: 1.85;
  color: #555;
  margin-top: 8px;
}

.footer-info-address a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-link ul li a,
.footer-wide-menu-list ul li a {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-link ul li a:hover,
.footer-wide-menu-list ul li a:hover,
.footer-info-address a:hover {
  color: #a34a3a;
  text-decoration: none;
}

.footer-copy {
  padding: 40px 0 60px;
  text-align: center;
  font-size: 12px;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.18em;
  color: #666;
}

/* ---------------------------------
   組版・テキスト表示ユーティリティ
---------------------------------*/
.tcy {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
}

.u-keep,
.u-ib {
  display: inline-block;
}

@media screen and (min-width: 768px){
  .u-sp {
    display: none !important;
  }
}


/* =========================================================================
   第2階層：店舗詳細ページ (single-shop.php) スタイル
   トップページの和モダン・高級感（Zen Old Mincho, Zen Kaku Gothic）と完全調和
   ========================================================================= */

.p-shop-detail {
  padding-top: 100px;
  background-color: transparent;
  color: #1a1714;
}

/* パンくずリスト */
.c-breadcrumb-wrap {
  padding-top: 20px;
  padding-bottom: 24px;
}
.c-breadcrumb {
  font-size: 13px;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.c-breadcrumb a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}
.c-breadcrumb a:hover {
  color: #a34a3a;
}
.c-breadcrumb .sep {
  color: #aaa;
}
.c-breadcrumb .current {
  color: #1a1714;
  font-weight: 500;
}

/* =========================================================================
   店舗詳細ヘッダー（トップページ p-concept に倣った端正な和モダン設計）
   ========================================================================= */
.p-shop-header {
  padding-top: 20px;
  padding-bottom: 70px;
}
.p-shop-header__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.p-shop-header__visual {
  width: 100%;
}
.p-shop-header__image-frame {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.p-shop-header__image-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center;
  display: block;
}
.p-shop-header__content {
  width: 100%;
}
.p-shop-header__badge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.p-shop-header__history {
  font-family: var(--font-serif);
  font-size: 13.5px;
  letter-spacing: 0.15em;
  color: #8c7355;
  font-weight: 600;
}
.p-shop-header__title {
  margin-bottom: 14px;
  line-height: 1.35;
}
.p-shop-header__title .sub-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  color: #8c4a2a;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
}
.p-shop-header__title .main-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  color: #1a1714;
  letter-spacing: 0.1em;
}
.p-shop-header__catch {
  font-family: var(--font-serif);
  font-size: 15px;
  color: #555;
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin-bottom: 18px;
}
.p-shop-header__desc {
  font-size: 14.5px;
  line-height: 2.1;
  color: #2a2724;
  margin-bottom: 26px;
  letter-spacing: 0.04em;
}

/* トップページ調和の端正な直角リンクボタン群（コンパクト・白背景・黒細線・ホバー反転） */
.p-shop-header__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.p-shop-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #1a1714;
  background: #ffffff;
  border: 1px solid #1a1714;
  text-decoration: none;
  border-radius: 0;
  box-sizing: border-box;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.p-shop-link-btn:hover {
  background: #8c4a2a;
  border-color: #8c4a2a;
  color: #ffffff;
}

/* PC（1025px以上）: トップページ p-concept に倣った美しい横並びエディトリアル */
@media screen and (min-width: 1025px) {
  .p-shop-header {
    padding-top: 40px;
    padding-bottom: 90px;
  }
  .p-shop-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(40px, 5vw, 64px);
    max-width: 1140px;
    margin: 0 auto;
  }
  .p-shop-header__visual {
    flex: 1 1 52%;
    min-width: 440px;
    max-width: 580px;
  }
  .p-shop-header__content {
    flex: 1 1 48%;
    max-width: 520px;
  }
}

/* 共通セクションヘッダー（トップページ準拠の静謐な和モダン縦書き） */
.c-section-header {
  text-align: center;
  margin-bottom: 50px;
}
.c-section-header .c-section-title {
  margin: 0 auto 28px;
}
.c-section-header__lead {
  font-size: 14.5px;
  line-height: 2.1;
  color: #555;
  letter-spacing: 0.04em;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-section-header {
    margin-bottom: 36px;
  }
  .c-section-header .c-section-title {
    margin: 0 auto 20px;
  }
  .c-section-header__lead {
    font-size: 13.5px;
    line-height: 2.0;
    padding: 0 16px;
  }
}

/* 【季節軸】四季の和菓子 グリッド（2カラム・ダイナミック） */
.p-shop-seasons-axis {
  padding: 0;
  background: transparent;
}
.p-season-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.5vw, 44px);
  max-width: 1140px;
  margin: 0 auto;
}
.p-season-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5ded3;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}
.p-season-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09);
}
.p-season-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  color: #fff;
  padding: 8px 14px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.p-season-card__badge-kanji {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 3px;
}
.p-season-card__badge-en {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.95;
}
.p-season-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f0ebe4;
}
.p-season-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  display: block;
}
.p-season-card:hover .p-season-card__image img {
  transform: scale(1.04);
}
.p-season-card__body {
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.p-season-card__period {
  font-size: 13px;
  color: #8c7355;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.p-season-card__title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  color: #1a1714;
  margin-bottom: 12px;
  line-height: 1.45;
  letter-spacing: 0.06em;
}
.p-season-card__desc {
  font-size: 14.5px;
  line-height: 2.0;
  color: #444;
  letter-spacing: 0.03em;
}

/* 【店舗軸】年間代表銘菓 グリッド */
.p-shop-products-axis {
  padding: 0;
  background: transparent;
}
.p-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.p-product-card {
  background: #fff;
  border: 1px solid #e8e2d8;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.p-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}
.p-product-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.p-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.p-product-card:hover .p-product-card__image img {
  transform: scale(1.04);
}
.p-product-card__content {
  padding: 24px;
}
.p-product-card__name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: #1a1714;
  margin-bottom: 6px;
}
.p-product-card__price {
  font-size: 14px;
  color: #8c5b2a;
  font-weight: 600;
  margin-bottom: 12px;
}
.p-product-card__desc {
  font-size: 14px;
  line-height: 1.85;
  color: #555;
  margin-bottom: 16px;
}
.p-product-card__link {
  border-top: 1px dashed #ebd9c8;
  padding-top: 12px;
  text-align: right;
}

/* 店舗基本情報（トップページ c-guide-card 準拠のモダン営業案内） */
.p-shop-info-section {
  padding: 0;
  background: transparent;
}
.p-shop-info-inner {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e8e5e0;
  box-sizing: border-box;
  padding: 44px 44px 36px;
}
.p-shop-info-list {
  margin: 0 0 32px;
}
.p-shop-info-row {
  display: flex;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid #ebd9c8;
}
.p-shop-info-row:first-child {
  padding-top: 0;
}
.p-shop-info-row dt {
  width: 130px;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #8c7355;
  letter-spacing: 0.1em;
}
.p-shop-info-row dd {
  flex: 1;
  font-size: 15px;
  color: #1a1714;
  line-height: 1.8;
  margin: 0;
}
.p-shop-info-maplink {
  display: inline-block;
  margin-left: 12px;
}
.p-shop-info-row a.tel-link {
  color: #1a1714;
  font-weight: 700;
  text-decoration: none;
}
.p-shop-info-row a.tel-link:hover {
  color: #a34a3a;
  text-decoration: underline;
}

/* 自店舗お知らせセクション */
.p-shop-news-section {
  padding: 0;
  background: transparent;
}

/* 他店舗周遊ナビゲーション */
.p-shop-other-stores {
  padding: 0;
  background: transparent;
}
.p-other-stores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.p-other-store-card a {
  display: block;
  background: #fff;
  border: 1px solid #ded5c7;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p-other-store-card a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.p-other-store-card .image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.p-other-store-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.p-other-store-card a:hover .image img {
  transform: scale(1.05);
}
.p-other-store-card .content {
  padding: 16px 18px;
  text-align: center;
}
.p-other-store-card .history {
  font-size: 12px;
  color: #8c7355;
  margin-bottom: 4px;
}
.p-other-store-card .name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: #1a1714;
  margin-bottom: 2px;
}
.p-other-store-card .title {
  font-size: 13px;
  color: #666;
}

/* 店舗詳細ページ内のセクション余白適正化（トップページと同じ美しいリズム） */
.p-shop-detail .l-section {
  margin-top: 110px;
}
@media screen and (max-width: 768px) {
  .p-shop-detail .l-section {
    margin-top: 70px;
  }
}

/* 店舗詳細ページ専用 フッター接続（不自然な巨大空白の完全解消） */
.p-shop-detail + .l-footer {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .p-shop-detail + .l-footer {
    margin-top: 40px;
  }
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
  .p-season-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media screen and (max-width: 768px) {
  .p-shop-detail {
    padding-top: 10px;
  }
  .p-shop-header__inner {
    padding: 0;
    gap: 28px;
  }
  .p-shop-header__title .main-title {
    font-size: 28px;
  }
  .p-season-grid,
  .p-products-grid,
  .p-other-stores-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* SP時 店舗案内（営業案内）縦並びモダンレイアウト */
  .p-shop-info-inner {
    padding: 28px 20px 24px;
  }
  .p-shop-info-list {
    margin: 0 0 24px;
  }
  .p-shop-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid #eee5da;
    text-align: left;
  }
  .p-shop-info-row dt {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #8c7355;
    letter-spacing: 0.12em;
    line-height: 1.4;
  }
  .p-shop-info-row dd {
    font-size: 14.5px;
    color: #1a1714;
    line-height: 1.7;
    margin: 0;
    width: 100%;
  }
  .p-shop-info-maplink {
    display: block;
    margin-left: 0;
    margin-top: 6px;
  }
  .p-shop-info-inner .c-guide-card__btn {
    margin-top: 24px;
  }
  .p-shop-info-inner .c-guide-card__btn .button-1 {
    width: 100%;
    max-width: 300px;
    height: 44px;
    font-size: 13px;
    margin: 0 auto;
  }
}

/* =========================================================================
   WordPress ログイン時（管理バー #wpadminbar 表示時）のレイアウト調整
   黒い管理バーの下にページの最上部および固定ヘッダーが美しく配置されるように設定
   ========================================================================= */

/* スマホ表示時（600px以下）でも管理バーを fixed で画面上部に常駐させ、マージンを確実に維持 */
@media screen and (max-width: 600px) {
  body.admin-bar #wpadminbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* PC表示時（画面幅 783px 以上: 管理バー高さ 32px） */
@media screen and (min-width: 783px) {
  /* 四隅固定ロゴマーク（左上） */
  body.admin-bar .header-logo {
    top: calc(40px + 32px) !important;
  }

  /* 四隅固定ハンバーガーメニュー & LINEボタン（右上） */
  body.admin-bar .header-menu {
    top: calc(40px + 32px) !important;
  }

  /* 開閉メガメニュー（全画面オーバーレイ） */
  body.admin-bar .header-wide-menu {
    top: 32px !important;
    height: calc(100% - 32px) !important;
  }
}

/* タブレット表示時（画面幅 768px 〜 782px: 管理バー高さ 46px） */
@media screen and (min-width: 768px) and (max-width: 782px) {
  body.admin-bar .header-logo {
    top: calc(40px + 46px) !important;
  }

  body.admin-bar .header-menu {
    top: calc(40px + 46px) !important;
  }

  body.admin-bar .header-wide-menu {
    top: 46px !important;
    height: calc(100% - 46px) !important;
  }
}

/* スマホ表示時（画面幅 767px 以下: 管理バー高さ 46px） */
@media screen and (max-width: 767px) {
  /* 右上固定ハンバーガーメニュー & LINEボタン */
  body.admin-bar .header-menu {
    top: calc(24px + 46px) !important;
  }

  /* 開閉メガメニュー（全画面オーバーレイ） */
  body.admin-bar .header-wide-menu {
    top: 46px !important;
    height: calc(100% - 46px) !important;
  }
}

/* =========================================================================
   ACF連携：販売状況バッジ & 補足メモ & 名店詳細導線
   ========================================================================= */

.c-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  border-radius: 9999px;
  white-space: nowrap;
}

/* 好評販売中（緑） */
.c-status-badge.is-open {
  background-color: #edf5ef;
  color: #2b5d3a;
  border: 1px solid rgba(43, 93, 58, 0.28);
}
.c-status-badge.is-open::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #2b5d3a;
  box-shadow: 0 0 0 2px rgba(43, 93, 58, 0.2);
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

/* 本日分完売（赤朱） */
.c-status-badge.is-soldout {
  background-color: #fcf1ef;
  color: #a33829;
  border: 1px solid rgba(163, 56, 41, 0.28);
}

/* 今期終了（落ち着いた墨灰） */
.c-status-badge.is-closing {
  background-color: #f2f1ee;
  color: #6a6660;
  border: 1px solid rgba(106, 102, 96, 0.28);
}

/* 予約受付中（山吹・琥珀） */
.c-status-badge.is-reserve {
  background-color: #fdf7ec;
  color: #9c6019;
  border: 1px solid rgba(156, 96, 25, 0.28);
}

/* 状況の補足メモ */
.p-shop-status-note {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: #665f57;
  line-height: 1.5;
  margin-top: 8px;
  padding: 5px 12px;
  background-color: rgba(243, 239, 230, 0.85);
  border-left: 3px solid #8c4a2a;
  border-radius: 0 4px 4px 0;
}

/* 四つの名店カード内の店舗詳細リンクボタン */
.p-masters__detail-btn {
  margin-top: 20px;
}
.p-masters__detail-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: #ffffff !important;
  background: linear-gradient(135deg, #8c4a2a 0%, #6b3318 100%);
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(140, 74, 42, 0.22);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-masters__detail-btn a:hover {
  background: linear-gradient(135deg, #a35632 0%, #7d3f22 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(140, 74, 42, 0.32);
}
.p-masters__detail-btn .arrow {
  font-size: 11px;
  transition: transform 0.25s ease;
}
.p-masters__detail-btn a:hover .arrow {
  transform: translateX(3px);
}