/* ============================================================
   デザイン1 追補スタイル
   page01.css / common.css は現行テーマからの回収物のためそのまま使い、
   差分だけをこのファイルに置く（テーマzip入手後の差し替えを容易にするため）。
   ============================================================ */

:root {
  /* ファーストビューの表示比率。テナントの画像に合わせて変更できる */
  --fv-ratio: 16 / 9;
}

/* img に width/height 属性を出しているため、height:auto を必ず添える。
   common.css の `img{width:100%}` と属性由来の height が同時に効くと画像が歪む。
   （object-fit を使う箇所は個別指定が優先されるので影響しない） */
img { height: auto; }

/* --- 未回収アセットの代替 ------------------------------------
   img/common/header-back.png（テーマ内画像・未入手）の代わりにグラデーションを使う */
.header {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  background-color: transparent;
}

/* ============================================================
   アクセシビリティ／見出し構造の是正
   元テーマはナビ項目を h5、電話番号を h4 にしていた。見出しの階層が飛ぶため
   span / p に変更している。見た目は元のまま保つ。
   ============================================================ */
.gnavi__list .gnavi__ja { font-size: 18px; display: block; }
.gnav__wrap .gnav__ja { display: inline-block; }
.firstview__tel { font-size: 34.03px; }
.firstview__tel span { font-size: 24px; }
/* 電話番号のリンクは common.css の a{display:block;color:#333} を打ち消す。
   TEL.と番号を同じ行（2段表記）に、文字色は白に。 */
.firstview__tel a { display: inline; color: inherit; }
.about__icons-box-text h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }

