/*
Theme Name: GeneratePress Child
Theme URI: https://oripa.lo/
Description: オリパ比較サイト用の子テーマ
Author: oripa.lo
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/* ------------------------------------------------------------
   フッターの位置

   内容が少ないページでフッターが画面の途中に来てしまうため、
   画面の高さに満たない場合は下端へ寄せる
------------------------------------------------------------ */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* flex の子は幅が内容基準（max-content）で決まるため、
   コンテナ幅（1200px）がそのまま採用されて画面からはみ出してしまう。
   親いっぱいに広げ直すことで、狭い画面では画面幅に収まる。
   max-width はテーマの指定を残すので、PCでの最大幅は変わらない */
body > * {
	min-width: 0;
	width: 100%;
}

/* テーマがインラインCSSで #page に幅を指定しているため、詳細度を上げる */
body > #page {
	width: 100%;
}

/* ------------------------------------------------------------
   意味のない横スクロールを止める

   画面いっぱいに広げる帯（ヒーロー・検索パネル・詳細のメイン画像）は
   width: 100vw で外側へはみ出させている。
   100vw は縦スクロールバーの幅を含むため、バーが出ている環境では
   その幅ぶん（Windowsでは15px前後）だけ横にはみ出してしまう。

   はみ出しているのは帯の背景だけで、読むものは何も無い
------------------------------------------------------------ */

body {
	overflow-x: hidden;
}

/* 上の余白を自動で伸ばし、フッターを押し下げる */
.site-footer {
	margin-top: auto;
}

/* ------------------------------------------------------------
   ネオンの枠線（トップページの「ジャンルから探す」「ランキング」）

   円錐グラデーションを回転させて枠にし、同じものをぼかして背後に敷くことで
   発光しているように見せる。角度をアニメーションさせるため、
   カスタムプロパティを角度型として登録している

   目を引かせたい導線だけに使い、他のカードは通常の枠線のままにしている
------------------------------------------------------------ */

@property --oripa-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

/* 枠に使う色。1周ぶんを指定する */
.home {
	--oripa-neon: #ff007f, #ff5500, #ffaa00, #00d4ff, #7b2ff7, #ff007f;
}

/* 疑似要素の位置の基準にする。
   ここで z-index を指定すると重なりの文脈ができてしまい、
   背面に置いたはずの枠がカードの背景より前に描かれるため、指定しない */
.home .ranking__column,
.home .genre-nav > li {
	position: relative;
}

/* 枠そのもの（前面）と、ぼかした発光（背面）を重ねる */
.home .ranking__column::before,
.home .ranking__column::after,
.home .genre-nav > li::before,
.home .genre-nav > li::after {
	content: '';
	position: absolute;
	inset: -4px;
	z-index: -1;
	border-radius: 12px;
	background: conic-gradient(from var(--oripa-angle), var(--oripa-neon));
	animation: oripa-neon-rotate 5s linear infinite;

	/* 中央をくり抜いて枠だけを残す。
	   表示アニメーション中は opacity や transform によって重なりの文脈が生まれ、
	   背面に置いたはずの枠がカードの前に出てしまうため、
	   重なり順に頼らず形そのものを枠にしている */
	padding: 4px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}

/* 背面のぼかし。輪郭の外へにじませて発光に見せる。
   こちらはくり抜かず、面のままぼかす */
.home .ranking__column::after,
.home .genre-nav > li::after {
	z-index: -2;
	padding: 0;
	filter: blur(9px);
	opacity: 0.45;
	-webkit-mask: none;
	mask: none;
}

/* 表示アニメーションの最中は、面のままの発光が前に出てしまう。
   動き終えて印（reveal）が外れるまでは隠し、枠だけを見せる */
.home .reveal::after {
	opacity: 0;
}

@keyframes oripa-neon-rotate {

	to {
		--oripa-angle: 360deg;
	}
}

/* 枠が輪郭の役目を果たすため、元の線は消す */
.home .ranking__column {
	border-color: transparent;
}

/* 発光がぶつからないよう、カードの間隔を少し広げる */
.home .genre-nav,
.home .ranking {
	gap: 20px;
}

/* 動きを抑える設定では回転を止める（枠と発光はそのまま残す） */
@media (prefers-reduced-motion: reduce) {

	.home .ranking__column::before,
	.home .ranking__column::after,
	.home .genre-nav > li::before,
	.home .genre-nav > li::after {
		animation: none;
	}
}

/* ------------------------------------------------------------
   表示アニメーション

   画面に入った要素を下から浮かび上がらせる。
   初期状態のクラスはJavaScriptが付与するため、動かない環境では
   この指定自体が当たらず、通常どおり表示される
------------------------------------------------------------ */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* 動きを抑える設定では即座に表示する */
@media (prefers-reduced-motion: reduce) {

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------
   ヘッダー下の余白
------------------------------------------------------------ */

/* 親テーマの 20px では窮屈なため、少し広げる */
#main {
	margin-top: 32px;
}

@media (max-width: 768px) {

	#main {
		margin-top: 5vw;
	}

	/* オリパ詳細はメインビジュアルをヘッダー直下に密着させる */
	.single-oripa #main {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------
   トップページ
------------------------------------------------------------ */

/* ヒーロー */
.hero {
	position: relative;
	margin-bottom: 40px;
	padding: 48px 32px;
	border-radius: 12px;
	background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5a 100%);
	color: #fff;
	overflow: hidden;
}

/* ------------------------------------------------------------
   ヘッダーと帯の一体化

   ヘッダーを透過させ、その下の帯（トップのヒーロー / オリパ一覧の検索パネル）に
   重ねて1つの塊として見せる
------------------------------------------------------------ */

.home .site-header,
.post-type-archive-oripa .site-header {
	position: absolute;
	z-index: 10;
	width: 100%;
	background: transparent;
	border-bottom: none;
}

/* ヘッダー上の文字・リンクは背景が暗いため白にする。
   親テーマ側の配色より優先させる必要があるため、詳細度を上げている */
.home .site-header .main-title a,
.home .site-header .site-description,
.home .main-navigation .main-nav ul li a,
.home .main-navigation .menu-toggle,
.post-type-archive-oripa .site-header .main-title a,
.post-type-archive-oripa .site-header .site-description,
.post-type-archive-oripa .main-navigation .main-nav ul li a,
.post-type-archive-oripa .main-navigation .menu-toggle {
	color: #fff;
}

.home .main-navigation .main-nav ul li a:hover,
.home .main-navigation .main-nav ul li.current-menu-item > a,
.post-type-archive-oripa .main-navigation .main-nav ul li a:hover,
.post-type-archive-oripa .main-navigation .main-nav ul li.current-menu-item > a {
	color: #f0a020;
	background: transparent;
}

.home .main-navigation,
.home .main-navigation ul,
.post-type-archive-oripa .main-navigation,
.post-type-archive-oripa .main-navigation ul {
	background: transparent;
}

/* ヒーローを画面幅いっぱいに広げ、ヘッダーの背後まで届かせる */
.home .hero {
	/* コンテナの左右余白を打ち消して全幅にする */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	border-radius: 0;
	/* ヘッダーの高さ分だけ内側に余白を取り、内容が隠れないようにする */
	padding-top: 184px;
	padding-bottom: 56px;
}

/* ヒーロー内の文字はコンテンツ幅に揃える */
.home .hero__body {
	margin: 0 auto;
	padding: 0 40px;
	max-width: 1200px;
}

/* オリパ一覧では検索パネルが同じ役目を果たすため、
   ヒーローと同じ扱いで全幅の帯にする */
.post-type-archive-oripa .oripa-filter {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 24px;
	width: 100vw;
	padding: 176px 0 26px;
	border: none;
	border-radius: 0;
	background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5a 100%);
	overflow: hidden;
}

/* ヒーローと同じく、カルーセルの上に暗い膜を重ねて可読性を確保する */
.post-type-archive-oripa .oripa-filter::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 40, 0.82) 0%, rgba(20, 20, 40, 0.62) 55%, rgba(20, 20, 40, 0.78) 100%);
	pointer-events: none;
}

/* 帯の中身はコンテンツ幅に揃え、背景より前面に置く */
.post-type-archive-oripa .oripa-filter__row,
.post-type-archive-oripa .oripa-filter__reset {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

.post-type-archive-oripa .oripa-filter__reset {
	display: block;
	color: rgba(255, 255, 255, 0.7);
}

.post-type-archive-oripa .oripa-filter__reset:hover {
	color: #fff;
}

/* コンテンツ側の上余白を詰めて、ヘッダーとの間に隙間を作らない
   （親テーマが #main に margin-top: 20px を持っているため打ち消す） */
.home .site-content,
.home #primary,
.post-type-archive-oripa .site-content,
.post-type-archive-oripa #primary {
	padding-top: 0;
	margin-top: 0;
}

.home #main,
.post-type-archive-oripa #main {
	margin-top: 0;
}

@media (max-width: 768px) {

	.home .hero {
		/* ロゴが 18vw のため、その分を足して重なりを避ける */
		padding-top: calc(110px + 9vw);
	}

	.home .hero__body {
		padding: 0;
	}

	.post-type-archive-oripa .oripa-filter {
		padding: calc(106px + 9vw) 0 5vw;
		margin-bottom: 4vw;
	}

	.post-type-archive-oripa .oripa-filter__row,
	.post-type-archive-oripa .oripa-filter__reset {
		padding-left: 4vw;
		padding-right: 4vw;
	}

	/* スマートフォンではコンテンツが画面端に接するため、左右に余白を設ける。
	   ヒーローは calc(50% - 50vw) で外側へ広げているため、
	   この余白がそのまま打ち消され、全幅表示は維持される */
	#main {
		padding-left: 2vw;
		padding-right: 2vw;
	}
}

/* ------------------------------------------------------------
   トップページ：メニューを開いたとき

   ヘッダーを重ねたままだとメニュー項目がヒーローの文字と重なって
   読めないため、開いている間だけ通常の位置に戻してヒーローを押し下げる
------------------------------------------------------------ */

.home:has(.main-navigation.toggled) .site-header,
.post-type-archive-oripa:has(.main-navigation.toggled) .site-header {
	position: relative;
	background: #1a1a2e;
}

/* ヘッダーが通常フローに戻るため、重なり用の余白は不要になる */
.home:has(.main-navigation.toggled) .hero {
	padding-top: 32px;
}

.post-type-archive-oripa:has(.main-navigation.toggled) .oripa-filter {
	padding-top: 24px;
}

/* :has() に未対応のブラウザでも、メニュー自体は読めるようにする */
.home .main-navigation.toggled .main-nav ul,
.post-type-archive-oripa .main-navigation.toggled .main-nav ul {
	background: #1a1a2e;
}

/* 実際のオリパ画像を横に流すカルーセル（CSSのみで動作させる） */
.hero__carousel {
	position: absolute;
	inset: 0;
	opacity: 0.8;
	overflow: hidden;
}

.hero__track {
	display: flex;
	height: 100%;
	width: max-content;
	/* 同じ並びを2回出力しているため、半分進んだ時点で先頭に戻すと途切れない */
	animation: hero-scroll 60s linear infinite;
}

.hero__track img {
	width: 280px;
	height: 100%;
	object-fit: cover;
	flex-shrink: 0;
}

@keyframes hero-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 動きを抑える設定の環境では停止させる */
@media (prefers-reduced-motion: reduce) {

	.hero__track {
		animation: none;
	}
}

/* 左隣の掲載数と同じ見せ方に揃える */
.hero__today {
	font-style: normal;
}

/* カルーセルの上に暗い膜を重ね、文字とナビの可読性を確保する。
   画像の明るさに左右されずコントラストを保てる */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 40, 0.82) 0%, rgba(20, 20, 40, 0.62) 55%, rgba(20, 20, 40, 0.78) 100%);
	pointer-events: none;
}

.hero__body {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.hero__title {
	margin: 0 0 12px;
	font-size: 2em;
	line-height: 1.3;
	color: #fff;
}

.hero__lead {
	margin: 0 0 24px;
	font-size: 0.95em;
	line-height: 1.7;
	opacity: 0.9;
}

/* 検索パネルはオリパ一覧と共通のものを置く。
   ヒーローが既に帯と背景を持っているため、下地と枠だけ外して馴染ませる */
.home .hero .oripa-filter {
	margin-bottom: 16px;
	padding: 0;
	border: none;
	background: transparent;
}

.hero__stats {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.85;
}

.hero__stats strong {
	font-size: 1.3em;
	color: #f0a020;
}

.hero__stats span {
	margin: 0 8px;
	opacity: 0.5;
}

/* セクション共通 */
.front-section {
	margin-bottom: 48px;
}

.front-section__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px;
}

.front-section__title {
	/* 見出しだけを置くセクション（ジャンル等）でも余白が付くようにする */
	margin: 0 0 16px;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.3;
}

/* 「すべて見る」と横並びにする場合は、親側で余白を持つ */
.front-section__head .front-section__title {
	margin-bottom: 0;
}

.front-section__more {
	font-size: 0.85em;
	white-space: nowrap;
}

