/*
Theme Name: ラビットフット
Theme URI: http://rabbitfoot-mock.local/
Author: ラビットフット
Description: 出版社ラビットフットのサイト用テーマ。白を基調に、全年齢ゾーンは水色、/rabbitfoot-r/ 配下の R18 ゾーンはピンクへ配色だけを切り替えて運用します。書影を主役に据え、商品ページはテンプレート固定、LP はブロックパターンで自由に組む設計です。
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rabbitfoot
Tags: full-site-editing, block-patterns
*/

/* ==========================================================================
   ゾーンごとの配色切り替え

   色の定義そのものは theme.json にあります（全年齢＝白＋水色）。
   ここでは /rabbitfoot-r/ 配下だけを白＋ピンクに上書きしています。
   body に付く is-adult クラスは mu-plugin（rabbitfoot-core/seo.php）が
   判定して付けています。

   CSS変数を親要素で再定義すると、それを使っている全ての箇所が
   まとめて切り替わるため、ピンク用のスタイルを個別に書く必要がありません。

   accent と accent-ink を分けているのは、鮮やかな水色・ピンクは
   白背景の上では文字として読みづらいためです。
     accent      … ボタンや帯などの「面」に使う
     accent-ink  … 白の上に置く「文字」に使う
   ========================================================================== */

body.is-adult {
	--wp--preset--color--surface: #fdf3f8;
	--wp--preset--color--contrast: #1a1a1a;
	--wp--preset--color--muted: #7a6a71;
	--wp--preset--color--border: #f5dce8;
	--wp--preset--color--accent: #ea4f9f;
	--wp--preset--color--accent-ink: #cc3382;
}

/* ==========================================================================
   基本
   ========================================================================== */

body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

img { max-width: 100%; height: auto; }

/* セクション見出し。書影より目立たせないよう、小さく字間を空けたラベルにする。 */
.rf-section-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: .22em;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* ==========================================================================
   ヘッダー・フッター
   ========================================================================== */

.rf-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ロゴ。画像が未登録のあいだは文字組みで表示する。 */
.rf-logo { display: inline-block; line-height: 1; text-decoration: none; }
.rf-logo img { display: block; width: auto; max-height: 2.5rem; }

.rf-logo--text {
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--contrast);
}
.rf-logo--text .rf-logo__mark { color: var(--wp--preset--color--accent-ink); }
.rf-logo--text .rf-logo__note {
	display: block;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--wp--preset--color--muted);
	margin-top: .25rem;
}

.rf-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

/* 全年齢フッターに置く R18 への導線。目立たせない。 */
.rf-footer__adult-link {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.rf-footer__adult-link a { color: inherit; text-decoration: underline; }
.rf-footer__adult-link a:hover { color: var(--wp--preset--color--accent-ink); }

/* ==========================================================================
   作品一覧（書影のグリッド）

   書影に角丸や影は付けません。実際の本にはそれが無く、
   付けると「よくあるカード」に見えてしまうためです。
   細い罫線だけを置き、ホバー時にわずかに浮かせます。
   ========================================================================== */

/* 書影のグリッド。
   WordPress のクエリループが出す入れ物（.wp-block-post-template）と、
   レーベル別セクションが自前で出す入れ物（.rf-work-grid--cards）の
   両方を対象にしている。片方だけだと、もう片方が1列に積まれて
   書影が横幅いっぱいまで伸びてしまう。 */
.rf-work-grid,
.rf-work-grid--cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);

	/* 書影の上端を揃える。伸ばすと作品名の長い方に高さが引っ張られる */
	align-items: start;
}

/*
 * 一覧ページでは、作品が <ul> に包まれて出てくる。
 * display: contents で入れ物を透明にし、作品カードと「準備中」の枠が
 * 同じグリッドに並ぶようにする。
 *
 * こうしないと「準備中」が必ず次の行から始まり、
 * 作品が半端な数のときに行の途中が空いてしまう。
 */
.rf-work-grid > .wp-block-post-template,
.rf-work-grid > .rf-placeholders {
	display: contents;
}

/* ページ送りと「作品がありません」は1行を丸ごと使う */
.rf-work-grid > .wp-block-query-pagination,
.rf-work-grid > .wp-block-query-no-results {
	grid-column: 1 / -1;
}

