@charset "UTF-8";

/* ==================================================
   下層ページ共通パーツ (c-)
================================================== */

/* --- ページヘッダー（グラデーションエリア） --- */
.c-page-hero {
  /* 指定のグラデーション（上から下へ） */
  background: linear-gradient(to bottom, #c0e7c0 0%, #ffffff 100%);
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.c-page-hero__title {
  /* ヒラギノ明朝を指定（Windows等も考慮した明朝体スタック） */
  font-family:
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  font-size: 32px;
  color: #707375;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* （参考）説明文が入る場合のスタイル */
.c-page-hero__desc {
  font-size: 18px;
  color: #707375;
  margin-top: 10px;
}

/* --- パンくずリスト --- */
.c-breadcrumb {
  padding: 15px 0;
  margin-bottom: 20px; /* 下のコンテンツとの余白 */
}

.c-breadcrumb__list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.c-breadcrumb__list li,
.c-breadcrumb__list a {
  font-size: 14px;
  color: #707375;
  text-decoration: none;
}

.c-breadcrumb__list a:hover {
  text-decoration: underline;
}

/* --- 下層用 セクションタイトル --- */
.c-sec-title--sub {
  font-size: 23.5px;
  color: #707375;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin-bottom: 40px; /* タイトル下の余白 */
}

/* ★魔法：HTMLを汚さずに、CSSの疑似要素で25px下にメインカラーの線を引く */
.c-sec-title--sub::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  background-color: var(--color-main);
  margin: 25px auto 0; /* 上に25pxの余白、左右はautoで中央揃え */
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .c-page-hero {
    height: 140px; /* スマホでは少し高さを抑える */
  }
  .c-page-hero__title {
    font-size: 24px; /* スマホ用に少し小さく */
  }
  .c-breadcrumb {
    margin-bottom: 10px;
    padding-top: 0;
  }
  .c-breadcrumb__list li,
  .c-breadcrumb__list a {
    font-size: 12px; /* スマホではパンくずも小さく */
  }
  .c-sec-title--sub {
    font-size: 20px;
  }

  .c-sec-title--sub::after {
    margin: 10px auto 0;
  }
}

/* ==================================================
   About Page - 院長あいさつ (p-director)
================================================== */
.p-about-page {
  padding-bottom: 100px;
}

/* --- プロフィール（写真と名前） --- */
.p-director__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.p-director__names {
  width: 100%;
  max-width: 500px; /* 写真の幅に合わせる */
  display: flex;
  justify-content: space-between;
  align-items: baseline; /* 文字の底辺を揃える */
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #81c6cf;
}

.p-director__name {
  font-size: 19px; /* 指定サイズ */
  color: #707375; /* 指定グレー */
  font-weight: normal;
  letter-spacing: 0.1em;
}

.p-director__en-name {
  height: 20px; /* 画像の高さ（適宜調整してください） */
  width: auto;
}

.p-director__img {
  width: 100%;
  max-width: 500px; /* 写真の最大幅 */
  height: auto;
}

/* --- メッセージエリア --- */
.p-director__message {
  margin-bottom: 30px;
}

.p-director__message-title {
  text-align: center;
  margin-bottom: 20px;
}

.p-director__message-title img {
  height: 35px; /* 画像の高さ（適宜調整してください） */
  width: auto;
}

.p-director__message-text {
  font-size: 14px; /* 指定サイズ */
  color: #555;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* --- 略歴・所属機関ボックス --- */
.p-director__history-box {
  border: 7px solid #e2e3e3; /* 指定の枠線 */
  padding: 10px 20px;
  display: flex; /* PCは横並び */
  gap: 50px; /* 左右カラムの隙間 */
  background-color: #fcfcfc; /* カンプの背景がほんのりグレーに見えるため追加（不要なら削除） */
}

.p-director__history-col {
  flex: 1; /* 左右を均等の幅に */
}

.p-director__history-title {
  font-size: 20px; /* 指定サイズ */
  color: var(--color-main); /* メインカラー */
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.p-director__history-list {
  list-style: none;
}

.p-director__history-list li {
  font-size: 12.5px; /* 指定サイズ */
  color: #707375;
  line-height: 2; /* リストの行間は広めに */
  letter-spacing: 0.15em;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-about-page {
    padding-bottom: 60px;
  }

  .p-director__profile {
    margin-bottom: 30px;
  }

  /* ★魔法：SPでは写真と名前の上下を入れ替える */
  .p-director__img {
    order: 1; /* 写真を上に */
    margin-bottom: 25px;
  }

  .p-director__names {
    order: 2; /* 名前を下に */
    flex-direction: column; /* 縦積みに */
    align-items: center; /* 中央揃えに */
    gap: 10px;
    margin-bottom: 0;
  }

  .p-director__message-title img {
    height: 25px; /* SPで少し小さく */
  }

  .p-director__history-title {
    margin-bottom: 10px;
  }

  /* SP：枠線ボックスを縦積みに */
  .p-director__history-box {
    flex-direction: column; /* 縦積みに */
    padding: 20px 20px;
    gap: 30px; /* カラム間の隙間を狭く */
    border: 5px solid #e2e3e3;
  }
}

/* ==================================================
   About Page - コンセプト・理念 (p-clinic-concept)
================================================== */
.p-clinic-concept {
  margin-top: 60px; /* 院長あいさつエリアとの余白 */
}

/* ブロック間の余白（80px） */
.p-clinic-concept__block {
  margin-bottom: 80px;
}
.p-clinic-concept__block:last-child {
  margin-bottom: 0;
}

/* 見出し */
.p-clinic-concept__title {
  font-size: 19px; /* 指定サイズ */
  color: var(--color-main);
  font-weight: normal;
  letter-spacing: 0.05em;
  padding-bottom: 10px;
  margin-bottom: 25px;
  border-bottom: 1px dotted var(--color-main); /* メインカラーの点線 */
}

/* 横並びエリア */
.p-clinic-concept__row {
  display: flex;
  gap: 20px; /* 画像とテキストの隙間 */
  margin-bottom: 20px; /* 下の全幅テキストとの隙間 */
  align-items: center;
}

.p-clinic-concept__text-side {
  flex: 6; /* テキスト側を 7割 */
}

.p-clinic-concept__img-side {
  flex: 4; /* 画像側を 3割 */
}

.p-clinic-concept__img-side img {
  width: 100%;
  height: auto;
}

/* 本文テキスト */
.p-clinic-concept__text-side p,
.p-clinic-concept__text-bottom p {
  font-size: 14px; /* 指定サイズ */
  color: #555;
  line-height: 1.8;
  margin-bottom: 15px; /* 段落ごとの隙間 */
}
.p-clinic-concept__text-side p:last-child,
.p-clinic-concept__text-bottom p:last-child {
  margin-bottom: 0; /* 最後の段落は隙間なし */
}

/* お約束の点線ボックス */
.p-clinic-concept__promise-box {
  border: 1px dotted var(--color-main);
  padding: 10px 15px;
  margin-top: 15px;
}

.p-clinic-concept__promise-box ol {
  color: var(--color-main);
  font-size: 14px;
  line-height: 2; /* リストは少し行間を広めに */
  margin: 0;
  padding-left: 20px; /* 数字分のインデント */
}

/* 略歴リストのアイテムを横並びにする */
.p-director__history-list li {
  display: flex;
  margin-bottom: 10px; /* 行間の隙間（デザインに合わせて調整） */
  line-height: 1.6;
}

/* 年号のエリア */
.p-director__history-year {
  width: 5.5em; /* 「平成○○年」が収まる固定幅を指定 */
  flex-shrink: 0; /* 幅が縮むのを防ぐ */
  /* color: var(--color-main); 色を変えたい場合はここで指定 */
}

/* 出来事テキストのエリア */
.p-director__history-text {
  flex: 1; /* 残りの幅をすべて使う */
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-clinic-concept__block {
    margin-bottom: 50px; /* スマホではブロック間の余白を少し詰める */
  }

  .p-clinic-concept__row {
    flex-direction: column; /* 横並びを解除して縦積みに */
    gap: 20px;
  }

  /* ★魔法：HTMLの順番に関係なく、スマホでは画像を強制的にテキストの上に持ってくる */
  .p-clinic-concept__img-side {
    order: -1;
  }
}

/* ==================================================
   Facility Page - 設備紹介 (p-facility)
================================================== */
.p-facility-page {
  padding-bottom: 80px;
}

/* PC：2列のグリッド配置 */
.p-facility__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px 35px; /* 縦の隙間50px、横の隙間40px */
  background-color: #f4faec;
  padding: 30px 30px;
}

/* 各カードの設定 */
.p-facility__item {
  display: flex;
  flex-direction: column; /* 縦積みのFlexboxにする（高さを揃えるため） */
  height: 100%;
}

.p-facility__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 見出し（メインカラー背景） */
.p-facility__name {
  background-color: var(--color-main);
  color: #fff;
  text-align: center;
  font-size: 19px; /* 指定サイズ */
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 15px 10px;
  margin: 0;
  font-feature-settings: "palt";
}

/* 薄い緑エリア（テキストボックス） */
.p-facility__text-box {
  padding: 20px 0; /* 指定パディング（PC用） */
  flex-grow: 1; /* ★魔法：隣のカードとテキスト量が違っても、薄い緑エリアを下に伸ばして高さを揃える */
}

/* 本文 */
.p-facility__desc {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.facility-wrap {
  margin-bottom: 80px;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-facility-page {
    padding-bottom: 50px;
  }

  .p-facility-page .l-container--small {
    padding: 0;
  }

  .p-facility__list {
    grid-template-columns: 1fr; /* 1列に変更 */
    gap: 30px;
    padding: 30px 20px;
  }

  .p-facility__name {
    font-size: 17px; /* スマホ用に見出しを少し小さく */
  }

  /* SPでは50pxだと上下の余白が少し広すぎるため調整 */
  .p-facility__text-box {
    padding: 20px 0;
  }
}

/* ==================================================
   Guide Page - 初診案内 導入 (p-guide-intro)
================================================== */

.p-guide-intro {
  margin-bottom: 120px; /* 次のコンテンツまでの余白（PC） */
}

/* --- 上部：横並びエリア --- */
.p-guide-intro__row {
  display: flex;
  gap: 20px; /* 画像とテキストの隙間 */
  margin-bottom: 20px; /* 下の全幅テキストとの隙間 */
  align-items: flex-start;
}

/* テキスト 6.5 : 画像 3.5 の割合 */
.p-guide-intro__text-side {
  flex: 5.5;
}
.p-guide-intro__img-side {
  flex: 4.5;
}

.p-guide-intro__img-side img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- テキストの共通スタイル --- */
.p-guide-intro__text-side p,
.p-guide-intro__text-bottom p {
  font-size: 12.5px; /* 指定サイズ */
  color: #555;
  line-height: 2; /* 読みやすさのため少し広めに */
  margin-bottom: 25px; /* 段落ごとの隙間 */
  font-feature-settings: "palt";
}

.p-guide-intro__text-side p:last-child,
.p-guide-intro__text-bottom p:last-child {
  margin-bottom: 0;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-guide-intro {
    margin-bottom: 80px; /* 次のコンテンツまでの余白（SP） */
  }

  .p-guide-intro__row {
    flex-direction: column; /* 横並びを解除して縦積みに */
    gap: 25px; /* 画像とテキストの隙間を調整 */
  }

  /* ★魔法：SPでは画像をテキストの上に持ってくる */
  .p-guide-intro__img-side {
    order: -1;
    width: 100%;
  }

  .p-guide-intro__text-side {
    width: 100%;
  }
}

/* ==================================================
   Guide Page - 診察の流れ (p-guide-flow)
================================================== */
.p-guide-flow {
  padding-bottom: 100px; /* ページ最下部の余白 */
}

.p-guide-flow__item {
  position: relative; /* 三角形を絶対配置するための基準 */
  padding: 40px 20px 50px; /* 上下の余白 */
  max-width: 800px;
  margin: 0 auto;
}

/* 背景色の切り替え */
.p-guide-flow__item--bg-gray {
  background-color: #eeeeee; /* 指定グレー */
}
.p-guide-flow__item--bg-green {
  background-color: #e4f3f5; /* 指定薄緑 */
}

/* ★魔法：CSSだけでメインカラーの下向き三角形を作る */
.p-guide-flow__triangle {
  position: absolute;
  top: 0; /* ブロックの最上部 */
  left: 50%;
  transform: translateX(-50%); /* ど真ん中に配置 */
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--color-main); /* 上枠線に色をつけて下向きの三角形に */
}

/* --- タイトル部分 --- */
.p-guide-flow__head {
  text-align: center;
  margin-bottom: 20px;
}

.p-guide-flow__num {
  display: block;
  font-family: "Jost", sans-serif; /* Futuraの代用 */
  font-weight: 300; /* 細くてエレガントに */
  font-size: 35px; /* 指定サイズ */
  color: var(--color-main);
  margin-bottom: 5px;
  line-height: 1;
}

.p-guide-flow__title {
  font-size: 25px; /* 指定サイズ */
  color: #707375; /* 指定グレー */
  font-weight: normal;
  letter-spacing: 0.1em;
}

.p-guide-flow__sub-title {
  font-size: 17px; /* 指定のやや小さめサイズ */
  display: inline-block;
  margin-top: 5px;
}

/* --- コンテンツ部分（画像とテキスト） --- */
.p-guide-flow__body {
  display: flex;
  align-items: flex-start; /* 縦の中央で揃える */
  gap: 20px; /* 画像とテキストの隙間 */
}

/* 画像 4 : テキスト 6 の割合 */
.p-guide-flow__img {
  flex: 4;
}

.p-guide-flow__text {
  flex: 6;
}

.p-guide-flow__img img {
  width: 100%;
  height: auto;
  display: block;
}

.p-guide-flow__text p {
  font-size: 15px; /* 指定サイズ */
  color: #707375; /* 指定グレー */
  line-height: 1.8;
  margin-bottom: 15px;
}
.p-guide-flow__text p:last-child {
  margin-bottom: 0;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-guide-flow__item {
    padding: 30px 0 40px;
  }

  .p-guide-flow__head {
    margin-bottom: 10px;
  }

  .p-guide-flow__num {
    font-size: 30px; /* スマホ用に少し調整 */
  }

  .p-guide-flow__title {
    font-size: 20px;
  }

  .p-guide-flow__sub-title {
    font-size: 14px;
    display: block; /* スマホでは改行させる */
  }

  /* SP：画像とテキストを縦積みに */
  .p-guide-flow__body {
    flex-direction: column;
    gap: 25px;
  }

  /* 画像とテキストを横幅いっぱいに */
  .p-guide-flow__img,
  .p-guide-flow__text {
    width: 100%;
    flex: none; /* PCの比率指定を解除 */
  }
}

/* ==================================================
   Service Page - 診療案内一覧 (p-service)
================================================== */
.p-service-page {
  padding-bottom: 80px;
}

.price_btn {
  text-align: center;
  padding: 40px 0 0;
}

.c-btn--price {
  display: inline-block;
  background-color: var(--color-accent);
  color: #fff;
  padding: 15px 50px 15px 40px;
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.1em;
  position: relative;
  transition: opacity 0.3s;
}
.c-btn--price:hover {
  opacity: 0.8;
}

.c-btn--price::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  /* ★SPで「円形のまま1列にする」ための上書き */
  .p-service-page .p-service__list {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .p-service-page .p-service__item {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 10% 12% 12%;
  }

  .p-service-page .p-service__link {
    flex-direction: column;
    justify-content: center;
  }

  .p-service-page .p-service__icon {
    margin-right: 0;
    margin-bottom: 15px;
    width: 60px;
  }

  .p-service-page .p-service__name-ja {
    font-size: 17px;
  }

  .p-service-page .p-service__name-en,
  .p-service-page .p-service__desc {
    display: block;
  }
}

/* ==================================================
   Service Page - 施設基準 (p-standards)
================================================== */
.p-standards {
  padding-bottom: 120px;
}

/* グレーの12pxボーダーボックス */
.p-standards__box {
  border: 12px solid #eeeeee;
  padding: 40px 70px; /* 指定のパディング */
  margin: 0; /* 左右マージン0 */
}

/* 各施設アイテムの余白（間隔40px） */
.p-standards__item {
  margin-bottom: 40px;
}
.p-standards__item:last-child {
  margin-bottom: 0; /* 最後は余白なし */
}

/* 施設タイトル */
.p-standards__title {
  font-size: 19px; /* 指定サイズ */
  color: var(--color-main);
  font-weight: normal;
  letter-spacing: 0.1em;
  padding-bottom: 10px; /* ★10px下にボーダーを引くための隙間 */
  border-bottom: 1px dotted var(--color-main); /* 指定の1px点線 */
  margin-bottom: 0;
}

/* 施設説明文 */
.p-standards__desc {
  font-size: 12.5px; /* 指定サイズ */
  color: #707375;
  padding: 20px 0; /* 指定のパディング */
  line-height: 1.8;
  margin: 0;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-standards {
    padding-bottom: 80px;
  }

  /* SP版ではスマホ画面の幅に合わせて、左右のパディングを減らします */
  .p-standards__box {
    border-width: 8px; /* スマホではボーダーも少し細くすると綺麗です（お好みで12pxのままでもOK） */
    padding: 30px 20px;
  }

  .p-standards__item {
    margin-bottom: 30px;
  }

  .p-standards__title {
    font-size: 17px; /* スマホ用に少し小さく */
  }

  .p-standards__desc {
    padding: 15px 0;
  }
}

/* ==================================================
   Price Page - 価格表 (p-price)
================================================== */
.p-price-page {
  padding-bottom: 120px;
}

/* --- ページ内リンクボタンエリア --- */
.p-price-links {
  background-color: #f4faec; /* 指定の薄い緑 */
  padding: 20px 30px; /* 指定のパディング */
  margin-bottom: 50px;
}

.p-price-links__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  gap: 15px; /* ボタン同士の隙間 */
}

.p-price-links__btn {
  display: block;
  background-color: var(--color-main);
  color: #fff;
  font-size: 15px; /* 指定サイズ */
  text-align: center;
  padding: 15px 40px 15px 20px; /* 右側に矢印を入れるため右余白を多めに */
  text-decoration: none;
  position: relative;
  transition: opacity 0.3s;
  border-radius: 3px;
}

.p-price-links__btn:hover {
  opacity: 0.8;
}

/* ★魔法：右端から15pxの位置に1pxの白ボーダーで下向き矢印を作る */
.p-price-links__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translateY(-70%) rotate(45deg); /* 45度傾けて下向きにする */
}

/* --- 価格表セクション --- */
.p-price-section {
  margin-bottom: 40px;
}

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

.p-price__head {
  display: flex;
  justify-content: space-between; /* 左右に振り分ける */
  align-items: flex-end; /* 下揃え */
  margin-bottom: 15px;
}

.p-price__title {
  font-size: 19px; /* 指定サイズ */
  color: var(--color-accent);
  font-weight: normal;
  letter-spacing: 0.1em;
  margin: 0;
}

.p-price__note {
  font-size: 12.5px; /* 指定サイズ */
  color: #707375;
}

/* --- テーブルの装飾 --- */
.p-price__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #707375; /* 指定カラー・太さ */
}

