@charset "utf-8";

/*
 * GOKAN PARLOIR - スタイル追加(ステージ2-2-1)
 *
 * 既存 style.css / index.css は変更せず、追加分をこのファイルにまとめる方針。
 * インラインスタイルから移行されたユーティリティクラス + 新規ページ用クラス。
 *
 * 関連:_docs/design-system.md / css/design-tokens.css
 */


/* ===========================================================
 * flowing-letters の透明度バリエーション
 * 既存:初出は opacity:1、以降のセクションは opacity:.2
 * ステージ2-2-1 でインラインスタイル `style="opacity:.2;"` を置換
 * =========================================================== */

.flowing-letters--soft {
  opacity: 0.2;
}


/* ===========================================================
 * 「コンテンツ準備中」プレースホルダー
 * 既存:store/, news/ で使われていたインラインスタイルを置換
 * =========================================================== */

.coming-soon-box {
  text-align: center;
  padding: 6rem 0 10rem;
}

.coming-soon-text {
  font-size: 1.6rem;
  line-height: 2.8em;
  color: #3a2210;  /* var(--color-text-body) と同値 */
}


/* ===========================================================
 * 商品の注意書き(テイクアウト限定など)
 * 既存:gift/ の crimson 色注意書きを置換
 * =========================================================== */

.note-warning {
  display: block;
  color: crimson;
  text-decoration: underline;
  margin: 1em 0;
}


/* ===========================================================
 * スクリーンリーダー専用テキスト(視覚的非表示)
 * h1の構造担保や、アイコンの代替テキスト等で使用
 * WCAG準拠の「Visually hidden but accessible」パターン
 * =========================================================== */

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


/* ===========================================================
 * 日本語表示の禁則処理・行折り返し制御
 * マニュアル準拠:「禁則処理」「英数字と日本語の間隔」
 *
 * - line-break: strict;
 *   小書き文字(っゃゅょ等)や記号の行頭・行末を厳格に制御
 * - word-break: auto-phrase;
 *   日本語の文節単位で改行(Chrome 119+ / Safari 17.4+)
 *   未対応ブラウザは normal 動作にフォールバック(問題なし)
 * - overflow-wrap: anywhere;
 *   長い英単語・URL でレイアウト崩壊するのを防ぐ
 * =========================================================== */

body {
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}


/* ===========================================================
 * キーボードフォーカス時の輪郭線
 * マウス操作時は表示せず、Tabキー操作時のみ表示(:focus-visible)
 * マニュアル準拠:「:focus スタイル(輪郭線を消さない!)」
 * =========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #530B02;       /* var(--color-text-primary) と同値 */
  outline-offset: 3px;
  border-radius: 2px;
}

/* マウス操作時の余計な輪郭線は無効化(必要なフォーカス表示は :focus-visible で担保) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}


/* ===========================================================
 * prefers-reduced-motion 対応
 * ユーザーが「動きを減らす」設定をしている場合、
 * 全アニメーション・トランジションを最小化または無効化する。
 *
 * 対応 OS:
 *  - macOS: アクセシビリティ > ディスプレイ > 視差効果を減らす
 *  - iOS:   アクセシビリティ > 動作 > 視差効果を減らす
 *  - Windows: アクセシビリティ > 視覚効果 > アニメーションを無効
 *  - Android: ユーザー補助 > アニメーションを削除
 *
 * 関連:_docs/animation.md(2-1-9 で計画)
 * =========================================================== */

@media (prefers-reduced-motion: reduce) {

  /* 全アニメーション・トランジションをほぼ即時化 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* 流れる文字の無限ループは完全停止 */
  .scroll-infinity__list--left {
    animation: none !important;
  }

  /* フェード等の出現アニメーションは初期状態を可視化 */
  .fadeIn, .fadeUp, .fadeDown, .fadeLeft, .fadeRight,
  .flipDown, .flipLeft, .flipRight, .flipLeftTop, .flipRightTop,
  .rotateX, .rotateY, .rotateLeftZ, .rotateRightZ,
  .zoomIn, .zoomOut, .blur, .smooth {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger,
  .fadeLeftTrigger, .fadeRightTrigger,
  .flipDownTrigger, .flipLeftTrigger, .flipLeftTopTrigger,
  .flipRightTrigger, .flipRightTopTrigger,
  .rotateXTrigger, .rotateYTrigger, .rotateLeftZTrigger, .rotateRightZTrigger,
  .zoomInTrigger, .zoomOutTrigger,
  .blurTrigger, .smoothTrigger,
  .lineTrigger,
  .bgappearTrigger, .bgUDextendTrigger, .bgDUextendTrigger,
  .bgRLextendTrigger, .bgLRextendTrigger {
    opacity: 1 !important;
  }
}


/* ===========================================================
 * ローディング・エラー状態(マニュアル 2-2-5)
 *
 * 本格的なフォーム実装はステージ3-5(PHP工房連携)で行う。
 * 本コミットではクラスのみ用意し、後段で動作する。
 * =========================================================== */

/* 画像 placeholder(読込中の背景色)
 * 透過PNG(ロゴ等)は除外し、特定のクラスにのみ適用
 * .has-placeholder クラスを付けた img 要素のみ背景色を設定 */
.has-placeholder {
  background-color: #fff8e8;  /* var(--color-bg-card) と同値 */
}


/* ===========================================================
 * NEWS バー(TOPページのヒーロー直下・最新1件を1行表示)
 * =========================================================== */

.news-bar {
  background-color: #fff8e8;
  border-bottom: 1px solid rgba(180, 130, 50, 0.3);
}

.news-bar .inner {
  max-width: 1270px;
  width: 92%;
  margin: 0 auto;
}

.news-bar-inner {
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 1.4rem 0;
  font-size: 1.3rem;
  color: #530B02;
}

/* NEWS ラベル */
.news-bar-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1em;
  margin: 0;
  padding: 0 1.2em 0 0;
  border-right: 1px solid rgba(180, 130, 50, 0.4);
  flex-shrink: 0;
}

.news-bar-label-en {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  color: #530B02;
}

.news-bar-label-ja {
  font-size: 1rem;
  letter-spacing: 0.25em;
  color: rgba(83, 11, 2, 0.6);
}

/* NEWS 1件 */
.news-bar-item {
  display: flex;
  align-items: center;
  gap: 1em;
  flex: 1;
  min-width: 0;
  color: #530B02;
  text-decoration: none;
  transition: opacity 0.2s;
}

.news-bar-item:hover {
  opacity: 0.7;
}

.news-bar-date {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  color: rgba(83, 11, 2, 0.7);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.news-bar-cat {
  display: inline-block;
  padding: 0.2em 0.8em;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  background-color: #FDC600;
  border-radius: 100px;
  color: #530B02;
  flex-shrink: 0;
}

.news-bar-title {
  flex: 1;
  min-width: 0;
  font-size: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 一覧へリンク */
.news-bar-more {
  flex-shrink: 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: #530B02;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.news-bar-more:hover {
  border-bottom-color: #530B02;
}

/* モバイル:横余白を詰めた低背・1行のコンパクトなニュースバー
   - .inner の中央寄せ(92%)をやめ、フル幅+最小パディングで横余白を除去
   - 縦パディングを詰めて低背化、タイトルは省略表示(…)
   - 「View all」テキストはシェブロン「›」に置き換えて省スペース・洗練 */
@media screen and (max-width: 768px) {
  .news-bar .inner {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .news-bar-inner {
    gap: 0.7em;
    padding: 0.55rem 0;
    font-size: 1.15rem;
  }
  .news-bar-label {
    padding-right: 0.7em;
  }
  .news-bar-label-en {
    font-size: 1.05rem;
    letter-spacing: 0.18em;
  }
  .news-bar-label-ja {
    display: none;
  }
  .news-bar-cat {
    display: none;
  }
  .news-bar-date {
    font-size: 1.05rem;
  }
  .news-bar-title {
    font-size: 1.15rem;
  }
  /* 「View all ↗」→ コンパクトなシェブロンに(テキストはa11yのため残す) */
  .news-bar-more {
    font-size: 0;
    line-height: 0;
    flex-shrink: 0;
  }
  .news-bar-more::after {
    content: "\203A"; /* › */
    font-size: 1.9rem;
    line-height: 1;
    color: rgba(83, 11, 2, 0.85);
  }
}


/* フォームエラーメッセージ */
.form-error {
  display: none;            /* 通常時は非表示・JSで .is-active にして表示 */
  margin: 0.5em 0 0;
  padding: 0.5em 0.8em;
  font-size: 1.3rem;
  color: #c93838;
  background-color: rgba(201, 56, 56, 0.08);
  border-left: 3px solid #c93838;
  border-radius: 0 4px 4px 0;
}

.form-error.is-active {
  display: block;
}

/* エラー状態の入力欄 */
.is-invalid,
[aria-invalid="true"] {
  border-color: #c93838 !important;
  box-shadow: 0 0 0 3px rgba(201, 56, 56, 0.15);
}


/* フォーム送信中ローディング */
.form-loading {
  display: none;
  text-align: center;
  margin: 1em 0;
  font-size: 1.3rem;
  color: #530B02;            /* var(--color-text-primary) と同値 */
}

.form-loading.is-active {
  display: block;
}

/* スピナー(SVGアイコン代替の単純CSSスピナー) */
.form-loading::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border: 2px solid rgba(83, 11, 2, 0.2);
  border-top-color: #530B02;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: form-loading-spin 0.8s linear infinite;
}

@keyframes form-loading-spin {
  to { transform: rotate(360deg); }
}

/* prefers-reduced-motion 対応:スピナーは静止画にする */
@media (prefers-reduced-motion: reduce) {
  .form-loading::before {
    animation: none;
    border-top-color: rgba(83, 11, 2, 0.2);
  }
}


/* 送信成功メッセージ */
.form-success {
  display: none;
  margin: 1em 0;
  padding: 1em 1.2em;
  font-size: 1.4rem;
  color: #2f6b2f;
  background-color: rgba(47, 107, 47, 0.08);
  border-left: 3px solid #2f6b2f;
  border-radius: 0 4px 4px 0;
}

.form-success.is-active {
  display: block;
}


/* 送信中の送信ボタン無効化 */
.is-submitting {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}


/* ===========================================================
 * Thanks ページ(送信完了)
 * =========================================================== */

.thanks-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 0 2rem;
}

.thanks-lead {
  font-family: 'gokan', serif;
  font-size: 2.2rem;
  line-height: 1.8em;
  color: #530B02;
  margin: 0 0 3rem;
  letter-spacing: 0.1em;
}

.thanks-text {
  font-size: 1.5rem;
  line-height: 2em;
  color: #3a2210;
  margin: 0 0 4rem;
}

.thanks-notes {
  text-align: left;
  background-color: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.3);
  border-radius: 8px;
  padding: 2.5rem 3rem;
  margin: 0 0 4rem;
}

