/**
 * Page Common - 下層ページ共通スタイル
 * 各ページの「ヒーロー / セクションヘッダ / 関連ページ / CTA」など、
 * 全下層ページで使い回す共通パターンを定義する。
 */

/* =========================================================
 *  ページ全体ラッパ
 * ========================================================= */

.page-main {
  padding-block: 0;
}

/* SWELL コンテナの余白を抑える(下層ページもフルワイドhero対応) */
.page-access ~ *,
.page-about,
.page-features,
.page-promise,
.page-generic {
  position: relative;
}

/* =========================================================
 *  ヒーロー(共通 .page-hero)
 * ========================================================= */

.page-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-block: var(--space-xl) var(--space-4xl);
  isolation: isolate;
}

.page-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ヒーロー画像の上に重ねるオーバーレイ
 *  - 上部:写真の雰囲気を見せるため透過
 *  - 中央以下:テキスト可読性のためグラデで暗く
 *  - 最下部:強めの暗ミントで文字を確実に浮かせる
 */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(31, 63, 24, 0) 20%,
      rgba(31, 63, 24, 0.45) 55%,
      rgba(20, 45, 15, 0.82) 100%
    );
  z-index: 1;
}

.page-hero__inner {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-2xl);
  color: var(--color-white);
  z-index: 2;
}

.page-hero__eyebrow {
  font-family: var(--font-heading-en);
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  margin: 0 0 var(--space-sm);
  opacity: 0.95;
  color: #EAF5DD;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.page-hero__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h1);
  color: #ffffff !important;
  margin: 0 0 var(--space-sm);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.page-hero__catch {
  font-family: var(--font-catch);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: #ffffff !important;
  margin: 0;
  line-height: var(--lh-catch);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

@media (max-width: 599px) {
  .page-hero { border-radius: var(--radius-md); margin-block: var(--space-md) var(--space-2xl); }
  .page-hero__image { aspect-ratio: 4 / 3; }
  .page-hero__inner { padding: var(--space-lg) var(--space-md); }
  .page-hero__catch { font-size: var(--fs-body); }
}

/* =========================================================
 *  セクションヘッダ(共通 .page-section-head)
 * ========================================================= */

.page-section {
  margin-bottom: var(--space-4xl);
}

.page-section-head {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.page-section-head--left {
  text-align: left;
}

.page-section-head__eyebrow {
  font-family: var(--font-heading-en);
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  margin: 0 0 var(--space-xs);
  font-weight: var(--fw-medium);
}

.page-section-head__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h2);
  color: var(--color-text-main);
  margin: 0;
  line-height: var(--lh-heading);
}

.page-section-head--center .page-section-head__title::after,
.page-section-head:not(.page-section-head--left) .page-section-head__title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  margin: var(--space-md) auto 0;
  background-image: radial-gradient(circle, var(--color-mint-main) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  background-repeat: repeat-x;
}

.page-section-head__sub {
  font-size: var(--fs-body);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
  margin: var(--space-md) 0 0;
}

@media (max-width: 599px) {
  .page-section { margin-bottom: var(--space-3xl); }
}

/* =========================================================
 *  本文ブロック(.page-prose)
 * ========================================================= */

.page-prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-main);
}

.page-prose p {
  margin: 0 0 var(--space-md);
}

.page-prose p:last-child {
  margin-bottom: 0;
}

.page-prose--mint {
  background: var(--color-bg-mint);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 800px;
}

@media (max-width: 599px) {
  .page-prose--mint { padding: var(--space-lg); }
}

/* =========================================================
 *  関連ページカード(.page-related)
 * ========================================================= */

.page-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

/* 関連ページカード(editorial / index-card 風)
 *
 *  方針:
 *  - 「箱の一部だけ色」は使わない。全辺均等の細罫線+全面の薄ミント背景で統一
 *  - リンクのアフォーダンスは「全幅の区切り線+下部のCTAテキスト」で表現
 *    (印刷物の TOC / インデックスカードの語彙)
 *  - 装飾語彙よりタイポグラフィの強さで階層を作る
 */
.page-related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-mint);
  border: 1px solid var(--color-mint-soft);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-decoration: none !important;
  color: var(--color-text-main);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.page-related-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-mint-deep);
  box-shadow: 0 8px 20px rgba(75, 143, 44, 0.10);
}

.page-related-card__eyebrow {
  font-family: var(--font-heading-en);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  margin: 0 0 var(--space-sm);
  font-weight: var(--fw-bold);
}

.page-related-card__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
  transition: color var(--transition-base);
}

.page-related-card__desc {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  line-height: 1.8;
  margin: 0 0 var(--space-lg);
  flex: 1;
}

/* 全幅の区切り線+CTA(「箱の一部だけ色」を避け、罫線は全幅で渡す) */
.page-related-card::after {
  content: 'このページを見る  →';
  display: block;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-mint-soft);
  font-family: var(--font-heading-jp);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--color-mint-deep);
  transition: color var(--transition-base), letter-spacing var(--transition-base);
}

.page-related-card:hover::after {
  color: var(--color-mint-text);
  letter-spacing: 0.08em;
}

.page-related-card:hover .page-related-card__title {
  color: var(--color-mint-deep);
}

@media (max-width: 599px) {
  .page-related-grid { grid-template-columns: 1fr; }
}

/* =========================================================
 *  CTAブロック(.page-cta)
 *  「白い静かなカードを浮かべる」設計で、コンテンツとの差別化と
 *  上品さを両立する。影は極めて控えめ。
 * ========================================================= */

.page-cta {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-mint-soft);
  border-radius: var(--radius-lg);
  padding: calc(var(--space-4xl) + var(--space-md)) var(--space-2xl) calc(var(--space-4xl) + var(--space-md));
  text-align: center;
  margin-top: var(--space-5xl);
  margin-bottom: var(--space-4xl);
  box-shadow:
    0 16px 40px -12px rgba(31, 63, 24, 0.10),
    0 4px 12px rgba(31, 63, 24, 0.04);
  overflow: hidden;
}

/* 上端の葉のあしらい(セクション見出しと統一感) */
.page-cta::before {
  content: '';
  display: block;
  width: 72px;
  height: 22px;
  margin: 0 auto var(--space-2xl);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='22' viewBox='0 0 72 22'><path d='M5 11 Q18 4 36 11 T67 11' stroke='%236BB73C' stroke-width='1.5' fill='none'/><ellipse cx='18' cy='8' rx='3.5' ry='6' fill='%236BB73C' opacity='0.55' transform='rotate(-30 18 8)'/><ellipse cx='54' cy='14' rx='3.5' ry='6' fill='%236BB73C' opacity='0.55' transform='rotate(30 54 14)'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.page-cta__lead {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h2);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-lg);
  line-height: var(--lh-heading);
  font-weight: var(--fw-medium);
}

.page-cta__sub {
  margin: 0 auto var(--space-2xl);
  color: var(--color-text-sub);
  font-size: var(--fs-body);
  line-height: 2;
  max-width: 540px;
}

.page-cta__buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ボタンを少し大きめ・しっかり */
.page-cta .btn-primary {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--fs-body);
  box-shadow: 0 6px 18px -4px rgba(75, 143, 44, 0.4);
}

.page-cta .btn-secondary {
  padding: 14px var(--space-xl);
  border-width: 1.5px;
}

@media (max-width: 599px) {
  .page-cta {
    padding: var(--space-3xl) var(--space-lg);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-3xl);
  }
  .page-cta__buttons { flex-direction: column; align-items: stretch; }
  .page-cta__lead { font-size: var(--fs-h3); }
}