@charset "UTF-8";
/* CSS Document */

/* ナビゲーションバー全体の余白（上下のパディング） */
.custom-navbar {
  padding-top: 30px !important;
  padding-bottom: 0px !important;
  background-color: #f5d6d3 !important; /* 背景色 */
}

/* ロゴ・ブランド名の文字サイズと色 */
.custom-navbar .navbar-brand {
  font-size: 24px;
  color: #ff5722 !important;
  margin-top: 0px;
}

/* メニュー全体の文字サイズと文字色 */
.custom-navbar .nav-link {
  font-size: 14px;
  color: #c87878 !important;
}

/* マウスホバーの文字色 */
.custom-navbar .nav-link:hover {
  color: #ffffff !important;
}

/* リンク同士の左右の間隔（余白） */
.custom-navbar .nav-item {
  margin-left: 15px;
  margin-right: 0px;
}

/* 画面幅がPCサイズ（992px以上）の時だけホバーで開閉させる */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* 位置の微調整（必要に応じて） */
  }
}

/* ドロップダウンメニュー全体の背景色と文字色 */
.custom-dropdown {
  background-color: #ffffff !important;
}

/* 各項目の文字色とホバー時の色 */
.custom-dropdown .dropdown-item {
  color: #c87878 !important;
}
.custom-dropdown .dropdown-item:hover,
.custom-dropdown .dropdown-item:focus {
  background-color: #c87878 !important;
  color: #ffffff !important;
}

/* 三角マークを消す */
.navbar .dropdown-toggle::after {
  display: none !important;
}

/* 💡 【新設】PCサイズ（992px以上）の時だけ、メニュー全体の塊を右に押し出す設定 */
@media (min-width: 992px) {
  .navbar-nav {
    /* 💡 左側に大きなマージン（余白）を作って、メニュー全体の塊を右側へグッと押し出します */
    margin-left: 19px;       /* 💡 この数字を大きくするとさらに右へ移動し、小さくすると左（ロゴ側）に戻ります */
  }
}

/* --- 【修正】navbar-brandの背景色とサイズ（スマホ対応化） --- */
.navbar .custom-brand {
	background-color: #eeafb2 !important;
	color: #000000 !important;
	/* 固定幅（width: 280px）を削除し、最大幅を設定して画面からはみ出さないようにする */
	width: 100%;
	max-width: 280px;
	height: 76px;
	/* 中央揃えから「右下揃え」に変更 */
	align-items: flex-end !important;
	justify-content: flex-end !important;
	padding-right: 0px; /* 右側に少し余白を作る */
	padding-bottom: 0px; /* 下側に少し余白を作る */
	/* 位置ズレの大きなマイナスマージンを廃止し、下揃えに最適化 */
	margin-top: -30px; /* パディング30pxを打ち消して上にくっつける */
	margin-left: -12px;
	margin-bottom: -3px;
	padding-top: 24px;
	padding-left: 30px;
}

/* ナビゲーションバーの下に3pxの白いラインを追加 */
.navbar {
  border-bottom: 3px solid #ffffff;
}

body {
	background-color: #f5d6d3 !important;
	padding-bottom: 0px;
	margin-right: 0px;
	right: 20px;
}

/* スマホ画面（991px以下）の時だけ、メニューを白ラインの下に浮かせる設定 */
@media (max-width: 991.98px) {
  #navbarNav {
    position: absolute !important;
    top: calc(100% + 3px);
    left: 0;
    width: 100%;
    z-index: 1050;
  }
}

/* スマホ画面（991px以下）の時だけ、トグルボタンの位置を少し上げる */
@media (max-width: 991.98px) {
  .navbar-toggler {
    transform: translateY(-10px); /* 💡 マイナスの数値で上に上がります */
  }
}

/* スマホ画面（991px以下）の時だけ、トグルボタンの背景色を変更する */
@media (max-width: 991.98px) {
  .navbar-toggler {
    background-color: #eeafb2 !important; /* 💡 背景色を eeafb2 に指定 */
    border-color: #eeafb2 !important;     /* 💡 枠線の色も同じにして馴染ませる */
  }
}

  /* 全体を包む大元の行：左右の縦の長さを同期させます */
  .main-flex-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important; /* 右側（お知らせ）の長さに合わせて、左の箱を床までびよーんと伸ばします */
    width: 100% !important;
  }

  /* 左ブロック：実体のある「280pxの箱」としてカチッと固定 */
  .main-left-block {
    width: 280px !important;
    max-width: 280px !important;    
    min-width: 280px !important;    
    flex: 0 0 280px !important;    
    box-sizing: border-box !important;
    background-color: #eeafb2 !important; /* 全体を埋める濃いピンクの背景色 */
  }

  /* 💡 2枚の画像が入っている箱（縦並びの自動クッション構造にします） */
  .leftpic {
    width: 100% !important;
    height: 100% !important;        /* 右側と同じ長さに100%同期 */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* 💡 複雑な絶対配置をやめ、縦に要素を並べるクッションレイアウトに変更 */
    display: flex !important;
    flex-direction: column !important;
  }

  /* 箱の中の2枚の画像共通設定（巨大化を100%防ぎます） */
  .leftpic img {
    width: 280px !important;        /* 画像の横幅を280pxに直接指定 */
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    flex-shrink: 0 !important;      /* 💡 縮められて画像が潰れるのを絶対に防ぐ設定 */
  }

  /* 💡 1枚目の画像（left01.jpg） */
  .leftpic img:first-child {
    /* 1枚目の画像の下に、自動で伸び縮みする「透明なクッション（余白）」を挟みます */
    margin-bottom: auto !important; 
    
    /* 💡 【セーフティ】お知らせが短いときに最低限あけたい2枚の間の隙間です */
    padding-bottom: 5px !important; 
  }

  /* 💡 2枚目の画像（left02.jpg / インスタ画像） */
  .leftpic img:last-child {
    margin-bottom: 0 !important;   /* フッターにピッタリ密着させます */
  }

