/*
Theme Name: eve design
Theme URI: https://evedesign.site
Author: eve design
Description: evedesign.site 公式サイト用テーマ
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: evedesign
*/

/* サイト全体：Tablet／SP（960px未満、既存のcontent widthを境目に使用）で本文・見出しに
   確実な左右余白（28px）を確保する。

   経緯：theme.jsonの styles.spacing.padding（has-global-paddingの仕組み）で対応を試みたが、
   WordPressコア側に「入れ子のhas-global-padding要素は二重padding防止のため左右0にする」
   ルールがあり、align="wide"のセクション（Selected Works／Service／Blogなど）はこの対象に
   なって自身のpaddingが0に相殺されてしまう。align="full"側も含め、実機検証で十分な余白が
   得られなかったため、theme.json側の設定は行わず、ここで直接・確実に指定する。

   背景色（alignfullセクション自体）は画面端まで維持したいため、セクション自体ではなく、
   実際にコンテンツが入る要素（wideセクション自身／fullセクションの直下の内容／footer内の
   内容）にだけpaddingを与える。mainとfooter自身の外側paddingは0のまま（背景の全幅表示に
   影響させない）。1テンプレートずつの個別対応ではなく、この1箇所のみで全ページに適用される。 */
@media (max-width: 959px) {
	main.wp-block-group > .alignwide,
	main.wp-block-group > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
	main.wp-block-group > .alignfull > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
	footer.alignfull > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		padding-left: var(--wp--preset--spacing--m);
		padding-right: var(--wp--preset--spacing--m);
		box-sizing: border-box;
	}
}

/* 日本語タイポグラフィ共通ルール：
   theme.json側で見出し（h1-h6）のデフォルトを fontWeight:400、
   font-familyを "Cormorant","Shippori Mincho",serif の順に変更した。
   これにより、fontFamilyを個別指定していない日本語見出し（TOP Hero、Works詳細タイトル、
   Service各見出し、Contact見出し等）は自動的にShippori Mincho・weight 400で統一される。
   英字見出し（fontFamily:"heading"を明示指定＝has-heading-font-familyクラスが付くもの。
   「Service」「Works」「About」等）は、従来どおりの太さ（ブラウザ既定のbold）を維持する。 */
.has-heading-font-family {
	font-weight: 700;
}

/* 日本語本文中の強調（strong/b）が、読み込んでいないウェイト(700)によるフォント合成の
   太字（にじんだような表示）にならないよう、実際に読み込み済みの600に固定する */
strong,
b {
	font-weight: 600;
}

/* コンテンツ幅の階層（theme.jsonのcontentSize/wideSizeでは表現しきれない、Text width用の補助クラス） */
.has-text-width {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

/* ヘッダー：ナビ項目同士、ナビとボタンの間隔（グローバルのblockGapを0にしたため個別指定） */
.header-actions {
	gap: 32px;
}
.site-nav .wp-block-navigation__container {
	gap: 28px;
}

/* ヘッダー：SP Navigationオーバーレイのメニュー項目のみ、文字サイズとタップ領域を調整する。
   `.is-menu-open` はオーバーレイが開いている状態にのみ付与されるクラスのため、
   PC側のインラインNavigation・右寄せ配置・項目間の余白（上のgap）・閉じるボタンには影響しない */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
	min-height: 44px;
	align-items: center;
}

/* ヘッダー：ナビ項目ホバー時の小さな丸アクセント（旧サイトの雰囲気を踏襲）。
   文字位置には影響させないため`position:absolute`で文字の上に重ねるだけにする
   （通常表示時のナビ文字・間隔・ヘッダー高さは一切変更しない）。
   `.wp-block-navigation__responsive-container`はPCのインライン表示・SPのハンバーガー
   オーバーレイの両方で同じHTML（同じ.wp-block-navigation-item__content）を共有しているため、
   `:not(.is-menu-open)`（SPオーバーレイが開いている間だけ付与されるクラス）で
   SPハンバーガーメニュー内には表示されないようにする。`.site-nav`はヘッダーのnavigationにのみ
   付けているclassNameのため、Footerのnavigationには影響しない。 */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	position: relative;
}
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity 180ms ease;
	pointer-events: none;
}
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover::before,
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible::before {
	opacity: 1;
}

