/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ==========================================================================
   現代書館 カスタムCSS
   最終更新：2026/7/27（G-8／G-7のスマホ指定を復旧）
   ========================================================================== */


/* --------------------------------------------------------------------------
   左サイドバー
   ・幅200px固定（769px以上）
   ・768px以下は非表示（ジャンル導線はハンバーガー／ボトムナビが担当）
   ・リンク文字14px

   前提：ウィジェット左右padding 16px（カスタマイザー > レイアウト > サイドバー）
   　　　幅200px − padding32px = 文字領域168px ÷ 14px = 1行12文字
   　　　最長「政治・国際関係・ジャーナリズム・メディア」20文字が2行に収まる

   .site-content を前置きしているのは、GeneratePressが出力する
   .is-left-sidebar{width:20%} より詳細度を上げて確実に上書きするため
   -------------------------------------------------------------------------- */

/* 769px以上：左サイドバーを200px固定 */
@media (min-width: 769px) {

	.site-content .is-left-sidebar {
		width: 200px;
	}

	.site-content .content-area {
		width: calc(100% - 200px);
	}

}

/* サイドバー列そのものの背景色（2026/7/27 G-8）

   カスタマイザーで塗れるのは「サイドバーウィジェット」の背景だけで、
   サイドバーの列そのものを塗る項目が無い（実測：列は透明・ウィジェットのみ #F5F5F5）。
   ウィジェットの上下paddingを0にしたため、ウィジェット間の隙間から
   body の #FAFAFA が透けて、見出しの周囲だけが一段明るい帯になっていた。
   列ごと塗って継ぎ目をなくす。ウィジェット側の #F5F5F5 は同色なので残してよい。

   .site-content を前置きするのは上の幅指定と同じ理由（GPの出力より詳細度を上げる）。
   768px以下は display:none のため影響しない。 */
.site-content .is-left-sidebar {
	background-color: #F5F5F5;
}


/* 768px以下：サイドバーを非表示 */
@media (max-width: 768px) {

	.site-content .is-left-sidebar {
		display: none;
	}

	.site-content .content-area {
		width: 100%;
	}

}

/* サイドバー内のリンク文字サイズ（ウィジェットタイトルは対象外） */
.is-left-sidebar .widget li,
.is-left-sidebar .widget li a {
	font-size: 14px;
}


/* --------------------------------------------------------------------------
   サイドバーの見出しと余白（2026/7/27 G-8）

   ⚠️ 前提：カスタマイザー > レイアウト > サイドバー の「ウィジェットの余白」は
   　　　　上下 0px ／ 左右 16px（3タブとも）。
   　　　　上下の余白はすべてこのファイルで作る。
   　　　　カスタマイザーに値を残したままCSSで打ち消すと、
   　　　　設定画面をいじっても何も起きない状態になり引き継ぎ時に混乱するため。

   　　　　幅200px − 左右16px×2 = 文字領域 168px。14px で 1行12文字。
   　　　　2行に折り返すのは「政治・国際関係・ジャーナリズム・メディア」（20文字）
   　　　　「音楽・芸能・サブカルチャー」（13文字）
   　　　　「フォー・ビギナーズ・シリーズ」（14文字）。

   ※ 幅の200px（カスタマイザーは20%）だけは不一致が残る。
   　 GPは幅を%でしか指定できず（15%/20%の2択）解消不能。

   余白の設計：関係が近いものほど間隔を狭くする。
   　折り返しの行間 21px ＜ 項目間 +8px ＜ 見出し下 12px ＜ 群の区切り 24px＋罫線
   -------------------------------------------------------------------------- */

/* 見出し（「現代書館の本一覧」「シリーズ」）
   レベルはh2のまま、見え方だけ変える。
   カスタマイザーの「すべての見出し＝Shippori Mincho・H2 26px」が効くと
   200px幅に対して大きすぎて折り返すため。
   直下が25個のリンク＝操作対象なので、当初は書籍詳細の「オンライン書店で
   探す」（S20-6）と同じ判断でゴシック16px・太さ400にしていた。

   2026/8/5 G-15：明朝 1.0625rem・600 に変更。トップページに本文側の
   見出し（新刊案内・お知らせ・各対談・note）が5つ並んだことで、
   同じ高さに違う書体が横に並ぶ構図になったため。揃える相手を
   「サイドバー内のリンク群」から「本文側の見出し」へ変えた判断。
   太さ600は、ゴシック400と同じ視覚的な重さを明朝で保つため。
   本文側の .gs-stream__heading / .gs-slider__heading も同時に600へ。

   線は2種類あり、役割で濃さを変えている。
   　下線 #bbb … 見出しと中身の区切り（主）。背景 #F5F5F5 上で 3.25:1。
   　　　　　　　書籍詳細の見出しは背景 #FAFAFA なので #ddd のままでよく、
   　　　　　　　ここだけ濃くしているのは背景が暗いぶんを補うため。
   　上線 #ddd … ジャンル群とシリーズ群の切れ目（従）。両方濃いと線が主張しすぎる。

   色は指定しない（カスタマイザーのウィジェットタイトル #232323 が効く）。 */
.is-left-sidebar h2 {
	margin: 24px 0 12px;
	padding-top: 20px;
	padding-bottom: .3em;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #bbb;
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
}

/* 最初の見出しは群の切れ目ではないので上の罫線と余白を持たせない */
.is-left-sidebar .widget:first-child h2 {
	padding-top: 0;
	border-top: none;
}

/* ターム一覧（コアの core/categories ブロック）
   .wp-block-categories は同ブロックが出力するクラス。
   block-library/src/categories/index.php で
   wp-block-categories-{type} と併せて付くことを確認済み。 */
.is-left-sidebar .wp-block-categories {
	margin: 0;
}

.is-left-sidebar .wp-block-categories li {
	margin: 0 0 8px;
	line-height: 1.5;
}

.is-left-sidebar .wp-block-categories li:last-child {
	margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   書籍詳細ページ（single-books）
   2026/7/26 G-6：gendaishokan-book-meta.php / -bookstore-links.php /
   -related-books.php の wp_head インラインCSSをここへ集約した。
   元は is_singular('books') 限定で出力されていたため、WordPress標準クラスを
   使う書影のみ .single-books を前置きしてスコープを限定している。
   .gs- で始まる独自クラスは他ページに存在しないためスコープ不要。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   明朝とゴシックの使い分け（2026/7/26 G-6）

   原則：H2（セクションの区切り）は明朝のまま。
   　　　H3以下とブロック内部は、中身に合わせて揃える。

   カスタマイザーのタイポグラフィは「サイト全体」にしか効かないため、
   書籍詳細ページの特定箇所だけを変えるここではCSSで指定する。

   var(--gp-font--*) は GP Font Library が生成する fonts.css の変数。
   万一その読み込みが失われても崩れないよう、フォント名を第2候補に置く。
   -------------------------------------------------------------------------- */

/* 副題：書名（H1・明朝）の一部なので明朝に揃える */
.single-books .gs-book-subtitle {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
}

/* 「オンライン書店で探す」：直下が9つのリンク＝操作対象なので、
   見出しだけ明朝だと浮く。ブロック全体をゴシックでまとめる */
.single-books .gs-bookstore-links__title {
	font-family: var(--gp-font--noto-sans-jp), "Noto Sans JP", sans-serif;
}

/* 内容紹介の本文：長文は読ませるものなので明朝。
   明朝で長文を読ませるには行間が要るため 1.5 → 1.8 に広げる。

   18px：明朝はゴシックより字面が小さいため上げて見え方を揃える。
   行長の制限（max-width）は検討したが不採用（2026/7/26 判断）。
   　参考：実データ（Book1.xlsx 説明文カラム2,275件）は
   　中央値298字・31%が800字超・16%が1,500字超・最長9,176字。
   　18pxでPC 1行54字。
   ※適用範囲は bk04body 内の本文のみ。書誌情報・関連書籍・サイドバーは対象外 */
.single-books .gb-element-bk04body .entry-content {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.8;
}

/* 「内容紹介」の見出しと本文の間隔（769px以上のみ）。
   既定はカスタマイザーの Content Separator 2em。書影ブロックとの間隔
   （bk04body の margin-top: 3em）より狭くして、見出しを本文側に寄せる。
   h2 の下余白を 0 にしているのは、相殺で大きいほうが残るため。
   768px以下は現状のままでよいという判断（G-33）。 */
@media (min-width: 769px) {

	.single-books .gb-element-bk04body .wp-block-heading {
		margin-bottom: 0;
	}

	.single-books .gb-element-bk04body .entry-content {
		margin-top: 16px;
	}

}

.gs-stock--in {
	color: #2F4858;
}
.gs-stock--few {
	color: #B36A00;
}
.gs-stock--out {
	color: #777;
}
/* バッジ・ラベル（書籍／お知らせ 共通）
   2026/8/4 G-14：記号（■◆）を廃止し、背景色＋文字で意味を伝える形に統一した。
   文字が意味を担っているため、色は補助であり色だけに依存していない。
   幅は最長4文字（イベント／重版出来／お知らせ）に合わせて75pxで固定する。
   内訳は 12px×4文字＝48 ＋ 字送り1.8px×4＝7.2 ＋ padding .8em×2＝19.2 で74.4px。
   字送り .15em は末尾の文字の後ろにも入るため、中央から約1px左に寄る。許容範囲として補正しない。
   高さ24pxの箱にして inline-flex で上下中央に置く。line-height の継承を切り、
   フォントのベースライン位置に左右されないようにするため（2026/8/4 G-14）。
   アクセント赤 #E64A3B は白系文字とのコントラストが 3.72 でAA（4.5:1）に届かないため背景色には使わない。 */
.gs-badge,
.gs-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 75px;
	height: 24px;
	padding: 0 .8em;
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .15em;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	color: #FAFAFA;
	background: #4A4A4A;
}
.gs-badge {
	margin: 0 0 .5em;
}
.gs-badge--new,
.gs-label--shinkan {
	background: #C0392B;
}
.gs-badge--topic {
	background: #2F4858;
}
.gs-badge--kinkan {
	background: #1B6EC2;
}
.gs-badge--long {
	background: #8B2E4F;
}
.gs-badge + .gs-badge {
	margin-left: 8px;
}
.gs-label--seigohyo {
	background: #6B4E71;
}
.gs-label--event {
	background: #39684A;
}
.gs-label--juhan {
	background: #7A4E1E;
}

/* 書影（アイキャッチ画像）
   幅の制御はここ1箇所に集約する。Element側のブロック設定では指定しない
   （ブロック側でWidthを指定すると figure が固定幅になり、カラムより
     広い場合にはみ出す。max-width:100% が必要になり管理が二重化する）。
   PCの40%では約392pxで、1024px時のカラム（50%＝402px）より小さくなり
   境界で書影が縮むため、1025px以上のみ400px固定に上書きする。 */
.single-books .wp-block-post-featured-image {
	margin: 0;
	max-width: 100%;
	text-align: left;
}
.single-books .wp-block-post-featured-image img {
	display: block;
	width: 400px;
	max-width: 100%;
	height: auto;
}

/* 書影カラムの幅（1025px以上）
   Content Template の Element bk02cover は
   40%（PC）／50%（〜1024px）／100%（〜767px）で定義されている。
   PCの40%では約384pxにしかならず、書影480pxが max-width:100% で
   抑え込まれてしまうため、1025px以上のみ480px固定に上書きする。
   隣の bk03info（書誌情報カラム）は60%固定をやめて残りを埋める。
   タブレット・スマホはElement側の定義をそのまま使う。 */
@media (min-width: 1025px) {

	.single-books .gb-element-bk02cover {
		width: 400px;
	}

	.single-books .gb-element-bk03info {
		width: auto;
		flex-grow: 1;
	}

}


/* 副題（色はタイトルと同じ #232323） */
.gs-book-subtitle {
	margin: -.2em 0 10px;
	font-size: 1.5rem;
	line-height: 1.5;
	color: #232323;
}

/* 前文（シリーズ名＋巻号）：書名の上に段分けで置く（G-43）
   要素は gs_series_prefix_html()（gendaishokan-series-display.php）が、
   書名の要素の中の先頭に出す。前文が空の本では要素ごと出ない。
   大きさは、各場所の副題と同じ値にそろえる。
   書体・太さ・色は書名から受け継ぐ（ここでは指定しない）。 */
.gs-book-prefix {
	display: block;
}
/* 書籍詳細：見出し（H1）の中。副題 .gs-book-subtitle と同じ 1.5rem */
.single-books h1 .gs-book-prefix {
	font-size: 1.5rem;
	line-height: 1.5;
}
/* 関連書籍：副題 .gs-related-books__subtitle と同じ .75rem */
.gs-related-books__name .gs-book-prefix {
	font-size: .75rem;
	line-height: 1.4;
}
/* トップスライダー：副題 .gs-slider--books .gs-slider__subtitle と同じ .8125rem */
.gs-slider--books .gs-slider__name .gs-book-prefix {
	font-size: .8125rem;
	line-height: 1.5;
}
/* 書籍の一覧（要素119）：タイルの副題と同じ 13px、一覧の表示の副題と同じ 14px。
   要素119の書名のブロックは {{book_prefix required:false}}{{post_title}}。
   GBの自動のクラス名は作り直しで変わるため、固定の .gb-loop-item で指定する */
.gb-loop-item .gs-book-prefix {
	font-size: 13px;
	line-height: 1.5;
}
body.gs-view-list .gb-loop-item .gs-book-prefix {
	font-size: 14px;
}

/* 書誌情報 */
.gs-book-meta {
	margin: 0 0 1.2em;
	font-size: .95rem;
	line-height: 1.8;
}
.gs-book-meta__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .6em;
	padding: .35em 0;
	border-bottom: 1px dotted #e5e5e5;
}
.gs-book-meta__label {
	flex: 0 0 4.5em;
	margin: 0;
	font-weight: 500;
	color: #575760;
}
.gs-book-meta__value {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}
.gs-book-meta__sep {
	padding: 0 .2em;
	color: #b2b2be;
}
/* 電子書籍の印「あり」（G-46）。書誌情報の表の最後の行に出す。
   寸法は新刊などのバッジ（.gs-badge）と同じ高さ24px・文字12px・字の間隔 .15em。
   色 #2E6DA4 は近刊（#1B6EC2）と別の青。白い字とのコントラスト比 5.24（AA）。 */
.gs-ebook-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 .8em;
	font-size: .75rem;
	letter-spacing: .15em;
	line-height: 1;
	vertical-align: middle;
	color: #FAFAFA;
	background: #2E6DA4;
}

/* 購入
   上下マージンは持たせない。要素間の余白は
   Element側のgap（購入と書店リンクを包むコンテナ）で管理する。 */