/* ジャンル導線 */
.genre-nav,
.shop-nav {
	display: grid;
	/* 画面幅が狭い場合は自動で折り返す */
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* PCでは1行4個に固定する（自動配置だと1つ1つが小さくなるため） */
@media (min-width: 769px) {

	.genre-nav,
	.shop-nav {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 枠の高さを行ごとにそろえる。
   グリッドが高さを合わせるのは li までで、中のリンクは内容ぶんの
   高さしか持たない。店名が折り返した隣だけ枠が低く見えてしまう */
.genre-nav > li,
.shop-nav > li,
.prize-nav > li {
	display: flex;
}

.genre-nav__item,
.shop-nav__item,
.prize-nav__item {
	flex: 1;
	min-width: 0;
}

.genre-nav__item,
.shop-nav__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

/* ジャンルは代表画像を添える */
.genre-nav__item {
	position: relative;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.genre-nav__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.genre-nav__item:hover .genre-nav__image {
	transform: scale(1.06);
}

.genre-nav__body {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	margin-top: auto;
	padding: 20px 14px 12px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	color: #fff;
}

.genre-nav__item .genre-nav__count {
	color: rgba(255, 255, 255, 0.8);
}

/* 賞品から探す */
.prize-nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 769px) {

	.prize-nav {
		grid-template-columns: repeat(4, 1fr);
	}
}

.prize-nav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 10px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.prize-nav__item:hover {
	border-color: #f0a020;
}

.prize-nav__thumb {
	flex-shrink: 0;
	/* カード画像を見せたいので、他の導線より大きめに取る */
	width: 99px;
	height: 135px;
	border-radius: 4px;
	background: #f5f5f5;
	overflow: hidden;
}

.prize-nav__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prize-nav__thumb.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 6px, #eee 6px, #eee 12px);
}

.prize-nav__noimage {
	color: #bbb;
	font-size: 7px;
	letter-spacing: 0.05em;
	text-align: center;
}

.prize-nav__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.prize-nav__name {
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.4;
	/* 賞品名は長くなるため3行で省略する */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.prize-nav__count {
	color: #888;
	font-size: 0.75em;
}

/* スマートフォンでは、サムネイルの下にテキストを置く */
@media (max-width: 768px) {

	.prize-nav__item {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		text-align: center;
	}

	.prize-nav__body {
		align-items: center;
		width: 100%;
	}
}

/* ランキング */
.ranking {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.ranking__column {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

.ranking__title {
	margin: 0 0 12px;
	font-size: 1em;
}

.ranking__list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.ranking__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.ranking__item:last-child {
	border-bottom: none;
}

.ranking__rank {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #eee;
	color: #666;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 22px;
	text-align: center;
}

.ranking__item:nth-child(1) .ranking__rank { background: #f0a020; color: #fff; }
.ranking__item:nth-child(2) .ranking__rank { background: #b0b0b0; color: #fff; }
.ranking__item:nth-child(3) .ranking__rank { background: #c08040; color: #fff; }

.ranking__image {
	flex-shrink: 0;
	width: 144px;
	height: 102px;
	border-radius: 4px;
	object-fit: cover;
}

/* 画像が未取得の場合のプレースホルダ */
.ranking__image.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 8px, #eee 8px, #eee 16px);
	color: #bbb;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-align: center;
}

.ranking__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ranking__name {
	font-size: 0.85em;
	line-height: 1.4;
	text-decoration: none;
	/* 2行を超えたら省略する */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ranking__meta {
	color: #888;
	font-size: 0.75em;
}

.ranking__more {
	margin-top: auto;
	font-size: 0.8em;
	text-align: right;
}

.ranking__empty {
	margin: 0;
	color: #999;
	font-size: 0.85em;
}

.genre-nav__item:hover,
.shop-nav__item:hover {
	border-color: #f0a020;
}

.genre-nav__name,
.shop-nav__name {
	font-weight: bold;
	font-size: 0.95em;
}

.genre-nav__count,
.shop-nav__count {
	color: #888;
	font-size: 0.8em;
	white-space: nowrap;
}

@media (max-width: 768px) {

	.hero {
		padding: 32px 20px;
	}

	.hero__title {
		font-size: 1.5em;
	}

	.hero__gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------------------------------------
   店舗一覧
------------------------------------------------------------ */

/* ジャンル絞り込み */
.shop-filter {
	margin-bottom: 24px;
}

.shop-filter__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9em;
	font-weight: bold;
}

.shop-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-filter__link {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #ccc;
	border-radius: 999px;
	font-size: 0.85em;
	text-decoration: none;
	line-height: 1.4;
}

.shop-filter__link:hover {
	border-color: #888;
}

.shop-filter__link.is-current {
	border-color: transparent;
	background: #333;
	color: #fff;
}

/* 店舗カード一覧 */
.shop-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

.shop-card__title {
	margin: 0 0 12px;
	font-size: 1.15em;
	line-height: 1.4;
}

.shop-card__title a {
	text-decoration: none;
}

.shop-card__genres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.shop-card__genre {
	padding: 2px 10px;
	border-radius: 4px;
	background: #f0f0f0;
	font-size: 0.75em;
}

.shop-card__meta {
	margin-top: auto;
	color: #666;
	font-size: 0.85em;
}

.shop-card__count {
	font-weight: bold;
	color: #333;
}

/* ------------------------------------------------------------
   オリパ一覧
------------------------------------------------------------ */

/* 絞り込みフォーム */
/* 画面の上部を占領しないよう、入力欄と検索ボタンを1行にまとめる */
.oripa-filter {
	margin-bottom: 16px;
	padding: 12px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fafafa;
}

.oripa-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* 入力欄は余った幅を分け合い、選択欄は内容に合わせる */
.oripa-filter__input {
	flex: 1 1 200px;
	min-width: 0;
}

.oripa-filter__select {
	flex: 0 1 auto;
}

/* 角の丸みはトップページのヒーロー内検索欄に揃える。
   親テーマが input[type="text"] に border-radius: 0 を当てているため、
   クラスだけでは詳細度が足りない。要素名を添えて上回らせる */
input.oripa-filter__input,
select.oripa-filter__select {
	height: 40px;
	padding: 0 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	font-size: 0.9em;
}

.oripa-filter__input::placeholder {
	color: #999;
}

/* ヘッダーのログインボタンと同じ見え方に揃える */
.oripa-filter__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 22px;
	border: none;
	border-radius: 6px;
	background: #f0a020;
	color: #fff;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
}

.oripa-filter__submit:hover {
	background: #f0a020;
	color: #fff;
	opacity: 0.85;
}

.oripa-filter__icon svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.oripa-filter__reset {
	display: inline-block;
	margin-top: 8px;
	color: #888;
	font-size: 0.8em;
}

/* 見出しと件数を横に並べ、1行分の高さに収める */
.post-type-archive-oripa .page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	/* 背景を敷かず、下のカードと左端を揃える（親テーマの白背景を打ち消す） */
	padding: 4px 0 8px;
	background: none;
}

.post-type-archive-oripa .page-title {
	margin: 0;
	font-size: 1.6em;
	font-weight: 700;
}

.oripa-result-count {
	margin: 0;
	font-size: 0.9em;
	color: #666;
}

/* いま適用されている並び順。見出しと件数から離し、右端へ寄せる */
.oripa-current-sort {
	margin-left: auto;
	font-size: 0.8em;
	color: #888;
}

/* カード一覧 */
.oripa-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oripa-card {
	/* お気に入りボタンを画像の上に重ねるため */
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

/* カードのメインビジュアル */
.oripa-card__image {
	position: relative;
	display: block;
	/* 取得元の画像は概ね横長のため、比率を固定して並びを揃える */
	aspect-ratio: 7 / 5;
	margin: -16px -16px 12px;
	border-radius: 8px 8px 0 0;
	background: #f5f5f5;
	overflow: hidden;
}

.oripa-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.oripa-card__image:hover img {
	transform: scale(1.03);
}

/* 画像が未取得のカード */
.oripa-card__image.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #eee 10px, #eee 20px);
}

.oripa-card__noimage {
	color: #bbb;
	font-size: 0.8em;
	letter-spacing: 0.1em;
}

/* 消化率が高いオリパに付けるバッジ */
.oripa-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 4px;
	background: #e03131;
	color: #fff;
	font-size: 0.7em;
	font-weight: bold;
}

.oripa-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 0.75em;
}

.oripa-card__genre {
	padding: 2px 8px;
	border-radius: 4px;
	background: #f0f0f0;
}

.oripa-card__shop {
	color: #666;
	text-decoration: none;
}

.oripa-card__title {
	margin: 0 0 12px;
	font-size: 1em;
	line-height: 1.5;
}

.oripa-card__title a {
	text-decoration: none;
}

.oripa-card__data {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
	font-size: 0.9em;
}

.oripa-card__price {
	font-weight: bold;
}

.oripa-card__price small {
	font-weight: normal;
	color: #888;
}

.oripa-card__stock {
	color: #666;
	font-size: 0.9em;
}

/* 消化率バー */
.oripa-card__bar {
	height: 6px;
	margin-bottom: 12px;
	border-radius: 3px;
	background: #eee;
	overflow: hidden;
}

.oripa-card__bar span {
	display: block;
	height: 100%;
	background: #f0a020;
}

/* 残り口数の割合で色を変える。少なくなるほど暖色に寄せて、
   一覧の中でも売り切れが近いものが目に留まるようにする */
.oripa-card__bar--high span {
	background: #39c26f;
}

.oripa-card__bar--mid-high span {
	background: #a2ed00;
}

.oripa-card__bar--mid span {
	background: #ffbb00;
}

.oripa-card__bar--low span {
	background: #ff5542;
}

.oripa-card__prizes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.oripa-card__prize {
	padding: 2px 8px;
	border: 1px solid #eee;
	border-radius: 4px;
	font-size: 0.72em;
	color: #555;
}

.oripa-card__prize.is-more {
	border-color: transparent;
	color: #999;
}

/* ------------------------------------------------------------
   詳細ページ（オリパ / 店舗）
------------------------------------------------------------ */

/* 詳細ページのメインビジュアル */
.oripa-detail__image {
	margin-bottom: 24px;
	border-radius: 8px;
	background: #f5f5f5;
	overflow: hidden;
}

.oripa-detail__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* 上部：PCは左に画像、右に情報 */
.oripa-detail__top {
	display: grid;
	gap: 32px;
	margin-bottom: 32px;
}

@media (min-width: 769px) {

	.oripa-detail__top {
		grid-template-columns: 50% 1fr;
		align-items: start;
	}
}

/* スマホではヘッダー直下にメインビジュアルを置き、画面幅いっぱいに表示する */
@media (max-width: 768px) {

	.oripa-detail__top {
		gap: 20px;
	}

	.oripa-detail__image {
		/* #main の左右余白を打ち消して全幅にする */
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
		border-radius: 0;
	}
}

.oripa-detail__image img {
	cursor: zoom-in;
}

/* 拡大できることを示す虫眼鏡アイコン（画像の左下に control する） */
.oripa-detail__image,
.prize-item__image {
	position: relative;
}

.oripa-detail__image::after,
.prize-item__image::after {
	content: '';
	position: absolute;
	left: 8px;
	bottom: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.45);
	/* 虫眼鏡（SVGを直接埋め込み、画像ファイルを増やさない） */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	pointer-events: none;
	opacity: 0.85;
}

.prize-item__image::after {
	left: 6px;
	bottom: 6px;
	width: 22px;
	height: 22px;
	background-size: 13px 13px;
}

/* 拡大できない（画像が無い）場合はアイコンを出さない */
.prize-item__image.is-empty::after {
	content: none;
}

.oripa-detail__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 0.8em;
}

/* スペック表 */
.oripa-detail__spec {
	/* 見出しと詰まって見えるため、上にも余白を取る */
	margin: 24px 0;
	border-top: 1px solid #eee;
}

.oripa-detail__spec-row {
	display: flex;
	gap: 16px;
	padding: 12px 4px;
	border-bottom: 1px solid #eee;
}

.oripa-detail__spec-row dt {
	flex: 0 0 100px;
	margin: 0;
	color: #666;
	font-size: 0.9em;
	font-weight: normal;
}

.oripa-detail__spec-row dd {
	flex: 1;
	margin: 0;
}

.oripa-detail__spec-row .oripa-card__bar {
	max-width: 240px;
	margin-top: 6px;
	margin-bottom: 0;
}

/* 外部リンクボタン */
.oripa-detail__link {
	margin: 0 0 32px;
}

/* 販売ページ・お気に入り・報告のボタンは高さを揃える */
.oripa-detail__button,
.oripa-detail__link .oripa-fav--button,
.oripa-detail__link .oripa-report__open {
	box-sizing: border-box;
	min-height: 50px;
	font-size: 1em;
}

.oripa-detail__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border-radius: 4px;
	background: #f0a020;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.oripa-detail__button:hover {
	opacity: 0.85;
	color: #fff;
}

.oripa-detail__heading {
	margin: 32px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid #333;
	font-size: 1.2em;
}

/* 賞品一覧 */
.prize-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* PCでは1行7個に固定する */
@media (min-width: 769px) {

	.prize-list {
		grid-template-columns: repeat(7, 1fr);
		gap: 10px;
	}
}

.prize-item__image img {
	cursor: zoom-in;
}

.prize-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	overflow: hidden;
}

.prize-item__image {
	aspect-ratio: 3 / 4;
	background: #f5f5f5;
}

/* 取得できなかった画像のプレースホルダ */
.prize-item__image.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 8px, #eee 8px, #eee 16px);
}

.prize-item__noimage {
	color: #bbb;
	font-size: 0.7em;
	letter-spacing: 0.05em;
}

.prize-item__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.prize-item__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
}

.prize-item__rank {
	align-self: flex-start;
	padding: 1px 8px;
	border-radius: 3px;
	background: #333;
	color: #fff;
	font-size: 0.7em;
}

.prize-item__name {
	font-size: 0.85em;
	line-height: 1.4;
	word-break: break-word;
}

/* ------------------------------------------------------------
   画像の拡大表示（モーダル）
------------------------------------------------------------ */

.zoom-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(0, 0, 0, 0.85);
}

.zoom-overlay.is-open {
	display: flex;
}

.zoom-overlay__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-out;
}

.zoom-overlay__close {
	position: absolute;
	top: 12px;
	right: 16px;
	/* 文字の縦位置が揃わないため、flexで中央に配置する */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.zoom-overlay__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* モーダル表示中は背面をスクロールさせない */
body.zoom-open {
	overflow: hidden;
}

@media (max-width: 768px) {

	.zoom-overlay {
		padding: 4vw;
	}
}

/* ------------------------------------------------------------
   ページ送り

   親テーマが nav 要素を伴わない形で書き出すため、外側のクラスに頼らず
   .nav-links（ページ番号を包む共通クラス）を起点に指定している。
   これでアーカイブ・店舗詳細・マイページのすべてに同じ見た目が当たる
------------------------------------------------------------ */

.pagination,
.paging-navigation {
	margin: 0;
	padding: 0;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	background: #fff;
	color: #555;
	font-size: 0.95em;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-links a.page-numbers:hover {
	border-color: #f0a020;
	color: #f0a020;
}

/* 表示中のページ */
.nav-links .page-numbers.current {
	border-color: #f0a020;
	background: #f0a020;
	color: #fff;
	font-weight: 700;
}

/* 省略記号は枠を付けず、間隔だけ空ける */
.nav-links .page-numbers.dots {
	min-width: 20px;
	padding: 0;
	border-color: transparent;
	background: none;
	color: #bbb;
}

/* 「前へ」「次へ」は文字が入るため横幅を広く取る */
.nav-links .prev,
.nav-links .next {
	padding: 0 18px;
	font-size: 0.9em;
}

/* ------------------------------------------------------------
   読み物コンテンツ
------------------------------------------------------------ */

.column-section {
	margin-bottom: 48px;
}

.column-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.column-section__title {
	margin: 0;
	font-size: 1.4em;
	font-weight: 700;
}

.column-section__more {
	flex-shrink: 0;
	font-size: 0.85em;
}

.column-section__desc {
	margin: 0 0 16px;
	color: #666;
	font-size: 0.9em;
	line-height: 1.7;
}

/* --- 記事カード --- */

.column-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.column-card {
	display: flex;
}

/* アイキャッチを背景に敷き、その上に文字を置く */
.column-card__link {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 220px;
	padding: 20px;
	border-radius: 8px;
	background-color: #2d2d5a;
	background-position: center;
	background-size: cover;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}

/* 画像の明るさに左右されず文字が読めるよう、下側を濃くした膜を重ねる */
.column-card__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 15, 35, 0.1) 0%, rgba(15, 15, 35, 0.38) 50%, rgba(15, 15, 35, 0.78) 100%);
	transition: background 0.25s ease;
}

.column-card__link:hover::before {
	background: linear-gradient(180deg, rgba(15, 15, 35, 0.2) 0%, rgba(15, 15, 35, 0.5) 50%, rgba(15, 15, 35, 0.85) 100%);
}

/* 背景の拡大で奥行きを出す */
.column-card__link {
	transition: background-size 0.35s ease;
}

.column-card__link:hover {
	background-size: 108%;
	color: #fff;
}

.column-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.column-card__category {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	font-size: 0.75em;
}