/* ヘッダー：ナビのハンバーガーアイコンを、WordPressコア標準の横線2本から一般的な横線3本に
   変更する。開閉機能・HTML構造・タップ領域（ボタン自体のサイズ）は変更しない。標準のSVGは
   非表示にし、同じボタンの上にCSSのみで3本線を描画する（JS不使用） */
.site-header .wp-block-navigation__responsive-container-open {
	position: relative;
}
.site-header .wp-block-navigation__responsive-container-open svg {
	opacity: 0;
}
.site-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--brown);
	transform: translate(-50%, -50%);
	box-shadow: 0 -6px 0 var(--wp--preset--color--brown), 0 6px 0 var(--wp--preset--color--brown);
}

/* ヘッダー：ロゴ・ナビ・ボタンの高さが揃わなくても、常に上下中央に揃える */
.site-header {
	align-items: center !important;
}
.site-header > * {
	align-self: center !important;
}

/* ヘッダー：SP（390px/320px想定）でロゴ・ハンバーガー・お問い合わせCTAが1行に収まるよう、
   間隔とCTAの左右padding・文字サイズのみ縮小する。構造・ハンバーガーの仕組み・PC/Tabletの
   見た目には影響しない（既存の480px以下ブレークポイントを再利用） */
@media (max-width: 480px) {
	.header-actions {
		gap: 12px;
	}
	.site-header .wp-block-button__link {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
	}
}

/* ヒーロー：背景の大きな"eve design"文字とアートビジュアルを重ねて配置 */
.hero-visual-wrap {
	position: relative;
	display: flex;
	justify-content: center;
}
.hero-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(85%, 900px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}
/* ヒーロー：SP（480px以下）のみ、背面の筆記体をもう一段大きくし、画像の左右から
   大胆に見えるようにする（旧STUDIO版を参考にしたレイヤー感）。画像側は今回変更しない。
   .hero-visual-wrap基準の110%。

   .hero-watermarkはposition:absoluteのため、この110%は.hero-visual-wrapの
   コンテンツ幅ではなくパディングボックス（＝SPでは実質ビューポート幅）を基準に計算される。
   そのため110%はビューポート幅を超え、ページ全体に横スクロールが発生していた。
   デザイン（左右にはみ出して見える見た目）は維持したいため、幅の値自体は変更せず、
   直近の親である.hero-visual-wrapをSP限定でクリップして、はみ出た分だけを
   Hero領域内に収める（他セクションやPC/Tabletの見た目には影響しない） */
@media (max-width: 480px) {
	.hero-watermark {
		width: 110%;
	}
	.hero-visual-wrap {
		overflow: hidden;
	}
}
.hero-visual-wrap img {
	position: relative;
	z-index: 1;
}

/* ヒーロー：SP（480px以下）のみアートビジュアルを縮小する。旧STUDIO版の構成
   （白い筆記体が背面で画像より大きく、画像の左右から筆記体が見えるレイヤー感）を参考にし、
   画像をさらに縮小。背面の.hero-watermark（幅は.hero-visual-wrap基準で85%、既存のまま
   変更していない）の方が相対的に大きくなるため、追加のCSSなしで画像の左右に筆記体が
   見える構成になる。position・z-index（画像が前面、筆記体が背面）は既存のまま。
   アスペクト比はheight:autoにより自動維持、中央配置（.hero-visual-wrapのjustify-content）は
   変更していないためそのまま維持される。widthはブロック側のinline style（340px）を
   上書きするため!importantが必要 */
@media (max-width: 480px) {
	.hero-art-image {
		width: 215px !important;
	}
}

/* ヒーロー：コピー下からセクション終了までの余白を詰める。上余白（watermark／アートビジュアルの
   配置）・構成・文字サイズは変更せず、padding-bottomのみ調整する。PCはブロック側の値を
   xl(88px)→l(56px)に直接変更済み（style属性）。SP（480px以下）はさらにm(28px)まで詰める
   （ブロックのinline styleを上書きするため!importantが必要）。padding-topは常にxlのまま */
