/* =====================
   ベース（全セクション共通の土台）
   -----------------------------------------------------------
   body と、複数セクションで使い回す UI 部品（ボタン・バッジ）のみ。
   セクション固有のスタイルは css/sections/[section]/*.css に分割している。
===================== */

/* 日本語テキストの可読性デフォルト（references/japanese-text-readability.md）。
   案件管理シートで文字が薄い・小さいという指摘が繰り返し出たため、新規にnote/caption系
   要素を作るときの最低ラインとしてここに置く。既存セクションCSSへの遡及適用はしていない
   （13ファイルの一括修正は別スコープ、今のところ強制はしない任意参照用の値） */
:root {
  --font-size-note-min: 0.8125rem; /* 13px相当。注記・キャプションの最低サイズ */
  --font-size-body-min: 0.875rem;  /* 14px相当。本文・ラベルの最低サイズ */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg-page);
  /* テーマごとの--font-jp（css/themes.css）を適用。Webフォント未読み込みのページは
     フォールバックのsans-serif/serifに落ちるだけなので、既存ページへの影響はない */
  font-family: var(--font-jp, sans-serif);
  /* カレンダー/マップ埋め込みでよく使う「width:100vwのフルブリード技法」は、
     サブピクセル単位の誤差でページ全体に横スクロールを生むことがある（iOS Safariで確認）。
     全セクション共通の土台としてここで一括ガードする（サンプルクリニック案件、2026-08-23） */
  overflow-x: hidden;
}

/* =====================
   サイトヘッダー（全ヒーローバリアント共通）
   -----------------------------------------------------------
   以前は各hero--xxxの中にヘッダーが埋め込まれ、position: absolute/static
   だったため、ヒーローをスクロールで抜けるとナビごと消えていた。
   ヘッダーをヒーローの外に出し、position: fixedでページ全体に常駐させる。
   見た目（透過して画像に重ねる／不透明で通常配置）はバリアント修飾クラス
   （.site-header--overlay 等）側で変える。
===================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* hero--framedとhero--splitはヘッダーが不透明・通常配置の見た目 */
.site-header--framed,
.site-header--split {
  background: var(--color-bg-page);
  box-shadow: 0 1px 0 var(--color-border);
}

/* hero.cssの `.navbar .navbar-brand.logo`（overlay用の白文字）と詳細度が同点になり、
   読み込み順（hero.cssが後）で負けてしまうため、.navbarを足して詳細度を上げている */
.site-header--framed .navbar .navbar-brand.logo,
.site-header--framed .nav-link,
.site-header--split .navbar .navbar-brand.logo,
.site-header--split .nav-link {
  color: var(--color-text-dark);
  text-shadow: none;
}

.site-header--framed .navbar-toggler,
.site-header--split .navbar-toggler {
  border-color: var(--color-border);
}

.site-header--framed .navbar-toggler-icon,
.site-header--split .navbar-toggler-icon {
  filter: none;
}

/* ヘッダーが固定になった分、コンテンツが隠れないよう本文側に余白を確保。
   hero--framedは元々余白のあるデザイン（枠取り）なのでセクション自体にpadding-topでよいが、
   hero--splitに同じ手法を使うと、背景色が無いセクション本体の余白部分だけ地の色が
   帯状に見えてしまう（2026-08-30、パン工房むぎでの指摘）。hero--split側は
   hero-text-col/hero-img-col（css/sections/hero/hero-b.css）側で個別にpadding-topを
   持たせ、各カラムの背景をヘッダーの裏まで伸ばす方式にする */
.hero--framed {
  padding-top: 64px;
}

/* =====================
   バッジ・ボタン（hero / event などで共用）
===================== */
.custom-badge {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: 0.4em 1.5em;
  border-radius: var(--radius-badge);
  font-weight: normal;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.0;
}

.custom-btn {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: 0.4em 2.5em;
  border-radius: var(--radius-badge);
  border: none;
  transition: opacity 0.3s;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.0;
  cursor: pointer;
}

.custom-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 0.8;
}

/* =====================
   CTA ボタン
   -----------------------------------------------------------
   .btn-cta            塗りつぶし（primary）
   .btn-cta--outline   アウトライン
   .btn-cta--line      LINE グリーン
   .btn-cta--wide      横幅いっぱい
===================== */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.75em 2.5em;
  border-radius: var(--radius-badge);
  border: 2px solid var(--color-primary);
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, opacity 0.25s;
}
.btn-cta:hover {
  opacity: 0.8;
  color: var(--color-white);
}

.btn-cta--outline {
  background-color: transparent;
  color: var(--color-primary);
}
.btn-cta--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

.btn-cta--line {
  background-color: #06C755;
  border-color: #06C755;
  color: #fff;
}
.btn-cta--line:hover {
  background-color: #05b34c;
  border-color: #05b34c;
  opacity: 1;
  color: #fff;
}

.btn-cta--wide {
  width: 100%;
  justify-content: center;
}

/* =====================
   写真トリミング形状ユーティリティ
   -----------------------------------------------------------
   9軸評価の「トリミング形状」に対応するクラス。--radius-card等の
   カード角丸とは独立して、写真1枚単位で丸か直角かを選べるようにする。
   使い方: <div class="menu-image crop-circle"> のように既存の画像枠に足すだけ。
===================== */
.crop-circle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.crop-square {
  border-radius: var(--radius-photo);
}

/* =====================
   人物写真プレースホルダー
   -----------------------------------------------------------
   スタッフ・お客様の声など「顔写真」枠のWF段階の仮画像。
   単なる#CCCCCCの塗りつぶしだと何が入るか伝わらないため、
   頭＋肩のシルエットをCSSのみ（画像ファイルなし）で表現する。
   使い方: 既存の円形写真枠に class="avatar-placeholder" を足すだけ
   （枠自体の大きさ・角丸は.staff-photo等、呼び出し側のクラスに任せる）
===================== */
.avatar-placeholder {
  position: relative;
  overflow: hidden;
  background: var(--color-border);
}

.avatar-placeholder::before,
.avatar-placeholder::after {
  content: '';
  position: absolute;
  left: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-text-muted);
  transform: translateX(-50%);
}

/* 頭 */
.avatar-placeholder::before {
  top: 18%;
  width: 38%;
}

/* 肩（円の下半分だけがoverflow: hiddenで見える＝肩の丸みになる） */
.avatar-placeholder::after {
  top: 58%;
  width: 90%;
}