/* =============================================================
   CAMMA theme — page-story.css
   固定ページ「ストーリー」(page ID 838, slug story, page-story.php) 専用スタイル
   Figma: ストーリー (fileKey hq2oZ2NymsckMJQirVNzJJ, node 1:1267, 1920x5574)

   イベント系ページ(events-archive.css / single-event.css)は緑背景・白文字だが、
   このページだけ白背景・黒文字(base.css の既定色そのまま)。「STORY」見出しの
   位置・フォント・サイズはイベント系ページの見出しと同一のため値を複製している
   (single-event.css が events-archive.css の値を複製しているのと同じ手法)。

   実際の投稿本文(the_content())は「太字の小見出し + 段落 + 動画2本」が中心で、
   ブロックエディタ(旧テーマ twentytwentyfour)由来の has-small-font-size /
   has-medium-font-size / has-text-align-center / alignfull などのクラスが付く。
   実機確認の結果:
   - has-text-align-center 等の text-align 系クラスは wp-block-library の共通
     CSSで既に効いているため、ここでは何もしない。
   - has-small-font-size / has-medium-font-size は WordPress コアのグローバル
     スタイル(global-styles-inline-css)が !important 付きで font-size を
     適用する(small=13px, medium=20px)。medium(20px=2rem)はこのページの
     デザインと矛盾しないが、small(13px=1.3rem)は本文のほぼ全ての段落に付いて
     いるにもかかわらずサイト既定の本文サイズ(1.6rem)より小さく、本文が
     不自然に小さく見えてしまうため、!important で 1.6rem に上書きしている
     (コア側が !important のため、こちらも !important が無いと勝てない)。
   - alignfull / alignwide: このテーマには theme.json が無く
     add_theme_support('align-wide') も宣言していないため、実機確認では
     ブレイクアウト用CSS(margin: calc(50%/25% - 50vw/25vw))自体が出力されて
     おらず、現状は素のブロック幅(=本文カラム幅)で表示されている。ただし
     将来 theme.json 導入やコア側の挙動変更で有効になった場合に本文カラムを
     はみ出さないよう、念のため max-width:100% で明示的に抑えておく
     (現状は no-op のフォールバック)。

   .entry-content 系のスタイルが他ページに漏れないよう、全てのルールを
   .page-story 配下にスコープしている(裸の .entry-content / p / img 等の
   タグセレクタは使わない)。

   px→rem は全て ÷10 (1920px設計 = 192rem)。PC専用のためメディアクエリなし。
   ============================================================= */

/* -------------------------------------------------------------
   ページ全体 (.page-story)
   ヘッダー(.l-header, position:fixed, 高さ10rem)がこのページにも重なる想定
   のため、他ページと同様、上部に余白は作らない。本文の長さは実データに
   依存するため、single-event / events-archive と同じ考え方
   (min-height + padding-bottomで内容に応じて伸ばす)を採用している。
   ------------------------------------------------------------- */
.page-story {
	position: relative;
	width: 100%;
	min-height: 60rem;
	padding-top: 16.5rem;
	padding-bottom: 16rem;
	background-color: var(--color-white);
	color: var(--color-text);
}

/* -------------------------------------------------------------
   「STORY」見出し
   イベント系ページの見出し(.events-archive__heading / .single-event__heading)
   と位置・フォント・サイズが完全に同一で、色だけ黒(--color-text)。
   ページ内に他の見出しが無いため <h1> にしている(詳細はテンプレート
   page-story.php 冒頭のコメント参照)。
   ------------------------------------------------------------- */
.page-story__heading {
	position: absolute;
	top: 16.191rem;
	left: 6rem;
	width: 10.8rem;
	font-family: var(--font-en);
	font-size: 30px;
	line-height: 1;
	color: var(--color-text);
	white-space: nowrap;
}

/* -------------------------------------------------------------
   本文カラム (.page-story__body = <article>)
   幅は Figma実測(x=517 / width=887 → 幅88.7rem)をそのまま採用し、
   イベント系ページの .single-event__body / .events-archive__list と同じ
   考え方(絶対配置ではなく margin:auto の中央揃え)で組んでいる。開始位置
   (Figma y=165)は親要素 .page-story の padding-top(16.5rem)で確保している。
   ------------------------------------------------------------- */
.page-story__body {
	position: relative;
	width: 88.7rem;
	margin: 0 auto;
}

/* -------------------------------------------------------------
   投稿本文 (.page-story__content = the_content() の出力先)
   ------------------------------------------------------------- */
.page-story__content {
	font-family: var(--font-ja);
	font-size: 16px;
	line-height: 28px;
	color: var(--color-text);
}

/* 最後の要素の下余白は詰める(段落・グループ等どれが最後に来ても対応)。 */
.page-story__content > *:last-child {
	margin-bottom: 0;
}

/* base.css がリセットする p の margin を、詰まりすぎない程度に復元する
   (縦リズムの大部分はコンテンツ側の wp:spacer が担うため、ここは最低限)。 */
.page-story__content p {
	margin: 0 0 2.8rem;
}

.page-story__content h1,
.page-story__content h2,
.page-story__content h3,
.page-story__content h4,
.page-story__content h5,
.page-story__content h6 {
	margin: 0 0 2.8rem;
	font-family: var(--font-ja);
	color: var(--color-text);
}

.page-story__content strong,
.page-story__content b {
	font-weight: 700;
	color: var(--color-text);
}

.page-story__content a {
	color: var(--color-text);
	text-decoration: underline;
}

