/* =========================================================
   layout.css — ページ全体のレイアウト
   ========================================================= */

/* ========== ベース ========== */
main {
  display: block;
}

.section {
  padding-block: var(--space-3xl);
  position: relative;
}
.section--soft   { background: var(--color-bg-soft); }
.section--pale   { background: var(--color-bg-pale); }
.section--narrow { padding-block: clamp(60px, 8vw, 120px); }

/* =========================================================
   ヒーロー（TOP用）
   ─────────────────────────────────────────────
   構造原則：
   - 100vh の領域に対し、可視コピーは左上1/3に集中
   - 残り2/3は意図的な余白（"fold の8割は余白"）
   - 装飾は1pxの縦罫 + 葉モチーフ（気配のみ）
   - グラデーションは縦罫の1pxに限定（背景塗り無し）
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + clamp(56px, 10vw, 128px));
  padding-bottom: clamp(96px, 14vw, 192px);
  display: flex;
  align-items: center;
  background: var(--color-bg);
  overflow: hidden;
}

/* ---- 装飾レイヤー：気配のみ ---- */
.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* 左上の縦罫（1pxの存在感） */
.hero__decor-rule {
  position: absolute;
  left: clamp(20px, 5vw, 40px);
  top: calc(var(--header-h) + 24px);
  width: 1px;
  height: clamp(80px, 14vw, 180px);
  background: linear-gradient(180deg, var(--color-brand) 0%, transparent 100%);
  opacity: 0.7;
}
/* 右下に葉モチーフ（気配） */
.hero__decor-leaf {
  position: absolute;
  right: clamp(-80px, -6vw, -40px);
  bottom: clamp(-80px, -6vw, -40px);
  width: clamp(260px, 32vw, 440px);
  color: var(--color-accent);
  opacity: 0.42;
  transform: rotate(-8deg);
}
/* 右上に小さな葉（気配の重ね） */
.hero__decor-leaf--top {
  position: absolute;
  top: clamp(80px, 12vw, 140px);
  right: clamp(-30px, -3vw, -10px);
  width: clamp(120px, 14vw, 180px);
  color: var(--color-accent);
  opacity: 0.32;
  transform: rotate(22deg);
}

/* ---- メインコンテンツ ---- */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  gap: clamp(64px, 10vw, 120px);
}

.hero__content {
  max-width: 720px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(13px, 0.8rem + 0.1vw, 15px);
  letter-spacing: var(--ls-display);
  color: var(--color-brand);
  text-transform: none;
}
.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-brand);
}

/* ---- タイトル：英（大）+ 日（細・字間広め） ---- */
.hero__title {
  margin: clamp(28px, 4vw, 40px) 0 0;
}
.hero__title-en {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(40px, 4rem + 3vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-primary-deep);
  margin-bottom: clamp(28px, 4vw, 40px);
  max-width: 14em;
}
.hero__title-jp {
  display: block;
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: clamp(20px, 1rem + 1.1vw, 30px);
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: var(--color-primary-deep);
  max-width: 22em;
}

.hero__sub {
  margin-top: clamp(36px, 5vw, 48px);
  font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
  max-width: 32em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(40px, 6vw, 64px);
}

/* ---- メタ情報：本文から大きく離す ---- */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 56px);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line-soft);
  max-width: 720px;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.hero__meta-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: var(--ls-display);
  color: var(--color-brand);
  font-weight: var(--fw-regular);
}
.hero__meta-value {
  font-size: var(--text-sm);
  color: var(--color-primary-deep);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
}

/* ========== サブページのヒーロー ========== */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(48px, 7vw, 96px);
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, transparent 80%);
  pointer-events: none;
}
.page-hero__decor {
  position: absolute;
  right: -120px;
  top: 20%;
  width: 360px;
  color: var(--color-accent);
  opacity: 0.18;
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.page-hero__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1rem + 1.2vw, 36px);
  color: var(--color-brand);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 12px;
}
.page-hero__title {
  font-size: clamp(28px, 1.4rem + 2vw, 44px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-primary-deep);
  line-height: 1.5;
}
.page-hero__lead {
  margin-top: 24px;
  font-size: var(--text-md);
  color: var(--color-text-mute);
  line-height: 2;
  max-width: 38em;
}

/* ========== グリッド ========== */
.grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.grid--medical {
  grid-template-columns: 1fr;
}
.grid--two {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--medical {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   4つの視点（values）専用グリッド — 2x2 編集レイアウト
   ─────────────────────────────────────────────
   - mobile: 1列（縦長段組）
   - tablet+: 2x2（中央に十字の細罫）
   - 等間隔ではなく、罫線で区切られた "編集ページ" の佇まい
   ========================================================= */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--color-line);
  list-style: none;
  padding: 0;
}
.values-grid > .value-card {
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr 1fr;
    border-top: 0;
  }
  .values-grid > .value-card {
    border-bottom: 0;
  }
  /* 上段（1, 2番目）に上罫 */
  .values-grid > .value-card:nth-child(-n+2) {
    border-top: 1px solid var(--color-line);
  }
  /* 下段（3, 4番目）に上罫（中央の横罫） */
  .values-grid > .value-card:nth-child(n+3) {
    border-top: 1px solid var(--color-line);
  }
  /* 最下行に下罫 */
  .values-grid > .value-card:nth-child(n+3) {
    border-bottom: 1px solid var(--color-line);
  }
  /* 左列に右罫（中央の縦罫） */
  .values-grid > .value-card:nth-child(odd) {
    border-right: 1px solid var(--color-line);
  }
}

