/* トップページ。Figma「PC_TOP_0624」(node 34799:14)。
   数値は 100% 表示のカンバスから採寸。写真の実寸（288×404）で幅 1440 を確定している。 */

/* ===== FV =====
   Figma に FV のパターンが 3 枚あるので、クロスフェードのスライドショーにしている。
   コピーと SNS は固定。切り替えは assets/js/fv.js が .is-active を付け替えるだけ。 */
/* KV。Figma の比率は 1440:808。
   ただし横に広い画面ではその比率のままだと縦が伸びて、
   モザイクの下の段が画面の外に出てしまう。ヘッダーを引いた
   ビューポートの高さを上限にして、10 人が 1 画面に収まるようにする。 */
.p-fv {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1440 / 808;
}
@media (min-width: 1200px) {
  .p-fv { max-height: calc(100vh - 126px); }
}
@media (min-width: 1200px) and (min-height: 1px) {
  .p-fv { max-height: calc(100svh - 126px); }
}
@media (min-width: 1440px) {
  .p-fv { max-height: calc(100svh - 142px); }
}
.p-fv__slides { position: absolute; inset: 0; }
.p-fv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-fv__slide.is-active { opacity: 1; }
/* ゆっくり寄っていく。表示中のスライドだけ動かす。 */
.p-fv__slide.is-active .p-fv__photo,
.p-fv__slide.is-active .p-fv__mosaic { animation: nkb-fv-zoom 12s ease-out both; }
@keyframes nkb-fv-zoom {
  from { scale: 1; }
  to   { scale: 1.06; }
}

.p-fv__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 5 列 2 段。grid-auto-rows を 1fr にしないと picture が写真の実寸で伸び、
   KV の枠より背が高くなって下の段が切れる。 */
.p-fv__mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  height: 100%;
}
.p-fv__mosaic picture { display: block; min-height: 0; }
.p-fv__mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 中央基準だと上下が同じだけ切れ、頭頂部が額のあたりで切れてしまう。
     上端を残し、切り落としを下側に寄せる。 */
  object-position: 50% 0%;
}
/* 写真の上に敷く暗幕。左下のコピーを読ませるため下側を強くする。 */
/* 写真を沈ませない。全面を一律に暗くすると職員の表情が見えなくなるので、
   コピーが乗る下 1/4 だけを濃くする段階的なスクリムにしている。 */
.p-fv__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .10) 0%,
    rgba(0, 0, 0, .02) 34%,
    rgba(0, 0, 0, .10) 55%,
    rgba(0, 0, 0, .42) 76%,
    rgba(0, 0, 0, .66) 100%
  );
  pointer-events: none;
}
/* 写真そのものも少し起こす。屋内撮影で全体に暗いため。 */
.p-fv__mosaic img,
.p-fv__photo { filter: brightness(1.12) contrast(1.02) saturate(1.04); }

@media (prefers-reduced-motion: reduce) {
  .p-fv__slide { transition: none; }
  .p-fv__slide.is-active .p-fv__photo,
  .p-fv__slide.is-active .p-fv__mosaic { animation: none; }
}


.p-fv__copy {
  position: absolute;
  left: max(40px, calc((100% - var(--w-inner)) / 2));
  bottom: 80px;
  z-index: 2;
  color: var(--c-wh);
}
/* 1 枚目のモザイクでは、下段の顔が KV の高さの 75% あたりで終わる。
   コピーの箱をそれより下に収めたいので、行間と下の余白を詰めている。
   （スマホは sp.css 側で別に指定しているので影響しない） */
.p-fv__title {
  font-family: var(--font-serif);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .45);
}
.p-fv__lead {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 14px rgba(0, 0, 0, .45);
}

/* ===== 見出し（お知らせ / 診療案内 共通） ===== */
.c-heading__ja {
  display: block;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--c-green-deep);
}
.c-heading__en {
  display: block;
  margin-top: 6px;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--c-grey);
}