.p-price__table th,
.p-price__table td {
  border: 1px solid #707375; /* 指定カラー・太さ */
  padding: 20px;
  font-size: 16px; /* 指定サイズ */
  color: #707375;
}

/* 左側：価格の名称 */
.p-price__table th {
  background-color: #e5e5e5; /* 指定のグレー背景 */
  text-align: left;
  font-weight: normal;
  width: 65%; /* PCでの大まかな横幅の比率 */
}

/* 右側：価格 */
.p-price__table td {
  text-align: right; /* 金額なので右揃えが見やすいです */
  width: 35%;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-price-page {
    padding-bottom: 80px;
  }

  .p-price-links {
    padding: 20px 0; /* 薄い緑の背景は画面いっぱいに広げつつ、中身の余白をなくす */
  }

  .p-price-links__list {
    grid-template-columns: 1fr; /* 縦1列に */
    width: 92%; /* ★ご指定の横幅90〜95% */
    margin: 0 auto; /* 中央揃え */
    gap: 4px; /* SPではボタン間の隙間を少し詰める */
  }

  .p-price__note {
    align-self: flex-end; /* 注釈だけ右寄せにする */
  }

  /* SPでは文字サイズや余白を少し調整して見やすく */
  .p-price__table th,
  .p-price__table td {
    padding: 15px 10px;
    font-size: 14px;
  }
}