/* ========== greeting / introパラグラフ ========== */
.intro-block {
  display: grid;
  gap: clamp(36px, 5.5vw, 80px);
  grid-template-columns: 1fr;
  align-items: start;
}
.intro-block__lede {
  font-size: clamp(18px, 0.9rem + 0.6vw, 22px);
  line-height: var(--lh-loose);
  font-weight: 500;
  color: var(--color-primary-deep);
  letter-spacing: 0.08em;
}
.intro-block__body {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-text);
  letter-spacing: 0.06em;
}
.intro-block__body p + p {
  margin-top: var(--paragraph-gap-lg);
}
@media (min-width: 768px) {
  .intro-block {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  }
}

/* ========== 章タイトル（編集デザイン用） ========== */
.editorial-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  position: relative;
}
.editorial-title::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--color-brand);
}
.editorial-title__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--color-brand);
}
.editorial-title__en {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.2rem + 0.8vw, 30px);
  color: var(--color-primary);
  letter-spacing: 0.04em;
}
.editorial-title__jp {
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-primary-deep);
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin-top: 2px;
}

/* ========== 縦書きアクセント / mark ========== */
.text-mark {
  background: linear-gradient(transparent 65%, rgba(127, 206, 223, 0.35) 65%);
  padding: 0 0.05em;
}

/* ========== About用 構成セクション ========== */
.naming-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .naming-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-line); }
}
.naming-item {
  background: var(--color-bg-pale);
  padding: clamp(40px, 5.5vw, 60px) clamp(28px, 4vw, 44px);
  text-align: center;
  border-radius: var(--radius-md);
}
@media (min-width: 768px) {
  .naming-item { border-radius: 0; }
  .naming-item:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
  .naming-item:last-child  { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
}
.naming-item__title {
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-primary-deep);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.naming-item__body {
  font-size: var(--text-sm);
  line-height: 1.95;
  color: var(--color-text-mute);
}

/* ========== 連絡先ブロック ========== */
.contact-row {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: 1fr;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(40px, 5.5vw, 60px) clamp(32px, 4.5vw, 52px);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.contact-card__icon {
  width: 40px; height: 40px;
  font-size: 26px;
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
}
.contact-card__title {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-primary-deep);
  letter-spacing: 0.06em;
}
.contact-card__value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.2vw, 36px);
  color: var(--color-primary-deep);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.contact-card__hint {
  font-size: var(--text-sm);
  color: var(--color-text-mute);
}
@media (min-width: 768px) {
  .contact-row { grid-template-columns: repeat(2, 1fr); }
}

/* ========== 地図埋め込み ========== */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ========== access詳細 ========== */
.access-info {
  display: grid;
  gap: 16px;
  font-size: var(--text-md);
  line-height: 2;
}
.access-info dt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--color-brand);
  font-weight: 400;
}
.access-info dd {
  color: var(--color-text);
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .access-info {
    grid-template-columns: 140px 1fr;
    gap: 14px 32px;
    align-items: baseline;
  }
}

/* ========== CTA（セクション末尾の誘導） ========== */
.cta-block {
  text-align: center;
  padding: clamp(72px, 10vw, 144px) clamp(28px, 5vw, 80px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at top, rgba(127, 206, 223, 0.18), transparent 60%),
    var(--color-bg-soft);
  border: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
}
.cta-block__leaf {
  position: absolute;
  inset: auto -40px -40px auto;
  width: 200px;
  color: var(--color-accent);
  opacity: 0.25;
  pointer-events: none;
}
.cta-block__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-brand);
  font-size: 16px;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  display: block;
}
.cta-block__title {
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-primary-deep);
  line-height: 1.6;
  margin-bottom: 24px;
}
.cta-block__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ========== フッター ========== */
.site-footer {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-line);
  padding-block: clamp(48px, 7vw, 88px) 32px;
  font-size: var(--text-sm);
  color: var(--color-text-mute);
}
.site-footer__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.site-footer__top {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: 1fr;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-line);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 360px;
}
.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer__brand-mark {
  width: 40px; height: 40px;
  color: var(--color-brand);
}
.site-footer__brand-text-jp {
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--color-primary-deep);
}
.site-footer__brand-text-en {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-brand);
}
.site-footer__tagline {
  font-size: var(--text-sm);
  line-height: 1.95;
  color: var(--color-text-mute);
  letter-spacing: 0.04em;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.site-footer__col-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--color-brand);
  font-weight: 400;
  margin-bottom: 16px;
}
.site-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col-list a {
  color: var(--color-text);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: color var(--duration-fast);
}
.site-footer__col-list a:hover { color: var(--color-primary-deep); }
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
}
@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  }
  .site-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
  }
}

/* =========================================================
   スクロール演出（fade-in）
   ─────────────────────────────────────────────
   ブランドコンセプト「静かに、そっと現れる」を表現。
   - 移動量 16px（小さく）／ duration 0.6s ease-out（速すぎず・遅すぎず）
   - 連続要素は --fade-delay でずらす（編集物が "めくれていく" ような時差）
   ========================================================= */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--fade-delay, 0ms);
  will-change: opacity, transform;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in.is-visible {
  will-change: auto;
}
.fade-in--d1 { --fade-delay:  80ms; }
.fade-in--d2 { --fade-delay: 160ms; }
.fade-in--d3 { --fade-delay: 240ms; }
.fade-in--d4 { --fade-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ========== 区切り装飾 ========== */
.section-rule {
  width: 1px;
  height: 64px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--color-brand), transparent);
}