@media (max-width: 480px) {
	.hero-section {
		padding-bottom: var(--wp--preset--spacing--m) !important;
	}
}

/* ヒーロー：メインコピー。SP（480px以下）のみ、意味のまとまりで改行するための専用<br>
   （PC/Tabletでは非表示、既存の改行挙動を維持） */
.hero-sp-break {
	display: none;
}
@media (max-width: 480px) {
	.hero-sp-break {
		display: inline;
	}
	/* fontSize:"section-heading"のユーティリティクラスはWordPressコア側で!important指定のため、
	   SP限定でも確実に上書きできるよう、こちらも専用クラス＋!importantで指定する */
	.hero-heading-title.has-section-heading-font-size {
		font-size: 32px !important;
		line-height: 1.5;
	}
}

/* Service：番号の行間を詰めて見出しに近づける／薄すぎた視認性を少しだけ上げる（ブラウンを低不透明度で使用） */
.service-card p:first-child {
	line-height: 1;
	margin-bottom: 8px;
	color: rgba(47, 42, 28, 0.35);
}

/* Service詳細：01/02/03の大きな数字（TOPのService番号と同じブラウン低不透明度で統一） */
.service-detail-number {
	font-size: calc(var(--wp--preset--font-size--display-number) * 1.4);
	line-height: 1;
	margin-bottom: 8px;
	color: rgba(47, 42, 28, 0.35);
}

/* Service詳細：スクロールに合わせて01→02→03が現れる控えめな演出（CSSのみ、JS不使用）。
   非対応ブラウザ／prefers-reduced-motionの場合は即座に通常表示になる（duration未指定＝0秒で完了） */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.service-detail-number {
			animation: service-number-in linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 35%;
		}
	}
}
@keyframes service-number-in {
	from { opacity: .15; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Works一覧：カテゴリナビ（inc/works-template-functions.php [works_category_nav]が出力）＋
   一覧本体の横並びレイアウト。PCは左に控えめな細幅ナビ、右に一覧という構成。
   ナビ自体はカード化・背景色なし。余白と縦の色バーのみで見せる。 */
.works-list-layout {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--l);
}
.works-list-layout > .wp-block-query {
	flex: 1 1 auto;
	min-width: 0;
}
.works-category-nav {
	flex: 0 0 132px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}
.works-category-nav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	color: var(--wp--preset--color--brown);
	text-decoration: none;
	font-size: 14px;
}
.works-category-nav__label {
	white-space: nowrap;
}
/* カテゴリ名は日本語のため本文フォント（Shippori Mincho）、ALLのみ英字のため
   見出しフォント（Cormorant）。太字にはしない（font-weightは指定しない＝通常のまま） */
.works-category-nav__item--all .works-category-nav__label {
	font-family: var(--wp--preset--font-family--heading);
}
.works-category-nav__bar {
	flex: 0 0 auto;
	width: 3px;
	height: 14px;
	border-radius: 1px;
	opacity: 0.75;
	transition: height 200ms ease, width 200ms ease, opacity 200ms ease;
}
/* カテゴリごとの色（落ち着いたトーン、Ivory/Brown/Whiteベースを壊さない範囲） */
.works-category-nav__item--all .works-category-nav__bar {
	background: var(--wp--preset--color--accent); /* #BB5128 */
}
.works-category-nav__item--design .works-category-nav__bar {
	background: #C1665A; /* muted terracotta */
}
.works-category-nav__item--support .works-category-nav__bar {
	background: #7A9B76; /* muted green */
}
.works-category-nav__item--digital .works-category-nav__bar {
	background: #6E8CA0; /* muted blue */
}
.works-category-nav__item--default .works-category-nav__bar {
	background: var(--wp--preset--color--border-gray);
}
/* hover：バーが少し長くなる＋濃くなる（150〜250ms、控えめ） */
.works-category-nav__item:hover .works-category-nav__bar {
	height: 20px;
	opacity: 1;
}
/* active：文字色とバーを少し強調 */
.works-category-nav__item.is-active {
	color: var(--wp--preset--color--accent);
}
.works-category-nav__item--design.is-active {
	color: #C1665A;
}
.works-category-nav__item--support.is-active {
	color: #7A9B76;
}
.works-category-nav__item--digital.is-active {
	color: #6E8CA0;
}
.works-category-nav__item.is-active .works-category-nav__bar {
	width: 4px;
	height: 20px;
	opacity: 1;
}