/*
 * WordPress が「縦に積む配置」として、2つ目以降の子に上余白を付けてくる。
 * グリッドに変えてもその指定は残るため、2列目以降の書影だけが
 * 下にずれてしまう。ここで打ち消す。
 *
 * 間隔は上の gap が持っているので、消しても詰まらない。
 */
.rf-work-grid--cards > *,
.rf-work-grid .wp-block-post-template > *,
.rf-work-grid.wp-block-post-template > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* 1点しか無いときに、書影が引き伸ばされないようにする */
.rf-work-grid--cards { justify-content: start; }
.rf-work-grid--cards .rf-work-card { max-width: 14rem; }

.rf-work-card__cover { margin: 0; }

.rf-work-card__cover img {
	width: 100%;
	aspect-ratio: 1448 / 2048;
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	transition: transform .18s ease, box-shadow .18s ease;
}

.rf-work-card__cover a:hover img {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(22, 32, 43, .14);
}

/* タイトルと作者は詰めて小さく組み、書影との重みの差をはっきりさせる */
.rf-work-card__title {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.45;
	margin: .55rem 0 .1rem;
}
.rf-work-card__title a { color: inherit; text-decoration: none; }
.rf-work-card__title a:hover { color: var(--wp--preset--color--accent-ink); }

.rf-work-card__author {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* ==========================================================================
   注目作品（トップの主役）

   一覧の書影が 9.5rem 前後なのに対し、ここは大きく扱う。
   サイズ差そのものが強弱になる。
   ========================================================================== */

.rf-featured {
	/*
	 * 全幅指定で置いているので、中身の幅はここで抑える。
	 * これが無いと書影が画面の左端に貼り付き、文字が右端まで伸びる。
	 * 幅は WORKS の帯の中身と揃えてある。
	 */
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);

	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.rf-featured__cover { margin: 0; }
.rf-featured__cover img {
	width: 100%;
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 10px 30px rgba(22, 32, 43, .16);
}

.rf-featured__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: .22em;
	color: var(--wp--preset--color--accent-ink);
	margin: 0 0 .8rem;
}

