/**
 * common.css — PC基準スタイル（桃寿苑 TOP）
 *
 * モックアップ: docs/mockups/202607_桃寿苑様_サイトリニューアル_TOP.svg/png（1280pxカンバス）
 * 色・font-size は tokens.css のトークン参照のみ。余白・角丸は5.5pxグリッド。
 */

body {
  font-family: "YuKyokasho Yoko", "Klee One", Meiryo, sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
}


.sp-only {
  display: none;
}


/* 電話発信はSPのみ。PCで押しても発信ダイアログが出ないよう無効化する
   （解除は mobile.css 側） */
a[href^="tel:"] {
  pointer-events: none;
}


/* ── 共通部品 ─────────────────────────────────────────────── */

.section-title {
  width: var(--container);
  margin: 0 auto 55px;
  color: var(--color-font);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}


.section-title::after {
  content: "";
  display: block;
  width: 198px;
  height: 2px;
  margin: 16.5px auto 0;
  background-color: var(--color-heading-line);
}


.section-title--green::after {
  background-color: var(--color-heading-line-green);
}


.btn-center {
  display: flex;
  justify-content: center;
}


.icon-arrow {
  width: 16.5px;
  height: 11px;
}


/* 詳しく見る（白ピル＋ピンク枠＋ソリッド影） */
.btn-more,
.btn-more:visited {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 49.5px;
  padding: 0 33px;
  background-color: var(--color-white);
  border: 2px solid var(--color-secondary);
  border-radius: 27.5px;
  box-sizing: border-box;
  box-shadow: 3px 4px 0 var(--color-btn-shadow);
  color: var(--color-primary);
  font-size: var(--fs-base);
  font-weight: 700;
  transition: all var(--duration) ease;
}


.btn-more:hover {
  background-color: var(--color-btn-more-hover);
}


.btn-more .icon-arrow {
  background: url(../images/common/arrow.svg) no-repeat center / contain;
}


/* 塗りボタン（ピンクグラデpill） */
.btn-fill,
.btn-fill:visited {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 49.5px;
  padding: 0 27.5px;
  background: linear-gradient(90deg, var(--color-grad-pink-start), var(--color-grad-pink-end));
  border-radius: 27.5px;
  box-shadow: 3px 4px 0 var(--color-btn-shadow);
  color: var(--color-white);
  font-size: var(--fs-base);
  font-weight: 700;
  transition: all var(--duration) ease;
}


.btn-fill:hover {
  background: var(--color-white);
  color: var(--color-primary);
}


/* 矢印は白とテーマ色の2枚を重ね、hoverでopacityをクロスフェードさせる */
.btn-fill .icon-arrow {
  position: relative;
  background: url(../images/common/arrow-white.svg) no-repeat center / contain;
}


.btn-fill .icon-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/common/arrow.svg) no-repeat center / contain;
  opacity: 0;
  transition: opacity var(--duration) ease;
}


.btn-fill:hover .icon-arrow::after {
  opacity: 1;
}


/* メールでお問い合わせ（緑グラデ） */
.btn-mail {
  width: 198px;
  height: 71.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.5px;
  background: linear-gradient(135deg, var(--color-grad-green-start), var(--color-grad-green-end));
  border-radius: 11px;
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: opacity var(--duration) ease;
}


.btn-mail:hover {
  opacity: 0.82;
}


.btn-mail span {
  display: block;
  text-align: center;
  line-height: 1.5;
  color: var(--color-white);
}


.icon-mail {
  width: 27.5px;
  height: auto;
}


.btn-mail--large {
  width: 352px;
  height: 77px;
  flex-direction: row;
  gap: 16.5px;
  border-radius: 38.5px;
  font-size: var(--fs-md);
  color: var(--color-white);
}


.btn-mail--large span {
  display: block;
  text-align: center;
  line-height: 1.5;
  color: var(--color-white);
}


/* 電話アイコン（ピンク丸＋白受話器） */
.icon-tel {
  width: 33px;
  height: 33px;
}


/* ── ヘッダー ─────────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: var(--z-header);
  background-color: var(--color-white);
}


.site-header__inner {
  width: var(--container);
  height: var(--header-pc);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 33px;
}


.site-header__logo img {
  height: var(--logo-pc);
  width: auto;
  display: block;
}


.site-header__contact {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.site-header__lead {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
}


.site-header__tel {
  display: flex;
  align-items: center;
  gap: 8.25px;
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}


.site-header__hours {
  font-size: var(--fs-sm);
  line-height: 1.5;
}


/* 793px以下はヘッダー右側が詰まるため受付時間を1段階小さく（sm 16px → xs 14px） */
@media (max-width: 793px) {
  .site-header__hours {
    font-size: var(--fs-xs);
  }
}


/* ── グローバルナビ（メガメニュー） ───────────────────────── */

.global-nav {
  background-color: var(--color-nav-band);
}


.global-nav>ul {
  width: var(--container);
  margin: 0 auto;
  display: flex;
}


.global-nav>ul>li {
  position: relative;
  width: 25%;
}


.global-nav>ul>li>a {
  height: var(--nav-band);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  /* 例外: 2行(18px×2=36px)でも44pxのナビ帯に収めるため */
  text-align: center;
  transition: all var(--duration) ease;
}


/* 897px以下で「医療・透析連携について」が折り返すため、「連携」の前で改行する */
.global-nav__br {
  display: none;
}


@media (max-width: 897px) {
  .global-nav__br {
    display: inline;
  }
}


.global-nav>ul>li:hover>a,
.global-nav>ul>li.active>a {
  background-color: var(--color-nav-active);
  color: var(--color-white);
}


/* パネルはliの子。common.jsが.activeを付け、CSS側はhover中のみ表示して閉じ漏れを防ぐ */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-sticky);
  display: none;
  min-width: 250px;
  width: max-content;
  padding: 11px 0;
  background-color: var(--color-panel);
  border-radius: 11px;
  margin-top: 11px;
}


