@charset "UTF-8";
/* index.css — トップページ専用
   寸法はすべて design/top_09.psd の実測値（**@1x = PSD実測 ÷ 2**）。
   PSDに置かれた「縦250」等の寸法注釈レイヤーはPSD px（=@1xの2倍）なので使わない。 */

/* ---- FV（メインビジュアル）-----------------------------------------------
   写真・NEW OPEN・内覧会・診療科目一覧は fv_img 自体に焼き込まれた1枚画像。
   キャッチコピー＋鳥装飾だけ別レイヤーで重ねる。 */
/* FVの地色: 上はミント（ヘッダーから続く）、波から下は白。
   fv_img.png は写真のまわりが**透過**なので、.sec-fv の背景がそのまま透けて出る。
   波は下層ページ（.page-hero::before）と同じ wave_02.png・同じ作り（塗りが白・上が透明）。
   PSD実測 @1x（.sec-fv の上端＝ヘッダー下端 を 0 とする / 画像幅1399pxのとき）:
     123 … 波の上端    405 … 波の下端 ＝ ミント帯の下端（以降は main の白）
     画面左端でミントが白に変わるのは 123+140（画像左端の塗り上端）＝263
   画像は width:100% / max-width:1399 で幅に比例して縮むので、
   波とミント帯も画像幅 `--fvw` に比例させる（固定pxだと狭い画面で写真の下にはみ出す）。
   1.0722 は 1500/1399（wave_02.png はデザイン幅1500基準）。
   鳥の右ブリードは切りたいが下端は白地へはみ出させたいので、clip は横だけ。 */
.sec-fv {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
/* FVの写真そのものが h1（見出しテキストは img の alt が持つ）。
   h1 の UA 既定（font-size 2em・margin 0.67em）を消して、
   これまで .sec-fv>picture が担っていた役割をそのまま引き継がせる。 */
.sec-fv>.fv-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
}
.sec-fv>.fv-title>picture {
  position: relative;
  z-index: 1;
}
.sec-fv::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  background: url("../img/common/wave_02.png") repeat-x center top;
  /* 下層FVと同じ左右反転（右が山・左が谷）*/
  transform: scaleX(-1);
  pointer-events: none;
}
@media (min-width: 769px) {
  .sec-fv {
    --fvw: min(100vw, 1399px);
    background: linear-gradient(var(--mint), var(--mint)) no-repeat top center / 100% calc(var(--fvw) * .2894);
  }
  .sec-fv::before {
    top: calc(var(--fvw) * .0879);
    height: calc(var(--fvw) * .2016);
    background-size: calc(var(--fvw) * 1.0722) auto;
  }
}
.sec-fv>.fv-title>picture,
.sec-fv>.fv-title>picture img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  .sec-fv>.fv-title>picture img {
    max-width: 1399px;
    margin-inline: auto;
  }
}

.fv-catch {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(1100 * var(--s));
  margin-inline: auto;
  padding: calc(100 * var(--s)) 0 calc(40 * var(--s));
  min-height: calc(230 * var(--s));
}
.fv-catch__text {
  position: relative;
  z-index: 1;
  font-family: var(--yugo);
  font-size: calc(26.5 * var(--s));
  font-weight: 600;
  line-height: 1.9;
  color: #004A8E;
  white-space: nowrap;
}
/* 鳥+山：右端ブリード（コンテナ右余白ぶん右へ＝ビューポート右端へ）。
   PSD実測 776.5×265.5、右端はデザイン幅1500pxから46px外へ出る。
   画像は top_09.psd の「01_FV > FV下 > fv-bird.png8」を切り出したもの。
   ティザーサイト由来の fv-bird-live.png は山が**緑**でPSD（淡い青）と違うため差し替えた。 */
.fv-catch__bird {
  position: absolute;
  z-index: 0;
  top: 60.4%;
  right: calc((calc(1100 * var(--s)) - 100vw) / 2 - calc(46 * var(--s)));
  transform: translateY(-50%);
  width: calc(776.5 * var(--s));
}
/* PSD: 線2px #3CB8C3 / 文字 #3CB8C3 / 角丸5px
   （ティザー由来の「文字=緑・線=青1px」から修正）
   **地は白**。PSD実測は #D9F1F3 だが、ユーザー指示で白にしている。青くしないこと。 */