/* --- 【追加】左側固定画像（left02.jpg）のリンクスポット設定 --- */
.leftpic {
  position: relative; /* 💡 リンクスポットをこのブロック基準で配置するために必須 */
}

.left-link-spot {
	position: absolute;
	z-index: 20; /* 念のため手前に来るように少し大きめの数値を設定 */
	/* 💡 画像の右下ぴったりに配置 */
	bottom: 2%;
	right: 10%;
	/* 💡 リンクのサイズ（％で調整してください） */
	width: 40%;  /* 横幅：画像全体の40%分の広さ */
	height: 135px; /* 縦幅：画像全体の25%分の広さ */
	/* background: rgba(255, 0, 0, 0.4); */
}

/* --- 【追加】スマホ版（991.98px以下）になった時の調整 --- */
@media (max-width: 991.98px) {
  .main-flex-row {
    flex-wrap: wrap !important; /* スマホでは必要に応じて折り返しを許可 */
  }
  .main-right-block {
    width: 100% !important;    /* スマホ画面いっぱいに広がりつつ自動縮小 */
  }
}

/* --- 【重要】スマホ版（991.98px以下）になった時の調整 --- */
@media (max-width: 991.98px) {
  .main-flex-row {
    flex-wrap: wrap !important;
    justify-content: center !important; 
  }
  .main-right-block {
    width: 100% !important;
    flex: 0 1 100% !important; 
    
    /* 💡 スマホ時は縦並び（スライドショーが上、吹き出しが下）にする設定 */
    display: flex !important;
    flex-direction: column !important; 
  }
  
  /* カルーセル（スライドショー本体）を上に配置 */
  .migipic {
    order: 1 !important;
  }
}

/* --- 📢 【新設】お知らせを自動で縦に積み重ねるための外枠（PC版） --- */
.osirase-list-wrapper {
  display: flex;
  flex-direction: column;      /* 中身を自動で綺麗に縦並びにする設定 */
  gap: 15px;                   /* 院長紹介・診療方針・受付時間の「箱同士の縦の隙間」 */
  width: 590px;                /* お知らせ全体の横幅 */
  margin-left: 25px;           /* 左ブロックからの程よい距離 */
  padding-top: 5px;            /* 全体を上に引き上げた調整数値 */
  box-sizing: border-box;
  padding-left: 0px;
  margin-bottom: 50px;
  
  height: auto !important;     /* 高さは自動でピタッと密着させつつ、 */
  min-height: 1380px;          /* 💡【新設】左の固定画像が綺麗に収まる「最低限の高さ」を確保してフッターの浮き上がりを完全に防ぎます */
}

/* ==========================================
   【PC版】院長紹介（incho）薄ピンク3段重ねスタイル（長さ完全一致版）
   ========================================== */
/* 外枠全体：背景色なし（完全に透明） */
.incho {
  display: flex !important;
  flex-direction: row !important; 
  align-items: flex-start !important; 
  gap: 25px !important;               /* 写真と右側3段ブロックとの間の隙間 */
  background: none !important; 
  border-radius: 0px !important;
  padding: 0px !important;     
  box-shadow: none !important;
  width: 117%;                 /* 下のお知らせブロックに横幅をぴったり揃えます */
  margin-bottom: 35px;         
}

/* 💡 【左】：写真ブロック（300px大サイズに固定。背景ピンクなし・写真単体） */
.incho-photo-block {
	flex-shrink: 0 !important;
	width: 300px !important;
	height: auto !important;
	background: none !important;
	padding: 0px !important;
	margin-left: 0px;
	margin-top: 10px;
}
.incho-photo-block img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px;         /* 写真の四隅を少し丸く */
  display: block !important;
}

/* 💡 【右】：経歴ブロック全体（外側の箱自体は色なしの透明にします） */
.incho-reki-block {
	flex: 1 !important;
	text-align: left !important;
	background: none !important; /* ここを透明にして、中身を3段の独立した箱に見せます */
	display: flex !important;
	flex-direction: column !important;
	margin-top: 10px;
	width: 270px;
}

/* 💡 【1段目】：院長紹介のタイトル帯
   ★【重要修正】2段目・3段目と完全に「横幅の長さ」を一致させ、文字を中央揃えにします */
.incho-page-title {
  display: block !important;       /* 💡 inline-blockやflexの縮小設定を完全に解除し100%幅に広げます */
  width: 100% !important;          /* 💡 これで2段目・3段目と右端の位置が完璧に揃います */
  box-sizing: border-box !important;
  
  background-color: #fdf0f0;       /* 薄ピンク背景 */
  color: #c87878;
  font-size: 15px;
  padding: 4px 30px;              /* 💡 上下の厚みをお名前の帯と揃えて統一感を出します */
  border-radius: 20px;             /* 💡 3段目の経歴表の箱と同じ「20px」の角丸に揃えて美しく重ねます */
  
  text-align: left !important;   /* 💡 横幅が広がったため、文字を完全に真ん中（センター）に配置します */
  margin-top: 0px !important;
  margin-bottom: 12px !important;  /* 2段目との間の隙間 */
  font-weight: normal;
}

