@charset "UTF-8";

/* ==================================================
   1. 変数の定義（カラーコード・ブレイクポイント）
================================================== */
:root {
	/* メインカラー・背景色 */
	--color-primary-blue: #004b87;
	--color-primary-green: #008000;
	--color-accent-gold: #c39a48;
	--color-accent-red: #9e2425;
	--color-bg-base: #f7eed7;
	--color-text-main: #333;
	--color-white: #fff;

	/* エリア別カラー */
	--color-area-blue: #004b87; /* 北東北 */
	--color-area-red: #8a2529; /* 南東北 */
	--color-area-gold: #a68a41; /* 甲信越 */
	--color-area-green: #5c7022; /* 北関東 */
	--color-area-purple: #854b67; /* 南関東 */
	--color-area-cyan: #267c94; /* 東京 */

	/* ブレイクポイント */
	--bp-pc: 751px;
}

/* ==================================================
   2. リセット＆ベーススタイル
================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 16px;
	font-family: 'Zen Maru Gothic', sans-serif;
	line-height: 1.6;
	color: var(--color-text-main);
	background-color: var(--color-bg-base);
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

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

/* ==================================================
   3. 共通・汎用レイアウトクラス
================================================== */

/* SP専用の改行（PCでは非表示） */
.sp {
	display: block;
}

/* PC専用の改行（SPでは非表示） */
.pc {
	display: none;
}

.inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}

.sec-title {
	text-align: center;
	margin-bottom: 30px;
}

.sec-title img {
	height: 115px;
}

.sec-howto .sec-title {
	background-image: url('../img/sec-howto-title-bg-sp.png');
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
}

/* ページごとの表示制御（トップページの場合はトップへ戻るボタンを隠す） */
body.is-top .item-to-top {
	display: none;
}

/* ユーティリティクラス（文字色・背景色） */
.bg-blue {
	color: #fff;
	background-color: var(--color-area-blue) !important;
}

.bg-red {
	color: #fff;
	background-color: var(--color-area-red) !important;
}

.bg-gold {
	color: #fff;
	background-color: var(--color-area-gold) !important;
}

.bg-green {
	color: #fff;
	background-color: var(--color-area-green) !important;
}

.bg-purple {
	color: #fff;
	background-color: var(--color-area-purple) !important;
}

.bg-cyan {
	color: #fff;
	background-color: var(--color-area-cyan) !important;
}

.bg-jr {
	color: #fff;
	background-color: #00833e !important;
}

.bg-white {
	background-color: var(--color-white) !important;
}

.text-blue {
	color: var(--color-primary-blue) !important;
}

/* ==================================================
   4. ボタン共通スタイル
================================================== */
.btn-wrap-center {
	text-align: center;
	margin-top: 40px;
}

.btn {
	display: inline-block;
	position: relative;
	padding: 12px 36px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	border-radius: 50px;
	border: none;
}

/* ボタン内側の白いライン */
.btn::before {
	position: absolute;
	inset: 2px;
	pointer-events: none;
	content: '';
	border: 1px solid rgb(255 255 255 / 80%);
	border-radius: 50px;
}

.btn-large {
	width: 100%;
	padding: 16px 40px;
	font-size: 16px;
}

/* ボタンカラー */
.btn-red {
	color: var(--color-white);
	background-color: var(--color-accent-red);
}

.btn-white-red {
	color: var(--color-accent-red);
	background-color: var(--color-white);
}

.btn-green {
	color: var(--color-white);
	background-color: var(--color-primary-green);
}

.btn-blue {
	color: var(--color-white);
	background-color: var(--color-primary-blue);
}

.btn-brown {
	color: var(--color-white);
	background-color: #6a1a1c;
}