.fv-box {
  color: #3CB8C3;
  background: #fff;
  line-height: 1.14;
  border: 2px solid #3CB8C3;
  border-radius: calc(5 * var(--rs));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5px calc(8 * var(--s));
  vertical-align: middle;
  box-sizing: border-box;
  margin-inline: .12em;
  position: relative;
  top: -0.14em;
}
.fv-box:first-child {
  margin-left: 0;
}

@media (max-width: 768px) {
  .fv-catch {
    width: 96%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 48px 0 24px;
    min-height: 0;
  }
  /* SPの波（ユーザー指示）。FV画像は fv_img_sp（1000×1333＝比率1.333）で
     高さ＝100vw×1.333＝133.3vw。「FVの下3割は全面白」＝ミント帯を高さの70%で止める
     → 93.3vw。波は下層SPと同じスケール（画像幅820px相当＝218.7vw、高さはその 282/1500）で、
     下端をミント帯の下端に合わせるので上端は 93.3−41.1＝52.2vw。
     この位置だと波のラインが縦書きの「家族みんなが」に重なる。 */
  .sec-fv {
    background: linear-gradient(var(--mint), var(--mint)) no-repeat top center / 100% 28%;
  }
  .sec-fv::before {
    top: 26vw;
    height: 41.1vw;
    background-position-x: 170%;
    background-size: 118.7vw 100%;
  }
  .fv-catch__text {
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: -.03em;
    white-space: normal;
    text-align: center;
  }
  .fv-box {
    padding: 1px 5px;
    margin-inline: .2em;
    border-width: 1px;
  }
  .fv-catch__bird {
    position: relative;
    transform: none;
    left: auto;
    right: -11%;
    top: auto;
    width: 100%;
    max-width: 380px;
  }
}

/* ---- ご来院の方へ -------------------------------------------------------
   PSD「01_FV > お知らせ進捗」実測:
     枠 852×177 / 角丸10 / 線2px #3CB8C3（外側）/ 地 #FFFFFF
     見出し 24px Bold #004A8E 字間.025em 中央、枠上端→文字インク上端 38
     本文 16px Regular 行送り2.0 #333333 **左揃え**、枠の左右から130.5px内側
     FVキャッチのインク下端→枠の上端 124.5 */
.visit-sec {
  padding: calc(74.5 * var(--s)) 0 0;
}
.visit-box {
  width: min(100% - 48px, calc(852 * var(--s)));
  margin-inline: auto;
  padding: calc(32 * var(--s)) 0 calc(37.5 * var(--s));
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: calc(10 * var(--rs));
}
.visit-box__title {
  text-align: center;
  font-size: calc(24 * var(--s));
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.4;
  color: #004a8e;
}
.visit-box__text {
  width: min(100% - 96px, calc(591 * var(--s)));
  margin: calc(9 * var(--s)) auto 0;
  line-height: 2;
  color: #333;
}

/* ---- お知らせ -----------------------------------------------------------
   PSD「02_お知らせ」実測:
     見出し 36px Bold #004A8E 字間.025em（英字サブ「NEWS」はPSDに無い）
     リストは見出しの右 213px から、幅 888.5
     日付・本文とも 16px Regular #1B1C1C（日付だけ字間.025em）
     日付カラム 131.5 ／ 区切り線は各行の**下だけ**（1行目の上には無い）
     線は **1px** #BDC0BD（PSD実測は2pxだが、パンくず等と同じくユーザー指示で細くしている）
     ボタン 251.5×51.5 は右端揃え、最終行の線から40.5下 */
.news-preview {
  display: grid;
  grid-template-columns: calc(213 * var(--s)) 1fr;
  align-items: start;
}
.news-preview>.head-inline {
  grid-column: 1;
  grid-row: 1;
}
.news-list {
  grid-column: 2;
  grid-row: 1;
  padding-top: calc(10 * var(--s));
}
.news-list__item {
  display: grid;
  grid-template-columns: calc(131.5 * var(--s)) 1fr;
  padding-bottom: calc(19 * var(--s));
  border-bottom: 1px solid #BDC0BD;
}
.news-list__item+.news-list__item {
  padding-top: calc(25 * var(--s));
}
/* 各項目を記事詳細へのリンクにしたので、押せることが分かるようにする。
   お知らせ一覧ページの a.news-index__item:hover と揃えている。 */