/* 作品名・作者の下に置く販促の一行。ボタンへの引きになる位置。 */
.rf-featured__catch {
	font-size: clamp(1.05rem, 2.4vw, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 .5rem;
}

.rf-featured__title {
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .01em;
	margin: 0 0 .5rem;
}
.rf-featured__title a { color: inherit; text-decoration: none; }
.rf-featured__title a:hover { color: var(--wp--preset--color--accent-ink); }

.rf-featured__author {
	color: var(--wp--preset--color--muted);
	margin: 0 0 .5rem;
}

/*
 * ボタンの上の余白は、ボタン自身に持たせる。
 * 直前に来るのがキャッチコピーだったり作者だったりと変わるので、
 * 前の要素の下余白に頼ると、欄が空のときに詰まってしまう。
 */
.rf-featured__cta {
	display: inline-block;
	margin-top: 1.2rem;
	padding: .85rem 2rem;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
}
.rf-featured__cta:hover { background: var(--wp--preset--color--accent-ink); color: #fff; }

/* バナー画像が指定されている場合は、バナーそのものが主役。
   作品名はバナー内に入っているので、下には導線だけ置く。 */
/*
 * バナーが 1 枚だけのときの固定表示。
 * カルーセルと同じ「決まった形の枠」に収める。枚数が 1 枚から 2 枚に増えた
 * ときに見え方が変わらないよう、比率も収め方も揃えてある。
 */
.rf-featured--banner { display: block; }
.rf-featured--banner .rf-featured__cover {
	max-width: 1600px;
	margin-inline: auto;
	aspect-ratio: var(--rf-banner-ratio, 2.5);
	max-height: 58vh;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}
.rf-featured--banner .rf-featured__cover a { display: block; height: 100%; }
.rf-featured--banner .rf-featured__cover img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	box-shadow: none;
	border: 0;
}
/* バナーの下に注目作品が続くので、続きだと分かる間隔を空ける */
.rf-carousel + .rf-featured,
.rf-featured--banner + .rf-featured {
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * スマホでも書影の横に文字を置く（縦積みにしない）。
 *
 * 縦積みにすると、書影だけで最初の画面が埋まってしまい、
 * 作品名も購入ボタンもスクロールしないと見えない。
 * 広告からの流入はスマホが中心なので、
 * 「何の作品か」と「押す場所」を最初の画面に収める。
 *
 * 幅が狭くなるぶん、文字とボタンも一段小さくしている。
 * ここを縮めないと、作品名が何行にも折り返して読みにくくなる。
 */
@media (max-width: 640px) {
	.rf-featured {
		grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
		gap: 1rem;
		padding-inline: var(--wp--preset--spacing--30);
	}
	/* 列の幅に任せるので、書影自身の上限は外す */
	.rf-featured__cover { max-width: none; }

	.rf-featured__label {
		font-size: .7rem;
		letter-spacing: .16em;
		margin-bottom: .4rem;
	}
	.rf-featured__title { font-size: 1.15rem; line-height: 1.35; }
	.rf-featured__author { font-size: .8rem; }
	.rf-featured__catch { font-size: .95rem; }
	.rf-featured__cta {
		margin-top: .9rem;
		padding: .7rem 1.2rem;
		font-size: .9rem;
	}
}

/* さらに狭い端末では書影をもう少し詰める */
@media (max-width: 380px) {
	.rf-featured { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
	.rf-featured__title { font-size: 1.05rem; }
}

/* ==========================================================================
   商品ページ
   ========================================================================== */

.rf-work-detail__cover { margin: 0; }
.rf-work-detail__cover img {
	width: 100%;
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 8px 24px rgba(22, 32, 43, .12);
}

.rf-catchcopy {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--accent-ink);
	line-height: 1.5;
	margin-block-end: .8rem;
}

/* 書誌情報テーブル */
.rf-book-meta {
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}
.rf-book-meta__row {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: .4rem 1rem;
	padding: .65rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.rf-book-meta__key { color: var(--wp--preset--color--muted); }
.rf-book-meta__val { margin: 0; }

@media (max-width: 480px) {
	.rf-book-meta__row { grid-template-columns: 1fr; gap: .1rem; }
}

/* 購入ストアのボタン列 */
.rf-stores__heading {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 .7rem;
}
.rf-stores { display: grid; gap: .5rem; }
.rf-stores__item {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .95rem 1.2rem;
	background: var(--wp--preset--color--accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	border-radius: 2px;
}
.rf-stores__item:hover { background: var(--wp--preset--color--accent-ink); color: #fff; }
.rf-stores__name { display: flex; align-items: center; gap: .7rem; }
.rf-stores__badge { height: 1.4rem; width: auto; }
.rf-stores__note { font-size: var(--wp--preset--font-size--x-small); font-weight: 400; opacity: .85; }
.rf-stores__empty { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* 試し読み */
/* 試し読みビューア。
   以前は小さなサムネイルを並べていたが、それでは中身が読めず
   試し読みとして機能しなかったので、1ページずつ大きく出す形にした。
   ページ送りは scroll-snap が担当。JavaScript が無くても横スワイプで読める。 */
.rf-trial__viewer {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

.rf-trial__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.rf-trial__track::-webkit-scrollbar { display: none; }

.rf-trial__page {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	justify-content: center;
}
.rf-trial__page img {
	display: block;
	width: auto;
	max-width: 100%;
	/* 1ページが画面に収まる高さに抑える。読むために縦スクロールさせない */
	max-height: 78vh;
	object-fit: contain;
}

/* 矢印。JavaScript が動いたときだけ出す（押しても動かないなら見せない） */
.rf-trial__nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	color: var(--wp--preset--color--contrast);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.rf-trial__viewer.is-ready .rf-trial__nav { display: block; }
.rf-trial__nav:disabled { opacity: .3; cursor: default; }
.rf-trial__nav--prev { left: .6rem; }
.rf-trial__nav--next { right: .6rem; }

.rf-trial__counter {
	margin: .7rem 0 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	letter-spacing: .06em;
}

.rf-trial__more { margin-top: var(--wp--preset--spacing--30); }

/* ==========================================================================
   LP
   ========================================================================== */

body.is-lp .rf-header { border-bottom: none; }

.rf-work-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.rf-work-cards__item { text-decoration: none; color: inherit; display: block; }
.rf-work-cards__item img {
	width: 100%;
	aspect-ratio: 1448 / 2048;
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	transition: transform .18s ease, box-shadow .18s ease;
}
.rf-work-cards__item:hover img {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(22, 32, 43, .14);
}
.rf-work-cards__title {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.45;
	margin: .55rem 0 .1rem;
}
.rf-work-cards__author {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.rf-work-cards__item:hover .rf-work-cards__title { color: var(--wp--preset--color--accent-ink); }

/* ==========================================================================
   お知らせ
   ========================================================================== */

.rf-news__item {
	display: flex;
	gap: 1.2rem;
	align-items: baseline;
	flex-wrap: wrap;
	padding: .85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* 編集画面で編集者に見せる注意書き */
.rf-editor-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-left: 3px solid var(--wp--preset--color--border);
	padding-left: .8rem;
}

/* ==========================================================================
   レーベルごとのセクション

   レーベル1つにつき1本の帯を作り、その中に作品を並べます。
   帯の色はレーベルごとにサイト設定で指定でき、未指定なら
   そのゾーンの色（全年齢＝青緑 / R18＝ピンク）が使われます。

   背景にはハーフトーン（スクリーントーン）の網点を薄く敷いています。
   網点はマンガの技法そのものなので、コミック出版社の背景として
   業種の記号として働きます。

   濃さ・粗さを変えたいときは下の2つを調整してください。
     --rf-tone-size  網点の間隔（詰めると細かく、広げると粗く）
     --rf-tone-ink   網点の濃さ（% を上げると濃くなる）
   ========================================================================== */

:root {
	--rf-tone-size: 9px;
	--rf-tone-ink: 22%;
}

.rf-label-sections__head {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--50) 0;
}

.rf-label-section {
	/* レーベルの色が指定されていなければ、ゾーンの色を使う */
	--rf-label-accent: var(--wp--preset--color--accent);

	/* 帯の地色の濃さ。白基調を崩さない範囲で、レーベルの違いが分かる程度。
	   全レーベルまとめて濃くしたい／薄くしたいときはここ 1 箇所を変える。 */
	--rf-label-tint: 8%;

	padding-block: var(--wp--preset--spacing--50);
	background-image: radial-gradient(
		circle,
		color-mix(in srgb, var(--rf-label-accent) var(--rf-tone-ink), transparent) 1px,
		transparent 1.15px
	);
	background-size: var(--rf-tone-size) var(--rf-tone-size);
}

/* サイト設定で色を入れたレーベルだけ、帯の地色も薄く塗る。
   色を入れていないレーベルは白のままなので、並べたときに差が出る。 */
.rf-label-section--tinted {
	background-color: color-mix(
		in srgb,
		var(--rf-label-accent) var(--rf-label-tint),
		var(--wp--preset--color--base)
	);
}

/* 帯の中身は幅を絞る（帯の背景だけが画面幅いっぱいになる） */
.rf-label-section__head,
.rf-label-section .rf-work-grid {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* ==========================================================================
   トップのレーベル帯は横スクロール

   作品一覧（/works/）は折り返すグリッドのままにする。あちらは「探す」ページで、
   全体を見渡せることに意味があるため。

   一方トップの帯は「新しいものを見せる」場所で、レーベルが増えるほど縦に伸びる。
   スマホでは1レーベルで3行使うこともあり、下の帯まで到達できなくなる。
   そこで1行に固定し、横に流して読ませる。

   矢印は置かない。スマホは指で払えばよく、PC でもトラックパッドとホイールで
   横に流せる。押す場所を増やすより、全部見たい人を「すべて見る」へ送るほうが速い。
   ========================================================================== */

.rf-label-section .rf-work-grid--cards {
	display: flex;
	overflow-x: auto;

	/* 指を離した位置で書影の左端が揃う */
	scroll-snap-type: x proximity;
	scroll-padding-inline-start: var(--wp--preset--spacing--40);

	/* スクロールバーのぶんの高さを確保し、作品名と重ならないようにする */
	padding-bottom: .6rem;
}

.rf-label-section .rf-work-grid--cards .rf-work-card {
	/*
	 * 幅を固定する。画面に 2 枚と少しが入るので、
	 * 「まだ右に続く」ことが見た目で分かる。
	 */
	flex: 0 0 9.5rem;
	max-width: none;
	scroll-snap-align: start;
}

/* スクロールバーは細く控えめに。書影の邪魔をしない */
.rf-label-section .rf-work-grid--cards {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border) transparent;
}
.rf-label-section .rf-work-grid--cards::-webkit-scrollbar { height: 6px; }
.rf-label-section .rf-work-grid--cards::-webkit-scrollbar-track { background: transparent; }
.rf-label-section .rf-work-grid--cards::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--border);
	border-radius: 3px;
}

.rf-label-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* レーベル名。ロゴが無い場合はこちらが出る。
   頭に色付きの短い罫線を添えて、ただの見出しに見えないようにする。 */
.rf-label-section__name {
	position: relative;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .04em;
	margin: 0;
	padding-left: 1.6rem;
}
.rf-label-section__name::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 1.1rem;
	height: 2px;
	background: var(--rf-label-accent);
}

/*
 * レーベルのロゴ。
 *
 * 高さは**レーベルごとにサイト設定で決められる**（--rf-label-logo-height）。
 * ロゴの縦横比がまちまちで、一律の高さにすると
 * 正方形に近いロゴだけが極端に小さく見えるため。
 * 幅は元画像の比率に合わせて自動で決まる。
 *
 * max-width は「設定を大きくしすぎたときに帯の見出しが壊れない」ための
 * 安全弁。通常はここに当たらない。
 */
.rf-label-section__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--rf-label-logo-height, 3.5rem);
	max-width: 16rem;
}

.rf-label-section__more {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.rf-label-section__more:hover { color: var(--wp--preset--color--accent-ink); }

/* ==========================================================================
   お知らせ（ゾーンで出し分けるブロック）
   ========================================================================== */

.rf-news__item {
	display: flex;
	gap: 1.2rem;
	align-items: baseline;
	flex-wrap: wrap;
	padding: .85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.rf-news__date {
	font-family: var(--wp--preset--font-family--display);
	font-size: .85rem;
	letter-spacing: .06em;
	color: var(--wp--preset--color--muted);
	flex: none;
}
.rf-news__title {
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
	text-decoration: none;
}
.rf-news__title:hover { color: var(--wp--preset--color--accent-ink); }

/* ==========================================================================
   トップバナーのスライド

   横並びを scroll-snap で組んでいるので、JavaScript が動かなくても
   横スワイプでバナーを見ることができます。
   矢印・インジケーター・自動送りは JavaScript が足しています。
   ========================================================================== */

.rf-carousel { position: relative; }

/* 中央のバナーを主役にしつつ、左右の隣を少しだけ覗かせる。
   「続きがある」ことが一目で伝わるようにするため。
   覗かせる量は --rf-peek 一箇所で調整できます（0 にすると1枚ずつの表示）。 */
.rf-carousel {
	--rf-peek: 9%;

	/*
	 * バナー枠の縦横比。ここ 1 箇所で全スライドの高さが決まる。
	 *
	 * 比率を固定しているのは、ストアのセールバナーなど
	 * 「サイズがまちまちな既製バナー」をそのまま流用できるようにするため。
	 * 枠は常に同じ形なので、何枚並べても高さが揃う。
	 */
	--rf-banner-ratio: 2.5;

	/*
	 * 画面が広いときの上限。
	 * これ以上に広げるとバナーが引き伸ばされてぼやけ、
	 * 高さも画面を占有してしまう。
	 * 通常のノートPC幅までは端から端まで表示される。
	 */
	max-width: 1600px;
	margin-inline: auto;
}

.rf-carousel__viewport {
	display: flex;
	/* 既定の stretch だとスライドが引き伸ばされ、枠の比率が効かなくなる */
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-inline: var(--rf-peek);
}
.rf-carousel__viewport::-webkit-scrollbar { display: none; }

/*
 * スライドは「決まった形の枠」。バナーの実寸に関係なく、常にこの形になる。
 * 余った部分は背景色で埋まるので、比率の違うバナーを混ぜても高さが揃う。
 */
.rf-carousel__slide {
	flex: 0 0 calc(100% - var(--rf-peek) * 2);
	scroll-snap-align: center;
	aspect-ratio: var(--rf-banner-ratio);
	/* 縦に伸びて画面を占有しないよう、高さにも上限を置く */
	max-height: 58vh;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

/* 中央以外は少し落として、どれが主役か分かるようにする */
.rf-carousel__slide img { transition: opacity .25s ease; }
.rf-carousel.is-ready .rf-carousel__slide:not(.is-current) img { opacity: .55; }

/*
 * contain＝枠に収める。はみ出す部分を切り取らない。
 * セールバナーは端に文言が入っていることがあり、cover にすると
 * 「50%OFF」のような一番大事な部分が欠ける事故が起きるため。
 *
 * バナーの比率を揃えて運用できるようになったら、ここを cover に変えると
 * 余白なしで枠いっぱいに出る（切り取りは発生する）。
 */
.rf-carousel__slide img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* 矢印。JavaScript が動いたときだけ出す（動かないなら押せても意味がないため） */
.rf-carousel__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem; height: 2.75rem;
	border: 1px solid var(--wp--preset--color--border);
	background: rgba(255, 255, 255, .92);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.rf-carousel.is-ready .rf-carousel__arrow { display: block; }
.rf-carousel__arrow:hover {
	background: #fff;
	color: var(--wp--preset--color--accent-ink);
	border-color: var(--wp--preset--color--accent);
}
.rf-carousel__arrow--prev { left: .6rem; }
.rf-carousel__arrow--next { right: .6rem; }

/* インジケーター */
.rf-carousel__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1rem;
}
.rf-carousel__dot {
	width: .5rem; height: .5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--border);
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.rf-carousel__dot:hover { background: var(--wp--preset--color--muted); }
.rf-carousel__dot.is-active {
	background: var(--wp--preset--color--accent);
	transform: scale(1.35);
}

@media (max-width: 600px) {
	.rf-carousel { --rf-peek: 5%; }
	.rf-carousel__arrow { width: 2.25rem; height: 2.25rem; }
}

/* フッター最下部の運営情報 */
.rf-footer__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.rf-footer__meta a { color: inherit; text-decoration: none; }
.rf-footer__meta a:hover { color: var(--wp--preset--color--accent-ink); text-decoration: underline; }
.rf-footer__sep { margin-inline: .6rem; opacity: .5; }

/* フッターの SNS リンク */
.rf-footer__sns {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}
.rf-footer__sns:hover {
	color: var(--wp--preset--color--accent-ink);
	border-color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   共通のボタン

   theme.json のボタン色をそのまま使う。自作ブロックで「押させたい場所」は
   すべてこれを使い、見た目を1箇所に集める。
   ========================================================================== */

.rf-button {
	display: inline-block;
	padding: .85rem 1.8rem;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
}
.rf-button:hover { background: var(--wp--preset--color--accent-ink); color: #fff; }

/* ==========================================================================
   新着情報の本文

   入力欄から組み立てるので、記事ごとに体裁がばらつかない。
   ========================================================================== */

.rf-news-body { margin-top: var(--wp--preset--spacing--40); }
.rf-news-body > p:first-child { margin-top: 0; }

.rf-news-body__image { margin: var(--wp--preset--spacing--50) 0 0; }
.rf-news-body__image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border);
}

.rf-news-body__link { margin-top: var(--wp--preset--spacing--50); }

/* ==========================================================================
   共通のボタン

   theme.json のボタン色をそのまま使う。自作ブロックで「押させたい場所」は
   すべてこれを使い、見た目を1箇所に集める。
   ========================================================================== */

.rf-button {
	display: inline-block;
	padding: .85rem 1.8rem;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
}
.rf-button:hover { background: var(--wp--preset--color--accent-ink); color: #fff; }

/* ==========================================================================
   新着情報の本文

   入力欄から組み立てるので、記事ごとに体裁がばらつかない。
   ========================================================================== */

.rf-news-body { margin-top: var(--wp--preset--spacing--40); }
.rf-news-body > p:first-child { margin-top: 0; }

.rf-news-body__image { margin: var(--wp--preset--spacing--50) 0 0; }
.rf-news-body__image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border);
}

.rf-news-body__link { margin-top: var(--wp--preset--spacing--50); }

/* ==========================================================================
   LP の見出し（作品）

   参照した他社 LP と同じく、縦に積むだけの簡素な構成。
   広告から来た人が上から下へ読めれば足りるので、凝ったレイアウトはしない。
   ========================================================================== */

.rf-lp-hero {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.rf-lp-hero__inner {
	max-width: 46rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* 書影は商品そのもの。角丸も影も付けない（サイト全体の方針） */
.rf-lp-hero__cover img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border);
}

.rf-lp-hero__catch {
	margin: 0 0 .6rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-ink);
}

.rf-lp-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.35;
}

.rf-lp-hero__author {
	margin: .6rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.rf-lp-hero__note {
	margin: 1.2rem 0 0;
	display: inline-block;
	padding: .4rem .9rem;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

/* スマホでは書影を上に、文字を下に積む */
@media (max-width: 600px) {
	.rf-lp-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
		justify-items: center;
		text-align: center;
	}
	.rf-lp-hero__cover { max-width: 12rem; }
}

/* ==========================================================================
   告知バナー（クリエイター募集・キャンペーンなど）

   トップバナーと違って枠にはめない。縦に積むだけなので高さが揃う必要がなく、
   支給された画像をそのままの形で出せる（切り取りも余白も発生しない）。
   ========================================================================== */

.rf-promos {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--60);
}

.rf-promos__item img {
	display: block;
	width: 100%;
	height: auto;
	/* 書影と同じ扱い。角丸も影も付けない */
	border: 1px solid var(--wp--preset--color--border);
}

.rf-promos__item a { display: block; }
.rf-promos__item a:hover img { opacity: .88; }

/* ==========================================================================
   LP

   広告からの受け皿。参照した他社 LP と同じく、縦に積むだけの構成にしている。
   読ませる要素を足さないこと。見出しやあらすじを入れると、
   「上から下へ流して買う」という LP の役目から外れる。
   ========================================================================== */

.rf-lp {
	/* 広告の流入はスマホが中心。PC でも1カラムのまま、幅だけ抑える */
	max-width: 40rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);

	/* ヘッダーを外したぶん、画面の最上端に書影が貼り付かないよう余白を置く。
	   余白トークンは画面幅で伸縮するので、狭い画面では自動的に詰まる */
	padding-block-start: var(--wp--preset--spacing--50);

	/* 追従ボタンの目印を置く基準にする */
	position: relative;
}

