/* ==========================================================================
   共通 UI コンポーネント（v4）
   大きな角丸・広い内側余白・枠線なし・影なし。情報は色面と余白で区切る。
   ========================================================================== */

/* --- コンテナ ---------------------------------------------------------- */
.phn-container {
  width: min(100% - var(--phn-gutter) * 2, var(--phn-container));
  margin-inline: auto;
}
.phn-container--narrow { max-width: 960px; }
.phn-measure { max-width: var(--phn-measure); }

/* --- 見出しセット ------------------------------------------------------
   英字ラベル → 日本語タイトル → リード、の順で並ぶ */
.phn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 var(--phn-space-3);
  font-family: var(--phn-font-en);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--phn-green-ink);
  line-height: 1.4;
}
.phn-eyebrow::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--phn-sky);
  box-shadow: 0 0 0 3px var(--phn-sky-pale);
  flex: none;
}
.phn-eyebrow--sky { color: var(--phn-sky-ink); }
.phn-eyebrow--sky::before { background: var(--phn-green-soft); }
.phn-eyebrow--yellow::before { background: var(--phn-green); }
/* 互換 */
.phn-eyebrow--terra, .phn-eyebrow--terra-ink, .phn-eyebrow--green-ink, .phn-eyebrow--slate { color: var(--phn-green-ink); }

.phn-heading { font-size: var(--phn-h2); }
/* 見出しの下の短いアクセント（英字ラベル → タイトル → 短い線 をひとつのセットにする） */
.phn-heading--bar::after {
  content: ""; display: block;
  inline-size: 44px; block-size: 4px; border-radius: 4px;
  margin-top: 0.5em;
  background: linear-gradient(90deg, var(--phn-sky) 0 60%, var(--phn-green-soft) 60% 100%);
}
.phn-section__head--center .phn-heading--bar::after { margin-inline: auto; }
.phn-heading--lg { font-size: var(--phn-h1); line-height: 1.3; letter-spacing: 0.04em; }
.phn-heading--sub { font-size: var(--phn-h3); }

.phn-lead {
  margin-top: var(--phn-head-gap);
  max-width: var(--phn-measure);
  font-size: var(--phn-text-base);
  color: var(--phn-ink-muted);
}
.phn-lead--lg { font-size: var(--phn-text-md); color: var(--phn-ink); }

.phn-section__head { margin-bottom: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem); }
.phn-section__head--tight { margin-bottom: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); }
.phn-section__head--center { text-align: center; }
.phn-section__head--center .phn-eyebrow { justify-content: center; }
.phn-section__head--center .phn-lead { margin-inline: auto; }

/* 重要語のマーカー風強調。色だけに頼らず太字も併用する */
.phn-mark {
  font-weight: 700;
  background-image: linear-gradient(transparent 62%, var(--phn-sky-soft) 62%);
  padding-inline: 0.1em;
}
.phn-mark--sky, .phn-mark--sky-soft { background-image: linear-gradient(transparent 62%, var(--phn-sky-soft) 62%); }
.phn-mark--green-soft { background-image: linear-gradient(transparent 62%, var(--phn-green-soft) 62%); }
.phn-accent { color: var(--phn-sky-ink); font-weight: 700; }

/* --- ボタン ------------------------------------------------------------- */
.phn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 56px;
  padding: 0.85em 1.9em;
  border: 2px solid transparent;
  border-radius: var(--phn-radius-pill);
  font-family: var(--phn-font-head);
  font-size: var(--phn-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--phn-duration) var(--phn-ease),
              color var(--phn-duration) var(--phn-ease),
              border-color var(--phn-duration) var(--phn-ease),
              transform var(--phn-duration) var(--phn-ease);
}
.phn-btn__arrow {
  flex: none; inline-size: 1.15em; block-size: 1.15em;
  transition: transform var(--phn-duration) var(--phn-ease);
}
.phn-btn:hover .phn-btn__arrow { transform: translateX(4px); }
.phn-btn:hover { transform: translateY(-2px); }

