/* =============================================================
   然花抄院（zen-kashoin.com）  Webフォント指定（このファイル1本に集約）
   -------------------------------------------------------------
   配置先(本番): テーマ内 css/site-webfont.css（他の共通CSSと同じ場所。`get_template_directory_uri()` 経由）
   読み込み    : 各テンプレートの <head> で
                   1. Morisawa Fonts 配信 <link>（ベンダー）
                   2. このファイル（?v=filemtime によるキャッシュ対策つき）
                 の順。一覧・具体的な <link> タグは DEPLOY.md 参照。
   構成方針    : サイト共通のリポジトリ規約では「.f-serif 等のクラス定義」を
                 ルート webfont/webfont.css、「書体名・調整」を本ファイルに分けているが、
                 zen-kashoin ではクライアント指定により**分離せずこのファイル1本にまとめる**
                 （.f-serif / .f-sans の定義と --f-serif-family の指定を同居）。
   ============================================================= */

/* --- 使用書体（契約済） --------------------------------------
   Morisawa Fonts（Web）。配信CSS: https://morisawafonts.net/c/01M1K19M2AJ5EK2NVK3XQZZP50/mf.css
   （<head> でこのファイルより前に <link> 済み。設置箇所は sites/zen-kashoin/webfont/EMBED.md 参照） */
:root {
  --f-serif-family: "MFW-KyokaICAPro-Medium", "A1 Mincho", "Hiragino Mincho ProN",
    "Yu Mincho", "YuMincho", "Noto Serif JP", "Times New Roman", serif;
  --f-sans-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
}

/* 画像だった見出し・ナビ文字をテキスト化した要素に付ける。 */
.f-serif { font-family: var(--f-serif-family); }
.f-sans  { font-family: var(--f-sans-family); }

/* common.css で h1〜h4,p は font-size:100% / font-weight:normal にリセットされている。
   旧テキスト画像に寄せるサイズ・字間・色をここで指定する。 */

/* --- グローバルナビ（旧 common/img/menu0X_on|off.gif → テキスト） -----
   header.php。<a class="f-serif"> の中の <span class="pc-only"> が PC 表示、
   <span class="sp-only"> が SP 表示（common.css の @media で display 切替）。
   旧画像は「日本語ラベル + 英字副題（小・グレー）」の2段組。
   menu05 は上に「只今、キャンペーン実施中」(.lead) も入る。
   現在ページは <a> に .current（旧 _on 画像 = 背景に淡いグラデ。ここでは色で表現）。
   ⚠ .pc-only / .sp-only の display 切替は common.css 側の @media (max-width:899px)/(min-width:900px)
     に依存している（単一クラスの低詳細度セレクタ）。ここで .pc-only に display を指定すると
     詳細度で勝ってしまい SP でも .pc-only が表示され、.sp-only と二重表示になる
     （実際に踏んだ不具合）。そのため display を伴う調整は必ず min-width:900px 内に入れる。 */