a.news-list__item {
  /* ホバーは opacity で薄くしていたが分かりにくいので、文字色を変える。
     日付と本文は #1B1C1C を自分で持っていて a の色を継がないので、
     下の :hover で子にも当てている（片方だけだと日付が黒のまま残る）。 */
  transition: color .2s;
}
a.news-list__item:hover {
  color: var(--teal);
}
a.news-list__item:hover .news-list__date,
a.news-list__item:hover .news-list__text {
  color: var(--teal);
}
.news-list__date {
  padding-left: calc(3.5 * var(--s));
  font-size: calc(17 * var(--s));
  line-height: 1.4;
  letter-spacing: .025em;
  color: #1B1C1C;
  transition: color .2s;
  white-space: nowrap;
}
.news-list__text {
  line-height: 1.4;
  color: #1B1C1C;
  transition: color .2s;
}
.news-preview__more {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-top: calc(40.5 * var(--s));
}

/* ---- トップページのCTAボタン -------------------------------------------
   PSD実測（お知らせ／院長挨拶／診療内容カード で共通の作り）:
     幅は文字数によらず固定 251〜252 ／ 角丸ピル ／ 文字 15px Medium #FFF
     矢印の白丸 26.5 は右端から 12.5 ／ 文字はボタン幅から右13pxを引いた範囲の中央
   共通の .btn（46px / 12px）はそのままにして、トップだけこの修飾子で上書きする。 */
.btn--top {
  position: relative;
  width: calc(251.5 * var(--s));
  height: calc(51.5 * var(--s));
  padding: 0 calc(13 * var(--s)) 0 0;
  font-size: calc(16 * var(--s));
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
}
.btn--top .btn__arrow {
  position: absolute;
  right: calc(12.5 * var(--s));
  top: 50%;
  width: calc(26.5 * var(--s));
  height: calc(26.5 * var(--s));
  transform: translateY(-50%);
}
.btn--teal.btn--top:hover .btn__arrow {
  transform: translate(4px, -50%);
}

/* ---- 診療カレンダー -----------------------------------------------------
   PSD「04_カレンダー」実測:
     見出し 36px Bold #004A8E 中央（英字サブ「Calendar」はPSDに無い）
     左ブロック 201.5 ＋ アキ54.5 ＋ 表 721（外枠2px込み）＝ 977 を中央寄せ
     年 30px Roboto Bold ／ 月 115px Roboto Medium ／ 矢印は画像（PSDのYuseiMagicは無い）
     凡例は**表の下ではなく左ブロックの中**に縦並び（丸25.5・ラベル20px Medium・送り41）
     表: 角丸7・外枠2px #12458C・内側の罫線1px #6D889F
        ヘッダー行33.5（地 #12458C）／ 日付行66
        日付 20px Roboto Bold ／ 注記 16px、いずれも**中央揃え**（左揃えではない） */
/* 診療カレンダーは clinic-calendar プラグインが出力する。ここは PSD 実測の
   寸法・色を cc-* クラスへ当てる層で、プラグイン側は汎用の em 値しか持たない。
   読み込み順は functions.php で front.css → index.css に固定してある。

   横幅だけは PSD（977）に従わず、左200＋アキ80＋表840＝1120 で .container を
   いっぱいに使う。PSD のままだと両脇が空いて他セクションと頭が揃わないうえ、
   プラグインは日毎の注記を可変で吐くので、表は広いほうが折り返しにくい。 */
.sec-calendar .cc-calendar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(80 * var(--s));
  margin-top: calc(44 * var(--s));
}
.sec-calendar .cc-calendar__side {
  width: calc(200 * var(--s));
  padding-top: calc(4.5 * var(--s));
}
.sec-calendar .cc-calendar__header {
  text-align: center;
}
/* PSD は「2026」「11」と数字だけを組んでいる。「年」「月」の字は読み上げ用に
   マークアップには残し、表示だけ畳む（数字は下の -num で元のサイズに戻す） */
