@charset "UTF-8";
/*! Copyright (c) 2026 株式会社メディウィル（Mediwill Inc.） All rights reserved. 弊社が制作・運用するサイト専用。無断複製・再配布・他サイトへの転用を禁じます。 / Proprietary — no redistribution or reuse without written permission. https://www.mediwill.co.jp/ */
/*--------------------------------------------------------------
★たかのはし歯科クリニック サイト個別CSS
1. :root トークン = 現行サイト takanohashi.css（Shift_JIS・B-1）から抽出した現行色調
2. サイト固有の上書き・追加スタイルはこのファイルの末尾に書く
   （親テーマの assets/css/ は共通のため編集禁止。共通不具合はベーステーマへ還元）
※ 色コード直書き禁止 — 本文・部品側のCSSは必ず var(--c-*) を参照する

【抽出根拠（現行 takanohashi.css の実測 — 詳細は docs/04 §1b）】
現行CSS冒頭の配色宣言:  #669933 green ／ #99cc33 light green ／ #ff9933 orange
・メイン緑 #669933 …… 配色宣言の筆頭。h2(archive-title)のアクセント罫。リンク #339900・
                        見出し #669900・ヘッダー上罫 #99cc33 は同系の派生（現行mask-icon色も #99cc33）
・サブ橙 #ff9933 ……… 配色宣言の3色目。リンクhover #ff9933・h4見出し #FE8205・
                        ブログ日付 #EE5A00 のオレンジ系アクセントの代表値
・文字色 …………………… 現行bodyは文字色指定なし（ブラウザ既定黒）→ 黒系踏襲としてキット標準 #191c1f
・背景色 #ffffff ……… 現行bodyの明示指定を踏襲
・トップ帯 ……………… 現行に帯概念なし（コンテンツ背景=白）→ S01=メイン緑の淡色（キット標準形）/ S02=白
【トークン化しない現行補助色（P4でサイト固有調整に使う場合はここに追記）】
・#99cc33（light green: 現行ヘッダー上罫・mask-icon）・#ffffcc / #FFFEE3（淡黄: 現行メニュー背景・診療表セル）
・ロゴ内の水色 #3399cc（ロゴ固有色のためトークン対象外）
--------------------------------------------------------------*/

/*--------------------------------------------------------------
##カラー設定（旧 _variable.scss の設定項目に対応）
--------------------------------------------------------------*/
:root {
	/* 1. 見出しフォント
	   config の heading_font プリセットと必ず揃える:
	   'noto-sans' → "Noto Sans JP", sans-serif（暫定02の標準 — C-7バリアント確定時に見直し） */
	--font-heading: "Noto Sans JP", sans-serif;
	/* 2. テキストカラー（現行は指定なし=既定黒 → キット標準の黒系） */
	--c-text: #191c1f;
	/* 3. 背景色（body — 現行踏襲） */
	--c-bg: #ffffff;
	/* 4. メインカラー（現行宣言の green） */
	--c-main: #669933;
	/* 5. メインカラーのRGB値（半透明 rgba(var(--c-main-rgb), .07) 等で使用） */
	--c-main-rgb: 102, 153, 51;
	/* 6. サブカラー（現行宣言の orange — 現行のアクセント系統） */
	--c-sub: #ff9933;
	/* 7. サブカラーのRGB値（マーカー rgba(var(--c-sub-rgb), .2) で使用） */
	--c-sub-rgb: 255, 153, 51;
	/* 8. トップセクションの帯背景（top-main の奇数/偶数セクション）
	   №28（2026-08-17）: 淡緑 → クリーム系（紙色）へ。山本の偶数帯 rgba(235,226,213,.5) と同系の実績値。
	   S02=白は MVカード（.top-mvContents）と共用のため変更しない */
	--c-top-section01: rgba(235, 226, 213, 0.5);
	--c-top-section02: #fff;
	/* 9. CTA帯の背景（footer-cta / footer-clinicInfo — №28でセクション帯と同じクリームに統一） */
	--c-cta-bg: rgba(235, 226, 213, 0.5);
}

/*--------------------------------------------------------------
##サイト固有の追加スタイル（ここから下に書く）
P3時点では追加なし — P4の入稿・実表示確認で必要になった最小限の調整のみ追記する方針
（例: English/Tagalog表記の掲出部品用スタイル・現行補助色 #99cc33 の使用など）
--------------------------------------------------------------*/

/* ---- MV英文サブキャッチの装飾（調整№9・2026-08-15） ---- */
.top-mvContents_txt--subcatch {
	color: var(--c-main);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin-bottom: 14px;
}
@media only screen and (max-width: 767px) {
	.top-mvContents_txt--subcatch {
		font-size: 14px;
	}
}