/* コントラスト不足の是正（小さい文字のみ。ブランドカラーの金は維持） */
.news__deta,
.news__card .news__deta,
.menu__title p,
.news__top-left p { color: #6a6a6a; }
.menu__price { color: #8a7440; }

@media screen and (max-width: 1024px) {
  .gnavi__list .gnavi__ja { font-size: 16px; }
}
@media screen and (max-width: 768px) {
  .firstview__tel { font-size: 20px; }
  .firstview__tel span { font-size: 16px; }
  .about__icons-box-text h3 { font-size: 18px; }
}
@media screen and (max-width: 425px) {
  .gnav__wrap .gnav__ja { font-size: 25px; }
}

/* --- アイコンをSVG化したことによる調整 ------------------------ */
.about__icons-box-img svg { width: 26px; height: 26px; color: #333; }
.header__right-top-icons svg { width: 20px; height: 20px; }
.header__right-top-icons a { display: inline-flex; }
.footer__content-sns svg { width: 22px; height: 22px; }
.footer__content-sns a { display: inline-flex; }

@media screen and (max-width: 768px) {
  .about__icons-box-img svg { width: 23px; height: 23px; }
}

/* --- 固定ヘッダー分のアンカーオフセット --------------------- */
html { scroll-behavior: smooth; }
#news, #feature, #menu, #about { scroll-margin-top: 110px; }
#container { scroll-margin-top: 0; }
@media screen and (max-width: 768px) { #news, #feature, #menu, #about { scroll-margin-top: 70px; } }

/* ============================================================
   ファーストビュー
   SPで height:calc(100vh - 50px) を使うと、横長の写真が縦長の画面に
   cover される＝大幅にズームされて全体像が分からなくなる。
   画像の比率に沿った高さにして、引いた絵を出す。
   ============================================================ */
.firstview {
  height: auto;
  aspect-ratio: var(--fv-ratio);
  min-height: 300px;
  background-size: cover;
  background-position: center;
}

/* SP: 画面の約2/3を写真で占めてイメージ訴求する。
   縦長画面に横長写真を敷くため左右はトリミングされるが、
   余白を作らず全面に出すことを優先する（クライアント判断・2026-07-22）。 */
@media screen and (max-width: 768px) {
  .firstview {
    height: 66vh;
    min-height: 340px;
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
    background-size: cover;
    background-position: center;
  }
}

/* ファーストビューのキャッチコピー枠。
   写真の余白にコピーを置けるデザイン（D案）のためだけに出力しており、
   既定では表示しない。使うテーマ側で display を戻す。 */
.firstview__lead { display: none; }

.firstview__text h4 a { color: inherit; display: inline; }
.about__icons-box-text a { color: inherit; display: inline; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   お知らせ（GBP投稿）＝ 横スライド
   縦積みはスクロール量が増えるため、横スクロール＋スナップに変更。
   本文はHTMLに全文を出力したうえで表示行数のみ抑えている。
   ============================================================ */
.news__carousel { position: relative; }

.news__track {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 4px 2px 4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* 操作は矢印とドットで行うため、スクロールバーは隠す */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.news__track::-webkit-scrollbar { display: none; }
.news__track:focus-visible { outline: 2px solid #b79f64; outline-offset: 4px; }

.news__card {
  flex: 0 0 clamp(258px, 31%, 350px);
  scroll-snap-align: start;
  list-style: none;
}

.news__card .news__box {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  padding-bottom: 20px;
}

/* 画像は日時・タイトル・本文の下に置く */
.news__card-img { aspect-ratio: 16 / 9; overflow: hidden; background: #f2f2f2; margin: 18px 18px 0; }
.news__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news__card .news__deta { font-size: 13px; color: #6a6a6a; letter-spacing: 1.2px; margin: 0; padding: 16px 18px 6px; }
.news__card-title { font-size: 18px; font-weight: 600; line-height: 1.5; padding: 0 18px 10px; }
.news__card-text {
  font-size: 14px;
  line-height: 1.85;
  padding: 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news__card-link {
  display: inline-block;
  margin: 14px 18px 0;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: flex-start;
}

/* 送りボタン＋位置インジケータ（丸ポチ）。トラックの下に横一列で置く */
.news__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
/* 全件が収まっているときは site.js が hidden を付ける */
.news__controls[hidden] { display: none; }

.news__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: opacity .25s, background .25s;
}
.news__arrow svg { width: 18px; height: 18px; }
.news__arrow:hover { background: #fff; }
.news__arrow[disabled] { opacity: .22; cursor: default; }

/* 丸ポチ。見た目は9pxだが、タップ領域は24px確保する（target-size対策） */
.news__dots { display: flex; align-items: center; gap: 4px; }
.news__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.news__dot::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border: 1px solid rgba(0, 0, 0, .45);
  border-radius: 50%;
  transition: background .2s, transform .2s;
}
.news__dot.is-current::before {
  background: #8a7440;
  border-color: #8a7440;
  transform: translate(-50%, -50%) scale(1.35);
}

@media screen and (max-width: 768px) {
  .news__wrapper { display: block; }
  .news__top { display: flex; align-items: flex-end; margin-bottom: 24px; }
  .news__top-left { margin-bottom: 0; }
  .news__track { gap: 14px; }
  .news__card { flex: 0 0 100%; }
  .news__card-title { font-size: 17px; }
  .news__controls { gap: 14px; margin-top: 18px; }
}

/* ============================================================
   お品書き
   縦書き（vertical-rl）では letter-spacing が「文字の上下の隙間」になる。
   2px は間延びするため詰める。
   ============================================================ */
.menu__inbox-right-white {
  line-height: 1.75;
  letter-spacing: .3px;
}
.menu__price { color: #b79f64; font-weight: 600; letter-spacing: 1px; margin-bottom: 14px; }
.menu__price span { font-size: .62em; margin-left: 4px; }

@media screen and (max-width: 768px) {
  /* 横書きに戻るため、こちらは行間（上下）を詰める */
  .menu__inbox-right-white { line-height: 1.8; letter-spacing: .5px; }
  .menu__price { margin-bottom: 10px; }
}

/* --- 店舗写真スライダー（slick非依存の実装）-----------------
   元テーマは slick の .slick-list が画像をクリップしていた。
   slick を外した分、ここで比率固定＋クリップを担保する。 */
.slide { overflow: hidden; }
.slide .item { display: none; overflow: hidden; }
.slide .item.is-active { display: block; }
.slide .item img { width: 100%; height: 100%; object-fit: cover; }
.slide-navigation .item { list-style: none; }
/* サムネイルは li 直下の button。li に role を付けるとリスト構造が壊れるため */
.slide-navigation .item button {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.slide-navigation .item button:focus-visible { outline: 2px solid #b79f64; outline-offset: 2px; }

/* ============================================================
   お知らせ（自前モード）＝ 日付＋タイトルの一覧
   ============================================================ */
.news__list { list-style: none; margin: 0; padding: 0; }
.news__more { text-align: right; margin-top: 16px; }
.news__more a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.news__sub { font-size: 16px; letter-spacing: 2px; margin: 40px 0 14px; color: #6a6a6a; }
.news__item { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.news__item:first-child { border-top: 1px solid rgba(0, 0, 0, .12); }
.news__item a {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 8px;
  color: inherit;
  transition: background .2s;
}
.news__item a:hover { background: rgba(0, 0, 0, .03); }
.news__item-date { flex: 0 0 auto; font-size: 15px; color: #6a6a6a; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.news__item-title { flex: 1; font-size: 17px; line-height: 1.6; }
.news__item-arrow { flex: 0 0 auto; display: inline-flex; opacity: .4; }
.news__item-arrow svg { width: 16px; height: 16px; }

@media screen and (max-width: 768px) {
  .news__item a { flex-wrap: wrap; gap: 4px 16px; padding: 18px 4px; }
  .news__item-date { flex: 0 0 100%; font-size: 13px; }
  .news__item-title { flex: 1; font-size: 15px; }
}

/* お知らせ詳細 */
.news-detail { max-width: 820px; margin: 36px auto 0; }
.news-detail__date { display: block; font-size: 14px; color: #6a6a6a; letter-spacing: 1px; margin-bottom: 10px; }
.news-detail__title { font-size: 26px; line-height: 1.5; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid rgba(0, 0, 0, .1); }
.news-detail__img { margin: 0 0 28px; }
.news-detail__img img { width: 100%; max-width: 640px; height: auto; border-radius: 6px; display: block; }
.news-detail__body { font-size: 16px; line-height: 2; }
@media screen and (max-width: 768px) {
  .news-detail__title { font-size: 20px; }
  .news-detail__body { font-size: 15px; }
}

/* ============================================================
   固定ページ（メニュー・採用情報）
   移行元のWordPress本文は全セルに width:50% が直書きされており、
   金額欄が異常に広くなっていた。inline指定は sanitizeWpHtml で除去し、
   列幅はここで決める。
   ============================================================ */
.page__wrapper {
  max-width: 1000px;
  width: 92%;
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 90px;
}
.page__wrapper .menu__title { padding: 0 0 48px; }
/* 固定ページの見出しは h1。トップの h2 と同じ見え方に揃える */
.page__wrapper .menu__title h1 {
  font-size: 48px;
  letter-spacing: 2px;
  margin-bottom: 14px;
  display: inline-block;
  position: relative;
}

.page__breadcrumb { font-size: 13px; letter-spacing: 1px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page__breadcrumb a { display: inline; text-decoration: underline; text-underline-offset: 3px; }
.page__breadcrumb span[aria-hidden] { opacity: .5; }
.page__breadcrumb span[aria-current] { opacity: .75; }

.page__content { font-size: 16px; line-height: 1.95; }
.page__content p { margin-bottom: 1em; }
.page__content p:last-child { margin-bottom: 0; }
.page__content strong { font-weight: 700; }
.page__content a { display: inline; text-decoration: underline; text-underline-offset: 4px; }
.page__content h2,
.page__content h4 { font-size: 22px; font-weight: 700; margin: 48px 0 16px; letter-spacing: 1px; }
.page__content h2:empty, .page__content h4:empty { display: none; margin: 0; }

.page__content table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin: 0 0 40px;
  background: rgba(255, 255, 255, .55);
}
.page__content td,
.page__content th {
  border: 1px solid rgba(0, 0, 0, .18);
  padding: 16px 18px;
  vertical-align: top;
}
.page__content td p { margin-bottom: .6em; }
.page__content td p:last-child { margin-bottom: 0; }

/* 採用情報など「項目名｜内容」の表：左の項目名を狭く、右の説明を広く。
   項目名は「・」の直後だけで折り返す（sanitizeWpHtml が <wbr> を挿入している）。 */
.page--label-left .page__content td:first-child {
  width: 1%;
  min-width: 7em;
  word-break: keep-all;
  font-weight: 700;
  background: rgba(0, 0, 0, .04);
}

/* お品書きの表：右の金額欄を狭く、左の品名を広く。
   「現在はやっておりません」のような長文は折り返してよい。 */
.page--price-right .page__content td:last-child {
  width: 1%;
  min-width: 7em;
  max-width: 11em;
}

.page__back { margin-top: 48px; text-align: center; }
.page__back a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 32px;
  letter-spacing: 2px;
}
.page__back a:hover { opacity: .8; }

@media screen and (max-width: 768px) {
  .page__wrapper { padding-top: 90px; padding-bottom: 60px; width: 90%; }
  .page__wrapper .menu__title { padding-bottom: 32px; }
  .page__wrapper .menu__title h1 { font-size: 9.5vw; }
  .page__content { font-size: 15px; }
  .page__content td, .page__content th { padding: 12px 12px; }
  .page--label-left .page__content td:first-child { min-width: 5.5em; }
  .page--price-right .page__content td:last-child { min-width: 5.5em; max-width: 8em; }
  .page__content h2, .page__content h4 { font-size: 19px; margin: 36px 0 14px; }
}

/* ============================================================
   フッター
   ============================================================ */

/* バナーは現行サイトと同じ「自動で流れる横スライド」。
   幅は Googleマップ（about__content 90% × about__map 95%）に揃える。
   自動送りと手動操作（スワイプ／ドラッグ）はどちらも site.js が実スクロールで扱う。
   CSSアニメーションではなくスクロール位置を動かすため、触ればその場で動かせる。 */
.f-slider-viewport {
  max-width: 1235px;
  width: 85.5%;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  /* 自動送りのループ処理と競合するため、ここだけスムーススクロールを切る */
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.f-slider-viewport::-webkit-scrollbar { display: none; }
.f-slider-viewport.is-dragging { cursor: grabbing; }
/* ドラッグ中は画像のゴーストドラッグとテキスト選択を止める */
.f-slider-viewport.is-dragging a { pointer-events: none; }
.f-slider-viewport.is-dragging { user-select: none; }

.footer__slider .f-slider {
  display: flex;
  width: max-content;
  max-width: none;
  margin: 0;
  /* バナーごとに画像の縦横比が僅かに違うため、中央揃えだと上端がずれる。先端（上端）揃えにする */
  align-items: flex-start;
}
.footer__slider .f-slider li { flex: 0 0 auto; width: 260px; margin-right: 26px; }
.footer__slider .f-slider li img,
.footer__slider .f-slider li svg { display: block; width: 100%; height: auto; pointer-events: none; }

@media screen and (max-width: 560px) {
  .f-slider-viewport { width: 92%; }
  .footer__slider .f-slider li { width: 220px; margin-right: 18px; }
}

/* 店舗紹介テキストが画面いっぱいに広がるのを防ぐ（現行テーマのインラインstyle相当） */
.footer__text {
  max-width: 1000px;
  width: 93%;
  margin: 0 auto;
  text-align: left;
  line-height: 2;
  letter-spacing: 1px;
  padding: 60px 0;
}
/* 店舗紹介文やSNSを設定していない店舗では、中身が無いのに上下パディングだけが残り、
   フッターに何も書かれていない黒帯ができる。空なら要素ごと消す。 */
.footer__text:empty,
.footer__content-sns:empty { display: none; }

/* --- クイックアクション（電話／店舗概要／地図／トップへ）---
   SPは画面下部の固定バーが同じ役割を果たすため、PCのみ表示する */
.footer__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  max-width: 1000px;
  width: 93%;
  margin: 20px auto 0;
}
.footer__actions__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 0;
  max-width: 220px;
  padding: 18px 8px;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 13px;
  letter-spacing: 1px;
  transition: background .25s;
}
.footer__actions__item:hover { background: rgba(255, 255, 255, .12); }
.footer__actions svg { width: 22px; height: 22px; }

@media screen and (max-width: 768px) {
  .footer__actions { display: none; }
}

/* --- スマホ下部固定ナビ（ボタン数に応じて均等分割・SVGピクトグラム）--- */
#sp_bottom div { flex: 1 1 0; width: auto; border-left: 1px solid #ededed; }
#sp_bottom div:first-child { border-left: 0; }
#sp_bottom div a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 100%; color: #333;
}
#sp_bottom svg { width: 21px; height: 21px; }
#sp_bottom span { font-size: 10px; letter-spacing: .5px; }

@media screen and (max-width: 768px) {
  #footer { padding-bottom: 51px; }
}

/* --- 固定ページ本文の追加パーツ（商品一覧など）--- */
/* 本文中の写真。WordPress由来の本文には width/height が入っているので、
   height:auto を必ず添えて属性由来の高さで歪まないようにする */
.page__content img { max-width: 100%; height: auto; display: block; margin: 0 0 24px; }
/* 見出しへアンカーで飛んだとき、見出しが画面上端に貼り付かないよう余白を確保 */
.page__content h2[id] { scroll-margin-top: 24px; }
.page__content .page__lead { margin-bottom: 40px; line-height: 2.05; }
.page__content .page__note { font-size: 14px; opacity: .75; margin-top: -24px; margin-bottom: 40px; }

/* ページ内アンカーのボタン列。
   WordPressの本文に直書きされていた inline style（幅250px固定・padding直書き）を捨て、
   ここで面倒を見る。SPでは横並びにせず縦に積む（250px固定だと画面から溢れていた）。 */
.page__anchor-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 48px; }
.page__content .page__anchor-btn {
  /* テーマCSSに全体指定が無いので個別に。width:100% と padding を併用するため必須 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 48px;
  padding: 12px 24px;
  background: #000;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: .06em;
  transition: opacity .2s;
}
.page__content .page__anchor-btn:hover { opacity: .82; }

@media screen and (max-width: 768px) {
  .page__anchor-btns { flex-direction: column; gap: 10px; margin-bottom: 36px; }
  .page__content .page__anchor-btn { min-width: 0; width: 100%; }
  .page__content .page__note { margin-top: -18px; margin-bottom: 32px; }
}

/* --- ご注文ブロック（全ページのフッター直上・#order）---
   注文フォームが複数ある店舗（初回／リピート等）を1つに束ねず、そのまま並べる。
   SPフッターの「ご注文」を押すとここへ着地する。 */
.order__section { padding: 0; }
.order__wrapper {
  max-width: 1000px;
  width: 93%;
  margin: 0 auto;
  padding: 70px 0 80px;
  /* 固定ナビの下に見出しが潜り込まないよう、アンカー着地位置をずらす */
  scroll-margin-top: 20px;
}
.order__lead {
  max-width: 720px;
  margin: 0 auto 34px;
  text-align: center;
  line-height: 2;
  letter-spacing: .04em;
}
.order__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.order__button {
  /* width:100% + padding。テーマに全体の border-box 指定が無いので個別に付ける */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 420px;
  min-height: 66px;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  transition: opacity .2s;
  /* 色は動的CSS側（color.button_bg / color.button_font）で上書きされる */
  background: #000;
  color: #fff;
}
.order__button:hover { opacity: .82; }
.order__button-label {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .06em;
}
/* 補足は見出しと同じ帯にせず、必ず改行して下に置く（SPで1本の帯に見えるのを避ける） */
.order__button-note {
  display: block;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  opacity: .8;
}
.order__footnote {
  max-width: 720px;
  margin: 28px auto 0;
  font-size: 13px;
  line-height: 1.9;
  text-align: center;
  opacity: .75;
}

@media screen and (max-width: 768px) {
  .order__wrapper { padding: 48px 0 56px; }
  /* SPで中央寄せにすると行末がバラけて読みにくいので左揃えに戻す */
  .order__lead { margin-bottom: 26px; text-align: left; }
  .order__footnote { text-align: left; }
  .order__button { max-width: none; min-height: 62px; }
  .order__button-label { font-size: 16px; }
}

/* --- ハンバーガーボタンを button 要素にしたことによる調整 --- */
.menu.menu-back { background: none; border: 0; padding: 0; cursor: pointer; }

/* ===== SNS埋め込み（Instagram / Facebook）＝店舗のご案内の下 ===== */
.sns-embed{display:flex;gap:40px;max-width:1040px;margin:0 auto;padding:70px 20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
@media(max-width:768px){.sns-embed{padding:50px 20px}}
.sns-embed__col{flex:1 1 360px;min-width:300px;max-width:480px}
.sns-embed__head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:22px}
.sns-embed__logo svg{width:38px;height:38px}
.sns-embed__name{font-size:26px;font-weight:600;letter-spacing:1px}
.sns-embed__ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sns-embed__ig-cell{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:2px}
.sns-embed__ig-cell img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.sns-embed__ig-cell:hover img{opacity:.85}
.sns-embed__ig-widget{width:100%;min-height:460px;border:0;display:block}
.sns-embed__fb{width:100%;max-width:480px;height:560px;display:block}
.sns-embed__more{text-align:center;margin-top:16px}
.sns-embed__more a{display:inline-block;font-size:14px;letter-spacing:1px;border-bottom:1px solid currentColor;padding-bottom:2px}
@media(max-width:768px){.sns-embed{flex-direction:column;gap:44px;align-items:center}.sns-embed__col{width:100%;max-width:420px}}

/* ===== FAQ（よくあるご質問）＝店舗のご案内・SNSの下 ===== */
.faq__wrapper{max-width:900px;margin:0 auto;padding:0 20px 90px}
#faq{padding-bottom:0}
.faq__wrapper + *,.sns-embed{margin-bottom:0}
/* FAQセクションとフッターの間に余白を確保 */
.front__page > .section:last-child{padding-bottom:80px}
.faq__list{margin-top:28px}
.faq__item{border-bottom:1px solid rgba(0,0,0,.12)}
.faq__q{cursor:pointer;padding:20px 44px 20px 0;position:relative;font-weight:600;font-size:17px;line-height:1.7;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q::before{content:"Q";font-weight:700;margin-right:12px;color:#a8912d}
.faq__q::after{content:"+";position:absolute;right:6px;top:22px;font-size:22px;line-height:1;color:#a8912d;transition:transform .2s}
.faq__item[open] .faq__q::after{content:"−"}
.faq__a{padding:2px 6px 22px 28px;line-height:1.95;color:#555}
.faq__item[open] .faq__q{color:#a8912d}

/* ===== お知らせ詳細の内部リンク（他のお知らせ）＝回遊・クロール深度 ===== */
.news-detail__related{max-width:820px;margin:44px auto 0;padding-top:28px;border-top:1px solid rgba(0,0,0,.12)}
.news-detail__related-title{font-size:18px;font-weight:700;margin:0 0 14px;letter-spacing:1px}
.news-detail__related-list{list-style:none;margin:0;padding:0}
.news-detail__related-list li{border-bottom:1px solid rgba(0,0,0,.08)}
.news-detail__related-list a{display:flex;gap:16px;align-items:baseline;padding:13px 4px;text-decoration:none;color:inherit}
.news-detail__related-list a:hover{opacity:.7}
.news-detail__related-list time{flex:none;font-size:13px;color:#8a8577;letter-spacing:.5px}
.news-detail__related-list span{font-size:15px;line-height:1.6}

/* こだわりセクションの見出しを H3→H2 に変更（page01.css の .feature__message h3 と同じ見た目を h2 に付与） */
.feature__message h2{font-size:48px;letter-spacing:10px;margin:0;line-height:1.4;font-weight:inherit}
@media screen and (max-width:1024px){.feature__message h2{font-size:44px}}

/* ===== お知らせ：NEWバッジ・カテゴリー・絞り込みタブ ===== */
.news__new{
  flex:none;display:inline-block;background:#c0392b;color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;line-height:1.5;
  padding:2px 7px;border-radius:3px;vertical-align:middle;font-family:system-ui,sans-serif;
}
.news__cat{
  flex:none;display:inline-block;border:1px solid rgba(0,0,0,.22);color:#6a6a6a;
  font-size:11px;letter-spacing:.04em;line-height:1.6;padding:1px 9px;border-radius:999px;white-space:nowrap;
}
.news__item a{gap:16px}
.news__item[hidden]{display:none}
/* カテゴリーとタイトルが近すぎて読みにくいので、1文字ぶん余白を足す */
.news__cat{margin-right:8px}

.news__filter{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  max-width:820px;margin:0 auto 30px;padding:0 4px;
}
.news__filter-btn{
  appearance:none;border:1px solid rgba(0,0,0,.2);background:transparent;color:#4a4a4a;
  font:inherit;font-size:14px;line-height:1.6;letter-spacing:.04em;
  padding:8px 20px;border-radius:999px;cursor:pointer;transition:.15s;
}
.news__filter-btn:hover{background:rgba(0,0,0,.05)}
.news__filter-btn.is-current{background:#222;border-color:#222;color:#fff}

/* 本文に画像や表を入れられるようにする（ブログ用途） */
.news-detail__body img{max-width:100%;height:auto;display:block;margin:22px auto;border-radius:4px}
.news-detail__body h2,.news-detail__body h3{margin:2.2em 0 .8em;line-height:1.6;font-weight:700}
.news-detail__body h2{font-size:22px}
.news-detail__body h3{font-size:19px}
.news-detail__body p{margin:0 0 1.5em;line-height:2}
.news-detail__body ul,.news-detail__body ol{margin:0 0 1.5em;padding-left:1.5em}
.news-detail__body li{margin-bottom:.5em;line-height:1.9}
.news-detail__body table{border-collapse:collapse;width:100%;margin:1.5em 0}
.news-detail__body td,.news-detail__body th{border:1px solid rgba(0,0,0,.18);padding:10px 12px;line-height:1.8}
.news-detail__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}

@media screen and (max-width:768px){
  .news__filter{gap:6px;margin-bottom:22px}
  .news__filter-btn{font-size:13px;padding:7px 15px}
  .news__item a{gap:8px 12px;flex-wrap:wrap}
  .news__cat{margin-right:4px}
}

/* 「他のお知らせ」でも NEW を出す（日付とタイトルの間） */
.news-detail__related-list a .news__new{flex:none;align-self:center}

/* お知らせ一覧ページは .page__content a{display:inline} に負けて横並びが崩れるので戻す。
   下線はタイトルだけに付け直す（従来の見た目を維持） */
.page__content .news__list a{display:flex;align-items:center;gap:16px;text-decoration:none}
.page__content .news__list .news__item-title{text-decoration:underline;text-underline-offset:4px}
@media screen and (max-width:768px){
  .page__content .news__list a{flex-wrap:wrap;gap:8px 12px}
}