/* ナビとパネルの隙間（margin-top分）を透明な橋で埋め、hoverが途切れないようにする */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 0;
  width: 100%;
  height: 11px;
}


.global-nav>ul>li:hover .mega-menu.active {
  display: block;
}


.mega-menu a {
  display: block;
  padding: 2.75px 27.5px;
  color: var(--color-font);
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--duration) ease;
}


.mega-menu a:hover {
  color: var(--color-primary);
}


/* PCではハンバーガー・モバイルパネル非表示 */
.nav-toggle {
  display: none;
}


.mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-header);
  width: 100%;
  height: 100dvh;
  padding: 110px 33px 44px;
  box-sizing: border-box;
  background-color: var(--color-nav-band);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) ease, visibility var(--duration) ease;
  overflow-y: auto;
}


/* 閉じ始めた瞬間にヘッダー(--z-header)より下へ落とす。
   フェードアウト中もヘッダーが上に描画され、白地がピンクに透ける現象を防ぐ */
.mobile-panel:not(.active) {
  z-index: var(--z-sticky);
}


.mobile-panel.active {
  opacity: 1;
  visibility: visible;
}


.mobile-panel ul li a {
  display: block;
  padding: 5.5px 0;
  color: var(--color-primary);
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;
}


.mobile-panel__tel {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8.25px;
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-align: center;
}


.mobile-panel__tel .icon-tel {
  width: 27.5px;
  height: 27.5px;
}


.mobile-panel__hours {
  font-size: var(--fs-sm);
  text-align: center;
}


/* ── ヒーロー（slick fadeスライドショー） ─────────────────── */

.hero {
  position: relative;
  overflow: hidden;
}


/* slick初期化前に2枚目以降を隠す（初期化後はslickが制御） */
.slideshow-list:not(.slick-initialized) li:not(:first-child) {
  display: none;
}


.hero .slideshow-list li {
  overflow: hidden;
}


/* ヒーローは常に画面下端まで（ヘッダー＋ナビ帯を差し引いた高さ）。
   aspect-ratioで高さを決めると縦長ビューポートで下に隙間ができるため高さを直接指定する。
   dvhはモバイルのアドレスバー伸縮に追従させるため */
.hero .slideshow-list li img {
  width: 100%;
  height: calc(100dvh - var(--header-pc) - var(--nav-band));
  object-fit: cover;
  display: block;
}


/* 表示中のスライドをゆっくりズームイン（Ken Burns）。
   1サイクル = 表示4s + フェード2s = 6s より長い 8s にして、
   フェードアウト中もズームが止まらないようにする */
.hero .slick-slide.is-active img {
  animation: hero-zoom 8s linear forwards;
}


@keyframes hero-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero .slick-slide.is-active img {
    animation: none;
  }
}


.hero__copy {
  position: absolute;
  left: calc(50% - (var(--container) / 2) + 33px);
  bottom: 110px;
  z-index: var(--z-content);
}


.hero__catch {
  color: var(--color-tertiary);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-shadow: 0 0 5.5px var(--color-white), 0 0 11px var(--color-white), 0 0 11px var(--color-white), 0 0 22px var(--color-white), 0 0 22px var(--color-white), 0 0 22px var(--color-white), 0 0 44px var(--color-white), 0 0 44px var(--color-white), 0 0 44px var(--color-white);
}


/* 892px以下でキャッチが2行になるため、中途半端な位置ではなく読点のあとで折り返す */
.hero__catch-br {
  display: none;
}


@media (max-width: 892px) {
  .hero__catch-br {
    display: inline;
  }
}


.hero__sub {
  margin-top: 11px;
  color: var(--color-font);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
  text-shadow: 0 0 5.5px var(--color-white), 0 0 11px var(--color-white), 0 0 11px var(--color-white), 0 0 22px var(--color-white), 0 0 22px var(--color-white), 0 0 22px var(--color-white), 0 0 44px var(--color-white), 0 0 44px var(--color-white), 0 0 44px var(--color-white);
}


/* ── 桃寿苑について ───────────────────────────────────────── */

.front-about {
  position: relative;
  overflow: hidden;
  padding: 99px 0 110px;
  background-color: var(--color-alternate);
}


.front-about__deco {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 296.9124px;
}


/* 写真の絶対配置基準はセクション（.front-about）に取る */
.front-about__inner {
  width: var(--container);
  margin: 0 auto;
  display: flex;
}


.front-about__text {
  margin-left: 77px;
}


.front-about__title {
  margin-bottom: 33px;
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.75;
}


.front-about__text p {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 2.5;
}


.front-about .btn-fill {
  margin-top: 44px;
}


/* テキスト領域を優先する。左端をコンテナ基準で固定するため、
   画面を狭めても写真がテキストへ食い込まず、右へ見切れていく（.front-about の overflow:hidden で切る）。
   幅は「左端から画面右端まで」と591pxの大きい方。imgは置換要素でleft+rightでは伸びないため幅を明示する。
   高さはaspect-ratioではなく固定にして、幅が伸びても縦に膨らまないようにする */
.front-about__photo {
  position: absolute;
  top: 27.5px;
  left: calc(50% - (var(--container) / 2) + 550px);
  width: max(591px, calc(50% + (var(--container) / 2) - 550px));
  height: 576px;
  object-fit: cover;
  border-radius: 27.5px 0 0 27.5px;
}


/* ── サービス案内 ─────────────────────────────────────────── */

.front-service {
  padding: 99px 0 110px;
}


.front-service .section-title {
  margin-bottom: 82.5px;
}


.front-service__list {
  width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: var(--gap-pc);
}


.front-service__list li {
  width: calc((100% - (var(--gap-pc) * 2)) / 3);
}


.front-service__card {
  display: block;
}


.front-service__thumb {
  position: relative;
  display: block;
}


.front-service__thumb img {
  width: 100%;
  aspect-ratio: 291 / 398;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}


/* hover時に半透明の色画像を重ねる（画像側に角丸込み） */
.front-service__hover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: opacity var(--duration) ease;
}