/* ==================================================
   スタッフ紹介 (p-staff)
================================================== */
.p-staff {
  padding-bottom: 80px;
}

/* 院長情報エリア */
.p-staff-director {
  display: flex;
  width: 100%;
}
.p-staff-director__info {
  flex: 1; /* 横幅50% */
  background-color: var(--color-main);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}
.p-staff-director__role {
  font-size: 14px;
  border: 1px solid #fff;
  padding: 5px 25px;
  margin-bottom: 10px;
}
.p-staff-director__name-ja {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}
.p-staff-director__name-en {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-family: "Jost", sans-serif;
}

.p-staff-director__img {
  flex: 1; /* 横幅50% */
}
.p-staff-director__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom; /* 下部の隙間を消す */
}

/* 説明文 */
.p-staff-desc {
  padding: 40px 40px;
  font-size: 14px;
  color: #707375;
  line-height: 2;
}

/* 職種別人数アイコンエリア */
.p-staff-roles {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  list-style: none;
}
.p-staff-roles__item {
  flex: 1;
  aspect-ratio: 1 / 1; /* 正円にする */
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #707375;
}
/* 背景色の交互設定 */
.p-staff-roles__item:nth-child(odd) {
  background-color: #e4f3f5;
}
.p-staff-roles__item:nth-child(even) {
  background-color: #e5e5e5;
}