.gs-book-buy {
	margin: 0;
}
.gs-book-buy__price {
	margin: 0 0 .4em;
	font-size: 1.35rem;
	font-weight: 600;
}
/* ボタン内の文字は折り返さない。改行は span で明示的に行う */
.gs-book-buy__button {
	display: block;
	width: 100%;
	padding: .7em 1em;
	color: #FFFFFF;
	background: #E64A3B;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}
.gs-book-buy__button:hover,
.gs-book-buy__button:focus {
	color: #FFFFFF;
	background: #C43A2B;
}
.gs-book-buy__shop {
	display: block;
	font-size: .8rem;
	line-height: 1.4;
	opacity: .85;
}
.gs-book-buy__action {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}


/* 購入エリアと書店リンク（1200px以下）
   Element bk05buyrow は 767px以下でのみ縦積みになる定義だが、
   1200px以下では横並び50:50が窮屈なため、ここで縦積みに前倒しする。
   　上段＝購入（価格とSTORESボタンを横並び）
   　下段＝オンライン書店リンク
   価格は既定で下マージンを持ち、ボタンは width:100% のため、
   横並びにするにあたって両方を打ち消している。 */
@media (max-width: 1200px) {

	.single-books .gb-element-bk05buyrow {
		flex-direction: column;
		row-gap: 16px;
	}

	.single-books .gb-element-bk06buy,
	.single-books .gb-element-bk07shops {
		width: 100%;
	}

	.single-books .gs-book-buy {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1em;
	}

	.single-books .gs-book-buy__price {
		margin: 0;
	}

	.single-books .gs-book-buy__button {
		width: auto;
	}

}


/* --- オンライン書店リンク --- */

.gs-bookstore-links {
	margin: 1.5em 0;
}
.gs-bookstore-links__title {
	font-size: .9rem;
	font-weight: 500;
	margin: 0 0 .5em;
	color: #575760;
}
.gs-bookstore-links__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em .9em;
	font-size: .9rem;
	line-height: 1.7;
}
/* 書店名は途中で折り返さない。折り返しは項目の区切りでのみ発生させる */
.gs-bookstore-links__item {
	white-space: nowrap;
}
.gs-bookstore-links__item a {
	text-decoration: underline;
}
.gs-bookstore-links__note {
	margin: .6em 0 0;
	font-size: .85rem;
	color: #666;
}


/* --- 関連書籍・関連お知らせ --- */

/* 320px幅では 152px×2列＋gap12.8px＝316.8px となり実効幅に収まらず
   1列に落ちる。2列を確保するため、
   この幅のときだけ列を130pxに細め、横のgapも詰めて2列を確保する。
   ※狭幅時の実効幅は未実測。スマホレイアウト確認時に検証し、
   　余裕があれば152pxに戻す。 */
@media (max-width: 359px) {

	.gs-related-books__list {
		grid-template-columns: repeat(auto-fill, 130px);
		column-gap: 8px;
	}

}


.gs-related-news,
.gs-related-books {
	margin: 2em 0;
}
.gs-related-news__title,
.gs-related-books__title {
	font-size: 1.1rem;
	margin: 0 0 .8em;
	padding-bottom: .3em;
	border-bottom: 1px solid #ddd;
}
.gs-related-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gs-related-news__item {
	padding: .4em 0;
	border-bottom: 1px dotted #e5e5e5;
}
.gs-related-news__item time {
	display: inline-block;
	min-width: 6.5em;
	color: #666;
	font-size: .85rem;
}
.gs-related-books__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* 列幅は固定。1fr にすると画面幅に追従して書影が絶えず伸縮するため、
	   152px 固定にして列数だけが段階的に変わるようにしている。
	   152px は実測980px（ul.gs-related-books__list の幅）に
	   6列＋gap5本(64px)を収める上限値。既定6件と列数が一致する */
	grid-template-columns: repeat(auto-fill, 152px);
	gap: 1.2em .8em;
}
.gs-related-books__item a {
	display: block;
	text-decoration: none;
}
.gs-related-books__thumb {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: .4em;
}
.gs-related-books__name {
	display: block;
	font-size: .85rem;
	line-height: 1.5;
}

/* 副題：翻訳版等の情報が混在しうるため2行でカットする */
.gs-related-books__subtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .2em;
	font-size: .75rem;
	line-height: 1.4;
	color: #575760;
}
.gs-related-books__author {
	display: block;
	margin-top: .3em;
	font-size: .75rem;
	line-height: 1.4;
	color: #575760;
}


/* --------------------------------------------------------------------------
   ⚠️ 以下は G-7（2026/7/27以前）で作成したスマホ指定。
   　 G-8でサイドバーを実装した際、G-6時点のコピーを土台にファイルを
   　 生成したため、この節を一度失った。復旧して末尾に戻したもの。
   　 以後このファイルを再生成するときは、必ずサーバー上の現物を土台にする。
   -------------------------------------------------------------------------- */

/* ===== スマホ（768px以下）のレイアウト =====
   書影：左右パディングなし・中央揃え。カラム幅が480pxを下回ると
   　　　既存の max-width:100% により自動で縮小する（幅による分岐は不要）。
   テキスト：文字が画面端に接して切れて見えるのを避けるため左右20px。
   　　　　　書影と同じカラムにあるバッジは、左端を書名と揃えるため
   　　　　　個別に20pxを与える。
   ※余白は bk03info・bk04body の内側に与えている。親コンテナ
   　（.inside-article 等）に与えると書影も一緒に内側へ入るため。
   　カスタマイザーのコンテンツ余白を将来変更する場合は、
   　この20pxとの二重適用に注意する。 */
@media (max-width: 768px) {

	/* 書影を中央に置く（480pxを超える幅のとき左右が均等に空く） */
	.single-books .wp-block-post-featured-image img {
		margin-inline: auto;
	}

	/* バッジは書影カラム内にあるため個別に余白を与える */
	.single-books .gs-badge {
		margin-left: 20px;
	}

	/* 書名以下・内容紹介以下のテキスト全体 */
	.single-books .gb-element-bk03info,
	.single-books .gb-element-bk04body {
		padding-left: 20px;
		padding-right: 20px;
	}

}


/* ==========================================================================
   書籍アーカイブ 並べ替えセレクトボックス  [book_sort_ui]
   --------------------------------------------------------------------------
   Loop Template（要素119）の Query ブロックの直上に置くショートコード。
   帯はメイン領域いっぱいで、その中でセレクトを右端に寄せる。

   PC（980px）では書影グリッドが 180px×5列＋gap 20px×4＝980px となり
   グリッドの右端とそろう。タブレット（実効549px）ではグリッドが529pxで
   終わるため、セレクトはグリッドより20px外側に来る（許容と判断）。

   スマホは指での操作を前提に高さ48px・全幅。
   WCAG 2.5.5（AAA）は44×44px以上を求めており、各プラットフォームの
   ガイドラインは48pxを推奨しているため、48pxを採る。
   フォント16pxはiOS Safariのフォーカス時自動拡大を避けるため。
   ========================================================================== */

.gs-booksort {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: 24px;
}

.gs-booksort-form {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.gs-booksort-label {
	font-size: 14px;
	color: #232323;
	white-space: nowrap;
}

.gs-booksort-select {
	height: 40px;
	padding: 0 .8rem;
	font-size: 14px;
	color: #232323;
	background-color: #FFFFFF;
	border: 1px solid #ddd;
	border-radius: 2px;
	width: auto;
	max-width: 100%;
}

.gs-booksort-select:hover,
.gs-booksort-select:focus {
	border-color: #2F4858;
	outline: none;
}

/* JS無効時のみ出るボタン */
.gs-booksort-submit {
	height: 40px;
	padding: 0 1rem;
	font-size: 14px;
}

/* ----- 表示形式の切替（タイル／リスト）-----
   アイコンは mask で塗るため色は currentColor に従う。
   図形の実体は images/view-tile.svg・images/view-list.svg。
   文字ラベルを常時出すので、アイコンは装飾（aria-hidden）扱い。 */

.gs-bookview {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	/* 並べ替えとの区切り。線の色はプルダウン・記号の箱の枠線と同じ。 */
	padding-right: 24px;
	border-right: 1px solid #ddd;
}

.gs-bookview-label {
	font-size: 14px;
	color: #232323;
	white-space: nowrap;
}

.gs-bookview-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	white-space: nowrap;
}

/* 箱はプルダウンと同じ書式（白・1px solid #ddd・角丸2px・高さ40px）。
   記号は擬似要素に置く。箱に背景色を持たせるため、mask を箱に掛けられない。 */
.gs-bookview-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	background-color: #FFFFFF;
	border: 1px solid #ddd;
	border-radius: 2px;
}

/* 記号の色で「いま出ている表示形式」を示す。
   現在の表示＝currentColor（リンクでないので本文色 #232323）。 */
.gs-bookview-icon::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
}

/* いま出ていないほうは薄いグレー。文字はリンク色のままにして、
   押せることが色以外（下線・リンク）でも伝わるようにしている。 */
.gs-bookview-item:not(.is-current) .gs-bookview-icon::before {
	background-color: #CCCCCC;
}

/* ホバー・フォーカス時は文字と同じ色にそろえる。
   色を書かず currentColor に戻すことで、文字側の色が何であっても一致する。 */
.gs-bookview-item:not(.is-current):hover .gs-bookview-icon::before,
.gs-bookview-item:not(.is-current):focus .gs-bookview-icon::before {
	background-color: currentColor;
}

.gs-bookview-icon--tile::before {
	-webkit-mask: url(images/view-tile.svg) no-repeat center / contain;
	mask: url(images/view-tile.svg) no-repeat center / contain;
}

.gs-bookview-icon--list::before {
	-webkit-mask: url(images/view-list.svg) no-repeat center / contain;
	mask: url(images/view-list.svg) no-repeat center / contain;
}

/* ----- スマホ（768px以下）----- */
@media (max-width: 768px) {

	/* ラベルとセレクトを1行に並べ、セレクトに残り幅を与える。
	   縦方向の消費を抑えるため（2026/7/27 G-9）。 */
	.gs-booksort-form {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
	}

	.gs-booksort-label {
		font-size: 14px;
	}

	.gs-booksort-select {
		flex: 1;
		min-width: 0;
		height: 48px;
		min-height: 48px;
		font-size: 16px;
	}

	.gs-booksort-submit {
		width: 100%;
		height: 48px;
		margin-top: 8px;
		font-size: 16px;
	}

/* 切替とフォームは縦積みに戻す。
	   横に並べるとセレクトの flex:1 が残り幅を取れなくなるため。

	   左右の8pxはG-31で外した。inside-article が768px以下で左右8pxを
	   持つようになり、ここにも8pxを置くと左右16pxの二重になって
	   使える幅が32px減り、375pxで表示切替が折り返していた。 */
	.gs-booksort {
		display: block;
	}

	/* 縦積みになるので右の区切り線は消す。 */
	.gs-bookview {
		margin-bottom: 8px;
		padding-right: 0;
		border-right: 0;
	}

/* 並べ替えラベルと同じ14pxにする（G-31）。16pxだと1行に収まらず
	   「紹介付きリスト」が2行目に落ちる。ここは指で押す対象ではなく
	   文字なので、タップ領域48pxはアイコンの箱と min-height が持つ。 */
	.gs-bookview-label,
	.gs-bookview-item {
		font-size: 14px;
	}

	/* タップ領域。WCAG 2.5.5 は44px以上、各社推奨は48px。
	   セレクトの48pxにそろえる。 */
	.gs-bookview-item {
		min-height: 48px;
	}

	.gs-bookview-icon {
		width: 48px;
		height: 48px;
	}

.gs-bookview-icon::before {
		width: 24px;
		height: 24px;
	}

}

/* ----- 375px未満：表示切替の行を1行に収める -----
   「表示切替」の文字（56px）と間隔（12px）で68px使う。これを外すと
   必要幅が352px→284pxになり、320px（使える幅304px）でも1行に収まる。
   目で見えなくするだけで、読み上げには残す（音声だけの利用者には
   何の切替かを示す語が要るため）。 */
/* ----- 349px未満：右上にショップとMenuの両方が入らない -----
   必要幅 = アイコン44 + 間隔8 + 三本線91 = 143px。ロゴ右端197pxを
   除いた使える幅が143pxを下回るのは339px以下。その幅ではアイコンを出さず、
   ショップへはパネルの中から入ってもらう。 */
@media (max-width: 339px) {

	.gb-element-hd02inner .gs-header-shop {
		display: none;
	}

}

@media (max-width: 374px) {

	.gs-bookview-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

}


/* ==========================================================================
   書影付きリンクの下線とホバー・フォーカス
   --------------------------------------------------------------------------
   対象は書影とテキストが1つの <a> にまとめられているリンク。
   ・タイル一覧      .gb-loop-item > a        （archive-books の Loop Template）
   ・関連書籍        .gs-related-books__item a（書籍詳細ページ）

   通常時は下線なし。ホバーとフォーカスで下線を出し、文字色を赤にする。
   書名・副題・著者・価格は区別せず、まとめて扱う（2026/7/29 担当者確認）。

   ⚠️ text-decoration は祖先から子孫へ描画されるため、子要素側に none を
   　 書いても消せない（MDN: text-decoration）。<a> 自身で消し、<a> 自身で
   　 付け直すこと。

   ⚠️ 色は <a> に書くだけでは効かない。関連書籍の副題・著者は #575760 を
   　 直接持ち、タイル一覧のテキストは GenerateBlocks が出力するブロックCSSが
   　 色を持つ。どちらも詳細度0,1,0のため、子孫セレクタ（0,2,2）で上書きする。

   セレクタに .gb-loop-item を使うのは、GBの自動生成クラス
   （.gb-element-4cb01573 等）がブロックを作り直すと変わるため。
   .gb-loop-item は WordPress 側の固定クラスで変化しない。
   ========================================================================== */

.gb-loop-item > a {
	text-decoration: none;
}

/* ----- ホバー・フォーカス時の下線 ----- */
.gb-loop-item > a:hover,
.gb-loop-item > a:focus,
.gs-related-books__item a:hover,
.gs-related-books__item a:focus {
	text-decoration: underline;
}

/* ----- ホバー・フォーカス時の文字色 ----- */
/* 子孫まで指定するのは、子要素が自前の color を持っているため。 */
.gb-loop-item > a:hover,
.gb-loop-item > a:focus,
.gb-loop-item > a:hover .gb-text,
.gb-loop-item > a:focus .gb-text,
.gs-related-books__item a:hover,
.gs-related-books__item a:focus,
.gs-related-books__item a:hover span,
.gs-related-books__item a:focus span {
	color: #E64A3B;
}


/* ==========================================================================
   サイトヘッダー（Site Header 要素）
   --------------------------------------------------------------------------
   要素：Site Header - ヘッダー
   構造：hd01outer > hd02inner > [ hd03left ( hd04mark / hd05logo /
         hd06texts ( hd07since / hd08credo ) ) ][ hd09right ( hd10search /
         .gs-header-shop ) ]

   セレクタは意図的に2階層で書いている。GenerateBlocksが出力する
   .gb-element-xxxx は詳細度0,1,0で、読み込み順が保証されないため、
   親を1つ足して0,2,0にして確実に上書きする。
   ========================================================================== */

/* ----- ロゴ（[gs_logo]）----- */
/* SVGを型紙（マスク）として使い、色は currentColor で塗る。
   prefers-color-scheme はOS／ブラウザの設定を見るだけで、ページが実際に
   暗く表示されているかは見ない。Dark Reader のような拡張機能はページの色を
   後から書き換えるため、メディアクエリ方式ではロゴだけ取り残される。
   文字色に追従させれば、拡張機能でもダークモードCSSでも同じ仕組みで切り替わる。

   ⚠️ url() は style.css からの相対パス。子テーマ直下の images/ に置くこと。
   ⚠️ 大きさは比率 373.67 : 128.226 を保つこと（163:56 / 117:40）。 */
