@charset "UTF-8";
/*
 * ======================================
 * 沖浜デンタルクリニック サイト固有CSS（site.css）
 * ======================================
 *
 * 共通CSS（main.css）で再現できなかった差分のみをここに置く。
 * クラスはすべて `oki-` プレフィックス。
 * 配色・フォント・コンテナ幅など変数で吸収できるものは
 * scss-site/main.scss 側で上書き済み（ここには書かない）。
 *
 * ■ 元データ（claude-design-output/index.php）から解決した実数値
 *   コンテナ最大幅  … 1400px（ヘッダー・MV・診療時間・お電話・フッター 全て共通）
 *   セクション上下  … 78px+72px（診療時間）/ 0+84px（お電話）
 *                     / 96px+72px（MV左カラム）/ 56px+44px（フッター）/ 20px+20px（コピーライト行）
 *   左右padding    … 40px（全セクション共通。MV右カラムのみ 0 20px）
 *   基準gap        … 14px（ロゴ群）/ 22px（ヘッダーTELエリア）/ 9px（バッジ＋番号）
 *                     / 16px（見出しブロック・MV診療科目）/ 6px（MV3本線）
 *                     / 24px（お電話カード列・フッターTEL）/ 40px（フッター2カラム）
 *   カラム比率     … MV 520px:1fr / 診療時間表 210px:repeat(8,1fr)＝210px+86.25px×8（表幅900px）
 *                     / お電話 1fr:1fr / フッター 1fr:1fr
 *   行の高さ       … 表ヘッダー行 54px+罫線1px / 本文1行目 64px+罫線1px / 本文2行目 64px
 *                     ヘッダー 92px（border-bottom 1pxを含む）/ MV 620px（画像枠 580px）
 *   本文           … 16px / line-height normal / letter-spacing normal / #1F1D1B
 *   透過           … 元データに opacity / rgba の指定は1つも無い（全て不透明）
 *
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .oki-header ほか        - 高さ92px・下線1本のみの非固定ヘッダー（ロゴ＋英字＋TEL2本）
 * .oki-badge / --green / --orange / --blue
 *                         - pill型の小バッジ。header版とcard版で寸法が異なる
 * .oki-mv ほか            - 左テキスト520px固定＋右写真の2カラムMV（法人名・3色ライン×2・住所）
 * .oki-sec--schedule / --tel
 *                         - 背景 #FBF8F3 の連続2セクション（上下paddingが非対称）
 * .oki-heading ほか       - 中央寄せ・英字なし・日本語30pxのみのセクション見出し
 * .oki-hours-card / .oki-hours ほか
 *                         - 罫線なし・行区切りのみの診療時間表（.table-hours の値差分）
 * .oki-hours-note         - 休診日の1行注記
 * .oki-tel-grid / .oki-tel-card ほか
 *                         - 枠線2px・角丸16pxの電話カード（バッジ＋番号＋語呂）
 * .oki-map ほか           - 角丸なし・高さ460pxのGoogleMap埋め込み（.embed の値差分）
 * .oki-footer ほか        - 2カラム・右カラム padding-top 84px のフッター
 * .oki-footer-bottom ほか - 上罫線のみ・左寄せのコピーライト行
 * [data-fade]             - スクロールで12px下からフェードイン（JS有効時のみ）
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ■ 値の粒度不足
 *   - font-size: fz-* は 10/12/13/14/16/18/20/22/24/28/32/36/40… の刻みで、
 *     元データの 11 / 15 / 17 / 21 / 25 / 38 / 52px を出せない
 *   - gap: gap-* は 5/10/15/20/30/40/60 の刻みで、元データの 6 / 9 / 14 / 22 / 24px を出せない
 *   - 余白: mb-* / pt-* は5px刻みで、元データの 8 / 12 / 26 / 34 / 38 / 42 / 84px を出せない
 *   - 高さ: h-* は150px以上のみで、テーブル行の 54 / 64px を出せない
 *
 * ■ 指定方向不足
 *   - .section は上下padding前提で、元データのように上0・下84pxといった
 *     非対称なセクション余白を組めない（--pt0 / --half では刻みが合わない）
 *
 * ■ 状態不足
 *   - a:hover の opacity:0.8 が全リンクに掛かる。元データのように
 *     「hoverで背景色だけ変える／hoverで何も変えない」を素で作れず、
 *     打ち消しの hover 指定が毎回必要になる
 *
 * ■ 構造不足
 *   - .header__inner は高さ80px固定で、元データの92px＋下線1本という
 *     非固定ヘッダー（position:fixed でない header）の骨組みが無い
 *   - .heading は英字＋日本語の2段が前提で、日本語1行だけの
 *     中央寄せ見出し（英字を持たない構成）に素で対応していない
 *
 * ■ 装飾パターン不足
 *   - .table-hours は「全セル1px罫線＋ヘッダー行ベタ塗り」固定で、
 *     元データの「縦罫線なし・行区切り線のみ・ヘッダー行も白」を作れない
 *   - 色面を短い横棒で並べる看板由来のあしらい（46×6px / 60×4px×3色）に
 *     該当するパーツが無い
 *
 */