/* 💡 【2段目】：お名前のボックス
   ★【重要修正】1段目・3段目と「角丸の滑らかさ」を綺麗にシンクロさせます */
.incho-name-box {
  display: flex !important;
  align-items: center !important;
  background-color: #fdf0f0;   
  border-radius: 20px;             /* 💡 角丸の滑らかさを「20px」に揃えて3枚のパネルの一体感を高めます */
  padding: 4px 30px;              /* 💡 左右の余白を3段目の経歴表と揃えます */
  margin-bottom: 12px !important;  /* 3段目との間の隙間 */
  width: 100% !important;          /* 100%幅で同じ長さ */
  box-sizing: border-box !important;
}

.incho-post {
  font-size: 15px;
  color: #c87878;
  font-weight: normal;
  letter-spacing: 0.5em;       
  margin-right: 30px;          
}

.incho-name {
  margin: 0;
  font-size: 18px;
  color: #c87878;
  font-weight: normal;
  letter-spacing: 0.2em;       
}

/* 💡 【3段目】：その他経歴部分の表が入る独立した箱（薄ピンク） */
.incho-table-box {
	background-color: #fdf0f0;
	border-radius: 20px;
	padding-top: 25px;
	padding-right: 25px;
	padding-left: 29px;
	padding-bottom: 25px;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* 新しいテキストリストのスタイル */
.history-text-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;                    /* 💡 詰めた行間を維持 */
}

/* 通常の文章行 */
.text-item {
	font-size: 12.5px;
	line-height: 1.3;            /* 💡 詰めた行間を維持 */
	color: #c87878;
	text-align: left;
}

/* 画像のように、特定の病院名などを少し右側に寄せるためのインデント設定 */
.text-item.indent-r {
	padding-left: 47px;
}

/* 「それから」「今に至ります」「専門は」「趣味は」などの繋ぎ文・補足文 */
.text-note {
	font-size: 13.5px;
	color: #c87878;
	margin: 2px 0;               /* 💡 詰めた隙間を維持 */
	text-align: left;
	padding-right: 25px;
}

/* ==========================================
   【スマホ版】院長紹介（incho）自動追従＆天地引き締め設定
   ========================================== */
@media (max-width: 991.98px) {
  
  /* 💡 院長紹介全体のスマホ設定：
     PC版の「横並び（row）」を解除し、下のお知らせボックスと同じ幅（90%幅）にカチッと完全に同期させます */
  .incho {
    flex-direction: column !important; /* スマホ時は写真を上、経歴を下に縦並び */
    align-items: center !important;
    width: 100% !important;            /* 親のwrapper（90%幅）に完全に同期 */
    max-width: 100% !important;
    padding: 0px !important;           /* 外枠の不要な余白をカット */
    gap: 15px !important;              /* 写真と3段の箱の間のちょうど良い縦隙間 */
    margin-bottom: 30px !important;
    background: none !important; 
  }

  /* スマホ版での写真ブロック（大きすぎず小さすぎない最適なサイズに縮小） */
  .incho-photo-block {
    width: 100% !important;        
    max-width: 180px !important;       /* 💡 スマホ時の院長写真の横幅制限（お好みで調整可） */
    margin-left: 0px !important;       /* PC版のズレ用マージンをリセット */
    margin-top: 15px !important;
  }

  /* スマホ版での経歴ブロック（3段の独立した箱の土台） */
  .incho-reki-block {
    width: 100% !important;
    margin-top: 0px !important;        /* PC版の10px設定をスマホ用にリセット */
    gap: 10px !important;              /* スマホ版での3つの箱同士の縦隙間 */
  }
  
  /* 1段目：院長紹介タイトル帯（スマホ最適化） */
  .incho-page-title {
    padding: 6px 20px !important;      /* スマホ用に天地の余白を少しスリムに */
    font-size: 13px !important;
    margin-bottom: 0px !important;     /* 箱同士の隙間は親のgapで制御するため0に */
    text-align: center !important;     /* スマホ版では文字を中央揃えにしてバランスを整えます */
    border-radius: 20px !important;
  }

  /* 2段目：お名前ボックス（スマホ最適化） */
  .incho-name-box {
    padding: 6px 20px !important;
    margin-bottom: 0px !important;
    justify-content: center !important; /* スマホ時はお名前を真ん中寄せに */
    border-radius: 20px !important;
  }

  .incho-name {
    font-size: 16px !important;
  }

  /* 3段目：経歴表ボックス（スマホ最適化） */
  .incho-table-box {
    padding: 30px 30px !important;     /* スマホ版の天地幅に合わせて内側余白を薄く引き締め */
    border-radius: 20px !important;
  }

  /* 表の各テキストのスマホ自動伸縮（画面が極端に狭くなっても文字が小さく追従します） */
  .history-item, .history-note {
    font-size: clamp(11px, 2.5vw, 13px) !important; 
  }

  /* 💡 【超重要】スマホ版でのマス目（固定幅）の微調整
     スマホの狭い画面幅に合わせて、和暦（50px）と月（32px）に最適化し、
     画面がどれだけ縮んでも「月」や「本文」の位置が1ミリも崩れないようにします */
  .history-item {
    grid-template-columns: 65px 42px 1fr !important; 
  }
  
  /* スマホ版の月テキストの微調整 */
  .history-month {
    padding-left: 2px !important;      /* 1桁月と2桁月の微細なブレをスマホ用に補正 */
  }
}