/* SP（480px以下）：左サイドバーではなく、一覧の上に横スクロール1行で表示する */
@media (max-width: 480px) {
	.works-list-layout {
		flex-direction: column;
	}
	.works-category-nav {
		flex-direction: row;
		flex: none;
		width: 100%;
		gap: 20px;
		padding: 0 0 var(--wp--preset--spacing--s);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}
	.works-category-nav::-webkit-scrollbar {
		height: 3px;
	}
	.works-category-nav::-webkit-scrollbar-thumb {
		background: transparent;
	}
	.works-category-nav__item {
		flex: 0 0 auto;
	}
}

/* Works一覧：1件ずつの横長の帯。カードUIにせず、細い罫線と余白のみで区切る */
.works-list .wp-block-post-template > li {
	list-style: none;
	border-bottom: 1px solid #EAEAEA;
}
.works-list .wp-block-post-template > li:first-child {
	border-top: 1px solid #EAEAEA;
}

/* Works一覧：アイキャッチ画像枠。画像が無いWorksでも同じ大きさのボックスを保つプレースホルダーになる。
   PCでは3:2の横長比率を基準にし、object-fit:coverで隙間なく収める
   （コアブロックのデフォルトスタイル img{height:auto} より優先させるため一部!important）。
   paddingは明示的に0にリセットする。WordPressコアが背景色付きグループに既定で
   `padding:1.25em 2.375em`を当てる（:where()指定のため詳細度は0で、本来はどんな
   クラス指定にも上書きされる想定の値）ため、指定しないままだとアイキャッチ画像の
   周囲にアイボリー背景が余白として透けて見える「フレーム」になってしまっていた。
   画像なしWorksのフォールバック（.works-image-placeholder）は自身で内側の余白を
   持つため、ここを0にしてもテキストが詰まって見えることはない。 */
.works-list-thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	padding: 0;
}
.works-list-thumb .wp-block-post-featured-image {
	width: 100%;
	height: 100%;
	margin: 0;
}
.works-list-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* TOP Selected Works：3件共通の画像エリア（3:2）。ベージュ（ivory）は使わず、白背景＋
   1px罫線（border-gray、#EAEAEA）の細いフレームのみで見せる。borderはこの画像エリアのみに
   付け、カード全体（.works-card）には付けない。ブロック側もbackgroundColor:ivoryを外し、
   has-background関連の既定padding問題自体が発生しない状態にしている
   （Works一覧の.works-list-thumb・Works詳細の.works-image-placeholder-wrapは対象外、
   fallbackデザイン自体も変更しない）。 */
.works-thumb {
	position: relative;
	overflow: hidden;
	padding: 0;
	background: #ffffff;
	border: 1px solid #EAEAEA;
}
/* 画像あり：core/shortcodeブロックはショートコードの出力をwpautop()経由で描画するため、
   [works_top_thumb]が返す<img>が<p>タグ1つに包まれてレンダリングされていた。この<p>が
   ブラウザ既定の上下margin（約1em）を持ち、かつ高さが画像の自然な高さのまま
   （.works-thumbの4:3いっぱいには広がっていなかった）ため、上下にベージュ／白の
   余白帯が生じていた。<p>自体を余白ゼロ・幅高さ100%にし、imgをブロック要素として
   隙間なく敷き詰める。 */
.works-thumb p {
	margin: 0;
	width: 100%;
	height: 100%;
}
.works-thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Works一覧：カラム自体の実寸をflex-basis（35%／65%）どおりに固定する。
   WordPressコアは縦揃えクラス(is-vertically-aligned-*)を持つカラムに width:100% を
   グローバルに適用するため（レスポンシブ用ではなく常時適用）、意図せず列幅の見え方が
   崩れる原因になっていた。ここで明示的に上書きする。 */
.works-item.wp-block-columns > .wp-block-column {
	width: auto;
}