.thanks-notes dt {
  font-size: 1.4rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.1em;
  margin: 1.5rem 0 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(83, 11, 2, 0.15);
}

.thanks-notes dt:first-child {
  margin-top: 0;
}

.thanks-notes dd {
  font-size: 1.4rem;
  line-height: 1.9em;
  color: #3a2210;
  margin: 0 0 1.2rem;
}

.thanks-notes dd a {
  color: #530B02;
  text-decoration: underline;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .thanks-content {
    padding: 2rem 0;
  }
  .thanks-lead {
    font-size: 1.8rem;
  }
  .thanks-notes {
    padding: 2rem 1.6rem;
  }
}


/* ===========================================================
 * 404 エラーページ
 * =========================================================== */

.error-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 0 2rem;
}

.error-lead {
  font-family: 'gokan', serif;
  font-size: 2.2rem;
  line-height: 1.8em;
  color: #530B02;
  margin: 0 0 3rem;
  letter-spacing: 0.1em;
}

.error-text {
  font-size: 1.5rem;
  line-height: 2em;
  color: #3a2210;
  margin: 0 0 4rem;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2.4rem;
  list-style: none;
  padding: 2.5rem 2rem;
  margin: 0 0 4rem;
  background-color: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.3);
  border-radius: 8px;
}

.error-links li {
  list-style: none;
}

.error-links a {
  display: inline-block;
  font-size: 1.4rem;
  color: #530B02;
  letter-spacing: 0.1em;
  padding: 0.4em 0.6em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, opacity 0.3s;
}

.error-links a:hover {
  border-bottom-color: #530B02;
  opacity: 0.85;
}

@media screen and (max-width: 768px) {
  .error-content {
    padding: 2rem 0;
  }
  .error-lead {
    font-size: 1.8rem;
  }
  .error-links {
    padding: 1.6rem;
    gap: 0.8rem 1.4rem;
  }
}


/* ===========================================================
 * 法的ページ(プライバシーポリシー等)
 * =========================================================== */

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 0 2rem;
}

.legal-intro {
  font-size: 1.5rem;
  line-height: 2em;
  color: #3a2210;
  margin: 0 0 4rem;
}

.legal-section {
  margin: 0 0 3.5rem;
}

.legal-section h2 {
  font-family: 'gokan', serif;
  font-size: 1.8rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.1em;
  margin: 0 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.3);
}

.legal-section p {
  font-size: 1.4rem;
  line-height: 2em;
  color: #3a2210;
  margin: 0 0 1.2em;
}

.legal-section ul {
  list-style: disc;
  padding-left: 2em;
  margin: 0 0 1.2em;
}

.legal-section ul li {
  font-size: 1.4rem;
  line-height: 1.9em;
  color: #3a2210;
  margin: 0 0 0.4em;
  list-style: disc;
}

.legal-section a {
  color: #530B02;
  text-decoration: underline;
}

.legal-section a:hover {
  opacity: 0.7;
}

.legal-links {
  list-style: none !important;
  padding-left: 0 !important;
}

.legal-links li {
  list-style: none !important;
}

.legal-contact {
  background-color: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.3);
  border-radius: 8px;
  padding: 2rem 2.5rem;
  margin: 1.5rem 0 0;
}

.legal-contact dt {
  font-size: 1.3rem;
  color: #530B02;
  letter-spacing: 0.1em;
  margin: 1.2rem 0 0.3rem;
  opacity: 0.7;
}

.legal-contact dt:first-child {
  margin-top: 0;
}

.legal-contact dd {
  font-size: 1.4rem;
  line-height: 1.8em;
  color: #3a2210;
  margin: 0;
}

.legal-contact dd a {
  color: #530B02;
  text-decoration: underline;
}

.legal-date {
  text-align: right;
  font-size: 1.3rem;
  color: #8a5c10;
  margin: 4rem 0 0;
  line-height: 1.8em;
}

.nowrap {
  white-space: nowrap;
}


/* ===========================================================
 * パンくずリスト(全サブページ共通)
 * =========================================================== */

.breadcrumb {
  max-width: 1270px;
  width: 85%;
  margin: 0 auto;
  padding: 1.5rem 0 0;
  font-size: 1.2rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.5em;
  align-items: center;
}

.breadcrumb li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  color: #530B02;
  letter-spacing: 0.05em;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 0.5em;
  color: rgba(83, 11, 2, 0.4);
  font-size: 0.9em;
}

.breadcrumb a {
  color: #530B02;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.breadcrumb a:hover {
  border-bottom-color: #530B02;
}

.breadcrumb [aria-current="page"] {
  color: rgba(83, 11, 2, 0.6);
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    font-size: 1.1rem;
    padding: 1rem 0 0;
  }
}


/* ===========================================================
 * STORY ページの運営会社セクション(E-E-A-T 強化)
 * =========================================================== */

.story-company {
  background-color: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.3);
  border-radius: 8px;
  padding: 2.5rem 3rem;
  margin: 3rem 0 0;
}

.story-company dt {
  font-size: 1.3rem;
  color: #530B02;
  letter-spacing: 0.1em;
  margin: 1.4rem 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(83, 11, 2, 0.15);
  opacity: 0.7;
}

.story-company dt:first-child {
  margin-top: 0;
}

.story-company dd {
  font-size: 1.4rem;
  line-height: 1.9em;
  color: #3a2210;
  margin: 0;
}

.story-company dd a {
  color: #530B02;
  text-decoration: underline;
}

.story-company dd a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .story-company {
    padding: 2rem 1.6rem;
  }
}


/* ===========================================================
 * SITEMAP ページ
 * =========================================================== */

.sitemap-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 0 2rem;
}

.sitemap-lead {
  font-size: 1.5rem;
  line-height: 2em;
  color: #3a2210;
  text-align: center;
  margin: 0 0 4rem;
}

.sitemap-section-title {
  font-family: 'gokan', serif;
  font-size: 1.8rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.1em;
  margin: 4rem 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.3);
}

.sitemap-section-title:first-of-type {
  margin-top: 0;
}

.sitemap-tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-tree li {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.15);
  transition: background-color 0.2s;
}

.sitemap-tree li:hover {
  background-color: rgba(255, 248, 232, 0.5);
}

.sitemap-tree a {
  font-size: 1.5rem;
  color: #530B02;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
  margin-bottom: 0.4rem;
  transition: border-color 0.2s;
}

.sitemap-tree a:hover {
  border-bottom-color: #530B02;
}

.sitemap-desc {
  display: block;
  font-size: 1.2rem;
  color: rgba(83, 11, 2, 0.7);
  line-height: 1.6em;
}

@media screen and (max-width: 768px) {
  .sitemap-content {
    padding: 2rem 0;
  }
  .sitemap-section-title {
    font-size: 1.6rem;
  }
  .sitemap-tree li {
    padding: 0.8rem 1rem;
  }
  .sitemap-tree a {
    font-size: 1.4rem;
  }
}


/* ===========================================================
 * お問い合わせフォーム
 * =========================================================== */

.contact-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 0 2rem;
}

.contact-lead {
  font-size: 1.5rem;
  line-height: 2em;
  color: #3a2210;
  text-align: center;
  margin: 0 0 4rem;
}

#contact-form {
  margin: 0 0 2rem;
}

/* honeypot:人間には完全非表示 */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-group {
  margin: 0 0 2.4rem;
}

.form-group label {
  display: block;
  font-size: 1.4rem;
  color: #530B02;
  letter-spacing: 0.08em;
  margin: 0 0 0.6rem;
  font-weight: normal;
}

.form-group .required {
  color: #c93838;
  margin-left: 0.3em;
  font-size: 1.2rem;
}

.form-group .optional {
  color: rgba(83, 11, 2, 0.6);
  margin-left: 0.3em;
  font-size: 1.2rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 1em 1.2em;
  font-size: 16px; /* iOS 自動ズーム回避のため絶対値 16px */
  font-family: inherit;
  color: #3a2210;
  background-color: #fff8e8;
  border: 1.5px solid rgba(180, 130, 50, 0.4);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.form-group select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23530B02'%3e%3cpath d='M6 8L0 0h12z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1.2em center;
  background-size: 12px 8px;
  padding-right: 2.8em;
}

.form-group textarea {
  resize: vertical;
  min-height: 8em;
  line-height: 1.7em;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #FDC600;
  box-shadow: 0 0 0 3px rgba(253, 198, 0, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(58, 34, 16, 0.4);
}

/* チェックボックス */
.form-group--checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  background-color: #fff8e8;
  padding: 1.2rem 1.6rem;
  border-radius: 8px;
  border: 1px solid rgba(180, 130, 50, 0.3);
}

.form-group--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #FDC600;
}

.form-group--checkbox label {
  display: inline;
  margin: 0;
  font-size: 1.4rem;
  cursor: pointer;
  flex: 1;
}

.form-group--checkbox label a {
  color: #530B02;
  text-decoration: underline;
}

.form-group--checkbox .form-error {
  flex-basis: 100%;
}

/* 文字数カウンター */
.form-counter {
  font-size: 1.2rem;
  color: rgba(83, 11, 2, 0.6);
  text-align: right;
  margin: 0.4rem 0 0;
}

/* 送信ボタン */
.form-submit-wrap {
  text-align: center;
  margin: 3rem 0 2rem;
}

.form-submit-btn {
  margin: 0 auto;
}

/* 補足注記 */
.form-notice {
  font-size: 1.2rem;
  line-height: 2em;
  color: rgba(83, 11, 2, 0.7);
  text-align: center;
  margin: 2rem 0 0;
  padding: 1.5rem 1rem;
  border-top: 1px solid rgba(180, 130, 50, 0.2);
}

/* エラー時のフィールド外観(2-2-5 で定義済みの .is-invalid を継承) */
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: #c93838 !important;
  box-shadow: 0 0 0 3px rgba(201, 56, 56, 0.15) !important;
}

