@charset "utf-8";

/*═══════════════════════════════════════════════════════════════════════════════════════════════
   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　※英語版ホームページ編集用のCSS群はkano_style-en.cssで管理しています。
═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   生成AIへ、クラス付与に関する指示文です：
   ════════════════════════════════════════════════════════

【このファイルの役割】
WordPress 固定ページ（固定ページテンプレート使用時）の
コンテンツ領域に対してスタイルを当てるファイルです。
header / footer / nav のスタイルは kano_style-en.css が担当します。

【クラス優先ルール】
①ページ全体　　　：最外層を必ず .KoteiPage_Wrap でラップする（全コンテンツの親要素）
②ページタイトル　：h2 に .KoteiPage_Title を付与（ページの主タイトル）
③セクション見出し：h3 に .KoteiPage_SubTitle を付与（大きな話題の区切り）

④小見出し　　　　：h4 に .KoteiPage_SubTitle KoteiPage_SubTitle--sub を付与（項目・治療・機能単位）
※「1)」「2)」などの番号付き／治療名／strong強調語は見出し化する

⑤本文テキスト　　：すべての p タグに .KoteiPage_Text を付与（説明文・本文）

⑥リスト実装ルール：
箇条書き（ul）・番号付き（ol）は必ず <div class="Pg_TextBlock"> でラップすること。ul → Pg_InfoList／li → Pg_InfoList_Item を付与。ol の場合も同様にラップし、ul を ol に読み替える。li 直下への p タグ等の不要なネスト禁止。構造例：<div class="Pg_TextBlock"><ul class="Pg_InfoList"><li class="Pg_InfoList_Item">テキスト</li></ul></div>

⑦テーブル実装ルール：
使い分け：列が1列のみ → SingleTableシリーズ／複数列あり → 通常Tableシリーズ。必ずどちらかに統一すること。

【SingleTableシリーズ（1列専用）】
基本構造：<div class="KoteiPage_SingleTableWrap"> 内に <table class="KoteiPage_SingleTable"> を配置。thead に th、tbody に td を分離すること（nth-childカウントがずれるため tbody に th を入れることを禁止）。
クラス付与：ヘッダーセル → .KoteiPage_SingleTable_Head .KoteiPage_SingleTable_Head--accent／データセル → .KoteiPage_SingleTable_Data .KoteiPage_SingleTable_Data--accent（全行に必ず両クラスを付与）
スクロール：横スクロール機構を持たないため KoteiPage_TableWrap・style属性は一切不要。

【通常Tableシリーズ（複数列）】
基本構造：<div class="KoteiPage_TableWrap"> 内に <table class="KoteiPage_Table"> を配置。table タグに直接 style="min-width: auto !important; width: 100% !important;" を記述すること。
クラス付与：左端または上端の大見出しセル（2列目以降はアクセント不要でお願いします。） → .KoteiPage_Table_Head .KoteiPage_Table_Head--accent／中間の小見出しセル → .KoteiPage_Table_SubHead .KoteiPage_Table_SubHead--accent（縦コラム2段の時のみ採用）／データセル → .KoteiPage_Table_Data .KoteiPage_Table_Data--accent（全行に必ず両クラスを付与）

禁止事項【重要・両シリーズ共通】：セル（th, td）の直下にテキストを配置すること。内部を div や .KoteiPage_Table_Inner でラップすることは余白の不整合を招くため一切禁止。

════════════════════════════════════════════════════════════════════════════════════════════
【例外】
テーブル内で1個のセルに画像とテキストが同時混入してる場合は、以下のHTMLを、複数画像＋キャプションの横スクロールテーブル構成に変換してください。

【必須ルール】
- ラッパー：class="KoteiPage_TableWrap" に style="overflow-x:auto!important; overflow-y:visible!important; -webkit-overflow-scrolling:touch!important; margin-bottom:30px;"
- テーブル：class="KoteiPage_Table" に style="table-layout:auto!important; width:auto!important; border-collapse:collapse!important; white-space:nowrap!important;"
- 画像セルtd：style="vertical-align:top!important; padding:10px!important; box-sizing:border-box!important;"　※width指定なし
- aタグ：style="display:block!important; line-height:0!important;"
- imgタグ：style="height:__px!important; width:auto!important; max-width:none!important; display:block!important; border:1px solid #eee!important;"
- キャプションtd：style="padding:10px!important; text-align:center!important; vertical-align:top!important; word-break:break-word!important; white-space:normal!important; font-size:0.9em!important; line-height:1.4!important;"

【削除するもの】
Pg_HeroBox / Pg_HeroShade / Pg_HeroLink / Pg_HeroImg クラスとその div 構造
table-layout:fixed / width:100% / min-width on table
width:50%・33.3% on td / img の width:100%

【height の目安】術前後写真=150px、CT・図解=200px、3列手順=150px

上記ルールをそのまま適用し、コード全文を省略なく出力してください。
════════════════════════════════════════════════════════════════════════════════════════════

⑧画像（最重要）　：必ず以下の構造に変換する（img単体・p内配置は禁止）
<div class="Pg_HeroBox">
<a href="画像パス" class="Pg_HeroLink">
<img class="Pg_HeroImg" 
src="画像パス" 
alt="">
</a>
<div class="Pg_HeroShade"></div>
</div>

⑨複数枚の写真が横並びしている際に使う：.Pg_Herogrid-2、.Pg_Herogrid-3などを用いる

【禁止事項】
* gapプロパティ使用禁止
* 不要なposition指定禁止
* レイアウトはFlexboxまたはGridで構築
* 中央寄せは原則としてflexまたはtransformで対応
* z-indexは最小限に抑える

════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   【修正】固定ページ：メイン・サイドバー横並びレイアウト
   769px以上でフレックス横並び、768px以下は縦積み
══════════════════════════════════════════════ */

