/* =============================================================
   黒船 QUOLOFUNE ブランドサイト  Webフォント指定（1ファイルに統合）
   -------------------------------------------------------------
   配置先(本番): /common/css/site-webfont.css
   読み込み    : 各テンプレートの <head> で、モリサワ配信CSS → 本ファイルの順
                 （index.php / header.php / page-concept.php / page-material.php /
                   page-design.php。詳細は webfont/EMBED.md）
   ※ 以前は共通 webfont.css（.f-serif 等の定義）と分けていたが、
     実運用上ファイルを2つ上げるのが手間なため本ファイル1つに統合した。
     他サイトを始める際は、このファイルの「当てるクラス」部分だけコピーして
     そのサイト用の site-webfont.css の雛形にする（webfont/webfont.css は
     その雛形として残置）。
   ============================================================= */

/* --- 当てるクラス（旧 webfont.css 相当。全サイト共通だった部分） --- */
.f-serif { font-family: var(--f-serif-family); }
.f-sans  { font-family: var(--f-sans-family); }

/* --- 使用書体 -------------------------------------------------
   Morisawa Fonts（Web）契約済み。配信CSSを各 <head> に設置ずみ:
     <link rel="stylesheet" href="https://morisawafonts.net/c/01M1K18TNSH476PJDA7ACHRFQW/mf.css">
   書体: MFW-PA1MinchoStdN-Bold（太字1ウェイトのみ契約。他ウェイトが要るページが
   出てきたら追加契約 → font-family を増やす）。フォント配信の疎通不可時は
   fallback（システム明朝）に自然に落ちる。
   ----------------------------------------------------------- */
:root {
  --f-serif-family: "MFW-PA1MinchoStdN-Bold", "A1 Mincho", "Hiragino Mincho ProN",
    "Yu Mincho", "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;
}

/* --- グローバルナビ（*gnavi*.png / .gif → テキスト） ---------
   既定は「白背景・黒っぽい明朝」。日本語の下に英字サブ表記(span.small)を1行で添える
   （take-eats のみ元画像が2行の日本語のみ＝<br>で改行、英字なし）。 */

#header .navi ul.pc li a.f-serif {
  display: inline-block;
  text-align: center;
  color: #1a1a1a;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#header .navi ul.pc li a.f-serif:hover {
  color: #999;
}
/* 自由が丘本店 店頭受取予約（take-eats）だけ2行のJP文言が長いので少し小さく */
#header .navi ul.pc li a.f-serif[href*="take-eats"] {
  font-size: 12.6px;
}
#header .navi ul.pc li a.f-serif .small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #999;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif; /* ページで既読込 */
}

/* トップ(index.php): 暗いヒーロー画像の上 → 白（英字はやや透過白） */
#TopHeaderArea #header .navi ul.pc li a.f-serif {
  color: #fff;
}
#TopHeaderArea #header .navi ul.pc li a.f-serif:hover {
  color: #ccc;
}
#TopHeaderArea #header .navi ul.pc li a.f-serif .small {
  color: rgba(255, 255, 255, 0.65);
}

/* 黒船とは系(about_header.php): ヒーロー上でスライドに合わせ白/黒を切替。
   #spmenu = 白版（旧 top_gnavi_*.png） / #spmenu_b = 黒版（旧 top_gnavi_*_b.png）。
   表示切替(JS)は従来どおり <ul> 単位。色だけCSSで対応。 */
#header .navi ul#spmenu.pc li a.f-serif {
  color: #fff;
}
#header .navi ul#spmenu.pc li a.f-serif .small {
  color: rgba(255, 255, 255, 0.65);
}
#header .navi ul#spmenu_b.pc li a.f-serif {
  color: #1a1a1a;
}
#header .navi ul#spmenu_b.pc li a.f-serif .small {
  color: #999;
}

/* --- セクション見出し（*_subtitle_*.gif → テキスト） ----------
   トップの top_subtitle_*、お菓子ページの sweets_subtitle_* / detail_subtitle_related など。
   日本語=大きめ明朝。英字サブ表記(span.small)は日本語の下にグレー小。 */