/* Works一覧：帯の左右padding。PC（48px、テンプレート側のinline style）はそのまま維持し、
   480px以下（SP）のみサイト全体の左右余白（spacing|m＝28px）に揃える。
   inline styleを上書きするため!importantが必要。カラム構造・縦方向の余白・画像／文字関連の
   スタイルには触れない */
@media (max-width: 480px) {
	.works-item {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
}

/* Works一覧：サービス分類・制作物の種類を1行に並べる */
.works-item-terms {
	gap: 12px;
	flex-wrap: wrap;
}
.works-item-terms .wp-block-post-terms {
	margin: 0;
}

/* Works一覧：タイトルはリンクだが、サイト共通のアクセントカラーではなく本文と同じダークブラウンにする。
   ページ見出し「Works」・作品画像に対して主張が強すぎたため、Works一覧限定でサイズを18px（SP 17px）に調整
   （Shippori Mincho／font-weight 400はグローバルの見出しルールを継続利用、他の.wp-block-post-titleには影響しない） */
.works-list .wp-block-post-title,
.works-list .wp-block-post-title a {
	color: var(--wp--preset--color--brown);
}
.works-list .wp-block-post-title {
	font-size: 18px;
	line-height: 1.5;
}
@media (max-width: 782px) {
	.works-list .wp-block-post-title {
		font-size: 17px;
	}
}

/* Works詳細：H1タイトル。作品画像に対して主張が強すぎたため30px（SP 24px）に調整
   （色はグローバルの見出しルールを継続利用、.wp-block-post-title全体には影響しない） */
.works-detail-title {
	font-size: 30px;
	line-height: 1.4;
}
@media (max-width: 782px) {
	.works-detail-title {
		font-size: 24px;
	}
}

/* Works詳細・Blog詳細共通：本文（core/post-content）は投稿ごとに中身が変わるブロックのため、
   テンプレート側で自動生成されるblockGap（他のグループ・セクションが使っている一定間隔の仕組み）
   が適用されない。そのままだとブラウザ既定の余白のみに頼ることになり、見出し・段落・リスト・
   引用・区切り線の間隔がブロックの種類によってまちまちに見えてしまうため、直接の子要素の余白を
   一度リセットし、本文として自然に読める一定のリズムで付け直す
   （画像ブロックはブロックごとに個別のmargin-topを持たせているため、ここでは上書きしない）。 */
.wp-block-post-content > * {
	margin-top: 0;
	margin-bottom: 0;
}
.wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--s);
}
.wp-block-post-content > h2 + * {
	margin-top: var(--wp--preset--spacing--xs);
}
.wp-block-post-content > hr {
	margin-top: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--m);
}

/* Works詳細・Blog詳細：core/image（wp-block-image）が2つ以上連続して並んでいる場合だけ、
   その画像同士の間に余白を作る（隣接セレクタのため、間に見出しや段落が入る通常の配置には
   影響しない）。原因：画像ブロックは個別にmargin-topを持たせる運用にしており、2枚目の画像に
   8px（例：手帳の市）や16px（例：コレミチ）とブロックごとに小さめの値が設定されていたため、
   ほぼ密着して見えていた。ここでは20px（希望レンジ16〜24pxの中央）に統一し、各画像ブロックの
   個別インラインmargin-topより優先させるため!importantを使用。画像サイズ・幅・中央配置・
   上下の一律marginには触れない（連続する画像同士の間だけに限定）。 */
.wp-block-post-content > .wp-block-image + .wp-block-image {
	margin-top: 20px !important;
}

/* Works詳細・Blog詳細：本文内の区切り線はほとんど見えず意味も弱いため線自体は表示しないが、
   区切り線があった位置の縦の空間（セクションの区切りとしての余白）は残す。
   Works一覧やContact／Footerなど他の.wp-block-separatorには影響させないよう、
   core/post-content配下のhrに限定している。投稿本文（HTML）自体は変更していない。
   display:noneにすると要素自体が余白ごと消えてしまうため使わず、線（border/background）
   だけを消し、高さ0・上下marginのみで空間を確保する。上下marginは何もない空要素として
   1つに収束して重なる（マージンの相殺）ため、実際に生まれる空間は36px（指定値と同じ）になる。 */