@media screen and (min-width: 769px) {
  .contents.subpage .contents_inner {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    padding: 20px;
  }

  .contents.subpage .main_column {
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
	padding-left: 20px;
  }

  .contents.subpage .side_column {
    flex: 0 0 320px;
    width: 190px;
    max-width: 200px;
    padding: 10px;
    background: linear-gradient(
      135deg,
      #8a6518 0%,
      #d9b75d 28%,
      #fff3b0 48%,
      #c89b32 68%,
      #7d5a12 100%
    );
    background-size: 220% 220%;
    border: 1px solid rgba(255, 239, 171, 0.85);
    box-shadow: 0 18px 38px rgba(3, 35, 24, 0.22);
    animation: subpageGoldShine 7s ease-in-out infinite;
    box-sizing: border-box;
    order: 1;
    /* [新規追加] コンテンツの高さだけに収める */
    align-self: flex-start;
  }
}

@keyframes subpageGoldShine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media screen and (max-width: 768px) {
  .contents.subpage .contents_inner {
    /* [修正] 縦積みに変更・order 指定を削除 */
    display: flex;
    flex-direction: column;
  }

  .contents.subpage .main_column {
    /* [修正] 2 → 1（コンテンツを上に） */
    order: 1;
    margin-left: 0;
  }

  .contents.subpage .side_column {
    /* [修正] order: 2 を明示追加（サイドバーを下に） */
    order: 2;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    background: linear-gradient(
      135deg,
      #8a6518 0%,
      #d9b75d 28%,
      #fff3b0 48%,
      #c89b32 68%,
      #7d5a12 100%
    );
    background-size: 220% 220%;
    border: 1px solid rgba(255, 239, 171, 0.85);
    box-shadow: 0 8px 18px rgba(3, 35, 24, 0.12);
    animation: subpageGoldShine 7s ease-in-out infinite;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════════
   固定ページ用のCSS
══════════════════════════════════════════════ */

/* 固定ページの外側余白は KoteiPage_Wrap が担当 */
.KoteiPage_Wrap {
  margin: 20px !important;        /* 四方 20px を維持 */
  padding: 20px !important;       /* 内側も 20px */
  box-shadow: none !important;
  box-sizing: border-box;
}
/* entry-content / post-content は余白を持たせない（競合防止） */
.entry-content,
.post-content {
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
/* ── ページタイトルとそれを覆う額縁のデザイン */
.KoteiPage_Title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: #0d4427;
  display: inline-block;
  border-left: 5px solid #c9a84c;
  background-color: rgba(13, 68, 39, 0.07);
  padding: 10px 24px 10px 16px;
  margin: 32px 0 36px 0;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
/* ── サブタイトル */
.KoteiPage_SubTitle {
	font-size: 16px;
	font-weight: 700;
	color: #1a6b3c;
	border-bottom: 2px solid #c9a84c;
	margin-top: 40px !important;
	margin-bottom: 20px;
	position: relative;
}
/* [新規追加] 2個目のサブ見出し黄色の下線部スタイル調整 */
.KoteiPage_SubTitle.KoteiPage_SubTitle--sub {
  display: inline-block;          /* ← 要素幅を文字の長さに合わせる */
  border-bottom: 2px solid #c9a84c;
  padding-bottom: 2px;
  margin-bottom: 20px;
}
/* ── 本文テキスト */
.KoteiPage_Text {
  font-size: 14px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 16px;
}
/* もう使わないで */
.KoteiPage_InfoList {
  list-style: none;
  margin: 0 0 32px;
  padding: 20px 24px;
  background: #f8f5ef;
  border-left: 4px solid #1a6b3c;
  border-radius: 0 6px 6px 0;
}/* もう使わないで */
.KoteiPage_InfoList_Item {
  font-size: 14px;
  line-height: 1.8;
  color: #1c1c1c;
  padding: 4px 0;
  border-bottom: 1px solid #e8e8e4;
}/* もう使わないで */
.KoteiPage_InfoList_Item:last-child {
  border-bottom: none;
}

/* 電話番号リンク */
.KoteiPage_Tel {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a6b3c;
  text-decoration: none;
  border-bottom: 1.5px solid #3daa68;
}
.KoteiPage_Tel:hover {
  color: #0d4427;
}

/* ══════════════════════════════════════════════
   テーブル用のCSS
══════════════════════════════════════════════ */

.KoteiPage_TableWrap {
   width: 100%;
   margin: 24px 0 32px 0;
   padding: 0;
   box-sizing: border-box;
   overflow-x: auto;
   overflow-y: hidden;
   border-radius: 6px;
   box-shadow: 0 2px 16px rgba(0,0,0,0.07);
 }

.KoteiPage_Table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0;
}

/* [新規追加] Wrap内のTableのみ：コンテンツ幅依存でスクロール制御 */
.KoteiPage_TableWrap .KoteiPage_Table {
  min-width: 0;
  table-layout: auto;
  white-space: normal;
}

/* 左端の大見出しセル */
.KoteiPage_Table_Head {
  background: linear-gradient(135deg, #0d4427, #2d8a52);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}
.KoteiPage_Table_Head p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* 中間の小見出しセル（修正版） */
.KoteiPage_Table_SubHead {
  background: #f0f8f3;
  color: #1a6b3c;
  font-size: 12px;
  font-weight: 600;
  padding: 12px 16px;
  text-align: center;
  vertical-align: middle;
  /* border-leftを削除し、内側へのシャドウで対応 */
  border-left: none !important; 
  box-shadow: inset 3px 0 0 0 #c9a84c !important;
  border-bottom: 1px solid #e8e8e4;
  width: 160px;
}

/* 中間の小見出しセル（楯列に表示するための差分デザイン） */
  .KoteiPage_Table_VerticalSubHead {
  background: #f0f8f3;
  color: #1a6b3c;
  font-size: 12px;
  font-weight: 600;
  padding: 12px 16px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #e8e8e4;
  width: 160px;
}

/* データセル */
.KoteiPage_Table_Data {
  padding: 12px 16px;
  text-align: center;
  vertical-align: middle;
  color: #1c1c1c;
  background: #fff;
  border-bottom: 1px solid #e8e8e4;
  font-weight: 500;
}

/* [新規追加] tbody内の縦区切り線・全KoteiPage_Tableに自動適用。　　タグで複数列ある際に境界線を入れるデザイン。　　用途：複数列で列間の境界を明示したい場合 */
.KoteiPage_Table tbody .KoteiPage_Table_Data + .KoteiPage_Table_Data,
.KoteiPage_Table tbody .KoteiPage_Table_SubHead + .KoteiPage_Table_Data,
.KoteiPage_Table tbody .KoteiPage_Table_SubHead + .KoteiPage_Table_SubHead {
  box-shadow: inset 1px 0 0 0 #d6ccb0;
}

/* ============================================
   5月14日に新しく追加（複数列のあるテーブルの視認性を強化するコードたち）
   ============================================ */

/* [新規追加] _Data：偶数行クリーム背景 */
.KoteiPage_Table tbody tr:nth-child(even) .KoteiPage_Table_Data {
  background-color: #ece5d6;
}

/* [新規追加] _SubHead：偶数行クリーム背景 */
.KoteiPage_Table tbody tr:nth-child(even) .KoteiPage_Table_SubHead {
  background-color: #e6f2eb;
}

/* [新規追加] _Data：最終行ボーダーなし */
.KoteiPage_Table tbody tr:last-child .KoteiPage_Table_Data {
  border-bottom: none;
}

/* [新規追加] _SubHead：最終行ボーダーなし */
.KoteiPage_Table tbody tr:last-child .KoteiPage_Table_SubHead {
  border-bottom: none;
}

/* [新規追加] _Head：最終行ボーダーなし */
.KoteiPage_Table tbody tr:last-child .KoteiPage_Table_Head {
  border-bottom: none;
}

/* [新規追加] アクセントバリアント：_Head にゴールド左ボーダー */
.KoteiPage_Table_Head--accent {
  border-left: 4px solid #c9a84c !important;
}

/* [新規追加] アクセントバリアント：_SubHead にゴールド左ボーダー強調 */
.KoteiPage_Table_SubHead--accent {
  box-shadow: inset 4px 0 0 0 #c9a84c !important;
}

/* [新規追加] アクセントバリアント：_Data にゴールド左ボーダー */
.KoteiPage_Table_Data--accent {
  border-left: 4px solid #e2d2a8 !important;
}

/* ══════════════════════════════════════════════
   1列しかないテーブル専用のCSS [5月13日に新規追加] 
══════════════════════════════════════════════ */

/* [外枠のくくり] ラッパー：スクロールなし・角丸ボーダー */
.KoteiPage_SingleTableWrap {
width: fit-content;    /* 親要素も中身の幅に合わせる */
    max-width: 100%;       /* ただし画面幅は超えないようにする */
  margin: 24px 0 32px 0;
  box-sizing: border-box;
  border: 1px solid #e2d2a8;
  border-radius: 8px;
  overflow: hidden;
}

/* テーブル本体 */
.KoteiPage_SingleTable {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  box-sizing: border-box;
  display: table;
  overflow: visible;
  white-space: normal;
  min-width: 0;
  margin: 0;
}

/* [背景色] ヘッダーセル：ダークグリーン・白文字 */
.KoteiPage_SingleTable_Head {
  background-color: #1a5c35;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
  border: none;
  line-height: 1.5;
}

/* [強調効果] アクセントラインバリアント（ゴールド左ボーダー付き） */
.KoteiPage_SingleTable_Head--accent {
  border-left: 4px solid #c9a84c;
}

/* データセル */
.KoteiPage_SingleTable_Data {
  padding: 14px 16px;
  font-size: 14px;
  color: #333333;
  background-color: #ffffff;
  border-bottom: 1px solid #e2d2a8;
  vertical-align: top;
  line-height: 1.6;
  box-sizing: border-box;
}

/* [背景色] データセル：偶数行はクリーム色の背景より明確に濃いトーンに変更 */
.KoteiPage_SingleTable tbody tr:nth-child(even) .KoteiPage_SingleTable_Data {
  background-color: #ece5d6;
}

/* データセル：最終行はボーダーなし */
.KoteiPage_SingleTable tbody tr:last-child .KoteiPage_SingleTable_Data {
  border-bottom: none;
}

/* [強調効果] アクセントラインバリアント：データセル左ボーダー */
.KoteiPage_SingleTable_Data--accent {
  border-left: 4px solid #e2d2a8;
}

/* ══════════════════════════════════════════════
   ごあいさつ用のCSS
══════════════════════════════════════════════ */

/* ヒーロー画像 */
.Pg_HeroBox {
  position: relative;
  width: 100% !important;
  max-width: 1500px !important;
  margin-left: auto !important;     /* 中央寄せに変更（左の浮き解消） */
  margin-right: auto !important;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 32px;
  /* 白い枠・背景・影を徹底的に除去 */
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.Pg_HeroImg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  max-height: 450px !important;           /* 少し高さを増やして見栄えを良く */
  object-fit: contain;
  object-position: center top;
}

/* [5月15日に新規追加] 画像を左寄せにする場合。キャプションある場合は、それらテキストを各 Pg_HeroBox 内の Pg_HeroShade 直後に移動させると連帯可能 */
.Pg_HeroLink {
  display: block;
  width: fit-content;
  margin-right: auto;
}

.Pg_HeroShade {
  display: none !important;    /* これで確実に非表示 */
}

/* ================================================== 複数枚の画像を並べたい場合にいようするクラス（グリッド６までレスポンシブ対応可能） ================================================== */
.Pg_Herogrid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-right: 8px;
	width: 100%;
}
.Pg_Herogrid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-right: 8px;
	width: 100%;
}
.Pg_Herogrid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-right: 8px;
	width: 100%;
}
.Pg_Herogrid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-right: 8px;
	width: 100%;
}
.Pg_Herogrid-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-right: 8px;
	width: 100%;
}
/* ======================================================================================================================================================================================= */

