@charset "UTF-8";

/* ==================================================================
   Appleギフトカード買取記事 専用スタイル
   prefix: ag-
   設計方針
     ・「1店舗＝1回だけ使える券」という情報構造をそのまま見た目にする
       （系列一覧＝券面／ミシン目／スタンプ枠）
     ・色は意味で分ける
         赤   … 買取不可・禁止
         琥珀 … 条件・上限（読み飛ばすと損をする情報）
         灰   … 出典・注記
     ・SWELLのテーマ変数を継承し、サイトの既存トーンと衝突させない
   ================================================================== */

:root {
	--ag-ink: #1b2432;
	--ag-ink-2: #46536a;
	--ag-mute: #6b7688;
	--ag-line: #dfe4ec;
	--ag-paper: #fbfcfe;

	--ag-accent: #d0342c;
	--ag-accent-bg: #fdf2f1;

	--ag-amber: #9a6100;
	--ag-amber-bg: #fff8e6;
	--ag-amber-line: #f0d79a;

	--ag-ok: #17795e;
	--ag-ok-bg: #eef8f4;

	--ag-radius: 10px;
	--ag-num: "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* 数値表記の共通設定（桁を揃える） */
.ag-rate,
.ag-group-table td,
.ag-amount-table td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}


/* ==================================================================
   1. 系列店舗一覧テーブル（券のメタファー）
   ================================================================== */

.ag-group-wrap {
	margin: 2em 0;
}

.ag-group-wrap__cap {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ag-ink);
	line-height: 1.4;
}

.ag-group-wrap__cap small {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--ag-mute);
	white-space: nowrap;
}

.ag-group-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--ag-radius);
	border: 1px solid var(--ag-line);
	background: #fff;
}

/* テーブル本体 ─ SWELL既定のリセットを含む */
.ag-group-table {
	width: 100%;
	min-width: 460px;
	margin: 0;
	padding: 0;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
	background: none;
	font-size: 14px;
	line-height: 1.5;
}

.ag-group-table *,
.ag-group-table *::before,
.ag-group-table *::after {
	box-sizing: border-box;
}

.ag-group-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 11px 12px;
	border: none;
	border-bottom: 1px solid var(--ag-line);
	background: var(--ag-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-align: center;
	white-space: nowrap;
}

.ag-group-table thead th:first-child {
	text-align: left;
}

.ag-group-table tbody tr {
	border: none;
	background: none;
	transition: background .15s;
}

.ag-group-table tbody tr:nth-child(even) {
	background: var(--ag-paper);
}

.ag-group-table tbody tr:hover {
	background: #f2f6fd;
}

.ag-group-table tbody td {
	padding: 13px 12px;
	margin: 0;
	border: none;
	border-bottom: 1px dashed var(--ag-line); /* 券の切り取り線 */
	background: none;
	text-align: center;
	vertical-align: middle;
	color: var(--ag-ink-2);
}

.ag-group-table tbody tr:last-child td {
	border-bottom: none;
}

/* 店舗名セル ─ 左端にミシン目 */
.ag-group-table tbody td:first-child {
	position: relative;
	padding-left: 22px;
	text-align: left;
	font-weight: 700;
	color: var(--ag-ink);
	white-space: nowrap;
}

.ag-group-table tbody td:first-child::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 62%;
	border-left: 3px dotted #c9d2e2;
}

/* 買取率 */
.ag-rate {
	font-family: var(--ag-num);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ag-accent);
	line-height: 1;
}

.ag-rate small {
	font-size: 12px;
	font-weight: 700;
	margin-left: 1px;
}

.ag-rate--sub {
	color: var(--ag-ink-2);
	font-size: 16px;
}

/* 振込時間 */
.ag-time {
	font-size: 13px;
	color: var(--ag-ink-2);
	white-space: nowrap;
}

/* 対象バッジ（スタンプ枠） */
.ag-badge {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.2;
	white-space: nowrap;
}

.ag-badge--mega {
	border: 1.5px solid var(--ag-accent);
	color: var(--ag-accent);
	background: var(--ag-accent-bg);
}

.ag-badge--none {
	color: #a9b2c2;
	background: none;
	border: 1.5px solid transparent;
}

/* スクロール可能を示すヒント */
.ag-group-scroll::-webkit-scrollbar {
	height: 6px;
}
.ag-group-scroll::-webkit-scrollbar-thumb {
	background: #c9d2e2;
	border-radius: 3px;
}