.front-service__card:hover .front-service__hover {
  opacity: 1;
}


.front-service__name {
  margin-top: 22px;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}


.front-service__name--pink {
  color: var(--color-primary);
}


.front-service__name--green {
  color: var(--color-tertiary);
}


.front-service__name--blue {
  color: var(--color-quaternary);
}


.front-service .btn-center {
  margin-top: 66px;
}


/* ── 医療・透析連携について ───────────────────────────────── */

.front-medical {
  padding: 110px 0;
  background-color: var(--color-alternate);
}


.front-medical .section-title {
  margin-bottom: 82.5px;
}


.front-medical__photo {
  width: var(--container);
  margin: 0 auto;
  display: block;
  aspect-ratio: 1000 / 300;
  object-fit: cover;
  border-radius: 27.5px;
}


.front-medical__list {
  width: var(--container);
  margin: 99px auto 0;
  display: flex;
  gap: var(--gap-pc);
}


.front-medical__list li {
  position: relative;
  isolation: isolate;
  width: calc((100% - (var(--gap-pc) * 2)) / 3);
  display: flex;
}


/* hover時のみ、右下に11pxずらした白い面を枠の下に敷く */
.front-medical__list li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-white);
  border-radius: 11px;
  transform: translate(11px, 11px);
  opacity: 0;
  transition: opacity var(--duration) ease;
}


.front-medical__list li:hover::before {
  opacity: 1;
}


.front-medical__link {
  position: relative;
  flex: 1;
  padding: 49.5px 11px 33px;
  box-sizing: border-box;
  border: 2px solid var(--color-primary);
  border-radius: 11px;
}


/* アイコンと重なる上辺の枠線を、セクション背景色の帯で隠す */
.front-medical__link::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 92px;
  height: 2px;
  background-color: var(--color-alternate);
  transform: translateX(-50%);
}


.front-medical__icon {
  position: absolute;
  top: -44px;
  left: calc(50% - 35px);
  width: 70px;
  height: 70px;
}


.front-medical__list h3 {
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}


.front-medical .btn-center {
  margin-top: 88px;
}


/* ── 広報誌「桃だより」 ───────────────────────────────────── */

.front-momo {
  padding: 110px 0 0;
}


.front-momo__box {
  width: var(--container);
  margin: 0 auto;
  padding: 77px 0;
  box-sizing: border-box;
  background: linear-gradient(to top right, var(--color-momo-start), var(--color-momo-end));
  border-radius: 33px;
}


.front-momo__desc {
  margin-bottom: 44px;
  font-size: var(--fs-base);
  line-height: 2;
  text-align: center;
}


.front-momo__list {
  display: flex;
  justify-content: center;
  gap: 159.5px;
}


.front-momo .btn-center {
  margin-top: 55px;
}


/* 桃だよりカード（トップ・一覧で共用） */
.momo-item__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity var(--duration) ease;
}


a.momo-item__link:hover {
  opacity: 0.82;
}


.momo-item__cover {
  width: 214px;
  height: auto;
  aspect-ratio: 214 / 303;
  object-fit: cover;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
  border-radius: 7px;
}


.momo-item__date {
  margin-top: 11px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}


.momo-item__issue {
  font-size: var(--fs-base);
  line-height: 1.5;
}


/* ── お知らせ ─────────────────────────────────────────────── */

.front-news {
  padding: 110px 0;
}


.front-news__list {
  width: var(--wrapper);
  margin: 0 auto;
}


.front-news__list li {
  border-bottom: 1px solid var(--color-border);
}


.front-news__list li:first-child {
  border-top: 1px solid var(--color-border);
}


.front-news__list a {
  display: flex;
  align-items: center;
  padding: 22px 49.5px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition: color var(--duration) ease;
}


.front-news__list a:hover {
  color: var(--color-primary);
}


.front-news__list time {
  flex-shrink: 0;
  width: 198px;
}


.front-news .btn-center {
  margin-top: 66px;
}


/* ── 交通アクセス ─────────────────────────────────────────── */

.front-access {
  padding: 99px 0 110px;
  background-color: var(--color-alternate);
}


.front-access__address {
  margin-bottom: 33px;
  font-size: var(--fs-base);
  text-align: center;
}


/* 幅は最長行に合わせる。固定pxだとWebフォントの字幅差で dd が折り返すため max-content */
.front-access__routes {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 27.5px;
}


.front-access__route {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}


.front-access__route dt {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--color-primary);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.5;
}


.front-access__route dd {
  font-size: var(--fs-base);
  line-height: 1.5;
}


.icon-car {
  width: 27.5px;
  height: auto;
}


.icon-train {
  width: auto;
  height: 27.5px;
}


.front-access__map {
  width: var(--container);
  margin: 44px auto 0;
}


.front-access__map iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 27.5px;
  display: block;
}


.front-access__photos {
  width: var(--container);
  margin: 49.5px auto 0;
  display: flex;
  gap: 49.5px;
}


.front-access__photos>* {
  width: calc((100% - 49.5px) / 2);
}


.front-access__photos img {
  display: block;
  aspect-ratio: 477 / 300;
  object-fit: cover;
}


/* 直下のimgは > * で幅が決まる。lightbox用のaに包まれた方だけ親いっぱいに広げる */
.front-access__zoom img {
  width: 100%;
}


/* 案内図はクリックでlightbox拡大 */
.front-access__zoom {
  cursor: zoom-in;
  transition: opacity var(--duration) ease;
}


.front-access__zoom:hover {
  opacity: 0.82;
}


/* ── お問い合わせCTA ──────────────────────────────────────── */

.front-cta {
  padding: 44px 0;
  background: linear-gradient(90deg, var(--color-cta), var(--color-cta-end));
  text-align: center;
}


.front-cta__lead {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.5;
}


.front-cta__tel {
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 16.5px;
  color: var(--color-primary);
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}


.front-cta__tel .icon-tel {
  width: 49.5px;
  height: 49.5px;
}