.gs-logo {
	display: block;
	flex-shrink: 0;
	width: 163px;
	height: 56px;
	color: #000000;             /* 既定の色。周囲の文字色を継がせたい場合はこの行を消す */
	background-color: currentColor;
	-webkit-mask: url(images/logo.svg) no-repeat center / contain;
	mask: url(images/logo.svg) no-repeat center / contain;
}

/* ----- 折り返しの許可（理念テキストが1文字幅に潰れるのを防ぐ）----- */
.gb-element-hd01outer .gb-element-hd02inner {
	flex-wrap: wrap;
	row-gap: 16px;
}

/* 固定の下限値をやめ、文字の実幅（約180px）を保たせる。
   240px固定だと使われない余白が約60px残り続けていた（G-9で修正）。 */
.gb-element-hd03left .gb-element-hd06texts {
	min-width: auto;
	flex-shrink: 0;
}

/* ----- 検索ボックス ----- */
/* コアの button-inside は :where() で書かれており詳細度0のため、
   テーマ側のinput指定が勝って枠が二重に見える。ここで打ち消す。 */
.gb-element-hd10search .wp-block-search__inside-wrapper {
	border: 1px solid #ddd;
	padding: 3px;
	background-color: #FFFFFF;
}

.gb-element-hd10search .wp-block-search__input {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	height: 32px;
	padding: 0 8px;
	font-size: 14px;
	color: #232323;
	background-color: transparent;
}

.gb-element-hd10search .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

/* 「検索」が「検／索」に折り返すのを止める */
.gb-element-hd10search .wp-block-search__button {
	margin-left: 0;
	height: 32px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	color: #FFFFFF;
	background-color: #232323;
}

.gb-element-hd10search .wp-block-search__button:hover,
.gb-element-hd10search .wp-block-search__button:focus {
	color: #FFFFFF;
	background-color: #2F4858;
}

/* ----- ショップボタン（書籍詳細ページと同じクラスを流用）----- */
.gs-header-shop .gs-book-buy__button {
	width: auto;
	padding: .5em 1.2em;
}

.gs-header-shop .gs-book-buy__shop {
	font-size: 1rem;
	opacity: 1;
}

/* ----- スマホ（768px以下）----- */
/* ヘッダー全体を縦積みにする。検索とショップは全幅・高さ48px。 */
@media (max-width: 768px) {

	/* align-items は stretch にしない。stretch だと、はみ出したロゴ行の幅に
	   検索・STORES まで引き伸ばされ、画面幅より広くなって右端が切れる。
	   flex-start にしてロゴ行と切り離し、右側は下の width:100% で
	   画面幅に追従させる。
	   overflow-x はロゴ行のはみ出しをここで止めるため。無いとページ全体が
	   横に広がり、320pxでは64pxの横スクロールが出る。 */
	.gb-element-hd01outer .gb-element-hd02inner {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 16px;
		padding-left: 8px;
		padding-right: 8px;
	}

	/* 上下の8px。GB側は全幅16pxのまま（PCは変えない）。
	   クラスを二重に書いて0,2,0にし、GB出力に確実に勝たせる。 */
	.gb-element-hd01outer.gb-element-hd01outer {
		padding-top: 8px;
		padding-bottom: 8px;
	}

/* 2列3行の格子（G-30）。
	     1列目 40px（マーク） ／ 2列目 残り全部
	     1行目 ロゴ ／ 2行目 since 1967 ／ 3行目 理念（全幅）
	   マークは1〜2行目にまたがり、上寄せ（ロゴと上端がそろう）。
	   自動配置に頼らず、4つとも行と列を明示している。
	   container-type は理念の clamp(3.2cqi) の基準枠。
	   1cqi = (画面幅 − 左右8px×2) ÷ 100。 */
	.gb-element-hd02inner .gb-element-hd03left {
		display: grid;
		grid-template-columns: 64px 1fr;
		column-gap: 8px;
		row-gap: 4px;
		width: 100%;
		container-type: inline-size;
	}

/* マーク：1列目・1〜2行目にまたがる。上寄せ。
	   768px以下の40px縮小はG-30で廃止（理念がロゴ行から降りたため）。
	   GB側の64pxをそのまま使う。320pxでもマークに使える幅は179pxある。 */
	.gb-element-hd03left .gb-element-hd04mark {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: start;
	}

	/* ロゴ：2列目・1行目。 */
	.gb-element-hd03left .gs-logo {
		width: 117px;
		height: 40px;
		grid-column: 2;
		grid-row: 1;
	}

	/* hd06texts の箱を消し、since 1967 と理念を格子の直接の要素へ昇格させる。
	   ⚠️ hd06texts に背景色・枠線・padding を付けると、この幅でだけ無言で消える
	      （ボックスが生成されないため）。 */
	.gb-element-hd03left .gb-element-hd06texts {
		display: contents;
	}

/* since 1967：2列目・2行目。ロゴと同じ117pxの幅を与え、
	   その中で中央に置く。ロゴの真下の中央に来る。
	   列そのものは 1fr のまま（理念が2列にまたがるため、
	   列幅を auto にすると理念の幅に引きずられる）。 */
	.gb-element-hd06texts .gb-text-hd07since {
		grid-column: 2;
		grid-row: 2;
		width: 117px;
		text-align: center;
	}

	/* 理念：1〜2列をまたぐ全幅・3行目。 */
	.gb-element-hd06texts .gb-text-hd08credo {
		grid-column: 1 / -1;
		grid-row: 3;
	}
	
	/* PCの <br> を消して1行にする。文言は全角30文字。
	   3.2cqi は枠幅の3.2%。30文字で枠の96%を使う。
	   基準枠は hd03left（container-type: inline-size）＝画面幅 − 左右8px×2。
	   422px以上は上限13px（PCと同じ）、282px未満は下限9pxとなり2行に落ちる。 */
	.gb-element-hd06texts .gb-text-hd08credo br {
		display: none;
	}

	.gb-element-hd06texts .gb-text-hd08credo {
		font-size: clamp(9px, 3.2cqi, 13px);
	}

	/* width:100% は hd02inner の align-items: flex-start と対になる指定。
	   flex-start にしたことで自動では伸びなくなるため、ここで親の幅
	   （画面幅 - 左右padding 32px）に合わせる。 */
	.gb-element-hd02inner .gb-element-hd09right {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		row-gap: 12px;
	}

/* 検索はパネルへ移したので隠す。ショップはアイコンにして右上へ置く（G-31）。
	   hd09right は display: contents で箱の生成を取り消し、.gs-header-shop を
	   body 基準で絶対配置する（body の position: relative はこの枠の先頭で指定済み）。
	   GBのインラインCSSは子テーマより後に読み込まれ 0,1,0 で入るため、
	   hd02inner を前に付けて 0,2,0 で上回る。 */
	.gb-element-hd02inner .gb-element-hd09right {
		display: contents;
	}

	.gb-element-hd02inner .gb-element-hd10search {
		display: none;
	}

/* right 99px = 三本線91px + 三本線との間隔8px（右余白は0）。
	   top 6px = (三本線56px - ショップ44px) / 2。上下の中心をそろえる。 */
	.gb-element-hd02inner .gs-header-shop {
		position: absolute;
		top: 6px;
		right: 99px;
	}

	.gb-element-hd02inner .gs-header-shop .gs-book-buy__button {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: #E64A3B;
	}

	.gb-element-hd02inner .gs-header-shop .gs-book-buy__button:hover,
	.gb-element-hd02inner .gs-header-shop .gs-book-buy__button:focus {
		background: #C43A2B;
	}

	/* 図柄は mask で塗る。ロゴ・表示形式アイコンと同じ方式。 */
	.gb-element-hd02inner .gs-header-shop .gs-book-buy__button::before {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		background-color: #FFFFFF;
		-webkit-mask: url(images/icon-cart.svg) no-repeat center / contain;
		mask: url(images/icon-cart.svg) no-repeat center / contain;
	}

	/* 文言は読み上げに残し、目には見えなくする。 */
	.gb-element-hd02inner .gs-header-shop .gs-book-buy__shop,
	.gb-element-hd02inner .gs-header-shop .gs-book-buy__action {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
white-space: nowrap;
	}

	/* 本文の左右余白をヘッダーと同じ8pxにし、上の空きも詰める（G-31）。
	   GPカスタマイザーが768px以下で .separate-containers .inside-article に
	   padding: 30px を出している（詳細度0,2,0）。子テーマは後に読み込まれるので
	   同じ詳細度で上書きできる。 */
	.separate-containers .inside-article {
		padding: 8px 8px 24px;
	}

	/* 書籍詳細だけは据え置き（G-32・質問者判断）。
	   bk03info・bk04body に内側20pxがあり（564-583行）、上の8pxを当てると
	   テキストが50px→28pxに動く。今回は見え方を変えないためGP既定の30pxへ戻す。
	   ⚠️ この規則は暫定。テキストを8pxに揃えると決めた時点で20pxごと外す。
	   詳細度は 0,2,1（body要素＋2クラス）で上の 0,2,0 を上回る。 */
	body.single-books .inside-article {
		padding: 30px;
	}

	/* 本文の箱の外側にGP本体が20pxの空きを作っている（検証ツールの実測：
	   content-area 2202.53 − inside-article 2182.53）。margin か padding かは
	   GPのCSSが読めないため未確定なので、両方を0にする。 */
	.separate-containers .site-main {
		margin: 0;
		padding: 0;
	}

	/* 全幅ブロックの食い出し量も30pxから8pxにそろえる。そろえないと
	   左右に22pxずつはみ出す。 */
	.entry-content .alignwide,
	body:not(.no-sidebar) .entry-content .alignfull {
		margin-left: -8px;
		width: calc(100% + 16px);
		max-width: calc(100% + 16px);
	}

}


/* ----- 中間幅（769〜969px）----- */
/* PCの形（画像1）が1行に収まる下限はレイアウト幅953px。952pxで右側が2行目へ落ちる
   （実測）。縦スクロールバー16pxを足すと画面幅969pxで、この帯の上端と一致する。

   この帯では hd02inner を格子に組み替え、理念だけを最下段の全幅行へ出す。
   検索とSTORESは大きさも右端の位置も変えず、上段の右に残す。
   上段に要る幅は 64+16+163+16+450.39+32 = 741.4px。帯の下端（画面幅769px
   ＝レイアウト幅753px）でも11.6px余り、横あふれは出ない（実測）。

   理念を左の塊（hd03left）の中の3行目に置くと、理念の382pxが左の幅を決めてしまい、
   レイアウト幅881pxで右側ごと下段へ落ちる。全幅行へ出すとこれが起きない（実測）。

   ⚠️ hd03left・hd06texts・hd09right に背景色・枠線・padding を付けると、
      この帯でだけ無言で消える（display: contents でボックスが生成されないため）。
   ⚠️ セレクタは2階層（0,2,0）。GBのインラインCSSは子テーマより後に読み込まれ
      0,1,0で入るため、1階層では負ける。 */
@media (min-width: 769px) and (max-width: 969px) {

	/* 1列目64px（マーク）／2列目 ロゴ幅／3列目 残り全部（検索・STORES）
	   1行目 ロゴ／2行目 since 1967／3行目 理念（全幅） */
	.gb-element-hd01outer .gb-element-hd02inner {
		display: grid;
		grid-template-columns: 64px auto 1fr;
		column-gap: 16px;
		row-gap: 4px;
		align-items: start;
	}

	/* 中身を格子の直接の要素へ昇格させる */
	.gb-element-hd02inner .gb-element-hd03left,
	.gb-element-hd03left .gb-element-hd06texts {
		display: contents;
	}

	/* マーク：1列目・1〜2行目にまたがる */
	.gb-element-hd03left .gb-element-hd04mark {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: start;
	}

	/* ロゴ：2列目・1行目 */
	.gb-element-hd03left .gs-logo {
		grid-column: 2;
		grid-row: 1;
	}

	/* since 1967：2列目・2行目。ロゴ幅163pxの中で中央に置く */
	.gb-element-hd06texts .gb-text-hd07since {
		grid-column: 2;
		grid-row: 2;
		width: 163px;
		text-align: center;
	}

	/* 理念：最下段の全幅。左端はマークの左端にそろう */
	.gb-element-hd06texts .gb-text-hd08credo {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/* PCの <br> を消して1行にする */
	.gb-element-hd06texts .gb-text-hd08credo br {
		display: none;
	}

	/* 検索とSTORES：3列目・上段の右端。大きさは970px以上と同じ */
	.gb-element-hd02inner .gb-element-hd09right {
		grid-column: 3;
		grid-row: 1 / 3;
		justify-self: end;
		align-self: start;
	}

}


/* ==========================================================================
   サイトフッター（Site Footer 要素）
   --------------------------------------------------------------------------
   構成：4カラム（書籍を探す／お知らせ／ご利用方法／会社情報）＋ 下段
   下段：住所・TEL・FAX ＋ コピーライト
   背景 #1C1C1C（MDセクション12）／見出し #FFFFFF（確定）

   リンク先が未作成のページは、いまはテキストのみ（A案）。
   ページができ次第 <span> を <a> に変えるだけでよい。

   アイコンはロゴと同じマスク方式。background-color: currentColor なので
   周囲の文字色に追従する（Dark Reader でも崩れない）。
   ========================================================================== */

.gs-footer {
	background-color: #1C1C1C;
	padding: 48px 0 24px;
	color: #DDDDDD;
	font-size: 14px;
	line-height: 1.8;
}

.gs-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.gs-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.gs-footer__head {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #333333;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
}

.gs-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-footer__list li {
	margin: 0 0 6px;
}

.gs-footer a {
	color: #DDDDDD;
	text-decoration: none;
}

.gs-footer a:hover,
.gs-footer a:focus {
	color: #FFFFFF;
	text-decoration: underline;
}

/* ----- SNS（アイコン＋テキスト）----- */
.gs-footer__sns {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gs-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
}

.gs-icon--note {
	-webkit-mask: url(images/note-icon.svg) no-repeat center / contain;
	mask: url(images/note-icon.svg) no-repeat center / contain;
}

.gs-icon--x {
	-webkit-mask: url(images/x-icon.svg) no-repeat center / contain;
	mask: url(images/x-icon.svg) no-repeat center / contain;
}

/* ----- 下段 ----- */
/* 住所・TEL・FAX・社名は中央揃えで縦に積む。社名を最下段に置く。 */
.gs-footer__bottom {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #333333;
	font-size: 14px;   /* 4カラムのリンクと同じ大きさに揃える */
	color: #AAAAAA;
	text-align: center;
}

.gs-footer__address {
	margin: 0;
	font-style: normal;
}

.gs-footer__copy {
	margin: 8px 0 0;
}

/* ----- タブレット（900px以下）----- */
/* 4カラムを維持できる下限は、最も長い項目「特定商取引法に基づく表記」
   （14px×12文字＝約168px）が収まる幅。900pxで1カラム約193pxとなる。 */
@media (max-width: 900px) {

	.gs-footer__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 32px;
	}

}