/* --- 📢 カルーセル・診療方針の外枠 --- */
.osirase-board {
	width: 565px !important;         /* 横幅を590pxに完全固定 */
	max-width: 100% !important;
	height: auto !important;         /* 高さを自動にして重なりを解消 */
	min-height: auto !important;
	box-sizing: border-box !important;
	position: relative !important;
	top: auto !important;            /* 位置の強制固定を解除 */
	margin-bottom: 20px !important;  /* 下の受付時間との間の隙間 */
	display: flex !important;
	flex-direction: column !important;
	margin-top: -90px;
}

/* イラスト画像を囲む箱 */
.osirase-top-img {
  position: relative;
  width: 100%;
  height: auto;
  left: 20px;                  /* イラストを少し右にずらすPC版設定 */
}
.osirase-top-img img {
	width: 25%;
	height: auto;
	display: block;
}

/* イラストの上の文字位置 */
.osirase-text {
	position: absolute;
	top: 79%;
	left: 12.5%;
	transform: translate(-50%, -50%);
	font-size: 16px;
	font-weight: normal;
	color: #c87878;
	white-space: nowrap;
}

/* 1段目のピンクのニュースボックス */
.osirase-news-container {
	background-color: #fdf0f0;
	border-radius: 20px;          /* 四隅すべて角丸 */
	padding-top: 10px;
	padding-right: 30px;
	padding-left: 20px;
	padding-bottom: 15px;
	box-sizing: border-box;
	width: 100%;
}
/* 1段目のイラスト付きボードの基本 終わり */

/* --- 💡 【重要】2段目以降のニュースボックス本体（自動で下に繋がります） --- */
.osirase-board2 {
	width: 117%;
	height: auto;
}

.osirase-news-container2 {
  background-color: #fdf0f0;    /* 薄ピンクの背景 */
  border-radius: 20px;          /* 四隅すべて角丸 */
  padding: 15px 25px;           /* 上下の文字余白 */
  box-sizing: border-box;
  width: 100%;                  
}