#header #globalNav{
  margin-bottom: 0;
}
#header #globalNav li a.f-serif {
  box-sizing:border-box;
  color: #231815;
  height: 100%;

}
@media only screen and (min-width: 900px) {
  /* 旧タブ画像の実測幅（167/129/131/221/201px, 合計849px）に li 幅を合わせ、
     ナビ全体の横幅・開始位置を画像時代と揃える（テキスト化で自動幅にすると
     849px→640px前後まで縮み、ロゴとの間隔が大きく変わってしまうため）。 */
  #header #globalNav li:nth-child(1) { width: 167px; }
  #header #globalNav li:nth-child(2) { width: 129px; }
  #header #globalNav li:nth-child(3) { width: 131px; }
  #header #globalNav li:nth-child(4) { width: 221px; }
  #header #globalNav li:nth-child(5) { width: 201px; }
  /* 旧 menu05_off.gif は背景色＋下ボーダーつき（実測: 背景 #fef6eb、下2px #bd3101）。 */
  #header #globalNav li:nth-child(5) {
    background: #fef6eb;
    border-bottom: 2px solid #bd3101;
  }
  #header #globalNav li a.f-serif {
         display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    text-align: center;
  }
  #header #globalNav li:nth-child(5) a.f-serif {
    padding-top: 2px;
    padding-bottom: 0;
  }

  #header #globalNav li a.f-serif.current {
    background: linear-gradient(to bottom, #ffffff 51%, #cccccc);
  }
  #header #globalNav li a.f-serif .pc-only {
    display: inline-block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
  }
  /* 1〜3番目（京都室町本店／店舗情報／御菓子）だけ日本語ラベルの字間を広げる。
     .small / .lead は個別に letter-spacing を持つのでこの指定の影響は受けない。 */
  #header #globalNav li:nth-child(1) a.f-serif .pc-only,
  #header #globalNav li:nth-child(2) a.f-serif .pc-only,
  #header #globalNav li:nth-child(3) a.f-serif .pc-only {
    letter-spacing: 0.1em;
  }
  #header #globalNav li a.f-serif .pc-only .small {
    display: block;
    margin-top: 2px;
    font-size: 11.7px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #231815; /* 英字副題も本文と同じ黒 */
    font-family: "Times New Roman", "Georgia", serif;
  }
  #header #globalNav li a.f-serif .pc-only .lead {
    display: block;
    margin-bottom: 1px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #8a8380;
  }
}

/* --- 下層ページ 大見出し（旧 h3_*.gif / h3_index.gif → テキスト） -----
   各テンプレの #mainInner 直下 <h3>、about の <h3>、お知らせの <h2>、
   SUGATA の .title h3 など。
   実測（taxonomy.php「「然」かすてら」旧画像 02_zencastella_3.gif、自然サイズ350×50・等倍表示を確認済み）:
   本文のインク幅186px・高さ30px。同条件（字間0.08em）で本ウェブフォントを試し打ちして一致するサイズを探した結果、
   28px が幅187px・高さ28pxで最も近似（26pxだと幅175px、24pxだと幅161pxでどちらも小さめ）。 */
#main h3.f-serif,
#main_a h3.f-serif,
#main.info #mainInner h2.f-serif,
#main .gallery.page .title h3.f-serif,
#main.gallery.page .title h3.f-serif,
#main #topTitle h3.f-serif {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: #231815;
}

/* page-hikarie.php だけ他の下層ページ大見出し（28px）より小さく指定。 */
div#main.hikarie h3.f-serif {
  font-size: 1.15rem;
}
/* 同ページの中見出し「茶庭 然花抄院 渋谷ヒカリエ内ShinQs」は PC のみ 16px（共通の中見出しは 17px）。 */
@media only screen and (min-width: 900px) {
  div#main.hikarie h4.f-serif {
    font-size: 16px;
  }
}

/* about ページの詩的見出し（旧 h3_index2〜4.gif は複数行画像）
   折り返しはブラウザ任せ。行間だけ広めに。 */
#main_a.about h3.f-serif {
  line-height: 1.8;
}
@media only screen and (max-width: 899px) {
  #main_a.about h3.f-serif {
    line-height: 1.4;
  }
}
/* 旧 h3_index2.gif（1行・実測 幅345px）に合わせて字間0・26px。PCのみ。 */
@media only screen and (min-width: 900px) {
  div#main_a h3#about1 {
    font-size: 26px;
    letter-spacing: 0;
  }
  /* 旧 h3_index3.gif（4行・最終行の実測幅232px）。最終行 26px、上3行だけ若干小さく。 */
  div#main_a h3#about2 {
    font-size: 26px;
    letter-spacing: 0;
    line-height: 1.3;
  }
  div#main_a h3#about3 {
    font-size: 26px;
  }
}
/* 副題（上3行）は PC / SP 共通。 */
div#main_a h3#about2 .about2-sub {
  font-size: 86%;
  line-height: 1.55;
  padding-bottom: 5px;
  display: inline-block;
}