@media screen and (max-width: 768px) {
  .contact-content {
    padding: 2rem 0;
  }
  .form-group {
    margin-bottom: 2rem;
  }
  .form-notice {
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  .legal-content {
    padding: 2rem 0;
  }
  .legal-section h2 {
    font-size: 1.6rem;
  }
  .legal-contact {
    padding: 1.6rem;
  }
}


/* ===========================================================
 * COMPANY ページ(運営会社)
 * =========================================================== */

.company-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 4rem 0 2rem;
}

.company-lead {
  font-family: 'gokan', serif;
  font-size: 1.55rem;
  line-height: 2.2em;
  color: #3a2210;
  text-align: center;
  margin: 0 0 5rem;
  letter-spacing: 0.05em;
}

.company-section-title {
  font-family: 'gokan', serif;
  font-size: 2rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.15em;
  margin: 5rem 0 2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.3);
}

.company-section-title:first-of-type {
  margin-top: 0;
}

/* 会社概要テーブル */
.company-table {
  margin: 0 0 4rem;
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 0;
  border-top: 1px solid rgba(180, 130, 50, 0.2);
}

.company-table dt {
  padding: 1.4rem 1rem 1.4rem 0;
  font-size: 1.3rem;
  color: #530B02;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(180, 130, 50, 0.2);
  opacity: 0.75;
}

.company-table dd {
  padding: 1.4rem 0;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.9em;
  color: #3a2210;
  border-bottom: 1px solid rgba(180, 130, 50, 0.2);
}

.company-table dd a {
  color: #530B02;
  text-decoration: underline;
}

.company-table dd a:hover {
  opacity: 0.7;
}

/* 店舗一覧 */
.company-stores {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.company-stores li {
  list-style: none;
  background-color: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.25);
  border-radius: 8px;
  padding: 1.6rem 1.8rem;
  transition: border-color 0.25s, transform 0.25s;
}

.company-stores li:hover {
  border-color: rgba(180, 130, 50, 0.5);
  transform: translateY(-2px);
}

.company-stores li.company-store-featured {
  background-color: #FDC600;
  border-color: #FDC600;
}

.company-stores li.company-store-featured:hover {
  background-color: #fdc600;
}

.company-store-name {
  font-family: 'gokan', serif;
  font-size: 1.6rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.08em;
  margin: 0 0 0.6rem;
}

.company-store-address {
  font-size: 1.25rem;
  line-height: 1.8em;
  color: #3a2210;
  margin: 0 0 0.4rem;
}

.company-store-tel {
  font-size: 1.25rem;
  color: #3a2210;
  margin: 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  letter-spacing: 0.05em;
}

.company-store-tel a {
  color: #530B02;
  text-decoration: underline;
}

/* 沿革 */
.company-history {
  margin: 0 0 5rem;
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 0;
  border-top: 1px solid rgba(180, 130, 50, 0.2);
}

.company-history dt {
  padding: 1rem 1rem 1rem 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.25rem;
  color: rgba(83, 11, 2, 0.85);
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(180, 130, 50, 0.15);
  white-space: nowrap;
}

.company-history dd {
  padding: 1rem 0;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.8em;
  color: #3a2210;
  border-bottom: 1px solid rgba(180, 130, 50, 0.15);
}

@media screen and (max-width: 768px) {
  .company-content {
    padding: 2rem 0;
  }
  .company-lead {
    font-size: 1.4rem;
    margin-bottom: 3rem;
  }
  .company-section-title {
    font-size: 1.7rem;
    margin: 3.5rem 0 1.5rem;
  }
  .company-table {
    grid-template-columns: 1fr;
  }
  .company-table dt {
    padding: 1rem 0 0.3rem;
    border-bottom: none;
    font-size: 1.2rem;
  }
  .company-table dd {
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(180, 130, 50, 0.2);
  }
  .company-stores {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .company-stores li {
    padding: 1.2rem 1.4rem;
  }
  .company-store-name {
    font-size: 1.4rem;
  }
  .company-history {
    grid-template-columns: 7em 1fr;
  }
  .company-history dt {
    font-size: 1.15rem;
  }
  .company-history dd {
    font-size: 1.25rem;
  }
}


/* ===========================================================
 * ヘッダー透過度の調整(2026-04-29)
 * スクロール前:ほぼ透過 / スクロール後(.m_fixed):半透明+ぼかし
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* スクロール前のヘッダー:ほぼ透過 */
  header {
    background-color: rgba(253, 198, 0, 0.08) !important;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
  }

  /* スクロール後の固定ナビ:半透明+ぼかし(フロスト効果) */
  #global-nav.m_fixed {
    background-color: rgba(253, 198, 0, 0.78) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* モバイルヘッダーは常時固定のため、ある程度の不透明度を保持しつつ少し透過 */
@media screen and (max-width: 768px) {
  .header {
    background-color: rgba(253, 198, 0, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .menu {
    background: rgba(255, 247, 217, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}


/* ===========================================================
 * yellow-btn 右寄せモディファイア
 * 既存の中央寄せ(margin: 7rem auto 0)を右寄せにオーバーライド
 * =========================================================== */

.yellow-btn--right {
  display: flex;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* モバイル時は中央寄せに戻す(画面が狭いため) */
@media screen and (max-width: 768px) {
  .yellow-btn--right {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ===========================================================
 * Access セクション:Google マップを広げる
 * 既存:info 60% / map 36% → 変更:info 38% / map 60%
 * =========================================================== */

@media screen and (min-width: 768px) {
  .access-ul li:nth-child(1) {
    width: 38% !important;
  }
  .access-ul li:nth-child(2) {
    width: 60% !important;
  }
}


/* ===========================================================
 * オンラインショップへの誘導ボタン(.online-shop-btn)
 * 旧画像バナーを置き換える洗練されたボタン
 * =========================================================== */

.online-shop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 2.5rem;
  background-color: #fff8e8;
  color: #530B02;
  border: 1.5px solid rgba(180, 130, 50, 0.45);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.online-shop-btn:hover {
  background-color: #FDC600;
  border-color: #530B02;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(83, 11, 2, 0.12);
  opacity: 1; /* 既存 a:hover の opacity:.8 を打ち消し */
}

/* 上下の装飾ライン */
.online-shop-btn::before,
.online-shop-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background-color: rgba(180, 130, 50, 0.5);
  transition: background-color 0.4s ease, width 0.4s ease;
}

.online-shop-btn::before { top: 1.6rem; }
.online-shop-btn::after  { bottom: 1.6rem; }

.online-shop-btn:hover::before,
.online-shop-btn:hover::after {
  background-color: #530B02;
  width: 100px;
}

/* 上部ラベル "ONLINE SHOP" */
.online-shop-btn-label {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  letter-spacing: 0.45em;
  color: #8a5c10;
  text-transform: uppercase;
  text-indent: 0.45em; /* letter-spacing 補正 */
  transition: color 0.4s ease;
}

.online-shop-btn:hover .online-shop-btn-label {
  color: #530B02;
}

/* 中央のタイトル + 矢印 */
.online-shop-btn-text {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  justify-content: center;
}

.online-shop-btn-title {
  font-family: 'gokan', serif;
  font-size: 1.75rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
}

.online-shop-btn-arrow {
  display: inline-block;
  font-family: 'Georgia', serif;
  font-size: 1.6rem;
  transition: transform 0.4s ease;
}

.online-shop-btn:hover .online-shop-btn-arrow {
  transform: translate(5px, -5px);
}

/* モバイル */
@media screen and (max-width: 768px) {
  .online-shop-btn {
    padding: 3rem 1.5rem;
    gap: 1rem;
  }
  .online-shop-btn::before { top: 1.2rem; }
  .online-shop-btn::after  { bottom: 1.2rem; }
  .online-shop-btn-label {
    font-size: 1.1rem;
    letter-spacing: 0.35em;
  }
  .online-shop-btn-title {
    font-size: 1.45rem;
  }
  .online-shop-btn-text {
    flex-direction: column;
    gap: 0.6em;
  }
  .online-shop-btn-arrow {
    font-size: 1.4rem;
  }
}


/* ===========================================================
 * フッター リデザイン(2026-04-29)
 * 旧:3カラム横並び(1.2/0.8/1)でバランスが悪い
 * 新:上段ブランド中央寄せ + 下段 MENU(2列グリッド)+ ACCESS の2カラム
 * =========================================================== */

/* PC・タブレット */
@media screen and (min-width: 768px) {
  .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "nav   info";
    gap: 4rem 5rem !important;
    max-width: 1180px !important;
    padding: 6rem 4rem 4rem !important;
  }

  /* 上段:ブランドブロック(ロゴ + コンセプト + SNS)を中央寄せ */
  .footer-logo-col {
    grid-area: brand;
    flex: none !important;
    align-items: center !important;
    text-align: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(83, 11, 2, 0.2);
    margin-bottom: 0;
  }

  .footer-logo-col > a img {
    width: 230px !important;
    margin-bottom: 2.5rem !important;
  }

  .footer-concept {
    text-align: center !important;
    max-width: 36em;
    margin: 0 auto 2.8rem !important;
    font-size: 1.4rem !important;
  }

  .footer-sns {
    justify-content: center;
    gap: 1.8rem !important;
  }

  .footer-sns a {
    width: 44px !important;
    height: 44px !important;
  }

  /* 下段:MENU 列 */
  .footer-nav-col {
    grid-area: nav;
    flex: none !important;
  }

  /* MENU リストを 2 列グリッドに(縦長になりすぎを防止) */
  .footer-nav-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 2rem !important;
  }

  /* 下段:ACCESS 列 */
  .footer-info-col {
    grid-area: info;
    flex: none !important;
  }

  /* タイトル装飾を統一(下線とフォント) */
  .footer-nav-title {
    font-size: 1.3rem !important;
    margin-bottom: 2rem !important;
  }
}

/* モバイル:1列縦並び・中央寄せ */
@media screen and (max-width: 768px) {
  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 3.5rem !important;
    padding: 4rem 1.6rem 3rem !important;
  }

  .footer-logo-col,
  .footer-nav-col,
  .footer-info-col {
    width: 100% !important;
    flex: none !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-logo-col {
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(83, 11, 2, 0.2);
  }

  .footer-logo-col > a img {
    width: 200px !important;
  }

  .footer-concept {
    text-align: center !important;
  }

  .footer-sns {
    justify-content: center !important;
  }

  .footer-nav-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem 2rem !important;
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
  }

  .footer-info-dl {
    text-align: center;
  }

  .footer-info-dl dt {
    text-align: center;
  }

  .footer-info-dl dd {
    text-align: center;
  }
}

/* フッター下部の補助リンク・コピーライト */
.footer-bottom {
  padding: 2.5rem 4rem !important;
}

.footer-links {
  gap: 0 2.5rem !important;
}

.footer-links a {
  font-family: 'Georgia', 'Times New Roman', serif;
  letter-spacing: 0.1em;
  font-size: 1.25rem !important;
}

p.copy {
  font-family: 'Georgia', 'Times New Roman', serif;
  letter-spacing: 0.1em;
}


/* ===========================================================
 * Access セクション:Google マップの高さを左カラムに合わせる
 * 旧:padding-top: 75%(4:3比率)で縦に長くなる
 * 新:左カラムの高さに伸縮するように flex stretch + 100% 高さ
 * =========================================================== */

@media screen and (min-width: 768px) {
  .access-ul {
    align-items: stretch !important;
  }

  .access-ul li:nth-child(2) {
    display: flex;
  }

  /* .map は padding-top でアスペクト比固定していたが、
     ここではコンテナの高さに合わせて伸縮させる */
  .access-ul li:nth-child(2) .map {
    padding-top: 0 !important;
    height: auto !important;
    flex: 1;
    min-height: 100%;
  }

  .access-ul li:nth-child(2) .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}


/* ===========================================================
 * オンラインショップカード(高級感ある完全リニューアル版)
 * Art Deco 風コーナー装飾 + マガジン風タイポグラフィ + 洗練アニメ
 * =========================================================== */

.online-shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.6rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 5.5rem 4rem;
  background:
    linear-gradient(135deg, rgba(253, 198, 0, 0.05) 0%, rgba(255, 247, 217, 0.7) 100%),
    #fefdf8;
  border: 1px solid rgba(180, 130, 50, 0.3);
  text-decoration: none;
  color: #530B02;
  position: relative;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

/* Art Deco 風4コーナー装飾(L字型ライン) */
.online-shop-card::before,
.online-shop-card::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  transition: width 0.5s ease, height 0.5s ease, border-color 0.4s ease;
  pointer-events: none;
}

.online-shop-card::before {
  top: 1.8rem;
  left: 1.8rem;
  border-top: 1px solid rgba(180, 130, 50, 0.7);
  border-left: 1px solid rgba(180, 130, 50, 0.7);
}

.online-shop-card::after {
  bottom: 1.8rem;
  right: 1.8rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.7);
  border-right: 1px solid rgba(180, 130, 50, 0.7);
}

/* ホバー時:浮き上がり + コーナー拡張 + 影 */
.online-shop-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(83, 11, 2, 0.15);
  border-color: rgba(180, 130, 50, 0.55);
  opacity: 1 !important; /* 既存 a:hover の opacity:.8 を打ち消し */
}

.online-shop-card:hover::before,
.online-shop-card:hover::after {
  width: 56px;
  height: 56px;
  border-color: #530B02;
}

/* 上部ラベル "— ONLINE SHOP —" */
.online-shop-card-label {
  display: inline-flex;
  align-items: center;
  gap: 1.2em;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.2rem;
  letter-spacing: 0.42em;
  color: #8a5c10;
  text-indent: 0.42em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}

.online-shop-card-label-dash {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: #8a5c10;
  transition: background-color 0.4s ease, width 0.4s ease;
}

.online-shop-card:hover .online-shop-card-label,
.online-shop-card:hover .online-shop-card-label-dash {
  color: #530B02;
}

.online-shop-card:hover .online-shop-card-label-dash {
  background-color: #530B02;
  width: 44px;
}

/* タイトル(英 + 和の2行)*/
.online-shop-card-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0 0.8rem;
}