/* ニュース内の共通文字スタイル（1段目・2段目共通） */
.news-item, .news-item2 { width: 100%; }
.news-header, .news-header2 { display: flex; align-items: center; }
.news-date, .news-date2 { font-size: 12px; color: #c87878; font-family: sans-serif; }

.news-body, .news-body2 {
	margin-top: 2px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0;
	font-size: 13px;
	color: #c87878;
	line-height: 1.6;
	text-align: left;
	padding-left: 1em;           /* 1文字分右に移動 */
	padding-top: 6px;            /* 線と本文の間 */
}

/* --- ４段目：受付時間・医院概要カード --- */
.clinic-card {
	width: 505px !important;         /* カルーセルや外枠と完全に同じ幅に揃える */
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box !important;
	position: relative !important;
	top: auto !important;            /* position: absolute等による位置固定を強制解除 */
	margin-top: 0px !important;
	clear: both !important;
	margin-left: 160px;
}

/* 💡 【新設】上段の受付時間テーブルを包む独立した薄ピンクの箱 */
.schedule-box {
	background-color: #fdf0f0;  /* 薄ピンクの背景色 */
	border-radius: 20px;        /* 大きな綺麗な角丸 */
	padding: 10px 25px;
	box-sizing: border-box;
	margin-bottom: 12px;        /* 💡 下段のカプセル情報との間の隙間 */
	width: 90%;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
  color: #c87878;
}

/* 縦の線を無くし、上下の横ラインだけにする設定 */
.schedule-table th, 
.schedule-table td {
  border: none;
  padding: 3px 2px;
  font-weight: normal;
}
.schedule-table thead tr {
  border-bottom: 1px solid rgba(200, 120, 120, 1);
}
.schedule-table tbody tr {
  border-bottom: 1px solid rgba(200, 120, 120, 1);
}
.schedule-table td.time-label {
  text-align: left;
  padding-left: 5px;
  white-space: nowrap;
}
.schedule-table .ampm {
  margin-right: 4px;
}

/* テーブル下の注意書き（右寄せ） */
.schedule-notes {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  font-size: 12px;
  color: #c87878;
}

/* 💡 【新設・上書き】左上の「受付時間」の4文字だけを個別に左に動かす設定 */
.schedule-table th.bg-light-pink {
  text-align: left !important;  /* 💡 文字の配置を「左寄せ」にします */
  
  /* 👇【配置調整】ここの数字でお好みの位置に微調整します */
  padding-left: 50px !important; /* 💡 今よりもっと左に寄せたい場合は「0px」に、少し右に戻したい場合は「5px」などに数値を調整してください */
}

/* --- 下段：情報セクション（4行を並べるコンテナ） --- */
.info-section {
	display: flex;
	flex-direction: column;
	gap: 10px;                  /* 💡 カプセル同士の間の縦の隙間 */
	width: 90%;
}

/* 💡 【修正】各行ごとに独立した薄ピンクの角丸カプセル（白から薄ピンクに変更） */
.info-row {
  display: flex;
  align-items: center;
  background-color: #fdf0f0;  /* 💡 背景色を上のボックスと同じ薄ピンクに統一 */
  border-radius: 30px;        /* 綺麗に丸くなるカプセル型の角丸 */
  padding: 3px 25px;
  box-sizing: border-box;
  width: 100%;
}

/* 左側の見出しテキスト（文字だけの状態） */
.info-label-box {
	width: 85px;                /* 見出しの巾を固定して右側のはじまりの位置を100%揃える */
	color: #c87878;
	font-size: 14px;
	font-weight: normal;
	flex-shrink: 0;
}

/* 右側の中身テキスト */
.info-content {
  font-size: 15px;
  color: #c87878;
  line-height: 1.4;
}

.clinic-name, .tel-text {
	font-weight: normal;
	font-size: 16px;
}
.access-text {
  font-size: 13px;
}
/* --- ４段目：クリニックカード全体の土台（PC版）終わり --- */


/* ==========================================
   【お知らせ一覧ページ専用】スマホ版の自動追従設定
   ========================================== */
@media (max-width: 991.98px) {
  
  /* 1. お知らせ一覧全体の縦並びコンテナ（外枠） */
  .osirase-list-wrapper {
	order: 2 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(8px, 2vw, 15px) !important;
	/* 💡 画面幅に合わせて外枠自体を自動伸縮させます */
	width: 90% !important;         /* 画面の左右に10%分の遊び（余白）を作ります */
	max-width: 530px !important;   /* PC版のサイズよりは大きくならないように制限 */
	margin-top: 5px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;  /* スマホ版での上下の隙間・中央寄せ */
	padding-top: 0 !important;
  }

  /* 2. 1段目のイラスト付きボード */
  .osirase-board {
	width: 100% !important;        /* 💡 外枠の縮小（90%）に完全に同期させます */
	margin-top: -35px;
  }

  /* 1段目のイラスト位置と文字のスマホ対応 */
  .osirase-top-img {
    left: clamp(10px, 3.8vw, 20px) !important; 
  }
  .osirase-top-img img {
    width: 21% !important;
  }
  .osirase-text {
    font-size: clamp(10px, 2.2vw, 13px) !important;
    top: 79% !important;
    left: 10.5% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* 3. 2段目以降の独立したお知らせボード */
  .osirase-board2 {
    width: 100% !important;        /* 💡 外枠の縮小（90%）に完全に同期させます */
  }

  /* 💡 【重要】ニュースボックス本体：親の縮小に合わせて100%可変で縮むように固定 */
  .osirase-news-container,
  .osirase-news-container2 {
	width: 100% !important;        /* 横幅を完全に可変（100%）にします */
	max-width: 100% !important;    /* 固定値での突っかかりを完全にリセット */
	padding-top: 15px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 15px; /* 内側の余白をスマホ用にスマート化 */
	box-sizing: border-box !important; /* 💡 余白が原因ではみ出すのを防ぐ絶対必要な設定 */
  }

  /* 各テキストのスマホ自動伸縮（画面が極端に狭くなっても文字が小さく追従します） */
  .news-date, .news-date2 {
    font-size: clamp(10px, 2.4vw, 12px) !important;
  }
  .news-body, .news-body2 {
    font-size: clamp(10px, 2.3vw, 13px) !important; /* 一番小さくなった時をさらに小さく設定 */
    line-height: 1.4 !important;
    padding-left: 1em !important;
    padding-top: 2px !important;
  }
    
  /* 💡 クリニックカード全体のスマホ設定 */
  .clinic-card {
    position: relative !important;   /* スマホ時は自動で下に回り込むように通常フローへ */
    top: 0px !important;             /* PC版の絶対配置の数値をリセット */
    left: 0px !important;
    width: 100% !important;          /* 親のwrapperの横幅に100%完全に同期させます */
    max-width: 100% !important;
    margin-left: 0 !important;      /* 💡 PC版で付けたレフトマージンをスマホでは0にします */  
    margin-top: 20px !important;     /* 上のボックスとの間のスマホ用隙間 */
    margin-bottom: 40px !important;
  }

  /* 上段：受付時間テーブルの箱（PC版のデザインや角丸を維持しつつスマホ用に縮小） */
  .schedule-box {
    padding: 10px 12px !important;   /* スマホの狭い画面幅に合わせて、左右の余白だけをスリム化 */
    border-radius: 20px !important;  /* PC版の綺麗な角丸をしっかり維持 */
    width: 100% !important;      
    margin-bottom: 12px !important;
  }
  
  .schedule-table {
    font-size: clamp(10.5px, 2.7vw, 13px) !important; /* 💡 画面幅に合わせてテーブル全体の文字が自動伸縮します */
  }
  
  .schedule-table th, 
  .schedule-table td {
    padding: 4px 1px !important;     /* スマホでも表が縦長に伸びすぎず、PC版のコンパクトさを維持 */
  }
  
  .schedule-table td.time-label {
    padding-left: 2px !important;
  }
  
  /* テーブル下の注意書き（PC版の右寄せデザインをスマホでも維持） */
  .schedule-notes {
    margin-top: 5px !important;
    gap: 10px !important;
    justify-content: flex-end !important; /* ★右寄せの配置をそのままキープ */
    font-size: clamp(10px, 2.4vw, 11.5px) !important;
  }

  /* 左上の「受付時間」の個別左寄せ（PC版のデザインをスマホ用に微調整） */
  .schedule-table th.bg-light-pink {
    text-align: left !important;
    padding-left: 15px !important; /* 💡 スマホの画面幅に合わせて、はみ出さない絶妙な左余白に自動調整 */
  }

  /* 下段：情報セクション（PC版のデザインを維持） */
  .info-section {
    gap: 10px !important;            /* カプセル同士の隙間をPC版と同じにキープ */
    width: 100% !important;
  }
  
  /* 各カプセル行（PC版の padding: 3px 25px と radius: 30px を極力維持） */
  .info-row {
    padding: 4px 20px !important;    /* 左右の余白だけスマホ用に少しスマートに引き締め */
    border-radius: 30px !important;  /* ★PC版の綺麗なカプセル型の丸みを100%維持 */
    align-items: flex-start !important; /* 💡 住所が2行に改行された際、左の見出しが上に揃うようにガード */
  }
  
  /* 左側の見出しラベル（「住 所」など） */
  .info-label-box {
    width: 65px !important;          /* スマホの狭い幅に合わせて見出し幅を少し縮小 */
    font-size: clamp(12px, 2.6vw, 13.5px) !important;
    padding-top: 2px !important;
  }
  
  /* 右側の詳細本文テキスト */
  .info-content {
    font-size: clamp(12.5px, 2.8vw, 14.5px) !important; /* 💡 画面幅に合わせて本文が自動伸縮します */
    line-height: 1.3 !important;
  }
  
  .clinic-name, .tel-text {
    font-size: clamp(13.5px, 3vw, 15.5px) !important;
  }
  .access-text {
    font-size: clamp(11.5px, 2.5vw, 12.5px) !important;
  }
}
/* --- 各設定の終わり --- */
    
}
/* --- お知らせ窓のための設定 終わり --- */

/* ==========================================
   スマホ版の自動追従設定 終わり
   ========================================== */

/* --- フッター全体の基本設定 --- */
.custom-footer {
  width: 100%;
  height: 70px;                /* 💡 フッターの縦幅（維持） */
  border-top: none !important; 
  font-family: sans-serif;
  margin-top: 0px !important;            

  /* ★高さを維持しつつ、回り込みをリセット */
  display: block !important;       
  clear: both !important;          
}

/* 左ブロック：PC時は280pxに完全固定 */
.footer-left-block {
  width: 280px;
  height: 70px !important;     /* 💡 70pxの高さを強制ロック（維持） */
  background-color: #eeafb2;   
  display: flex !important;
  align-items: flex-start !important;
  padding-top: 10px;           
  padding-left: 30px;          
  box-sizing: border-box;
  flex-shrink: 0;              
  position: relative;          
  border-top: none !important; 
}

/* 💡 【短い線】（維持） */
.footer-left-block::before {
  content: "";
  position: absolute;
  top: 0;                      
  left: 30px;                  
  right: 0px;                 
  height: 2px;                 
  background-color: #ffffff;   
}

/* 著作権表記（維持） */
.copyright {
  margin: 0;
  padding: 0;
  font-size: 9px;
  color: #ffffff;              
  white-space: nowrap;
}

/* 右ブロック：残りの横幅いっぱいに広がる薄ピンクのエリア */
.footer-right-block {
  height: 70px !important;     /* 💡 70pxの高さを強制ロック（維持） */
  background-color: #f5d6d3;   
  display: flex !important;
  align-items: flex-start !important;
  padding-top: 6px;            
  padding-left: 40px;          
  box-sizing: border-box;
  
  /* 【維持】 */
  border-top: 2px solid #ffffff !important; 
}

/* 💡 【修正】メニュー文字が正しく横並びに戻るように、rowの設定を最適化 */
.custom-footer .row {
  display: flex !important;
  flex-direction: row !important; /* ★確実な横並びを設定 */
  flex-wrap: nowrap !important;   /* ★PC版での縦崩れを防止 */
  height: 70px !important;
  align-items: flex-start !important; 
}

/* フッターメニューの横並び設定（維持） */
.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;       /* ★ここにも!importantを付与して強制横並びを復活 */
  flex-wrap: wrap;             
  gap: 15px;                   
}