/* ==================================================================
   2. 注意ボックス（条件・上限）／禁止ボックス（買取不可）
   ================================================================== */

.ag-alert,
.ag-deny {
	position: relative;
	margin: 1.6em 0;
	padding: 16px 18px 16px 48px;
	border-radius: var(--ag-radius);
	font-size: 15px;
	line-height: 1.75;
}

.ag-alert::before,
.ag-deny::before {
	position: absolute;
	left: 17px;
	top: 16px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

/* 条件・上限 */
.ag-alert {
	background: var(--ag-amber-bg);
	border: 1px solid var(--ag-amber-line);
	color: #5c4a24;
}

.ag-alert::before {
	content: "!";
	background: #d99b1c;
}

.ag-alert strong,
.ag-alert .ag-em {
	color: var(--ag-amber);
	font-weight: 700;
}

/* 買取不可・禁止 */
.ag-deny {
	background: var(--ag-accent-bg);
	border: 1px solid #f2c9c6;
	color: #6b2b28;
}

.ag-deny::before {
	content: "×";
	background: var(--ag-accent);
}

.ag-deny strong {
	color: var(--ag-accent);
	font-weight: 700;
}


/* ==================================================================
   3. 買取できない条件リスト
   ================================================================== */

.ag-denylist {
	margin: 1.4em 0;
	padding: 0;
	list-style: none;
	border: 1px solid #f0d6d4;
	border-radius: var(--ag-radius);
	overflow: hidden;
	background: #fff;
}

.ag-denylist li {
	position: relative;
	margin: 0;
	padding: 14px 16px 14px 46px;
	border-bottom: 1px solid #f7e8e7;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ag-ink);
	list-style: none;
}

.ag-denylist li:last-child {
	border-bottom: none;
}

.ag-denylist li::before {
	content: "×";
	position: absolute;
	left: 16px;
	top: 15px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ag-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.ag-denylist li span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--ag-mute);
	line-height: 1.6;
}


/* ==================================================================
   4. 必要書類チェックリスト
   ================================================================== */

.ag-checklist {
	margin: 1.2em 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.ag-checklist li {
	position: relative;
	margin: 0;
	padding: 11px 14px 11px 40px;
	border: 1px solid var(--ag-line);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ag-ink);
	list-style: none;
}

.ag-checklist li::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 16px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--ag-ok);
	border-bottom: 2px solid var(--ag-ok);
	transform: rotate(-45deg);
}

.ag-checklist li em {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-style: normal;
	color: var(--ag-mute);
}


/* ==================================================================
   5. クーポン条件カード
   ================================================================== */

.ag-coupon {
	margin: 1.8em 0;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	overflow: hidden;
	background: #fff;
}

.ag-coupon__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--ag-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
}

.ag-coupon__head span {
	padding: 3px 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .18);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
}

.ag-coupon__body {
	margin: 0;
	padding: 4px 0;
}

.ag-coupon__body dt,
.ag-coupon__body dd {
	margin: 0;
}

.ag-coupon__body dt {
	padding: 12px 16px 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	color: var(--ag-mute);
}

.ag-coupon__body dd {
	padding: 0 16px 12px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ag-ink);
	border-bottom: 1px solid #eef1f6;
}

.ag-coupon__body dd:last-child {
	border-bottom: none;
}

.ag-coupon__body dd.is-caution {
	color: var(--ag-accent);
	font-weight: 700;
}


/* ==================================================================
   6. 金額別テーブル
   ================================================================== */

.ag-amount-table {
	width: 100%;
	margin: 1.6em 0;
	padding: 0;
	border: 1px solid var(--ag-line);
	border-collapse: collapse;
	border-radius: var(--ag-radius);
	overflow: hidden;
	font-size: 14px;
	background: #fff;
}