.sec-calendar .cc-calendar__year,
.sec-calendar .cc-calendar__month {
  font-size: 0;
}
.sec-calendar .cc-calendar__year-num {
  display: block;
  font-family: var(--num);
  font-weight: 700;
  font-size: calc(30 * var(--s));
  line-height: 1;
  color: var(--navy);
}
.sec-calendar .cc-calendar__nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: calc(7.5 * var(--s));
}
.sec-calendar .cc-calendar__month-num {
  font-family: var(--num);
  font-weight: 500;
  font-size: calc(115 * var(--s));
  line-height: 1;
  color: var(--navy);
}
/* PSDの「＜」「＞」は YuseiMagic の全角記号で環境に無いため、PSDから切り出した画像を使う */
.sec-calendar .cc-calendar__nav {
  width: calc(20 * var(--s));
  height: calc(29.5 * var(--s));
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
  text-indent: calc(-9999 * var(--s));
}
/* プラグイン既定の ▲▼ は画像に置き換えるので消す */
.sec-calendar .cc-calendar__nav::before {
  content: none;
}
.sec-calendar .cc-calendar__nav:hover,
.sec-calendar .cc-calendar__nav:focus-visible {
  background-color: transparent;
}
.sec-calendar .cc-calendar__nav--prev {
  margin-right: calc(17 * var(--s));
  background-image: url("../img/top/cal-arrow-prev.png");
}
.sec-calendar .cc-calendar__nav--next {
  margin-left: calc(15.5 * var(--s));
  background-image: url("../img/top/cal-arrow-next.png");
}
.sec-calendar .cc-calendar__legend {
  display: block;
  margin: calc(21 * var(--s)) 0 0 calc(33.5 * var(--s));
  padding: 0;
  list-style: none;
}
.sec-calendar .cc-calendar__legend-item {
  display: flex;
  align-items: center;
  height: calc(25.5 * var(--s));
  font-size: calc(20 * var(--s));
  font-weight: 500;
  color: #333;
}
.sec-calendar .cc-calendar__legend-item+.cc-calendar__legend-item {
  margin-top: calc(15.5 * var(--s));
}
/* 凡例の丸はセルの地色より濃い色を使う（PSD実測）。セル側は管理画面が流し込む
   --cc-cell-bg のままなので、ここだけ上書きする */
.sec-calendar .cc-calendar__legend-swatch {
  width: calc(25.5 * var(--s));
  height: calc(25.5 * var(--s));
  border: 0;
  border-radius: 50%;
  margin-right: calc(11 * var(--s));
  flex-shrink: 0;
}
.sec-calendar .cc-calendar__legend-item--closed .cc-calendar__legend-swatch {
  background: var(--cal-pink);
}
.sec-calendar .cc-calendar__legend-item--am_closed .cc-calendar__legend-swatch {
  background: var(--cal-yellow);
}
.sec-calendar .cc-calendar__legend-item--pm_closed .cc-calendar__legend-swatch {
  background: var(--cal-purple);
}
.sec-calendar .cc-calendar__legend-item--duty .cc-calendar__legend-swatch {
  background: var(--cal-green);
}
.sec-calendar .cc-calendar__body {
  flex: 0 0 auto;
  width: calc(840 * var(--s));
}
.sec-calendar .cc-calendar__table {
  width: 100%;
  border: 2px solid var(--navy);
  border-radius: calc(7 * var(--rs));
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  table-layout: fixed;
  background: #fff;
}
.sec-calendar .cc-calendar__wday {
  height: calc(33.5 * var(--s));
  padding: 0;
  background: var(--navy);
  color: #fff;
  font-size: calc(20 * var(--s));
  font-weight: 600;
  border: 0;
  border-right: 1px solid var(--cal-line);
  line-height: 1;
}
.sec-calendar .cc-calendar__wday:last-of-type {
  border-right: none;
}
.sec-calendar .cc-calendar__wday--sun {
  color: #FFB3C7;
}
.sec-calendar .cc-calendar__wday--sat {
  color: #BEEDFE;
}
.sec-calendar .cc-calendar__cell {
  height: calc(66 * var(--s));
  padding: calc(3 * var(--s)) 2px calc(5 * var(--s));
  text-align: center;
  vertical-align: top;
  border: 0;
  border-right: 1px solid var(--cal-line);
  border-bottom: 1px solid var(--cal-line);
  font-size: calc(17 * var(--s));
}
.sec-calendar .cc-calendar__cell:last-child {
  border-right: 0;
}
.sec-calendar .cc-calendar__table tbody tr:last-child .cc-calendar__cell {
  border-bottom: 0;
}
/* 空マスもカレンダーの地と同じ白。プラグイン既定の灰色は使わない */
.sec-calendar .cc-calendar__cell--blank {
  background: #fff;
}
.sec-calendar .cc-calendar__date {
  display: block;
  font-family: var(--num);
  font-weight: 700;
  font-size: calc(20 * var(--s));
  line-height: 1.05;
  color: #333;
}
.sec-calendar .cc-calendar__cell--sun .cc-calendar__date,
.sec-calendar .cc-calendar__cell--holiday .cc-calendar__date {
  color: #E2295A;
}
.sec-calendar .cc-calendar__cell--sat .cc-calendar__date {
  color: #155DD5;
}
.sec-calendar .cc-calendar__status,
.sec-calendar .cc-calendar__holiday,
.sec-calendar .cc-calendar__field {
  display: block;
  font-size: calc(17 * var(--s));
  font-weight: 500;
  line-height: 1.15;
  color: #333;
}
.sec-calendar .cc-calendar__holiday,
.sec-calendar .cc-calendar__field--important {
  color: #E2295A;
}
/* 平日は地色も注記も無いのが元のデザイン。ラベルは読み上げ用に残して表示だけ消す */
.sec-calendar .cc-calendar__cell--status-regular .cc-calendar__status {
  display: none;
}
/* 当日の枠は表の外枠と同じ紺 */
.sec-calendar .cc-calendar__cell--today {
  box-shadow: inset 0 0 0 2px var(--navy);
}