/* ----- スマホ（768px以下）----- */
@media (max-width: 768px) {

	.gs-footer {
		padding: 32px 0 20px;
	}

	.gs-footer__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 16px;
	}

	/* 指での操作を前提にタップ領域を確保する。
	   14px × 行間1.8 = 25.2px に上下padding 10px を足して 45.2px。
	   WCAG 2.5.5（AAA）の44×44pxを満たす。
	   ブロック要素にすることで、横方向もカラム幅いっぱいが当たり判定になる
	   （インラインのままだと「note」は約40pxしか押せない）。
	   長い項目名は2行に折り返し、その分さらに高くなる。 */
	.gs-footer__list li {
		margin: 0;
		border-bottom: 1px solid #2A2A2A;
	}

	.gs-footer__list li > a,
	.gs-footer__list li > span {
		display: block;
		padding: 10px 0;
		min-height: 44px;
	}

	.gs-footer__sns {
		display: flex;
	}

	/* 下段の電話番号も同じ基準にする */
	.gs-footer__address a {
		display: inline-block;
		padding: 10px 8px;
		min-height: 44px;
	}

	.gs-footer__bottom {
		margin-top: 28px;
		padding-top: 20px;
	}

}

/* ============================================================
   トップページ：お知らせ／対談1／対談2 の3系統
   2026/8/4 G-14 追加。
   本文領域は980px（実測）。列の内訳は下記のとおり。
     1025px以上 …… 3列（1列 313px）
      769〜1024px … 対談2列＋お知らせ全幅（1列 250〜392px）
      768px以下 …… 縦積み（サイドバーが消える境界と揃えている）
   HTMLの並び順は 対談1 → 対談2 → お知らせ。情報階層（第2階層＝対談、
   第3階層＝お知らせ）に合わせてあり、縦積み時もこの順で出る。
   ============================================================ */
.gs-streams {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 24px;
	margin: 0 0 56px;
}
@media (min-width: 769px) {
	.gs-streams {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gs-stream--news {
		grid-column: 1 / -1;
	}
}
@media (min-width: 1025px) {
	.gs-streams {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.gs-stream--news {
		grid-column: auto;
	}
}
.gs-stream__heading {
	margin: 0 0 16px;
	padding: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	border-bottom: 1px solid #bbb;
}
.gs-stream__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gs-stream__item + .gs-stream__item {
	margin-top: 20px;
}
.gs-stream__link {
	display: block;
	color: #232323;
	text-decoration: none;
}
.gs-stream__link:hover,
.gs-stream__link:focus {
	color: #E64A3B;
	text-decoration: underline;
}
.gs-stream__link:hover .gs-stream__date,
.gs-stream__link:focus .gs-stream__date {
	color: #E64A3B;
}
.gs-stream__date {
	display: block;
	font-size: .8125rem;
	line-height: 1.5;
	color: #575760;
}
/* ラベルとタイトルは同じ行に置く。タイトルは inline のままにして、
   折り返した2行目が左端から始まるようにする（ラベルの下に潜り込む形）。 */
.gs-stream__body {
	display: block;
	margin-top: 6px;
	font-size: .875rem;
	line-height: 1.6;
}
.gs-stream__body .gs-label {
	margin-right: 8px;
}
.gs-stream__title {
	display: inline;
}

/* 列の幅で行の組み方を切り替える（画面幅ではなく列幅で見る）。
   狭い … 日付 ／ 改行 ／ ラベル タイトル
   広い … 日付 ラベル タイトル を1行
   境界480pxの根拠：日付65 ＋ 間隔8 ＋ ラベル75 ＋ 間隔8 ＝ 156px を引いた
   残り324pxが14pxの和文で約27文字。お知らせのタイトルは実測20〜28文字。
   @container は2023年2月から全ブラウザで利用可能（MDN）。対応しない環境は
   ブロックごと読み飛ばすため、常に「狭い」側の2行になる。崩れない。
   ⚠️ container-type をフレックスアイテムに直接付けると幅が0に潰れる既知の症状が
   ある。ここはグリッドの子で列幅が外から与えられるため該当しない。 */
.gs-stream {
	container-type: inline-size;
}
@container (min-width: 480px) {
	.gs-stream__date {
		display: inline;
		margin-right: 8px;
	}
	.gs-stream__body {
		display: inline;
		margin-top: 0;
	}
}
.gs-stream__more {
	margin: 20px 0 0;
	font-size: .8125rem;
}
.gs-stream__empty {
	margin: 0;
	font-size: .875rem;
	color: #575760;
}

/* --------------------------------------------------------------------------
   WEB対談・web掲示板談話の一覧（2026/8/25 G-38）

   1行に出す項目は4つ。日付・第何回・件名・投稿者。
   第何回と投稿者は ACF の article_kai / article_writer から出す。
   欄が空の記事（お知らせなど）には .gs-stream__link--talk が付かないため、
   ここの指定は一切当たらない。既存のお知らせ一覧は変わらない。

   枠幅480px未満（トップページの1列313pxはここ）
     1行目 … 日付　第何回　投稿者
     2行目 … 件名
     313pxに収まることの確認：日付65 ＋ 間隔8 ＋ 第何回70（第九十九回＝5字）
     ＋ 間隔8 ＋ 投稿者140（現代書館　菊地泰博＝10字・最長）＝ 291px。
     通常の「斎藤美奈子」なら 221px。

   枠幅480px以上
     日付　第何回　件名　投稿者 を1行。DOMの並びは
     日付→第何回→投稿者→件名 なので、投稿者だけ order:1 で末尾へ送る。
   -------------------------------------------------------------------------- */
.gs-stream__link--talk .gs-stream__date,
.gs-stream__kai,
.gs-stream__writer {
	display: inline;
	margin-right: 8px;
	font-size: .8125rem;
	line-height: 1.5;
	color: #575760;
}
/* 投稿者は題と同じ色・太字にして、ラベルの箱と釣り合わせる（G-44・案2）。
   14px は規格表 19-G35-1「補足・ラベル」の大きさ。768px以下の .875rem と同値。 */
.gs-stream__writer {
	margin-right: 0;
	font-size: 14px;
	font-weight: 600;
	color: #232323;
}
.gs-stream__link:hover .gs-stream__kai,
.gs-stream__link:focus .gs-stream__kai,
.gs-stream__link:hover .gs-stream__writer,
.gs-stream__link:focus .gs-stream__writer {
	color: #E64A3B;
}
@container (min-width: 480px) {
	.gs-stream__link--talk {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
	}
	.gs-stream__link--talk .gs-stream__date,
	.gs-stream__link--talk .gs-stream__kai,
	.gs-stream__link--talk .gs-stream__writer {
		margin-right: 0;
	}
	.gs-stream__link--talk .gs-stream__writer {
		order: 1;
	}
	.gs-stream__link--talk .gs-stream__body {
		margin-top: 0;
	}
}

/* 768px以下は枠幅にかかわらず常に2段にする（G-38）。
   画面幅768pxでの枠幅は約752px。4項目を1行に置くと
   日付65 ＋ 8 ＋ 第何回70 ＋ 8 ＋ 件名592（最長37字・16px）＋ 8 ＋ 投稿者140
   ＝ 891px となり収まらない。収まらない件名だけが折り返すと
   flex-wrap により投稿者だけが2行目に落ち、行の形が記事ごとに変わる。
   常に同じ形にするため、ここで @container の1行組みを打ち消す。 */
@media (max-width: 768px) {
	.gs-stream__link--talk {
		display: block;
	}
	.gs-stream__link--talk .gs-stream__date,
	.gs-stream__link--talk .gs-stream__kai,
	.gs-stream__link--talk .gs-stream__writer {
		display: inline;
		margin-right: 8px;
	}
	.gs-stream__link--talk .gs-stream__writer {
		margin-right: 0;
	}
	.gs-stream__link--talk .gs-stream__body {
		display: block;
		margin-top: 6px;
	}
}

/* 連載トップ（固定ページ2枚）だけの見え方。name="serial" を渡したときに付く。
   行の組み方は /guide/ の一覧（2714-2726行）と同値にそろえる。
   上下12px・行の高さ1.5・区切りは box-shadow の inset。
   border ではなく box-shadow を使うのは、border が行の寸法を増やすため
   （19-G35-1 の色の規格）。

   文字は連載トップだけ規格値まで上げる。件名16px（規格の本文）・
   日付／第何回／執筆者14px（規格の補足）。
   トップページの3枠（G-14・G-15で確定）には当てない。 */
/* 一覧の下の空き。幅で分けずに20px。

   規則：h2の上マージンは0。前の空きは直前の要素が作る（2992行以降）。
   48px は .gs-route（/order/ の注文経路の見出し）だけが持つ値で、
   素のh2は上マージンを持たない。ここで足さないと詰まる。

   20px の根拠は連載トップ自身の寸法。
   　一覧の行と行の間 ＝ 12＋12＋罫線1 ＝ 25px
   　最終行の文字から見出しまで ＝ 12（行の下padding）＋20 ＝ 32px
   「塊の切れ目は、塊の中身の行間より広くする」を満たす。
   48px にすると60pxとなり、中身の行間の2.4倍で見出しが浮く。 */
.gs-stream--serial {
	margin: 0 0 20px;
}
.gs-stream--serial .gs-stream__item {
	padding: 12px 0;
	line-height: 1.5;
	box-shadow: inset 0 -1px 0 #DDDDDD;
}
.gs-stream--serial .gs-stream__item:first-child {
	padding-top: 0;
}
.gs-stream--serial .gs-stream__item + .gs-stream__item {
	margin-top: 0;
}
.gs-stream--serial .gs-stream__body {
	font-size: 1rem;
}
.gs-stream--serial .gs-stream__date,
.gs-stream--serial .gs-stream__kai,
.gs-stream--serial .gs-stream__writer {
	font-size: .875rem;
}

/* お知らせ一覧（固定ページ /oshirase/）のお知らせの行だけ、行の高さを2にする（G-46）。
   折り返した2行目を読みやすくするため（質問者判断）。余白12pxは変えない。
   規格 19-G35-1 で /guide/ の一覧とそろえた行の高さ（1.5〜1.6）からは外れる。
   対談の行には .gs-stream__link--talk が付くので :not() で外し、連載トップ2ページは変えない。
   行の中：約16px／記事と記事の間：12＋1＋12＋16＝約41px（約2.6倍）。 */
.gs-stream--serial .gs-stream__link:not(.gs-stream__link--talk) .gs-stream__body {
	line-height: 2;
}

/* 記事ページの日付の行（G-38）。
   GeneratePressが出す <div class="entry-meta"> をそのまま使う。
   日付には触らず、右端にこちらの項目（.gs-meta-side）を1つ足しているだけ。

   値はすべて 19-G35-1 の規格表から取る。新しい値は作らない。
     日付     14px / 400 / #666666 / 行間1.7  … 規格「補足・ラベル」
     執筆者   明朝22px / 600 / 行間1.8        … 大きさは規格「H3」、太さは見出しに揃える
     H1の下   16px                            … 規格「H1の下 → 本文」
     行の下   20px                            … 規格「塊の下」

   いままで .entry-meta への指定が1件も無く、GPの既定が出たままだった。
   ここで初めて規格を当てる。 */
.single-post .entry-header .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 16px;
	margin: 16px 0 20px;
	font-family: var(--gp-font--noto-sans-jp), "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	color: #666666;
}
.single-post .entry-header .entry-meta .posted-on {
	margin: 0;
}
.gs-meta-side--writer {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.8;
	color: #232323;
}
.gs-meta-side--label {
	align-self: center;
}

/* 記事ページの下部（G-38）。
   GPの categories と post-navigation を外し、ここに一本化している。

   左が前・右が次。並びは flex の space-between で、片方が無いときも
   空の枠を残すので、残った側は左右の位置を保つ。
   その下に中央ぞろえで連載トップ（対談）またはお知らせ一覧へのリンク。

   値は 19-G35-1 の規格表から。
     第何回・前後の語  14px / #666666 / 行間1.7   … 「補足・ラベル」
     記事タイトル      16px / 行間1.5 / #2F4858   … 「本文」「リンク」
     区切り            box-shadow: inset 0 1px 0 #DDDDDD
     上の空き          20px                        … 「塊の下」 */
.gs-postnav {
	margin: 24px 0 0;
	padding: 20px 0 0;
	box-shadow: inset 0 1px 0 #DDDDDD;
}
.gs-postnav__links {
	display: flex;
	gap: 24px;
}
.gs-postnav__slot {
	flex: 1;
	min-width: 0;
}
.gs-postnav__slot--next {
	text-align: right;
}
.gs-postnav__link {
	display: block;
	text-decoration: none;
}
.gs-postnav {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
}
.gs-postnav__kai {
	display: block;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}
.gs-postnav__title {
	display: block;
	font-size: 16px;
	line-height: 1.5;
	color: #2F4858;
}
.gs-postnav__link:hover .gs-postnav__title,
.gs-postnav__link:focus .gs-postnav__title {
	text-decoration: underline;
}
.gs-postnav__index {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}
.gs-postnav__index a {
	color: #2F4858;
	text-decoration: none;
}
.gs-postnav__index a:hover,
.gs-postnav__index a:focus {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.gs-postnav__links {
		display: block;
	}
	.gs-postnav__slot--next {
		margin-top: 20px;
		text-align: left;
	}
	.gs-postnav__slot:empty {
		display: none;
	}
}

/* ページ送り。見た目は表示切替（.gs-booksort）と同型にする。
   非選択は黒、現在地とホバーはアクセントレッド、地は白のまま。 */
.gs-stream__pager {
	margin-top: 24px;
	font-size: .875rem;
}
.gs-stream__pager .page-numbers {
	display: inline-block;
	min-width: 32px;
	padding: 4px 6px;
	color: #232323;
	text-align: center;
	text-decoration: none;
}
.gs-stream__pager .page-numbers.current {
	color: #E64A3B;
	font-weight: 600;
}
.gs-stream__pager a.page-numbers:hover,
.gs-stream__pager a.page-numbers:focus {
	color: #E64A3B;
	text-decoration: underline;
}

/* ============================================================
   横スライダー（noteマガジン／将来の新刊一覧と共用）
   2026/8/4 G-14 追加。
   カード幅は --gs-slider-card で外から差し替える。既定240px。
   240px＋gap16pxで本文980px内に3.8枚が見える。端に0.8枚覗くことで
   続きがあることを示す。
   左右ボタンはJS（js/gs-slider.js）が生成する。W3C WAI のカルーセル
   チュートリアルが「ボタンはJavaScriptで作れ（JSが無ければどのみち
   動かないため）」としているのに従う。自動回転はしないので一時停止
   ボタンは不要（WCAG 2.2.2 の対象外）。
   ============================================================ */
.gs-slider {
	margin: 0 0 56px;
}
.gs-slider__heading {
	margin: 0 0 16px;
	padding: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	border-bottom: 1px solid #bbb;
}
.gs-slider__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.gs-slider__track {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0 0 12px;
}
.gs-slider__item {
	flex: 0 0 var(--gs-slider-card, 240px);
	scroll-snap-align: start;
}
.gs-slider__link {
	display: block;
	color: #232323;
	text-decoration: none;
}
.gs-slider__link:hover,
.gs-slider__link:focus {
	color: #E64A3B;
	text-decoration: underline;
}
.gs-slider__cover {
	display: block;
	width: 100%;
	height: auto;
}
/* 枠の比はnoteの画像（見出し画像・1280×670）専用。書影に当ててはならない。
   共通側に置くと書籍の書影にも当たり、打ち消しが必要になる。その打ち消しが
   img の width/height 属性から得られる比まで捨て、高さが
   contain-intrinsic-size の1500pxになる（G-31で発生）。
   G-46：16:9 だと note の画像の左右が切れていたため、note の画像と同じ比にした。 */
.gs-slider--note .gs-slider__cover {
	aspect-ratio: 1280 / 670;
	object-fit: cover;
	background: #F5F5F5;
}
.gs-slider__name {
	display: block;
	margin-top: 8px;
	font-size: .875rem;
	line-height: 1.5;
}
.gs-slider__count {
	display: block;
	margin-top: 4px;
	font-size: .75rem;
	color: #575760;
}

/* ----- 新刊スライダー（[gs_books_slider]）----- */
/* 書影には比を指定しない。img の width/height 属性からブラウザが得る比を
   そのまま使う（タイル一覧・関連書籍と同じ扱い）。

   ⚠️ 書影の高さが揃わないので、カードごとに書名の縦位置がずれる。
      下端を揃える方法は subgrid（セクション24-20）で断念済み。
   ⚠️ カード幅はショートコードの card 属性が --gs-slider-card に入る。
      既定280px（関連書籍の書影152pxの約1.84倍）。 */
.gs-slider--books .gs-slider__subtitle,
.gs-slider--books .gs-slider__author {
	display: block;
	margin-top: 4px;
	font-size: .8125rem;
	line-height: 1.5;
	color: #575760;
}
/* 副題と著者に色を直接当てているため、リンクのホバー色（#E64A3B）が
   子まで届かない。ホバー時だけ親の色を継がせて書名とそろえる。
   2026/8/5 G-15 */
.gs-slider--books .gs-slider__link:hover .gs-slider__subtitle,
.gs-slider--books .gs-slider__link:hover .gs-slider__author,
.gs-slider--books .gs-slider__link:focus .gs-slider__subtitle,
.gs-slider--books .gs-slider__link:focus .gs-slider__author {
	color: inherit;
}
/* 見出しの行に、右寄せでリンクを並べる（2026/8/5 G-15）。
   下線は h2 から bar へ移す。h2 に持たせたままだと文字幅ぶんしか
   引かれない。リンクを h2 の外に出しているのは、中に入れると
   aria-labelledby で参照される領域の名前にリンクの文言まで
   含まれてしまうため。

   折り返しの指定は入れていない（様子を見て決める・質問者判断）。 */
.gs-slider__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
	padding: 0 0 8px;
	border-bottom: 1px solid #bbb;
}
.gs-slider__bar .gs-slider__heading {
	margin: 0;
	padding: 0;
	border-bottom: none;
}
.gs-slider__bar-link {
	flex: 0 0 auto;
	font-size: .8125rem;
}
/* 見出しの行（.gs-slider__bar）の中で、見出しと「一覧はこちら ⇒」の
   中間に置く。bar は justify-content: space-between なので、
   3つ目の要素を挟むだけで中間に来る（G-32）。
   bar は align-items: baseline のため、そのままだとボタンの文字の
   ベースラインで並ぶ。align-self: center で行の中央にそろえる。 */
