@charset "UTF-8";
/* about.css — 当院について（design/03_当院について_03.psd 準拠）
 *
 * 数値はPSDの @1x 実測px（PSDは @2x なので実測÷2）。
 * コンテンツ列はPSDが x200〜1298（幅1098）、サイトは --container:1120px なので
 * 列幅・間隔は 1098 に対する % で置き、比率をそのまま持ち上げている。
 *
 * common.css と共有しているクラス（.info-box / .info-table / .placeholder /
 * .map-frame / .hours / .footer-closed）は [data-page="about"] で囲って
 * このページだけに効かせる。common.css は触らない。
 */
/* FVの写真は元画像の中央だと人物の頭が切れるので、上寄りを見せる */
[data-page="about"] .page-hero__img img {
  object-position: center 18%;
}
/* =========================================================================
   ごあいさつ
   PSD: 写真344×430(r10) と本文の2カラムが3ブロック、左右交互。上下は中央揃え。
   ========================================================================= */
.greet {
  display: grid;
  grid-template-columns: 31.3% 1fr;
  /* 344 / 1098 */
  column-gap: 7.2%;
  /* 79 / 1098 */
  align-items: center;
}
.greet+.greet {
  margin-top: calc(48 * var(--s));
}
/* 2ブロック目だけ本文が左・写真が右 */
.greet--reverse {
  grid-template-columns: 1fr 31.3%;
}
.greet--reverse .greet__photo {
  order: 2;
}

.greet__photo {
  margin: 0;
  border-radius: calc(10 * var(--rs));
  overflow: hidden;
  aspect-ratio: 344 / 430;
}
.greet__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.greet__body p {
  line-height: 1.938;
  color: #333333;
  margin: 0 0 calc(15 * var(--s));
}
.greet__body p:last-child {
  margin-bottom: 0;
}

/* キャッチ。囲みの中だけティール、続きはネイビー */
.greet__body .greet__catch {
  font-size: calc(24 * var(--s));
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: .05em;
  color: var(--navy);
  margin-bottom: calc(20 * var(--s));
}
.greet__catch-box {
  display: inline-block;
  margin-right: calc(6 * var(--s));
  padding: 2px calc(12 * var(--s));
  border: 2px solid var(--teal);
  border-radius: calc(5 * var(--rs));
  background: #fff;
  color: var(--teal);
  line-height: 1.35;
  vertical-align: middle;
}

/* 署名（最終ブロックの末尾・右寄せ・ベースライン揃え）*/
.greet__body .greet__sign {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: calc(16 * var(--s));
  margin-top: calc(10 * var(--s));
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
}
.greet__role {
  font-size: calc(24 * var(--s));
}
.greet__name {
  font-size: calc(30 * var(--s));
}
.greet__kana {
  font-size: calc(17 * var(--s));
}

/* =========================================================================
   院長プロフィール
   枠は線2px #3CB8C3・角丸10・padding 48/34、タイトルは枠の上辺に重なる

   並びはユーザー指示で PSD から変更している:
     PSD  … 経歴(750)|所属学会(302) ／ 資格(527)|各種助成・賞(527)
     実装 … 経歴(全幅) → 資格|所属学会(半々) → 各種助成・賞(全幅)
   ========================================================================= */
.profile-row {
  display: grid;
  align-items: start;
  column-gap: 4.2%;
  /* 46 / 1098 */
}
.profile-row--full {
  grid-template-columns: 1fr;
}
.profile-row--half {
  grid-template-columns: 1fr 1fr;
}
.profile-row+.profile-row {
  margin-top: calc(51 * var(--s));
}

[data-page="about"] .info-box {
  padding: calc(48 * var(--s)) calc(34 * var(--s));
  margin-top: calc(22 * var(--s));
}
[data-page="about"] .info-box__title {
  /* --tab-top は枠のパディングボックス基準（＝線の内側）なので、線2px ぶん多く取る。
     PSD はタブ上端が枠上端の24px上。common.css がこの値から top と
     「線より下を白で塗るマスク」の両方を出すので、top は直接書かないこと。*/
  --tab-top: calc(26 * var(--s));
  left: calc(34 * var(--s));
  padding: 0 calc(14 * var(--s));
  font-size: calc(30 * var(--s));
  line-height: calc(44 * var(--s));
  letter-spacing: .05em;
}

[data-page="about"] .def-list {
  margin: 0;
  /* dl の既定 margin:1em が枠内の余白を狂わせる */
  gap: 0 calc(26 * var(--s));
  line-height: 1.812;
}
[data-page="about"] .def-list dd {
  color: #333333;
}
[data-page="about"] .simple-list {
  line-height: 1.812;
}
[data-page="about"] .simple-list li {
  padding: 0;
  color: #333333;
}