.front-cta__hours {
  margin-top: 16.5px;
  font-size: var(--fs-base);
  line-height: 1.5;
}


.front-cta .btn-center {
  margin-top: 38.5px;
}


/* ── フッター ─────────────────────────────────────────────── */

footer {
  padding: 44px 0 33px;
  background-color: var(--color-secondary);
}


.footer-inner {
  width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.footer-logo {
  transition: opacity var(--duration) ease;
}


.footer-logo:hover {
  opacity: 0.82;
}


.footer-logo img {
  height: 55px;
  width: auto;
  display: block;
}


.footer-nav {
  margin-top: 33px;
}


.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 27.5px;
}


.footer-nav a {
  display: flex;
  align-items: center;
  gap: 8.25px;
  color: var(--color-white);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity var(--duration) ease;
}


.footer-nav a::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--color-white);
}


.footer-nav a:hover {
  opacity: 0.82;
}


.footer-bottom {
  position: relative;
  width: 100%;
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.copyright {
  color: var(--color-white);
  font-size: var(--fs-xxs);
  letter-spacing: 0.02em;
  line-height: 1.5;
}


/* :visited は base.css の a:visited{color:inherit} に負けるため明示する */
.footer-privacy,
.footer-privacy:visited {
  position: absolute;
  right: 0;
  color: var(--color-white);
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-decoration: none;
  transition: opacity var(--duration) ease;
}


/* 下線は擬似要素で描く（text-decorationはtransitionできないため）。
   通常は透明、hoverでふわっと出す。1pxはヘアラインのため5.5グリッド外 */
.footer-privacy::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-white);
  opacity: 0;
  transition: opacity var(--duration) ease;
}


.footer-privacy:hover {
  opacity: 0.82;
}


.footer-privacy:hover::after {
  opacity: 1;
}


.footer-privacy span {
  display: block;
  text-align: center;
  line-height: 1.5;
  color: var(--color-white);
}


/* ── Back to Top（jQueryのfadeIn/fadeOutで表示制御） ─────── */

.back-to-top {
  position: fixed;
  right: 33px;
  bottom: 33px;
  z-index: var(--z-sticky);
  display: none;
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
  cursor: pointer;
}


.back-to-top::before {
  content: "";
  position: absolute;
  top: 16.5px;
  left: 12px;
  width: 16.5px;
  height: 16.5px;
  border-top: 3px solid var(--color-secondary);
  border-left: 3px solid var(--color-secondary);
  transform: rotate(45deg);
}


/* ══ 下層ページ共通 ═══════════════════════════════════════════ */

.page-header {
  position: relative;
  overflow: hidden;
  height: 253px;
  display: flex;
  align-items: center;
}


.page-header__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.page-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-veil-strong) 0%, var(--color-veil-weak) 100%);
}


.page-header__title {
  position: relative;
  z-index: var(--z-content);
  width: var(--container);
  margin: 0 auto;
  color: var(--color-font);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.25;
}


/* テクスチャ等、白ベールを重ねないヘッダー帯 */
.page-header--plain::after {
  content: none;
}


.breadcrumb {
  width: var(--container);
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-xs);
}


.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1.5;
}


.breadcrumb li+li::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--color-nav-band);
}


.breadcrumb a:hover {
  color: var(--color-primary);
}


/* ── 桃寿苑について: ごあいさつ ───────────────────────────── */

.about-greeting {
  width: var(--container);
  margin: 0 auto;
  padding: 44px 0 132px;
}


.greeting-title {
  margin-bottom: 44px;
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}


.about-greeting__photo {
  width: 100%;
  aspect-ratio: 1000 / 300;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}


.about-greeting__body {
  padding: 44px 77px 0;
}


.about-greeting__body p,
.greeting-card p {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 2;
}


.staff-sign {
  margin-top: 33px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 27.5px;
}


.staff-sign__name {
  font-size: var(--fs-base);
  line-height: 2;
}


.staff-sign img {
  width: 150px;
  aspect-ratio: 150 / 185;
  object-fit: cover;
}


.greeting-card {
  margin-top: 77px;
  padding: 60.5px 77px 66px;
  border: 2px solid var(--color-secondary);
  border-radius: 44px;
}


.greeting-card__title {
  margin-bottom: 33px;
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}


/* ── 桃寿苑について: 部署紹介 ─────────────────────────────── */

.about-dept {
  padding: 88px 0 77px;
  background-color: var(--color-alternate);
}


.about-dept__list {
  width: var(--container);
  margin: 0 auto;
}


.about-dept__item {
  display: flex;
  align-items: flex-start;
  gap: 27.5px;
  padding: 44px 0;
}


.about-dept__item:first-child {
  padding-top: 0;
}


.about-dept__item:not(:last-child) {
  border-bottom: 1px solid var(--color-white);
}


.about-dept__item img {
  flex-shrink: 0;
  width: 415px;
  aspect-ratio: 415 / 270;
  object-fit: cover;
}


.about-dept__text h3 {
  margin-bottom: 16.5px;
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.25;
}


.about-dept__text p {
  margin-bottom: 0;
  font-size: var(--fs-sm);
  line-height: 2;
}


.about-dept__link {
  margin-top: 22px;
}


.about-dept__link a {
  color: var(--color-primary);
}


.about-dept__link a:hover {
  text-decoration: underline;
}


/* ── 桃寿苑について: 基本理念 ─────────────────────────────── */

.about-philosophy {
  padding: 88px 0 110px;
}


.about-philosophy .section-title {
  margin-bottom: 55px;
}


.about-philosophy__block {
  width: var(--container);
  margin: 66px auto 0;
}


.about-philosophy__block:first-of-type {
  margin-top: 0;
}


.about-philosophy__block h3 {
  margin-bottom: 22px;
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}


.about-philosophy__lead {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 2;
}


.about-philosophy__block h4 {
  margin: 44px 0 11px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
}