.subTitle .f-serif {
  display: inline-block;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}
.subTitle h2.f-serif {
  margin: 0; /* h2 既定マージンの打ち消し */
}
.subTitle .small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #b3b3b3;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif; /* ページで既読込 */
}
/* トップページ(.tcntr.subTitle, top_subtitle_*.gif)は日本語の「下」に英字（stacked）。 */
.tcntr.subTitle .small {
  display: block;
  margin-top: 4px;
}
/* お菓子一覧・カフェメニュー等(.tcntr が付かない .subTitle, sweets_subtitle_*.gif など)は
   実物画像を見ると日本語の「右横」に英字（横並び）。.pageTitle と同じ並び方。 */
.subTitle:not(.tcntr) .small {
  display: inline-block;
  margin-left: 10px;
}
/* トップページ(.tcntr.subTitle)は元画像がPC/SP共通(拡大なし)なのでSP時も26pxのまま。
   お菓子一覧・カフェメニュー等(.tcntr が付かない .subTitle)は、元画像が
   PC用とSP用(*_sp.gif)で別サイズ用意されており、SP版は縦2〜3倍ほど大きい
   （例: sweets_subtitle_*.gif は 20px→60px = 3倍）。画像内の日本語部分の実測幅と
   現状PCサイズ(26px)時の当サイト文字幅の比率から、同等の拡大率になる 40px に設定。
   ※ページごとの拡大率は1.4〜3倍とばらつきがあり完全一致はしていない（大幅な差は無い範囲）。 */
@media screen and (max-width: 640px) {
  .subTitle:not(.tcntr) .f-serif {
    font-size: 40px;
  }
  .subTitle:not(.tcntr) .small {
    font-size: 16px;
  }
}
/* 商品詳細の関連商品見出し(single-sweets.php)は元々 .subTitle.pc / .subTitle.sp で
   要素自体が別(メディアクエリでなくクラスで出し分け)。SP版画像(36px相当・PC比1.9倍)に
   合わせ、同じ実測方式で 48px に設定。 */
.subTitle.sp .f-serif {
  font-size: 48px;
}

/* --- 下層 ページタイトル（*_page_title.gif → テキスト） -------
   .pageTitleArea は黒背景。日本語=白の明朝、英字は右横にグレー小。 */
.pageTitle .f-serif {
  display: inline-block;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #fff;
}
@media screen and (max-width: 640px) {
  /* サイト共通のSPブレークポイント（common.css等と同じ640px）に合わせる */
  .pageTitle .f-serif {
    font-size: 26px;
  }
}
.pageTitle h1.f-serif {
  font-size: 22px;
  font-weight: inherit;
  margin: 0;
  display: inline;
}
.pageTitle .small {
  /* ページタイトルは日本語の右横に英字（.subTitle は下） */
  margin-left: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #8c8c8c;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif; /* ページで既読込 */
}

/* --- 店舗案内 各店名ラベル（shop_shopname_*.gif → テキスト） -- */
.shop-name.f-serif {
  display: inline-block;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}
/* 元のimgは #pc_pickupShop 側が height="20"、#sp_pickupShop 側が height="24"（1.2倍）と
   HTML上ですでにSP側を少し大きく指定していたので、同じ比率で反映。 */
#sp_pickupShop .shop-name.f-serif {
  font-size: 22px;
}

/* --- 黒船とは 各セクション見出し（about_subtitle_*.gif → テキスト） -
   .AboutNaviBox .title 内。白背景・黒の明朝。 */
.AboutNaviBox .title .f-serif {
  display: inline-block;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}
@media screen and (max-width: 640px) {
  .AboutNaviBox .title .f-serif {
    font-size: 22px;
  }
}

/* --- 黒船とは 各ページ 本文コピー -----------------------------
   about_concept_newtxt1.gif / about_material_newtxt1.gif /
   about_design_title(_sp).gif → テキスト。白背景・中央寄せの明朝。
   PC/SP の切替は既存の .About_slider.pc / .sp のまま。折り返しはブラウザ任せ。 */
