@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 トークン = 現行 takeuchi-naika.sicapita.com の配信CSS（_incoming/takeuchinaika/css/style.css）実測
2. サイト固有の上書き・追加スタイルはこのファイルの末尾に書く（親テーマの assets/css/ は編集禁止）
※ 色コード直書き禁止 — 本文・部品側は必ず var(--c-*) を参照する

【実測根拠（docs/11 §3）】
・メイン紺 #223b7c …… 出現42箇所（.top-clinicInfo_txtColor 等の主要トークン位置で確認）
・サブ青 #187fc4 ……… 出現31箇所（アクセント系統）
・帯 …………………… .top-main section奇数=白 / 偶数=#ecf2fa（淡青） / .footer-cta=#ecf2fa
・見出しフォント …… "Noto Serif JP", serif（明朝 — config heading_font 'noto-serif' と揃える）
--------------------------------------------------------------*/

/*--------------------------------------------------------------
##カラー設定
--------------------------------------------------------------*/
:root {
	/* 1. 見出しフォント（config heading_font 'noto-serif' と必ず揃える） */
	--font-heading: "Noto Serif JP", serif;
	/* 2. テキストカラー（現行実測 #191c1f — キット標準と同値） */
	--c-text: #191c1f;
	/* 3. 背景色 */
	--c-bg: #ffffff;
	/* 4. メインカラー（現行実測の紺） */
	--c-main: #223b7c;
	--c-main-rgb: 34, 59, 124;
	/* 5. サブカラー（現行実測の青） */
	--c-sub: #187fc4;
	--c-sub-rgb: 24, 127, 196;
	/* 6. トップセクションの帯（現行: 奇数=白・偶数=淡青） */
	--c-top-section01: #ffffff;
	--c-top-section02: #ecf2fa;
	/* 7. CTA帯の背景（現行 .footer-cta 実測） */
	--c-cta-bg: #ecf2fa;
}

/*--------------------------------------------------------------
##サイト固有の追加スタイル（ここから下に書く）
--------------------------------------------------------------*/

/* ---- MV背景写真（№7: blur(15px)+opacity0.2でしか見えないため640幅14KBのwebp極小版に — 視覚不変・-179KB） ---- */
.top-mv_bgPhoto {
	background: url(../img/site/top-mv_photo_blurbase.webp) no-repeat center;
	background-size: cover;
}

/* ==== 見た目揃え（2026-09-14 — docs/11 §3b）: 移植元 takeuchi-naika.sicapita.com 配信CSSとの
   ルール単位диff（783規則中 missing22＋相違40）から、キット標準の意図的変更（メニュー刷新・
   矢印リンク文法等）とタイポ死にルールを除いた実差分を忠実再現。色は必ずトークン参照 ==== */

/* -- 下層コンテナ・共通部品（移植元は #ecf2fa=S02 をボックス色に使用・マーカーは黄） -- */
/* №4: PC=160px上（固定ヘッダー分）・SP/タブ=移植元の 120px 15px 60px 15px を正しくスコープ
   （§3b初版は無スコープで書いたためキットのSP左右15pxを打ち消し、左端切れを起こしていた） */
.base-container { padding: 160px 0 90px 0; }
@media only screen and (max-width: 1199px) {
	.base-container { padding: 120px 15px 60px 15px; }
}
.parts-txt--marker { background: rgba(244, 196, 66, 0.2); }
.parts-table_td--title,
.parts-table_td--titleCenter,
.parts-table_td--titleRight,
.parts-schedule_td--title { background-color: var(--c-top-section02); }
.parts-box--siteColor,
.parts-box--2clmSiteColor { background: var(--c-top-section02); }
.parts-box--singlePage img { margin-top: 15px; }
.sidebar-box--siteColor { background: var(--c-top-section02); }
@media only screen and (max-width: 1199px) {
	.sidebar { background: var(--c-top-section02); }
}