/* base.css のリセット(list-style:none / margin:0 / padding:0)をこのスコープ
   内だけ上書きし、インデント付きの一般的なリスト表示に戻す(実データに
   リストは無いが、single-event.css と同様に将来の入力に備える)。 */
.page-story__content ul,
.page-story__content ol {
	margin: 0 0 2.8rem;
	padding-left: 2rem;
}

.page-story__content ul {
	list-style: disc;
}

.page-story__content ol {
	list-style: decimal;
}

/* -------------------------------------------------------------
   WordPress コアのフォントサイズプリセット (has-small-font-size /
   has-medium-font-size)。
   実機確認: WordPress コアの global-styles-inline-css が
   `.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important}`
   (small=13px, medium=20px)を出力済みで「効いてはいる」が、本文のほぼ全段落が
   has-small-font-size を持つため、コア既定の13px(1.3rem)のままだとサイト既定の
   本文サイズ(1.6rem)より明らかに小さく不自然に見える。デザイン上の可読性を
   優先し、!important で上書きする(コア側が !important のため必須)。
   medium(20px=2rem)はこのページの見出し的段落の大きさとして違和感が無いため
   同じ値を明示するだけに留めている。
   ------------------------------------------------------------- */
.page-story__content .has-small-font-size {
	font-size: 16px !important;
}

.page-story__content .has-medium-font-size {
	font-size: 20px !important;
}

/* -------------------------------------------------------------
   alignfull / alignwide の group はビューポート全幅へブレイクアウトさせず
   本文カラム幅に収める(実機確認では現状ブレイクアウトは発生していないが、
   念のためのフォールバック。詳細はファイル冒頭コメント参照)。
   has-base-2-background-color は旧テーマ(twentytwentyfour)固有の色スロット
   でこのテーマには存在しないため、背景色は付かない(白地なので問題ない)。
   ------------------------------------------------------------- */
.page-story__content .alignfull,
.page-story__content .alignwide {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* -------------------------------------------------------------
   動画 (wp:video)。本文幅いっぱいに表示し、上下に適度な余白を与える
   (コンテンツ側にも前後の wp:spacer があるため控えめな値にしている)。
   controls / poster はコンテンツ側の属性をそのまま活かす。
   ------------------------------------------------------------- */
.page-story__content .wp-block-video {
	margin: 2rem 0;
}

.page-story__content video {
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------
   画像(実データには無いが、将来入った場合に備える)。
   ------------------------------------------------------------- */
.page-story__content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.page-story__content figure {
	margin: 5rem 0;
}

.page-story__content figcaption {
	margin-top: 1rem;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	text-align: center;
	color: var(--color-text);
}

/* =============================================================
   SP (max-width: 920px)
   Figma: SPストーリー (fileKey hq2oZ2NymsckMJQirVNzJJ, node 20:1006, 390x3834)
   見出し x36/y86.9、本文カラム x36/width318(単一カラム)、動画2本は列幅いっぱい。
   プライバシーポリシーの SP 対応と同一の考え方:
   - レイアウト(位置・幅)は rem(base.css の @media で html を calc(100vw/39) =
     1rem=10px@390px に切り替えている前提)。SP Figma の px も ÷10 で rem。
   - フォントは vw スケールで巨大化しないよう「タブレット(768–920px)/
     スマホ(≤767px)」の2段に分け px で指定する。スマホ段は 390px デザインの実px:
       見出し Story … 30px
       本文段落(has-small-font-size) … 13px / line-height 21px
       太字小見出し(has-medium-font-size「villa officeという考え方」) … 16px
     タブレット段はスマホ px × 1.35。
   ※動画は既存の .page-story__content video { width:100% } のままで列幅
     (SP:318px)に収まるため、SP専用の指定は不要。
   ============================================================= */
@media (max-width: 920px) {

	/* 本文開始位置 y=200 = 20rem(見出しは絶対配置でこの余白内に収まる)。 */
	.page-story {
		padding-top: 20rem;
	}

	/* 見出し「Story」: SP Figma x=36 / y=86.91。 */
	.page-story__heading {
		top: 8.691rem;
		left: 3.6rem;
		width: auto;
	}

	/* 本文カラム: SP Figma x=36 / width=318 → 幅31.8rem・左右3.6rem余白の中央寄せ。 */
	.page-story__body {
		width: 31.8rem;
	}
}

/* SP フォント: タブレット (768–920px)。スマホ px × 1.35。倍率調整はこの段の値のみ。 */
@media (min-width: 768px) and (max-width: 920px) {

	.page-story__heading {
		font-size: 40.5px; /* 30px × 1.35 = 40.5 */
	}

	.page-story__content {
		font-size: 17.5px; /* 13px × 1.35 = 17.55 */
		line-height: 28.5px; /* 21px × 1.35 = 28.35 */
	}

	.page-story__content .has-small-font-size {
		font-size: 17.5px !important;
	}

	.page-story__content .has-medium-font-size {
		font-size: 21.5px !important; /* 16px × 1.35 = 21.6 */
	}
}

/* SP フォント: スマホ (≤767px)。390pxデザインの実px。 */
@media (max-width: 767px) {

	.page-story__heading {
		font-size: 30px;
	}

	.page-story__content {
		font-size: 13px;
		line-height: 21px;
	}

	.page-story__content .has-small-font-size {
		font-size: 13px !important;
	}

	.page-story__content .has-medium-font-size {
		font-size: 16px !important;
	}
}