.online-shop-card-title-en {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 2.8rem;
  letter-spacing: 0.18em;
  color: #530B02;
  line-height: 1;
  text-indent: 0.18em;
}

.online-shop-card-title-ja {
  font-family: 'gokan', serif;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  color: rgba(83, 11, 2, 0.78);
  text-indent: 0.18em;
}

/* 説明文 */
.online-shop-card-desc {
  font-family: 'gokan', serif;
  font-size: 1.35rem;
  line-height: 2em;
  color: #3a2210;
  margin: 0 0 1.4rem;
  max-width: 32em;
  letter-spacing: 0.05em;
}

/* CTA:下線 + 矢印(ホバーで動く) */
.online-shop-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  letter-spacing: 0.28em;
  color: #530B02;
  text-transform: uppercase;
  padding: 0.4em 0.2em 0.7em;
  border-bottom: 1.5px solid #530B02;
  text-indent: 0.28em;
  transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.online-shop-card-cta-arrow {
  display: inline-flex;
  align-items: center;
  color: #530B02;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.online-shop-card:hover .online-shop-card-cta {
  gap: 1.8em;
}

.online-shop-card:hover .online-shop-card-cta-arrow {
  transform: translateX(8px);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .online-shop-card {
    padding: 4rem 2.2rem;
    gap: 1.3rem;
  }
  .online-shop-card::before,
  .online-shop-card::after {
    width: 26px;
    height: 26px;
  }
  .online-shop-card::before {
    top: 1.2rem;
    left: 1.2rem;
  }
  .online-shop-card::after {
    bottom: 1.2rem;
    right: 1.2rem;
  }
  .online-shop-card-label {
    font-size: 1.05rem;
    letter-spacing: 0.32em;
  }
  .online-shop-card-label-dash {
    width: 20px;
  }
  .online-shop-card-title-en {
    font-size: 2rem;
    letter-spacing: 0.14em;
  }
  .online-shop-card-title-ja {
    font-size: 1.25rem;
    letter-spacing: 0.14em;
  }
  .online-shop-card-desc {
    font-size: 1.2rem;
    line-height: 1.9em;
  }
  .online-shop-card-cta {
    font-size: 1.15rem;
    letter-spacing: 0.22em;
  }
  .online-shop-card-cta-arrow svg {
    width: 22px;
    height: 12px;
  }
}

/* 旧 .online-shop-btn は使わなくなったが、互換のため残す(削除候補) */


/* ===========================================================
 * Access セクション:Google マップを全幅(上の画像と同じ幅)に
 * レイアウトを「店舗情報 + マップ横並び」から
 *           「店舗情報を横並び → マップ全幅」に変更
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* access-ul を縦並びに変更 */
  .access-ul {
    flex-direction: column !important;
    gap: 3rem !important;
    align-items: stretch !important;
  }

  /* 各 li を全幅に */
  .access-ul li:nth-child(1),
  .access-ul li:nth-child(2) {
    width: 100% !important;
  }

  /* 店舗情報の中身(info + table)を横並びに */
  .access-ul li:nth-child(1) {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
  }

  .access-ul li:nth-child(1) .access-store-info {
    flex: 1;
  }

  .access-ul li:nth-child(1) .access-table {
    flex: 1.4;
  }

  /* Google マップを全幅 + 適切な高さに */
  .access-ul li:nth-child(2) {
    display: block;
  }

  .access-ul li:nth-child(2) .map {
    padding-top: 0 !important;
    height: 460px !important;
    width: 100% !important;
    flex: none;
    min-height: 0;
  }

  .access-ul li:nth-child(2) .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* モバイルは元のまま縦並び・マップは 350px の高さに */
@media screen and (max-width: 768px) {
  .access-ul li:nth-child(2) .map {
    padding-top: 0 !important;
    height: 350px !important;
  }
}


/* ===========================================================
 * フッター:3 段 → 1 段の横並びレイアウトに変更
 * [LOGO + concept + SNS] | [MENU] | [ACCESS] 3カラム
 * 直前の 2段レイアウトを上書き
 * =========================================================== */

@media screen and (min-width: 768px) {
  .footer-inner {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 4rem !important;
    max-width: 1200px !important;
    padding: 6rem 3rem 4rem !important;
  }

  /* ロゴカラム:左寄せに戻す(中央寄せを解除) */
  .footer-logo-col {
    flex: 1.2 !important;
    grid-area: auto !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  .footer-logo-col > a img {
    width: 200px !important;
    margin-bottom: 2rem !important;
  }

  .footer-concept {
    text-align: left !important;
    max-width: none;
    margin: 0 0 2.5rem !important;
    font-size: 1.3rem !important;
  }

  .footer-sns {
    justify-content: flex-start;
    gap: 1.2rem !important;
  }

  .footer-sns a {
    width: 40px !important;
    height: 40px !important;
  }

  /* MENU カラム:flex 比率を 1 に */
  .footer-nav-col {
    flex: 1 !important;
    grid-area: auto !important;
  }

  /* MENU リストは引き続き2列グリッド(項目が多いため) */
  .footer-nav-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem !important;
  }

  /* ACCESS カラム */
  .footer-info-col {
    flex: 1 !important;
    grid-area: auto !important;
  }

  .footer-nav-title {
    font-size: 1.2rem !important;
    margin-bottom: 1.8rem !important;
  }
}


/* ===========================================================
 * Access セクション再修正:
 * マップを「全幅」→「右の画像と同じ幅(50%)」に変更
 * [画像1(50%)] [画像2(50%)]
 * [店舗情報(50%)] [Googleマップ(50%)]
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* access-ul を再度横並びに */
  .access-ul {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0 !important;
    justify-content: space-between !important;
    align-items: stretch !important;
  }

  /* 左:店舗情報を画像と同じ 49% 幅に */
  .access-ul li:nth-child(1) {
    width: 49% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem;
  }

  .access-ul li:nth-child(1) .access-store-info {
    flex: none;
  }

  .access-ul li:nth-child(1) .access-table {
    flex: none;
    width: 100%;
  }

  /* 右:Google マップも 49% 幅(右の画像と同じ位置・幅) */
  .access-ul li:nth-child(2) {
    width: 49% !important;
    display: flex !important;
  }

  /* マップ高さも画像と同じくらいに(画像が ~340px なので合わせる) */
  .access-ul li:nth-child(2) .map {
    padding-top: 0 !important;
    height: auto !important;
    width: 100% !important;
    flex: 1;
    min-height: 380px;
  }

  .access-ul li:nth-child(2) .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* モバイル */