/* ---- 旧サイトの葉飾り: 白エリアの左端から覗く配置（調整№10→№11→№13→№15・2026-08-17）
   №15: 旧サイトの葉は leaf.gif＋ロゴ画像に焼き込まれた「続きの葉」で1つの構図だったと判明 →
   続き葉を旧CSS座標(葉-157px/ロゴ0px)で合成した完全版 deco-leaf_02.png(187x185) に差し替え。
   また PC幅1200〜1919 はロゴが左50pxに来てカード左端の葉と重なる（№13の見立て誤り）ため、
   旧サイト同様「ロゴの背後に葉が回り込む」レイヤーへ変更（isolation＋z-index:-1） ---- */
.top-mvContents {
	isolation: isolate; /* 負のz-indexの葉をカード白背景より前面に保つ文脈固定 */
}
.top-mvContents_head {
	z-index: -2; /* 空の白帯（親top-02.css）。葉(-1)より背面に置き、白帯にかかる茎を従来どおり見せる */
}
.top-mvContents::before {
	content: "";
	position: absolute;
	top: -24px;
	left: 0;
	z-index: -1;
	width: 180px;
	height: 178px;
	background: url(../img/site/deco-leaf_02.png) no-repeat left top / contain;
	pointer-events: none;
}
@media only screen and (max-width: 1199px) {
	.top-mvContents::before {
		width: 144px;
		height: 142px;
		top: -16px;
	}
}
@media only screen and (max-width: 767px) {
	.top-mvContents::before {
		width: 86px;
		height: 85px;
		top: -8px;
	}
}

/* ---- サイドバー: 院長ブログ誘導（調整№22→№24・2026-08-17）
   №24①: バナーは列幅いっぱい・最大320px・中央寄せ（SP/タブレットの小ささ解消。画像は2倍解像度392x176に更新）
   №24③: バナー下は最新投稿日のみ（タイトル非表示） ---- */
.sidebar-blogBnr .sidebar-bnr_img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.sidebar-blogLatest {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}
.sidebar-blogLatest_date {
	color: var(--c-main);
	font-weight: bold;
}

/* ---- 電話付近の English/Tagalog 表記（調整№31・2026-08-18）
   旧サイトの国旗付き表記（flag_uk/flag_pp）を全電話箇所へ。色は文脈継承（緑フッター内では白文字） ---- */
.site-telNote {
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1.4;
}
.site-telNote img {
	width: 18px;
	height: auto;
	vertical-align: -2px;
	display: inline-block;
}
/* 本文内に置く国旗（№42 — /clinic/ 医院の特徴カードの見出し等。tel-noteと同寸・見出し内でも揃うようベースライン調整） */
.site-flagInline {
	width: 18px;
	height: auto;
	vertical-align: -1px;
	display: inline-block;
}
.top-mvContents_btnBox .site-telNote,
.footer-cta_box .site-telNote {
	text-align: center;
}

/* ---- フッターの締まり（調整№29・2026-08-17 → 08-18 B案本採用）
   A案(#E9F3D3)は他所の薄緑（ブログ行 rgba(main,.07) 等）と同系明度で差が弱い、との指摘②を受け
   メイン緑ベタ＋白文字へ。青ロゴの視認性問題は CSS フィルタの白抜き化で解決（画像追加なし）。
   CTA帯（--c-cta-bg）はクリームのまま ---- */
.footer-clinicInfo {
	background: var(--c-main);
	color: #fff;
}
.footer-clinicInfo_logoArea img {
	filter: brightness(0) invert(1); /* ロゴ白抜き */
}
.footer-clinicInfo_logoArea .site-telNote img {
	filter: none; /* №31の国旗は白抜き対象外（№29フィルタがロゴ枠内の国旗まで白にしていた不具合の修正 — 08-18） */
}

/* ---- トップご挨拶: 院長ブログ誘導バナーの配置（調整№25・2026-08-17 — セクション末尾に中央寄せ） ---- */
.top-intro .sidebar-blogBnr {
	max-width: 320px;
	margin: 30px auto 0;
}

/* ---- 本文の強調文字（調整№44・2026-08-18）
   parts-txt--siteColor（緑文字）が黒文字より目立たない指摘 → たかのはし全体で太字化。
   キット既定は変えない（あせい等の合流時の忠実再現を守るため子側で上書き） ---- */
.parts-txt--siteColor {
	font-weight: 700;
}