.gs-slider__nav {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
	align-self: center;
}
/* 769px以上は25px。見出し「新刊案内」の高さ25.5pxより小さいので、
   バーの高さが34.5pxのまま変わらず、下の罫線が左サイドバーの
   「現代書館の本一覧」の罫線とそろう（実測：44pxだとバーが53pxになり
   罫線が18.5px下がる）。サイドバーが消える768px以下では44pxに戻す。 */
.gs-slider__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 25px;
	height: 25px;
	padding: 0;
	font-size: .875rem;
	line-height: 1;
	color: #232323;
	background: #FFFFFF;
	border: 1px solid #bbb;
	cursor: pointer;
}
/* ホバーは表示切替（.gs-bookview）と同じ扱いにする。記号だけを
   リンクのホバー色に変え、白い面と枠線 #bbb はそのまま。
   ⚠️ GPカスタマイザーのボタン背景ホバー #C43A2B が button:hover（0,1,1）で
      降ってきて .gs-slider__btn（0,1,0）の白に勝つ。0,2,1に上げて白を明示する。
      #C43A2B はショップ・STORESでは据え置き（G-32・質問者判断）。 */
.gs-slider__bar .gs-slider__btn:hover,
.gs-slider__bar .gs-slider__btn:focus {
	color: #E64A3B;
	background: #FFFFFF;
	border-color: #bbb;
}
.gs-slider__btn[disabled] {
	opacity: .35;
	cursor: default;
	color: #232323;
	border-color: #bbb;
}
/* 768px以下＝左サイドバーが消える幅（S20・MD282行）。指で押すため44pxに戻す
   （WCAG 2.5.5 Target Size (Enhanced) の44×44）。 */
@media (max-width: 768px) {
	.gs-slider__btn {
		width: 44px;
		height: 44px;
		font-size: 1rem;
	}
}
/* 44pxのボタン3つは画面幅404px未満で入らない（実測）。403px以下は
   「■」だけ残す。WCAG 2.2.2 が求めるのは停止の手段1つで、前へ／次へは
   要求されていない。前後の移動はスワイプ・矢印キー・スクロールバーで行える。 */
/* 403pxはnewスライダー（books）だけの下限。noteは見出しが長く
   438pxまで必要（実測：404〜437pxで2段に折り返す）。共通CSSのため
   高い方の437pxに合わせる。書籍側は余裕が広がるだけで実害はない。 */
@media (max-width: 437px) {
	.gs-slider__btn--prev,
	.gs-slider__btn--next {
		display: none;
	}
}

/* スマホの文字サイズ（2026/8/4 G-14）
   ヘッダー検索と並べ替えUIが768px以下で14px→16pxになっているのに合わせ、
   一覧のタイトルも16pxにする。ラベルは幅75pxの前提が崩れるため据え置き。 */
@media (max-width: 768px) {
	.gs-stream__heading,
	.gs-slider__heading {
		font-size: 1.125rem;
	}
	.gs-stream__date,
	.gs-stream__kai,
	.gs-stream__writer {
		font-size: .875rem;
	}
	.gs-stream__body,
	.gs-stream__empty,
	.gs-slider__name {
		font-size: 1rem;
	}
	.gs-stream__more {
		font-size: .9375rem;
	}
}



/* --------------------------------------------------------------------------
   一覧ページの見出し（2026/8/7 G-18）
   対象：書籍一覧 /goods/・ジャンル/シリーズ/著者のターム一覧・検索結果
   　　　および記事種別（kiji）のタームアーカイブ

   出力は functions.php の gs_archive_page_title()。
   GeneratePress の既定は 42px / 400 だが、サイトのH1設計値に揃える。

   合わせる先は0件画面の .entry-title（実測 32px / 600・画面幅1006px）。
   S9 919行のデザイン規定 H1:32px、S13 1150行の書籍詳細 H1 600/32px と同値。

   狭い幅では枠に合わせて縮める。
   実測：明朝の全角1文字＝1em ちょうど（20文字が32pxで640px）。
   よって1行に収まる最大サイズ＝枠幅÷20＝枠幅の5%＝5cqi。
   上限32px、下限18px（サイト内の見出し最小値・S24-31）。
   下限に達したら折り返す。切り取りはWCAG 1.4.4の失敗例F69に当たるため採らない。

   枠幅を直接見るためコンテナクエリ単位を使う。画面幅から逆算する方式は
   「枠幅＝画面幅−60」という定数を埋め込むことになるため採らない
   （60の正体は .page-header 自身の左右padding 30px×2。狭い幅でだけ効く）。
   .page-header の親は .site-main（block）なので、S19-2076に記録した
   フレックスアイテムが潰れる症状には当たらない（実測で確認）。

   font-size を2回書いているのは cqi 非対応環境への備え。
   非対応なら2行目が無視され、32px固定になるだけで崩れない。

   .page-header を前置きしているのは詳細度を上げるため
   （.site-content .is-left-sidebar と同じ理由）。
   -------------------------------------------------------------------------- */

.page-header {
	container-type: inline-size;
}

/* 768px以下だけ、GeneratePress既定の余白をサイトヘッダーと同じ8pxに
   そろえる（hd02inner の左右padding は768px以下で8px。G-30で16→8）。
   GP既定は padding 上下左右30px ＋ margin-bottom 20px。左は30pxで
   ヘッダーのロゴ（16px）や表示切替（16px）と揃わず、上下は78px／52pxの
   空きになっていた。
   .site-main を前置きしているのは詳細度を 0,2,0 に上げるため
   （GP出力は 0,1,0 で読み込み順が保証されない）。
   769px以上はGP既定のまま。 */
@media (max-width: 768px) {

	.site-main .page-header {
		padding: 8px;
		margin-bottom: 8px;
	}

}

.page-header .page-title {
	font-weight: 600;
	font-size: 32px;
	font-size: clamp(18px, 5cqi, 32px);
}

/* --------------------------------------------------------------------------
   ターム一覧の紹介文（2026/8/21 G-36）
   対象：ジャンル／シリーズ／著者のターム一覧の1ページ目。
   出力は functions.php の gs_archive_page_title()。説明欄が空なら
   .gs-term-desc 自体が出力されないため、この指定は当たる相手を持たない。

   文字組みは書籍詳細の「内容紹介」（199-203行）と同値。
   同じ「紹介文」という用途に同じ値を使う（MD 7790）。
   色は指定しない。内容紹介と同じく周囲から継承させるため。

   見出しとの間隔16pxは規格表 19-G35-1「H1の下 → 本文 16px」。
   PCと768px以下で値を変えない（変える根拠が無いため）。

   下の間隔は持たせず、.page-header が既に持っている下余白
   （GP既定 margin-bottom 20px／768px以下は8px）に任せる。
   そのため最後の段落の下マージンだけ打ち消す。
   最初の段落の上マージンも打ち消し、16pxが上乗せされないようにする。
   -------------------------------------------------------------------------- */
.gs-term-desc {
	margin-top: 16px;
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.8;
}

.gs-term-desc p:first-child {
	margin-top: 0;
}

.gs-term-desc p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   一覧タイルのラベル  .gs-badge-tile
   詳細ページ用 .gs-badge とは別系統。値の打ち消しを避けるため独立させた。
   幅の根拠（2026/8/7 G-20 実測）：タイル内幅180px、
   最大桁 999,999円(税込) の文字実幅94.72px、本ラベル「近日発売」実幅54.00px。
   94.72 + 6 + 54.00 = 154.72px で25.28px余る。
   ラベル内部では折り返さず（nowrap）、収まらないときはラベルごと次行へ送る。
   ------------------------------------------------------------ */
.gs-badge-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 16px;
	margin-left: 6px;
	padding: 0 .4em;
	font-size: 10px;
	letter-spacing: .15em;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
	color: #FAFAFA;
	background: #4A4A4A;
}
.gs-badge-tile--new {
	background: #C0392B;
}
.gs-badge-tile--topic {
	background: #2F4858;
}
.gs-badge-tile--kinkan {
	background: #1B6EC2;
}
.gs-badge-tile--long {
	background: #8B2E4F;
}

/* ------------------------------------------------------------
   一覧タイルの価格行  ラベルとの縦位置合わせ（2026/8/7 G-20）
   vertical-align: middle は「親のベースライン＋親のx-heightの半分」に
   箱の中点を合わせる定義であり、行の中央でも文字の中央でもない【公1・CSS2.1】。
   実測で行の中心712.45／価格文字の中心712.45に対しラベル箱の中心712.92と
   0.47px下にずれた。x-heightは書体ごとに異なるため top での補正は書体依存になる。
   W3C課題票#4707が挙げる2案のうち、親をflexにする方を採った【公2】。
   ラベルが2つ付く書籍のために flex-wrap: wrap を置く。価格は1行目に残り、
   収まらないラベルだけが次行へ送られる。
   セレクタはGBの自動生成クラス。要素119のブロックを作り直すと変わる（24-16・24-19）。
   ------------------------------------------------------------ */
.gb-text-d8e1b2c4 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.gs-badge-tile {
	vertical-align: baseline;
}

/* ------------------------------------------------------------
   フッター下段  TEL・FAX・メールの折り返し（2026/8/7 G-20）
   日本語は文字単位で折り返せるため、1行に流すと語の途中で折れる。
   3項目を .gs-footer__contacts で囲み、その中だけをflexにして
   項目単位で回り込ませる。幅に応じて自動で折れるためメディアクエリは要らない。
   住所は <br> の前にあり、この指定の外側。従来どおり自由に折り返す。
   項目が増えても <span> を足すだけでよく、CSSの追記は要らない。
   ------------------------------------------------------------ */
.gs-footer__contacts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px 16px;
}
.gs-footer__contacts > span {
	white-space: nowrap;
}

/* ==========================================================================
   一覧の表示形式（タイル／リスト）
   --------------------------------------------------------------------------
   要素119の Loop Item には、リスト表示でしか使わない項目も常に出力される。
   GenerateBlocks無料版にブロック単位の条件表示が無いため、
   出し分けはここで行う。

   ・.gs-list-lead … 説明文（{{book_lead}}）。リスト表示のみ
   ・.gs-view-list … <body> に付く。?view=list のとき（functions.php）

   リスト表示のレイアウト本体は、書影の標準サイズ確定後に追記する。
   ========================================================================== */

/* ----- タイル表示では説明文を出さない ----- */
body:not(.gs-view-list) .gs-list-lead {
	display: none;
}

/* ----- タイル表示：狭い画面で2列にする（G-33）-----
   要素119のLooperは repeat(auto-fill, minmax(150px, 180px))。
   auto-fill の繰り返し数は上限180pxで数えられるため、実効320〜379pxでは
   2列ぶん（150×2＋gap20＝320px）が収まるのに1列になる（Chromium 141実測）。
   Firefoxは下限150pxで数えるため同じ幅で2列になり、表示が食い違っていた。
   上限を 1fr にすると繰り返し数が下限150pxで決まる。1列になる幅で
   タイルが枠いっぱいに伸びるのを、タイル側の max-width:180px で止める。
   リスト表示（body.gs-view-list）は対象外。 */
@media (max-width: 411px) {

	body:not(.gs-view-list) .gb-looper-820fce7f {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		justify-items: center;
	}

	body:not(.gs-view-list) .gb-looper-820fce7f > * {
		width: 100%;
		max-width: 180px;
	}

}

/* ==========================================================================
   一覧のリスト表示（?view=list）  ← G-27・目視確認のための仮実装
   --------------------------------------------------------------------------
   すべて body.gs-view-list の中。タイル表示には1ルールも当たらない。
   構造（要素119）：a > img / p×5（書名・副題・著者・価格+ラベル・紹介文）
   p は平置きでまとめ箱が無いため、グリッドの明示配置で列に振り分ける。

   ⚠️ 仮の値（目視後に決め直す）
   ・切替幅768px ／ 区切りの上下20px ／ 書影180px据え置き ／ 2列目216px
   ・.gb-looper-820fce7f はブロック再作成で変わるハッシュ。確定時に
     Looperへ className を1語足して差し替えること。
   ⚠️ 5行目の 1fr は「書影の高さが各行に配分されて項目が間延びするのを
     防ぐ受け皿」。消すと項目間が8px→最大56pxに開く（実測）。
   ========================================================================== */

/* 1件を全幅に。Looperのトラック上限180pxが効くため、これが無いと
   1件の幅が 180×列数＋20×(列数-1) で頭打ちになる（実測）。 */
body.gs-view-list .gb-looper-820fce7f {
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	row-gap: 0;
}