@media screen and (max-width: 768px) {
  .access-ul {
    flex-direction: column !important;
  }
  .access-ul li:nth-child(1),
  .access-ul li:nth-child(2) {
    width: 100% !important;
  }
  .access-ul li:nth-child(2) .map {
    min-height: 320px;
  }
}


/* ===========================================================
 * フッター左カラム:SNS アイコンを中央配置に
 * ロゴ・コンセプト文の下で、左寄せではなく中心に揃える
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* SNS アイコンをカラム内で中央寄せに */
  .footer-logo-col .footer-sns {
    justify-content: center !important;
    width: 100%;
    margin: 0 auto;
    gap: 1.5rem !important;
  }
}


/* ===========================================================
 * フッター左カラム:全要素を中央寄せに統一
 * 直前の修正:SNSだけ中央寄せでズレて見える
 * 修正:ロゴ・コンセプト文・SNS すべて中央寄せ
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* 左カラム全体を中央寄せ */
  .footer-logo-col {
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;  /* 1.2 から 1 に縮小しバランス調整 */
  }

  /* ロゴ画像も中央配置 */
  .footer-logo-col > a {
    margin: 0 auto !important;
  }

  /* コンセプト文を中央寄せ + 横幅制限 */
  .footer-concept {
    text-align: center !important;
    max-width: 16em;
    margin: 0 auto 2.5rem !important;
  }

  /* SNS アイコンも中央寄せ(再確認・確実に効かせる) */
  .footer-logo-col .footer-sns {
    justify-content: center !important;
    width: auto;
    margin: 0 auto !important;
  }
}


/* ===========================================================
 * ヘッダーを全ページで常時固定(position: fixed)に
 * 旧:PC/タブレットは relative + JS で scrollしたら m_fixed
 * 新:最初から position: fixed で固定表示
 * モバイルは既に常時固定(変更なし)
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* ヘッダー全体を常時固定に */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 100;
  }

  /* サブページ:固定ヘッダー分の高さを main にパディングで補正 */
  body.subpage main {
    padding-top: 75px;
  }

  /* TOPページ:ヒーロー(.top_main は 100vh)の上にヘッダーが重なる挙動を維持
     ※ top_main は margin-top で押し下げない */
  body:not(.subpage) .top_main {
    margin-top: 0 !important;
  }
}

/* ===========================================================
 * TOPページ:JS(index.html)が body に付与する padding-top を打ち消し、
 * ヒーロー画像を最上部までフルブリード表示(半透明ヘッダーが画像に重なる)
 * - PC  :JSが付与する 75px(#global-nav の高さ)を打ち消し
 * - スマホ:JSが非表示の縦メニュー高さを誤測して付与する約242pxを打ち消し
 * ※ !important でインラインの padding-top を上書き。全幅に適用(TOPのみ・subpageは対象外)
 * =========================================================== */
body:not(.subpage) {
  padding-top: 0 !important;
}


/* ===========================================================
 * TOPページ サロンセクション:商品画像枠のサイズを統一
 * 画像の縦横比が違っても枠が同じ大きさになるよう、6:4 比率で固定
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* TOPページのみ(.subpage が付いていないページ)*/
  body:not(.subpage) ul.list-waku li .list-waku-img {
    aspect-ratio: 6 / 4;
    overflow: hidden;
  }

  body:not(.subpage) ul.list-waku li .list-waku-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
  }
}

/* モバイルでも統一(同じ枠サイズ) */
@media screen and (max-width: 768px) {
  body:not(.subpage) ul.list-waku li .list-waku-img {
    aspect-ratio: 6 / 4;
    overflow: hidden;
  }
  body:not(.subpage) ul.list-waku li .list-waku-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
  }
}


/* ===========================================================
 * 画像枠の縦横比を少し縦長に調整(6:4 → 5:4)
 * 直前の修正で枠を統一したが、もう少し縦が必要
 * =========================================================== */

@media screen and (min-width: 768px) {
  body:not(.subpage) ul.list-waku li .list-waku-img {
    aspect-ratio: 5 / 4 !important;
  }
}

@media screen and (max-width: 768px) {
  body:not(.subpage) ul.list-waku li .list-waku-img {
    aspect-ratio: 5 / 4 !important;
  }
}


/* ===========================================================
 * /store/ ページ:ヒーロー + 店舗情報レイアウト
 * =========================================================== */

/* ヒーローエリア(店舗写真を全幅に表示) */
.store-hero {
  width: 100%;
  height: 60vh;
  min-height: 380px;
  max-height: 680px;
  overflow: hidden;
  position: relative;
}

.store-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 768px) {
  .store-hero {
    height: 40vh;
    min-height: 280px;
  }
}

/* 店舗情報コンテンツ */
.store-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 0;
}

.store-lead {
  font-family: 'gokan', serif;
  font-size: 1.55rem;
  line-height: 2.4em;
  color: #3a2210;
  text-align: center;
  margin: 0 0 5rem;
  letter-spacing: 0.05em;
}

.store-info {
  margin: 0 0 5rem;
}

.store-info-name {
  text-align: center;
  margin: 0 0 3rem;
}

.store-info-name-en {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.4rem;
  letter-spacing: 0.2em;
  color: #530B02;
  margin: 0 0 0.5rem;
  text-indent: 0.2em;
}

.store-info-name-ja {
  font-family: 'gokan', serif;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  color: rgba(83, 11, 2, 0.7);
  margin: 0;
}

.store-table {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-collapse: collapse;
  border-top: 1px solid rgba(180, 130, 50, 0.3);
}

.store-table th,
.store-table td {
  padding: 1.6rem 1.2rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(180, 130, 50, 0.3);
}

.store-table th {
  width: 14em;
  font-family: 'gokan', serif;
  font-size: 1.4rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.1em;
  text-align: left;
}

.store-table-sub {
  display: inline-block;
  font-size: 1.1rem;
  color: rgba(83, 11, 2, 0.6);
  margin-top: 0.3em;
  letter-spacing: 0.15em;
}

.store-table td {
  font-size: 1.4rem;
  line-height: 1.8em;
  color: #3a2210;
}

/* Google Map */
.store-map {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border: 1px solid rgba(180, 130, 50, 0.3);
}

.store-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 768px) {
  .store-lead {
    font-size: 1.35rem;
    margin-bottom: 3.5rem;
  }
  .store-info-name-en {
    font-size: 1.9rem;
  }
  .store-table {
    border-top: none;
  }
  .store-table tr {
    display: block;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(180, 130, 50, 0.3);
  }
  .store-table th,
  .store-table td {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: none;
  }
  .store-table th {
    margin-bottom: 0.4em;
    font-size: 1.25rem;
  }
  .store-table td {
    font-size: 1.3rem;
  }
  .store-table-sub {
    font-size: 1.05rem;
  }
  .store-map {
    height: 320px;
  }
}


/* ===========================================================
 * /store/ ヒーロー画像:上部が映るように object-position を調整
 * =========================================================== */

.store-hero img {
  object-position: center top !important;
}


/* タイトルセクション(ヒーロー上)の余白調整 */
.store-title-section {
  padding-bottom: 3rem !important;
}


/* ===========================================================
 * /store/ アクセス情報セクション
 * =========================================================== */

.store-access {
  margin: 6rem 0 2rem;
  padding: 5rem 0 0;
  border-top: 1px solid rgba(180, 130, 50, 0.3);
}

/* セクション見出し */
.store-access-heading {
  text-align: center;
  margin: 0 0 4rem;
}

.store-access-heading-en {
  display: block;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  letter-spacing: 0.45em;
  color: #8a5c10;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-indent: 0.45em;
}

.store-access-heading-ja {
  font-family: 'gokan', serif;
  font-size: 2.2rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.3em;
  margin: 0;
  text-indent: 0.3em;
}

.store-access-heading-ja::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background-color: rgba(180, 130, 50, 0.6);
  margin: 1.5rem auto 0;
}

.store-access-intro {
  font-family: 'gokan', serif;
  font-size: 1.45rem;
  line-height: 2.2em;
  color: #3a2210;
  text-align: center;
  margin: 0 0 5rem;
  letter-spacing: 0.05em;
}

/* 各セクション(電車・空港・車 等)*/
.store-access-block {
  margin: 0 0 4rem;
  padding: 0 0 3.5rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.2);
}

.store-access-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.store-access-block-title {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  margin: 0 0 2rem;
  font-weight: normal;
}

.store-access-block-title-num {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.4rem;
  color: rgba(180, 130, 50, 0.6);
  letter-spacing: 0.1em;
}

.store-access-block-title-text {
  font-family: 'gokan', serif;
  font-size: 1.7rem;
  color: #530B02;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(180, 130, 50, 0.3);
  padding-bottom: 0.5em;
  flex: 1;
}

.store-access-block-lead {
  font-size: 1.4rem;
  line-height: 1.9em;
  color: #3a2210;
  margin: 0 0 1.5rem;
}

.store-access-block-lead strong {
  font-weight: 600;
  color: #530B02;
  background: linear-gradient(transparent 60%, rgba(253, 198, 0, 0.4) 60%);
}

/* テーブル(電車一覧) */
.store-access-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background-color: #fff8e8;
}

.store-access-table thead th {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #530B02;
  padding: 1.2rem 1.4rem;
  text-align: left;
  background-color: #FDC600;
  border-bottom: 1px solid rgba(83, 11, 2, 0.2);
  text-transform: uppercase;
}

.store-access-table tbody td {
  font-size: 1.35rem;
  line-height: 1.7em;
  color: #3a2210;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.2);
}

.store-access-table tbody td:first-child {
  font-family: 'gokan', serif;
  color: #530B02;
  letter-spacing: 0.05em;
}

.store-access-table tbody td:last-child {
  text-align: right;
  white-space: nowrap;
  font-family: 'Georgia', 'Times New Roman', serif;
}

.store-access-table tbody td strong {
  font-weight: 600;
  color: #530B02;
  font-family: 'gokan', serif;
}

.store-access-table tbody tr:last-child td {
  border-bottom: none;
}

/* ルートのステップ */
.store-access-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 1.5rem;
}

.store-access-steps li {
  counter-increment: step;
  position: relative;
  padding: 0.6em 0 0.6em 3.5em;
  font-size: 1.4rem;
  line-height: 1.7em;
  color: #3a2210;
}