/* リード見出し */
.Pg_Lead {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.45;
  color: #0d4427;
  background: #f8f5ef;
  border-left: 6px solid #c9a84c;
  padding: 20px 24px;
  margin: 0 0 32px 0;
  border-radius: 0 6px 6px 0;
  width: 100%;
  box-sizing: border-box;
}

/* 本文ブロック */
.Pg_TextBlock {
  width: 100%;
  padding: 0 20px;              /* 本文も左右余白を少し確保 */
  box-sizing: border-box;
}

.Pg_Para {
  font-size: 16.5px !important;
  line-height: 2.0 !important;
  color: #333333;
  margin-bottom: 28px !important;
  padding-bottom: 24px;
  border-bottom: 1px solid #e8e4de;
}

.Pg_Para:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* キーワード強調 */
.Pg_Kw {
  font-weight: 700;
  color: #1a6b3c;
}

/* 　　　　　　　　　　　　　　　↓黄色い下線部を入れる際を命令文
  border-bottom: 2px solid #c9a84c;
  padding-bottom: 2px;
*/

/* 署名 */
.Pg_Sign {
  text-align: right;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0d4427;
  margin-top: 40px;
  padding-top: 24px;
  line-height: 1.7;
  padding-right: 20px;           /* 署名も右寄せに合わせて余白 */
}