.btn-gold {
	color: var(--color-white);
	background: linear-gradient(to bottom, #d4b56a, #b38634);
	box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
}

/* 白背景のボタン */
.btn-white-red {
	color: var(--color-accent-red);
	background-color: var(--color-white);
	box-shadow: 0 4px 0 var(--color-accent-red);
	border: 1px solid var(--color-accent-red);
}

.btn-white-red::before {
	border: 1px solid var(--color-accent-red);
}

/* ボタンアイコン設定 */
.btn-icon-arrow,
.btn-icon-external,
.btn-icon-home,
.btn-icon-crown,
.btn-icon-gift,
.btn-icon-vote,
.btn-detail {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.btn-icon-arrow::after {
	width: 16px; /* アイコンの横幅（必要に応じて調整してください） */
	height: 16px; /* アイコンの高さ（必要に応じて調整してください） */
	background-image: url('../img/btn-icon-arrow.png'); /* 画像のパス */
	background-size: contain; /* 枠内に収まるように縮尺を調整 */
	background-position: center;
	background-repeat: no-repeat;
	content: ''; /* 文字は空にする */
}

.btn-icon-external::after {
	width: 16px; /* アイコンの横幅（必要に応じて調整してください） */
	height: 16px; /* アイコンの高さ（必要に応じて調整してください） */
	background-image: url('../img/btn-icon-out.png'); /* 画像のパス */
	background-size: contain; /* 枠内に収まるように縮尺を調整 */
	background-position: center;
	background-repeat: no-repeat;
	content: ''; /* 文字は空にする */
}

.btn-icon-home::after {
	width: 16px; /* アイコンの横幅（必要に応じて調整してください） */
	height: 16px; /* アイコンの高さ（必要に応じて調整してください） */
	background-image: url('../img/btn-icon-home.png'); /* 画像のパス */
	background-size: contain; /* 枠内に収まるように縮尺を調整 */
	background-position: center;
	background-repeat: no-repeat;
	content: ''; /* 文字は空にする */
}

.btn-icon-crown::after {
	width: 20px; /* アイコンの横幅（必要に応じて調整してください） */
	height: 20px; /* アイコンの高さ（必要に応じて調整してください） */
	background-image: url('../img/btn-icon-crown.png'); /* 画像のパス */
	background-size: contain; /* 枠内に収まるように縮尺を調整 */
	background-position: center;
	background-repeat: no-repeat;
	content: ''; /* 文字は空にする */
}

.btn-icon-gift::after {
	width: 20px; /* アイコンの横幅（必要に応じて調整してください） */
	height: 20px; /* アイコンの高さ（必要に応じて調整してください） */
	background-image: url('../img/btn-icon-gift.png'); /* 画像のパス */
	background-size: contain; /* 枠内に収まるように縮尺を調整 */
	background-position: center;
	background-repeat: no-repeat;
	content: ''; /* 文字は空にする */
}

.btn-icon-vote::after {
	width: 20px; /* アイコンの横幅（必要に応じて調整してください） */
	height: 20px; /* アイコンの高さ（必要に応じて調整してください） */
	background-image: url('../img/btn-icon-vote.png'); /* 画像のパス */
	background-size: contain; /* 枠内に収まるように縮尺を調整 */
	background-position: center;
	background-repeat: no-repeat;
	content: ''; /* 文字は空にする */
}

.btn-detail::after {
	width: 12px; /* アイコンの横幅（必要に応じて調整してください） */
	height: 12px; /* アイコンの高さ（必要に応じて調整してください） */
	background-image: url('../img/btn-icon-arrow.png'); /* 画像のパス */
	background-size: contain; /* 枠内に収まるように縮尺を調整 */
	background-position: center;
	background-repeat: no-repeat;
	content: ''; /* 文字は空にする */
}

.btn-white-red.btn-icon-vote::after {
	background-image: url('../img/btn-icon-vote-red.png'); /* 画像のパス */
}

/* ==================================================
   5. ヘッダー＆フッター (SPファースト)
================================================== */

/* --- ヘッダー --- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: var(--color-white);
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
	border-top: 2px solid #a58122;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	padding: 10px 20px;
}

/* ロゴの表示切り替え（基本設定） */
.header-logo .logo-inner {
	display: flex;
	align-items: center;
	width: 246px;
}

.logo-jr {
	width: 49px;
	height: 36px;
}

.logo-campaign {
	width: auto;
	height: 20px;
	margin-left: 10px;
}

.logo-white {
	display: none;
}

.logo-normal {
	display: block;
}

/* ★ トップページ専用のヘッダー上書き設定 */
body.is-top .header {
	background-color: transparent;
	box-shadow: none;
}

body.is-top .logo-normal {
	display: none;
}

body.is-top .logo-white {
	display: block;
}

body.is-top .hamburger-line {
	background-color: var(--color-white);
}

/* ハンバーガーボタン */
.hamburger {
	display: block;
	position: relative;
	z-index: 110;
	width: 27px;
	height: 16px;
	padding: 5px 0;
	background: transparent;
	cursor: pointer;
	border: none;
}

.hamburger-line {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-primary-blue);
	transition: all 0.3s ease;
}

.hamburger-line:nth-child(1) {
	top: 0;
}

.hamburger-line:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.hamburger-line:nth-child(3) {
	bottom: 0;
}

.hamburger.is-active .hamburger-line:nth-child(1) {
	top: 50%;
	background-color: var(--color-primary-blue);
	transform: translateY(-50%) rotate(45deg);
}

.hamburger.is-active .hamburger-line:nth-child(2) {
	opacity: 0;
}

.hamburger.is-active .hamburger-line:nth-child(3) {
	top: 50%;
	background-color: var(--color-primary-blue);
	transform: translateY(-50%) rotate(-45deg);
}

/* SP用ナビゲーション */
.header-nav {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 105;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: rgb(255 255 255 / 95%);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.header-nav.is-active {
	opacity: 1;
	visibility: visible;
}

.header-nav-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
}

.header-nav-list .btn {
	width: 100%;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: normal;
}

.header-nav-list .btn::before {
	border: none;
}

/* --- フッター --- */
.footer {
	padding: 40px 20px 20px;
	font-size: 12px;
	color: var(--color-text-main);
	background-color: var(--color-bg-base);
}

.footer-inner {
	max-width: 1000px;
	margin: 0 auto;
}

.footer-notes {
	margin-bottom: 20px;
}

.footer-notes li {
	margin-bottom: 4px;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5;
}

.footer-notes a {
	color: var(--color-primary-blue);
	text-decoration: underline;
}

.footer-copyright {
	text-align: left;
	margin-top: 30px;
}

/* ==================================================
   6. トップページ (SPファースト)
================================================== */

/* --- ファーストビュー --- */
.mv {
	position: relative;
	margin-bottom: 30px;
}

.sp_mv {
	display: flex;
	position: relative;
	align-items: center;
	padding: 80px 0 20px;
	background-image: url('../img/bg_top_sp.jpg');
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	aspect-ratio: 1 / 1.343;
}

.mv-inner {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

.mv-copy-vertical {
	display: block;
	position: absolute;
	top: 15vw;
	left: 10px;
	width: 9%;
}

.mv-copy-vertical img {
	width: 100%;
	height: auto;
}

.mv-content {
	width: 100%;
	text-align: center;
}

.mv-content .inner {
	position: relative;
	background-image: url('../img/bg_top_sp.jpg');
	background-size: cover;
	background-position: center center;
	aspect-ratio: 1 / 1.1;
	overflow: hidden;
}

.mv-title {
	position: relative;
	top: 8vw;
	width: 80%;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

.mv-ribbon {
	position: absolute;
	top: 7vw;
	right: 8vw;
	width: 25%;
}

.mv-ph-sp {
	position: absolute;
	top: 27vw;
	right: -10vw;
	width: fit-content;
	text-align: right;
}

.mv-ph-sp img {
	width: 90vw;
}

.mv-btn-wrap {
	position: absolute;
	right: 0;
	bottom: 5vw;
	left: 0;
}

.mv-lead {
	margin: 1em auto;
	font-size: 14px;
	font-family: 'Zen Old Mincho', serif;
	line-height: 1.3;
	text-align: center;
	color: var(--color-primary-blue);
}

.mv-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1em;
	background-image: url('../img/cloth-bg.png');
	background-size: 100% auto;
	margin-top: 0;
}

.mv-banner-img {
	width: 28%;
}

.mv-banner-text {
	width: 70%;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--color-white);
}

.mv-banner-text strong {
	font-size: 19px;
	color: #e6c15d;
}

.mv-banner .btn.btn-gold {
	width: 100%;
	color: #9e2425;
	background: #e6c15d;
}

.mv-banner .detail-actions {
	margin-top: 6px;
}

.mv-banner .btn::before {
	border: 1px solid #9e2425;
}

.mv-banner .btn-icon-vote::after {
	background-image: url('../img/btn-icon-vote-red.png');
}

.mv-banner.pc {
	display: none;
}

/* --- 参加方法セクション --- */
.sec-howto {
	margin-bottom: 50px;
	padding: 0;
}

.howto-intro {
	font-size: 18px;
	text-align: center;
	margin-bottom: 40px;
}

.intro-text strong {
	color: #9e2425;
}

.intro-period {
	margin-top: 15px;
	font-weight: bold;
	color: var(--color-primary-blue);
}

.badge-blue {
	padding: 2px 12px;
	font-size: 12px;
	color: var(--color-white);
	background-color: var(--color-primary-blue);
	border-radius: 20px;
	margin-right: 8px;
}

.howto-steps {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.step-card {
	position: relative;
	padding: 30px 20px 20px;
	text-align: center;
	background-color: var(--color-white);
	box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
	border-radius: 6px;
}

.step-num {
	position: absolute;
	top: -15px;
	left: 50%;
	width: 40px;
	transform: translateX(-50%);
}

.step-img {
	margin-bottom: 15px;
}

.step-img img {
	height: 100%;
	object-fit: contain;
}

.step-title {
	font-size: 20px;
	color: #9e2425;
	margin-bottom: 20px;
}

.step-desc {
	font-size: 16px;
	text-align: left;
}

.step-desc small {
	display: block;
	font-size: 12px;
	color: #666;
	margin-top: 8px;
}

/* --- 賞品セクション --- */
.sec-prize {
	padding: 60px 0;
	color: var(--color-white);
	background-color: var(--color-accent-red);
	background-image: url('../img/cloth-bg.png');
	background-size: auto 100%;
	background-position: center center;
}

.prize-intro {
	font-size: 16px;
	text-align: center;
	margin-bottom: 40px;
}

.prize-intro strong {
	font-size: 22px;
}

.prize-items {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.prize-card {
	padding: 20px;
	text-align: center;
	color: var(--color-text-main);
	background: linear-gradient(to bottom, #fff, #e9cf8a);
	border-radius: 8px;
}

.prize-img {
	margin-bottom: 15px;
}

.prize-img img {
	max-width: 50%;
}

.badge-gold {
	display: inline-block;
	padding: 4px 16px;
	font-size: 16px;
	font-weight: bold;
	color: var(--color-white);
	background: linear-gradient(to bottom, #ddaa24, #f3d73c);
	border-radius: 100vh;
	margin-bottom: 10px;
}

.prize-name {
	font-size: 18px;
	color: #9e2425;
	margin-bottom: 10px;
}

.prize-desc {
	font-size: 13px;
	text-align: left;
}

/* --- JRE MALLセクション --- */
.sec-jremall {
	position: relative;
	padding: 60px 0;
	background-color: var(--color-white);
	overflow: hidden;
}

.jremall-inner {
	position: relative;
	z-index: 1;
}

.jremall-title-content {
	text-align: center;
	margin-bottom: 20px;
	background-image: url('../img/jremall-title-content_bg-sp.png');
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.jremall-content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.jremall-title {
	width: 65%;
	margin: 0 auto 20px;
}

.jremall-catch {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary-green);
}

.jremall-desc {
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}

.text-red {
	font-weight: 700;
	color: var(--color-accent-red);
}

.jremall-decor {
	position: absolute;
	z-index: 0;
	opacity: 0.3;
}

.decor-left {
	bottom: -20px;
	left: -20px;
	width: 120px;
}

.decor-right {
	top: 0;
	right: -20px;
	width: 100px;
}

/* ==================================================
   7. 下層ページ共通・一覧ページ (SPファースト)
================================================== */

/* --- ヒーローエリア --- */
.page-hero {
	padding: 70px 20px 60px;
	text-align: center;
	background-image: url('../img/bg_page.jpg');
}

.page-hero .inner {
	padding-left: 0;
	padding-right: 0;
}

.breadcrumb {
	font-size: 13px;
	text-align: left; /* 左揃え */
	color: var(--color-white);
	margin-bottom: 30px; /* 下のタイトル画像との余白 */
}

.breadcrumb a {
	text-decoration: none;
}

.page-title {
	width: 73%;
	max-width: 348px;
	margin: auto;
	margin-bottom: 30px;
}

.page-lead {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-white);
}

.page-hero .btn-wrap-center {
	margin-top: 20px;
}

/* --- 一覧ページ --- */
.sec-list {
	padding: 0 0 80px;
}

.area-block {
	padding-bottom: 90px;
	text-align: center;
}

.area-block:nth-of-type(odd) {
	background-color: var(--color-white);
}

/* 偶数番目のブロック：元の薄い黄色背景 */
.area-block:nth-of-type(even) {
	background-color: var(--color-bg-base);
}

/* --- 新・リボンタイトルの形状（上下対称に20pxくぼませる） --- */
.ribbon-title {
	display: inline-block;
	position: relative;
	z-index: 1;
	width: 90%;
	margin: -26px auto 30px;
	padding: 28px 40px; /* 上下パディング28px */
	font-size: 14px;
	font-weight: 700;
	background-color: transparent !important;

	/* ★上中央を「20px」、下中央を「100% - 20px」に揃える */
	clip-path: polygon(0 0, 50% 15px, 100% 0, 100% 100%, 50% calc(100% - 15px), 0 100%);
}

.ribbon-title::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--color-accent-gold);
	content: '';
}

/* 内側の層（エリアカラー） */
.ribbon-title::after {
	position: absolute;
	inset: 3px 0;
	z-index: -1;
	content: '';

	/* ★内側の色も、親と全く同じ「20px」の形で切り抜く */
	clip-path: polygon(0 0, 50% 15px, 100% 0, 100% 100%, 50% calc(100% - 15px), 0 100%);
}

/* 各エリアカラーを「内側の層（::after）」に割り当てる */
.ribbon-title.bg-blue::after {
	background-color: var(--color-area-blue);
}

.ribbon-title.bg-red::after {
	background-color: var(--color-area-red);
}

.ribbon-title.bg-gold::after {
	background-color: var(--color-area-gold);
}

.ribbon-title.bg-green::after {
	background-color: var(--color-area-green);
}

.ribbon-title.bg-purple::after {
	background-color: var(--color-area-purple);
}

.ribbon-title.bg-cyan::after {
	background-color: var(--color-area-cyan);
}

.ribbon-title.bg-white::after {
	background-color: var(--color-white);
}

.ribbon-title.bg-jr::after {
	background-color: #00833e;
}

/* モーダルなどで白いリボンを使った時の文字色補正 */
.ribbon-title.bg-white {
	color: var(--color-primary-blue) !important;
}

.ribbon-sub {
	font-size: 10px;
	margin-left: 10px;
	font-weight: normal;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	text-align: left;
}

.product-card {
	height: 100%;
	background-color: var(--color-white);
	overflow: hidden; /* ★中の画像が角丸からはみ出ないように隠す */
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
	border-radius: 8px; /* ★角丸を追加 */
	box-shadow: 0 4px 10px rgb(0 0 0 / 10%); /* ★影を少し濃く・広くして立体感を出す */
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgb(0 0 0 / 15%); /* ★ホバー時に影を広げて「浮き上がる」リッチな動きを追加 */
}

.product-card a {
	display: flex;
	position: relative; /* ★追加：県名バッジの配置の基準にするため */
	flex-direction: column;
	height: 100%;
}

/* --- カード本文エリア --- */
.card-body {
	position: relative; /* ★追加：県名バッジを配置するための基準点 */
	flex: 1;
	padding: 15px 12px 12px; /* 少しだけ上部の余白を広くしておく */
}

/* --- 県名バッジのスタイル --- */
.card-pref {
	position: absolute;
	bottom: 100%; /* .card-body の一番上（＝写真の下端ライン）に合わせる */
	left: 50%; /* 親要素の左から50%の位置に */
	z-index: 2;
	padding: 4px 16px; /* 左右の余白を少し広めに */
	font-size: 11px;
	font-weight: 700;
	color: var(--color-white);
	transform: translateX(-50%); /* 自身の幅の半分だけ左に戻して、完全な中央揃えにする */
	margin-bottom: -12px; /* 写真の下端から、さらに上に10px持ち上げる */
	border-radius: 20px; /* カプセル型に丸める */
	white-space: nowrap; /* 文字が改行されないようにする */
}

/* ★バッジ内側の白いライン */
.card-pref::before {
	position: absolute;
	inset: 2px;
	pointer-events: none;
	content: '';
	border: 1px solid rgb(255 255 255 / 80%);
	border-radius: 20px; /* 外枠のカプセル型に合わせる */
}

/* エリアごとの背景色自動切り替え（変更なし） */
.area-block:nth-of-type(1) .card-pref {
	background-color: var(--color-area-blue);
}

.area-block:nth-of-type(2) .card-pref {
	background-color: var(--color-area-red);
}

.area-block:nth-of-type(3) .card-pref {
	background-color: var(--color-area-gold);
}

.area-block:nth-of-type(4) .card-pref {
	background-color: var(--color-area-green);
}

.area-block:nth-of-type(5) .card-pref {
	background-color: var(--color-area-purple);
}

.area-block:nth-of-type(6) .card-pref {
	background-color: var(--color-area-cyan);
}

.area-block:nth-of-type(7) .card-pref {
	background-color: #00833e;
}

.card-img {
	position: relative;
	width: 100%;
	background-color: #f4f4f4;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.card-new {
	position: absolute;
	width: 44px;
	height: 51px;
	top: 10px;
	left: 10px;
	z-index: 2;
}

.card-jre {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 10px;
	right: 10px;
	z-index: 2;
}

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

.card-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

/* --- 商品カード下部の詳細ボタン（フッター） --- */
.card-foot {
	position: relative; /* ★内側ラインの基準点として追加 */
	padding: 10px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

/* ★追加：内側の白いライン */
.card-foot::before {
	position: absolute;
	inset: 2px;
	pointer-events: none; /* テキストのクリックを邪魔しない */
	content: '';
	border: 1px solid rgb(255 255 255 / 80%);

	/* カード全体の角丸(8px)に合わせて、下側の角だけを丸める(上0, 上0, 下右5px, 下左5px) */
	border-radius: 0 0 5px 5px;
}

/* ==================================================
   8. 商品詳細ページ (SPファースト)
================================================== */
.sec-detail {
	padding: 0 0 80px;
	margin-top: -40px;
}

/* 商品を囲む白い枠線カード（ベース） */
.detail-card {
	position: relative; /* 内側ラインの基準にするため追加 */
	padding: 30px 20px;
	background-color: var(--color-white);
	border-radius: 8px;
	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
}

/* ★追加：内側の金の枠線 */
.detail-card::before {
	position: absolute;
	inset: 6px; /* 白い外枠から6px内側 */
	pointer-events: none; /* 中のテキスト選択やクリックを邪魔しないようにする */
	content: '';
	border: 2px solid var(--color-accent-gold);
	border-radius: 4px; /* 外側(8px)より少し小さめの角丸にするのが綺麗に見せるコツ */
}

.detail-card h2 {
	position: relative;
	z-index: 1;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: var(--color-accent-gold);
	margin-bottom: 25px;
}

.detail-card .btn-large.btn-icon-vote {
	font-size: 26px;
	background-image: url('../img/cloth-bg.png');
	background-size: 100% auto;
}

.detail-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.detail-img {
	position: relative;
	width: 100%;
	background-color: #eee;
	border-radius: 4px;
	overflow: hidden;
}

.detail-img img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.detail-info {
	padding: 20px;
	background-color: var(--color-bg-base);
	border-radius: 8px;
}

.detail-info .tags {
	margin-bottom: 15px;
	border-bottom: 2px solid #dcd3b6;
	padding-bottom: 10px;
}

.detail-info .tag-location {
	font-size: 18px;
	font-weight: normal;
	color: var(--color-text-main);
}

.detail-info .tag-location i {
	display: none;
}

.detail-info .product-description {
	font-size: 16px;
	line-height: 1.8;
}

/* 校正用タグ：表組み SPレイアウト */
.detail-info .info-table {
	width: 100%;
}

.detail-info .info-table th,
.detail-info .info-table td {
	display: block;
}

.detail-info .info-table tr {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

.detail-info .info-table tr:nth-child(1),
.detail-info .info-table tr:nth-child(2) {
	flex-wrap: nowrap;
}

.detail-info .info-table th {
	flex-shrink: 0;
	width: 80px;
}

.detail-info .info-table td {
	padding-left: 16px;
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
}

.detail-info .info-table tr:nth-child(3) {
	display: block;
}

.detail-info .info-table tr:nth-child(3) th {
	width: 100%;
	margin-bottom: 8px;
}

.detail-info .info-table tr:nth-child(3) th .label {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.detail-info .info-table tr:nth-child(3) td {
	padding-left: 0;
}

.detail-info .info-table th .label {
	display: inline-block;
	width: 100%;
	padding: 4px 12px;
	font-size: 12px;
	text-align: center;
	color: var(--color-white);
	background-color: #a68a41;
	border-radius: 20px;
}

.detail-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	margin-top: 16px;
}

.detail-bottom-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	margin-top: 30px;
}

.detail-bottom-nav .btn {
	width: 100%;
	min-width: 295px;
}

.detail-bottom-nav .btn.btn-gold {
	background: #a58122;
}

/* ==================================================
   9. モーダルウィンドウ (SPファースト)
================================================== */
.modal {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 80%);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.modal.is-open {
	opacity: 1;
	visibility: visible;
}

.modal-container {
	display: flex;
	position: relative;
	flex-direction: column;
	width: 95%;
	height: 90vh;
	background-color: #004583;
	border-radius: 10px;
}

.modal-close {
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 10;
	font-size: 30px;
	color: var(--color-white);
	background: transparent;
	cursor: pointer;
	border: none;
}

.modal-content {
	padding: 40px 20px;
	overflow-y: auto;
	color: var(--color-white);
}

.modal-header {
	text-align: center;
}

.is-sub .modal-header .modal-btn-wrap {
	display: none;
}

.modal-lead {
	font-size: 13px;
	line-height: 1.8;
	margin-top: 20px;
}

.award-top-images {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px;
}

.award-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.award-card {
	text-align: center;
	color: var(--color-text-main);
	background-color: var(--color-white);
	overflow: hidden;
	border-radius: 4px;
}

.award-card-head {
	padding: 8px;
	font-size: 14px;
	font-weight: bold;
	color: var(--color-white);
	background-color: var(--color-accent-red);
}

.award-top-images .award-card-head {
	padding: 0;
}

.award-card-body {
	padding: 15px;
	font-size: 12px;
}

/* --- インラインCSSから移行したスタイル --- */
.modal-title img {
	width: 100%;
	max-width: 300px;
}

.text-highlight {
	color: #ffc300;
}

.modal-btn-wrap {
	margin-top: 20px;
}

.modal-pdf-wrap {
	text-align: center;
	margin-top: 10px;
}

.badge-pdf {
	padding: 2px 8px;
	font-size: 11px;
	color: var(--color-white);
	background-color: #d90000; /* 赤色 */
	border-radius: 100vh;
}

.link-pdf {
	font-size: 12px;
	text-decoration: underline;
	color: var(--color-white);
	margin-left: 5px;
}

a.link-pdf {
	text-decoration: none;
}

.modal-ribbon {
	display: block;
	width: 98%;
	max-width: 262px;
	margin: 80px auto 30px;
	text-align: center;
}

/* ==================================================
   10. PC用メディアクエリ一括設定 (1001px以上)
================================================== */
@media screen and (width >= 1001px) {
	.sp {
		display: none;
	}

	.pc {
		display: block;
	}

	.btn {
		padding: 24px 80px;
		font-size: 20px;
	}

	.btn-large {
		max-width: 300px;
		padding: 16px 40px;
		font-size: 20px;
	}

	/* ヘッダー・フッター */
	.header-inner {
		height: 70px;
		max-width: 1920px;
		margin: auto;
		padding: 10px 40px;
	}

	.header-logo .logo-inner {
		width: 384px;
	}

	.logo-jr {
		height: 30px;
		width: 41px;
	}

	.logo-campaign {
		width: 326px;
		height: 35px;
		margin-left: 16px;
	}

	.hamburger {
		display: none;
	}

	/* ナビゲーション（ボタン群）を確実に右寄せにする */
	.header-nav {
		display: block;
		position: static;
		height: auto;
		background-color: transparent;
		opacity: 1;
		visibility: visible;
		margin-left: auto; /* 左側の余白を最大にして右に押しやる */
	}

	.header-nav-list {
		flex-direction: row;
		justify-content: flex-end; /* 中身のボタンも右揃えに */
		align-items: center;
		gap: 20px; /* ボタン同士の隙間（デザインに合わせて調整可能） */
	}

	.header-nav-list .btn {
		padding: 6px 14px;
		font-size: clamp(12px, 0.395rem + 0.756vw, 16px);
	}

	.footer {
		padding: 60px 40px 30px;
		font-size: 12px;
	}

	/* モーダル */
	.modal-container {
		width: 800px;
		max-height: 85vh;
	}

	.modal-header .btn {
		width: 380px;
		margin-top: 20px;
		padding: 12px 40px;
	}

	.modal-content {
		padding: 60px;
	}

	.modal-ribbon {
		margin-top: 120px;
	}

	.modal-lead {
		font-size: 16px;
	}

	.award-top-images {
		flex-direction: row;
	}

	.award-top-images img {
		width: 100%;
	}

	.award-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}

	.mv {
		background-image: url('../img/bg_top.jpg');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}

	.mv-inner {
		position: relative;
		max-width: 1920px;
		margin: auto;
		aspect-ratio: 1 / 0.6;
	}

	.mv-content {
		position: relative;
		height: 100%;
		max-width: 1920px;
		margin-right: auto;
		margin-left: auto;
	}

	.mv-content .inner {
		position: initial;
		max-width: 1920px;
		background-image: none;
		overflow: initial;
		aspect-ratio: initial;
	}

	.mv-copy-vertical {
		top: clamp(80px, 5vw, 100px);
		left: 3%;
		width: 5%;
	}

	.mv-title {
		position: absolute;
		top: 15%;
		left: 8%;
		width: 45%;
	}

	.mv-title img {
	}

	.mv-ribbon {
		position: absolute;
		top: 7%;
		left: 50%;
		width: 20%;
	}

	.mv-lead {
		position: absolute;
		bottom: 17%;
		left: 11%;
		width: 40%;
		padding: 1em 3em;
		font-size: clamp(9px, -0.059rem + 1.323vw, 22px);
		text-align: center;
		background-color: rgb(255 255 255 / 43%);
	}

	.mv-btn-wrap {
		position: absolute;
		bottom: 5%;
		left: 9%;
		width: 40%;
		text-align: center;
	}

	.mv-btn-wrap .btn {
		padding: 3% 6%;
		font-size: clamp(14px, 0.343rem + 1.134vw, 20px);
	}

	.mv-ph-sp {
		position: absolute;
		top: -5%;
		right: -10%;
		z-index: 10;
		width: 60%;
		max-width: 1146px;
	}

	.mv-banner {
		position: absolute;
		right: 2%;
		bottom: 3%;
		width: 38%;
		padding: 1.5em;
		margin-top: 0;
	}

	.mv-banner.pc {
		display: flex;
	}

	.mv-banner-text {
		font-size: clamp(11px, 0.244rem + 0.945vw, 16px);
	}

	.mv-banner-text strong {
		font-size: clamp(14px, 0.165rem + 1.512vw, 22px);
	}

	.mv-banner .btn {
		padding: 0.7em 6%;
		font-size: clamp(12px, 0.04rem + 1.512vw, 20px);
	}

	.column2 {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 50px;
	}

	.sec-howto {
		margin-bottom: 80px;
	}

	.sec-howto .column2 {
		background-image: url('../img/sec-howto-title-bg-l.png'), url('../img/sec-howto-title-bg-r.png');
		background-size:
			auto 100%,
			auto 100%;
		background-position:
			left center,
			right center;
		background-repeat: no-repeat, no-repeat;
		margin-bottom: 40px;
	}

	.sec-howto .sec-title {
		background-image: none;
	}

	.howto-steps {
		flex-direction: row;
		gap: 20px;
	}

	.howto-intro {
		text-align: left;
		margin-bottom: 60px;
	}

	.step-num {
		left: 0;
	}

	.step-card {
		flex: 1;
	}

	.sec-prize {
		background-size: cover;
	}

	.prize-img {
		width: 40%;
		margin-bottom: 0;
	}

	.prize-img img {
		max-width: 100%;
		border-radius: 8px;
	}

	.prize-info {
		width: calc(60% - 20px);
	}

	.prize-items {
		flex-direction: row;
		gap: 30px;
	}

	.prize-card {
		flex: 1;
	}

	.prize-card .column2 {
		gap: 14px;
	}

	.sec-jremall {
		padding-: 100px 0 60px;
	}

	.sec-jremall .inner {
		padding: 0 0 40px;
		background-image: url('../img/jremall-title-content_bg.png');
		background-size: auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.jremall-title-content {
		margin-bottom: 40px;
		background-image: none;
	}

	.jremall-title img {
		max-width: 385px;
	}

	.jremall-catch {
		font-size: 22px;
	}

	.jremall-desc {
		font-size: 14px;
		text-align: center;
	}

	.jremall-decor {
		opacity: 1;
	}

	.jremall-content .btn-large {
		max-width: 496px;
	}

	.decor-left {
		bottom: 0;
		left: -80px;
		width: 250px;
	}

	.decor-right {
		top: auto;
		right: -80px;
		bottom: 0;
		width: 200px;
	}

	/* 下層・一覧ページ */
	.page-hero {
		padding: 80px 40px 120px;
	}

	.breadcrumb {
		max-width: 1000px;
		margin: auto;
		margin-bottom: 50px;
	}

	.page-lead {
		font-size: 18px;
	}

	.ribbon-title {
		width: 580px;
		padding: 36px 40px;
		font-size: 20px;
		clip-path: polygon(0 0, 50% 23px, 100% 0, 100% 100%, 50% calc(100% - 23px), 0 100%);
	}

	.ribbon-title::after {
		clip-path: polygon(0 0, 50% 23px, 100% 0, 100% 100%, 50% calc(100% - 23px), 0 100%);
	}

	.ribbon-sub {
		font-size: 13px;
	}

	.product-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 28px;
	}

	.card-body {
		padding: 15px;
	}

	.card-name {
		font-size: 16px;
	}

	.card-pref {
		font-size: 13px;
	}

	/* 詳細ページ */
	.sec-detail {
		margin-top: -60px;
	}

	.detail-card {
		padding: 50px;
	}

	.detail-card h2 {
		font-size: 35px;
		margin-bottom: 40px;
	}

	.detail-card .btn-large.btn-icon-vote {
		font-size: 32px;
	}

	.detail-content {
		flex-direction: row;
		gap: 40px;
		margin-top: 30px;
	}

	.detail-img {
		width: 45%;
		aspect-ratio: 1 / 1;
	}

	.detail-img img {
		width: 100%;
		height: 100%;
	}

	.detail-info {
		width: 50%;
		padding: 30px;
	}

	/* テーブルをPC本来の横並びに戻す */
	.detail-info .info-table {
		display: table;
		border-collapse: separate;
		border-spacing: 0 15px;
		width: 100%;
	}

	.detail-info .info-table tr,
	.detail-info .info-table tr:nth-child(1),
	.detail-info .info-table tr:nth-child(2),
	.detail-info .info-table tr:nth-child(3) {
		display: table-row;
		margin-bottom: 0;
	}

	.detail-info .info-table th,
	.detail-info .info-table td,
	.detail-info .info-table tr:nth-child(3) th,
	.detail-info .info-table tr:nth-child(3) td {
		display: table-cell;
		vertical-align: top;
		width: auto;
	}

	.detail-info .info-table th {
		width: 90px;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.detail-info .info-table tr:nth-child(3) th .label {
		display: inline-block;
		width: 100%;
		box-sizing: border-box;
	}

	.detail-info .info-table tr:nth-child(3) td {
		padding-left: 20px;
	}

	.detail-info .info-table th .label {
		padding: 6px 12px;
	}

	.detail-info .info-table td {
		padding-left: 20px;
		padding-top: 2px;
	}

	.detail-actions {
		flex-direction: row;
		justify-content: center;
		gap: 20px;
		margin-top: 30px;
	}

	.detail-bottom-nav {
		flex-direction: row;
		justify-content: center;
		gap: 20px;
		margin-top: 40px;
	}

	.detail-bottom-nav .btn {
		width: 440px;
		padding: 16px 40px;
	}
}