.store-access-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.55em;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  color: #FDC600;
  background-color: #530B02;
  width: 2.5em;
  text-align: center;
  padding: 0.15em 0;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

/* 通常の本文 */
.store-access-text {
  font-size: 1.4rem;
  line-height: 2em;
  color: #3a2210;
  margin: 0 0 1.2rem;
}

/* 所要時間目安 */
.store-access-time {
  font-size: 1.3rem;
  line-height: 1.7em;
  color: #530B02;
  margin: 0 0 1.5rem;
  padding: 0.6em 1em;
  background-color: rgba(253, 198, 0, 0.15);
  border-left: 3px solid #FDC600;
}

.store-access-time strong {
  font-weight: 600;
  color: #530B02;
}

/* 注記 */
.store-access-note {
  font-size: 1.25rem;
  line-height: 1.7em;
  color: rgba(83, 11, 2, 0.7);
  margin: 1rem 0 0;
  padding: 0.6em 0 0;
  border-top: 1px dashed rgba(180, 130, 50, 0.3);
}

/* サブセクション(JR / バス 等) */
.store-access-method {
  margin: 0 0 2rem;
  padding: 1.6rem 1.8rem;
  background-color: rgba(255, 248, 232, 0.6);
  border-radius: 4px;
}

.store-access-method:last-child {
  margin-bottom: 0;
}

.store-access-method-title {
  font-family: 'gokan', serif;
  font-size: 1.45rem;
  font-weight: normal;
  color: #530B02;
  letter-spacing: 0.08em;
  margin: 0 0 0.8rem;
  padding: 0 0 0.5em;
  border-bottom: 1px dashed rgba(180, 130, 50, 0.4);
}

/* 住所ボックス(車でお越しの方) */
.store-access-address-box {
  font-family: 'gokan', serif;
  font-size: 1.5rem;
  line-height: 2em;
  color: #530B02;
  text-align: center;
  margin: 1.5rem auto;
  padding: 2rem 1.5rem;
  background-color: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.4);
  border-radius: 4px;
  max-width: 28em;
  letter-spacing: 0.05em;
}

/* モバイル */
@media screen and (max-width: 768px) {
  .store-access {
    margin-top: 4rem;
    padding-top: 3rem;
  }
  .store-access-heading-ja {
    font-size: 1.85rem;
  }
  .store-access-intro {
    font-size: 1.3rem;
  }
  .store-access-block-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4em;
  }
  .store-access-block-title-num {
    font-size: 1.7rem;
  }
  .store-access-block-title-text {
    font-size: 1.4rem;
    width: 100%;
  }
  /* テーブルをモバイルでも見やすく */
  .store-access-table thead {
    display: none;
  }
  .store-access-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(180, 130, 50, 0.3);
  }
  .store-access-table tbody td {
    display: block;
    padding: 0.3rem 0;
    border: none;
  }
  .store-access-table tbody td:first-child {
    font-weight: bold;
    font-size: 1.25rem;
  }
  .store-access-table tbody td:last-child {
    text-align: left;
    font-size: 1.25rem;
    color: rgba(83, 11, 2, 0.75);
  }
  .store-access-steps li {
    padding-left: 3em;
    font-size: 1.25rem;
  }
  .store-access-steps li::before {
    width: 2.2em;
    font-size: 1.1rem;
  }
  .store-access-text {
    font-size: 1.25rem;
  }
  .store-access-time {
    font-size: 1.2rem;
  }
}


/* ===========================================================
 * Store ページのインラインリンク(駐車場等)
 * =========================================================== */

.store-access-link {
  color: #530B02;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid #FDC600;
  padding: 0 0.15em;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.store-access-link:hover {
  background-color: rgba(253, 198, 0, 0.25);
  border-bottom-color: #530B02;
  opacity: 1 !important;
}

.store-access-link-arrow {
  display: inline-block;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.85em;
  transition: transform 0.3s ease;
}

.store-access-link:hover .store-access-link-arrow {
  transform: translate(2px, -2px);
}


/* ===========================================================
 * /store/ 2カラムレイアウト:左ヒーロー画像 / 右店舗情報
 * 旧 .store-hero(全幅セクション)を廃止し、コンテンツ内に統合
 * =========================================================== */

.store-main {
  display: flex;
  gap: 3rem;
  align-items: stretch;
  margin: 0 0 4rem;
}

.store-main-image {
  flex: 1;
  background-color: #fff8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(180, 130, 50, 0.25);
}

.store-main-image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;  /* 全体が映るように */
  display: block;
}

.store-main-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 2カラム内のテーブル余白調整 */
.store-main-info .store-info-name {
  text-align: left;
  margin-bottom: 2rem;
}

.store-main-info .store-table {
  margin: 0;
  max-width: none;
}

/* モバイル:縦並びに */
@media screen and (max-width: 768px) {
  .store-main {
    flex-direction: column;
    gap: 2rem;
  }

  .store-main-image img {
    max-height: 380px;
  }

  .store-main-info .store-info-name {
    text-align: center;
  }
}


/* ===========================================================
 * /store/ 2カラム:画像を大きく & 上下余白なし
 * 直前:object-fit: contain で max-height 制限 → 上下に余白
 * 修正:コンテナを画像の自然な高さに合わせる + flex 比率を調整
 * =========================================================== */

@media screen and (min-width: 768px) {
  /* .inner(max-width 1270px / 幅85%)の外に広げて左右をフル活用 */
  .store-main {
    width: 90vw !important;
    max-width: 1400px !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    align-items: flex-start !important;  /* 上揃え:店舗情報を写真の上に合わせる */
    gap: 3rem !important;
  }

  /* 画像カラム(flex 1.2:1)*/
  .store-main-image {
    flex: 1.2 !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden;
  }

  /* 画像自体は自然な高さで・max-height を解除 */
  .store-main-image img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    display: block;
  }

  /* 店舗情報を上揃え + 上部の余白をリセット */
  .store-main-info {
    flex: 1 !important;
    justify-content: flex-start !important;
  }

  .store-main-info .store-info-name {
    margin-top: 0 !important;
  }
}

/* タブレット〜中型画面では少し余裕を持たせる */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .store-main {
    width: 92vw !important;
    gap: 2.5rem !important;
  }
  .store-main-image {
    flex: 1.4 !important;
  }
}

/* モバイルも余白解消 */
@media screen and (max-width: 768px) {
  .store-main-image {
    background: transparent !important;
    border: none !important;
  }
  .store-main-image img {
    max-height: none !important;
  }
}


/* ===========================================================
 * /store/ Google マップボタン(店舗情報の下に配置)
 * 既存のオンラインショップボタンと同系統のトーンで統一
 * =========================================================== */
.store-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 1.8rem;
  padding: 0.9em 1.6em;
  font-family: var(--font-en, "Cormorant Garamond", serif);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: #4a3520;
  background: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.45);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.store-map-btn:hover,
.store-map-btn:focus-visible {
  background: #b48232;
  color: #fff;
  border-color: #b48232;
  transform: translateY(-1px);
}

.store-map-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.store-map-btn-text {
  font-weight: 500;
}

.store-map-btn-arrow {
  display: inline-block;
  margin-left: 0.2em;
  transition: transform 0.25s ease;
}

.store-map-btn:hover .store-map-btn-arrow,
.store-map-btn:focus-visible .store-map-btn-arrow {
  transform: translate(2px, -2px);
}

/* モバイル:横幅いっぱい */
@media screen and (max-width: 768px) {
  .store-map-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.4rem;
  }
}

/* ===========================================================
 * /store/ 最下部の Google Map 余白調整
 * アクセス情報の後に独立して配置されるため、上に余白を追加
 * =========================================================== */
.store-content > .store-map {
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
  .store-content > .store-map {
    margin-top: 2.5rem;
  }
}


/* ===========================================================
 * /news/ ニュース一覧
 * =========================================================== */
.news-list {
  list-style: none;
  margin: 3rem auto 6rem;
  padding: 0;
  max-width: 880px;
  border-top: 1px solid rgba(180, 130, 50, 0.25);
}

.news-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8em 1.4em;
  padding: 1.6rem 0.4rem;
  border-bottom: 1px solid rgba(180, 130, 50, 0.25);
}