.ag-amount-table thead th {
	padding: 11px 14px;
	border: none;
	border-bottom: 1px solid var(--ag-line);
	background: #f2f5fa;
	color: var(--ag-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: left;
}

.ag-amount-table tbody td {
	padding: 13px 14px;
	border: none;
	border-bottom: 1px solid #eef1f6;
	background: none;
	line-height: 1.65;
	color: var(--ag-ink-2);
	vertical-align: top;
}

.ag-amount-table tbody tr:last-child td {
	border-bottom: none;
}

.ag-amount-table tbody td:first-child {
	width: 34%;
	font-weight: 700;
	color: var(--ag-ink);
	white-space: nowrap;
}


/* ==================================================================
   7. 注記
   ================================================================== */

.ag-note {
	margin: .8em 0 0;
	font-size: 12px;
	line-height: 1.75;
	color: var(--ag-mute);
}


/* ==================================================================
   8. 脚注・出典
   ================================================================== */

/* 本文中の上付き番号 */
.ag-sup {
	font-size: 11px;
	font-weight: 700;
	vertical-align: super;
	line-height: 0;
	margin: 0 1px;
}

.ag-sup a {
	display: inline-block;
	min-width: 15px;
	padding: 1px 3px;
	border-radius: 3px;
	background: #eef2f8;
	color: var(--ag-ink-2);
	text-align: center;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.ag-sup a:hover {
	background: var(--ag-ink);
	color: #fff;
}

/* 出典リスト */
.ag-fn {
	margin: 1.2em 0 0;
	padding: 0 0 0 1.9em;
	counter-reset: ag-fn;
	list-style: none;
}

.ag-fn li {
	position: relative;
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--ag-ink-2);
	list-style: none;
	word-break: break-all;
}

.ag-fn li::before {
	counter-increment: ag-fn;
	content: counter(ag-fn) ".";
	position: absolute;
	left: -1.9em;
	top: 0;
	width: 1.5em;
	text-align: right;
	font-weight: 700;
	color: var(--ag-mute);
}

.ag-fn li a {
	color: var(--ag-ink-2);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: #c2cbdb;
}

.ag-fn li a:hover {
	color: var(--ag-accent);
	text-decoration-color: var(--ag-accent);
}

/* 本文へ戻るリンク */
.ag-fn__back {
	margin-left: 4px;
	text-decoration: none !important;
	font-size: 14px;
	color: var(--ag-mute) !important;
}

/* ジャンプ先のハイライト */
.ag-fn li:target,
[id^="ag-fn"]:target {
	background: #fff6d9;
	border-radius: 4px;
}


/* ==================================================================
   9. レスポンシブ
   ================================================================== */

@media (max-width: 600px) {

	.ag-group-wrap__cap {
		flex-direction: column;
		gap: 3px;
		font-size: 14px;
	}

	.ag-group-table {
		font-size: 13px;
		min-width: 420px;
	}

	.ag-group-table thead th,
	.ag-group-table tbody td {
		padding: 11px 9px;
	}

	.ag-group-table tbody td:first-child {
		padding-left: 19px;
	}

	.ag-rate {
		font-size: 17px;
	}

	.ag-alert,
	.ag-deny {
		padding: 14px 14px 14px 42px;
		font-size: 14px;
	}

	.ag-denylist li {
		padding: 12px 13px 12px 42px;
		font-size: 14px;
	}

	.ag-amount-table {
		font-size: 13px;
	}

	.ag-amount-table tbody td:first-child {
		width: 30%;
		white-space: normal;
	}
}


/* ==================================================================
   10. アクセシビリティ
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ag-group-table tbody tr,
	.ag-sup a {
		transition: none;
	}
}

.ag-fn li a:focus-visible,
.ag-sup a:focus-visible {
	outline: 2px solid var(--ag-accent);
	outline-offset: 2px;
}

@media print {
	.ag-group-scroll {
		overflow: visible;
	}
	.ag-group-table {
		min-width: 0;
	}
}


/* ==================================================================
   v2.1.0 追加分 ─ ランキングのブランド表示
   ・比較表（PC=表 / SP=カード）
   ・各社見出し直下のバッジ行
   ================================================================== */

/* ---------- 比較表 ---------- */
.ag-rank {
	margin: 2em 0;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	overflow: hidden;
	background: #fff;
}

.ag-rank__head {
	display: none;
}

.ag-rank__row {
	display: grid;
	grid-template-columns: 44px 1fr;
	grid-template-areas:
		"rank site"
		"rank meta"
		"rate rate"
		"cta  cta";
	gap: 4px 12px;
	padding: 14px 14px 14px 10px;
	border-bottom: 1px solid var(--ag-line);
	align-items: center;
}

.ag-rank__row:last-child { border-bottom: none; }
.ag-rank__row:nth-child(even) { background: var(--ag-paper); }

/* 順位 */
.ag-rank__num {
	grid-area: rank;
	align-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-family: var(--ag-num);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	background: #9aa5b8;
	font-variant-numeric: tabular-nums;
}

.ag-rank__row--1 .ag-rank__num { background: linear-gradient(135deg, #e8b923, #c8961a); }
.ag-rank__row--2 .ag-rank__num { background: linear-gradient(135deg, #b6bfcc, #8f99a8); }
.ag-rank__row--3 .ag-rank__num { background: linear-gradient(135deg, #c58a52, #a06d3c); }

.ag-rank__row--1 { background: linear-gradient(to right, #fffbea, #fff) !important; }

/* サイト名・ロゴ */
.ag-rank__site {
	grid-area: site;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ag-rank__logo {
	flex-shrink: 0;
	width: 76px;
	height: 26px;
	border: 1px solid var(--ag-line);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ag-rank__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ag-rank__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--ag-ink);
	line-height: 1.3;
}

.ag-rank__name .jump { cursor: pointer; }

/* 系列・特典タグ */
.ag-rank__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ag-tag {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	white-space: nowrap;
}

.ag-tag--pw {
	background: #eef2fb;
	color: #3c5488;
	border: 1px solid #d5deef;
}

.ag-tag--br {
	background: #f1f5f2;
	color: #3f6b52;
	border: 1px solid #d6e4db;
}

.ag-tag--mega {
	background: var(--ag-accent-bg);
	color: var(--ag-accent);
	border: 1px solid #f2c9c6;
}

/* 買取率 */
.ag-rank__rates {
	grid-area: rate;
	display: flex;
	gap: 18px;
	padding-top: 4px;
}

.ag-rank__rate {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.ag-rank__rate-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--ag-mute);
}

.ag-rank__rate-val {
	font-family: var(--ag-num);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	color: var(--ag-accent);
	font-variant-numeric: tabular-nums;
}

.ag-rank__rate--sub .ag-rank__rate-val {
	font-size: 15px;
	color: var(--ag-ink-2);
}

/* 申込ボタン */
.ag-rank__cta { grid-area: cta; padding-top: 6px; }

.ag-rank__cta .jump {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #e8952a, #d0741a);
	color: #fff !important;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
}

/* ---------- PC：表組み ---------- */
@media (min-width: 700px) {

	.ag-rank__head {
		display: grid;
		grid-template-columns: 52px minmax(0, 1.9fr) minmax(0, 1.2fr) 92px 92px 128px;
		gap: 12px;
		padding: 11px 16px;
		background: var(--ag-ink);
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .08em;
	}

	.ag-rank__head span:nth-child(n+4) { text-align: center; }

	.ag-rank__row {
		grid-template-columns: 52px minmax(0, 1.9fr) minmax(0, 1.2fr) 92px 92px 128px;
		grid-template-areas: "rank site meta rate1 rate2 cta";
		gap: 12px;
		padding: 12px 16px;
	}

	.ag-rank__num { align-self: center; }
	.ag-rank__meta { flex-direction: column; align-items: flex-start; }

	.ag-rank__rates { display: contents; }
	.ag-rank__rate { grid-area: rate1; flex-direction: column; align-items: center; gap: 2px; padding: 0; }
	.ag-rank__rate--sub { grid-area: rate2; }
	.ag-rank__cta { padding-top: 0; }
}

/* ---------- 各社見出し直下のバッジ行 ---------- */
.ag-sitehead {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: -4px 0 16px;
	padding: 10px 14px;
	border: 1px solid var(--ag-line);
	border-left: 4px solid var(--ag-accent);
	border-radius: 0 var(--ag-radius) var(--ag-radius) 0;
	background: var(--ag-paper);
}

.ag-sitehead__logo {
	width: 84px;
	height: 28px;
	border: 1px solid var(--ag-line);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ag-sitehead__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ag-sitehead__tags { display: flex; gap: 5px; flex-wrap: wrap; }

@media (max-width: 600px) {
	.ag-rank__logo { width: 64px; height: 22px; }
	.ag-rank__name { font-size: 13px; }
	.ag-rank__rate-val { font-size: 17px; }
	.ag-sitehead { gap: 9px; padding: 9px 11px; }
	.ag-sitehead__logo { width: 72px; height: 24px; }
}