.wp-block-post-content > hr.wp-block-separator.has-alpha-channel-opacity {
	height: 0;
	margin: 36px 0;
	padding: 0;
	border: none;
	background: none;
}

/* Works詳細：タイトル下のクライアント・制作年ライン */
.works-meta-line {
	margin-top: 8px;
	font-size: 14px;
}

/* Works詳細：Works情報の定義リスト（PCはラベル幅固定の2カラム、SPは縦積み） */
.works-info-table {
	display: grid;
	grid-template-columns: 140px 1fr;
	row-gap: 12px;
	column-gap: 24px;
	margin: 20px 0 0;
}
.works-info-row {
	display: contents;
}
.works-info-row dt {
	font-weight: normal;
	color: rgba(47, 42, 28, 0.6);
}
.works-info-row dd {
	margin: 0;
}
@media (max-width: 480px) {
	.works-info-table {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}
	.works-info-row {
		display: block;
		margin-bottom: 12px;
	}
}

/* Works詳細：前後Worksへのシンプルな導線。SPで長いタイトルが入っても横にはみ出さないよう、
   折り返しを許可する（PCは十分な横幅があるため通常は1行のまま） */
.works-prev-next {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	font-size: 14px;
}
.works-prev-next__next {
	margin-left: auto;
	text-align: right;
}

/* Works：アイキャッチ画像が未設定のWorksで表示する共通フォールバック（inc/works-template-functions.php
   evedesign_works_image_placeholder_markup()が出力するHTMLに対応）。ラスター画像を用意せず、
   Cormorant（見出しフォント）と余白だけで静かに成立させる。アクセントカラーは中央の短い罫線1本のみ、
   ごく小さく使用。アイキャッチが設定されているWorksの表示には影響しない。 */
/* 縦中央は position:absolute + top:50% + transform:translateY(-50%) で固定する。
   従来はheight:100%の子要素をjustify-content:centerで縦中央に寄せていたが、親
   （.works-list-thumb／.works-image-placeholder-wrap）がflexレイアウトのgroupブロックの
   ため、パーセント指定の高さが意図通りに解決されず、見た目がやや下寄りになっていた。
   絶対配置にすることで親のレイアウト方式に関係なく確実にボックスの縦中央へ配置する
   （横中央は左右のtranslateXとwidth:100%のtext-align:centerで従来どおり維持）。 */
.works-image-placeholder {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
}
.works-image-placeholder-primary {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brown);
}
.works-image-placeholder-rule {
	width: 24px;
	height: 1px;
	background: var(--wp--preset--color--accent);
}
.works-image-placeholder-secondary {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: rgba(47, 42, 28, 0.6);
}
.works-image-placeholder-tertiary {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(47, 42, 28, 0.45);
}

/* Works詳細：アイキャッチ相当の帯を新規に用意し（一覧はwp-block-post-template側の
   .works-list-thumbが既にアイボリー枠を持つためそのまま利用）、一覧より大きいサイズで表示する */
.works-image-placeholder-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.works-image-placeholder--detail .works-image-placeholder-primary {
	font-size: 26px;
}
.works-image-placeholder--detail .works-image-placeholder-secondary {
	font-size: 15px;
}
.works-image-placeholder--detail .works-image-placeholder-tertiary {
	font-size: 12px;
}
@media (max-width: 480px) {
	.works-image-placeholder-wrap {
		aspect-ratio: 4 / 3;
	}
	.works-image-placeholder--detail .works-image-placeholder-primary {
		font-size: 22px;
	}
}

/* TOP Selected Works：.works-thumb（4/3、Works一覧より小さめの3カラムカード）に
   自然に収まるよう、一覧（list）よりやや小さいサイズにする。中央配置・罫線1本の
   アクセント・フォント（Cormorant/Shippori Mincho）はWorks一覧・詳細と共通のまま */
.works-image-placeholder--top .works-image-placeholder-primary {
	font-size: 15px;
}
.works-image-placeholder--top .works-image-placeholder-secondary {
	font-size: 12px;
}
.works-image-placeholder--top .works-image-placeholder-tertiary {
	font-size: 10px;
}

/* Blog一覧・関連記事：雑誌の目次のような静かな一覧。カードUIにせず、細い罫線と余白のみで区切る。
   Blog一覧（Query Loopの.wp-block-post-template > li）、Blog詳細の関連記事（PHPで出力する li）の両方に適用される */