.phn-btn--primary { background: var(--phn-green-ink); color: #fff; border-color: var(--phn-green-ink); }
.phn-btn--primary:hover { background: var(--phn-deep); border-color: var(--phn-deep); color: #fff; }

.phn-btn--sky { background: var(--phn-sky-ink); color: #fff; border-color: var(--phn-sky-ink); }
.phn-btn--sky:hover { background: #17505F; border-color: #17505F; color: #fff; }

.phn-btn--outline { background: transparent; color: var(--phn-green-ink); border-color: var(--phn-green-ink); }
.phn-btn--outline:hover { background: var(--phn-green-ink); color: #fff; }

.phn-btn--white { background: var(--phn-surface); color: var(--phn-green-ink); border-color: var(--phn-surface); }
.phn-btn--white:hover { background: var(--phn-green-ink); border-color: var(--phn-green-ink); color: #fff; }

.phn-btn--ghost { background: transparent; color: var(--phn-ink-muted); border-color: var(--phn-slate-soft); }
.phn-btn--ghost:hover { background: var(--phn-surface); color: var(--phn-ink); border-color: var(--phn-slate-soft); }

/* 互換 */
.phn-btn--green-ink { background: var(--phn-green-ink); color: #fff; border-color: var(--phn-green-ink); }
.phn-btn--sun { background: var(--phn-green-soft); color: var(--phn-deep); border-color: var(--phn-green-soft); }
.phn-btn--sun:hover { background: var(--phn-green); border-color: var(--phn-green); color: #fff; }

.phn-btn--sm { min-height: 46px; padding: 0.55em 1.35em; font-size: var(--phn-text-xs); }
.phn-btn--lg { min-height: 64px; padding: 1em 2.4em; font-size: var(--phn-text-base); }

.phn-btn-row { display: flex; flex-wrap: wrap; gap: var(--phn-space-3) var(--phn-space-4); }

.phn-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-weight: 700;
  color: var(--phn-green-ink);
  text-decoration: none;
  letter-spacing: 0.04em;
}
/* 矢印は丸い面を持たせず、文字と同じ色の小さな記号にする（PC・スマートフォン共通）。
   丸い水色の面は文言より目立つため、2026-09-26 にスマートフォンで外し、PC もこれにそろえた。 */
.phn-textlink__circle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 1.25em; block-size: 1.25em;
  background: transparent; color: currentColor; flex: none;
  transition: transform var(--phn-duration) var(--phn-ease);
}
.phn-textlink__circle svg { inline-size: 100%; block-size: 100%; }
.phn-textlink:hover { color: var(--phn-deep); }
.phn-textlink:hover .phn-textlink__circle { transform: translateX(3px); }
.phn-textlink > svg { inline-size: 1em; block-size: 1em; flex: none; }
.phn-textlink--green-ink { color: var(--phn-green-ink); }

/* --- カード：大きな余白と角丸、枠線・影なし ------------------------------- */
.phn-card {
  position: relative;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-radius: var(--phn-radius-lg);
  background: var(--phn-surface);
  box-shadow: 0 2px 12px rgba(47, 79, 62, 0.04);
}
.phn-card--xl { border-radius: var(--phn-radius-xl); }
.phn-card--sky { background: var(--phn-sky-pale); }
.phn-card--green { background: var(--phn-green-pale); }
.phn-card--yellow { background: var(--phn-surface); }
.phn-card--ivory { background: var(--phn-ivory); }
.phn-card--deep { background: var(--phn-deep); color: #EAF2ED; }
.phn-card--deep h2, .phn-card--deep h3 { color: #fff; }
.phn-card__title { font-size: var(--phn-h3); color: var(--phn-deep); margin-bottom: var(--phn-space-3); }
.phn-card__title--md { font-size: var(--phn-h4); }
.phn-card__body { margin: 0; color: var(--phn-ink-muted); }
.phn-card__ill { margin: 0 0 var(--phn-space-5); }
.phn-card__ill .phn-ill { max-width: 160px !important; }
.phn-card__foot { margin-top: var(--phn-space-5); }

.phn-card--link { transition: transform var(--phn-duration) var(--phn-ease), box-shadow var(--phn-duration) var(--phn-ease); }
.phn-card--link:hover, .phn-card--link:focus-within { transform: translateY(-4px); box-shadow: var(--phn-shadow-soft); }
.phn-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* 互換：旧 .phn-panel を新カードの見た目へ寄せる */
.phn-panel { position: relative; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-radius: var(--phn-radius-lg); background: var(--phn-surface); }
.phn-panel--sky, .phn-panel--sky-soft, .phn-panel--sky-pale { background: var(--phn-sky-pale); }
.phn-panel--green-soft, .phn-panel--green-pale { background: var(--phn-green-pale); }
.phn-panel--yellow { background: var(--phn-surface); }
.phn-panel__title { font-size: var(--phn-h3); color: var(--phn-deep); margin-bottom: var(--phn-space-3); }
.phn-panel__body { margin: 0; color: var(--phn-ink-muted); }

/* --- 大きな番号（01 02 …）------------------------------------------------ */
.phn-num {
  font-family: var(--phn-font-en);
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--phn-sky);
}
.phn-num--green { color: var(--phn-green-soft); }
.phn-num--yellow { color: var(--phn-sky-ink); }

/* 丸い番号ラベル（POINT 01）。互換 */
.phn-point {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  inline-size: 64px; block-size: 64px; border-radius: 50%;
  background: var(--phn-sky-soft); color: var(--phn-deep);
  font-family: var(--phn-font-en); line-height: 1.1; flex: none;
}
.phn-point small { font-size: 0.5625rem; letter-spacing: 0.12em; font-weight: 800; }
.phn-point b { font-size: 1.375rem; font-weight: 800; }
.phn-point--green, .phn-point--green-soft, .phn-point--mint { background: var(--phn-green-soft); }
.phn-point--yellow { background: var(--phn-sky-soft); }
.phn-point--sky, .phn-point--coral { background: var(--phn-sky-soft); }

/* --- バッジ・タグ -------------------------------------------------------- */
.phn-badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.3em 0.95em; border-radius: var(--phn-radius-pill);
  font-size: var(--phn-text-xs); font-weight: 700; line-height: 1.7; white-space: nowrap;
  letter-spacing: 0.04em;
}
.phn-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.phn-badge--new { background: var(--phn-sky-ink); color: #fff; }

.phn-tag {
  display: inline-block; padding: 0.25em 0.95em; border-radius: var(--phn-radius-pill);
  background: var(--phn-green-pale); color: var(--phn-green-ink);
  font-size: var(--phn-text-xs); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em;
}
.phn-tag--sky, .phn-tag--sky-soft { background: var(--phn-sky-pale); color: var(--phn-sky-ink); }
.phn-tag--yellow { background: var(--phn-green-pale); color: var(--phn-green-ink); }

/* --- 注記 ------------------------------------------------------------- */
.phn-note {
  padding: var(--phn-space-5) var(--phn-space-6);
  border: 1px dashed var(--phn-slate-soft);
  border-radius: var(--phn-radius-md);
  background: var(--phn-surface);
  font-size: var(--phn-text-sm);
  color: var(--phn-ink-muted);
}

/* --- 有機的な装飾（面の中に置く淡い円）---------------------------------- */
.phn-blob, .phn-circle, .phn-motif {
  position: absolute; pointer-events: none; z-index: 0;
}
.phn-blob { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; }
.phn-circle { border-radius: 50%; }
.phn-dots {
  position: absolute; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--phn-sky-soft) 2.5px, transparent 2.5px);
  background-size: 18px 18px; opacity: 0.7;
}

/* --- 背景の空気（輪郭を持たない、ごく淡い光）--------------------------------
   大きな色面でセクションを塗り分けるのではなく、余白の中にやわらかい光を置く。
   縁がぼけているため、面と面の境界ができない。 */
.phn-wash { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; }
/* 外側 16% は完全に透明にしておく。セクションの `overflow: hidden` で切られても、
   そこはすでに色が無いので、横一文字の境界線ができない。 */
.phn-wash--sky   { background: radial-gradient(closest-side, rgba(154, 214, 247, 0.42), rgba(154, 214, 247, 0.12) 58%, rgba(154, 214, 247, 0) 84%); }
.phn-wash--green { background: radial-gradient(closest-side, rgba(108, 194, 74, 0.24), rgba(108, 194, 74, 0.07) 58%, rgba(108, 194, 74, 0) 84%); }
.phn-wash--warm  { background: radial-gradient(closest-side, rgba(226, 219, 199, 0.55), rgba(226, 219, 199, 0) 84%); }

/* --- スマートフォン（2026-09-26）----------------------------------------- */
@media (max-width: 767px) {
  /* カードの内側余白は 24px。ページの左右 20px と合わせて本文幅 287px（375px 時）を確保する */
  .phn-card, .phn-panel { padding: var(--phn-card-pad); min-width: 0; }
  .phn-note { padding: var(--phn-space-4) var(--phn-space-5); }

  /* ボタンは画面幅を超えない。メールアドレスのボタンは字間と左右の余白を詰めて 1 行に収める */
  .phn-btn { max-inline-size: 100%; }
  .phn-btn.phn-breakable {
    padding-inline: 1.1em;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
  }
}