.column-card__title {
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.5;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.column-card__excerpt {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85em;
	line-height: 1.7;

	/* 抜粋が長いカードでも高さが揃うよう、2行で切る */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* --- 用語の一覧（数が多いため見出しだけを並べる） --- */

.glossary-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.glossary-list__item a {
	display: block;
	padding: 12px 14px;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font-size: 0.95em;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.glossary-list__item a:hover {
	border-color: #f0a020;
	color: #f0a020;
}

/* --- カテゴリー別の一覧 --- */

.column-header {
	margin-bottom: 24px;
	padding: 0;
}

.column-header .page-title {
	margin: 0 0 8px;
	font-size: 1.6em;
	font-weight: 700;
}

.column-header__desc {
	margin: 0;
	color: #666;
	font-size: 0.9em;
	line-height: 1.7;
}

/* --- 記事のアイキャッチ --- */

/* 横幅いっぱいだと主張が強すぎるため、中央に控えめに置く */
.single-post .wp-post-image {
	display: block;
	width: 65%;
	height: auto;
	margin: 0 auto 8px;
	border-radius: 8px;
}

/* --- 記事本文 --- */

.single-post .entry-content h2 {
	margin: 40px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid #333;
	font-size: 1.4em;
	font-weight: 700;
}

.single-post .entry-content h3 {
	margin: 28px 0 12px;
	font-size: 1.15em;
	font-weight: 700;
}

.single-post .entry-content p,
.single-post .entry-content li {
	line-height: 1.9;
}

.single-post .entry-content table {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
	font-size: 0.92em;
}

.single-post .entry-content th,
.single-post .entry-content td {
	padding: 10px 12px;
	border: 1px solid #e5e5e5;
	text-align: left;
	vertical-align: top;
}

.single-post .entry-content th {
	background: #fafafa;
	font-weight: 700;
}

.single-post .entry-content blockquote {
	margin: 20px 0;
	padding: 14px 18px;
	border-left: 4px solid #f0a020;
	background: #fafafa;
}

.single-post .entry-content blockquote p {
	margin: 0;
}

/* 補足や注意書き */
.oripa-note {
	margin: 20px 0;
	padding: 14px 18px;
	border: 1px solid #f0e0c0;
	border-radius: 6px;
	background: #fffaf0;
	color: #7a5c20;
	font-size: 0.9em;
	line-height: 1.8;
}

/* ------------------------------------------------------------
   店舗詳細ページ
------------------------------------------------------------ */

/* 店舗名とジャンルが詰まって見えるため、間に余白を取る */
.single-shop .entry-title {
	margin-bottom: 18px;
}

/* ------------------------------------------------------------
   店舗の基本情報（公式サイトの規約ページから収集）
------------------------------------------------------------ */

.shop-info {
	margin: 0 0 12px;
	border-top: 1px solid #eee;
}

.shop-info__row {
	display: flex;
	gap: 16px;
	padding: 12px 4px;
	border-bottom: 1px solid #eee;
}

.shop-info__label {
	flex-shrink: 0;
	width: 140px;
	margin: 0;
	color: #888;
	font-size: 0.9em;
	font-weight: 400;
}

.shop-info__value {
	flex: 1;
	margin: 0;
	line-height: 1.7;
}

.shop-info__note {
	margin: 0 0 40px;
	color: #999;
	font-size: 0.8em;
	line-height: 1.7;
}

/* ------------------------------------------------------------
   店舗の統計

   掲載中のオリパから自動で算出した傾向。グラフはライブラリを使わず
   CSSだけで描くため、JavaScriptを待たずに表示される
------------------------------------------------------------ */

.shop-stats {
	margin-bottom: 40px;
}

/* --- 数値の要約 --- */

.shop-stats__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.shop-stats__cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

.shop-stats__label {
	color: #888;
	font-size: 0.8em;
}

.shop-stats__value {
	color: #222;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.2;
}

.shop-stats__value small {
	margin-left: 2px;
	font-size: 0.6em;
	font-weight: 400;
	color: #666;
}

/* 価格帯は2つの数値を並べるため、少し小さくする */
.shop-stats__value--range {
	font-size: 1.15em;
}

.shop-stats__sub {
	color: #999;
	font-size: 0.78em;
}

/* --- グラフ --- */

.shop-stats__charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.shop-stats__chart {
	padding: 16px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

.shop-stats__chart-title {
	margin: 0 0 14px;
	font-size: 0.95em;
	font-weight: 700;
}

.shop-stats__chart--donut {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.shop-stats__note {
	margin: 12px 0 0;
	color: #888;
	font-size: 0.82em;
	line-height: 1.6;
}

.shop-stats__updated {
	margin: 16px 0 0;
	color: #aaa;
	font-size: 0.78em;
}

/* --- 縦棒グラフ --- */

.chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 140px;
}

.chart-bars__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
}

.chart-bars__value {
	color: #666;
	font-size: 0.75em;
}

/* 棒は下から伸ばすため、枠を高さいっぱいに取って中で寄せる */
.chart-bars__track {
	display: flex;
	align-items: flex-end;
	width: 100%;
	flex: 1;
}

.chart-bars__fill {
	width: 100%;
	min-height: 2px;
	border-radius: 3px 3px 0 0;
	background: #f0a020;
}

.chart-bars__label {
	color: #888;
	font-size: 0.72em;
	white-space: nowrap;
}

/* --- 構成比（横棒） --- */

.chart-stacked__bar {
	display: flex;
	height: 14px;
	border-radius: 7px;
	overflow: hidden;
	background: #f0f0f0;
}

.chart-stacked__seg {
	display: block;
	height: 100%;
}

.chart-legend {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.chart-legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 0.85em;
}

.chart-legend__mark {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	border-radius: 2px;
}

.chart-legend__name {
	flex: 1;
	color: #444;
}

.chart-legend__value {
	color: #888;
}

/* --- ドーナツ --- */

.chart-donut__ring {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	/* 変数で角度を渡し、塗り分ける */
	background: conic-gradient(#f0a020 var(--oripa-donut-deg), #f0f0f0 0);
}

/* 中央をくり抜いてドーナツにする */
.chart-donut__ring::before {
	content: '';
	position: absolute;
	width: 74%;
	height: 74%;
	border-radius: 50%;
	background: #fff;
}

.chart-donut__value {
	position: relative;
	font-size: 1.6em;
	font-weight: 700;
}

.chart-donut__value small {
	font-size: 0.55em;
	font-weight: 400;
}

/* ------------------------------------------------------------
   会員機能（ブックマーク・通報）
------------------------------------------------------------ */

/* --- ヘッダーの会員導線 --- */

/* GeneratePressのナビゲーション右端へ差し込むため、
   親テーマのリンク色より優先させる必要がある */
.main-navigation .menu-bar-items .oripa-account,
.oripa-account {
	display: flex;
	align-items: center;
	gap: 14px;
}

.main-navigation .oripa-account a {
	line-height: 1;
	text-decoration: none;
}

.main-navigation .oripa-account__login {
	padding: 10px 18px;
	border-radius: 4px;
	background: #f0a020;
	color: #fff;
	font-size: 0.9em;
	font-weight: bold;
}

.main-navigation .oripa-account__login:hover {
	opacity: 0.85;
	color: #fff;
	background: #f0a020;
}

.oripa-account__label-short {
	display: none;
}

/* 親テーマは menu-bar-items に 15px を当てており、この中の em 指定は
   その値を基準にしてしまう。メニューと同じ大きさを基準にし直す */
.main-navigation .menu-bar-items {
	font-size: inherit;
}

.main-navigation .oripa-account__mypage {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: inherit;
}

.oripa-account__icon::before {
	content: '♥';
	color: #e0405a;
	font-size: 1.1em;
}

/* ログアウトは頻繁に押すものではないため、これまでの大きさを保つ。
   基準が変わったので、割合ではなく実寸で指定する */
.main-navigation .oripa-account__logout {
	font-size: 12px;
	opacity: 0.7;
}

.main-navigation .oripa-account__logout:hover {
	opacity: 1;
}

/* トップページとオリパ一覧はヘッダーを透過させているため、文字を白にする */
.home .main-navigation .oripa-account__mypage,
.home .main-navigation .oripa-account__logout,
.post-type-archive-oripa .main-navigation .oripa-account__mypage,
.post-type-archive-oripa .main-navigation .oripa-account__logout {
	color: #fff;
}

/* 親テーマは項目全体（li）にホバーすると中のリンクをまとめて青くするが、
   暗いヘッダーでは背景に沈んで読めなくなる。
   いったん白へ戻し、実際に指しているリンクだけ他のメニューと同じ色にする */
.home .main-navigation .oripa-account:hover > a,
.post-type-archive-oripa .main-navigation .oripa-account:hover > a {
	color: #fff;
}

/* 打ち消しと同じ詳細度になるよう、こちらも要素名を添える
   （ログインボタンは背景色を持つため対象に含めない） */
.home .main-navigation a.oripa-account__mypage:hover,
.home .main-navigation a.oripa-account__mypage:focus,
.home .main-navigation a.oripa-account__logout:hover,
.home .main-navigation a.oripa-account__logout:focus,
.post-type-archive-oripa .main-navigation a.oripa-account__mypage:hover,
.post-type-archive-oripa .main-navigation a.oripa-account__mypage:focus,
.post-type-archive-oripa .main-navigation a.oripa-account__logout:hover,
.post-type-archive-oripa .main-navigation a.oripa-account__logout:focus {
	color: #f0a020;
}

@media (max-width: 768px) {

	/* ハンバーガーの隣に収めるため、余白と文字を詰める */
	.main-navigation .menu-bar-items .oripa-account,
	.oripa-account {
		gap: 2.5vw;
	}

	.main-navigation .oripa-account__login {
		padding: 2.4vw 3.4vw;
		font-size: 3.2vw;
		border-radius: 1vw;
	}

	.oripa-account__label-full {
		display: none;
	}

	.oripa-account__label-short {
		display: inline;
	}

	.main-navigation .oripa-account__mypage {
		font-size: 3.2vw;
		gap: 1vw;
	}

	/* サイトタイトルが大きいとログイン導線が折り返してしまうため、
	   スマートフォンでは少し小さくして1行に収める */
	.site-header .main-title {
		font-size: 6vw;
	}
}

/* 販売ページボタンとお気に入りを横に並べる */
.oripa-detail__link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* --- ブックマーク --- */

.oripa-fav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #555;
	font-size: 0.95em;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

/* 親テーマの button:hover が背景色を変えるため、白を明示して打ち消す。
   枠と文字は登録済みと同じ色にし、押せることは透明度で示す */
.oripa-fav--button:hover,
.oripa-fav--button:focus {
	background: #fff;
	border-color: #e0405a;
	color: #e0405a;
	opacity: 0.8;
}

.oripa-fav:disabled {
	opacity: 0.6;
	cursor: wait;
}

.oripa-fav.is-active {
	border-color: #e0405a;
	color: #e0405a;
}

/* 未登録は輪郭だけ、登録済みは塗りつぶしのハートで区別する */
.oripa-fav__icon {
	display: inline-flex;
	align-items: center;
}

.oripa-fav__icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.oripa-fav.is-active .oripa-fav__icon svg {
	fill: #e0405a;
	stroke: #e0405a;
}

.oripa-fav__count {
	padding-left: 6px;
	border-left: 1px solid #e5e5e5;
	color: #888;
	font-size: 0.9em;
}

.oripa-fav.is-active .oripa-fav__count {
	color: inherit;
	border-left-color: rgba(224, 64, 90, 0.3);
}

/* カード用（メインビジュアルの上に重ねる丸ボタン）

   オリパの画像は明るく彩度が高いものが多く、白抜きのアイコンだけでは
   埋没してしまうため、白い円を敷いた上にアイコンを置く */
.oripa-fav--icon {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.oripa-fav--icon:hover,
.oripa-fav--icon:disabled {
	border: none;
	background: #fff;
}

.oripa-fav--icon:hover {
	transform: scale(1.08);
}

.oripa-fav--icon .oripa-fav__icon svg {
	width: 19px;
	height: 19px;
	stroke: #767676;
}

.oripa-fav--icon.is-active .oripa-fav__icon svg {
	stroke: #e0405a;
}

/* カードでは件数を出すと画像の邪魔になる */
.oripa-fav--icon .oripa-fav__count {
	display: none;
}

/* --- 通報 --- */

/* 販売ページ・お気に入りと並べるため、外側の余白は持たせない */
.oripa-report {
	display: inline-flex;
}

/* アイコンだけの正方形ボタン */
.oripa-report__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #767676;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

/* 親テーマの button:hover は背景と文字色を変えてしまう。
   どちらも通常時のまま保ち、押せることは透明度だけで示す
   （文字色を指定しないとアイコンが白くなり見えなくなる） */
.oripa-report__open:hover,
.oripa-report__open:focus {
	background: #fff;
	color: #767676;
	opacity: 0.8;
}

.oripa-report__icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}

.oripa-report__modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.6);
}

.oripa-report__modal[hidden] {
	display: none;
}

.oripa-report__panel {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px;
	border-radius: 8px;
	background: #fff;
	text-align: left;
}

.oripa-report__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	color: #888;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.oripa-report__title {
	margin: 0 0 12px;
	font-size: 1.3em;
	font-weight: 700;
}

.oripa-report__lead {
	margin: 0 0 20px;
	color: #666;
	font-size: 0.9em;
	line-height: 1.7;
}

.oripa-report__reasons {
	margin: 0 0 20px;
	padding: 0;
	border: none;
}

.oripa-report__legend {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-size: 0.9em;
	font-weight: 700;
}

.oripa-report__reason {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
}

.oripa-report__reason:hover {
	background: #fafafa;
}

.oripa-report__reason input {
	margin: 0;
}

.oripa-report__comment {
	display: block;
	margin-bottom: 20px;
}

.oripa-report__comment textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.95em;
}

.oripa-report__message {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: 4px;
	background: #eef7ee;
	color: #2c6e2c;
	font-size: 0.9em;
}

.oripa-report__message.is-error {
	background: #fdeeee;
	color: #a33;
}

.oripa-report__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.oripa-report__submit {
	padding: 12px 28px;
	border: none;
	border-radius: 4px;
	background: #f0a020;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

.oripa-report__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.oripa-report__cancel {
	padding: 12px 0;
	border: none;
	background: none;
	color: #888;
	cursor: pointer;
}

/* モーダル表示中は背面をスクロールさせない */
body.oripa-report-open {
	overflow: hidden;
}

/* ------------------------------------------------------------
   店舗のアイコン（各サイトから取り込んだ favicon）
------------------------------------------------------------ */

.shop-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 1px solid #eee;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.shop-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* アイコンを取得できていない店舗は、頭文字で代用する */
.shop-icon.is-empty {
	background: #f0a020;
	border-color: #f0a020;
	color: #fff;
	font-size: 0.9em;
	font-weight: 700;
}

.shop-icon--card {
	width: 40px;
	height: 40px;
	border-radius: 8px;
}

/* アイコンが入るぶん、店名が余白を占めるようにする */
.shop-nav__item .shop-nav__name {
	flex: 1;
	min-width: 0;
}

/* --- 店舗カードの見出し --- */

.shop-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.shop-card__head .shop-card__title {
	margin: 0;
}

/* --- 掲載が終わったオリパ --- */

/* 古い在庫を最新と思わせないため、本文より前で目に入る位置に置く */
.oripa-ended {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-left: 4px solid #e0405a;
	border-radius: 4px;
	background: #fdf0f2;
	line-height: 1.8;
}

.oripa-ended strong {
	color: #c0273f;
}

@media (max-width: 768px) {

	.oripa-ended {
		margin-bottom: 4vw;
		padding: 3vw 3.5vw;
		border-radius: 1vw;
		font-size: 3.5vw;
	}
}

/* --- ページが見つからないとき --- */

.notfound__lead {
	margin: 0 0 24px;
	line-height: 1.9;
}

.notfound__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0;
	padding: 20px 24px;
	border-radius: 8px;
	background: #fff;
	list-style: none;
}