/* ---- 診療内容 -----------------------------------------------------------
   PSD「03_診察内容」実測（top_09 でカード型に作り替えられた）:
     見出し 36px Bold #004A8E ＋ リード16px（行送り1.9375）を 313.5px の2カラム
     カード 351.5×251.5 / 角丸10 / 地 #ECF8FA、横アキ23.5・縦アキ64
     アイコン円 128.5（白地・**線4px #ECF8FA**）はカード上端から**49.5px上にはみ出す**
       → PSDの「イラスト」グループを円ごと切り出した1枚画像（@2x 258px）。CSSで円を描き直さない
       ※ psd-tools の bbox は線の外端を1px取りこぼすので、bbox（127）で円形マスクを掛けると
         枠が4px→3pxに痩せる。実測の直径（@2x 257）でマスクすること
     見出し 24px Bold #333 字間.025em 中央（カード上端→インク上端 87.5）
     説明 16px Regular #333 行送り1.6875 **左揃え**（左アキ33.5・組み幅270）
     ボタン 251×41 角丸20 #3CB8C3（カード下端→ボタン下端 26） */
.services__intro {
  display: grid;
  grid-template-columns: calc(313.5 * var(--s)) 1fr;
  align-items: start;
}
.services__intro p {
  line-height: 1.9375;
  color: #333;
}
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(64 * var(--s)) calc(23.5 * var(--s));
  margin-top: calc(30 * var(--s));
  padding-top: calc(48.5 * var(--s));
}
.service-card {
  position: relative;
  min-height: calc(251.5 * var(--s));
  padding: calc(80 * var(--s)) calc(33.5 * var(--s)) calc(26 * var(--s));
  background: var(--mint);
  border-radius: calc(10 * var(--rs));
  display: flex;
  flex-direction: column;
}
/* セクションがミント地のときはカードが地色と同化するので白く抜く */
.section--mint .service-card {
  background: var(--white);
}
.service-card__icon {
  position: absolute;
  top: calc(-50 * var(--s));
  left: 50%;
  transform: translateX(-50%);
  width: calc(125 * var(--s));
}
.service-card__icon img {
  display: block;
  width: 100%;
  height: auto;
}
.service-card__label {
  text-align: center;
  font-size: calc(24 * var(--s));
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.4;
  color: #333;
}
.service-card__desc {
  width: 100%;
  margin-top: calc(5.4 * var(--s));
  line-height: 1.6875;
  color: #333;
}
.service-card__btn {
  width: calc(251 * var(--s));
  height: calc(41 * var(--s));
  margin: calc(11 * var(--s)) auto 0;
  padding: 0 calc(14 * var(--s)) 0 0;
  position: relative;
  font-size: calc(16 * var(--s));
  font-weight: 500;
  letter-spacing: 0;
  border-radius: calc(20 * var(--rs));
}
.service-card__btn .btn__arrow {
  position: absolute;
  right: calc(10 * var(--s));
  top: 50%;
  width: calc(26.5 * var(--s));
  height: calc(26.5 * var(--s));
  transform: translateY(-50%);
}
.btn--teal.service-card__btn:hover .btn__arrow {
  transform: translate(4px, -50%);
}

/* ---- 院長挨拶 -----------------------------------------------------------
   PSD「05_挨拶」実測:
     枠 566.5×52 / **角丸5**（ピルではない）/ 線2px #3CB8C3 / 文字36px Bold #3CB8C3
     サブ 30px Bold #004A8E 行送り1.6667 ／ 本文16px 行送り1.9375（組み幅545.5）
     ボタン 251.5×51.5
     写真 大 401.5×501 角丸10 ／ 小 218.5×273.5 角丸10（**白フチ・影は無い**）
     小は大に対して 左 -21%・下 -11.6%・幅 54.4% */