.news-list-date {
  font-family: var(--font-en, "Cormorant Garamond", serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: #6a4a20;
  flex: 0 0 auto;
}

.news-list-cat {
  display: inline-block;
  padding: 0.25em 0.9em;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #4a3520;
  background: #fff8e8;
  border: 1px solid rgba(180, 130, 50, 0.4);
  border-radius: 999px;
  flex: 0 0 auto;
}

.news-list-title {
  flex: 1 1 60%;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #3a2210;
}

@media screen and (max-width: 768px) {
  .news-list-item {
    padding: 1.2rem 0.4rem;
  }
  .news-list-title {
    flex: 1 1 100%;
  }
}


/* ===========================================================
 * /salon-menu/ ミックスジュース画像:縦を1.5倍に
 * 既定の枠は aspect-ratio: 6/4(1.5) → 6/6(1.0)で縦が1.5倍
 * =========================================================== */
.list-waku-img--tall img {
  aspect-ratio: 6 / 6 !important;
  object-fit: cover;
  height: auto;
}
.list-waku-img--tall::after {
  aspect-ratio: 6 / 6 !important;
}


/* ===========================================================
 * /store/ アクセスページへの誘導CTA
 * =========================================================== */
.store-access-cta {
  margin: 4rem 0 0;
  text-align: center;
}
.store-access-cta-btn {
  padding: 1em 2.2em;
  font-size: 1rem;
}


/* ===========================================================
 * 多言語切替ボタン(Google Translate)
 * =========================================================== */

/* Google Translate のデフォルトUIを隠す */
#google_translate_element { display: none !important; }
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
.goog-logo-link,
.goog-te-gadget span { display: none !important; }
body { top: 0 !important; position: static !important; }
.skiptranslate iframe { display: none !important; }

/* PC ヘッダー内のボタン群 */
.nav-lang-li {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-left: 0.5em;
}
.nav-lang-btn {
  font-family: var(--font-en, "Cormorant Garamond", "Times New Roman", serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.35em 0.55em;
  min-width: 2.4em;
  background: transparent;
  border: 1px solid rgba(180, 130, 50, 0.45);
  border-radius: 999px;
  color: #4a3520;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.nav-lang-btn:hover,
.nav-lang-btn:focus-visible {
  background: #b48232;
  color: #fff;
  border-color: #b48232;
}
.nav-lang-btn.is-active {
  background: #4a3520;
  color: #fff;
  border-color: #4a3520;
}

/* スマホメニュー内のボタン群 */
.menu .nav-lang-li {
  justify-content: center;
  margin: 1.4rem auto 0.4rem;
  gap: 0.4em;
  flex-wrap: wrap;
}
.menu .nav-lang-btn {
  font-size: 0.85rem;
  padding: 0.55em 0.9em;
  min-width: 3em;
}

/* リスト記号を消す(li にデフォルトのマーカーが付くため) */
.nav-lang-li {
  list-style: none;
}


/* ===========================================================
 * SP 最適化(2026.05.25 追加)
 * 多言語ボタン追加・ストア改修などに伴うレイアウトずれの修正
 * =========================================================== */

@media screen and (max-width: 768px) {

  /* --- 1. 多言語ボタン:PCヘッダーのものはSPでは非表示 ----- */
  /*    PC nav(.global-list)内のボタンはSPで隠す
        ハンバーガーメニュー(.menu)内のボタンのみ表示 */
  .global-list .nav-lang-li { display: none !important; }

  /* ハンバーガーメニュー内ボタンは折り返し対応 */
  .menu .nav-lang-li {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 1.4rem auto 0.6rem;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  .menu .nav-lang-btn {
    font-size: 0.85rem;
    padding: 0.55em 0.95em;
    min-width: 3em;
  }


  /* --- 2. ハンバーガーメニュー:スクロール可能に --------- */
  /*    height:100vh のままだと言語ボタンが画面外に出てしまう */
  .menu {
    height: 100vh !important;
    max-height: 100vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4rem !important;
    box-sizing: border-box;
  }


  /* --- 3. NEWS バー:スマホでも横一列(1行)で表示 ---------
     以前は縦積み(flex-direction:column)にしていたが、横一列表示へ変更。
     横一列・ラベルJA/カテゴリ非表示・タイトルの省略表示(…)は
     上部の @media(max-width:768px) ブロックで定義済みのため、ここでは上書きしない。 */


  /* --- 4. ストアの2カラムヒーローを通常幅に戻す --------- */
  /*    min-width:768px の transform/95vw を確実に解除 */
  .store-main {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2rem !important;
  }
  .store-main-image {
    flex: 0 0 auto !important;
    width: 100%;
  }
  .store-main-image img {
    max-height: none !important;
  }
  .store-main-info {
    flex: 0 0 auto !important;
    width: 100%;
  }


  /* --- 5. アクセス情報のテーブル:nowrap 解除 ------------ */
  .store-access-table tbody td,
  .store-access-table tbody td:last-child {
    white-space: normal !important;
    word-break: break-word;
  }


  /* --- 6. 流れる文字:はみ出し防止 ---------------------- */
  .scroll-infinity__item img {
    max-width: 100%;
    height: auto;
  }


  /* --- 7. フッター:極小画面の余白調整 ----------------- */
  .footer-logo-col img {
    max-width: 180px;
    height: auto;
  }


  /* --- 8. ストアCTA:中央寄せ ---------------------------- */
  .store-access-cta {
    margin: 3rem 0 0;
  }
  .store-access-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 0.95em 1.5em;
  }


  /* --- 9. iframe(Googleマップ)の幅収まり ------------------ */
  .store-map iframe,
  .store-content > .store-map iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 360px;
  }


  /* --- 10. NEWS list:カテゴリと日付を縦詰めしすぎない ---- */
  .news-list-item {
    align-items: flex-start;
  }


  /* --- 11. ページ全体:横スクロール防止 ----------------- */
  html, body {
    overflow-x: hidden;
  }
}


/* 極小画面(〜480px)の追加最適化 */
@media screen and (max-width: 480px) {
  .footer-logo-col img {
    max-width: 150px;
  }
  .footer-inner {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  .menu .nav-lang-btn {
    font-size: 0.78rem;
    padding: 0.5em 0.8em;
    min-width: 2.7em;
  }
  /* ストアテーブルの第1列幅を制限しすぎない */
  .store-table th {
    white-space: nowrap;
    padding-right: 0.6em;
  }
  /* Google Mapボタンを縦並び化はせず、テキスト圧縮 */
  .store-map-btn {
    font-size: 0.88rem;
    padding: 0.85em 1.2em;
  }
  .store-map iframe {
    height: 300px;
  }
}


/* ===========================================================
 * /gift/ サブカテゴリー見出し(ロールケーキ/プリン/パイ)
 * =========================================================== */
.gift-subcat-title {
  position: relative;
  display: inline-block;
  margin: 3rem auto 1.6rem;
  padding: 0 1.4em;
  font-size: 1.55rem;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.08em;
  color: #4a3520;
}

.gift-subcat-title::before,
.gift-subcat-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.2em;
  height: 1px;
  background: rgba(180, 130, 50, 0.55);
}
.gift-subcat-title::before { right: 100%; }
.gift-subcat-title::after  { left: 100%; }

/* 親(<ul>の前)を中央寄せにするためのラッパー */
.products-menu-box-01 .gift-subcat-title {
  display: block;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .gift-subcat-title {
    font-size: 1.25rem;
    margin: 2.4rem auto 1.2rem;
  }
}


/* ===========================================================
 * Coming Soon ブロック(準備中ページ用)
 * =========================================================== */
.coming-soon {
  margin: 4rem auto 5rem;
  padding: 4rem 1.5rem;
  text-align: center;
}

.coming-soon-inner {
  position: relative;
  display: inline-block;
  max-width: 720px;
  padding: 3.5rem 2rem;
  border: 1px solid rgba(180, 130, 50, 0.35);
  border-radius: 6px;
  background: linear-gradient(180deg, #fffdf6 0%, #fff8e8 100%);
  box-shadow: 0 8px 30px rgba(120, 80, 30, 0.06);
}

.coming-soon-deco {
  display: block;
  font-size: 1.2rem;
  color: #b48232;
  margin-bottom: 1.4rem;
  opacity: 0.85;
  letter-spacing: 0.1em;
}
.coming-soon-deco--bottom {
  margin: 1.4rem 0 0;
}

.coming-soon-en {
  font-family: var(--font-en, "Cormorant Garamond", "Times New Roman", serif);
  font-size: 2.4rem;
  letter-spacing: 0.28em;
  color: #4a3520;
  margin: 0 0 0.4em;
  line-height: 1.1;
}

.coming-soon-ja {
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  color: #8a6a3a;
  margin: 0 0 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px dashed rgba(180, 130, 50, 0.35);
  display: inline-block;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

.coming-soon-lead {
  font-size: 0.95rem;
  line-height: 1.95;
  color: #5a4630;
  margin: 0;
  letter-spacing: 0.06em;
}

@media screen and (max-width: 768px) {
  .coming-soon {
    margin: 2.5rem auto 3.5rem;
    padding: 2.5rem 0.5rem;
  }
  .coming-soon-inner {
    padding: 2.8rem 1.3rem;
  }
  .coming-soon-en {
    font-size: 1.8rem;
    letter-spacing: 0.22em;
  }
  .coming-soon-ja {
    font-size: 0.85rem;
  }
  .coming-soon-lead {
    font-size: 0.88rem;
    line-height: 1.85;
  }
}


/* ===========================================================
 * /access/ タイトル下の空白を詰める
 *
 * 問題:section.page-content はデフォルトで padding: 8rem 0 11rem
 *      タイトル下11rem + 本文上8rem = 約19rem(304px)の余白が発生
 * 解決:タイトル直後の本文セクションの上下余白を縮小
 * =========================================================== */

/* タイトル(h2-box)を含む page-content の下余白を縮小 */
section.page-content:has(.h2-box):has(+ section.page-content) {
  padding-bottom: 3rem;
}

/* store-access を含むセクションの上余白を縮小 */
section.page-content:has(.store-access) {
  padding-top: 2rem;
}

/* 重複見出しを削除した分の余白調整 */
.store-access--no-heading {
  margin-top: 0;
}
.store-access--no-heading .store-access-intro {
  margin-top: 0;
  margin-bottom: 3rem;
}

@media screen and (max-width: 768px) {
  section.page-content:has(.h2-box):has(+ section.page-content) {
    padding-bottom: 1.5rem;
  }
  section.page-content:has(.store-access) {
    padding-top: 1rem;
  }
  .store-access--no-heading .store-access-intro {
    margin-bottom: 2rem;
  }
  /* オンラインショップ直前の最終コンテンツセクションの下余白を縮小
     ストア/ギフト等いずれのページでも、
     page-content →(流れる文字)→ gokan-link の並びを対象に詰める。
     セクション下余白(8rem)と gokan-link の margin(10rem)が過大なため。 */
  section.page-content:has(+ section.flowing-letters + section.gokan-link),
  section.page-content:has(+ section.gokan-link) {
    padding-bottom: 3rem;
  }
  /* 最終ブロックの下マージン(商品グループ .products-menu-box-01 の 10rem 等)を
     除去し、セクション下余白(3rem)だけで間隔を取る */
  section.page-content:has(+ section.flowing-letters + section.gokan-link) .inner > :last-child,
  section.page-content:has(+ section.gokan-link) .inner > :last-child {
    margin-bottom: 0;
  }
  section.gokan-link {
    margin: 4rem 0;
  }
}


/* ===========================================================
 * 苺とピスタチオのパフェ:余白なしで枠を埋めつつ位置を調整
 * - object-fit: cover で余白なし
 * - object-position 50% 35% で中央やや上を表示
 *   → パフェの上の方が映りつつ、下部の切れも最小限に
 * =========================================================== */
ul.list-waku li .list-waku-img img[src*="ichigo-pistacchio-parfait"] {
  object-fit: cover !important;
  object-position: 50% 35% !important;
  padding: 2% !important;
  background: transparent !important;
}


/* ===========================================================
 * /gift/ 生菓子の3カラム横並び
 * - ロールケーキ / プリン / パイ を1行に並べる
 * =========================================================== */
.gift-subcat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  margin: 2rem 0 4rem;
  align-items: start;
}

.gift-subcat-col {
  display: flex;
  flex-direction: column;
}

.gift-subcat-col .gift-subcat-title {
  margin-top: 0;
  margin-bottom: 1.2rem;
}

/* 3カラム内の li は1カラム=幅100%に */
.gift-subcat-grid ul.list-waku.gift-subcat-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gift-subcat-grid ul.list-waku.gift-subcat-list > li {
  width: 100% !important;
  margin: 0 !important;
}

/* タブレット:2カラム */
@media screen and (max-width: 1024px) {
  .gift-subcat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }
}

/* スマホ:1カラムに戻す */
@media screen and (max-width: 768px) {
  .gift-subcat-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem 0;
    margin: 1.5rem 0 3rem;
  }
}


/* ===========================================================
 * /gift/ カテゴリー見出し:英語 + 日本語の2段表記
 * (Baked Sweets -焼き菓子- / Fresh Sweets -生菓子-)
 * =========================================================== */
.menu-h2 .menu-h2-en {
  display: block;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.85em;
  letter-spacing: 0.12em;
}
.menu-h2 .menu-h2-ja {
  display: block;
  font-size: 0.6em;
  letter-spacing: 0.18em;
  margin-top: 0.4em;
  opacity: 0.92;
}


/* ===========================================================
 * /gift/ 焼き菓子(案B):種類ミニリスト + 折りたたみ詳細
 * 3カラムグリッドは維持し、種類名は 2x2 のタグ風リストで一覧。
 * 長い個別説明は <details> アコーディオンに格納して高さを均す。
 * =========================================================== */

/* カードを縦フレックスにして価格を下端に揃える(高さの凸凹を緩和)*/
ul.list-waku-02 > li .salon-p-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
ul.list-waku-02 > li .salon-p-box .price-box {
  margin-top: auto;
}

/* 種類名のミニリスト(2列)
 * 注意:body の overflow-wrap:anywhere が grid 列の min-content を
 *      1文字に潰し、種類名が縦1文字ずつ折り返される問題を防ぐため、
 *      ここでは overflow-wrap / word-break を normal に戻す。 */
.gift-variety-tags {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
  margin: 0 0 1.4rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(180, 130, 50, 0.3);
}
.gift-variety-tags > li {
  position: relative;
  padding-left: 1.4em;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: #8a5c10;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: normal;
  word-break: keep-all;
}
.gift-variety-tags > li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #c9a24a;
  font-size: 0.85em;
}