.about-philosophy__block ul li {
  font-size: var(--fs-sm);
  line-height: 2;
}


.about-philosophy__table-title {
  margin: 44px 0 11px;
  font-size: var(--fs-base);
  line-height: 1.5;
}


.santei-table-wrap {
  overflow-x: auto;
}


.santei-table {
  width: 840px;
  border-collapse: collapse;
  background-color: var(--color-white);
}


.santei-table th,
.santei-table td {
  padding: 5.5px 11px;
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}


.santei-table td {
  text-align: right;
}


.santei-table tbody tr>th:first-child {
  width: 110px;
  padding-left: 16.5px;
  text-align: left;
}


.santei-table .is-stripe th,
.santei-table .is-stripe td {
  background-color: var(--color-table-stripe);
}


.santei-list {
  padding-left: 22px;
}


.santei-list li {
  list-style: decimal;
  font-size: var(--fs-sm);
  line-height: 2;
}


/* ── 桃寿苑について: 施設概要・関連施設 ───────────────────── */

.about-lower {
  padding: 99px 0 110px;
  background-color: var(--color-alternate);
}


.about-overview__table {
  width: var(--wrapper);
  margin: 0 auto;
}


.about-overview__table>div {
  display: flex;
  padding: 16.5px 0 16.5px 77px;
  border-bottom: 1px solid var(--color-border);
}


.about-overview__table>div:first-child {
  border-top: 1px solid var(--color-border);
}


.about-overview__table dt {
  flex-shrink: 0;
  width: 198px;
  font-size: var(--fs-sm);
  line-height: 2;
}


.about-overview__table dd {
  font-size: var(--fs-sm);
  line-height: 2;
}


.about-overview .btn-center {
  margin-top: 44px;
}


.about-related {
  margin-top: 99px;
}


.about-related__card {
  width: var(--container);
  margin: 0 auto;
  padding: 55px 77px 66px;
  box-sizing: border-box;
  background-color: var(--color-white);
  border-radius: 33px;
}


.about-related__card .section-title {
  width: auto;
  margin-bottom: 44px;
}


.about-related__body {
  display: flex;
  align-items: flex-start;
  gap: 44px;
}


.about-related__body img {
  flex-shrink: 0;
  width: 430px;
  aspect-ratio: 430 / 280;
  object-fit: cover;
}


.about-related__text h3 {
  margin-bottom: 5.5px;
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}


.about-related__url {
  display: inline-block;
  margin-bottom: 33px;
  font-size: var(--fs-base);
  line-height: 1.5;
}


.about-related__url:hover {
  color: var(--color-primary);
}


.about-related__text p {
  margin-bottom: 0;
  font-size: var(--fs-lg);
  line-height: 2;
}


/* ── サービス案内: 導入 ───────────────────────────────────── */

.service-intro {
  width: var(--container);
  margin: 0 auto;
  padding: 44px 0 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}


.service-intro__text {
  margin-bottom: 0;
  font-size: var(--fs-lg);
  letter-spacing: 0;
  line-height: 2;
}


/* 文節ごとにspanで包んだ本文。inline-blockにすることで「文節の途中では折り返さない」。
   固定の<br>で行を組むと画面幅が変わった瞬間に「を」「し、」のような孤立行が出るため。
   spanの間に空白文字を入れると隙間になるので、マークアップは改行せず詰めて書く */
.phrase-wrap span {
  display: inline-block;
}


.service-intro__photo {
  flex-shrink: 0;
  width: 385px;
  aspect-ratio: 385 / 315;
  object-fit: cover;
  border-radius: 22px;
}


/* ── サービス案内: サービスブロック（色違い3種） ──────────── */

.service-block {
  width: var(--container);
  margin: 0 auto 88px;
  padding: 49.5px 77px 55px;
  box-sizing: border-box;
  border-radius: 33px;
}


.service-block--pink {
  background-color: var(--color-alternate);
}


.service-block--green {
  background-color: var(--color-bg-green);
}


.service-block--blue {
  background-color: var(--color-bg-blue);
}


.service-block__head {
  margin-bottom: 27.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}


.service-block__head h2 {
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.25;
}


.service-block--pink h2 {
  color: var(--color-primary);
}


.service-block--green h2 {
  color: var(--color-tertiary);
}


.service-block--blue h2 {
  color: var(--color-quaternary);
}


.service-block__tag {
  margin-bottom: 0;
  padding: 8.25px 16.5px;
  background-color: var(--color-white);
  border-radius: 5.5px;
  font-size: var(--fs-base);
  line-height: 1.5;
}


.service-block__photos {
  display: flex;
  gap: 38.5px;
}


.service-block__photos img {
  width: calc((100% - 38.5px) / 2);
  aspect-ratio: 400 / 270;
  object-fit: cover;
}


.service-block__lead {
  margin: 27.5px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.75;
}


.service-block__summary {
  margin: 11px 0 0;
  font-size: var(--fs-base);
  line-height: 2;
}


/* 区切り線はサービス色→透明のグラデーション */
.service-block__body {
  margin-top: 27.5px;
}


.service-block__body::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 33px;
  background: linear-gradient(90deg, var(--color-heading-line), transparent);
}


.service-block--green .service-block__body::before {
  background: linear-gradient(90deg, var(--color-heading-line-green), transparent);
}


.service-block--blue .service-block__body::before {
  background: linear-gradient(90deg, var(--color-line-blue), transparent);
}


.service-block__body p {
  font-size: var(--fs-base);
  line-height: 1.75;
}


.service-block__body p:last-child {
  margin-bottom: 0;
}


/* ── サービス案内: ご利用案内 ─────────────────────────────── */

.service-guide {
  padding: 99px 0 110px;
}


.service-guide__inner {
  width: var(--container);
  margin: 0 auto;
  padding: 0 77px;
  box-sizing: border-box;
}


.service-guide h3,
.service-flow h3,
.service-fees h3 {
  margin-bottom: 22px;
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}


.service-guide__intro {
  margin-bottom: 44px;
  font-size: var(--fs-base);
  line-height: 2;
}