.c-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-green-deep);
}
.c-link__arrow {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-green-mid);
  border-radius: 50%;
}
.c-link__arrow::before,
.c-link__arrow::after {
  content: "";
  position: absolute;
  background: var(--c-green-mid);
}
.c-link__arrow::before { top: 50%; left: 4px; width: 11px; height: 1px; translate: 0 -50%; }
.c-link__arrow::after {
  top: 50%; right: 4px; width: 5px; height: 1px;
  transform-origin: right center; rotate: 45deg; translate: 0 -50%;
}
.c-link__arrow--sm { width: 16px; height: 16px; border-color: var(--c-grey); }
.c-link__arrow--sm::before { left: 3px; width: 9px; background: var(--c-grey); }
.c-link__arrow--sm::after { right: 3px; width: 4px; background: var(--c-grey); }

/* ===== お知らせ ===== */
.p-news { padding: 120px 0; }
/* お知らせは 1080px のコンテナより内側。Figma 上で 295〜1110px＝約 815px 幅で、ほぼ中央。
   margin-inline:auto が無いと左に張り付く（実際にそうなっていた）。 */
.p-news__inner {
  width: min(100% - 80px, 815px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: start;
}
.p-news__head { padding-top: 4px; }
.p-news__head .c-link { margin-top: 22px; }

.p-news__item { border-bottom: 1px solid rgba(144, 144, 144, .35); }
.p-news__item:first-child { border-top: 1px solid rgba(144, 144, 144, .35); }
.p-news__item a {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  padding: 14px 0;
}
.p-news__date {
  font-family: var(--font-num);
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--c-grey);
}
.p-news__title {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-green-deep);
}

/* ===== 背景の水彩（パステル） =====
   診療案内から下は一枚の水彩の上に乗っている。Figma の adobestock-880980140-preview-1 が
   原寸 1440×1228 でアートボード幅ちょうどなので、そのまま幅 100% で縦にリピートさせる。
   CSS のグラデーションで近似していたが、実物より薄すぎて“反映されていない”状態だった。 */
.l-pastel {
  background-color: var(--c-wh);
  background-image: url("../img/pastel.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}

/* ===== 診療案内 =====
   コンテナ 1080px は書き出し素材から確定：
   主要カードの写真が 522px ×2 + 間 36px = 1080、小カードが 334px ×3 + 間 39px ×2 = 1080。 */
.p-service { padding: 120px 0 140px; }

/* 見出しの左右に伸びる罫。中央寄せの見出しでのみ使う。 */
.c-heading--center { text-align: center; }
.c-heading--center .c-heading__ja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.c-heading--center .c-heading__ja::before,
.c-heading--center .c-heading__ja::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-green-mid);
}

.p-service__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  margin-top: 64px;
}
.p-service__card {
  background: var(--c-wh);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(8, 76, 38, .07);
  overflow: hidden;
}
.p-service__thumb { position: relative; }
.p-service__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 522 / 209;
  object-fit: cover;
}
.p-service__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--c-green-deep);
  color: var(--c-wh);
}
.p-service__badge svg { width: 28px; height: 28px; }

.p-service__body { padding: 46px 30px 40px; text-align: center; }
.p-service__ja {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-green-deep);
}
.p-service__en {
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--c-grey);
}
.p-service__text {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: .03em;
  text-align: left;
}

/* 小カード（外来・入院 …）と、枠線だけのリンクカード（初めての方へ …） */
.p-service__list,
.p-service__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 39px;
}
.p-service__list { margin-top: 60px; }
.p-service__links { margin-top: 46px; }

.p-service__item a {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 90px;
  padding: 0 24px;
  background: var(--c-wh);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(8, 76, 38, .07);
}
.p-service__item--outline a {
  background: transparent;
  border: 1px solid var(--c-green-mid);
  box-shadow: none;
}
.p-service__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-green-mid);
  border-radius: 50%;
  color: var(--c-green-deep);
}
.p-service__icon svg { width: 26px; height: 26px; }
.p-service__label { display: block; }
.p-service__label-ja {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-green-deep);
}
.p-service__label-en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--c-grey);
}
.p-service__item--outline .c-link__arrow { margin-left: auto; }