/* --- 中見出し（旧 h4_*.gif → テキスト） -----------------------
   店舗名・カテゴリ名・メニュー見出しなど。旧画像の高さ ≒ 18px。 */
#main h4.f-serif,
#main_a h4.f-serif,
#main h3 .f-serif,          /* page-store.php: <h3><span class="f-serif"> 相当 */
#main .flex .txt-wrap h4.f-serif {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #231815;
}

/* archive-item / page-store の <h3><img h4_*.gif></h3> はそのまま <h3 class="f-serif"> に。
   中見出しサイズで表示。 */
#main.item.index .txt-wrap h3.f-serif,
#main.store .txt-wrap h3.f-serif,
#main.gallery #mainInner .flex h3.f-serif {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* /store/ の店舗名 h3 だけ 16px（上の共通17pxを個別に上書き）。 */
#main.store .txt-wrap h3.f-serif {
  font-size: 16px;
}

/* --- 商品サムネ一覧の商品名（新規追加） -----------------------
   taxonomy.php（/item/<カテゴリ>/ の6〜3列グリッド）と
   single-item.php の「商品一覧」（.single-menu、関連商品グリッド）。
   サムネ画像の下に商品名を表示。 */
#main.item.page ul li a,
#main.item .single-menu li a {
  display: block;
  text-align: center;
}
#main.item.page ul li a .item-name,
#main.item .single-menu li a .item-name {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #231815;
}
@media only screen and (min-width: 900px) {
  #main.item.page ul li a .item-name,
  #main.item .single-menu li a .item-name {
    font-size: 12.7px;
    letter-spacing: -0.05em;
  }
}

/* --- SP 用見出し（旧 menu01_off.gif / h3_muromachihonten.png → テキスト） --- */
#main h1.sp-only.f-serif,
#main h2 .sp-only.f-serif,
#main h3 .pc-only.f-serif,        /* 定休日のお知らせ（PC） */
#main .sp-only.f-serif {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #231815;
}
#main h3 .pc-only.f-serif {
  font-size: 15px;
}
/* 京都室町本店の「定休日のお知らせ」見出しだけ個別に17px。 */
#main.headshop #calender h3 .pc-only.f-serif {
  font-size: 17px;
}
/* 旧 img/menu01_off.gif（zencafe / access / menu / view で共通利用、167×49）には
   英字副題 KYOTO Muromachi Store が入っていたが、テキスト化時に見落として日本語だけになっていた。
   実測: 上部余白17px・本文行16px・行間4px・英字副題8px・下部余白4px。
   旧 <img> はCSS上は左端0pxに配置されていたが、画像キャンバス自体に左余白（実測18〜31px）が
   焼き込まれていたため、見た目には端から離れていた。テキスト化するとその余白が失われ画面端に
   張り付くため、h1側に padding-left を付けて再現する。
   ⚠ このセレクタ（h1.sp-only.f-serif）は当該4テンプレート（zencafe/access/menu/view）以外では
   使われていないことを確認済み（`bk/`・孤立ファイル`zencafe/img/page-menu.php`を除きgrepで該当なし）。 */
#main h1.sp-only.f-serif {
  padding-top: 12px;
  padding-left: 20px;
  margin-bottom: 8px;
    font-size: 1rem;
        line-height: 1.4;
     letter-spacing: 0.1em;
}
#main h1.sp-only.f-serif .small {
  display: block;
  margin-top: 0;
  font-size: 0.65em;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #231815;
  font-family: "Times New Roman", "Georgia", serif;
  line-height: 1;
}

/* page-view.php の PC スライドショー内 <h2 class="ttl"> の read01〜09.gif は
   対象外（縦組みの長文キャプション。画像のまま据え置き。inventory.md 参照）。 */