/* フッターリンクの文字スタイル（維持） */
.footer-nav a {
  font-size: 11px;             
  color: #c87878;              
  text-decoration: none;       
  white-space: nowrap;
}
.footer-nav a:hover {
  color: #ffffff;              
}

/* ==========================================
   【フッター専用】スマホ版（991.98px以下）の設定
   ※フッターの命令だけをこの中に完全に閉じ込めます
   ========================================== */
@media (max-width: 991.98px) {
  
  /* 💡 【このページ固有の食い込みバグ解決命令】
     PC版の「1400px」の巨大な固定壁をスマホ版で完全にリセット（解除）します。
     これによって、Googleマップの下に自動でフッターが押し下げられ、食い込みが100%確実に直ります！ */
  .main-right-block,
  .osirase-list-wrapper {
    height: auto !important;
    min-height: auto !important;
  }

  /* フッター全体の高さをスマホ用に自動変更 */
  .custom-footer {
    height: auto !important;    
    margin-top: 0px !important; /* スマホでも上にピッタリくっつける設定を維持 */
    
    /* 💡 【追加】上のGoogleマップとの重なり（バッティング）を確実に防止して真下に配置させる命令 */
    clear: both !important; 
    display: block !important;
  }
  
  /* 💡 【追加】Bootstrapの「.row」の自動計算が縦幅を押し潰すのをリセットし、
     他ページと同じ綺麗な「縦並び（メニューが上、コピーライトが下）」を100%保証します */
  .custom-footer .row {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    align-items: stretch !important;
  }
  
  /* スマホ時は左ブロック（濃いピンク）の幅制限を解除して一番下に配置 */
  .footer-left-block {
    width: 100% !important;
    order: 2 !important;        /* メニューの下に配置 */
    
    /* 💡 PC版の上揃え（flex-start）をスマホ時のみ強制リセットし、完璧な中央寄せにします */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 
    
    /* PC版の padding-top: 10px をスマホ用の均等な上下余白に上書き */
    padding: 12px 15px !important; 
    background-color: #eeafb2 !important; /* PC版の濃いピンクを維持 */
    height: auto !important;              /* PC用の70px固定をスマホ版で安全に解除 */
  }
    
  /* 💡 【新設】スマホ版の時は、濃いピンクの上の短い白線を完全に消去します */
  .footer-left-block::before {
    display: none !important;  /* 💡 これでスマホ画面の時だけ線がピタッと消えます */
  }
  
  /* スマホ時は右ブロック（薄ピンク）を上に配置 */
  .footer-right-block {
    width: 100% !important;
    order: 1 !important;        /* コピーライトより上に配置 */
    
    /* 💡 PC版の上揃え（flex-start）をスマホ時のみ強制リセットし、完璧な中央寄せにします */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* PC版の padding-top: 6px と padding-left: 40px をスマホ用に綺麗に上書き */
    padding: 18px 15px !important; 
    background-color: #f5d6d3 !important; /* PC版の薄ピンクを維持 */
    height: auto !important;              /* PC用の70px固定をスマホ版で安全に解除 */
  }
  
  /* スマホ用のメニュー配置（中央寄せ） */
  .footer-nav {
    display: flex !important;
    flex-wrap: wrap !important; /* メニュー文字が画面幅で安全に自動折り返しされるようにします */
    justify-content: center !important;
    margin-top: 0px !important; /* PC版のマイナスマージンがかかっていた場合はここでリセット */
    gap: 10px 15px !important;  /* メニューが2行になっても綺麗に並ぶ縦と横の隙間 */
    width: 100% !important;
  }
  
  .footer-nav a {
    /* PC版の11pxをベースに、スマホの画面幅に合わせて安全に自動縮小 */
    font-size: clamp(10px, 2.8vw, 11px) !important; 
    display: inline-block !important;
  }

}