/* 折りたたみ(詳しく見る) */
.gift-acc {
  margin: 0 0 1.6rem;
  border: 1px solid rgba(180, 130, 50, 0.3);
  border-radius: 4px;
  background: #fffdf6;
}
.gift-acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9em 1.2em;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: #530B02;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  transition: background 0.2s ease;
}
.gift-acc > summary::-webkit-details-marker { display: none; }
.gift-acc > summary::after {
  content: "＋";
  font-size: 1.2em;
  color: #b48232;
  transition: transform 0.2s ease;
}
.gift-acc[open] > summary::after {
  content: "－";
}
.gift-acc > summary:hover,
.gift-acc > summary:focus-visible {
  background: #fff6e2;
}

.gift-acc-list {
  margin: 0;
  padding: 0.4em 1.2em 1.2em;
  border-top: 1px solid rgba(180, 130, 50, 0.2);
}
.gift-acc-list dt {
  position: relative;
  margin: 1em 0 0.3em;
  padding-left: 1.2em;
  font-size: 1.3rem;
  color: #8a5c10;
  letter-spacing: 0.05em;
  overflow-wrap: normal;
  word-break: keep-all;
}
.gift-acc-list dt::before {
  content: "◇";
  position: absolute;
  left: 0;
  color: #c9a24a;
  font-size: 0.85em;
}
.gift-acc-list dd {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.8;
  color: #4a3520;
}

/* アニメーション抑制設定時はマーカーの回転等も無効(transitionは元々軽微) */

/* ---- スマホ(〜768px) ---- */
@media screen and (max-width: 768px) {
  .gift-variety-tags {
    gap: 0.5rem 0.8rem;
  }
  .gift-variety-tags > li {
    font-size: 1.45rem;
  }
  .gift-acc > summary {
    font-size: 1.45rem;
  }
  .gift-acc-list dt { font-size: 1.45rem; }
  .gift-acc-list dd { font-size: 1.4rem; }
}


/* ===========================================================
 * TOPヒーロー(.top_main)モバイル表示の余白ズレ修正
 * 症状:スマホでヘッダー下に大きな余白ができ、写真が下にずれる
 * 主因候補:z-index:-8(モバイルSafariで背景描画が崩れる)/100vh
 * 対策:背景を確実に cover/center で全面表示・z-index解除・100svh
 * =========================================================== */
@media screen and (max-width: 768px) {
  .top_main {
    height: 100vh;            /* フォールバック */
    height: 100svh;           /* モバイルの安定した実高さ */
    min-height: 460px;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url(../img/top_main.jpg) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: auto !important; /* 不安定な -8 を解除 */
    position: relative;
  }
  .top_main img {
    margin: 0 !important;     /* ロゴは中央に(余分なmargin-topを除去) */
    width: 78%;
  }
}


/* ===========================================================
 * TOPブランドキャッチ文:スマホでの改行最適化
 * PC向けに置いた <br>(フレーズ区切り)が、スマホでは1フレーズが
 * 途中で折り返り「デザートを」等の短い孤立行になり読みにくい。
 * スマホでは <br> を無効化し、中央寄せの段落として自然に均等改行させる。
 * ※ index.html 側で <br> は前後の文に密着配置済み(文中スペースが出ない)
 * =========================================================== */
@media screen and (max-width: 768px) {
  .brand-catch-text br,
  .brand-catch-sub br {
    display: none;
  }
}


/* ===========================================================
 * スマホ:フッターをコンパクト化(MENU と ACCESS を横並びに)
 * 縦積み(約880px)→ ロゴ(上部中央)+ MENU|ACCESS の2カラムで圧縮。
 * #footer プレフィックスで既存の分散ルールを上書きする。
 * =========================================================== */
@media screen and (max-width: 768px) {
  #footer .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.8rem;
    row-gap: 1.4rem;
    align-items: start;
    text-align: left;
    padding: 3rem 1.6rem 2.2rem;
    max-width: 560px;
    margin: 0 auto;
  }

  /* ロゴ・コンセプト:左=ロゴ(縦中央・両行をまたぐ)/ 右上=メッセージ・右下=SNS
     右側の「メッセージ+アイコン」の高さに対しロゴを縦中央で揃えてバランスを取る */
  #footer .footer-logo-col {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid !important;
    grid-template-columns: auto auto;
    grid-template-rows: min-content min-content;
    align-items: start;
    align-content: start;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    text-align: left;
    margin: 0;
  }
  #footer .footer-logo-col > a {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
    line-height: 0;
  }
  #footer .footer-logo-col img { max-width: 104px; height: auto; }
  #footer .footer-concept {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    text-align: left;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.75;
  }
  #footer .footer-sns {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }
  #footer .footer-sns a { width: 3.1rem; height: 3.1rem; }

  /* 見出し(MENU / ACCESS):左寄せ・下線付き */
  #footer .footer-nav-title {
    text-align: left;
    margin: 0 0 0.9em;
    padding: 0 0 0.55em;
    font-size: 1.2rem;
    letter-spacing: 0.16em;
    border-bottom: 1px solid rgba(83, 11, 2, 0.18);
  }

  /* MENU(左カラム):2列グリッド */
  #footer .footer-nav-col { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
  #footer .footer-nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7em 0.8em;
    margin: 0;
    width: 100%;
  }
  #footer .footer-nav-list li { margin: 0; width: auto; }
  #footer .footer-nav-list a { font-size: 1.12rem; letter-spacing: 0.04em; }

  /* ACCESS(右カラム):左寄せ・コンパクト */
  #footer .footer-info-col { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  #footer .footer-info-dl { margin: 0; text-align: left; }
  #footer .footer-info-dl dt {
    font-size: 0.98rem;
    letter-spacing: 0.1em;
    color: rgba(83, 11, 2, 0.55);
    margin: 0.85em 0 0.1em;
  }
  #footer .footer-info-dl dt:first-of-type { margin-top: 0; }
  #footer .footer-info-dl dd {
    font-size: 1.08rem;
    line-height: 1.55;
    margin: 0;
  }

  /* 下部:補助リンク+コピーライト */
  #footer .footer-bottom { padding: 1.6rem 1.6rem 2rem; }
  #footer .footer-links { gap: 1.2em; flex-wrap: wrap; }
  #footer .footer-links a { font-size: 1.05rem; }
  #footer .copy { font-size: 0.92rem; margin-top: 0.8em; }
}


/* ===========================================================
 * スマホ:フッターACCESS欄の整形
 * ラベル(住所/営業時間/定休日)と値を全て同じ左端で縦積みに揃える
 * (郵便番号は削除済み)
 * =========================================================== */
@media screen and (max-width: 768px) {
  #footer .footer-info-dl {
    display: block;
    text-align: left;
  }
  #footer .footer-info-dl dt {
    margin: 0.7em 0 0.12em;
  }
  #footer .footer-info-dl dt:first-of-type { margin-top: 0; }
  #footer .footer-info-dl dd {
    margin: 0;
  }
}


/* ===========================================================
 * PC:ストア情報 店名(EN)+読み(JA)の行間を詰める
 * ※ 地図は元の位置・レイアウトのまま(列幅・配置は変更しない)
 * =========================================================== */
@media screen and (min-width: 768px) {
  .access-store-name { margin: 0 0 0.05em !important; line-height: 1.3; }
  .access-store-name-ja { margin: 0 0 0.7em !important; line-height: 1.35; }
  /* 店舗情報テキスト(名前+住所+営業時間)だけを右へ移動 */
  .access-ul li:nth-child(1) { padding-left: 11rem !important; }
}


/* PC:メロンメニューの写真の表示位置調整 */
@media screen and (min-width: 768px) {
  /* かき氷:上寄り(メロンのくさび等を多く見せる) */
  .kakigori-img { object-position: center 38% !important; }
  /* 杏仁パフェ:下寄り(下部=グラスの下側を多く見せる) */
  .parfait-img { object-position: center 40% !important; }
  /* メロンクリームソーダ */
  .cream-soda-img { object-position: center 35% !important; }
}