@media (max-width: 768px) {

	.notfound__lead {
		font-size: 3.6vw;
		margin-bottom: 5vw;
	}

	.notfound__links {
		gap: 3vw 6vw;
		padding: 4vw;
		border-radius: 2vw;
		font-size: 3.6vw;
	}
}

/* --- トップページの説明と読み物の導線 --- */

.front-about,
.front-columns {
	padding: 20px 24px;
	border-radius: 8px;
	background: #fff;
}

.front-about {
	line-height: 1.9;
}

.front-about p {
	margin: 0;
}

.front-about p + p {
	margin-top: 12px;
}

.front-columns {
	margin: 0;
	list-style: none;
}

.front-columns li + li {
	margin-top: 12px;
}

/* 記号はCSSで添える。本文の一部として選択・コピーされないようにするため */
.front-columns li::before {
	content: '・';
	color: #888;
}

@media (max-width: 768px) {

	.front-about,
	.front-columns {
		padding: 4vw;
		border-radius: 2vw;
	}

	.front-about {
		font-size: 3.6vw;
	}

	.front-columns {
		font-size: 3.6vw;
	}
}

/* --- ヘッダーのロゴ --- */

/* 見出しの中に画像を置くため、文字としての行の高さを持たせない。
   display: block は、画像の下に隙間ができるのを防ぐためのもの */
.main-title__logo {
	display: block;
	width: auto;
	height: 88px;
}

/* メニューの文字は本文と同じ大きさにする。
   親テーマは 15px を当てているが、ロゴに対して小さく見えるため打ち消す */
.main-navigation .main-nav a {
	font-size: inherit;
}

/* 会員の導線は、広い画面ではヘッダーの右端に出す。
   狭い画面はロゴとハンバーガーで幅が埋まるため、メニューの中へ移す */
.oripa-account-menu {
	display: none;
}

@media (max-width: 768px) {

	.main-title__logo {
		height: 18vw;
	}

	/* ハンバーガーもロゴに合わせて大きくする。
	   アイコンは 1em で描かれるため、文字の大きさがそのまま印になる。
	   左右の余白はそのぶん詰めて、ヘッダーの幅に収める */
	.menu-toggle {
		padding: 0 12px;
		font-size: 30px;
	}

	.main-navigation .menu-bar-items .oripa-account {
		display: none;
	}

	.oripa-account-menu {
		display: block;
	}
}

/* --- フッターのメニュー --- */

/* リンク群と著作権表示を縦に並べる。
   親テーマは1行にまとめるため、リンクの直後に著作権表示が続き、
   どこまでがリンクなのか分かりにくい */
.inside-site-info {
	flex-direction: column;
	gap: 12px;
}

.footer-menu__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu__list a {
	font-size: 0.85em;
	text-decoration: none;
}

.footer-menu__list a:hover {
	text-decoration: underline;
}

/* --- お問い合わせ --- */

/* 画面が広いときは、入力欄が横に伸びきらないよう中央にまとめる */
.contact-form {
	max-width: 680px;
	margin: 28px auto 0;
}

.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	font-size: 1em;
}

.contact-form__required {
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	background: #e0405a;
	color: #fff;
	font-size: 0.75em;
	font-weight: 400;
	vertical-align: middle;
}

/* 自動投稿よけの欄。画面には出さないが、読み上げ以外の手段では触れられる */
.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-done {
	max-width: 680px;
	margin: 0 auto;
	padding: 32px 28px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fafafa;
	line-height: 1.9;
}

.contact-done__title {
	margin: 0 0 12px;
	font-size: 1.2em;
	font-weight: 700;
}

/* --- 会員向けの案内 --- */

.member-notice {
	padding: 40px 20px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fafafa;
	text-align: center;
}

.member-notice__text {
	margin: 0 0 20px;
	color: #666;
}

.member-notice__button {
	display: inline-block;
	padding: 12px 32px;
	border-radius: 4px;
	background: #f0a020;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.member-notice__button:hover {
	opacity: 0.85;
	color: #fff;
}

/* --- ログイン / 新規登録 --- */

.login-box {
	max-width: 460px;
	margin: 0 auto;
	padding: 36px 32px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
}

.login-tabs {
	display: flex;
	margin-bottom: 28px;
	border-bottom: 1px solid #e5e5e5;
}

.login-tabs__item {
	flex: 1;
	padding: 12px 0;
	border-bottom: 2px solid transparent;
	color: #888;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.login-tabs__item.is-current {
	border-bottom-color: #f0a020;
	color: #333;
}

.login-message {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 4px;
	background: #eef7ee;
	color: #2c6e2c;
	font-size: 0.9em;
	line-height: 1.7;
}

.login-message.is-error {
	background: #fdeeee;
	color: #a33;
}

.login-message p {
	margin: 0;
}

.login-message p + p {
	margin-top: 8px;
}

/* ソーシャルログイン */
.login-social {
	margin-bottom: 24px;
}

.login-social__divider {
	position: relative;
	margin: 20px 0 0;
	color: #aaa;
	font-size: 0.85em;
	text-align: center;
}

/* 「または」の左右に線を引く */
.login-social__divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #e5e5e5;
}

.login-social__divider span {
	position: relative;
	padding: 0 12px;
	background: #fff;
}

.login-form__field {
	display: block;
	margin-bottom: 18px;
}

.login-form__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85em;
	font-weight: bold;
}

.login-form__field input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
}

.login-form__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	color: #666;
	font-size: 0.9em;
	cursor: pointer;
}

.login-form__remember input {
	margin: 0;
}

.login-form__note {
	margin: 0 0 20px;
	color: #888;
	font-size: 0.85em;
	line-height: 1.7;
}

.login-form__submit {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 4px;
	background: #f0a020;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
}

.login-form__submit:hover {
	opacity: 0.85;
}

.login-form__sub {
	margin: 20px 0 0;
	font-size: 0.85em;
	text-align: center;
}

/* --- お気に入り一覧 --- */

.favorites__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.favorites__account {
	margin: 0;
	color: #888;
	font-size: 0.85em;
}

.favorites__logout {
	margin-left: 12px;
}

.favorites__count {
	margin: 0 0 16px;
	color: #666;
	font-size: 0.9em;
}


/* ------------------------------------------------------------
   スマートフォン向けの上書き

   端末幅に応じて文字と余白が比例して変わるよう、px指定をvwへ置き換える。
   基準は幅390pxの端末（1vw ≒ 3.9px）
------------------------------------------------------------ */