/* 768px以下：書影の左端を見出し・表示切替と同じ8pxにそろえる（G-30で16→8）。
   タイル表示は対象外（中央寄せのため左端がそろわず、
   余白を足すと実効580-611px・380-411pxで列が1つ減る／実測）。 */
@media (max-width: 768px) {

	body.gs-view-list .gb-looper-820fce7f {
		padding-left: 8px;
		padding-right: 8px;
	}

}

body.gs-view-list .gb-loop-item {
	padding: 20px 0;
	border-bottom: 1px solid #ddd;
}

/* ----- 769px以上：3列（書影／書名+他情報／紹介文）-----
   2列目216px＝書影180pxの1.2倍。240px・270pxとの差は紹介文の行数だけで
   （980pxで4行／4行／5行）、書名の行数は3案とも同じだった（実測）。 */
body.gs-view-list .gb-element-4cb01573 {
	display: grid;
grid-template-columns: 180px minmax(0, 216px) minmax(0, 1fr);
	grid-template-rows: auto auto auto auto 1fr;
	column-gap: 20px;
	align-items: start;
}

body.gs-view-list .gb-element-4cb01573 > img {
	grid-column: 1;
	grid-row: 1 / span 5;
	width: 180px;
}

body.gs-view-list .gb-element-4cb01573 > p:nth-of-type(1) {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;        /* タイル用の10pxを打ち消し、書影の上端にそろえる */
}
body.gs-view-list .gb-element-4cb01573 > p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
body.gs-view-list .gb-element-4cb01573 > p:nth-of-type(3) { grid-column: 2; grid-row: 3; }
body.gs-view-list .gb-element-4cb01573 > p:nth-of-type(4) { grid-column: 2; grid-row: 4; }

body.gs-view-list .gb-loop-item .gb-element-4cb01573 > .gs-list-lead {
	grid-column: 3;
	grid-row: 1 / span 5;
	margin-top: 0;
}

/* 紹介文は書籍詳細の本文と同じ書体・サイズ（style.css 199-203行と同値）。
   明朝は字面が小さいため18px・行間1.8。 */
body.gs-view-list .gs-list-lead {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.8;
}

/* 2列目だけタイルより1〜2px上げる。右隣に明朝18pxが並ぶため、
   タイル用の14/13pxでは小さく見えるため（G-27・目視判断）。
   16pxはサイトの基準値、14pxは並べ替えラベル・切替UIと同値。
   980pxでの実測：行数・1件の高さ・紹介文の幅はいずれも変化なし。 */
body.gs-view-list .gb-text-a3be1c8c {
	font-size: 16px;
}

body.gs-view-list .gb-text-b7d2e4a1,
body.gs-view-list .gb-text-c5f9a3d6,
body.gs-view-list .gb-text-d8e1b2c4 {
	font-size: 14px;
}

/* ----- 924px以下：2列2段（紹介文を下段の全幅へ）-----
   925px以上が3列。書影の左右16px（768px以下＝サイドバー非表示の範囲）
   とは別の境界なので、数値をそろえないこと。 */
@media (max-width: 924px) {

	body.gs-view-list .gb-element-4cb01573 {
		grid-template-columns: 180px minmax(0, 1fr);
		grid-template-rows: auto auto auto auto 1fr auto;
	}

	body.gs-view-list .gb-loop-item .gb-element-4cb01573 > .gs-list-lead {
		grid-column: 1 / -1;
		grid-row: 6;
		margin-top: 16px;
	}

}

/* ============================================================
   書影の無い本の枠（一覧のタイル・リスト。2026/11/11 G-46）
   書影の無い本（500冊。MD 24-119）では、要素119の <a> の中に <img> が無く、
   書名などが上に詰まっていた（実物の HTML で確認）。
   書影のある本だけに WordPress が付ける has-post-thumbnail で見分け、
   無い本の <a> の先頭に、書影と同じ大きさの枠を CSS で作る。
   本物の書影を登録すれば、クラスが付いて枠は自動で消える。
   ・縦横比 1：1.45 … 選んだ書影772枚の中央値（MD 24-117）
   ・背景 #F5F5F5（サイドバーと同じ）／文字 #666666（差 5.27・AA）
   ・枠線は box-shadow の inset（寸法を増やさない。19-G35-1）
   ・リストでは書影と同じ1列目・1〜5行目に置く（2349〜2353行と同じ）
     書籍詳細・関連書籍・トップの新刊スライダーは下に続けて書く（スライダーは G-47 で追加）。
   ============================================================ */
.gb-loop-item.books:not(.has-post-thumbnail) > a::before {
	content: "NO IMAGE";
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1.45;
	background: #F5F5F5;
	box-shadow: inset 0 0 0 1px #DDDDDD;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1;
	color: #666666;
}

body.gs-view-list .gb-loop-item.books:not(.has-post-thumbnail) > a::before {
	grid-column: 1;
	grid-row: 1 / span 5;
	width: 180px;
}

/* 書籍詳細（G-46）
   書影の無い本は <article> に has-post-thumbnail が無く、書影の欄 bk02cover が空になる。
   欄の最後（::after）に、書影と同じ大きさの枠を出す（幅は 297〜302行と同じ）。
   768px以下は書影と同じく中央に置く（620〜622行と同じ）。 */
.single-books article:not(.has-post-thumbnail) .gb-element-bk02cover::after {
	content: "NO IMAGE";
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 400px;
	max-width: 100%;
	aspect-ratio: 1 / 1.45;
	background: #F5F5F5;
	box-shadow: inset 0 0 0 1px #DDDDDD;
	font-size: 16px;
	letter-spacing: .1em;
	line-height: 1;
	color: #666666;
}

@media (max-width: 768px) {

	.single-books article:not(.has-post-thumbnail) .gb-element-bk02cover::after {
		margin-inline: auto;
	}

}

/* 関連書籍（G-46）
   書影の無い本は <a> の中に <img> が無い（related-books.php は書影があるときだけ出す）。
   <li> にクラスが付かないため、:has() で見分ける（:has() は 2615・3183行でも使用）。
   幅は列いっぱい（152px。359px以下は130px）。下の間隔は書影と同じ .4em（568〜573行）。 */
.gs-related-books__item > a:not(:has(> img))::before {
	content: "NO IMAGE";
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1.45;
	margin-bottom: .4em;
	background: #F5F5F5;
	box-shadow: inset 0 0 0 1px #DDDDDD;
	font-size: 11px;
	letter-spacing: .1em;
	line-height: 1;
	color: #666666;
}

/* トップの新刊スライダー（G-47）
   書影の無い本は <a class="gs-slider__link"> の中に <img> が無い
   （functions.php の gs_books_slider_shortcode() は get_the_post_thumbnail() の結果をそのまま出すため）。
   関連書籍と同じく :has() で見分け、<a> の先頭に書影と同じ比の枠を作る。
   幅はカードいっぱい（280px）。書名との間は .gs-slider__name の margin-top: 8px が持つ。
   文字の大きさ 14px は、タイル（幅180px）の12pxと書籍詳細（400px）の16pxの間。
   note のスライダー（.gs-slider--note）は対象外。 */
.gs-slider--books .gs-slider__link:not(:has(> img))::before {
	content: "NO IMAGE";
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1.45;
	background: #F5F5F5;
	box-shadow: inset 0 0 0 1px #DDDDDD;
	font-size: 14px;
	letter-spacing: .1em;
	line-height: 1;
	color: #666666;
}

/* ============================================================
   グローバルナビ（2026/8/13 G-29 改訂。初出 2026/8/12 G-28）
   帯の地色はヘッダーと同じ #FAFAFA（カスタマイザーのナビ背景色で指定）。
   上下と同色になるため、帯の上端・下端に #ddd の横罫を引いて仕切る。
   線はすべて box-shadow の inset で描き、寸法は1pxも増やさない。
   PCは項目間の縦罫を持たない。768px以下は行の下端の横罫のみ。
   ============================================================ */

/* 内枠をヘッダーと同じ条件（1200px・左右中央）にし、左右のpaddingを0にして
   項目の箱の左端をコンテンツの左端に寄せる。
   上下の横罫はここに持たせる。項目が並んでいない右側まで線を通すため。 */
.main-navigation:not(.slideout-navigation) .inside-navigation {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-shadow: inset 0 1px 0 #ddd, inset 0 -1px 0 #ddd;
}

/* リスト自身の余白も0にする（箱の左端をずらす要因を残さない）。 */
.main-navigation .main-nav > ul {
	margin-left: 0;
	padding-left: 0;
}

/* 項目。左右10px（G-44で20→10。11項目を1段に収めるため）。
   768px以下は下の @media で20pxに戻している。 */
.main-navigation .main-nav > ul > li > a {
	padding-left: 10px;
	padding-right: 10px;
}

/* 先頭項目だけ左を16pxにして、文字の左端をサイドバーの文字に寄せる。 */
.main-navigation .main-nav > ul > li:first-child > a {
	padding-left: 16px;
}

/* ----- 769px以上（PC） ----- */
@media (min-width: 769px) {

	/* 項目にも同じ位置の上下の線を持たせる。帯だけに線を置くと、現在地や
	   ホバーの背景が線の上に描かれて線が消える（G-28・G-29で実測）。
	   同じ1pxが重なるだけなので、見た目は1本・寸法も不変。 */
	.main-navigation .main-nav > ul > li > a {
		box-shadow: inset 0 1px 0 #ddd, inset 0 -1px 0 #ddd;
	}

	/* 帯の高さは 45 + 3 = 48px。Noto Sans JP は ascent と descent が非対称で、
	   行ボックスの中心より漢字の中心が約1.5px下に来る（実測）。下に3px入れて
	   文字を1.5px持ち上げ、罫線から文字までを上下とも16pxにそろえる。
	   高さを変えるときは 45 と 3 の合計がその値になるようにする。 */
	.main-navigation .main-nav > ul > li > a {
		line-height: 45px;
		padding-bottom: 3px;
	}
}

/* ----- 768px以下 ----- */
@media (max-width: 768px) {

/* 三本線をヘッダー右上へ重ねる（G-31）。
	   nav は hd01outer の兄弟で body の直下にある。基準になる祖先が無いので
	   body に position: relative を置く。基準を作らないとページ全体の左上が
	   基準になり、管理バーの32pxぶん上にずれる（ログイン中だけ狂う）。
	   top 8px は hd01outer の上padding、right 8px は hd02inner の右padding。 */
	body {
		position: relative;
	}

.main-navigation:not(.slideout-navigation) {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
	}

/* 帯ではなくなるので、左右の余白は外す。GPカスタマイザーが
	   .nav-below-header .main-navigation .inside-navigation.grid-container に
	   padding: 0 4px を出している（詳細度0,4,0）。grid-container を二重に
	   書いて0,5,0にし、確実に勝たせる。 */
	.main-navigation:not(.slideout-navigation) .inside-navigation.grid-container.grid-container {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

/* 三本線は黒の面にする（G-31）。上下の#ddd の線はGP側が引いているため
	   border と box-shadow の両方を外す。色はフッターと同じ組み合わせ。 */
	.main-navigation:not(.slideout-navigation) .menu-toggle {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: flex-start;
		column-gap: 4px;
		box-sizing: border-box;
		width: 91px;
		height: 56px;
		padding: 0 12px;
		line-height: 1;
		color: #FFFFFF;
		background-color: #1C1C1C;
		border: 0;
		box-shadow: none;
	}

/* アイコンの入れ物を svg と同じ高さにする。行の下に空きができて
	   1px前後下がるのを止める。 */
	.main-navigation:not(.slideout-navigation) .menu-toggle .gp-icon {
		display: flex;
		line-height: 0;
	}

	.main-navigation:not(.slideout-navigation) .menu-toggle .gp-icon svg {
		width: 24px;
		height: 24px;
	}

/* GPが .mobile-menu に左padding 9px を入れているので外す。
	   アイコンとの間隔は column-gap: 4px だけで持つ。 */
	.main-navigation:not(.slideout-navigation) .menu-toggle .mobile-menu {
		margin: 0;
		padding: 0;
	}

	.main-navigation:not(.slideout-navigation) .menu-toggle:hover,
	.main-navigation:not(.slideout-navigation) .menu-toggle:focus {
		color: #E64A3B;
		background-color: #1C1C1C;
	}

	/* 縦積みになるので、項目は中央寄せ・下端の横罫のみ。
	   先頭項目の16pxもここで解除する。 */
	.main-navigation .main-nav > ul > li > a,
	.main-navigation .main-nav > ul > li:first-child > a {
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
		justify-content: center;
		box-shadow: inset 0 -1px 0 #ddd;
	}
}

/* ============================================================
   オフキャンバスパネル（768px以下の三本線の中身。2026/8/13 G-29）
   パネルの nav は main-navigation と slideout-navigation の両方を名乗る。
   項目（新刊・近刊案内・話題書）の見た目は上の指定をそのまま使い、
   ここでは「パネル固有の余白」と「ウィジェット」だけを扱う。
   ============================================================ */

/* GPは .main-nav の下と .slideout-widget の四辺に余白を持たせている
   （実測：下40px／四辺20px）。話題書の下の空白の正体はこれ。
   行を連続させるため0にする。:not(:last-child) はGP側の詳細度に合わせる指定。
   min-width:0 は、<select> の自然幅（実測396.87px）でウィジェットが
   縮まなくなるのを解除する。 */
.slideout-navigation.slideout-navigation .main-nav,
.slideout-navigation.slideout-navigation .slideout-widget,
.slideout-navigation.slideout-navigation .slideout-widget:not(:last-child) {
	margin: 0;
	min-width: 0;
	width: 100%;
}

/* 開閉の見出しを、新刊・近刊案内・話題書の行と同じ形にする。
   三角の印は list-item のマーカーなので、inside にして箱の中に入れないと
   中央寄せから外れる。 */
.slideout-navigation .wp-block-details > summary {
	list-style-position: inside;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 15px;
	line-height: 60px;
	text-align: center;
}

/* プルダウンの置き場。左右8pxは768px以下の基準値（G-30）。 */
.slideout-navigation .wp-block-categories-dropdown {
	padding: 0 8px 8px;
}

/* プルダウンの幅を枠いっぱいにする。既定は最長の選択肢の幅になり、
   265pxのパネルから211.87pxはみ出していた（実測）。 */
.slideout-navigation .wp-block-categories-dropdown select {
	width: 100%;
	max-width: 100%;
}

/* 区切りは「ウィジェット1つ分の終わり」に置く。summary に持たせると、
   開いたときにプルダウンとの間に線が入り、群の切れ目が分からなくなる。
   閉じているときは summary の下＝ウィジェットの下なので同じ位置に出る。 */
.slideout-navigation .slideout-widget {
	box-shadow: inset 0 -1px 0 #ddd;
}

/* 検索を先頭へ、ショップを末尾へ並べ替える（G-31）。ウィジェットは必ず
   .main-nav の後に出力されるため、HTMLの順では検索をメニューより上に
   置けない。並びだけCSSで変える。:has() は Baseline Widely available
   （2023年12月以降。MDN）。 */
.slideout-navigation .inside-navigation {
	display: flex;
	flex-direction: column;
}

.slideout-navigation .slideout-widget:has(.wp-block-search) {
	order: -1;
	padding: 8px;
}

.slideout-navigation .slideout-widget:has(.gs-panel-shop) {
	order: 1;
	padding: 8px;
	box-shadow: none;
}

/* GP Premium の offside.min.css は子テーマより後に読み込まれ、
   .slideout-navigation a に color:#232323 が詳細度0,1,1で入る。
   .gs-book-buy__button は0,1,0なので負ける。0,3,0に上げて白に戻す。 */
.slideout-navigation .gs-panel-shop .gs-book-buy__button {
	color: #FFFFFF;
}

/* パネルの検索。ヘッダーにあったときと同じ形にする。 */
.slideout-navigation .wp-block-search__inside-wrapper {
	border: 1px solid #ddd;
	padding: 3px;
	background-color: #FFFFFF;
}

.slideout-navigation .wp-block-search__input {
	width: 100%;
	min-width: 0;
	height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 16px;
	color: #232323;
	background-color: transparent;
}

.slideout-navigation .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.slideout-navigation .wp-block-search__button {
	margin-left: 0;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	color: #FFFFFF;
	background-color: #232323;
}

.slideout-navigation .wp-block-search__button:hover,
.slideout-navigation .wp-block-search__button:focus {
	color: #FFFFFF;
	background-color: #2F4858;
}

/* ============================================================
   フッターの左右余白（768px以下。2026/8/13 G-30）
   全幅共通の .gs-footer__inner は16pxのまま。768px以下だけ8pxに
   そろえる。PC（980px）の見え方は変えない。
   ============================================================ */
@media (max-width: 768px) {

	.gs-footer__inner {
		padding-left: 8px;
		padding-right: 8px;
	}

}


/* --------------------------------------------------------------------------
   会社案内（/profile/）の2列組み
   ・年表と会社概要を「ラベル列＋本文列」で組む。コアのテーブルブロックに
     追加CSSクラス gs-deflist を付けて使う（担当者が管理画面から行を足せる形）
   ・ラベル列は white-space:nowrap ＋ width:1% で内容の幅ちょうどに縮める
   ・罫線は引かない。GP側が table,td,th に border:1px solid rgba(0,0,0,.1) を、
     さらに table に border-width:1px 0 0 1px を当てて上罫と左罫を出すため、
     td だけでなく table にも border:0 が要る
   ・.wp-block-table を前置して詳細度を 0,2,0 にし、コアのテーブル既定に勝たせる

   実測（Chromium 141 ＋ Noto Sans CJK JP 16px・line-height 1.7）
     年表20行   本文980px → ラベル列67.53px／本文列912.47px／表の高さ1,054px
                本文343px → 同 67.53px／275.47px／1,897px
                本文288px → 同 67.53px／220.47px／2,223px
     会社概要5行 本文980px → ラベル列96.02px／表の高さ243px／はみ出しなし
                本文343px → 同 96.02px／325px／はみ出しなし
                本文288px → 同 96.02px／352px／はみ出しなし
   -------------------------------------------------------------------------- */
.wp-block-table.gs-deflist table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
}