.Pg_SignRole {
  display: block;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: #666666;
  margin-top: 6px;
}

/* ══════════════════════════════════════════════
　　　　　==================== 病院沿革（History）テーブル ====================
══════════════════════════════════════════════ */

.Pg_HistoryTableWrap {
  width: 100%;                    /* 親要素いっぱいに広げる */
  max-width: 1500px;              /* 最大1500pxまで拡大 */
  margin: 40px 20px 40px 20px;    /* 上下余白 + 中央寄せ */
  padding: 0 20px;                /* 左右20pxのマージン（paddingで確保） */
  box-sizing: border-box;
  overflow-x: auto;               /* 狭い画面では横スクロール */
}

.Pg_HistoryTable {
  width: 100%;
  min-width: 1050px;                    /* 最低幅を確保して崩れ防止 */
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.75;
　　　　　　　　　　　/* テーブル全体に立体感のある影を追加（特に下側を強調） */
  box-shadow: 0 4px 15px rgba(13, 68, 39, 0.08),
              0 10px 30px rgba(13, 68, 39, 0.12),
              0 20px 40px rgba(0, 0, 0, 0.06);
}

.Pg_HistoryTable th,
.Pg_HistoryTable td {
  padding: 18px 20px;
  vertical-align: top;
  border-bottom: 1px solid #e8e4de;
}