/*
 * 追従ボタンを出し始める位置の目印。
 * ここが画面に入ったらボタンを出す（view.js）。
 * 高さではなく割合で置いているので、LP の長さが変わっても付いてくる。
 */
.rf-lp__sentinel {
	position: absolute;
	left: 0;
	top: 66.6%;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* フロートボタンを消す位置の目印。下の購入ボタンの直前に流し込む */
.rf-lp__sentinel--end {
	height: 0;
	pointer-events: none;
}

.rf-lp__hero img,
.rf-lp__images img {
	display: block;
	width: 100%;
	height: auto;
}

/* 既定は隙間なく積む（1枚の長い紙のように見せるため）。
   間隔は LP ごとに作成画面から変えられる */
.rf-lp__images img + img { margin-top: var(--rf-lp-image-gap, 0); }
.rf-lp__images { margin-block: var(--wp--preset--spacing--50); }

.rf-lp__cta {
	display: grid;
	gap: .6rem;
	margin-block: var(--wp--preset--spacing--50);
}

/*
 * 色・文字色・大きさは LP ごとに作成画面から変えられる。
 * 未指定なら、これまでどおりサイトの色と標準の大きさ。
 *
 * 余白を em で持たせているので、大きさを変えると余白も一緒に動く。
 * 上下の購入ボタンと追従ボタンの3箇所に、同じ変数が効く。
 */
.rf-lp__button {
	display: block;
	text-align: center;
	font-size: var(--rf-lp-btn-size, var(--wp--preset--font-size--large));
	padding: .9em 1.2em;
	background: var(--rf-lp-btn-bg, var(--wp--preset--color--accent));
	color: var(--rf-lp-btn-color, #fff);
}

/* 色を指定されても破綻しないよう、暗くするだけにする */
.rf-lp__button:hover {
	background: var(--rf-lp-btn-bg, var(--wp--preset--color--accent));
	color: var(--rf-lp-btn-color, #fff);
	filter: brightness(.92);
}
.rf-lp__store {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	opacity: .9;
	margin-top: .2rem;
}

.rf-lp__note {
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-ink);
	font-weight: 700;
}

/*
 * 画面に浮かせる購入ボタン。
 *
 * 以前は画面幅いっぱいの帯にしていたが、フッターと地続きに見えて
 * 「ページの一部」と受け取られるため、浮いたボタン1つに変えた。
 *
 * 出るのはページの下 1/3 に入ってから（view.js が is-visible を付ける）。
 * 最初から出しっぱなしだと、まだ中身を見ていない人の画面を塞ぐため。
 */
.rf-lp__sticky {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 20;
	width: calc(100% - 2rem);
	max-width: 24rem;

	/* 出る前。visibility も落として、隠れている間は押せないようにする */
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, .75rem);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.rf-lp__sticky.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.rf-lp__sticky .rf-lp__button {
	/*
	 * 大きさは本文のボタンとは別に持つ。
	 * 未指定のときだけ、これまでどおり標準の 0.85 倍にする。
	 */
	font-size: var(--rf-lp-sticky-size, calc(var(--wp--preset--font-size--large) * .85));
	box-shadow: 0 6px 22px rgba(22, 32, 43, .28);
}

/* 動きを減らす設定の端末では、ふわっと動かさず切り替えるだけにする */
@media (prefers-reduced-motion: reduce) {
	.rf-lp__sticky { transition: none; transform: translate(-50%, 0); }
}

/* 浮かせたボタンがフッターの文字に重ならないようにする */
body.is-lp .rf-lp-footer { padding-bottom: 5rem; }

.rf-lp-footer { border-top: 1px solid var(--wp--preset--color--border); }

/* 画面には出さないが、読み上げと検索エンジンには届く。
   display:none だと読み上げからも消えるので、位置で隠している。 */
.rf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   画像の持ち出しをしにくくする

   ドラッグでの持ち出しを止める。右クリックの抑止は
   assets/protect-images.js が担当。
   **どちらも気休め**で、開発者ツールやスクリーンショットは防げない。
   ========================================================================== */

main img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* ==========================================================================
   準備中の枠

   作品がまだ少ないあいだ、一覧が寂しく見えないように並べる。
   実在しない作品なので、リンクは張らず、書影とは見た目をはっきり変える。
   ========================================================================== */

.rf-placeholder__cover {
	aspect-ratio: 400 / 566;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border);
}

.rf-placeholder__text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	letter-spacing: .08em;
}