/* -- MV（03新世代の実測値: 明朝・サイズ・余白・info枠の丸み/罫線・▶リンク） -- */
.top-mv_catchAreaCatchCopy { font-size: 30px; font-weight: bold; font-family: var(--font-heading); line-height: 155%; }
@media only screen and (min-width: 1920px) {
	.top-mv_catchAreaCatchCopy { font-size: 46px; }
}
.top-mv_catchAreaSubCatchCopy { font-family: var(--font-heading); }
@media print, screen and (min-width: 1200px) {
	.top-mv_catchAreaInner { padding: 20px 0 30px 0; }
}
.top-mv_btnArea { margin-top: 20px; }
.top-mv_btnBox--full { width: 100%; } /* №3: margin-top:0 は移植元の死にルール（タイポ）の巻き込みだった → 既定10pxに戻し電話ボタン上の間隔を確保 */
/* №6: SPでは親top-03.cssが --full の margin を0にしており電話ボタンが密着（族CSSの世代遺物）→ 上10pxを確保【親還元候補】 */
@media only screen and (max-width: 767px) {
	.top-mv_btnBox--full { margin: 10px 0 0; }
}

/* №5: SP・タブ（≤1199px）のサイドバー整理 — たかのはし№120/121と同判断。
   この帯域ではサイドバーがコンテンツ下に全幅で落ち、フッター（サイトマップ・電話・予約）と重複するため、
   通常ページは全体を、ブログ系ページはサイトマップ＋連絡ボタン一式（.sidebar_siteNav）を非表示
   （新着・カテゴリ・月別のブログ用ウィジェットは維持） */
@media only screen and (max-width: 1199px) {
	.sidebar--page { display: none; }
	.sidebar--blog .sidebar_siteNav { display: none; }
}
.top-mv_infoAreaWrap { padding: 30px 90px 30px 0; }
@media only screen and (max-width: 1199px) and (min-width: 768px) {
	.top-mv_infoAreaWrap { padding: 30px 30px 30px 0; }
}
@media only screen and (max-width: 1199px) {
	.top-mv_infoArea { width: auto; border-radius: 0 80px 0 0; }
}
@media only screen and (max-width: 767px) {
	.top-mv_infoAreaWrap { padding: 15px 15px 30px 15px; }
	.top-mv_infoAreaBox { border-top: solid 2px var(--c-top-section02); }
}
@media only screen and (min-width: 768px) {
	/* №16: 仕切り線の色太さ移植（2px S02）を≥768にスコープ — 無スコープだと親のSP用 border-left:0 を後勝ちで打ち消し、SPのアクセスボタン左に縦線が出る（№4と同型の巻き込み） */
	.top-mv_infoAreaBox { border-left: solid 2px var(--c-top-section02); }
}
.top-mv_infoAreaLink { font-weight: bold; font-family: var(--font-heading); }
.top-mv_infoAreaLinkArw:after { content: "▶"; color: var(--c-sub); top: 50%; }

/* -- MVフォトエリアの実写真（PC/SP出し分け — 移植元。ぼかし背景の上に載る鮮明パネル） -- */
@media only screen and (min-width: 768px) {
	.top-mv_photoArea { background: url(../img/site/top-mv_photo_pc.webp) center no-repeat; background-size: cover; }
}
@media only screen and (max-width: 767px) {
	.top-mv_photoArea { background: url(../img/site/top-mv_photo_sp.webp) center no-repeat; background-size: cover; }
}

/* -- トップナビ・重要なお知らせ（明朝化） -- */
@media print, screen and (min-width: 1200px) {
	.top-txtNav_item { font-family: var(--font-heading); }
}
.top-infomation_title { font-weight: bold; font-family: var(--font-heading); }
.top-main { position: relative; }