/* 上下の padding は入れない。入れると年と年の間だけが
   （行送り32.4px ＋ 上下16px＝48.4px）になり、折り返しの行送りと食い違う。 */
.wp-block-table.gs-deflist td {
	padding: 0;
	vertical-align: top;
	border: 0;
	font-size: 18px;
	line-height: 1.8;
}

/* 説明の列だけ明朝。年の列はゴシックのまま（図書目録PDFの組み方に合わせる）。
   書体以外（18px・行間1.8）は書籍詳細の内容紹介と同値。199-203行と揃えている。 */
.wp-block-table.gs-deflist td + td {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
}

.wp-block-table.gs-deflist td:first-child {
	width: 1%;
	white-space: nowrap;
	padding-right: 16px;
}

/* 本文中の連絡先（TEL・FAX・メール）を項目単位で折り返す。
   フッターの .gs-footer__contacts と同じ考え方だが、あちらは
   justify-content:center が入っており本文では中央に寄ってしまうため別に起こす。
   幅に応じて自動で折れるためメディアクエリは要らない。 */
.gs-contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
}

.gs-contacts > span {
	white-space: nowrap;
}

/* 会社案内の冒頭3行。行送りを 16px×2＝32px にして、
   年表の 18px×1.8＝32.4px とページ内でそろえる。 */
.gs-profile-lead {
	line-height: 2;
}

/* --------------------------------------------------------------------------
   文章型の固定ページ  G-35
   以下のクラスはすべて新設の独自名で、担当者がブロックの追加CSSクラスに
   書いた場所にしか存在しない。トップ・一覧・書籍詳細には出力されないため、
   親の箱で囲って範囲を限る必要はない。
   （G-35でグループブロックを使ったが、GPがグループの内側コンテナ
   .wp-block-group__inner-container にコンテナの余白を引き継がせるため
   本文の左端が右へずれた。箱そのものを廃止して解消した。19-G35参照）

   ・並列の選択肢（3つの注文経路）＝ h2 に gs-route。左に赤4pxの縦線と番号。
     番号は ::before で出す。コアの見出しブロックは span を許さないため
     文字として持たせられない
   ・参照情報の見出し（返品について）＝ h2 に gs-ref。下に #DDDDDD 1px
   ・手順（小社に直接）＝ gs-steps の定義リスト（dl > div > dt + dd）
   ・送り先＝ gs-box。背景 #FAFAFA
   ・導線＝ gs-btn。色は購入ボタン（371-385行）と同値
   ・線はすべて box-shadow の inset。border は寸法を増やす
   ・本文の最大幅は今回は入れない（現行980pxのまま）

   節と節の間は48px。見出しの上の余白だけで作る。直前の段落の下余白とは
   相殺して大きいほうが残るため、見出し側に持たせれば足りる。
   -------------------------------------------------------------------------- */

.gs-route {
	margin-top: 48px;
	margin-bottom: 14px;
	padding-left: 14px;
	box-shadow: inset 4px 0 0 #E64A3B;
}

.gs-route::before {
	color: #E64A3B;
	margin-right: .5em;
}

.gs-route--1::before {
	content: "1";
}

.gs-route--2::before {
	content: "2";
}

.gs-route--3::before {
	content: "3";
}

.gs-ref {
	margin-top: 48px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	box-shadow: inset 0 -1px 0 #DDDDDD;
}

.gs-steps {
	margin: 0 0 18px;
}

.gs-steps > div {
	display: flex;
	padding: 9px 0;
}

.gs-steps dt {
	flex: 0 0 100px;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}

.gs-steps dd {
	flex: 1 1 auto;
	margin: 0;
}

.gs-note {
	display: block;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}

.gs-box {
	margin: 0 0 48px;
	padding: 20px 22px;
	background: #FAFAFA;
	line-height: 1.7;
}

.gs-btn {
	margin: 0 0 48px;
}

.gs-btn a {
	display: inline-block;
	padding: 12px 22px;
	color: #FFFFFF;
	background: #E64A3B;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}

.gs-btn a:hover,
.gs-btn a:focus {
	color: #FFFFFF;
	background: #C43A2B;
}

/* 768px以下はラベル列を上に積む。100pxのラベル列を残すと
   本文列が実効幅から100px引かれ、折り返しが増えるため。 */
@media (max-width: 768px) {

	.gs-steps > div {
		display: block;
	}

	.gs-steps dt {
		margin-bottom: 2px;
	}

}


/* --------------------------------------------------------------------------
   書店様へ（/guide/）の一覧  G-35
   ショートコードが出す gs-guide-list / gs-guide-labels / gs-guide-title /
   gs-guide-printing / time / gs-label に当てる。

   ・中黒の箇条書きをやめ、#DDDDDD 1px で区切った行にする
   ・ラベルの数は書籍によって変わるため、幅を数値で決めない。ul を
     grid にして1列目を max-content にし、li に subgrid で受け継がせる。
     列幅はその一覧で最もラベルが多い行に合わせてブラウザが決める
   ・ラベルは列の中で右に寄せる。書名のすぐ左に必ずラベルが来る
   ・刷数は書名と同じ箱の中。li の子を2つ（お知らせは3つ）に保たないと
     列が足りず次の行に落ちる
   ・li は display:grid。display:contents は <ul> のリスト意味を失うため使わない
   ・subgrid は 2023年9月以降のブラウザで利用可能（MDN）。非対応の環境では
     @supports の外の flex がそのまま働き、頭がそろわないだけで崩れない
   -------------------------------------------------------------------------- */

.gs-guide-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gs-guide-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 0;
	line-height: 1.5;
	box-shadow: inset 0 -1px 0 #DDDDDD;
}

.gs-guide-list li:first-child {
	padding-top: 0;
}

.gs-guide-labels {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.gs-guide-title {
	flex: 1 1 auto;
}

.gs-guide-printing {
	font-size: 14px;
	color: #666666;
}

.gs-guide-list--news time {
	flex: 0 0 96px;
	font-size: 14px;
	color: #666666;
}

.gs-box:last-child {
	margin-bottom: 0;
}

@supports (grid-template-columns: subgrid) {

	.gs-guide-list--books {
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 8px;
	}

	.gs-guide-list--news {
		display: grid;
		grid-template-columns: 96px max-content 1fr;
		column-gap: 8px;
	}

	.gs-guide-list li {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
	}

}

/* 768px以下は列組みをやめ、書名を次の行へ送る。
   実効343pxから 日付96 ＋ 間隔8 ＋ ラベル75 ＝ 179px を引くと、
   書名に164pxしか残らず1行に3〜4文字しか入らないため。
   @supports の後ろに置いて、対応環境でも確実に上書きする。 */
@media (max-width: 768px) {

	.gs-guide-list--books,
	.gs-guide-list--news {
		display: block;
	}

	.gs-guide-list li {
		display: flex;
	}

	.gs-guide-list--news .gs-guide-title {
		flex: 1 1 100%;
	}

}


/* --------------------------------------------------------------------------
   768px以下の見出しの縦間隔  G-35
   同じ指定を 1838行付近の @media に書いたが効かなかった。
   .gs-route / .gs-ref の基の指定（下方）と詳細度が同じ 0,1,0 で、
   メディアクエリは詳細度を上げないため、後に書かれた基の指定が勝つ。
   基の指定より後ろに置くことで効かせる。値は移動前と同じ。

   合わせる先は /privacy/（GP既定のまま組んだページ）の実測値。
   H2の前33px・後29px・段落間34px。前の33pxと段落間34pxがほぼ同値
   ＝h2の上マージンは0で、前の空きは直前の段落の下マージンが作っている。
   下はカスタマイザー「すべての見出し」の Bottom Margin 20px（MD 7228）。
   gs-ref は下に線があるため padding 10 ＋ 線1 ＋ margin 9 ＝ 20 で合わせる。
   PC（769px以上）の 48px / 20px は /order/ の設計値なので触らない。
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

	.gs-route,
	.gs-ref {
		margin-top: 0;
	}

	.gs-route {
		margin-bottom: 20px;
	}

	.gs-ref {
		margin-bottom: 9px;
	}

	/* 一覧の前後が中の行間より詰まっていた。実測（/guide/・768px以下）：
	   行と行の間25px、一覧の最終行から次のH2まで19px、H2から1行目まで22px。
	   塊の切れ目が中身より狭く、どこで一覧が終わるか見えない。
	   h2の上マージンは0（上の指定）で、前の空きは直前の要素が作る。
	   段落は下マージンを持つが一覧は margin:0 のため何も作らない。
	   20pxはカスタマイザー「すべての見出し」の Bottom Margin と同値（MD 7228）。
	   1行目の上paddingを他の行と同じ9pxに戻し、H2の下も広げる。
	   基の指定（2566・2582行）より後ろに置いて効かせる。 */
	.gs-guide-list {
		margin-bottom: 20px;
	}

	.gs-guide-list li:first-child {
		padding-top: 9px;
	}


	/* 固定ページの見出しは、上マージン0・下20pxに統一する。
	   20pxはカスタマイザー「すべての見出し」の Bottom Margin と同値（MD 7228）。
	   H1は .entry-header の中にあり本文の外なので、H1の下は
	   .entry-content の上マージン（GP既定 2em＝32px）で作られる。
	   そこも20pxにして、H1・H2・H3を同じ規則にそろえる。
	   .gs-ref は下に線があるため padding10＋線1＋margin9＝20 で合わせており
	   :not(.gs-ref) で除外する。
	   body.page を前置きしているので一覧・投稿・書籍詳細・トップには当たらない。 */
	body.page .entry-content h2:not(.gs-ref),
	body.page .entry-content h3 {
		margin-top: 0;
		margin-bottom: 20px;
	}

	body.page .entry-content:not(:first-child) {
		margin-top: 20px;
	}

}

/* --------------------------------------------------------------------------
   読み物用ページ（規約・長文）  G-35
   functions.php の gs_read_body_class() が <body> に gs-read を付ける。
   対象はスラッグで指定（現在は privacy）。

   値はサイト内で「読ませる文章」に使っているものと同じ。
   書籍詳細の内容紹介（199-203行）と年表の説明列（gs-deflist）が
   18px・行間1.8の明朝。用途が同じなので値も同じにする。
   本文16px → 読み物18px は、スマホで文字を上げるという規格の向きと
   一致する（見出し17→18px・タイトル14→16px。MD 4437-4445）。

   当てる先は本文の中の文章要素だけ。見出し・ラベル・ボタン・一覧・
   年表・定義リストには当てない（それぞれ専用の指定を持っているため）。
   -------------------------------------------------------------------------- */

.gs-read .entry-content p,
.gs-read .entry-content li {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.8;
}

.gs-read .entry-content p,
.gs-read .entry-content li {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.8;
}


/* 記事（お知らせ・対談）の詳細ページの本文（G-44）
   移行した記事514件は、本文がカスタムHTMLブロック1つで改行は <br>。
   <p> が無いため、上の .gs-read .entry-content p, li が当たらない。
   書籍の内容紹介（199-203行）と同じく、本文の枠に指定して中の文字に継承させる。
   値も同じ（明朝18px・行間1.8）。
   固定ページ（privacy など）は p・li に絞ったまま変えない。
   見出し・ボタンなどに明朝を及ぼさないため（G-35）。 */
.single-post .entry-content {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.8;
}
/* 記事の画像（G-44）
   gs-migrate の「記事画像」の工程が、本文の目印を画像ブロックに置き換える。
   付けるクラス：.gs-kiji-img（全部）、.gs-kiji-img--side（談話・往復書簡）。
   見せ方は旧サイトのとおり（質問者決定）。
     ・左に寄せて本文を回り込ませる
     ・続く画像は前の画像の下に並べる（clear:left。旧サイトの左の列と同じ）
     ・談話・往復書簡は幅150px（旧サイトの列幅）。ほかは原寸（ほぼ幅200px以下）
     ・768px以下では回り込ませず、文の上に置く（旧サイトにスマホ表示が無かったため）
   display:table と table-caption は、説明の文が長くても枠が画像の幅を超えないようにするため。
   間隔：右16px（ヘッダーの column-gap と同値）、下20px（規格表 19-G35-1「塊の下」）。
   説明の文字：14px・#666666・行間1.7（規格表「補足・ラベル」）。
   本文の枠を flow-root にして、最後の画像の回り込みを本文の中で終わらせる。 */