/* ===== 診療時間・アクセス ===== */
.p-hours { padding: 0 0 130px; }
.p-hours__box {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 46px;
  padding: 40px;
  border: 1px solid var(--c-green-mid);
  border-radius: 10px;
}
.p-hours__table {
  padding: 26px 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d9edd9 0%, #cfe8dd 100%);
}
.p-hours__row { display: grid; grid-template-columns: 84px 1fr; gap: 16px; }
.p-hours__row + .p-hours__row { margin-top: 14px; }
.p-hours__row dt {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-green-deep);
}
.p-hours__row dd { font-size: 15px; line-height: 1.75; }
.p-hours__note { font-size: 13px; }

.p-hours__lead {
  margin-top: 26px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--c-green-deep);
}
.p-hours__tel { margin-top: 12px; text-align: center; }
.p-hours__tel a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-green-deep);
}
.p-hours__tel svg { width: 26px; height: 26px; color: var(--c-green-sns); }
.p-hours__addr { margin-top: 6px; font-size: 15px; text-align: center; }
.p-hours__bus { margin-top: 18px; text-align: center; }
.p-hours__bus span {
  display: block;
  padding: 12px;
  border-radius: 6px;
  background: var(--c-green-mid);
  color: var(--c-wh);
  font-size: 16px;
  font-weight: 700;
}
/* 外来の送迎バス案内ページへのリンク。フッターのバッジと同じ見せ方にそろえる。 */
.p-hours__bus a { display: block; text-decoration: none; }
.p-hours__bus a span { position: relative; padding-right: 30px; transition: opacity .2s; }
.p-hours__bus a span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -50%;
}
.p-hours__bus a:hover span { opacity: .85; }
.p-hours__map img { width: 100%; border-radius: 6px; }

/* ===== 初めての方へ =====
   Figma の採寸（アートボード 1440 / 写真 1440×484）:
   カードは左 183px・幅 400px、写真の上端から 216px の位置（＝写真高さの 44.6%）に置かれ、
   下端は写真より約 60px はみ出す。中央寄せにすると看護師の顔に重なるので、この位置を守る。 */
.p-first { position: relative; z-index: 1; }
.p-first__bg {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 484;
  object-fit: cover;
}
.p-first__wrap {
  position: absolute;
  top: 44.6%;
  left: max(40px, calc((100% - var(--w-inner)) / 2));
}
.p-first__card {
  width: 400px;
  padding: 26px 30px 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(206, 234, 211, .93) 0%, rgba(226, 243, 234, .93) 100%);
}
.p-first__card .c-heading__ja { font-size: 24px; }
.p-first__card .c-heading__ja::before,
.p-first__card .c-heading__ja::after { content: none; }
.p-first__card .c-heading__en { font-size: 15px; }
.p-first__text { margin-top: 16px; font-family: var(--font-serif); font-size: 14px; line-height: 1.9; }
.p-first__card .c-link { display: flex; justify-content: center; margin-top: 14px; }

/* ===== 中村病院の特徴 ===== */
.p-feature { padding: 120px 0 130px; }
.p-feature__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  width: min(100% - 80px, 1240px);
  margin: 90px auto 0;
}
.p-feature__row--rev { direction: rtl; }
.p-feature__row--rev > * { direction: ltr; }
.p-feature__title { display: flex; align-items: flex-start; gap: 22px; }
.p-feature__no {
  font-family: var(--font-num);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-green-mid);
}
.p-feature__ja {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--c-green-deep);
}
.p-feature__text {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--c-green-mid);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.9;
}
.p-feature__body .c-link { margin-top: 22px; }
.p-feature__thumb img { width: 100%; border-radius: 4px; }