/* --- メニュー名（ACF 画像 → the_title()、一覧内の個別項目） -------
   page-menu*.php / page-drink*.php の .menulist 内、個々のメニュー名 <h4>。
   ページ自体の見出し（例: 33行目の「お品書き」<h3>）とは別で、通常の大見出しより一段小さい。 */
#main .menulist h4.f-serif {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #231815;
}
#main.item.detail #mainInner #entry h3.f-serif {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: #231815;
}

/* 商品名に含まれる <br>（商品名登録時、任意の位置で改行したい場合に管理側で挿入）。
   商品一覧（taxonomy.php の商品サムネ一覧 / single-item.php 末尾の関連商品一覧）では
   そのまま活かして改行させ、商品詳細ページ本体のタイトル（この <h3>）だけ改行を無効化する。 */
#main.item.detail #mainInner #entry h3.f-serif br {
  display: none;
}

/* title の上に出すフリガナ（ACF `furigana` フィールド。
   single-item.php の <h3> / single-menu.php の <h4> 内、title の直前）。
   フィールド未入力なら出力なし。 */
#main .f-serif .kana {
  display: block;
  font-size: 0.5em; /* 商品名(h3/h4)の font-size に対する相対値 */
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: #8a8380;
}
/* page.css の `#main.item.detail #mainInner #entry h3 span{width:36px;height:17px}`
   （新商品バッジ icon_sidenew.gif 用の指定）が同じ h3 内の .kana にも衝突し、
   固定幅で文字が詰まってしまうため、.kana だけ無効化する（実際に踏んだ不具合）。 */
#main.item.detail #mainInner #entry h3 span.kana {
  width: auto;
  height: auto;
}
/* 新商品バッジ（<h3><span><img icon_sidenew.gif></span>…）。page.css が span を 36×17px の箱にしているが、
   h3 が画像→テキストになり span が商品名の font-size(27px)・line-height(1.6) を継承した結果、
   箱の中の行が約35pxになり img が baseline 揃えで約15px下へ押し出されていた（旧は span 内で上端から +3px）。
   書体の baseline に依存しないよう、img を block にして旧版と同じ +3px に固定する。 */
#main.item.detail #mainInner #entry h3 span:not(.kana) img {
  display: block;
  position: relative;
  top: 3px;
}

/* --- 「オンラインショップへ」ボタン（旧 item/img/btn_shop.gif → テキスト） -----
   single-item.php の商品詳細下部。SP は既存 page.css の .entrymore a（枠線ボタン、
   @media max-width:899px）で既にテキスト化済みだったが、PC だけ画像のまま残っていた。
   旧画像は白背景・黒文字（#231815）＋下2pxの濃いグレー罫線（実測 #333、最下段は
   アンチエイリアスで#cdcdcd）。ここでは罫線を #231815 に寄せて他要素と統一。 */
@media only screen and (min-width: 900px) {
  #main.item.detail #mainInner #entry .entrymore a.f-serif {
    display: block;
    width: 200px;
    padding: 10px 0 4px;
    text-align: center;
    border: 1px solid #999999;
    border-bottom: 2px solid #231815;
  }
  #main.item.detail #mainInner #entry .entrymore a.f-serif .pc-only {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #231815;
    line-height: 1.2;
  }
  #main.item.detail #mainInner #entry .entrymore a.f-serif .pc-only .small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #231815;
    font-family: "Times New Roman", "Georgia", serif;
  }
}

/* --- SP 文字サイズ調整 ------------------------------------------------
   PC と共通の指定だと SP では大きすぎたため、該当2箇所だけ SP 用に縮小。 */
@media only screen and (max-width: 899px) {
  #main.item.detail #mainInner #entry h3.f-serif {
    font-size: 25px;
  }
  #main.item.page ul li a .item-name,
  #main.item .single-menu li a .item-name {
    font-size: 11.5px;
  }
}

/* --- 名前 + 読み（SUGATA のブランド見出し 等） --------------- */
.f-serif .small {
  display: block;
  margin-top: 4px;
  font-size: 0.58em;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #8a8380;
}