@charset "UTF-8";

/************************************************************************
* 中ページ共通
* 代表挨拶 / 創造文化圏とは / 光幻堂 / MIAについて の 4 ページで共有する。
* 読み込み順: fantasia.css → subpage.css → {page}.css
* fantasia.css は既存 3 ページと共用のため変更しない。
*
* 数値の基準: デザインカンプは @2x（4092px）。以下の px はすべて実寸（カンプ÷2）で、
* 画面幅 2046px のときカンプと等倍になる。clamp の vw 項がそれ未満の幅で比例縮小し、
* 下限値が可読性の床になる。フォントサイズ・字送り・行送りはすべて PSD の保存値。
************************************************************************/

.fantasia-sub-page {
  --fantasia-sub-purple: #4e1c76;
  --fantasia-sub-muted: #8d6c7a;
  --fantasia-sub-rule: rgb(107 101 110 / 50%);

  --fantasia-sub-fz-title: clamp(40px, 4.888vw, 100px);
  --fantasia-sub-fz-heading: clamp(24px, 2.444vw, 50px);
  --fantasia-sub-fz-subheading: clamp(18px, 1.466vw, 30px);
  --fantasia-sub-fz-text: clamp(15px, 1.124vw, 23px);
  --fantasia-sub-fz-small: clamp(13px, 0.8vw, 18px);
  --fantasia-sub-fz-xsmall: clamp(12px, 0.6vw, 16px);

  --fantasia-sub-inset: clamp(10px, 1.466vw, 30px);
  --fantasia-sub-gap-heading: clamp(16px, 2.053vw, 42px);
  --fantasia-sub-gap-rule: clamp(30px, 4.057vw, 83px);
  --fantasia-sub-gap-section: clamp(36px, 4.888vw, 100px);
}

/* ヘッダーが absolute のため、その分を main で確保する（カンプの本文開始位置 y=248） */
.fantasia-sub-main {
  padding-top: clamp(90px, 12.12vw, 248px);
  padding-bottom: clamp(40px, 3.9vw, 80px);
}

/* 区切り罫線の幅 = カンプの line レイヤー幅 1928 / 2046 */
.fantasia-sub-container {
  width: min(94.24%, 1928px);
  margin-inline: auto;
}

/* 罫線より内側に入る本文・見出しのブロック */
.fantasia-sub-block {
  padding-inline: var(--fantasia-sub-inset);
}

.fantasia-sub-block + .fantasia-sub-block {
  margin-top: var(--fantasia-sub-gap-section);
}

/* 区切り罫線は装飾専用の要素を作らずブロックの下辺で表現する */
.fantasia-sub-block--ruled {
  padding-bottom: var(--fantasia-sub-gap-rule);
  border-bottom: 1px solid var(--fantasia-sub-rule);
}

/* セクション見出し（光幻堂・MIA が使用。50px / ls .10em） */
.fantasia-sub-heading {
  margin: 0;
  font-size: var(--fantasia-sub-fz-heading);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* 本文（全ページ共通。23px / ls .03em / lh 1.74） */
.fantasia-sub-text {
  margin: 0;
  font-size: var(--fantasia-sub-fz-text);
  letter-spacing: 0.03em;
  line-height: 1.74;
}

.fantasia-sub-heading + .fantasia-sub-text {
  margin-top: var(--fantasia-sub-gap-heading);
}