@media (max-width: 768px) {

	/* --- 見出し --- */

	.entry-title {
		font-size: 6vw;
		line-height: 1.4;
	}

	.front-section__title,
	.oripa-detail__heading {
		font-size: 5vw;
	}

	.front-section__more,
	.ranking__more {
		font-size: 3.2vw;
	}

	.front-section {
		margin-bottom: 10vw;
	}

	.oripa-detail__heading {
		margin: 8vw 0 4vw;
		padding-bottom: 2vw;
	}

	/* --- ヒーロー --- */

	.hero__title {
		font-size: 6.5vw;
		margin-bottom: 3vw;
	}

	.hero__lead {
		font-size: 3.6vw;
		margin-bottom: 5vw;
	}

	.home .hero .oripa-filter {
		margin-bottom: 4vw;
	}

	.hero__stats {
		font-size: 3.2vw;
	}

	/* ------------------------------------------------------------
	   トップページ：横スクロール

	   折り返して並べると縦に長くなりすぎるため、1行に収めて横へ流す。
	   左右の余白（#main の 2vw）を打ち消して画面端まで届かせることで、
	   「続きがある」ことが伝わるようにしている
	------------------------------------------------------------ */

	/* --- ネオンの枠（スマホでは 1vw ぶんを確保する） --- */

	.home .ranking__column::before,
	.home .ranking__column::after,
	.home .genre-nav > li::before,
	.home .genre-nav > li::after {
		inset: -1vw;
		border-radius: 3vw;
	}

	.home .ranking__column::before,
	.home .genre-nav > li::before {
		padding: 1vw;
	}

	.home .oripa-list,
	.home .ranking {
		display: flex;
		flex-wrap: nowrap;
		gap: 3vw;
		overflow-x: auto;
		/* overflow-x を指定すると overflow-y も auto になり、
		   数ピクセルのはみ出しで縦にも動いてしまう。横だけに絞る */
		overflow-y: hidden;
		margin: 0 -2vw;
		padding: 0 2vw 2vw;
		scroll-snap-type: x proximity;
		/* これが無いと、左右の余白を無視した位置へスナップして
		   1枚目だけ見出しより左にずれてしまう */
		scroll-padding-left: 2vw;
	}

	/* ランキングだけはネオンの発光がにじむため、上下に余白を確保する
	   （横スクロールにすると上下のはみ出しも切られてしまう） */
	.home .ranking {
		gap: 4.5vw;
		padding: 14px 2vw;
	}

	.home .oripa-list > .oripa-card,
	.home .ranking > .ranking__column {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.home .oripa-list > .oripa-card {
		width: 58vw;
	}

	.home .ranking > .ranking__column {
		width: 82vw;
	}

	/* 賞品だけは2行を保ったまま横へ流す */
	.home .prize-nav {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: 39.5vw;
		gap: 3vw;
		overflow-x: auto;
		/* 横だけに動かす（下の指定と同じ理由） */
		overflow-y: hidden;
		margin: 0 -2vw;
		padding: 0 2vw 2vw;
		scroll-snap-type: x proximity;
	}

	.home .prize-nav > .prize-nav__item {
		scroll-snap-align: start;
	}

	/* --- カード --- */

	.oripa-list {
		gap: 3vw;
	}

	.oripa-card {
		padding: 3.5vw;
		border-radius: 2vw;
	}

	.oripa-card__image {
		margin: -3.5vw -3.5vw 3vw;
		border-radius: 2vw 2vw 0 0;
		/* 画面が狭いぶんカードが縦に伸びやすいため、画像を横長にして高さを抑える */
		aspect-ratio: 16 / 9;
	}

	/* 賞品名は詳細ページで見られるため、一覧では省いて高さを詰める */
	.oripa-card__prizes {
		display: none;
	}

	.oripa-card__head {
		font-size: 2.9vw;
		gap: 2vw;
		margin-bottom: 2vw;
	}

	.oripa-card__genre {
		padding: 0.5vw 2vw;
		border-radius: 1vw;
	}

	/* タイトルの長さでカードの高さが変わらないよう、1行に収めて省略する */
	.oripa-card__title {
		font-size: 3.7vw;
		margin-bottom: 3vw;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.oripa-card__data {
		font-size: 3.4vw;
		gap: 3vw;
		margin-bottom: 2vw;
	}

	.oripa-card__bar {
		height: 1.5vw;
		margin-bottom: 3vw;
	}

	.oripa-card__prize {
		padding: 0.5vw 2vw;
		font-size: 2.7vw;
	}

	.oripa-card__badge {
		top: 2vw;
		left: 2vw;
		padding: 0.8vw 2.5vw;
		font-size: 2.8vw;
	}

	/* --- 絞り込みフォーム --- */

	.oripa-filter {
		padding: 3vw;
		margin-bottom: 4vw;
		border-radius: 2vw;
	}

	.oripa-filter__row {
		gap: 2vw;
	}

	input.oripa-filter__input,
	select.oripa-filter__select {
		height: 11vw;
		padding: 0 3vw;
		border-radius: 1.5vw;
		font-size: 3.6vw;
	}

	/* 項目ごとに1行を使う。
	   幅の狭い画面では、選択欄と入力欄を並べると文字が読み取れなくなる */
	.oripa-filter__input,
	.oripa-filter__select {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* 検索ボタンは押しやすいよう横幅いっぱいに広げる */
	.oripa-filter__submit {
		flex: 1 1 100%;
		height: 11vw;
		padding: 0 6vw;
		gap: 1.5vw;
		border-radius: 1.5vw;
		font-size: 3.8vw;
	}

	.oripa-filter__icon svg {
		width: 4vw;
		height: 4vw;
	}

	.oripa-filter__reset {
		margin-top: 2vw;
		font-size: 3vw;
	}

	.post-type-archive-oripa .page-header {
		gap: 2vw;
		margin-bottom: 3vw;
		padding: 1vw 0 2vw;
	}

	.post-type-archive-oripa .page-title {
		font-size: 5vw;
	}

	.oripa-result-count {
		font-size: 3.2vw;
	}

	.oripa-current-sort {
		font-size: 3vw;
	}

	/* --- ランキング --- */

	.ranking {
		gap: 3vw;
	}

	.ranking__column {
		padding: 4vw;
	}

	.ranking__title {
		font-size: 4vw;
		margin-bottom: 3vw;
	}

	.ranking__item {
		gap: 3vw;
		padding: 3vw 0;
	}

	.ranking__rank {
		width: 6vw;
		height: 6vw;
		font-size: 2.8vw;
		line-height: 6vw;
	}

	.ranking__image {
		width: 30vw;
		height: 21vw;
	}

	.ranking__name {
		font-size: 3.4vw;
	}

	.ranking__meta {
		font-size: 3vw;
	}

	/* --- ジャンル・店舗・賞品の導線 --- */

	.genre-nav,
	.shop-nav,
	.prize-nav {
		gap: 3vw;
	}

	/* ジャンルはネオンの発光が隣とぶつからないよう、間隔を広めに取る */
	.home .genre-nav {
		gap: 4.5vw;
	}

	.genre-nav__item,
	.shop-nav__item {
		padding: 4vw;
		border-radius: 2vw;
	}

	.genre-nav__item {
		padding: 0;
	}

	.genre-nav__body {
		padding: 5vw 3vw 3vw;
	}

	.genre-nav__name,
	.shop-nav__name {
		font-size: 3.6vw;
	}

	.genre-nav__count,
	.shop-nav__count {
		font-size: 3vw;
	}

	.prize-nav__item {
		padding: 2.5vw;
		gap: 2vw;
	}

	.prize-nav__thumb {
		width: 25vw;
		height: 34vw;
	}

	.prize-nav__name {
		font-size: 3.2vw;
	}

	.prize-nav__count {
		font-size: 2.9vw;
	}

	/* --- 詳細ページ --- */

	.oripa-detail__labels {
		font-size: 3.2vw;
		gap: 2vw;
		margin-bottom: 2vw;
	}

	.oripa-detail__spec {
		margin-top: 5vw;
		margin-bottom: 6vw;
	}

	.oripa-detail__spec-row {
		gap: 4vw;
		padding: 3vw 1vw;
	}

	.oripa-detail__spec-row dt {
		flex-basis: 24vw;
		font-size: 3.4vw;
	}

	.oripa-detail__spec-row dd {
		font-size: 3.8vw;
	}

	.oripa-detail__button {
		padding: 3.5vw 8vw;
		font-size: 4vw;
		border-radius: 1.5vw;
	}

	.oripa-detail__link {
		margin-bottom: 8vw;
	}

	/* --- 賞品一覧 --- */

	.prize-list {
		gap: 3vw;
	}

	.prize-item__body {
		padding: 2.5vw;
		gap: 1vw;
	}

	.prize-item__rank {
		padding: 0.3vw 2vw;
		font-size: 2.7vw;
	}

	.prize-item__name {
		font-size: 3vw;
	}

	.prize-item__noimage {
		font-size: 2.8vw;
	}

	/* --- 店舗一覧 --- */

	.shop-list {
		gap: 4vw;
	}

	.shop-card {
		padding: 4vw;
		border-radius: 2vw;
	}

	.shop-card__title {
		font-size: 4vw;
		margin-bottom: 3vw;
	}

	.shop-card__genre {
		padding: 0.5vw 2vw;
		font-size: 2.8vw;
	}

	.shop-card__meta {
		font-size: 3.2vw;
	}

	.shop-filter__label {
		font-size: 3.2vw;
	}

	.shop-filter__link {
		padding: 2vw 4vw;
		font-size: 3.2vw;
	}

	/* --- 読み物コンテンツ --- */

	.column-section {
		margin-bottom: 10vw;
	}

	.column-section__title {
		font-size: 4.6vw;
	}

	.column-section__more {
		font-size: 3.2vw;
	}

	.column-section__desc {
		margin-bottom: 4vw;
		font-size: 3.2vw;
	}

	.column-list {
		grid-template-columns: 1fr;
		gap: 3vw;
	}

	.column-card__link {
		min-height: 42vw;
		padding: 4vw;
		border-radius: 2vw;
	}

	.column-card__body {
		gap: 1.5vw;
	}

	.column-card__category {
		font-size: 2.9vw;
	}

	.column-card__title {
		font-size: 4.2vw;
	}

	.column-card__excerpt {
		font-size: 3.3vw;
	}

	.glossary-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
	}

	.glossary-list__item a {
		padding: 3vw;
		border-radius: 1.5vw;
		font-size: 3.4vw;
	}

	.column-header .page-title {
		font-size: 5vw;
	}

	.column-header__desc {
		font-size: 3.2vw;
	}

	/* 画面が狭いぶん、アイキャッチは横幅いっぱいに使う */
	.single-post .wp-post-image {
		width: 100%;
		margin-bottom: 2vw;
		border-radius: 2vw;
	}

	.single-post .entry-content h2 {
		margin: 9vw 0 4vw;
		font-size: 4.6vw;
	}

	.single-post .entry-content h3 {
		margin: 6vw 0 3vw;
		font-size: 4vw;
	}

	.single-post .entry-content p,
	.single-post .entry-content li {
		font-size: 3.7vw;
	}

	.single-post .entry-content table {
		font-size: 3.2vw;
	}

	.single-post .entry-content th,
	.single-post .entry-content td {
		padding: 2.5vw 3vw;
	}

	.oripa-note {
		padding: 3.5vw 4vw;
		border-radius: 1.5vw;
		font-size: 3.3vw;
	}

	/* --- 店舗詳細ページ --- */

	.single-shop .entry-title {
		margin-bottom: 4vw;
	}

	/* --- 店舗の基本情報 --- */

	.shop-info__row {
		flex-direction: column;
		gap: 1vw;
		padding: 3vw 1vw;
	}

	.shop-info__label {
		width: auto;
		font-size: 3.2vw;
	}

	.shop-info__value {
		font-size: 3.6vw;
	}

	.shop-info__note {
		margin-bottom: 8vw;
		font-size: 2.9vw;
	}

	/* --- 店舗の統計 --- */

	.shop-stats__summary {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5vw;
		margin-bottom: 6vw;
	}

	.shop-stats__cell {
		padding: 3.5vw 4vw;
		border-radius: 2vw;
	}

	.shop-stats__label {
		font-size: 3vw;
	}

	.shop-stats__value {
		font-size: 5.6vw;
	}

	.shop-stats__value--range {
		font-size: 4.4vw;
	}

	.shop-stats__sub {
		font-size: 2.9vw;
	}

	.shop-stats__charts {
		grid-template-columns: 1fr;
		gap: 4vw;
	}

	.shop-stats__chart {
		padding: 4vw;
		border-radius: 2vw;
	}

	.shop-stats__chart-title {
		margin-bottom: 3.5vw;
		font-size: 3.8vw;
	}

	.shop-stats__note {
		margin-top: 3vw;
		font-size: 3vw;
	}

	.shop-stats__updated {
		margin-top: 4vw;
		font-size: 2.9vw;
	}

	.chart-bars {
		height: 32vw;
		gap: 1.5vw;
	}

	.chart-bars__value {
		font-size: 2.8vw;
	}

	.chart-bars__label {
		font-size: 2.7vw;
	}

	.chart-legend__item {
		padding: 1vw 0;
		font-size: 3.2vw;
	}

	.chart-donut__ring {
		width: 30vw;
		height: 30vw;
	}

	.chart-donut__value {
		font-size: 6vw;
	}

	/* --- 会員機能 --- */

	.oripa-detail__link {
		gap: 3vw;
	}

	.oripa-fav {
		padding: 3vw 5vw;
		border-radius: 1vw;
		font-size: 3.6vw;
		gap: 1.5vw;
	}

	/* 販売ページ・お気に入り・報告の高さを揃える。
	   上下の余白を持たせると高さがずれるため、min-height と中央寄せに任せる */
	.oripa-detail__button,
	.oripa-detail__link .oripa-fav--button,
	.oripa-detail__link .oripa-report__open {
		min-height: 12vw;
		padding-top: 0;
		padding-bottom: 0;
		font-size: 3.8vw;
	}

	/* 3つが1行に収まるよう、販売ページのボタンで幅を調整する */
	.oripa-detail__button {
		flex: 1 1 auto;
		padding-left: 2vw;
		padding-right: 2vw;
	}

	.oripa-detail__link .oripa-fav--button {
		flex: 0 0 auto;
		padding-left: 3.5vw;
		padding-right: 3.5vw;
	}

	/* 指で押しやすいよう、丸を大きめに取る。
	   同じ詳細度の .oripa-fav が後に来るため、円形と余白は明示し直す */
	.oripa-fav--icon {
		top: 2vw;
		right: 2vw;
		width: 9.5vw;
		height: 9.5vw;
		padding: 0;
		border-radius: 50%;
	}

	.oripa-fav--icon .oripa-fav__icon svg {
		width: 5.4vw;
		height: 5.4vw;
	}

	.oripa-report__open {
		width: 12vw;
		border-radius: 1vw;
	}

	.oripa-report__icon svg {
		width: 5.4vw;
		height: 5.4vw;
	}

	.oripa-report__modal {
		padding: 4vw;
	}

	.oripa-report__panel {
		padding: 6vw 5vw;
		border-radius: 2vw;
	}

	.oripa-report__title {
		font-size: 4.6vw;
	}

	.oripa-report__lead {
		margin-bottom: 5vw;
		font-size: 3.2vw;
	}

	.oripa-report__legend {
		font-size: 3.4vw;
		margin-bottom: 2vw;
	}

	.oripa-report__reason {
		padding: 2.5vw 1vw;
		gap: 2vw;
		font-size: 3.6vw;
	}

	.oripa-report__reasons,
	.oripa-report__comment {
		margin-bottom: 5vw;
	}

	.oripa-report__comment textarea {
		padding: 2.5vw;
		font-size: 3.6vw;
		border-radius: 1vw;
	}

	.oripa-report__message {
		margin-bottom: 4vw;
		padding: 2.5vw 3vw;
		font-size: 3.2vw;
	}

	.oripa-report__actions {
		gap: 3vw;
	}

	.oripa-report__submit {
		padding: 3.5vw 7vw;
		border-radius: 1vw;
		font-size: 3.8vw;
	}

	.oripa-report__cancel {
		padding: 3.5vw 0;
		font-size: 3.4vw;
	}

	/* --- ログイン / 新規登録 --- */

	.login-box {
		padding: 6vw 5vw;
		border-radius: 2vw;
	}

	.login-tabs {
		margin-bottom: 6vw;
	}

	.login-tabs__item {
		padding: 3vw 0;
		font-size: 3.8vw;
	}

	.login-message {
		margin-bottom: 5vw;
		padding: 3vw 3.5vw;
		font-size: 3.2vw;
	}

	.login-social__divider {
		margin-top: 5vw;
		font-size: 3.2vw;
	}

	.login-form__field {
		margin-bottom: 4.5vw;
	}

	.login-form__label {
		margin-bottom: 1.5vw;
		font-size: 3.2vw;
	}

	.login-form__field input {
		padding: 3vw;
		font-size: 3.8vw;
		border-radius: 1vw;
	}

	.login-form__remember {
		margin-bottom: 5vw;
		gap: 2vw;
		font-size: 3.4vw;
	}

	.login-form__note {
		margin-bottom: 5vw;
		font-size: 3.2vw;
	}

	.login-form__submit {
		padding: 3.6vw;
		font-size: 4vw;
		border-radius: 1vw;
	}

	.login-form__sub {
		margin-top: 5vw;
		font-size: 3.2vw;
	}

	/* --- 店舗のアイコン --- */

	.shop-icon {
		width: 8vw;
		height: 8vw;
		border-radius: 1.5vw;
	}

	.shop-icon.is-empty {
		font-size: 3.6vw;
	}

	.shop-icon--card {
		width: 10vw;
		height: 10vw;
		border-radius: 2vw;
	}

	.shop-card__head {
		gap: 3vw;
		margin-bottom: 3vw;
	}

	/* --- お問い合わせ --- */

	/* 画面が狭いときは横幅いっぱいに使う */
	.contact-form {
		margin-top: 6vw;
	}

	.contact-form select,
	.contact-form textarea {
		padding: 3vw;
		font-size: 3.8vw;
		border-radius: 1vw;
	}

	.contact-form__required {
		font-size: 2.8vw;
	}

	.contact-done {
		padding: 6vw 5vw;
		border-radius: 2vw;
		font-size: 3.6vw;
	}

	.contact-done__title {
		margin-bottom: 3vw;
		font-size: 4.4vw;
	}

	/* --- 会員向けの案内・お気に入り一覧 --- */

	.member-notice {
		padding: 8vw 5vw;
		border-radius: 2vw;
	}

	.member-notice__text {
		margin-bottom: 5vw;
		font-size: 3.6vw;
	}

	.member-notice__button {
		padding: 3.5vw 8vw;
		border-radius: 1vw;
		font-size: 3.8vw;
	}

	.favorites__count {
		margin-bottom: 4vw;
		font-size: 3.2vw;
	}

	/* --- ページ送り --- */

	.nav-links {
		gap: 1.5vw;
		margin-top: 8vw;
	}

	.nav-links .page-numbers {
		min-width: 10vw;
		height: 10vw;
		padding: 0 2vw;
		border-radius: 1.5vw;
		font-size: 3.6vw;
	}

	.nav-links .prev,
	.nav-links .next {
		padding: 0 3.5vw;
		font-size: 3.2vw;
	}
}

/* --- 店舗ページ：ボーナス系オリパの説明 --- */

/* 見出しの直後に置く補足。本文より控えめにして、カードを主役にする */
.shop-bonus__note {
	margin: -4px 0 16px;
	color: #666;
	font-size: 0.85em;
	line-height: 1.7;
}

@media (max-width: 768px) {

	.shop-bonus__note {
		margin: -1vw 0 3vw;
		font-size: 3.2vw;
	}
}

/* ------------------------------------------------------------
 * レコメンド（詳細ページ下部）
 *
 * 3段あるので縦に積むと長くなりすぎる。横に並べ、はみ出た分は
 * スクロールで見せる。スマホでは次のカードが少し見える幅にして、
 * 続きがあることが分かるようにする
 * ------------------------------------------------------------ */
.oripa-recommend {
	margin-top: 8px;
}

.oripa-list--scroll {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 4px 12px;
	-webkit-overflow-scrolling: touch;
}

.oripa-list--scroll > .oripa-card {
	flex: 0 0 260px;
	scroll-snap-align: start;
}

@media (max-width: 768px) {
	.oripa-list--scroll > .oripa-card {
		flex-basis: 72vw;
	}
}

/* 賞品ページの「すべて見る」 */
.oripa-prize-more {
	margin-top: 24px;
}

/* ------------------------------------------------------------
 * スマホの最初の画面を広く使う
 *
 * 利用者の9割がスマホ。ヘッダーの余白を詰め、画像と操作が
 * 最初の画面に入るようにする（親テーマの余白より優先させる）
 * ------------------------------------------------------------ */
.inside-header {
	padding: 5px 20px;
}

@media (max-width: 768px) {

	.inside-header {
		padding-right: 10px;
		padding-left: 10px;
	}
}

/* 画面幅いっぱいに置いた要素（100vw）がスクロールバーの分だけ
   はみ出し、ページ全体が横に動いてしまうのを防ぐ。
   clip は hidden と違ってスクロールの入れ物にならないため、
   固定表示などに影響しない */
html,
body {
	overflow-x: clip;
}

/* ------------------------------------------------------------
 * 詳細ページのギャラリー（メインビジュアル＋賞品）
 *
 * 横スクロール＋scroll-snap で1枚ずつ止まる。動きは assets/gallery.js
 * ------------------------------------------------------------ */
.oripa-gallery {
	margin-bottom: 24px;
}

.oripa-gallery__viewport {
	position: relative;
	/* メインビジュアルの比率（カードと同じ）。賞品はこの中に収める */
	aspect-ratio: 7 / 5;
	border-radius: 8px;
	background: #f5f5f5;
	overflow: hidden;
}

.oripa-gallery__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.oripa-gallery__track::-webkit-scrollbar {
	display: none;
}

.oripa-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.oripa-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}

/* 賞品はカードの縦長画像なので、切らずに収める */
.oripa-gallery__slide--prize img {
	box-sizing: border-box;
	padding: 8px;
	background: #fff;
	object-fit: contain;
}

.oripa-gallery__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 24px 12px 8px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	color: #fff;
	font-size: 0.8em;
	line-height: 1.4;
	pointer-events: none;
}

.oripa-gallery__counter {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 8px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.75em;
	pointer-events: none;
}

/* 拡大できることを示す虫眼鏡（メインビジュアルと同じ） */
.oripa-gallery__viewport::after {
	content: '';
	position: absolute;
	left: 8px;
	bottom: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.45);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	pointer-events: none;
	opacity: 0.85;
}

/* 左右の矢印 */
.oripa-gallery__arrow {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: background 0.2s;
}

.oripa-gallery__arrow:hover {
	background: rgba(0, 0, 0, 0.65);
}

.oripa-gallery__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border: solid #fff;
	border-width: 2px 2px 0 0;
	transform: translate(-70%, -50%) rotate(45deg);
}

.oripa-gallery__arrow--prev {
	left: 8px;
}

.oripa-gallery__arrow--prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.oripa-gallery__arrow--next {
	right: 8px;
}