.service-guide__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27.5px;
}


.service-guide__list li {
  width: 100%;
  max-width: 720px;
  padding: 22px 0;
  box-sizing: border-box;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 60.5px;
  text-align: center;
}


.service-guide__name {
  margin-bottom: 5.5px;
  font-size: var(--fs-lg);
  line-height: 1.5;
}


.service-guide__target {
  margin-bottom: 0;
  color: var(--color-secondary);
  font-size: var(--fs-base);
  line-height: 1.5;
}


/* ── サービス案内: ご利用までの流れ ───────────────────────── */

.service-flow {
  padding: 88px 0 110px;
  background-color: var(--color-alternate);
}


.service-flow__inner {
  width: var(--container);
  margin: 0 auto;
}


.service-flow h3 {
  margin-bottom: 33px;
}


.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 49.5px;
  padding: 33px 77px 38.5px;
  background-color: var(--color-white);
  border-radius: 33px;
}


.flow-step__num {
  margin-bottom: 0;
  color: var(--color-secondary);
  font-family: "Minion Variable Concept", Georgia, "Times New Roman", serif;
  font-size: var(--fs-5xl);
  font-weight: 400;
  line-height: 1;
}


.flow-step__body {
  padding-top: 27.5px;
}


.flow-step h4 {
  margin-bottom: 11px;
  color: var(--color-secondary);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.5;
}


.flow-step__body p {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 2;
}


.flow-step__body ul {
  margin-top: 16.5px;
}


.flow-step__body ul li {
  font-size: var(--fs-sm);
  line-height: 2;
}


.flow-arrow {
  display: block;
  width: 88px;
  height: 49.5px;
  margin: 11px auto;
  color: var(--color-secondary);
}


/* ── サービス案内: 施設サービス費 ─────────────────────────── */

.service-fees {
  padding: 99px 0 110px;
}


.service-fees__inner {
  width: var(--container);
  margin: 0 auto;
  padding: 0 77px;
  box-sizing: border-box;
}


.service-fees h3 {
  margin-bottom: 44px;
}


.fee-title {
  margin: 88px 0 22px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--color-heading-line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}


.service-fees h3+.fee-title {
  margin-top: 0;
}


.fee-title p {
  margin-bottom: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
}


.fee-title__date {
  font-size: var(--fs-sm);
  line-height: 1.5;
}


.fee-table-wrap {
  overflow-x: auto;
}


.fee-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  background-color: var(--color-white);
}


.fee-table th,
.fee-table td {
  border: 1px solid var(--color-border);
  font-weight: 500;
  line-height: 1.5;
}


.fee-table thead th {
  padding: 8.25px 5.5px;
  font-size: var(--fs-sm);
  text-align: center;
  white-space: nowrap;
}


.fee-table tbody th {
  width: 104.5px;
  background-color: var(--color-cell-cream);
  font-size: var(--fs-base);
  text-align: center;
}


.fee-table tbody td {
  padding: 5.5px 16.5px;
  font-size: var(--fs-base);
  text-align: right;
}


.fee-table .c-room {
  background-color: var(--color-alternate);
}


.fee-table .room-alt .c-room {
  background-color: var(--color-cell-pink2);
}


.fee-table .c-fixed {
  text-align: center;
}


.fee-table .c-fixed--meal {
  padding-left: 22px;
  text-align: left;
}


.fee-table .c-rate {
  width: 44px;
  padding: 5.5px;
  font-size: var(--fs-sm);
  text-align: center;
}


.fee-table .rate-1 .c-rate,
.fee-table .rate-1 .c-sum {
  background-color: var(--color-alternate);
}


.fee-table .rate-2 .c-rate,
.fee-table .rate-2 .c-sum {
  background-color: var(--color-cell-pink2);
}


.fee-table .rate-3 .c-rate,
.fee-table .rate-3 .c-sum {
  background-color: var(--color-cell-pink3);
}


.fee-note {
  margin: 16.5px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
}


.fee-addon-title {
  margin: 66px 0 22px;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.5;
}


.addon-tables {
  display: flex;
  align-items: flex-start;
  gap: 38.5px;
}


.addon-table {
  flex: 1;
  border-collapse: collapse;
}


.addon-table th,
.addon-table td {
  padding: 8.25px 16.5px;
  border: 1px solid var(--color-border);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}


.addon-table th {
  width: 52.5%;
  background-color: var(--color-cell-cream);
}


.fee-notes {
  margin-top: 22px;
}


.fee-notes li {
  font-size: var(--fs-sm);
  line-height: 2;
}


/* ── 医療・透析連携: 導入 ─────────────────────────────────── */

.medical-intro {
  width: var(--container);
  margin: 0 auto;
  padding: 44px 0 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}


.medical-intro__text h2 {
  margin-bottom: 22px;
  color: var(--color-tertiary);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.5;
}


.medical-intro__text p {
  margin-bottom: 0;
  font-size: var(--fs-lg);
  letter-spacing: 0;
  line-height: 2;
}


.medical-intro__photo {
  flex-shrink: 0;
  width: 385px;
  aspect-ratio: 385 / 315;
  object-fit: cover;
  border-radius: 22px;
}


/* ── 医療・透析連携: 色付きセクション（受入/環境） ────────── */

.medical-sec {
  padding: 88px 0;
}


.medical-sec--pink {
  background-color: var(--color-alternate);
}


.medical-sec--green {
  background-color: var(--color-bg-green);
}


.medical-sec__inner {
  width: var(--container);
  margin: 0 auto;
}


.medical-sec__row {
  margin-bottom: 77px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 44px;
}


.medical-sec__row h3 {
  margin-bottom: 22px;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}


.medical-sec--pink .medical-sec__row h3 {
  color: var(--color-primary);
}


.medical-sec--green .medical-sec__row h3 {
  color: var(--color-tertiary);
}


.medical-sec__row p {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 2;
}