/* ---- カードの余白・メリハリ（調整№47・2026-08-18）
   旧レイアウト踏襲で「写真が小さい・余白が少ない・古臭い」との指摘 → 特徴カード等を高解像度写真＋
   交互2カラム型へ刷新（本文側）に合わせ、白カードの内側余白とカード間隔を確保。
   キット既定（padding:0）は変えない=あせい等の忠実再現を守るため子側で上書き ---- */
.parts-box--boxInnerPlane {
	padding: 24px 28px;
}
.parts-box--siteColor > .parts-box--boxInnerPlane + .parts-box--boxInnerPlane {
	margin-top: 24px;
}
.parts-box--boxInnerPlane .parts-column + .parts-column {
	margin-top: 20px;
}
@media only screen and (max-width: 767px) {
	.parts-box--boxInnerPlane {
		padding: 16px;
	}
}

/* ------------------------------
   №58: /price/ 緑帯キャプション写真ユニット（.site-priceUnits）
   カラム部品は左右の高さを揃える（flex stretch）ため、中の表を目一杯に広げ、
   余剰高さを写真セルへ集約（表レイアウトでは指定heightは最小高扱い）し
   写真をセル下端揃えに → キャプションが2行/3行でも写真の下端が揃う
   ------------------------------ */
.site-priceUnits .parts-table {
  flex: 1 1 auto;
}
.site-priceUnits .parts-table_th {
  height: 1px;
}
.site-priceUnits .parts-table_td {
  vertical-align: bottom;
}

/* ------------------------------
   №98: 英語テキストの折返し是正（族の基本は日本語向け word-break: break-all のため
   英単語が途中で分断される。英語を含む要素だけ単語単位の折返しに上書き）
   ------------------------------ */
.top-mvContents_txt--subcatch {
  word-break: normal;
  overflow-wrap: break-word;
}
.site-telNote {
  word-break: normal;
}
.site-telNote_item {
  white-space: nowrap;
}
/* №99: 区切り「/」廃止に伴う体裁 — PCは言語間に小さな間隔・SPは国旗ごと1行ずつ */
@media only screen and (min-width: 768px) {
  .site-telNote_item + .site-telNote_item {
    margin-left: 0.6em;
  }
}
@media only screen and (max-width: 767px) {
  .site-telNote_item {
    display: block;
  }
}

/* ------------------------------
   №120: 通常ページのサイドバーをSP・タブレット（1199px以下）で非表示
   — この帯域ではサイドバーがコンテンツ下に全幅で落ち、直後のフッター
   （サイトマップ・電話・お問い合せCTA）と完全に重複するため。
   ブログ系ページ（.sidebar--blog）は新着・カテゴリ・月別などフッターに無い
   機能を持つため維持
   ------------------------------ */
@media only screen and (max-width: 1199px) {
  .sidebar--page {
    display: none;
  }
  /* №121: ブログ系ページのサイドバーも、サイトマップ＋連絡ボタン一式はフッターと重複するため
     この帯域では非表示（新着・カテゴリ・月別のブログ用ウィジェットは維持） */
  .sidebar--blog .sidebar_siteNav {
    display: none;
  }
}

/* ------------------------------
   №127: ロゴ画像の内部余白トリミング（311x91→288x46・縦54%が透明余白だった）に伴う表示幅補正。
   係数0.926（=288/311）で全掲出箇所を補正し、見た目のロゴサイズは従来どおり・
   周囲の余白だけが実寸化される（№15の葉飾りはコンテナ左端アンカーのため無影響）
   ------------------------------ */
.top-mvContents_logo--imgLogoHorizontal {
  width: 278px;
}
@media only screen and (max-width: 1199px) and (min-width: 768px) {
  .top-mvContents_logo--imgLogoHorizontal {
    width: 370px;
  }
}
@media only screen and (max-width: 767px) {
  .top-mvContents_logo--imgLogoHorizontal {
    width: 259px; /* 旧280相当 — 旧SP値が別値の場合は下の実値に合わせ調整 */
  }
}
.header-logo_item--imgLogoHorizontal {
  width: 232px;
}
@media only screen and (max-width: 767px) {
  .header-logo_item--imgLogoHorizontal {
    width: 185px;
  }
}
.header-nav_logo--imgLogoHorizontal {
  width: 278px;
}
@media only screen and (max-width: 767px) {
  .header-nav_logo--imgLogoHorizontal {
    width: 259px;
  }
}
.footer-clinicInfo_logo--imgLogoHorizontal {
  width: 278px;
}
@media only screen and (max-width: 767px) {
  .footer-clinicInfo_logo--imgLogoHorizontal {
    width: 259px;
  }
}