/* サムネイル */
.oripa-gallery__thumbs {
	display: flex;
	gap: 6px;
	margin: 8px 0 0;
	padding: 2px 0 4px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.oripa-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.oripa-gallery__thumbs li {
	flex: 0 0 auto;
	margin: 0;
}

.oripa-gallery__thumb {
	display: block;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: #f5f5f5;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.2s, border-color 0.2s;
}

.oripa-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oripa-gallery__thumb.is-current {
	border-color: #f0a020;
	opacity: 1;
}

/* スマホではヘッダー直下に画面幅いっぱいで置く（旧メインビジュアルと同じ） */
@media (max-width: 768px) {

	.oripa-gallery__viewport {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 0;
	}
}

/* ------------------------------------------------------------
 * 操作を促す動き
 *
 * 1. ギャラリーが画面に入って少し経ったら、画像を一度だけ左へ揺らして
 *    次の画像の端をのぞかせ、「スワイプで賞品を見る」を出す
 * 2. 「公式ページを見る」が画面に入ったら、一度だけ弾ませて光を走らせる
 *    （お気に入りにも動きを付けていたが、利用者の判断で外した）
 *
 * いずれも一度きり。動きを抑える設定では出さない
 * ------------------------------------------------------------ */
.oripa-gallery__hint {
	position: absolute;
	bottom: 12px;
	left: 50%;
	padding: 6px 14px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.8em;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

	.oripa-gallery.is-hinting .oripa-gallery__hint {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	.oripa-gallery.is-hinting .oripa-gallery__slide {
		animation: oripa-gallery-nudge 1.4s ease-in-out 1;
	}

	.oripa-gallery.is-hinting .oripa-gallery__arrow--next {
		animation: oripa-gallery-pulse 1.4s ease-in-out 2;
	}

	.oripa-detail__link.has-anim .oripa-detail__button {
		position: relative;
		overflow: hidden;
	}

	.oripa-detail__link.is-inview .oripa-detail__button {
		animation: oripa-cta-pop 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) 1;
	}

	.oripa-detail__link.is-inview .oripa-detail__button::after {
		content: '';
		position: absolute;
		top: 0;
		left: -60%;
		width: 40%;
		height: 100%;
		background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
		animation: oripa-cta-shine 1.1s ease-out 0.35s 1 both;
	}

}

@keyframes oripa-gallery-nudge {
	0%, 100% { transform: none; }
	30% { transform: translateX(-36px); }
	60% { transform: translateX(0); }
	80% { transform: translateX(-14px); }
}

@keyframes oripa-gallery-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); background: rgba(240, 160, 32, 0.9); }
}

@keyframes oripa-cta-pop {
	0% { transform: scale(0.96); }
	50% { transform: scale(1.04); box-shadow: 0 8px 20px rgba(240, 160, 32, 0.45); }
	100% { transform: none; box-shadow: none; }
}

@keyframes oripa-cta-shine {
	to { left: 130%; }
}

/* グリッドの列は中身の最小幅より狭くならないため、横スクロールの
   サムネイル列（8枚で約490px）が列を押し広げ、ページ全体が画面より
   広くなっていた。列の最小幅を0にして、はみ出す分は列の中で
   スクロールさせる */
.oripa-detail__top > * {
	min-width: 0;
}

/* ギャラリーの下の余白はグリッドの gap に任せる（二重に空いていた） */
.oripa-gallery {
	margin-bottom: 0;
}

/* 賞品名の帯が左下の虫眼鏡と重ならないよう、左を空ける */
.oripa-gallery__caption {
	padding-left: 44px;
}

/* ------------------------------------------------------------
 * 賞品の横スクロール（詳細ページ）
 *
 * ギャラリーと同じ操作感で賞品を見られるようにする。
 * はみ出た分はスクロールで見せ、次の賞品が少し見える幅にする
 * ------------------------------------------------------------ */
.prize-list--scroll {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 4px 12px;
	-webkit-overflow-scrolling: touch;
}

.prize-list--scroll > .prize-item {
	flex: 0 0 170px;
	scroll-snap-align: start;
}

@media (max-width: 768px) {

	.prize-list--scroll > .prize-item {
		flex-basis: 40vw;
	}
}

/* ------------------------------------------------------------
 * 横スクロールの中のカードの大きさをそろえる
 *
 * フレックスの子は min-width が auto のため、単価と残り口数のように
 * 折り返せない文字が並ぶと、指定した幅を超えて広がる。その結果、
 * 同じ列でカードの幅がばらつき、比率で決まる画像の高さもばらついていた
 * （実測で 281px・339px・449px が混在）。
 * 最小幅を0にして幅を固定し、収まらない文字は折り返す
 * ------------------------------------------------------------ */
.oripa-list--scroll > .oripa-card,
.prize-list--scroll > .prize-item {
	min-width: 0;
}

.oripa-list--scroll > .oripa-card {
	width: 260px;
	max-width: 260px;
}

.prize-list--scroll > .prize-item {
	width: 170px;
	max-width: 170px;
}

@media (max-width: 768px) {

	.oripa-list--scroll > .oripa-card {
		width: 72vw;
		max-width: 72vw;
	}

	.prize-list--scroll > .prize-item {
		width: 40vw;
		max-width: 40vw;
	}
}

/* 幅を固定したぶん、収まらないものは折り返す */
.oripa-list--scroll .oripa-card__data {
	flex-wrap: wrap;
}

.oripa-list--scroll .oripa-card__title,
.oripa-list--scroll .oripa-card__shop,
.prize-list--scroll .prize-item__name {
	overflow-wrap: anywhere;
}

/* 画像は比率で高さを決める。幅がそろえば高さもそろう */
.oripa-list--scroll .oripa-card__image {
	aspect-ratio: 7 / 5;
}

.prize-list--scroll .prize-item__image {
	flex: 0 0 auto;
	aspect-ratio: 3 / 4;
}

/* 賞品の画像の枠は高さを数値で決める。
   縦並びのフレックスの子は min-height が auto で、中の画像の元の高さが
   比率で決めた高さを上回ると枠が伸びていた（同じ列で 205px・231px・314px が混在）。
   幅に 4/3 を掛けた高さを直接指定し、画像は枠の中に収める */
.prize-list--scroll .prize-item__image {
	flex: none;
	height: calc(170px * 4 / 3);
	min-height: 0;
}

@media (max-width: 768px) {

	.prize-list--scroll .prize-item__image {
		height: calc(40vw * 4 / 3);
	}
}

/* ------------------------------------------------------------
 * カードの店舗名（残り口数のバーの下・右寄せ・アイコン付き）
 *
 * 以前はジャンルのタグと横に並べていたが、横スクロールで幅を固定した
 * カードでは互いに潰し合って折り返していた。バーの下に一行で置く
 * ------------------------------------------------------------ */
/* カードの直下にあるものだけ。詳細ページの見出し（ジャンルの横）でも
   同じクラスを使っており、そちらは行に並べたままにする */
.oripa-card > .oripa-card__shop {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: -4px 0 10px;
	color: #666;
	font-size: 0.75em;
	text-decoration: none;
}

.oripa-card > .oripa-card__shop:hover {
	color: #333;
}

.oripa-card__shop-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-icon--mini {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	font-size: 0.7em;
}

/* ------------------------------------------------------------
 * 王様に聞く（AIチャット）
 *
 * 右下の王様アイコン、LINE風のチャット、王様のオススメ、共有ページ。
 * 中身の組み立ては assets/king.js、出力は Oripa_King
 * ------------------------------------------------------------ */

/* 右下に追従するアイコン */
.king-fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
	transition: transform 0.2s;
}

.king-fab:hover {
	transform: translateY(-2px);
}

.king-fab.is-hidden {
	display: none;
}

.king-fab img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 3px solid #f0a020;
	background: #fff;
}

.king-fab__label {
	padding: 2px 8px;
	border-radius: 10px;
	background: #f0a020;
	color: #fff;
	font-size: 0.7em;
	font-weight: bold;
	white-space: nowrap;
}

/* 画面 */
.king-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.king-modal[hidden] {
	display: none;
}

.king-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.king-modal__panel {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100vw - 32px));
	height: min(640px, calc(100vh - 32px));
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

/* 背景画像は半透明で敷く（文字が読めるように） */
.king-modal__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--king-bg) center / cover no-repeat;
	opacity: 0.5;
	pointer-events: none;
}

.king-modal__panel > * {
	position: relative;
}

.king-modal__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #1a2a6c;
	color: #fff;
}

.king-modal__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
}

.king-modal__title {
	flex: 1;
	font-weight: bold;
}

.king-modal__close {
	padding: 0 8px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
}

.king-log {
	flex: 1;
	padding: 12px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 吹き出し */
.king-msg {
	display: flex;
	margin-bottom: 10px;
}

.king-msg--king {
	justify-content: flex-start;
}

.king-msg--user {
	justify-content: flex-end;
}

.king-msg__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin-right: 8px;
	border-radius: 50%;
	background: #fff;
}

.king-msg__body {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 0.95em;
	line-height: 1.6;
	word-break: break-word;
}

.king-msg--king .king-msg__body {
	border-bottom-left-radius: 4px;
	background: #fff;
	border: 1px solid #f0d9a8;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.king-msg--user .king-msg__body {
	border-bottom-right-radius: 4px;
	background: #8ee27f;
	color: #123;
}

/* 1文字ずつ出ている間のカーソル */
.king-msg__body.is-typing::after {
	content: "\258C";
	margin-left: 1px;
	animation: king-blink 0.8s steps(1) infinite;
}

@keyframes king-blink {
	50% { opacity: 0; }
}

/* 考え中の点 */
.king-msg__body--thinking {
	display: flex;
	gap: 5px;
	align-items: center;
	min-height: 40px;
}

.king-msg__body--thinking span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c9a24a;
	animation: king-bounce 1.2s ease-in-out infinite;
}

.king-msg__body--thinking span:nth-child(2) { animation-delay: 0.15s; }
.king-msg__body--thinking span:nth-child(3) { animation-delay: 0.3s; }

@keyframes king-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-6px); }
}

/* 選択肢 */
.king-quick {
	display: flex;
	gap: 6px;
	padding: 0 12px 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.king-quick::-webkit-scrollbar {
	display: none;
}

.king-quick.is-hidden {
	display: none;
}

.king-quick__item {
	flex: 0 0 auto;
	padding: 6px 12px;
	border: 1px solid #f0a020;
	border-radius: 16px;
	background: #fff;
	color: #8a5a00;
	font-size: 0.8em;
	white-space: nowrap;
	cursor: pointer;
}

.king-quick__item:hover {
	background: #fff4dc;
}

/* 入力欄 */
.king-form {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid #eee;
}

.king-form__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 20px;
	font-size: 16px; /* 16px未満だとiOSが拡大する */
}