/* ==========================================
   【PC版】Googleマップ（clinic-map-box）専用スタイル
   ========================================== */
.clinic-map-box {
	width: 90% !important;        /* 💡 クリニックカード（590px）の横幅に100%完全にシンクロさせます */
	height: 350px;                 /* 💡 PC版での地図の高さ（お好みに合わせて変更できます） */
	border-radius: 20px;           /* 💡 これまでの薄ピンクの箱と同じ「20px」の綺麗な角丸に揃えます */
	overflow: hidden;              /* 角丸の枠線からはみ出た地図を綺麗にカットする設定 */
	margin-top: 15px;              /* 上の住所カプセルとの間の心地よい隙間 */
	box-shadow: 0 4px 12px rgba(200, 120, 120, 0.05); /* 他の要素と馴染むごく薄い影 */
}

/* 地図のiframe自体を箱いっぱいに広げる設定 */
.clinic-map-box iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}


/* ==========================================
   【スマホ版】自動追従・縮小設定（@mediaの中に追記）
   ========================================== */
@media (max-width: 991.98px) {
  
  /* 💡 Googleマップのスマホ設定：
     クリニックカードの内側に入ったことで、これだけで下のお知らせやQ&Aと
     ミリ単位で100%完全に同じ綺麗な横幅（90%幅）に自動伸縮・追従します！ */
  .clinic-map-box {
    height: 240px !important;      /* 💡 スマホの画面幅に合わせて、地図の高さをスマートに縮小します */
    border-radius: 20px !important; /* スマホでも綺麗な角丸をしっかり維持 */
    width: 100% !important;
    margin-top: 12px !important;   /* スマホ用の隙間調整 */
  }
}

/* ==========================================
   【修正】重なりを解消しつつ、右端の飛び出しを完璧に揃える設定
   ========================================== */
/* 1. 診療方針ボックスの横幅を固定し、高さを自動にする */
.osirase-board {
  width: 590px !important;       /* 💡 外枠の590pxに完全に一致させ、右の飛び出しを防ぎます */
  max-width: 100% !important;
  box-sizing: border-box !important;
  
  height: auto !important;
  min-height: auto !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 10px !important;
}