.About_copy.f-serif {
  text-align: center;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 640px) {
  .About_copy.f-serif {
    font-size: 18px;
  }
}
.About_copy .lead {
  display: block;
  margin-bottom: 12px;
  font-size: 22px;
  letter-spacing: 0.1em;
}
.About_copy .lead rt {
  font-size: 0.4em;
}

/* --- お菓子一覧 カテゴリ絞り込みナビ（sweets_navi_*.gif → テキスト） -
   #pc_sweets_menu の各リンク。白背景・小さめ明朝。JS の絞り込みは <li id> / <li class>
   のままなので不変。下線は a 側で一元管理し、padding/border-widthを常に同じ値で確保して
   おく（色だけ切り替える）ことで、hover⇄現在地の切替時にガタつかないようにする。
   既存CSS(layout.css)の ".SweetsNavi li a:hover" / ".SweetsNavi .current" は
   このセレクタ配下では無効化している（二重線・高さジャンプ防止）。 */
#pc_sweets_menu li a.f-serif {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent; /* 常時この太さを確保。色だけ変える */
}
#pc_sweets_menu li a.f-serif:hover,
#pc_sweets_menu li.current a.f-serif {
  border-bottom-color: #1a1a1a;
}
#pc_sweets_menu li.current {
  /* li側(layout.cssの.current)の下線・paddingは無効化し、a側の下線だけを表示させる */
  padding-bottom: 0;
  border-bottom: none;
}
#pc_sweets_menu li a.f-serif::before {
  /* 旧画像(sweets_navi_*.gif)の下矢印はフォント文字ではなく、細い線2本のV字（border構成）。
     枠線2辺を45度回転させて同じ見た目を再現する。色はテキストと同じ(currentColor)。 */
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  margin-bottom: 1px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
}

/* --- 商品詳細 商品名見出し（sweets_titleimg → the_title()） --------
   .detailBox .description .title.pc（PC）。 */
.detailBox .description .title.pc h2.f-serif {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
}
/* SP側 .title.sp は元々テキスト（画像ではない）だったが、Webフォント統一のため
   .f-serif を追加適用。サイズ・色は既存 layout.css の .detailBox .title（28px）を
   そのまま使い、font-weightだけ他の見出しと合わせて明示。 */
.detailBox .title.sp h2.f-serif {
  font-weight: 700;
}
/* 商品名の上に添えるカタカナ表記（ACFフィールド sweets_kana、任意項目）。
   然花抄院のような「上に小さくカタカナ」の見せ方。h2内にネストしているので
   0.5emでPC/SPどちらの商品名サイズに対しても自動的に半分のサイズになる。
   ※ACFフィールド sweets_kana は管理画面側で新規作成が必要（投稿タイプ: sweets, テキスト型）。
   未作成・未入力の場合は何も表示されない。 */
.detailBox .title h2.f-serif .kana {
  display: block;
  font-size: 0.5em;
  font-weight: 400;
  color: #666;
}

/* --- 自由が丘本店ページ セクション見出し（jiyugaoka_title.gif → テキスト） - */
.jiyugaokaBox .title .f-serif {
  /* SP専用画像が無い（PC/SP同一画像）ため、PCは元画像の実測幅に合わせた値。
     自由が丘本店(-3.5%) / 南堀江店(-0.3%) / 駅・空港土産店(+15.9%) で概ねバランスが良い値。 */
  display: inline-block;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}
@media screen and (max-width: 640px) {

  .jiyugaokaBox .title .f-serif {
    font-size: 28px;
    letter-spacing: 0.1em;
  }
}

/* --- カフェ メニュー詳細 メニュー名（menu_titleimg → the_title()） ---- */
.MenudetailBox .description .title h2.f-serif {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
}

/* --- 会社案内・リクルート セクション見出し（company_title.gif / recruit_title.gif → テキスト） - */
.companyBox .title .f-serif {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}