.blog-list li {
	list-style: none;
	border-bottom: 1px solid #EAEAEA;
}
.blog-list li:first-child {
	border-top: 1px solid #EAEAEA;
}

/* Blog一覧・Blog詳細：カテゴリー・「／」・日付を1行に並べる（補助情報として小さく） */
.blog-item-meta {
	gap: 8px;
}
.blog-item-meta > * {
	margin: 0;
}

/* Blog一覧：タイトルはリンクだが、サイト共通のアクセントカラーではなく本文と同じダークブラウンにする（主役として扱う） */
.blog-list .wp-block-post-title,
.blog-list .wp-block-post-title a {
	color: var(--wp--preset--color--brown);
}

/* Blog一覧：ページネーションは控えめに */
.blog-list .wp-block-query-pagination {
	font-size: 14px;
	gap: 16px;
}

/* Blog詳細：関連記事セクション（Blog一覧と同じ静かなインデックス型デザインを再利用） */
.blog-related {
	margin-top: var(--wp--preset--spacing--l);
}
.blog-related__heading {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--s);
}
.blog-related__title {
	display: block;
	margin-top: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--brown);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}
.blog-related__title:hover {
	color: var(--wp--preset--color--accent);
}

/* Footer：SP（480px以下）のみ、上下paddingを確保し、ロゴを少し大きくし、要素間の余白を詰める。
   中央揃え・配色・フォント・Navigation構成・HTML構造は変更しない。

   確認結果：parts/footer.htmlのブロック設定ではpadding-top:xl（88px）/padding-bottom:l（56px）
   を指定していたが、保存されたHTML自体にはこの値が反映されておらず、Footer自体の上下padding
   は実際には0pxだった（Contactセクションが同じブラウン背景で直前に続くため、Contact側の
   padding-bottom（xl・変更対象外）がFooterの余白であるかのように見えていたと考えられる）。
   ここではPC側の現状の見た目には触れず、SP側にのみ新たに適切な余白を指定する。 */
@media (max-width: 480px) {
	footer.alignfull {
		padding-top: var(--wp--preset--spacing--l);
		padding-bottom: var(--wp--preset--spacing--m);
	}
	footer.alignfull figure.wp-block-image {
		width: 140px !important;
	}
	footer.alignfull > nav {
		margin-top: var(--wp--preset--spacing--s);
	}
	footer.alignfull > nav + p {
		margin-top: var(--wp--preset--spacing--xs);
	}
	footer.alignfull > nav + p + p {
		margin-top: var(--wp--preset--spacing--s);
	}
}

/* Contact見出し：SP（480px以下）のみ文字サイズを縮小し、2行になった際に詰まりすぎないよう
   line-heightも調整する。文言・中央揃え・本文・ボタン・背景色・余白（padding）・PC/Tablet
   表示には影響しない。has-brown-background-colorはContactとFooterのみで使用しており、
   Footer側に該当する見出しは無いため、この組み合わせでContact見出しだけを特定できる */
@media (max-width: 480px) {
	.has-brown-background-color .has-section-heading-font-size {
		font-size: 26px !important;
		line-height: 1.4;
	}
}

/* Contact見出し・本文：SP（480px以下）のみ、意味のまとまりで改行するための専用<br>。
   PC/Tabletでは非表示にし、既存の改行挙動・文章を維持する（HTML構造は<br>の追加のみ） */
.contact-sp-break {
	display: none;
}
@media (max-width: 480px) {
	.contact-sp-break {
		display: inline;
	}
}

/* FAQ：ネイティブdetails/summaryによるアコーディオン */
.faq-item {
	border-bottom: 1px solid #EAEAEA;
	padding-top: 20px;
	padding-bottom: 20px;
}
.faq-question {
	cursor: pointer;
	font-size: 19px;
	list-style: none;
}
.faq-question::-webkit-details-marker {
	display: none;
}
.faq-question::after {
	content: "+";
	float: right;
}
.faq-item[open] .faq-question::after {
	content: "−";
}
.faq-answer {
	margin-top: 12px;
}