/* ===== 対応疾患 ===== */
.p-disease { padding: 120px 0 130px; }
.p-disease__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 39px;
  margin-top: 60px;
}
.p-disease__item a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 90px;
  padding: 0 18px 0 14px;
  background: var(--c-wh);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(8, 76, 38, .07);
}
.p-disease__icon { flex-shrink: 0; width: 58px; height: 58px; }
.p-disease__label {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--c-green-deep);
}
.p-disease__item .c-link__arrow--sm { flex-shrink: 0; }

/* ===== 病院案内 ===== */
.p-info { padding: 120px 0 130px; }
.p-info__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 39px;
  margin-top: 60px;
}
.p-info__item a { position: relative; display: block; border-radius: 6px; overflow: hidden; }
.p-info__item img { display: block; width: 100%; aspect-ratio: 335 / 170; object-fit: cover; }
.p-info__item a::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .34); }
.p-info__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-wh);
}

/* ===== 採用情報 ===== */
.p-recruit { padding: 0 0 130px; }
.p-recruit__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.p-recruit__thumb img { width: 100%; border-radius: 4px; }
.p-recruit__body {
  padding: 46px 40px;
  margin-left: -40px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(223, 240, 224, .92) 0%, rgba(233, 246, 240, .92) 100%);
}
.p-recruit__text { margin-top: 26px; font-family: var(--font-serif); font-size: 15px; line-height: 1.9; }
.p-recruit__body .c-link { display: flex; justify-content: center; margin-top: 24px; }

/* ===== 通院費や生活費でお悩みの方へ ===== */
.p-support { padding: 0 0 130px; }
.p-support__lead {
  margin-top: 44px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.9;
  text-align: center;
  color: var(--c-green-deep);
}
.p-support__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 48px;
}
.p-support__item a {
  display: grid;
  align-content: center;
  gap: 14px;
  height: 140px;
  padding: 16px;
  border-radius: 8px;
  background: var(--c-wh);
  box-shadow: 0 4px 16px rgba(8, 76, 38, .07);
  text-align: center;
}
.p-support__label {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-green-deep);
}
.p-support__item .c-link { justify-self: center; }

/* ===== 関連施設 ===== */
.p-links { padding: 0 0 130px; }
.p-links__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 画像・施設名・説明文・住所・リンクの 5 行。施設名が 1 行でも 2 行でも
     説明文と住所の開始位置が揃うよう、各カードを subgrid で親の行に乗せる。 */
  grid-template-rows: auto auto auto auto auto;
  gap: 36px;
  margin-top: 60px;
}
.p-links__item {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.p-links__item img { width: 100%; aspect-ratio: 241 / 170; object-fit: cover; border-radius: 4px; }
.p-links__name {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--c-green-deep);
}
.p-links__text { margin-top: 16px; font-size: 14px; line-height: 1.9; }
.p-links__info { margin-top: 14px; font-size: 14px; line-height: 1.9; }
.p-links__item .c-link { margin-top: 14px; }

/* ===== よくアクセスされるページ ===== */
.p-popular { padding: 0 0 120px; }
.p-popular__inner { display: grid; grid-template-columns: 232px 1fr; gap: 0 0; }
.p-popular__inner .c-heading__ja { font-size: 26px; line-height: 1.6; }
.p-popular__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 0; }
.p-popular__item a {
  display: block;
  padding: 24px 0 0 0;
  margin-right: 30px;
  border-top: 1px solid var(--c-green-mid);
}
.p-popular__icon { display: block; width: 58px; height: 58px; }
.p-popular__icon--outline {
  display: grid;
  place-items: center;
  border: 1px solid var(--c-green-mid);
  border-radius: 50%;
  color: var(--c-green-mid);
}
.p-popular__icon--outline svg { width: 28px; height: 28px; }
.p-popular__label {
  display: block;
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-green-deep);
}

/* ===== バナー ===== */
.p-banner { padding: 0 0 120px; }
/* Figma では 390 / 390 / 302 の 3 本が間隔 10px で 1 行。比率のまま 1080 に収める。 */
.p-banner__list { display: grid; grid-template-columns: 390fr 390fr 302fr; gap: 10px; }
.p-banner__list img { display: block; width: 100%; border-radius: 4px; }