/* -- 2枠ブログ（top-blog 新世代 — 移植元実装。白カード・太罫見出し・日付サブ色） -- */
.top-blog_item { background: #ffffff; }
.top-blog_list { width: 100%; }
.top-blog_heading03 { font-size: 24px; font-family: var(--font-heading); font-weight: bold; border-bottom: solid 8px var(--c-main); padding-bottom: 10px; text-align: center; }
.top-blog_heading03--subColor { border-bottom-color: var(--c-sub); }
.top-blog_itemDate { color: var(--c-sub); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; padding-right: 15px; }
@media only screen and (min-width: 768px) {
	.top-blog_wrap { display: flex; }
	.top-blog_item { display: flex; align-items: center; }
	.top-blog_itemDate { min-width: 120px; }
	.top-blog_box--double { width: calc((100% - 30px) / 2); margin-left: 30px; }
	.top-blog_box--double:nth-child(odd) { margin-left: 0; }
}
@media only screen and (max-width: 767px) {
	.top-blog_heading03 { font-size: 20px; }
	.top-blog_box--double:nth-child(n+2) { margin-top: 30px; }
}

/* -- フッター（最下段は白帯。サイトマップ行の上下は台帳№2で引き締め: 移植元60/90→30/30） -- */
@media print, screen and (min-width: 1200px) {
	.footer-sitemap_inner { padding: 30px 0; }
}
.footer-clinicInfo { background: #ffffff; }

/* -- 台帳№8: 「見出し＋詳しく見る」カードの間隔（/service/ 一覧） --
   キットの等高化拡張（parts-column_item:has() → parts-linkBtn{margin-top:auto}）が
   移植元の基本間隔 .parts-linkBtn{margin-top:15px} を吸収し見出しとボタンが密着していた。
   ボタン下揃えはユーザー確認で維持とし、ボタン直前要素側に最低15pxを確保する。
   【親還元候補】等高化№1拡張の共通欠陥（全キットサイトで密着するはず）— 次サイトで再発したら親style.cssへ */
.parts-column_item:has(> .parts-box > .parts-linkBtn) > .parts-box > :has(+ .parts-linkBtn) {
	margin-bottom: 15px;
}

/* -- 台帳№9: SPヘッダー左切れの正体 = 本文の素の .parts-table（/service/ 担当医表・8列） --
   内容最小幅がSP可用幅345pxを超えページ全体を横に押し広げ、横スクロールすると全体が左に切れて見えた。
   キット標準は parts-table_wrap で包む運用だが本文rawテーブルは未包のため、表自身を表内スクロールに封じる。
   tbodyは display:table + min-width:max-content でセルの字割れを防ぎ、狭い表では width:100% で従来どおり伸びる。
   【親還元候補】素のparts-table防御として親へ */
@media only screen and (max-width: 767px) {
	.base-article .parts-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.base-article .parts-table > tbody {
		display: table;
		width: 100%;
		min-width: max-content;
		background: #ffffff;
	}
}

/* -- 台帳№11: LINE予約ボタンのアイコンを☆→白LINEへ --
   族汎用の --extra（icon_extra-white.svg=☆）は「LINEらしくない」ため、専用クラスを子で新設。
   形状は親snsicon_line.svg（公式LINE吹き出し）由来の白モノクロ版。使用箇所=MV・全画面メニュー（mv-03/nav-03）。
   【親還元候補】line_url機構（親v1.3.28）に--lineアイコンごと標準化（nav-02のLINE予約が--extraのままの点も併せて） */
.top-common_btnIcon--line {
	background: url(../img/site/icon_line-white.svg) left center no-repeat;
}

/* -- 台帳№12: サイドバー（下層ページ右メニュー）のWEB予約ボタンにアイコン --
   電話ボタンは親№118で受話器アイコン付きに統一済みだがWEB予約は取りこぼしでアイコン無しだった。
   親sidebar.phpの丸写し上書きは保守が重いため、::before疑似要素で電話と同じ「文字に寄り添う地球アイコン」を再現
   （24×24=電話アイコンの実測と同寸・負マージンで行嵩を打ち消しボタン高54px維持・アイコンは親icon_web-white.svgの子コピー）。
   【親還元候補】本筋は親sidebar.phpのWEB予約に top-common_btnIcon--contact span を追加（№118の対の完了）— 還元時はこのルールを削除すること */
.sidebar-link_btn--subColor::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: -4px 11px -4px 0;
	vertical-align: middle;
	background: url(../img/site/icon_web-white.svg) center/contain no-repeat;
}