.greeting {
  position: relative;
}
.greeting__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(401.5 * var(--s));
  gap: 0 calc(152 * var(--s));
  align-items: start;
}
.greeting__body h2 {
  margin-bottom: 0;
}
.greeting__body h2 .hl {
  display: inline-block;
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: calc(5 * var(--rs));
  padding: calc(6 * var(--s)) calc(14 * var(--s));
  color: var(--teal);
  font-size: calc(36 * var(--s));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.greeting__body .sub {
  margin: calc(7.5 * var(--s)) 0 0;
  font-size: calc(30 * var(--s));
  font-weight: 700;
  line-height: 1.6667;
  color: #004a8e;
}
.greeting__body>p:not(.sub) {
  max-width: calc(556 * var(--s));
  margin-top: calc(15 * var(--s));
  line-height: 1.9375;
  color: #333;
}
.greeting__body>p:not(.sub)+p {
  margin-top: calc(8 * var(--s));
}
.greeting__body .btn {
  margin-top: calc(35 * var(--s));
}
.greeting__photos {
  position: relative;
}
.greeting__photos .p1 {
  border-radius: calc(10 * var(--rs));
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/5;
  margin-left: auto;
}
.greeting__photos .p1 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.greeting__photos .p2 {
  position: absolute;
  left: -21%;
  bottom: -11.6%;
  width: 54.4%;
  border-radius: calc(10 * var(--rs));
  overflow: hidden;
}
.greeting__photos .p2 img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 問診票ダウンロード -------------------------------------------------
   design/top_09.psd「問診票」実測（top_07 から寸法変更なし。@1x = PSD実測÷2）:
     枠 852×267.5 / 角丸10 / 線2px #3CB8C3（外側）/ 地 #FFFFFF
     枠の上端→見出しの行ボックス上端 33 ／ ボタン下端→枠の下端 34
     見出し 24px Bold・字間0.025em・#004A8E・中央
     本文 16px Regular・行送り2.0・#333333・**左揃え**で枠の左端から130px(=15.3%)
     ボタン 251×51.5 / 角丸ピル / 文字15px Medium / アイコン円26 / 右アキ12.5
     挨拶セクションの内容の下端→枠の上端 120.5
   本文が中央ではなく左寄りなのはPSDの実測どおり。中央寄せにしないこと。 */
.form-dl {
  width: min(100% - 48px, calc(852 * var(--s)));
  margin: calc(120 * var(--s)) auto 0;
  padding: calc(33 * var(--s)) 0 calc(34 * var(--s));
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: calc(10 * var(--rs));
}
.form-dl__title {
  text-align: center;
  font-size: calc(24 * var(--s));
  font-weight: 700;
  letter-spacing: .025em;
  /* body の 1.9 を継ぐと行ボックスが45.6pxになり枠が16px高くなる */
  line-height: 1.4;
  color: #004a8e;
}
.form-dl__lead {
  width: fit-content;
  max-width: calc(100% - 48px);
  /* PSD: 枠の左端から130px（852pxの15.3%）。右は auto で流す */
  margin: calc(10 * var(--s)) auto 0 15.3%;
  line-height: 2;
  color: #333;
}
.form-dl__btn {
  margin-top: calc(10 * var(--s));
  text-align: center;
}
/* PSDのこのボタンは他のCTA（46px/12px）より大きい */
.form-dl .btn {
  height: calc(51.5 * var(--s));
  padding: 0 calc(12.5 * var(--s)) 0 calc(44 * var(--s));
  gap: calc(21 * var(--s));
  font-size: calc(16 * var(--s));
  font-weight: 500;
  letter-spacing: 0;
}
.form-dl .btn__arrow {
  width: calc(26 * var(--s));
  height: calc(26 * var(--s));
}

/* ---- セクションの上下アキ（トップページのみ）-----------------------------
   PSD実測のセクション間は 120px 前後で、共通CSSの 140px より小さい。
   共通の .section を変えると全ページに効くので、ここではトップだけ上書きする。
   （下層ページも合わせるかは要相談）*/
/* padding-top は「セクションの地色の上端 → 中身の上端」＝PSD実測そのまま。
   padding-bottom は「中身の下端 → 次セクションの地色の上端（＝見た目のアキ）＋ 60」。
   +60 は .section + .section の margin-top:-60px（角丸の食い込み）を打ち消す分。
   共通CSSの .section + .section より詳細度を上げるため .section と併記している。 */
main>.section.sec-news {
  padding: calc(102 * var(--s)) 0 calc(182 * var(--s));
}
main>.section.sec-calendar {
  padding: calc(117.8 * var(--s)) 0 calc(182.5 * var(--s));
}
main>.section.sec-services {
  padding: calc(119 * var(--s)) 0 calc(187.5 * var(--s));
}
main>.section.greeting {
  padding: calc(127 * var(--s)) 0 calc(98 * var(--s));
}

/* ---- レスポンシブ ------------------------------------------------------- */
@media (max-width: 768px) {
  /* --- ここから: 削除した中間ブレークポイント(900/1200px)にあった「PCの
     多カラムを解除する」指定。寸法は var(--s) で等比に縮むが、カラム構成の
     切り替えだけは等比化では代替できないのでSP側で持つ --- */
  .news-preview {
    grid-template-columns: 1fr;
  }
  .news-preview>.head-inline {
    grid-row: auto;
    grid-column: 1;
  }
  .news-list {
    grid-column: 1;
    grid-row: auto;
    padding-top: 24px;
  }
  .news-preview__more {
    grid-column: 1;
    grid-row: auto;
  }
  /* 表(840)＋左(200)＋アキ(80)＝1120 が入らないので縦積み＋凡例は横並びに */
  .sec-calendar .cc-calendar {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .sec-calendar .cc-calendar__legend {
    margin: 8px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    flex-direction: row;
    justify-content: center;
    order: 2;
  }
  .sec-calendar .cc-calendar__legend-item+.cc-calendar__legend-item {
    margin-top: 0;
  }
  .services__intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* 3カラム→2カラム。600px以下でさらに1カラムになる */
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .greeting__inner {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .greeting__photos .p2 {
    width: 44%;
    left: 0;
    right: 0;
  }
  /* --- ここまで --- */

  /* --- font-size 以外もPC値を継承すると狭くなりすぎる箇所。
     いずれも375pxでの実効値が一桁pxになっていた --- */
  .form-dl {
    width: calc(100% - 48px);
  }
  .news-list__item {
    padding-bottom: 12px;
  }
  .news-list__item+.news-list__item {
    padding-top: 14px;
  }
  .news-preview__more {
    margin: 24px auto 0;
  }
  /* カレンダーは縦積みになるので左ブロックの固定幅(200)は解除する。
     display:contents で side を透過させ、年月と凡例を .cc-calendar 直下の
     並び順に混ぜて、凡例だけを表の下（order:2）へ送る */
  .sec-calendar .cc-calendar__side {
    display: contents;
    width: auto;
  }
  .sec-calendar .cc-calendar__nav {
    width: 12px;
    height: 18px;
  }
  .sec-calendar .cc-calendar__nav--prev {
    margin-right: 12px;
  }
  .sec-calendar .cc-calendar__nav--next {
    margin-left: 11px;
  }
  /* カードはアイコンが上へ張り出す作り。SPの本文サイズに合う寸法に組み直す */
  .service-card {
    min-height: 0;
    padding: 40px 0 20px;
    border-radius: 10px;
  }
  .service-card__icon {
    top: -32px;
    width: 64px;
  }
  /* 本文の最大幅(556px)はSPでは不要。残すと173pxまで縮む */
  .greeting__body>p:not(.sub) {
    max-width: none;
  }
  .greeting__body .btn {
    display: flex;
    margin: 24px auto 0;
  }

  /* PC値は var(--s) で縮むが、SPはSP用の値を明示する（未指定だと
     375pxでカード見出し24px→7.5px まで落ちる）。本文は body 継承なので出さない */
  /* 日付は本文と同じサイズだが、独立して調整できるよう明示指定を残す
     （お知らせ一覧の .news-index__date と同じ扱い）*/
  .news-list__item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .news-list__date {
    font-size: 16px;
  }
  .service-card__label {
    font-size: 20px;
  }
  .calendar__year {
    font-size: 20px;
    margin-bottom: 8px;
  }

  main>.section.sec-news {
    padding: 64px 0 132px;
  }
  main>.section.sec-calendar {
    padding: 72px 0 132px;
  }
  main>.section.sec-services {
    padding: 72px 0 132px;
  }
  main>.section.greeting {
    padding: 72px 0 20px;
  }
  .visit-sec {
    padding-top: 24px;
  }
  .visit-box {
    /* PC値 min(100% - 48px, calc(852 * var(--s))) は375pxで265pxまで縮む */
    width: calc(100% - 48px);
    padding: 24px 20px 26px;
    border-width: 1px;
  }
  .visit-box__title {
    font-size: 19px;
  }
  .visit-box__text {
    width: auto;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.9;
  }

  .head-inline, .sec-head {
    font-size: 26px;
  }
  .sec-calendar .cc-calendar {
    margin-top: 28px;
  }
  .sec-calendar .cc-calendar__body {
    width: 100%;
  }
  .sec-calendar .cc-calendar__table {
    width: 100%;
    border-width: 1px;
  }
  .sec-calendar .cc-calendar__wday {
    height: 28px;
    font-size: 16px;
  }
  .sec-calendar .cc-calendar__cell {
    height: 54px;
    min-height: 0;
    padding: 3px 1px 4px;
  }
  .sec-calendar .cc-calendar__date {
    font-size: 16px;
  }
  .sec-calendar .cc-calendar__status,
  .sec-calendar .cc-calendar__holiday,
  .sec-calendar .cc-calendar__field {
    font-size: 10px;
    line-height: 1.3;
  }
  .sec-calendar .cc-calendar__year-num {
    font-size: 16px;
  }
  .sec-calendar .cc-calendar__month-num {
    font-size: 50px;
  }
  .sec-calendar .cc-calendar__legend-item {
    font-size: 13px;
    height: 20px;
    gap: 4px;
  }
  .sec-calendar .cc-calendar__legend-swatch {
    width: 16px;
    height: 16px;
    margin-right: 0;
  }

  .service-cards {
    margin-top: 20px;
    padding-top: 32px;
    gap: 64px 16px;
  }
  .service-card__desc {
    width: auto;
    margin-top: 8px;
    margin-inline: 24px;
  }
  .service-card__btn {
    width: min(100% - 48px, 251px);
    height: 40px;
    border-radius: 30px;
    font-size: 15px;
    margin-top: 12px;
  }

  .greeting__body h2 .hl {
    font-size: 20px;
    padding: 6px 6px;
    white-space: normal;
    border-width: 1px;
  }
  .greeting__body .sub {
    font-size: 20px;
  }

  /* 問診票: 枠が狭くなるので本文の左寄せ(15.3%)はやめて左右均等の余白にする */
  .form-dl {
    margin-top: calc(10.6vw + 30px);
    padding: 24px 20px 26px;
    border-width: 1px;
  }
  .form-dl__title {
    font-size: 19px;
  }
  .form-dl__lead {
    width: auto;
    max-width: none;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.9;
  }
  .form-dl__btn {
    margin-top: 18px;
  }
  .form-dl .btn {
    height: 46px;
    padding: 0 10px 0 20px;
    gap: 12px;
    font-size: 15px;
  }
  .form-dl .btn__arrow {
    width: 24px;
    height: 24px;
  }
  /* common.css の @768 が持つ素の .btn__arrow（詳細度0,1,0）では
     この2つ（0,2,0）に効かないので、個別にSP値を持たせる。
     未指定だと丸が calc(26.5 * var(--s)) ＝ 375pxで8.2px まで潰れ、
     中の矢印(11×9px)が丸からはみ出す */
  .btn--top .btn__arrow {
    right: 12px;
    width: 24px;
    height: 24px;
  }
  .service-card__btn .btn__arrow {
    right: 10px;
    width: 24px;
    height: 24px;
  }

  .btn--top {
    width: min(100% - 48px, 251.5px);
    height: 46px;
    font-size: 15px;
  }
}

/* 問診票の本文: 375px（枠327px→本文欄283px）だと14pxで1行目の
   「当院の問診票をこちらからご覧いただけます。」(21字=294px)が収まらず
   「す。」だけが2行目に落ちる。13pxなら273pxで収まる。
   2行目の29字はどのサイズでも1行に入らないので折り返す。
   **768pxブロックより後ろに置くこと**（同詳細度で後勝ちのため）。*/
/* カードは 600px を境に1列。**768pxブロックより後ろに置くこと**（同詳細度で後勝ち）*/
@media (max-width: 600px) {
  .service-cards {
    grid-template-columns: 1fr;
    gap: 54px 0;
    max-width: 400px;
    margin-inline: auto;
  }
}