/* ==========================================================================
   ヘッダー
   元データ：max-width 1400 / height 92px / border-bottom 1px #E7E2DA
   ========================================================================== */
.oki-header {
  max-width: 1400px;
  height: 92px;          /* 元データは border-bottom 1px を含めて 92px */
  margin: 0 auto;
  border-bottom: 1px solid #E7E2DA;
}
.oki-header__inner {
  height: 100%;
}

/* ロゴ（画像 + 英字）：揃えは baseline、gap 14px
   ロゴはお客様作成・支給の name_1.png（1171×162px / 比 7.23:1・背景透過）。
   元データは高さ30px指定だったが、支給ロゴは枠線と左の緑帯を含むため
   30pxでは文字が19px相当まで落ちてヘッダー電話（25px）に負ける。
   元データの想定幅「約300px」に合わせて高さ40px（＝幅289px）とした。 */
.oki-header__logo {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.oki-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
.oki-header__logo:hover {
  opacity: 1;
}
.oki-header__en {
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.18em;
  color: #4BA31C;
}

/* 右側：フリーダイヤル / 代表TEL の2セット */
.oki-header__right {
  gap: 22px;
  height: auto;
}
.oki-header__tel-set {
  display: flex;
  align-items: center;
  gap: 9px;
}
.oki-header__badge {
  font-size: 11px;
  padding: 3px 10px;
  letter-spacing: 0.06em;
}
.oki-header__tel {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.01em;
}
.oki-header__tel--green,
.oki-header__tel--green:hover { color: #4BA31C; opacity: 1; }
.oki-header__tel--orange,
.oki-header__tel--orange:hover { color: #E76746; opacity: 1; }
.oki-header__tel--blue,
.oki-header__tel--blue:hover { color: #2E9BC9; opacity: 1; }

/* ==========================================================================
   バッジ（pill）
   元データ：radius 999px / 白文字 / bold。寸法は header版・card版で異なる
   ========================================================================== */
.oki-badge {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  line-height: normal;
  border-radius: 999px;
}
.oki-badge--green  { background: #4BA31C; }
.oki-badge--orange { background: #E76746; }
.oki-badge--blue   { background: #2E9BC9; }

/* ==========================================================================
   メインビジュアル
   元データ：grid 520px 1fr / min-height 620px
   ========================================================================== */
.oki-mv__inner {
  display: grid;
  grid-template-columns: 520px 1fr;
  min-height: 620px;
}
.oki-mv__body {
  padding: 96px 48px 72px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 法人名（お客様修正指示で追加）。フッターの .oki-footer__corp と同じ扱い
   （Noto Sans JP・補助色）で、医院名より一段弱く置く */
.oki-mv__corp {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #6B6660;
}
.oki-mv__ttl {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.03em;
  color: #1F1D1B;
  margin: 0 0 26px;
}
.oki-mv__subject {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.oki-mv__subject-txt {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.1em;
  color: #3B3833;
}
.oki-mv__stripes {
  display: flex;
  gap: 6px;
}
.oki-mv__stripe {
  display: block;
  width: 60px;
  height: 4px;
}
.oki-mv__stripe--orange { background: #E76746; }
.oki-mv__stripe--blue   { background: #2E9BC9; }
.oki-mv__stripe--green  { background: #4BA31C; }
/* 医院名の上に置く1組（お客様修正指示で緑1本バーから差し替え）。
   下の1組と同じ寸法・同じ並び順で、余白だけを持たせる */
.oki-mv__stripes--top { margin-bottom: 26px; }
.oki-mv__address {
  margin: 38px 0 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #6B6660;
}

/* 写真側：セル 620px − 上下padding 20px×2 ＝ 580px
   （CMSスライダー差し替え後も外枠の高さを保つため #slideshow に実数値を持たせる） */
.oki-mv__visual {
  position: relative;
  padding: 20px 20px 20px 0;
}
.oki-mv__slideshow {
  width: 100%;
  height: 580px;
  overflow: hidden;
}
.oki-mv__slide {
  width: 100%;
  height: 100%;
}
/* 支給 MV-2.png は 1449×1086px（比 1.334:1）で表示枠 860×580px（1.483:1）に近く、
   cover での切り落ちは縦10%（109px／上下55pxずつ）に収まる。
   ガラスに入った医院名・電話番号・診療時間はすべて枠内に残るため、
   表示位置は既定の中央のままでよい（object-position の指定は不要）。 */
.oki-mv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   セクション（診療時間 / お電話）
   元データ：どちらも背景 #FBF8F3。上下paddingが非対称なので個別指定
   ========================================================================== */
.oki-sec--schedule {
  background: #FBF8F3;
  padding: 78px 40px 72px;
}
.oki-sec--tel {
  background: #FBF8F3;
  padding: 0 40px 84px;
}

/* ==========================================================================
   セクション見出し（英字なし・日本語のみ・中央寄せ）
   ========================================================================== */
.oki-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin-bottom: 42px;
}
.oki-heading__ja {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #1F1D1B;
  margin: 0;
}

/* ==========================================================================
   診療時間表
   元データ：白カード（radius16 / border1px / padding 8px 32px 20px / max-w 900）
            表は縦罫線なし・行区切り線のみ。ラベル列 210px、他8列は均等（78px）
   ========================================================================== */
/* 元データのカードは box-sizing:border-box を持たないため、max-width:900px は
   「表の幅」を指す。カード外寸は 900 + padding 32×2 + border 1×2 ＝ 966px。 */
.oki-hours-card {
  max-width: 966px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #E7E2DA;
  border-radius: 16px;
  padding: 8px 32px 20px;
}

/* 元データは grid の行に border-bottom を足した分だけ行が高くなる（55/65/64px）。
   collapse だと罫線が行高に吸収されて2px縮むため、separate ＋ content-box で合わせる。 */
.oki-hours {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
}
/* 共通CSS（.table-hours）の罫線・余白・背景を解除する */
.oki-hours th,
.oki-hours td {
  box-sizing: content-box;
  padding: 0;
  border: 0;
  background: transparent;
}
.oki-hours thead th {
  height: 54px;
  background: transparent;
  color: #1F1D1B;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid #DED8CE;
}
.oki-hours tbody th,
.oki-hours tbody td {
  height: 64px;
  background: transparent;
  font-weight: 700;
  min-width: 0;
}
.oki-hours tbody tr:first-child th,
.oki-hours tbody tr:first-child td {
  border-bottom: 1px solid #EFEAE1;
}

/* 左上のラベルセル */
.oki-hours .oki-hours__head {
  width: 210px;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.1em;
  color: #3B3833;
}
/* 曜日セル */
.oki-hours .oki-hours__day {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
}
.oki-hours .oki-hours__day--sun {
  color: #C4502F;
}
/* 時間帯ラベルセル */
.oki-hours .oki-hours__time {
  text-align: left;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.04em;
  color: #1F1D1B;
  white-space: nowrap;
}
/* ○ / × セル */
.oki-hours .oki-hours__mark {
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
.oki-hours .is-open   { color: #4BA31C; font-weight: 400; }
.oki-hours .is-closed { color: #B9B2A7; font-weight: 400; }

.oki-hours-note {
  max-width: 900px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #3B3833;
}

/* ==========================================================================
   お電話（2枚のカード）
   元データ：grid 1fr 1fr / gap 24px / max-w 900px、枠線2px・radius16
   ========================================================================== */
.oki-tel-grid {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.oki-tel-card {
  display: block;
  border: 2px solid;
  border-radius: 16px;
  padding: 26px 30px;
  text-align: center;
  transition: background-color 0.3s ease;
}
.oki-tel-card:hover {
  opacity: 1;
}
.oki-tel-card--green         { border-color: #4BA31C; }
.oki-tel-card--green:hover   { background: #F3FAEE; }
.oki-tel-card--orange        { border-color: #E76746; }
.oki-tel-card--orange:hover  { background: #FDF3EF; }
.oki-tel-card--blue          { border-color: #2E9BC9; }
.oki-tel-card--blue:hover    { background: #EFF7FB; }

.oki-tel-card__badge {
  font-size: 12px;
  padding: 4px 14px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.oki-tel-card__num {
  display: block;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.oki-tel-card--green  .oki-tel-card__num { color: #4BA31C; }
.oki-tel-card--orange .oki-tel-card__num { color: #E76746; }
.oki-tel-card--blue   .oki-tel-card__num { color: #2E9BC9; }

.oki-tel-card__goro {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.1em;
}
.oki-tel-card--green  .oki-tel-card__goro { color: #4E7A33; }
.oki-tel-card--orange .oki-tel-card__goro { color: #A9503A; }
.oki-tel-card--blue   .oki-tel-card__goro { color: #256E8C; }

/* ==========================================================================
   アクセス（Google Map）
   元データ：角丸なし・全幅・高さ460px
   ========================================================================== */
.oki-map {
  background: #fff;
}
.oki-map__embed {
  height: 460px;
  border-radius: 0;
}

/* ==========================================================================
   フッター
   元データ：2カラム（1fr 1fr / gap 40px）。右カラムは padding-top 84px で
            左カラムの住所行と高さを合わせている
   ========================================================================== */
.oki-footer {
  background: #fff;
}
.oki-footer__inner {
  padding: 56px 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.oki-footer__name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.04em;
  color: #1F1D1B;
  margin-bottom: 8px;
}
.oki-footer__corp {
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #6B6660;
  margin-bottom: 20px;
}
.oki-footer__address {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #3B3833;
}
.oki-footer__tels {
  display: flex;
  gap: 24px;
  margin-top: 14px;
}
.oki-footer__tel {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
}
.oki-footer__tel--green,
.oki-footer__tel--green:hover { color: #4BA31C; opacity: 1; }
.oki-footer__tel--orange,
.oki-footer__tel--orange:hover { color: #E76746; opacity: 1; }
.oki-footer__tel--blue,
.oki-footer__tel--blue:hover { color: #2E9BC9; opacity: 1; }

.oki-footer__right {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #3B3833;
  padding-top: 84px;
}

.oki-footer-bottom {
  border-top: 1px solid #E7E2DA;
  padding: 0;
  text-align: left;
}
.oki-footer-bottom__inner {
  padding: 20px 40px;
}
.oki-copyright {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #8A857D;
}

/* ==========================================================================
   スクロールフェードイン（インタラクションレベル「低」）
   JSが有効なときだけ効かせる。JS無効時は最初から表示されたままになる。
   ========================================================================== */
.js [data-fade] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js [data-fade].is-visible {
  opacity: 1;
  transform: none;
}