/* 画像に焼き込まれた白い背景をセクション背景色に抜く。
   親の .fade-in が transform でスタッキングコンテキストを作るため、
   blend の下地として同じ背景色を .medical-sec__row にも敷いている */
.medical-sec__deco {
  flex-shrink: 0;
  margin-top: 16.5px;
  mix-blend-mode: multiply;
}


.medical-sec--pink .medical-sec__row {
  background-color: var(--color-alternate);
}


.medical-sec--green .medical-sec__row {
  background-color: var(--color-bg-green);
}


.medical-sec--pink .medical-sec__deco {
  width: 370px;
}


.medical-sec--green .medical-sec__deco {
  width: 250px;
}


.medical-cards {
  display: flex;
}


.medical-cards>li {
  width: calc(100% / 3);
  padding: 0 16.5px;
  box-sizing: border-box;
  text-align: center;
}


.medical-cards>li:not(:last-child) {
  border-right: 1px solid var(--color-white);
}


.medical-cards img {
  width: 100%;
  aspect-ratio: 285 / 245;
  object-fit: cover;
  border-radius: 22px;
}


.medical-cards h4 {
  margin: 22px 0 11px;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}


.medical-cards h4.is-blue {
  color: var(--color-quaternary);
}


.medical-cards h4.is-pink {
  color: var(--color-primary);
}


.medical-cards h4.is-green {
  color: var(--color-tertiary);
}


.medical-cards p {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 2;
}


/* ── 医療・透析連携: 医療サポート体制 ─────────────────────── */

.medical-support {
  padding: 110px 0;
}


.medical-support__inner {
  width: var(--container);
  margin: 0 auto;
}


.medical-support__network {
  display: block;
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
}


.medical-support__lead {
  margin: 44px 0 0;
  color: var(--color-primary);
  font-size: var(--fs-lg);
  line-height: 1.5;
  text-align: center;
}


.medical-support__text {
  margin: 22px 0 0;
  font-size: var(--fs-base);
  line-height: 2;
  text-align: center;
}


/* ── 年間行事計画 ─────────────────────────────────────────── */

.page-events .breadcrumb,
.page-news .breadcrumb,
.page-momo .breadcrumb {
  margin-top: 38.5px;
}


.events-list {
  width: var(--container);
  margin: 0 auto;
  padding: 44px 0 0;
}


.events-list .greeting-title {
  margin-bottom: 44px;
}


.events-list__lead {
  margin-bottom: 66px;
  font-size: var(--fs-lg);
  line-height: 1.75;
  text-align: center;
}


.events-list__grid {
  /* 狭い画面では左右33pxの余白を確保（--container と同じ考え方） */
  width: min(841.5px, 100% - 66px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 77px 137.5px;
}


.events-list__grid>li {
  width: calc((100% - 137.5px) / 2);
}


.events-list__grid img {
  width: 100%;
  aspect-ratio: 350 / 230;
  object-fit: cover;
  border-radius: 11px;
}


.events-list__grid h2 {
  margin: 22px 0 11px;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.5;
}


.events-list__grid p {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 2;
}


.events-community {
  width: var(--container);
  margin: 0 auto;
  padding: 99px 77px 110px;
  box-sizing: border-box;
}


.events-community h2 {
  margin-bottom: 27.5px;
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}


.events-community__row {
  display: flex;
  align-items: flex-start;
  gap: 49.5px;
}


.events-community__row img {
  flex-shrink: 0;
  width: 430px;
  aspect-ratio: 430 / 250;
  object-fit: cover;
}


.events-community__row ul li {
  font-size: var(--fs-base);
  letter-spacing: 0;
  /* モックアップの字幅（2行目のぶら下げを写真脇に収める） */
  line-height: 2;
}


/* ── プライバシーポリシー ─────────────────────────────────── */

.privacy-body {
  width: var(--container);
  margin: 0 auto;
  padding: 0 77px 99px;
  box-sizing: border-box;
}


.privacy-body .greeting-title {
  margin: 44px 0;
}


.privacy-body__intro {
  margin-bottom: 44px;
  font-size: var(--fs-base);
  line-height: 2;
}


.privacy-body__sec {
  margin-top: 33px;
}


.privacy-body__sec h3 {
  margin-bottom: 11px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
}


.privacy-body__sec p,
.privacy-body__sec ul li {
  margin-bottom: 0;
  font-size: var(--fs-sm);
  line-height: 2;
}


.privacy-body__sec ul {
  margin: 5.5px 0;
}


.privacy-body__sign {
  margin: 44px 0 0;
  font-size: var(--fs-sm);
  line-height: 2;
  text-align: right;
}


/* ── お問い合わせ・送信完了 ───────────────────────────────── */

.page-contact .breadcrumb {
  margin-top: 38.5px;
}


.page-contact .greeting-title {
  margin: 44px 0;
}


.contact-intro {
  width: var(--container);
  margin: 0 auto;
  padding: 0 77px;
  box-sizing: border-box;
  font-size: var(--fs-base);
  line-height: 2;
}


.contact-intro a {
  color: var(--color-primary);
}


.contact-intro a:hover {
  text-decoration: underline;
}


.contact-box {
  width: var(--container);
  margin: 44px auto 110px;
  padding: 77px 0 99px;
  background-color: var(--color-alternate);
  border-radius: 33px;
}


.contact-box form {
  width: 720px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16.5px;
}


.form-row {
  display: flex;
  align-items: center;
}


.form-row--textarea {
  align-items: flex-start;
}


.form-row__label {
  flex-shrink: 0;
  width: 203.5px;
  margin-bottom: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}


.form-row--textarea .form-row__label {
  padding-top: 11px;
}


.form-row__req {
  margin-left: 5.5px;
  color: var(--color-primary);
}


.form-row__field {
  flex: 1;
}


.contact-box textarea {
  height: 170.5px;
}


/* 確認する/送信する（CF7のsubmitをピンクグラデpillに） */
.contact-box input[type="submit"] {
  width: 203.5px;
  height: 49.5px;
  margin-top: 27.5px;
  border: none;
  border-radius: 27.5px;
  background: linear-gradient(90deg, var(--color-grad-pink-start), var(--color-grad-pink-end));
  color: var(--color-white);
  transition: opacity var(--duration) ease;
}


/* CF7の応答メッセージ。プラグイン既定（2px枠・WP管理画面の原色）を打ち消す。
   .wpcf7 form.invalid .wpcf7-response-output が (0,3,1) なので .contact-box を足して勝たせる */
.contact-box .wpcf7 form .wpcf7-response-output {
  margin: 27.5px 0 0;
  padding: 16.5px 22px;
  border: none;
  border-radius: 5.5px;
  background-color: var(--color-bg-red);
  color: var(--color-red);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}


/* 送信成功時。通常は /contact/thanks/ へ遷移するため表示は一瞬 */
.contact-box .wpcf7 form.sent .wpcf7-response-output {
  background-color: var(--color-bg-green);
  color: var(--color-tertiary);
}


/* 各項目の下に出るエラー文言 */
.contact-box .wpcf7-not-valid-tip {
  margin-top: 5.5px;
  color: var(--color-red);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}


/* エラーになった項目は枠も赤にして位置を分かりやすくする */
.contact-box .wpcf7-not-valid {
  border-color: var(--color-red);
}


/* Turnstileは <div class="wpcf7-turnstile cf-turnstile"> を出力する。
   .contact-box form が column flex なので、そのままだと中のiframeが左に寄る。
   ラッパー側を中央寄せにすることで size:flexible でも normal でも破綻しない */
.contact-box .wpcf7-turnstile {
  display: flex;
  justify-content: center;
}


/* CF7はsubmitの隣に空のスピナーを出力する。.btn-center の中央計算に含まれると
   ボタンが36px左にずれるため、レイアウトから外す */
.contact-box .wpcf7-spinner {
  display: none;
}


.contact-box input[type="submit"]:hover {
  background: linear-gradient(90deg, var(--color-grad-pink-start), var(--color-grad-pink-end));
  color: var(--color-white);
  opacity: 0.82;
}


.contact-thanks {
  width: var(--container);
  margin: 0 auto;
  padding: 0 77px 110px;
  box-sizing: border-box;
}


.contact-thanks p {
  font-size: var(--fs-base);
  line-height: 2;
  text-align: center;
}


.contact-thanks .btn-center {
  margin-top: 44px;
}


/* ── お知らせ（一覧・詳細） ───────────────────────────────── */

.news-archive {
  padding: 44px 0 110px;
}


.news-archive .section-title {
  margin-bottom: 66px;
}


.news-archive__nav {
  margin-top: 66px;
}


/* ページネーション（WP-PageNavi未導入時の the_posts_pagination 出力） */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 11px;
}