/* ==========================================================================
   レーベルのタブ（作品一覧）

   普通のリンクの列。押すと /works/?rf_label=◯◯ に移る。
   並び順・ロゴ・説明はすべてサイト設定で決まるので、
   レーベルが増えてもここを触る必要はない。
   ========================================================================== */

.rf-label-tabs { margin-block: var(--wp--preset--spacing--40); }

.rf-label-tabs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.rf-label-tabs__item {
	display: inline-flex;
	align-items: center;
	padding: .55rem 0;

	/* 一覧の下線と重ねて、選択中の印を境目に置く */
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;

	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
}

.rf-label-tabs__item:hover { color: var(--wp--preset--color--accent-ink); }

.rf-label-tabs__item.is-active {
	color: var(--wp--preset--color--accent-ink);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* ロゴの高さはレーベルごとの指定に従うが、タブでは上限を設ける。
   帯の見出しと同じ大きさで並べると、タブの列として成立しないため */
.rf-label-tabs__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: min(var(--rf-label-logo-height, 2rem), 2.4rem);
	max-width: 10rem;
}

/* 既定はそのまま出し、カーソルを合わせたときだけ薄くする。
   「選んでいないから薄い」より「触れているから反応した」のほうが直感的なため */
.rf-label-tabs__item:hover .rf-label-tabs__logo { opacity: .6; }