/* =========================================================================
   施設紹介
   PSD: 写真344×213(r10) の3列。列間34・行間32、キャプションは写真下・中央
   ========================================================================= */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32 * var(--s)) 3.1%;
  /* 34 / 1100 */
}
[data-page="about"] .placeholder {
  aspect-ratio: 344 / 213;
  border-radius: calc(10 * var(--rs));
  background: #b7b7b7;
  font-size: calc(24 * var(--s));
  line-height: 1.25;
}
[data-page="about"] .photo-item__cap {
  margin-top: calc(6 * var(--s));
  font-size: calc(20 * var(--s));
  line-height: 1.5;
  letter-spacing: .05em;
}

/* =========================================================================
   アクセス（医院情報 / MAP / 診療時間）
   PSD: h2「アクセス」の下に中央寄せの小見出しが3つ並ぶ1セクション
   ========================================================================= */
.access-block {
  margin-top: calc(100 * var(--s));
}
.access-block:first-of-type {
  margin-top: calc(48 * var(--s));
}
.access-block__title {
  margin: 0 0 calc(32 * var(--s));
  text-align: center;
  font-size: calc(30 * var(--s));
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--navy);
}

/* --- 医院情報の表。PSDは見出し列と内容列で罫線が分かれている（間51px）--- */
[data-page="about"] .info-table {
  table-layout: fixed;
  border-collapse: collapse;
}
[data-page="about"] .info-table th,
[data-page="about"] .info-table td {
  font-size: calc(20 * var(--s));
  line-height: 1.509;
  padding: calc(21 * var(--s)) 0 calc(15 * var(--s));
  border-bottom: 1px solid #d1dcea;
  /* PSDは2pxだがユーザー指示で1px */
}
[data-page="about"] .info-table th {
  position: relative;
  width: calc(348 * var(--s));
  /* 見出し列297 + 罫線の切れ目51 */
  padding-right: calc(51 * var(--s));
  border-bottom: none;
  font-weight: 500;
  color: #12458c;
}
[data-page="about"] .info-table th::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(51 * var(--s));
  bottom: 0;
  height: 1px;
  background: #d1dcea;
}
[data-page="about"] .info-table td {
  letter-spacing: .025em;
  color: #333333;
}

/* --- MAP。PSDは900×415・角丸10・中央、枠線なし --- */
[data-page="about"] .map-frame {
  width: calc(900 * var(--s));
  max-width: 100%;
  margin: 0 auto;
  border: 0;
  border-radius: calc(10 * var(--rs));
}
[data-page="about"] .map-frame .map-embed {
  aspect-ratio: 900 / 415;
}

/* --- 診療時間。PSDはフッターの表と同じ作りで、幅878へ約1.55倍したもの --- */
[data-page="about"] main .hours {
  width: calc(834 * var(--s));
  max-width: 100%;
  height: calc(270 * var(--s));
  margin-inline: auto;
  padding-inline: calc(36 * var(--s));
  border: 2px solid #12458c;
  border-radius: calc(10 * var(--rs));
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
  background: #fff;
  table-layout: fixed;
}
[data-page="about"] main .hours th,
[data-page="about"] main .hours td {
  padding: 0;
  text-align: center;
  font-weight: 700;
  color: #12458c;
}
[data-page="about"] main .hours thead tr {
  height: calc(94 * var(--s));
}
[data-page="about"] main .hours thead th {
  font-size: calc(24 * var(--s));
  letter-spacing: 0;
  color: #12458c;
  border-bottom: 2px solid #12458c;
  /* PSDは4pxだがユーザー指示で2px */
}
[data-page="about"] main .hours thead th:first-child {
  width: calc(188 * var(--s));
  letter-spacing: .025em;
}
/* 時間はPSDでは和文フォント。基底の .hours tbody th の Roboto を打ち消す */
[data-page="about"] main .hours tbody th {
  font-family: inherit;
  font-size: calc(23 * var(--s));
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  color: #12458c;
}
[data-page="about"] main .hours tbody td {
  font-size: calc(23 * var(--s));
}
/* 行間の区切り線はPSDに無い */
[data-page="about"] main .hours tbody tr:not(:last-child) td,
[data-page="about"] main .hours tbody tr:not(:last-child) th {
  border-bottom: 0;
}
[data-page="about"] main .hours .o {
  color: #3cb8c3;
  font-size: calc(25 * var(--s));
}
[data-page="about"] main .hours .x {
  color: #12458c;
}

/* 休診日の注釈。表の右端に揃える。
   文字とバッジの寸法は common.css の .footer-closed をそのまま使う
   （PSDは25pxだが大きすぎたのでフッターと同じ扱いに揃えた／ユーザー指示）。
   ここで持つのは配置（表幅に合わせた枠と右寄せ）だけ。 */
[data-page="about"] main .footer-closed {
  width: calc(834 * var(--s));
  max-width: 100%;
  margin: calc(22 * var(--s)) auto 0;
  text-align: right;
}

/* =========================================================================
   レスポンシブ（PSDにSP版は無いので、PCの構造を素直に1列へ落とす）
   ========================================================================= */