/* 年号部分（左列） */
.Pg_HistoryTable th {
  width: 140px;
  background: linear-gradient(135deg, #0d4427, #2d8a52);
  color: #ffffff;
  font-weight: 700;
  font-size: 15.5px;
  text-align: center;
  white-space: nowrap;
  border-right: 4px solid #c9a84c;
}

/* 本文部分（中央列） */
.Pg_HistoryTable td {
  color: #333;
}

/* 画像部分（右列） */
.Pg_HistoryTable td.Pg_HistoryImage {
  width: 380px;                         /* ← ここを大幅に拡大（約5倍相当） */
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid #e8e4de;
  background: #f8f5ef;
}

/* テーブル内の画像サイズ制御（重要） */
.Pg_HistoryTable td.Pg_HistoryImage img {
  width: auto !important;              /* ← ここが重要：親の幅いっぱいに拡大 */
  height: auto !important;
  max-width: 100% !important;      /* 親の幅を超えないようにする */
  max-height: 420px;                    /* 上限を解除 */
  object-fit: contain;
  border-radius: 8px;
}

/* 最後の行はボーダーを消す */
.Pg_HistoryTable tr:last-child td,
.Pg_HistoryTable tr:last-child th {
  border-bottom: none;
}

/* ══════════════════════════════════════════════
   病院紹介ページのCSS
══════════════════════════════════════════════ */

/* 認定証画像の外枠 */
.Pg_HeroBox.accreditation-img {
  text-align: center;
  margin: 40px auto;
}

/* 認定証画像そのもの */
.Pg_HeroBox.accreditation-img .accreditation-img-item {
  width: 100% !important;
  max-width: 600px !important; /* ← 好きな大きさに調整 */
  height: auto !important;
  max-height: none !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 12px;
}

/* ── Pg_InfoList 下マージン統一（リストと次段落の余白確保） */
.Pg_InfoList {
  margin-bottom: 24px;
  margin-left: 1em; /* 左側に全角1文字分の外側余白を追加 */
}

/* ── セクション区切り用 Para（Specialized Centers 等） */
.Pg_Para.Pg_Para--section {
  margin-top: 32px !important;
  border-top: 1px solid #e8e4de;
  padding-top: 20px;
}

/* ── ギャラリー画像（2枚横並び） max-height を HeroImg と統一 */
.Pg_GalleryImg {
  width: auto;
  max-width: 100%;
  max-height: 400px;        /* HeroImg と同値に統一 */
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
}

/* ギャラリー横並びレイアウト */
.Pg_ImageGallery {
  display: grid;
  grid-template-columns: auto auto;   /* [修正] 1fr 1fr → auto auto */
  grid-template-rows: auto;
  justify-content: center;             /* [修正] グリッド全体を左寄せ */
  column-gap: 16px;                   /* [新規追加] 画像間の隙間を16pxに統一 */
  align-items: start;
}

/* ══════════════════════════════════════════════
   お問い合わせ固定ページのCSS
══════════════════════════════════════════════ */

/* [修正] 固定幅inline-blockをtext-align:centerで中央に置く */
.KoteiPage_Table_Data--left {
  text-align: center !important;    /* [修正] centerのまま維持 */
}

.KoteiPage_Table_Data--left .KoteiPage_Table_Inner {
  display: inline-block;            /* [修正] blockに戻さずinline-blockを維持 */
  text-align: left;
  width: 400px;                     /* [修正] 全行共通の固定幅（最長行に合わせる） */
}


/* ══════════════════════════════════════════════
   診察担当医票の外来診療スケジュールテーブル専用スタイル
══════════════════════════════════════════════ */

.KoteiPage_ScheduleTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}