.rf-label-tabs__desc {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.8;
}

/* 狭い画面では折り返さず、横に流す。
   折り返すとタブが2〜3行になって、一覧が下へ押し出されるため */
@media (max-width: 640px) {
	.rf-label-tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 1.1rem;
	}
	.rf-label-tabs__item { flex: 0 0 auto; }
}

/* ==========================================================================
   背景色を濃くした LP

   背景色は LP ごとに作成画面から指定できる。濃い色を選ばれると
   文字が読めなくなるので、色の変数ごと明るい側へ差し替える。

   個別の要素ではなく変数を差し替えているのは、WordPress が付ける
   配色クラス（has-muted-color など）も同じ変数を見ているため。
   ========================================================================== */

body.is-lp-dark {
	--wp--preset--color--contrast: #fff;
	--wp--preset--color--muted: rgba(255, 255, 255, .72);
	--wp--preset--color--border: rgba(255, 255, 255, .22);
	--wp--preset--color--surface: rgba(255, 255, 255, .08);

	color: #fff;
}

/* 補足とフッターのリンクは、アクセント色のままだと沈むので白に寄せる */
body.is-lp-dark .rf-lp__note { color: #fff; }
body.is-lp-dark .rf-lp-footer a { color: rgba(255, 255, 255, .82); }
body.is-lp-dark .rf-lp-footer a:hover { color: #fff; }