.nav-links .page-numbers {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: var(--color-alternate);
  border-radius: 50%;
  color: var(--color-primary);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  transition: all var(--duration) ease;
}


.nav-links a.page-numbers:hover,
.nav-links .page-numbers.current {
  background-color: var(--color-primary);
  color: var(--color-white);
}


/* 省略記号は丸を付けず文字だけ見せる */
.nav-links .page-numbers.dots {
  background-color: transparent;
  color: var(--color-font);
}


.news-archive__empty {
  width: var(--wrapper);
  margin: 0 auto;
  font-size: var(--fs-base);
  text-align: center;
}


/* ── 広報誌「桃だより」一覧 ───────────────────────────────── */

.momo-archive {
  padding: 44px 0 110px;
}


.momo-archive__desc {
  width: var(--container);
  margin: 0 auto 66px;
  font-size: var(--fs-base);
  line-height: 2;
  text-align: center;
}


.momo-archive__list {
  width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 66px 44px;
}


.momo-archive__list .momo-item {
  width: calc((100% - 44px * 3) / 4);
}


.momo-archive__list .momo-item__cover {
  width: 100%;
}


.news-single {
  width: var(--container);
  margin: 0 auto;
  padding: 44px 77px 110px;
  box-sizing: border-box;
}


.news-single__date {
  display: block;
  font-size: var(--fs-base);
  line-height: 1.5;
}


.news-single__title {
  margin: 22px 0 33px;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.75;
}


.news-single__content p {
  font-size: var(--fs-base);
  line-height: 2;
}


.news-single__content img {
  max-width: 100%;
  height: auto;
}


/* ── 医療・透析連携: 結び ─────────────────────────────────── */

.medical-closing {
  padding: 88px 0;
}


.medical-closing p {
  margin-bottom: 0;
  color: var(--color-secondary);
  font-size: var(--fs-lg);
  line-height: 2;
  text-align: center;
}


/* ══ 962px以下: 横並びを縦積みへ ══════════════════════════════
   本文の幅が確保できなくなる帯。写真・イラストを下へ回す。
   ※メディアクエリは詳細度を上げないため、必ず各セクションの基本ルールより後ろに置く。
   SP(768px以下)の細かな寸法は mobile.css 側で上書きする */

@media (max-width: 962px) {

  .service-intro,
  .medical-intro,
  .medical-sec__row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 726px(=5.5x132)で頭打ちにして中央寄せ。962〜727pxで画像が間延びするのを防ぐ */
  .service-intro__photo,
  .medical-intro__photo,
  .medical-cards img {
    max-width: 726px;
    margin-right: auto;
    margin-left: auto;
  }

  .service-intro__photo,
  .medical-intro__photo {
    width: 100%;
  }

  .medical-sec__deco {
    margin-right: auto;
    margin-left: auto;
  }

  .medical-cards {
    flex-direction: column;
    gap: 33px;
  }

  .medical-cards>li {
    width: 100%;
    padding: 0;
  }

  /* 縦積みでは区切り線を右→下へ回す */
  .medical-cards>li:not(:last-child) {
    padding-bottom: 33px;
    border-right: none;
    border-bottom: 1px solid var(--color-white);
  }
}