/* 2. 診療方針のテキストエリアも幅とはみ出しを調整 */
.osirase-news-container {
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* 3. 受付時間・医院概要のボックスも横幅を590pxに固定して右端を揃える */
.clinic-card {
  width: 590px !important;       /* 💡 診療方針や外枠と完全に同じ幅に揃えて右端をカチッと一致させます */
  max-width: 100% !important;
  box-sizing: border-box !important;
  
  position: relative !important;
  top: auto !important;
  margin-top: 15px !important;   /* 診療方針ボックスとの間の縦の隙間 */
  height: auto !important;
  clear: both !important;
}

/* ==========================================
   【修正】お名前ボックス内の資格表示・いまの文字色を維持する設定
   ========================================== */
/* お名前と資格を縦並びにするためのクッション */
.incho-name-profile {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important; /* 💡 これで全ての文字頭が左端で一直線に揃います */
  gap: 4px !important;                 /* お名前と資格、資格同士の間の縦の隙間 */
  text-align: left !important;
}

/* 2段目のボックスの上下パディングを少し広げて、3行が綺麗に収まるようにします */
.incho-name-box {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  height: auto !important;             /* 高さを自動伸縮にして文字の収まりを安全にします */
}

/* 追加した資格のテキストスタイル（いまの文字色を維持） */
.incho-license {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;         /* お名前（18px）より少し小さくしてバランスを整えます */
  color: #c87878 !important;          /* 💡 いまの文字色（濃いピンク）のまま変更しません */
  font-weight: normal !important;
  line-height: 1.0 !important;
  letter-spacing: 0.05em !important;  /* 読みやすい程よい文字間隔 */
}

/* ==========================================
   【Mac・Winズレ完全解消】文字幅の違いを自動吸収して縦揃えにする設定
   ========================================== */
/* 3段目：経歴・プロフィールテキスト全体の基本スタイル */
.history-text-list .text-item {
  font-size: 12.5px !important;
  line-height: 1.3 !important;   /* 全ての行間を1.3に完全統一 */
  color: #c87878 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* 💡 【解決策】1行ごとに見えない2つのマス目（①「それから」の幅のマス / ②「病院名」のマス）を作ります */
  display: grid !important;
  /* 1列目を「それから」という文字幅に自動で100%一致させます（Windows・Macそれぞれのフォント幅を自動吸収します） */
  grid-template-columns: max-content 1fr !important;
  align-items: flex-start !important;
}

/* 💡 【本物の「それから」の行】 */
.text-hospital-start {
  /* 12.5px（全角1文字分）の余白を「松山…」の左側にだけ作ります */
  padding-left: 12.5px !important; 
  grid-column: 2 !important;          /* 2つ目のマス目に配置します */
}

/* 💡 【2行目以降の病院名の行（indent-r）】 */
.history-text-list .text-item.indent-r {
  display: grid !important;
}

/* 2行目以降の行の左側に、各OS（Win/Mac/スマホ）ごとの「それから」という文字幅と、
   正確に「全角1文字分の隙間」を自動で計算した【透明なクッション】を配置します */
.history-text-list .text-item.indent-r::before {
  content: "それから" !important;    /* 💡 WindowsでもMacでも、その端末の「それから」の幅に自動伸縮します */
  visibility: hidden !important;     /* 文字自体は見えない透明な壁にします */
  grid-column: 1 !important;          /* 1つ目のマス目を埋めます */
  white-space: nowrap !important;
  
  /* 💡 ここで「全角1文字分（12.5px）」の隙間を足すことで、上の「松山…」の開始位置とミリ単位で完全同期させます */
  padding-right: 12.5px !important; 
}

/* 病院名テキスト自体は、2つ目のマス目にカチッと格納します */
.history-text-list .text-item.indent-r .history-desc,
.history-text-list .text-item.indent-r span:not(::before) {
  grid-column: 2 !important;
}


/* 💡 専門の下の2行（indent-m）に「全角2文字分」の段落落ちを作る設定 */
.history-text-list .text-item.indent-m {
  display: block !important;           /* 病院名用のマス目構造をリセット */
  padding-left: 25px !important;       /* 12.5px（全角1文字）× 2 ＝ 正確に「全角2文字分」 */
}

/* ==========================================
   📱 【最終完成版】iPhoneでの文字密着 ＆ 曜日マス強制拡張設定
   ========================================== */
@media (max-width: 991.98px) {
  /* 💡【新設】テーブル本体の横幅をスマホ画面いっぱいに広げ、曜日マスの自動拡張ロックを解除します */
  .clinic-card .schedule-table {
    width: 100% !important;
    table-layout: auto !important; /* 固定幅の縛りを解き、空いたスペースを曜日に自動で分配させます */
    box-sizing: border-box !important;
  }

  /* 時間マス全体の幅を限界まで細く（100px）指定します */
  /* 💡 これを細く固定したことで、テーブル内の残りのスペース（約200px以上）がすべて右側の曜日マスに強制的に譲られます！ */
  .clinic-card .schedule-table td.time-label,
  .clinic-card .schedule-table th:first-child {
    width: 140px !important;       
    min-width: 140px !important;
    max-width: 140px !important;
    padding-right: 0px !important; 
    box-sizing: border-box !important;
  }

  /* 💡【検証していただいた理想の数値を維持】 */
  /* 「午前・午後」の文字のすぐ隣まで数字全体を完璧に密着させます */
  .clinic-card .schedule-table td.time-label span:last-child {
    width: 90px !important;         /* 検証いただいた 90px */
    margin-left: -30px !important;  /* 検証いただいた -30px */
    margin-right: 0px !important; 
    display: inline-block !important;
  }
  
  /* 💡 曜日が入る各マス（th, td）の横幅を自動で均等に広く広げます */
  .clinic-card .schedule-table th:not(:first-child),
  .clinic-card .schedule-table td:not(.time-label) {
    width: auto !important;         /* 幅の固定を解除して、余ったスペースで大きく広がらせます */
  }
}