.p-staff-roles__icon {
  width: 110px;
  height: auto;
  margin-bottom: 10px;
}

.p-staff-roles__icon1 {
  width: 80px;
}

.p-staff-roles__icon2 {
  margin-bottom: 20px;
}

.p-staff-roles__title {
  font-size: 19px;
  font-weight: bold;
  margin-bottom: 5px;
}
.p-staff-roles__count {
  font-size: 16px;
  font-weight: bold;
}

.doctor_wrap1 {
  margin-bottom: 60px;
}

/* ==================================================
   SP用スタイル
================================================== */
@media screen and (max-width: 768px) {
  .p-staff .l-container--small {
    padding: 0 0;
  }

  /* 院長情報エリア（SPでもカンプ通り横並び維持） */
  .p-staff-director__role {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 15px;
  }
  .p-staff-director__name-ja {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .p-staff-director__name-en {
    font-size: 10px;
  }

  /* 説明文 */
  .p-staff-desc {
    padding: 30px 20px;
  }

  /* アイコンエリア（縦並びに変更） */
  .p-staff-roles {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .p-staff-roles__item {
    width: 80%; /* SP時に大きくなりすぎないように制御 */
    max-width: 250px;
  }

  .p-staff-roles__icon {
    width: 40%;
  }

  .p-staff-roles__icon1 {
    width: 30%;
  }
}

/* ==================================================
   アクセスページ固有 (p-page-access)
================================================== */
.l-container--small_ac-top {
  max-width: 600px;
  margin: 0 auto;
}

.p-page-access {
  padding-bottom: 80px;
}

/* 診療時間テーブル */
.p-page-access__time {
  margin-bottom: 50px;
}
.p-page-access__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
  color: #707375;
}
.p-page-access__table th,
.p-page-access__table td {
  border: 1px solid #c8c8c8;
  padding: 12px 5px;
}
.p-page-access__note {
  font-size: 13px;
  color: #707375;
  margin-top: 10px;
  text-align: left;
}

/* 医院情報エリア */
.p-page-access__info {
  text-align: center;
  color: #707375;
  margin-bottom: 60px;
}
.p-page-access__name {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}
.p-page-access__address {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* 電話番号リンク */
.p-page-access__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  color: var(--color-main);
  text-decoration: none;
  font-family: "Jost", sans-serif;
  letter-spacing: 0.05em;
}
.p-page-access__tel-icon {
  width: 20px;
  height: auto;
  margin-right: 10px;
}

/* Googleマップ */
.p-page-access__map {
  width: 100%;
  line-height: 0;
}
.p-page-access__map iframe {
  width: 100%;
  aspect-ratio: 16 / 9; /* レスポンシブで高さを自動調整 */
  max-height: 450px;
}

/* ==================================================
   SP用スタイル (アクセスページ固有)
================================================== */
@media screen and (max-width: 768px) {
  .p-page-access__time {
    margin-bottom: 50px;
  }

  /* SP時のテーブルは文字と余白を詰めて1行に収める */
  .p-page-access__table {
    font-size: 10px;
  }
  .p-page-access__table th,
  .p-page-access__table td {
    padding: 8px 2px;
  }
  .p-page-access__note {
    font-size: 11px;
  }

  .p-page-access__name {
    font-size: 16px;
  }
  .p-page-access__address {
    font-size: 12px;
  }

  .p-page-access__tel {
    font-size: 28px;
  }
  .p-page-access__tel-icon {
    width: 18px;
  }

  .p-page-access__map iframe {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .p-page-access__info {
    margin-bottom: 20px;
  }
}

/* ==================================================
   診療メニュー共通エリア (p-service-menu)
================================================== */
.p-service-menu {
  background-color: var(--color-accent);
  padding: 60px 0; /* 上下の余白をデザインに合わせて調整 */
}

.p-service-menu .l-container {
  max-width: 1000px;
  margin: 0 auto; /* コンテナを中央寄せ */
}

.p-service-menu__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* PC版5列 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-service-menu__item {
  /* 固定の高さを持たせるか、aspect-ratioで高さを確保 */
  aspect-ratio: 2.2 / 0.9;
  display: flex;
}

/* 5列の場合、odd/evenで自動的に市松模様（チェッカー）になります */
.p-service-menu__item:nth-child(odd) {
  background-color: #f4faec;
}
.p-service-menu__item:nth-child(even) {
  background-color: #f2f2f2;
}

.p-service-menu__link {
  display: flex;
  flex-direction: row; /* ★縦から横並びに変更 */
  align-items: center;
  justify-content: flex-start; /* ★左詰めに変更 */
  width: 100%;
  padding: 0 20px; /* 箱の内側の余白 */
  text-decoration: none;
  color: #707375;
  transition: opacity 0.3s;
}

.p-service-menu__icon {
  width: 55px; /* アイコンサイズを少し調整 */
  height: auto;
  margin-right: 8px; /* ★アイコンとテキストの間の距離 */
  flex-shrink: 0;
}

.p-service-menu__text {
  font-size: 11px; /* カンプに近いサイズに調整 */
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
}

/* ==================================================
   SP用：診療メニューエリア
================================================== */
@media screen and (max-width: 768px) {
  .p-service-menu {
    padding: 40px 10px;
  }

  .p-service-menu__list {
    grid-template-columns: repeat(2, 1fr); /* SP版2列 */
  }

  .p-service-menu__item {
    aspect-ratio: 2 / 0.8;
  }

  /* SP用の市松模様ロジック */
  .p-service-menu__item:nth-child(n) {
    background-color: transparent;
  }
  .p-service-menu__item:nth-child(4n + 1),
  .p-service-menu__item:nth-child(4n + 4) {
    background-color: #f1f9fa;
  }
  .p-service-menu__item:nth-child(4n + 2),
  .p-service-menu__item:nth-child(4n + 3) {
    background-color: #f2f2f2;
  }

  .p-service-menu__link {
    padding: 0 15px;
  }

  .p-service-menu__icon {
    width: 30%;
    margin-right: 15px;
  }

  .p-service-menu__text {
    font-size: 13px;
  }
}

/* ==================================================
   カテゴリタブ (c-category-tab)
================================================== */
.c-category-tab {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-category-tab li a {
  display: block;
  padding: 8px 20px;
  background-color: #f5f5f5;
  color: #555;
  border-radius: 30px; /* 丸みを持たせて親しみやすく */
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.c-category-tab li a:hover,
.c-category-tab li.is-active a {
  background-color: var(--color-main);
  color: #fff;
}

/* ==================================================
   お役立ち情報（news）
================================================== */

/* ==================================================
   記事一覧グリッド (c-article-grid)
================================================== */
.c-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC版は3列 */
  gap: 30px;
}

/* 記事カード (c-article-card) */
.c-article-card {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 軽い影で浮き出させる */
  text-decoration: none;
  color: #333;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.c-article-card:hover {
  transform: translateY(-5px); /* ホバーで少し浮く */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.c-article-card__img {
  margin: 0;
  aspect-ratio: 16 / 10; /* 画像の比率を固定 */
  overflow: hidden;
}

.c-article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をトリミングして枠いっぱいに表示 */
  transition: transform 0.3s ease;
}

.c-article-card:hover .c-article-card__img img {
  transform: scale(1.05); /* ホバーで画像が少し拡大 */
}

.c-article-card__body {
  padding: 20px;
}

.c-article-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.c-article-card__cat {
  padding: 4px 10px;
  background-color: var(--color-accent); /* ベースはアクセントカラー */
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

/* カテゴリごとの色分け（任意） */
.c-article-card__cat[data-cat="news"] {
  background-color: #7bcad0;
}
.c-article-card__cat[data-cat="column"] {
  background-color: #ff9e80;
}
.c-article-card__cat[data-cat="report"] {
  background-color: #aed581;
}

.c-article-card__date {
  color: #888;
  font-family: Arial, sans-serif;
}

.c-article-card__title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

/* ==================================================
   ページネーション (c-pagination)
================================================== */
.c-pagination__list {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-pagination__list li a,
.c-pagination__list li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  text-decoration: none;
  font-family: Arial, sans-serif;
  transition: all 0.3s ease;
}

.c-pagination__list li .c-pagination__current,
.c-pagination__list li a:hover {
  background: var(--color-main);
  color: #fff;
  border-color: var(--color-main);
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-article-grid {
    grid-template-columns: 1fr; /* スマホでは縦1列 */
    gap: 20px;
  }
  .c-article-card__title {
    font-size: 15px;
  }
}

/* ==================================================
   採用ページ：募集要項テーブル (c-recruit-table)
================================================== */
#recruit .c-service-message-box {
  background-color: #fff;
  padding: 40px 50px;
  border-radius: 8px;
  text-align: left;
}

.c-recruit-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

.c-recruit-table th,
.c-recruit-table td {
  padding: 20px;
  border: 1px solid #e0e0e0;
  line-height: 1.6;
  font-size: 15px;
}

.c-recruit-table th {
  background-color: #f9f9f9;
  width: 25%;
  font-weight: bold;
  text-align: left;
  color: var(--color-accent);
}

.c-recruit-table td {
  color: #333;
}

/* SP版（スマホ表示） */
@media screen and (max-width: 768px) {
  #recruit .c-service-message-box {
    padding: 40px 10px;
  }

  .c-recruit-table th,
  .c-recruit-table td {
    display: block;
    width: 100%;
  }

  .c-recruit-table th {
    border-bottom: none; /* 下の線を消してtdと繋げる */
    padding: 15px 15px 5px;
  }

  .c-recruit-table td {
    border-top: none; /* 上の線を消す */
    padding: 5px 15px 15px;
    margin-bottom: 10px;
  }
}

/* ==================================================
   シンプルなドットリスト (c-simple-dot-list)
================================================== */
.c-simple-dot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 行間の調整 */
}

.c-simple-dot-list li {
  position: relative;
  padding-left: 15px; /* ドットを配置する余白 */
  line-height: 1.6;
  color: #333;
}

/* 緑色の小さなドットを作成 */
.c-simple-dot-list li::before {
  content: "";
  position: absolute;
  top: 0.6em; /* 1行目のテキストの縦中央あたりに配置 */
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-main); /* メインカラー（緑）を適用 */
}