@media (max-width: 768px) {
  /* --- ここから: 削除した中間ブレークポイント(900/1200px)にあった「PCの
     多カラムを解除する」指定。寸法は var(--s) で等比に縮むが、カラム構成の
     切り替えだけは等比化では代替できないのでSP側で持つ --- */
  .greet,
  .greet--reverse {
    display: flex;
    row-gap: 0;
    flex-direction: column;
  }
  .greet--reverse .greet__photo {
    order: 0;
  }
  /* ★ width を必ず持たせること。
     .greet__photo img が width:100% で親を見るので、figure 側に幅が無いと
     「親は中身から幅を決め、中身は親から幅をもらう」循環になり、遅延読み込みの
     画像が届くまで幅0＝aspect-ratio も高さ0を返す（場所を確保しない）。
     読み込み後に一気に高さが増えるので、別ページから /about/#access へ飛ぶと
     着地点が515pxぶん手前（施設紹介の途中）に取り残される。
     img の width/height 属性はこの形では使われないので、属性だけでは防げない。 */
  .greet__photo {
    width: 100%;
    max-width: 344px;
    aspect-ratio: 4/3;
    margin: 0 auto 30px;
    order: 1;
  }
  .greet__body {
    display: contents;
  }
  .profile-row--half {
    grid-template-columns: 1fr;
    row-gap: 51px;
  }
  /* --- ここまで --- */

  .greet+.greet {
    margin-top: 36px;
  }
  /* PC値は var(--s) で縮むが、SPはSP用の値を明示する（未指定だと
     375pxで 16px→5px まで落ちる）。本文そのものは body 継承なのでここには出さない */
  .profile-row:first-of-type>.info-box:first-of-type {
    margin-top: 16px;
  }
  .profile-row+.profile-row {
    row-gap: 0;
    margin-top: 0;
  }
  [data-page="about"] .info-box {
    padding: 36px 22px 32px;
    margin-top: 32px;
  }
  [data-page="about"] .def-list {
    column-gap: 0;
  }
  .facility-grid {
    gap: 20px;
    margin-top: 36px;
  }
  /* PC値 calc(900 * var(--s)) は375pxで280pxまで縮む */
  [data-page="about"] .map-frame {
    width: 100%;
  }
  [data-page="about"] .map-frame .map-embed {
    aspect-ratio: 4/3;
  }
  .greet__body .greet__catch {
    margin-bottom: 18px;
    font-size: 19px;
    order: 0;
  }
  /* 19pxの文字に2pxは太い */
  .greet__catch-box {
    border-width: 1px;
  }
  .greet__body p {
    order: 2;
    margin-bottom: 18px;
  }
  .greet__body .greet__sign {
    gap: 12px;
    margin-left: auto;
  }
  .greet__role {
    font-size: 16px;
  }
  .greet__name {
    font-size: 22px;
  }
  .greet__kana {
    font-size: 14px;
  }
  [data-page="about"] .info-box__title {
    --tab-top: 18px;
    left: 22px;
    font-size: 22px;
    line-height: 36px;
    padding-inline: 11px;
  }
  .facility-grid {
    grid-template-columns: 1fr;
  }
  [data-page="about"] .placeholder {
    font-size: 18px;
  }
  [data-page="about"] .photo-item__cap {
    font-size: 17px;
    margin-top: 7px;
  }

  .access-block {
    margin-top: 64px;
  }
  .access-block:first-of-type {
    margin-top: 32px;
  }
  .access-block__title {
    margin-bottom: 16px;
    font-size: 22px;
  }
  [data-page="about"] .info-table th,
  [data-page="about"] .info-table td {
    font-size: 16px;
    padding: 14px 0 12px;
  }
  [data-page="about"] .info-table th {
    width: 34%;
    padding-right: 24px;
  }
  [data-page="about"] .info-table th::after {
    right: 24px;
  }

  [data-page="about"] main .hours {
    width: 100%;
    height: auto;
    padding-inline: 6px;
    border-radius: 8px;
    border-width: 1px;
  }
  [data-page="about"] main .hours thead tr {
    height: 46px;
  }
  [data-page="about"] main .hours thead th {
    font-size: 15px;
    border-width: 1px;
  }
  [data-page="about"] main .hours thead th:first-child {
    width: 30%;
  }
  [data-page="about"] main .hours tbody tr {
    height: 44px;
  }
  [data-page="about"] main .hours tbody th {
    font-size: 13px;
    white-space: normal;
  }
  [data-page="about"] main .hours tbody td {
    font-size: 14px;
  }
  [data-page="about"] main .hours .o {
    font-size: 15px;
  }
  [data-page="about"] main .footer-closed {
    width: 100%;
    margin-top: 14px;
  }
}

@media (max-width: 600px) {
  /* 見出し列を上に積む（common.css と同じ作り）*/
  [data-page="about"] .info-table th,
  [data-page="about"] .info-table td {
    display: block;
    width: auto;
    padding: 10px 4px 10px;
  }
  [data-page="about"] .info-table th {
    padding-right: 4px;
    padding-bottom: 4px;
    border-bottom: none;
  }
  [data-page="about"] .info-table th::after {
    display: none;
  }
  [data-page="about"] .info-table td {
    padding-top: 2px;
  }
}