.king-form__send {
	flex: 0 0 auto;
	padding: 0 16px;
	border: 0;
	border-radius: 20px;
	background: #f0a020;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

.king-form__send:disabled {
	opacity: 0.5;
	cursor: default;
}

/* おすすめのカード */
.king-card {
	margin: 0 0 12px 48px;
	padding: 10px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #f0d9a8;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.king-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.king-card__link img {
	display: block;
	width: 100%;
	aspect-ratio: 7 / 5;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 8px;
}

.king-card__title {
	display: block;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.4;
}

.king-card__meta {
	display: block;
	margin-top: 4px;
	color: #666;
	font-size: 0.8em;
}

.king-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.king-actions__like,
.king-actions__view {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: 8px;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}

.king-actions__like {
	border: 1px solid #f0a020;
	background: #fff;
	color: #8a5a00;
}

.king-actions__like.is-done,
.king-actions__like:disabled {
	background: #fff4dc;
	cursor: default;
}

.king-actions__view {
	border: 0;
	background: #f0a020;
	color: #fff;
}

/* 共有の案内 */
.king-share {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #f0d9a8;
	font-size: 0.85em;
}

.king-share__note {
	margin: 0 0 4px;
}

.king-share__page {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.9em;
}

.king-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.king-share__x,
.king-share__line,
.king-share__copy {
	padding: 6px 12px;
	border: 0;
	border-radius: 16px;
	color: #fff;
	font-size: 0.85em;
	text-decoration: none;
	cursor: pointer;
}

.king-share__x { background: #111; }
.king-share__line { background: #06c755; }
.king-share__copy { background: #666; }

/* 王様のオススメ（詳細ページ・マイページ） */
.king-picks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.king-pick {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}

.king-pick__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #f0a020;
	background: #fff;
}

.king-pick__body {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border-radius: 12px;
	border-top-left-radius: 4px;
	background: #fff8ea;
	border: 1px solid #f0d9a8;
}

.king-pick__question {
	margin: 0 0 4px;
	color: #8a5a00;
	font-size: 0.8em;
}

.king-pick__answer {
	margin: 0;
	line-height: 1.6;
}

.king-pick__meta {
	margin: 6px 0 0;
	color: #888;
	font-size: 0.75em;
}

/* 共有ページ */
.king-share-page__chat {
	margin-bottom: 24px;
}

.king-share-page__chat .king-msg__body {
	font-size: 1.05em;
}

.king-share-page__oripa {
	max-width: 360px;
}

.king-share-page__actions {
	margin: 24px 0 12px;
}

.king-share-page__ask {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 24px;
	background: #f0a020;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
}

.king-share-page__report {
	margin-top: 24px;
}

.king-share-page__report-button {
	padding: 0;
	border: 0;
	background: none;
	color: #999;
	font-size: 0.8em;
	text-decoration: underline;
	cursor: pointer;
}

/* スマホでは画面いっぱいに */
@media (max-width: 768px) {

	.king-fab {
		right: 12px;
		bottom: 12px;
	}

	.king-fab img {
		width: 56px;
		height: 56px;
	}

	.king-modal__panel {
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100dvh;
		border-radius: 16px 16px 0 0;
	}

	.king-card {
		margin-left: 0;
	}
}

/* チャットを開いている間は背面をスクロールさせない */
body.king-open {
	overflow: hidden;
}

/* 親テーマの button の指定（hover で灰色の背景、スマホで幅100%）を打ち消す。
   王様のボタンは絵だけで見せたいので、状態に関わらず背景を持たない */
button.king-fab,
button.king-fab:hover,
button.king-fab:focus,
button.king-fab:active {
	width: auto;
	left: auto;
	padding: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

button.king-modal__close:hover,
button.king-modal__close:focus {
	background: none;
	color: #fff;
}

button.king-form__send:hover,
button.king-form__send:focus,
a.king-actions__view:hover,
button.king-share-page__ask:hover,
button.king-share-page__ask:focus {
	background: #d98f12;
	color: #fff;
}

button.king-actions__like:hover,
button.king-actions__like:focus {
	background: #fff4dc;
	color: #8a5a00;
}

button.king-share__copy:hover,
button.king-share__copy:focus {
	background: #444;
	color: #fff;
}

button.king-share-page__report-button:hover,
button.king-share-page__report-button:focus {
	background: none;
	color: #666;
}

/* 選択肢はPCでは折り返して全部見せる。横スクロールはマウスでは
   ほぼ操作できない（スクロールバーも隠しているため） */
@media (min-width: 769px) {

	.king-quick {
		flex-wrap: wrap;
		overflow: visible;
	}
}

/* ------------------------------------------------------------
 * 王様のボタンを目立たせる
 *
 * 大きさは1.3倍ほど（絵 64→84px、札の文字 0.7→0.9em）。
 * 表示から少し経ったら一度だけ、下から飛び出して弾み、
 * 光の輪を広げて存在を知らせる（assets/king.js が is-attention を付ける）
 * ------------------------------------------------------------ */
.king-fab img {
	width: 84px;
	height: 84px;
	border-width: 4px;
}

.king-fab__label {
	padding: 4px 12px;
	border-radius: 14px;
	font-size: 0.9em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {

	.king-fab img {
		width: 72px;
		height: 72px;
	}

	.king-fab__label {
		font-size: 0.85em;
	}
}

/* 光の輪。動きのときだけ見える */
.king-fab::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 84px;
	height: 84px;
	margin-left: -42px;
	border-radius: 50%;
	border: 3px solid #f0a020;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 768px) {

	.king-fab::before {
		width: 72px;
		height: 72px;
		margin-left: -36px;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.king-fab.is-attention {
		animation: king-fab-pop 1.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) 1;
	}

	.king-fab.is-attention::before {
		animation: king-fab-ring 1.4s ease-out 0.4s 2;
	}

	.king-fab.is-attention .king-fab__label {
		animation: king-fab-label 0.6s ease-in-out 0.9s 3;
	}
}

@keyframes king-fab-pop {
	0% { transform: translateY(40px) scale(0.6); opacity: 0; }
	35% { transform: translateY(-14px) scale(1.08); opacity: 1; }
	55% { transform: translateY(0) scale(0.96); }
	70% { transform: translateY(-6px) rotate(-6deg); }
	85% { transform: translateY(0) rotate(6deg); }
	100% { transform: none; }
}

@keyframes king-fab-ring {
	0% { transform: scale(0.9); opacity: 0.9; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes king-fab-label {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); background: #ff8c00; }
}

/* 光の輪は5倍の大きさまで広げる（絵の約9.5倍）。広がるぶん線は細くする。
   拡大で線の太さも一緒に伸びるため、最大時に太くなりすぎないよう 1.5px にしている */
.king-fab::before {
	border-width: 1.5px;
}

@media (prefers-reduced-motion: no-preference) {

	.king-fab.is-attention::before {
		animation-duration: 1.8s;
	}
}

@keyframes king-fab-ring {
	0% { transform: scale(0.9); opacity: 0.9; }
	100% { transform: scale(9.5); opacity: 0; }
}

/* PCでは輪をさらに3倍（絵の約28倍・直径2,400pxほど）に広げ、2秒かける。
   線は拡大で太くなるため、最大時に20px程度に収まる太さにしている */
@media (min-width: 769px) {

	.king-fab::before {
		border-width: 0.7px;
	}

	.king-fab.is-attention::before {
		animation-name: king-fab-ring-pc;
		animation-duration: 2s;
	}
}

@keyframes king-fab-ring-pc {
	0% { transform: scale(0.9); opacity: 0.9; }
	100% { transform: scale(28.5); opacity: 0; }
}

/* PCの輪は拡大（transform）ではなく大きさそのものを動かす。
   拡大だと線も一緒に太くなり、直径2,400pxでは20px超になっていた。
   大きさを動かせば線は4pxのまま保てる */
@media (min-width: 769px) {

	.king-fab::before {
		top: 42px;
		left: 50%;
		width: 84px;
		height: 84px;
		margin-left: 0;
		border-width: 4px;
		transform: translate(-50%, -50%);
	}

	.king-fab.is-attention::before {
		animation: king-fab-ring-pc-size 2s ease-out 0.4s 2;
	}
}

@keyframes king-fab-ring-pc-size {
	0% { width: 76px; height: 76px; opacity: 0.9; }
	100% { width: 2400px; height: 2400px; opacity: 0; }
}

/* PCでは王様のボタンを画面の端から少し離す（利用者の指定） */
@media (min-width: 769px) {

	.king-fab {
		right: 40px;
		bottom: 40px;
	}
}

/* 選択肢の上にも余白を取り、会話と離す（下と同じ8px） */
.king-quick {
	padding-top: 8px;
}

/* スマホでは画面いっぱいに出すので、上の角は丸めない */
@media (max-width: 768px) {

	.king-modal__panel {
		border-radius: 0;
	}
}

/* ------------------------------------------------------------
 * 残り口数の推移（詳細ページ）
 *
 * 7日ぶん以上あれば折れ線（Oripa_Chart::line）、その下に記録の一覧。
 * 一覧は5件だけ見せ、残りは details で畳む
 * ------------------------------------------------------------ */
.stock-history {
	margin-bottom: 8px;
}

.stock-history__pace {
	margin: 0 0 12px;
	color: #555;
	font-size: 0.9em;
}

.stock-history__pace strong {
	color: #1a2a6c;
}

/* 記録の一覧 */
.stock-history__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stock-history__row {
	display: grid;
	grid-template-columns: auto 1fr auto 4.5em;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid #eee;
	font-size: 0.9em;
}

.stock-history__list > .stock-history__row:first-child {
	border-radius: 8px 8px 0 0;
	background: #fff8ea;
}

.stock-history__date {
	color: #666;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.stock-history__bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: #eee;
	overflow: hidden;
}

.stock-history__bar i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: #3bb273;
}

.stock-history__stock {
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.stock-history__stock small {
	color: #888;
	font-weight: normal;
}

.stock-history__diff {
	color: #999;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.stock-history__diff.is-down {
	color: #666;
}

.stock-history__diff.is-up {
	color: #3bb273;
}

@media (max-width: 768px) {

	.stock-history__row {
		gap: 8px;
		padding: 8px 8px;
		font-size: 0.85em;
	}
}

/* バーの中身：緑が残り、薄い橙が前の記録から減った分。物差しは記録中の最大値 */
.stock-history__bar {
	display: flex;
}

.stock-history__rest {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: 3px 0 0 3px;
	background: #3bb273;
}

.stock-history__sold {
	display: block;
	height: 100%;
	background: #f6c98a;
}

/* 6件目以降はJSが畳む。ボタンは表の一番下 */
.stock-history.is-collapsed .stock-history__row.is-extra {
	display: none;
}

.stock-history__toggle {
	display: none;
	margin-top: 8px;
	padding: 8px 14px;
	border: 1px solid #ddd;
	border-radius: 16px;
	background: #fff;
	color: #444;
	font-size: 0.85em;
	cursor: pointer;
}

.stock-history.has-toggle .stock-history__toggle {
	display: inline-block;
}

.stock-history__toggle::before {
	content: "▸ ";
}

.stock-history:not(.is-collapsed) .stock-history__toggle::before {
	content: "▴ ";
}

button.stock-history__toggle:hover,
button.stock-history__toggle:focus {
	background: #f7f7f7;
	color: #222;
}

.stock-history__note {
	margin: 8px 0 0;
	color: #999;
	font-size: 0.75em;
}

/* 先にある「.stock-history__bar i」の指定（緑・角丸）より優先させる */
.stock-history__bar .stock-history__rest {
	border-radius: 3px 0 0 3px;
	background: #3bb273;
}

.stock-history__bar .stock-history__rest:only-child {
	border-radius: 3px;
}

.stock-history__bar .stock-history__sold {
	border-radius: 0 3px 3px 0;
	background: #f6c98a;
}

/* ------------------------------------------------------------
 * 残り口数の推移：バーはカードと同じ部品、スマホでは2段にする
 *
 * 「999,000 / 100,000」のように数字が長いと、1行に並べたときに
 * スマホでバーが押しつぶされて読めない。スマホでは日付・残り・差を
 * 1行目に、バーを2行目いっぱいに出す
 * ------------------------------------------------------------ */
.stock-history__row {
	grid-template-columns: auto 1fr auto 4.5em;
	grid-template-areas: "date bar stock diff";
}

.stock-history__date  { grid-area: date; }
.stock-history__bar   { grid-area: bar; display: block; height: auto; border-radius: 0; background: none; overflow: visible; }
.stock-history__stock { grid-area: stock; }
.stock-history__diff  { grid-area: diff; }

/* カードのバーを借りるが、下の余白は要らない */
.stock-history__bar .oripa-card__bar {
	display: block;
	margin: 0;
}

@media (max-width: 768px) {

	.stock-history__row {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"date stock diff"
			"bar  bar   bar";
		row-gap: 6px;
	}

	.stock-history__stock {
		text-align: right;
	}
}

/* 開閉ボタンの印は、閉じているとき下向き、開いているとき上向きの三角 */
.stock-history__toggle::before {
	content: "▾ ";
}

.stock-history:not(.is-collapsed) .stock-history__toggle::before {
	content: "▴ ";
}

/* 開閉ボタンは表の中央に */
.stock-history.has-toggle .stock-history__toggle {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/* 差の欄は一覧の中で同じ幅にする（PHPがいちばん長い差の桁数を --diff-w で渡す）。
   最新の行の背景色は外し、他の行とそろえる */
.stock-history__row {
	grid-template-columns: auto 1fr auto var(--diff-w, 4.5em);
}

.stock-history__list > .stock-history__row:first-child {
	border-radius: 0;
	background: none;
}

@media (max-width: 768px) {

	.stock-history__row {
		grid-template-columns: auto 1fr var(--diff-w, 4.5em);
	}
}

/* 開閉ボタンの三角も JIS X 0208 にある「▼」「▲」にする（▾▴ は環境依存） */
.stock-history__toggle::before {
	content: "▼ ";
}

.stock-history:not(.is-collapsed) .stock-history__toggle::before {
	content: "▲ ";
}

/* ------------------------------------------------------------
 * 店舗一覧・賞品ページ・404 の見出しを、オリパ一覧と同じ大きさにする
 *
 * 親テーマの page-title はスマホで 42px と大きすぎる。
 * オリパ一覧（.post-type-archive-oripa）と同じ枠・同じ文字にそろえる
 * ------------------------------------------------------------ */
.post-type-archive-shop .page-header,
.tax-prize .page-header,
.error404 .page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	padding: 4px 0 8px;
	background: none;
}

.post-type-archive-shop .page-title,
.tax-prize .page-title,
.error404 .page-title {
	margin: 0;
	font-size: 1.6em;
	font-weight: 700;
}

@media (max-width: 768px) {

	.post-type-archive-shop .page-header,
	.tax-prize .page-header,
	.error404 .page-header {
		gap: 2vw;
		margin-bottom: 3vw;
		padding: 1vw 0 2vw;
	}

	.post-type-archive-shop .page-title,
	.tax-prize .page-title,
	.error404 .page-title {
		font-size: 5vw;
	}
}

/* ------------------------------------------------------------
 * ヘッダー直下の余白を詰める（トップのヒーロー・オリパ一覧の検索パネル）
 *
 * 9/25にヘッダーの余白を詰めて高さが 110px → 80px（スマホ）になったが、
 * 重ねている帯の上余白は元の高さに合わせたままで、40px ほど空いていた。
 * ヘッダーの下に 25px（スマホ）/ 40px（PC）ほど空く値に直す
 * ------------------------------------------------------------ */
.home .hero {
	padding-top: 140px;
}

.post-type-archive-oripa .oripa-filter {
	padding-top: 132px;
}

@media (max-width: 768px) {

	.home .hero {
		padding-top: calc(70px + 9vw);
	}

	.post-type-archive-oripa .oripa-filter {
		padding-top: calc(66px + 9vw);
	}
}

/* ------------------------------------------------------------
 * 一覧の表示形式：タイル／一覧の切り替え
 *
 * HTMLは同じカード（parts/oripa-card.php）のまま、入れ物に
 * oripa-list--rows が付いたら1行の薄い形に組み替える。
 * 賞品のタグとジャンルは出さず、単価・残り・店舗は残す
 * ------------------------------------------------------------ */

/* 切り替えボタン */
.view-toggle {
	display: inline-flex;
	margin-left: auto;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	vertical-align: middle;
}

.view-toggle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #888;
	cursor: pointer;
}

.view-toggle__button svg {
	fill: currentColor;
}

.view-toggle__button.is-active,
button.view-toggle__button.is-active:hover,
button.view-toggle__button.is-active:focus {
	background: #1a2a6c;
	color: #fff;
}

button.view-toggle__button:hover,
button.view-toggle__button:focus {
	background: #f0f0f0;
	color: #333;
}

/* 見出しの右端に置く場所 */
.oripa-detail__heading--with-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
}

.favorites__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.favorites__bar .favorites__count {
	margin: 0;
}

/* 一覧形式 */
.oripa-list--rows {
	display: block;
}

.oripa-list--rows > .oripa-card {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	grid-template-areas:
		"img title fav"
		"img data  shop"
		"img bar   bar";
	column-gap: 10px;
	row-gap: 4px;
	align-items: center;
	margin-bottom: 8px;
	padding: 8px;
	border-radius: 8px;
}

.oripa-list--rows .oripa-card__image {
	grid-area: img;
	margin: 0;
	aspect-ratio: 7 / 5;
	border-radius: 6px;
}

.oripa-list--rows .oripa-card__head,
.oripa-list--rows .oripa-card__prizes {
	display: none;
}

.oripa-list--rows .oripa-card__title {
	grid-area: title;
	min-width: 0;
	margin: 0;
	font-size: 0.95em;
	line-height: 1.3;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.oripa-list--rows .oripa-card__data {
	grid-area: data;
	justify-content: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 0.85em;
}

.oripa-list--rows .oripa-card__bar {
	grid-area: bar;
	height: 5px;
	margin: 0;
}

.oripa-list--rows > .oripa-card > .oripa-card__shop {
	grid-area: shop;
	margin: 0;
	font-size: 0.75em;
}

.oripa-list--rows .shop-icon--mini {
	width: 16px;
	height: 16px;
}

/* お気に入りの丸ボタンは画像の上ではなく、タイトルの右に */
.oripa-list--rows .oripa-fav--icon {
	grid-area: fav;
	position: static;
	justify-self: end;
	width: 28px;
	height: 28px;
	background: none;
	box-shadow: none;
}

.oripa-list--rows .oripa-card__badge {
	top: 4px;
	left: 4px;
	padding: 1px 6px;
	font-size: 0.6em;
}

@media (max-width: 768px) {

	.oripa-list--rows > .oripa-card {
		grid-template-columns: 84px 1fr auto;
		column-gap: 2.5vw;
		row-gap: 1vw;
		margin-bottom: 2vw;
		padding: 2vw;
		border-radius: 2vw;
	}

	.oripa-list--rows .oripa-card__image {
		margin: 0;
		border-radius: 1.5vw;
		aspect-ratio: 7 / 5;
	}

	.oripa-list--rows .oripa-card__title {
		margin: 0;
		font-size: 3.5vw;
	}

	.oripa-list--rows .oripa-card__data {
		gap: 2.5vw;
		margin: 0;
		font-size: 3.1vw;
	}

	.oripa-list--rows .oripa-card__bar {
		height: 1.2vw;
		margin: 0;
	}

	.oripa-list--rows > .oripa-card > .oripa-card__shop {
		font-size: 2.8vw;
	}

	.view-toggle__button {
		width: 34px;
		height: 30px;
	}
}

/* 一覧形式：店舗名はバーの行の右に置き、単価と残り口数の行を幅いっぱいにする。
   同じ行に3つ並べると「日本トレカセンター」のような長い店名で折り返していた。
   バーは店名のぶん短くなるが、行の高さは増えない */
.oripa-list--rows > .oripa-card {
	grid-template-areas:
		"img title fav"
		"img data  data"
		"img bar   shop";
}

.oripa-list--rows .oripa-card__bar {
	align-self: center;
}

.oripa-list--rows > .oripa-card > .oripa-card__shop {
	margin: 0 0 0 4px;
}

/* 単価と残り口数は、それぞれの中では折り返さない（「/ 1回」だけ下に落ちない） */
.oripa-list--rows .oripa-card__price,
.oripa-list--rows .oripa-card__stock {
	white-space: nowrap;
}

/* 一覧形式：タイトルは右の列（お気に入り・店舗名の列）まで広げる。
   3列目の幅は店舗名で決まるため、タイトルがそのぶん早く省略されていた。
   お気に入りは右上に重ねて置き、タイトル側に重ならない余白を取る */
.oripa-list--rows > .oripa-card {
	grid-template-areas:
		"img title title"
		"img data  data"
		"img bar   shop";
}

.oripa-list--rows .oripa-card__title {
	padding-right: 34px;
}

.oripa-list--rows .oripa-fav--icon {
	position: absolute;
	top: 6px;
	right: 6px;
	justify-self: auto;
}

@media (max-width: 768px) {

	.oripa-list--rows .oripa-fav--icon {
		top: 1.5vw;
		right: 1.5vw;
	}
}

/* ページ送りはスマホでも1行に収める。
   前後の番号を1つずつに減らしたうえで（mid_size 1）、折り返しを止め、
   余白を詰める。最も多い「前へ 1 … 59 60 61 … 63 次へ」の9個で約340px */
@media (max-width: 768px) {

	.nav-links {
		flex-wrap: nowrap;
		gap: 1.2vw;
	}

	.nav-links .page-numbers {
		flex: 0 0 auto;
		min-width: 8.5vw;
		padding: 0 1.6vw;
		white-space: nowrap;
	}

	.nav-links .page-numbers.dots {
		min-width: 3.5vw;
	}

	.nav-links .prev,
	.nav-links .next {
		padding: 0 2.6vw;
	}
}

/* ------------------------------------------------------------
 * 賞品の特集ページ（Oripa_Prize_Hub）
 * ------------------------------------------------------------ */

/* 子のページ：親への導線 */
.prize-parent {
	margin-bottom: 8px;
	font-size: 0.85em;
}

.prize-parent a::before {
	content: "← ";
}

/* 導入文 */
.prize-hub__intro {
	margin-bottom: 16px;
	line-height: 1.8;
}

/* 要約 */
.prize-hub__facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0 0 8px;
}

.prize-hub__fact {
	padding: 10px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

.prize-hub__fact dt {
	margin: 0 0 2px;
	color: #888;
	font-size: 0.75em;
	font-weight: normal;
}

.prize-hub__fact dd {
	margin: 0;
	font-size: 0.85em;
}

.prize-hub__fact strong {
	font-size: 1.5em;
	color: #1a2a6c;
}

/* 種類の入口 */
.prize-hub__kinds {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.prize-hub__kinds li {
	margin: 0;
}

.prize-hub__kind {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 16px;
	background: #fff;
	color: #333;
	font-size: 0.85em;
	text-decoration: none;
}

.prize-hub__kind:hover {
	border-color: #f0a020;
	color: #f0a020;
}

.prize-hub__kind-count {
	color: #888;
	font-size: 0.85em;
}

/* よくある質問 */
.prize-hub__faq dl {
	margin: 0;
}

.prize-hub__qa {
	margin-bottom: 12px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #fff8ea;
}

.prize-hub__qa dt {
	margin: 0 0 4px;
	font-weight: bold;
}

.prize-hub__qa dd {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.7;
}

@media (max-width: 768px) {

	.prize-hub__facts {
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
	}

	.prize-hub__fact {
		padding: 2.5vw 3vw;
	}
}

/* 特集ページの「種類から探す」：スマホでは横スクロールにして、
   最初の画面に画像が入るようにする（PCは4列のグリッドのまま） */
.prize-hub .prize-nav {
	margin-bottom: 4px;
}

@media (max-width: 768px) {

	.prize-nav--scroll {
		display: flex;
		gap: 2.5vw;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding: 1vw 1vw 3vw;
		scrollbar-width: none;
	}

	.prize-nav--scroll::-webkit-scrollbar {
		display: none;
	}

	.prize-nav--scroll > li {
		flex: 0 0 38vw;
		min-width: 0;
		scroll-snap-align: start;
	}
}

/* 特集ページの導入文は一覧の手前。上の要素との間を取る */
.prize-hub__intro {
	margin: 16px 0 8px;
	padding: 14px 16px;
	border-left: 3px solid #f0a020;
	background: #fff;
}

.prize-hub__intro p:last-child {
	margin-bottom: 0;
}

/* 特集ページの最初の画面：スマホでは要約を薄く、タイルを小さくして
   画像の並びまでが1画面に入るようにする */
@media (max-width: 768px) {

	.prize-hub__facts {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5vw;
		margin-bottom: 2vw;
	}

	.prize-hub__fact {
		padding: 2vw 1vw;
		text-align: center;
	}

	.prize-hub__fact dt {
		font-size: 2.6vw;
		white-space: nowrap;
	}

	.prize-hub__fact dd {
		font-size: 2.6vw;
	}

	.prize-hub__fact strong {
		font-size: 4.6vw;
	}

	.prize-hub .oripa-detail__heading {
		margin-top: 4vw;
		margin-bottom: 2vw;
	}

	.prize-nav--scroll > li {
		flex-basis: 30vw;
	}

	.prize-nav--scroll .prize-nav__item {
		padding: 2vw;
	}

	.prize-nav--scroll .prize-nav__name {
		font-size: 3vw;
	}

	.prize-nav--scroll .prize-nav__count {
		font-size: 2.6vw;
	}
}

/* 説明は一覧の下（よくある質問の中）へ。左の線と背景は外し、本文として読ませる */
.prize-hub__faq .prize-hub__intro {
	margin: 0 0 16px;
	padding: 0;
	border-left: 0;
	background: none;
	line-height: 1.8;
}

/* ------------------------------------------------------------
 * 横スクロールの列（特集ページの「種類から探す」）
 *
 * スマホでは動かせることが伝わりにくいので、左右のボタンと
 * スクロールバーを出す。PCはグリッドで全部見えるのでどちらも出さない
 * ------------------------------------------------------------ */
.scroller {
	position: relative;
}

.scroller__btn {
	display: none;
}

@media (max-width: 768px) {

	/* スクロールバーをあえて見せる */
	.prize-nav--scroll {
		scrollbar-width: thin;
		scrollbar-color: #c9c9c9 #eee;
		padding-bottom: 3vw;
	}

	.prize-nav--scroll::-webkit-scrollbar {
		display: block;
		height: 6px;
	}

	.prize-nav--scroll::-webkit-scrollbar-track {
		background: #eee;
		border-radius: 3px;
	}

	.prize-nav--scroll::-webkit-scrollbar-thumb {
		background: #c9c9c9;
		border-radius: 3px;
	}

	/* 左右のボタン。動かせるとき（is-scrollable）だけ出す */
	.scroller.is-scrollable .scroller__btn {
		display: block;
		position: absolute;
		top: 30vw;
		z-index: 2;
		width: 9vw;
		height: 9vw;
		padding: 0;
		border: 1px solid #ddd;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}

	.scroller__btn::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2.4vw;
		height: 2.4vw;
		border: solid #333;
		border-width: 2px 2px 0 0;
	}

	.scroller__btn--prev {
		left: -1vw;
	}

	.scroller__btn--prev::before {
		transform: translate(-30%, -50%) rotate(-135deg);
	}

	.scroller__btn--next {
		right: -1vw;
	}

	.scroller__btn--next::before {
		transform: translate(-70%, -50%) rotate(45deg);
	}

	button.scroller__btn:disabled {
		opacity: 0.3;
		cursor: default;
	}

	button.scroller__btn:hover,
	button.scroller__btn:focus {
		background: #fff;
		color: inherit;
	}
}

/* ------------------------------------------------------------
 * トップの特集カルーセル（Oripa_Prize_Hub::carousel_items / assets/carousel.js）
 *
 * 1枚を中央に置き、左右の枚を少し見せて「まだある」と分からせる。
 * 横スクロール＋scroll-snap なので、JSが無くてもスワイプで送れる
 * ------------------------------------------------------------ */
.hub-carousel {
	position: relative;
}

.hub-carousel__track {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 4px 0 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* 両端に余白を置き、最初と最後の枚も中央に来られるようにする */
	padding-left: calc(50% - 320px);
	padding-right: calc(50% - 320px);
}

.hub-carousel__track::-webkit-scrollbar {
	display: none;
}

.hub-carousel__slide {
	flex: 0 0 640px;
	margin: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	transition: opacity 0.3s, transform 0.3s;
	opacity: 0.55;
	transform: scale(0.96);
}

.hub-carousel__slide.is-current {
	opacity: 1;
	transform: none;
}

.hub-card {
	display: grid;
	grid-template-columns: 240px 1fr;
	min-height: 200px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5a 100%);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.hub-card__media {
	position: relative;
	background: #0f0f1e;
}

.hub-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hub-card__media.is-empty::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, #1f1f38, #1f1f38 8px, #262646 8px, #262646 16px);
}

.hub-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 20px 24px;
}

.hub-card__label {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 10px;
	background: #f0a020;
	color: #fff;
	font-size: 0.7em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.hub-card__name {
	font-size: 1.35em;
	font-weight: bold;
	line-height: 1.3;
}

.hub-card__meta {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.85em;
}

.hub-card__meta strong {
	color: #ffd166;
	font-size: 1.25em;
}

.hub-card__cta {
	align-self: flex-start;
	margin-top: 6px;
	padding: 8px 18px;
	border-radius: 20px;
	background: #f0a020;
	color: #fff;
	font-size: 0.85em;
	font-weight: bold;
}

.hub-card:hover .hub-card__cta {
	background: #d98f12;
}

/* 左右のボタン */
.hub-carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin-top: -30px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.hub-carousel__btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border: solid #333;
	border-width: 2px 2px 0 0;
}

.hub-carousel__btn--prev {
	left: 8px;
}

.hub-carousel__btn--prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.hub-carousel__btn--next {
	right: 8px;
}

.hub-carousel__btn--next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

button.hub-carousel__btn:hover,
button.hub-carousel__btn:focus {
	background: #fff;
	color: inherit;
}

/* 点 */
.hub-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
}

.hub-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.hub-carousel__dot.is-current,
button.hub-carousel__dot.is-current:hover {
	background: #f0a020;
	transform: scale(1.3);
}

button.hub-carousel__dot:hover,
button.hub-carousel__dot:focus {
	background: #999;
}

@media (max-width: 768px) {

	.hub-carousel__track {
		gap: 3vw;
		padding-left: 9vw;
		padding-right: 9vw;
	}

	.hub-carousel__slide {
		flex-basis: 82vw;
	}

	.hub-card {
		grid-template-columns: 1fr;
		grid-template-rows: 44vw auto;
		min-height: 0;
	}

	.hub-card__body {
		gap: 1.2vw;
		padding: 3.5vw 4vw 4vw;
	}

	.hub-card__label {
		font-size: 2.6vw;
	}

	.hub-card__name {
		font-size: 4.4vw;
	}

	.hub-card__meta {
		font-size: 3.1vw;
	}

	.hub-card__cta {
		margin-top: 1vw;
		padding: 2vw 5vw;
		font-size: 3.2vw;
	}

	.hub-carousel__btn {
		width: 9vw;
		height: 9vw;
		margin-top: -6vw;
	}

	.hub-carousel__btn::before {
		width: 2.4vw;
		height: 2.4vw;
	}

	.hub-carousel__btn--prev {
		left: 1vw;
	}

	.hub-carousel__btn--next {
		right: 1vw;
	}
}

/* カードの高さをそろえる。縦長の賞品画像がそのままの高さで
   カードを伸ばしていたので、枠の高さを決めて画像は中に収める */
.hub-card {
	height: 220px;
	min-height: 0;
}

.hub-card__media {
	height: 100%;
	overflow: hidden;
}

@media (max-width: 768px) {

	.hub-card {
		height: auto;
		grid-template-rows: 44vw auto;
	}

	.hub-card__media {
		height: 44vw;
	}
}

/* ------------------------------------------------------------
 * 特集カルーセルの調整（2026-10-01）
 *
 * - ループ：両端に写しを置くので、両端の余白（最初と最後の枚を中央に
 *   寄せるためのもの）は要らない
 * - スマホ：縦に積むと画像の上下が見切れるので、PCと同じ「左に画像・右に文字」
 * ------------------------------------------------------------ */
.hub-carousel__track {
	padding-left: 0;
	padding-right: 0;
}

/* JSが写しを並べるまでは、最初の枚を左端に置かず中央に寄せておく */
.hub-carousel:not(.is-ready) .hub-carousel__track {
	padding-left: calc(50% - 320px);
}

@media (max-width: 768px) {

	.hub-carousel:not(.is-ready) .hub-carousel__track {
		padding-left: 7vw;
	}

	.hub-carousel__slide {
		flex-basis: 86vw;
	}

	.hub-card {
		grid-template-columns: 38% 1fr;
		grid-template-rows: none;
		height: 42vw;
	}

	.hub-card__media {
		height: 100%;
	}

	.hub-card__body {
		justify-content: center;
		gap: 1vw;
		padding: 2.5vw 3.5vw 2.5vw 3.5vw;
	}

	.hub-card__label {
		padding: 0.4vw 2.2vw;
		font-size: 2.4vw;
	}

	.hub-card__name {
		font-size: 3.9vw;
		line-height: 1.3;
	}

	.hub-card__meta {
		font-size: 2.9vw;
	}

	.hub-card__cta {
		margin-top: 0.8vw;
		padding: 1.6vw 4vw;
		font-size: 2.9vw;
	}
}

/* ------------------------------------------------------------
 * 特集の一覧ページ（/feature/）
 *
 * トップのカルーセルと同じカード（.hub-card）を縦に並べる。
 * PCは2列、スマホは1列。カードの中身の寸法はカルーセルの指定をそのまま使う
 * ------------------------------------------------------------ */
.feature-index__lead {
	margin: 8px 0 0;
	color: #555;
	font-size: 0.95em;
	line-height: 1.7;
}

.feature-index__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-index__item {
	min-width: 0;
	margin: 0;
}

.feature-index__item .hub-card {
	grid-template-columns: 42% 1fr;
	height: 200px;
}

.feature-index__item .hub-card__body {
	padding: 16px 20px;
}

.feature-index__item .hub-card__name {
	font-size: 1.2em;
}

.feature-index__empty,
.feature-index__more {
	margin: 24px 0 0;
	text-align: center;
}

@media (max-width: 768px) {

	.feature-index__list {
		grid-template-columns: 1fr;
		gap: 3.5vw;
	}

	.feature-index__item .hub-card {
		grid-template-columns: 38% 1fr;
		height: 42vw;
	}

	.feature-index__item .hub-card__body {
		gap: 1vw;
		padding: 2.5vw 3.5vw;
	}

	.feature-index__item .hub-card__name {
		font-size: 3.9vw;
	}
}

/* 特集カードは濃い背景に白文字。リンク全体の hover・focus・タップ時の
   文字色（サイト共通の濃い色）が当たると、名前が背景に埋もれるので白のままにする */
.hub-card:hover,
.hub-card:focus,
.hub-card:active,
.hub-card:visited {
	color: #fff;
}