.KoteiPage_ScheduleTable th,
.KoteiPage_ScheduleTable td {
  padding: 12px 10px;
  border: 1px solid #e8e4de;
  vertical-align: middle;
  text-align: center;
}

.KoteiPage_ScheduleTable th {
  background: linear-gradient(135deg, #0d4427, #2d8a52);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}

/* 時間帯背景 */
.gray1 {
  background-color: #f0f8f3 !important;
  font-weight: 600;
  color: #1a6b3c;
  padding: 5px;
}

.gray2 {
  background-color: #faf9f6 !important;
  font-weight: 500;
  padding: 5px;
}

/* 時間表示セル */
.time {
  background-color: #fff9e6 !important;
  font-weight: 600;
  color: #c9a84c;
  min-width: 110px;
  padding: 5px;
}

/* 医師名セル */
.KoteiPage_ScheduleTable td {
  color: #1c1c1c;
  padding: 5px;
}

/* sup注釈 */
.KoteiPage_ScheduleTable sup {
  font-size: 0.75em;
  color: #d35400;
  font-weight: 500;
}

/* =============================================
   診療科一覧への誘導リンクUI（Cardiology以降も確実に動作）
============================================= */

.KoteiPage_DepartmentList {
  list-style: none;
  padding: 0;
  margin: 32px 0 40px 0;
  display: flex;
  flex-wrap: wrap;
}

.KoteiPage_DepartmentList li {
  width: 25%;
  padding: 0 12px 16px 0;     /* 右と下に余白 */
  box-sizing: border-box;
}

.KoteiPage_DepartmentLink {
  display: block;
  padding: 16px 18px;
  background: #f8f5ef;
  border-left: 5px solid #c9a84c;
  color: #1a6b3c;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 0 6px 6px 0;
  transition: all 0.25s ease;
  box-sizing: border-box;
  text-align: left;
  min-height: 58px;
  line-height: 1.4;
}

.KoteiPage_DepartmentLink:hover {
  background: #1a6b3c;
  color: #ffffff;
  border-left-color: #c9a84c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 107, 60, 0.15);
}

/* ══════════════════════════════════════════════
   外来受診方法のブロックリンク（誘導リンク）用CSS
══════════════════════════════════════════════ */

.KoteiPage_BlockLink {
  margin: 32px 0 40px 0;
}

.KoteiPage_BlockLink li {
  margin-bottom: 12px;
}

/* テーブル内の small タグ調整 */
.KoteiPage_Table small {
  font-size: 0.85em;
  color: #666;
}

/* =============================================
   診療時間専用リスト（dl/dt/dd）
============================================= */
.KoteiPage_HoursList {
  width: 100%;
  margin: 24px 0 32px 0;
  padding: 0;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.KoteiPage_HoursList dt {
  background: linear-gradient(135deg, #0d4427, #2d8a52);
  color: #fff;
  font-weight: 700;
  padding: 16px 20px;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.KoteiPage_HoursList dd {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e4de;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.KoteiPage_HoursList dd:last-child {
  border-bottom: none;
}

.KoteiPage_HoursList strong {
  color: #1a6b3c;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   セカンドオピニオン外来ページ用追加スタイルCSS
══════════════════════════════════════════════ */

/* 番号付きリスト（ol）をInfoList風に整える */
.KoteiPage_InfoList ol {
  list-style-type: decimal;
  padding-left: 20px;
  margin: 16px 0 24px 0;
}

.KoteiPage_InfoList li {
  padding: 4px 0;
}

/* 赤文字の強調（病院の特徴紹介用） */
.Pg_Para span[style*="color: #ff0000"] {
  color: #e63939;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   Frequently Asked Questions用のCSS
══════════════════════════════════════════════ */

/* --- FAQ Section Styles --- */

/* タイトル横のヒントテキスト */
.faq_hint {
    font-size: 0.5em;
    vertical-align: middle;
    color: #666;
    margin-left: 10px;
    font-weight: normal;
}

/* FAQリストのコンテナ（上下の余白調整） */
.faq_list {
    margin: 20px 0 40px;
}

/* 各質問の親要素（details） */
.faq_item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* 開いている状態のスタイル */
.faq_item[open] {
    border-color: #006b3d; /* 病院のキーカラー */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 質問部分（summary） */
.faq_question {
    padding: 15px 50px 15px 20px;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* デフォルトの矢印を非表示 */
    position: relative;
    background-color: #fcfcfc;
    color: #333;
    transition: background-color 0.2s;
}

.faq_question:hover {
    background-color: #f3f7f4;
}

/* ブラウザ標準の矢印を消す（Safari等） */
.faq_question::-webkit-details-marker {
    display: none;
}

/* 右側のプラスアイコン（疑似要素） */
.faq_question::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid #006b3d;
    border-bottom: 2px solid #006b3d;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s;
}

/* 開いた時に矢印を回転させる */
.faq_item[open] .faq_question::after {
    transform: translateY(-30%) rotate(-135deg);
}

/* 回答部分（div） */
.faq_answer {
    padding: 20px;
    border-top: 1px solid #eee;
    background-color: #fff;
    line-height: 1.8;
}

.faq_answer p {
    margin-bottom: 1em;
}

.faq_answer p:last-child {
    margin-bottom: 0;
}

/* セクションラベル（For Female Patients 等） */
.faq_section_label {
    font-size: 1.25rem;
    font-weight: bold;
    color: #d9333f; /* 女性向けセクションのアクセントカラー */
    border-left: 4px solid #d9333f;
    padding-left: 15px;
    margin: 60px 0 20px;
}

/* お問い合わせセクション */
.faq_contact {
    margin-top: 60px;
    padding: 30px;
    background-color: #f8faf9;
    border-radius: 8px;
    border: 1px solid #e8edea;
}

.faq_contact_title {
    margin-top: 0 !important;
    color: #006b3d !important;
}

/* 電話番号リンク */
.faq_contact a[href^="tel:"] {
    font-weight: bold;
    color: #006b3d;
    text-decoration: none;
}

/* フォームボタンの調整（.arrowクラスが既存にある場合を想定） */
.faq_contact .arrow {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    background-color: #006b3d;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.faq_contact .arrow:hover {
    opacity: 0.8;
}

/* スマホ閲覧時の調整 */
@media screen and (max-width: 767px) {
    .faq_question {
        padding: 12px 40px 12px 15px;
        font-size: 0.95rem;
    }
    .faq_answer {
        padding: 15px;
        font-size: 0.9rem;
    }
}

/* ══════════════════════════════════════════════
   お問い合わせフォーム用のCSS
══════════════════════════════════════════════ */

/* ── td内コンテンツ：ブロックは中央・テキストは左揃え */
.KoteiPage_Table_Inner {
  display: inline-block;
  text-align: left;
  min-width: 220px;
}

/* ── フォームリンク */
.KoteiPage_FormLink {
  display: inline-flex; /* flexに変更 */
  align-items: center;  /* 垂直方向中央揃え */
  justify-content: center; /* 横方向も中央寄せ */
  font-size: 14px;
  font-weight: 600;
  color: #1a6b3c;
  text-decoration: none;
  padding: 6px 12px;
  margin-bottom: 6px;
  background: #f0f8f3;
  border: 1px solid #b5ddc4;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  margin-right: 6px; /* ▶ と文字の間隔 */
}

.KoteiPage_FormLink::before {
  content: '▶';
  font-size: 10px;
  color: #c9a84c;
  display: inline-block; /* flex不要 */
  line-height: 1; /* 高さをテキストに合わせる */
}

.KoteiPage_FormLink:hover {
  background: #1a6b3c;
  color: #fff;
  border-color: #1a6b3c;
}

.KoteiPage_FormLink:hover::before {
  color: #c9a84c;
}

/* ── 注釈テキスト */
.KoteiPage_Note {
  font-size: 13px;
  line-height: 1.8;
  color: #666;
  margin-top: 16px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: #faf9f6;
  border-left: 3px solid #c9a84c;
  border-radius: 0 4px 4px 0;
}

/* =====================================
   ▼ Contact Form 7：スマホ専用UI調整
   対象：.CF7_Wrap 内のフォーム
   768px以下で入力欄・ラベル・送信ボタンを大きくする
===================================== */
@media screen and (max-width: 768px) {

  /* フォーム全体の外枠 */
  .CF7_Wrap {
    width: calc(100% - 24px) !important;
    max-width: none !important;

    margin: 24px auto 40px auto !important;
    padding: 24px 16px !important;

    background: #f8f5ef !important;
    border-top: 4px solid #c9a84c !important;
    border-radius: 8px !important;

    box-sizing: border-box !important;
  }

  /* Contact Form 7 本体 */
  .CF7_Wrap .wpcf7,
  .CF7_Wrap form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 各入力項目のまとまり */
  .CF7_Wrap p,
  .CF7_Wrap .form-row,
  .CF7_Wrap .wpcf7-form-control-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
  }

  /* ラベル文字 */
  .CF7_Wrap label {
    display: block !important;
    width: 100% !important;

    margin-bottom: 7px !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: #1a6b3c !important;
  }

  /* Required バッジ */
  .CF7_Wrap .required,
  .CF7_Wrap .Required,
  .CF7_Wrap .must,
  .CF7_Wrap .wpcf7-required {
    display: inline-block !important;

    margin-left: 8px !important;
    padding: 3px 7px !important;

    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    background: #c9a84c !important;
    border-radius: 4px !important;

    vertical-align: middle !important;
  }

  /* テキスト入力欄・メール・電話番号など */
  .CF7_Wrap input[type="text"],
  .CF7_Wrap input[type="email"],
  .CF7_Wrap input[type="tel"],
  .CF7_Wrap input[type="url"],
  .CF7_Wrap input[type="number"],
  .CF7_Wrap input[type="date"],
  .CF7_Wrap select {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;

    padding: 12px 14px !important;

    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #1c1c1c !important;

    background: #ffffff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  /* 複数行テキスト */
  .CF7_Wrap textarea {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 160px !important;

    padding: 12px 14px !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #1c1c1c !important;

    background: #ffffff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
    resize: vertical !important;
  }

  /* 入力中の見た目 */
  .CF7_Wrap input:focus,
  .CF7_Wrap select:focus,
  .CF7_Wrap textarea:focus {
    outline: none !important;
    border-color: #c9a84c !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.22) !important;
  }

  /* 送信ボタン */
  .CF7_Wrap input[type="submit"],
  .CF7_Wrap button[type="submit"] {
    display: block !important;

    width: 100% !important;
    min-height: 52px !important;

    margin-top: 10px !important;
    padding: 14px 18px !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    color: #ffffff !important;
    background: #1a6b3c !important;
    border: none !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  /* 送信ボタン押下時 */
  .CF7_Wrap input[type="submit"]:active,
  .CF7_Wrap button[type="submit"]:active {
    background: #0d4427 !important;
  }

  /* エラー・注意メッセージ */
  .CF7_Wrap .wpcf7-not-valid-tip,
  .CF7_Wrap .wpcf7-response-output {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}