.single-post .entry-content {
	display: flow-root;
}
.single-post .entry-content .gs-kiji-img {
	display: table;
	float: left;
	clear: left;
	margin: .4em 16px 20px 0;
}
/* 画像の上端を、横の文の1行目の字の上端にそろえる（G-44・質問者指示）。
   上の .4em は行間1.8の半分の余り（(1.8 − 1) ÷ 2）。figure は本文の18pxを受け継ぐので7.2px。
   画像の直後の <br><br> は、移行で段と段の間に入れた区切り。旧サイトでは画像と文が
   別の列で上端がそろっていたので、ここでは消す。全記事で画像の直後は必ず2つ以上の <br>（実測）。 */
.single-post .entry-content .gs-kiji-img + br,
.single-post .entry-content .gs-kiji-img + br + br {
	display: none;
}
/* 本文の最後にある画像（後ろに画像と改行しか無いもの）は回り込ませず、文の下に置く（G-44・質問者指示）。 */
.single-post .entry-content .gs-kiji-img:not(:has(~ :not(.gs-kiji-img, br))) {
	float: none;
	margin: 0 0 20px;
}
.single-post .entry-content .gs-kiji-img figcaption {
	display: table-caption;
	caption-side: bottom;
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}
.single-post .entry-content .gs-kiji-img--side img {
	width: 150px;
	height: auto;
}
@media (max-width: 768px) {
	.single-post .entry-content .gs-kiji-img {
		float: none;
		margin: 0 0 20px;
	}
}
/* --------------------------------------------------------------------------
   お問い合わせフォーム（Snow Monkey Forms）  G-36
   プラグインが出す .smf-* に当てる。クラス名はすべて固定で、
   自動生成の記号は付かない（実物のDOMで確認済み）。

   ・769px以上だけラベルと入力欄を横に並べる。768px以下はプラグインの
     既定（縦積み）のまま触らない
   ・列幅は数値で決めない。最長ラベルにブラウザが合わせる
   ・入力欄の高さ32pxはヘッダーの検索ボックスと同値（953-961行）
   ・文字サイズ・色は規格表から取る。新しい値は作らない
   ・[必須] はラベルに書かない。入力欄に付く data-validations を手掛かりに
     CSSで足す。確認画面では入力欄が値の表示に変わるため自動的に消える
   -------------------------------------------------------------------------- */

/* ラベル・説明文は明朝。入力欄の中はゴシックのまま
   （明朝は 1 と l、0 と O の判別が落ちるため） */
.smf-item__label__text,
.smf-item__description {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
}

/* 補足文。規格表の「補足・ラベル」 */
.smf-item__description {
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}

/* 必須の印。入力欄に data-validations="required" が付く項目だけ。
   :has() は2023年12月以降のBaseline（MDN）。非対応環境では印が出ないが、
   検証は働くので送信できなくなることはない。 */
.smf-item:has( [data-validations*="required"] ) .smf-item__label__text::after {
	content: " [必須]";
	color: #E64A3B;
}

/* 確認画面では印を出さない。入力を終えた後に、どれが必須だったかを
   知らせる意味がないため。確認画面でも値と一緒に隠しコントロールが出て
   data-validations を持つので、指定しないと印が残る
   （公式 App/Control/Text.php 132-140行）。 */
.snow-monkey-form[data-screen="confirm"] .smf-item:has( [data-validations*="required"] ) .smf-item__label__text::after {
	content: none;
}

/* 確認画面では印を出さない。入力を終えた後に、どれが必須だったかを
   知らせる意味がないため。確認画面でも値と一緒に隠しコントロールが出て
   data-validations を持つので、指定しないと印が残る
   （公式 App/Control/Text.php 132-140行）。 */
.snow-monkey-form[data-screen="confirm"] .smf-item:has( [data-validations*="required"] ) .smf-item__label__text::after {
	content: none;
}

/* 検証エラーの文言。プラグインの既定色 #cc3033 を規格の赤に揃える */
.smf-error-messages {
	color: #E64A3B;
	font-size: 14px;
	line-height: 1.7;
}

/* Turnstile を面で囲む。padding は gs-box（2494-2499行）と同値。
   下の20pxは規格表の「塊（一覧・囲み）の下」。
   背景が #FAFAFA のため、面は白にする。 */
/* 注意書きとウィジェットで1つの面にする。上下に分けて padding を持たせ、
   間を14px空ける（CF7版 .gs-turnstile と同じ組み方）。
   注意書きは functions.php の gs_smf_turnstile_note() が出す。 */
.gs-smf-turnstile-note {
	margin: 0;
	padding: 20px 22px 14px;
	background: #FAFAFA;
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}

.snow-monkey-forms-turnstile {
	margin: 0;
	padding: 0 22px 20px;
	background: #FAFAFA;
}

/* 並び順。設定は「フォームの前／後」の2択しかなく、送信ボタンの直上に
   置けないため、フォームを縦のフレックスにして order で入れ替える。
   .smf-action の中に入れる方法は使えない（画面が切り替わるたびに
   innerHTML ごと差し替えられて消えるため）。
   .smf-form の格子・subgrid には影響しないことを実測で確認済み。 */
form.snow-monkey-form {
	display: flex;
	flex-direction: column;
}

.gs-smf-turnstile-note,
.snow-monkey-forms-turnstile {
	order: 1;
}

.smf-action {
	order: 2;
}

/* ボタン。値は gs-btn a（2505-2514行）と同値。 */
.smf-action .smf-button-control__control {
	padding: 12px 22px;
	border: 0;
	border-radius: 0;
	color: #FFFFFF;
	background: #E64A3B;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

.smf-action .smf-button-control__control:hover,
.smf-action .smf-button-control__control:focus {
	color: #FFFFFF;
	background: #C43A2B;
}

/* ----- 769px以上 ----- */
@media (min-width: 769px) {

	/* 入力欄の高さ。プラグインの padding: .75rem 1rem を打ち消す。
	   幅はプラグインが指定しておらず、size 属性ぶんの既定幅
	   （実測341.333px）で止まる。列いっぱいに伸ばす。 */
	.smf-form .smf-text-control__control,
	.smf-form .smf-email-control__control,
	.smf-form .smf-tel-control__control {
		width: 100%;
		height: 32px;
		padding: 0 8px;
	}

	.smf-form .smf-textarea-control__control {
		width: 100%;
	}

	/* お問い合わせ内容だけは横に並べない。フォームの主役で、
	   幅と高さを最大限に使う（CF7で決めた扱いと同じ）。
	   textarea を含む項目を :has() で選ぶ。 */
	.smf-item:has( textarea ) {
		display: block;
	}

	/* ラベル列と入力列を横に並べる。
	   ラベル列の入れ物を display: contents にして、中のラベルと説明文を
	   直接この格子に載せる。説明文だけを入力欄の下（2列目の2段目）へ回す。 */
	/* 列幅はフォーム全体で1つに決める。項目ごとに格子を組むと
	   行ごとに列幅が変わり、入力欄の左端が揃わない。
	   親で列を決め、各項目に subgrid で受け継がせる（/guide/ と同じ手法）。 */
	/* 行間20pxは規格表の「塊（一覧・囲み）の下」。
	   1項目＝ラベル＋入力欄＋説明文で1つの塊。 */
	.smf-form {
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 16px;
		row-gap: 20px;
	}

	.smf-item {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		align-items: start;
	}

	.smf-item__col--label {
		display: contents;
	}

	.smf-item__label {
		grid-column: 1;
		grid-row: 1;
	}

	.smf-item__col--controls {
		grid-column: 2;
		grid-row: 1;
	}

	/* 説明文は入力欄と同じ塊の中身なので、行間20pxを空けない。
	   項目の中の行間だけを0にし、説明文に4pxだけ持たせる。
	   負の余白で動かすと入力欄の下に潜り込む。 */
	.smf-item {
		row-gap: 0;
	}

	.smf-item__description {
		grid-column: 2;
		grid-row: 2;
		margin-top: 4px;
	}

	/* 確認画面はラベルと値の文字の下端をそろえる。
	   .smf-item の align-items: start（3167行）だと箱の上端がそろい、
	   行の高さの差ぶん（実測7px）文字がずれる。 */
	.snow-monkey-form[data-screen="confirm"] .smf-item {
		align-items: baseline;
	}

	/* 一覧の終わりを示す線。768px以下は最後の項目の下線がその役目を
	   持つので引かない。 */
	.snow-monkey-form[data-screen="confirm"] .gs-smf-confirm-note {
		box-shadow: inset 0 1px 0 #DDDDDD;
	}


}

/* --------------------------------------------------------------------------
   Snow Monkey Forms の確認画面  G-36
   form の data-screen 属性が input / confirm / complete で切り替わる。
   これを手掛かりに、確認画面だけの見せ方を決める。
   -------------------------------------------------------------------------- */

/* 確認画面では入力の手引きは不要 */
.snow-monkey-form[data-screen="confirm"] .smf-item__description {
	display: none;
}

/* 確認画面の1項目。CF7版 .gs-form-confirm dl > div（2941-2944行）と同値。
   上下12pxの余白と、下に #DDDDDD 1px を box-shadow で描く。
   全項目を同じ形で並べる。入力画面では本文だけ全幅にしているが、
   あちらは「書く」ための面積が要るため。確認画面は読み比べる画面で、
   1項目だけ形が違うと目の運びが崩れる。 */
/* 送信が終わった画面には、迷惑送信対策の欄を残さない。
   ウィジェットと注意書きは <form> の直下（.smf-form の外）にあり、
   画面が切り替わっても差し替えの対象にならないため、明示的に隠す。
   通信に失敗した画面（systemerror）では、送り直しがあるので残す。 */
.snow-monkey-form[data-screen="complete"] .gs-smf-turnstile-note,
.snow-monkey-form[data-screen="complete"] .snow-monkey-forms-turnstile {
	display: none;
}

/* 確認画面の1項目。縦積みになる幅だけ、CF7版 .gs-form-confirm dl > div
   （2941-2944行）と同じ組みにする。769px以上はラベルと値が横に並び、
   位置で項目の切れ目が分かるので線を引かない。 */
@media (max-width: 768px) {

	.snow-monkey-form[data-screen="confirm"] .smf-item {
		padding: 12px 0;
		box-shadow: inset 0 -1px 0 #DDDDDD;
	}

}

/* 項目名。CF7版 .gs-form-confirm dt（2946-2951行）と同値。
   縦積みになる幅では位置の手掛かりが消えるので、大きさと色で値と分ける。 */
.snow-monkey-form[data-screen="confirm"] .smf-item__label__text {
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}

/* 値。CF7版 .gs-form-confirm dd（2953-2958行）と同値。
   値そのものを包む要素が無く、入れ物の .smf-placeholder に直接
   テキストが入るため、そこに当てる（公式 App/Control/Text.php 128-131行）。
   改行は nl2char で <br> になるので white-space の指定は要らない。 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.5;
}

/* 送信前の一文。入力画面では出さない。
   上に線は引かない。最後の項目の下線がすでにあるため。
   padding-top 20px は CF7版 dl { margin: 0 0 20px } に当たる。 */
.gs-smf-confirm-note {
	display: none;
}

.snow-monkey-form[data-screen="confirm"] .gs-smf-confirm-note {
	display: block;
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 20px;
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
	font-size: 18px;
	line-height: 1.8;
}

/* ----- 768px以下 ----- */
@media (max-width: 768px) {

	/* 入力画面だけ、項目の切れ目を中身の間隔より広くする（MD 19-G35-1）。
	   確認画面は上の padding 12px が同じ役目を持つので当てない。 */
	.snow-monkey-form:not( [data-screen="confirm"] ) .smf-item + .smf-item {
		margin-top: 20px;
	}

	/* 説明文がラベルに貼り付き、入力欄から離れていたのを均す。
	   4pxは769px以上の .smf-item__description と同値。 */
	.smf-item__description {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	/* 入力欄を枠いっぱいに。769px以上と同じ扱い。 */
	.smf-form .smf-text-control__control,
	.smf-form .smf-email-control__control,
	.smf-form .smf-tel-control__control {
		width: 100%;
	}

}

/* 導入文の出し分け。data-screen は form に付くため、form の外にある
   導入文には届かない。gendaishokan-smf.js が <body> に付けるクラスで切り替える。
   書体はここで持つ。.gs-contact の指定はCF7撤去で消えるため頼らない。
   確認用の見出しの下の区切り線も box-shadow の inset。 */
.gs-form-lead,
.gs-form-lead--confirm {
	font-family: var(--gp-font--shippori-mincho), "Shippori Mincho", serif;
}

.gs-form-lead--confirm {
	display: none;
}

body.gs-smf-confirm .gs-form-lead {
	display: none;
}

body.gs-smf-confirm .gs-form-lead--confirm {
	display: block;
	padding-bottom: 20px;
	box-shadow: inset 0 -1px 0 #DDDDDD;
}

body.gs-smf-complete .gs-form-lead,
body.gs-smf-complete .gs-form-lead--confirm {
	display: none;
}

/* 導入文の出し分け。data-screen は form に付くため、form の外にある
   導入文には届かない。gendaishokan-smf.js が <body> に付けるクラスで切り替える。
   確認用の見出しの下の区切り線も box-shadow の inset。 */
.gs-form-lead--confirm {
	display: none;
}

body.gs-smf-confirm .gs-form-lead {
	display: none;
}

body.gs-smf-confirm .gs-form-lead--confirm {
	display: block;
	padding-bottom: 20px;
	box-shadow: inset 0 -1px 0 #DDDDDD;
}

body.gs-smf-complete .gs-form-lead,
body.gs-smf-complete .gs-form-lead--confirm {
	display: none;
}


/* ============================================================
   【一時的】60周年マークを外してロゴを左へ寄せる（2026/11/13 G-47）
   60周年マーク（hd04mark）が公開に間に合わないため、隠す。
   Site Header の要素には触らず、この塊だけで行っている。
   マークが届いたら、この塊を丸ごと消せば元に戻る。
   769〜969px と 768px以下は、マーク用の1列目（64px）を格子から外し、
   ロゴ・since 1967 を1列目へ移す（上の各指定と同じ詳細度。後に書いたこちらが勝つ）。
   ============================================================ */
.gb-element-hd03left .gb-element-hd04mark {
	display: none;
}

@media (min-width: 769px) and (max-width: 969px) {

	.gb-element-hd01outer .gb-element-hd02inner {
		grid-template-columns: auto 1fr;
	}

	.gb-element-hd03left .gs-logo,
	.gb-element-hd06texts .gb-text-hd07since {
		grid-column: 1;
	}

	.gb-element-hd02inner .gb-element-hd09right {
		grid-column: 2;
	}

}

@media (max-width: 768px) {

	.gb-element-hd02inner .gb-element-hd03left {
		grid-template-columns: 1fr;
	}

	.gb-element-hd03left .gs-logo,
	.gb-element-hd06texts .gb-text-hd07since {
		grid-column: 1;
	}

}


/* ============================================================
   ヘッダーの「since 1967」を年表へのリンクにする（2026/11/13 G-47）
   リンクは Site Header の要素で、文字を選んでツールバーから付けた（/profile/#nenpyo）。
   見た目は今のまま（色は周りを受け継ぎ、下線なし）。
   ホバー・フォーカスのときだけ、ほかのリンクと同じ赤 #E64A3B と下線にする。
   ============================================================ */
.gb-text-hd07since a {
	color: inherit;
	text-decoration: none;
}

.gb-text-hd07since a:hover,
.gb-text-hd07since a:focus {
	color: #E64A3B;
	text-decoration: underline;
}