:root{--icon-gold:#E8B534;--icon-white:#FFFFFF;--icon-emerald:#108B74;}
body#goldcard{--cc-icon-color:var(--icon-gold);}
body#platinumcard{--cc-icon-color:var(--icon-emerald);}
@charset "UTF-8";
:root {
	--fs-xsmall: 13px;
	--fs-small: 14px;
	--fs-base: 15px;
	--fs-medium: 16px;
	--fs-large: 18px;
	--fs-xlarge: 20px;
	--fs-2xlarge: 22px;
	--fs-3xlarge: 24px;
	--fs-heading: 28px;
	--fs-icon-large: 30px;
	--fs-fv-title: clamp(48px, 3.3vw, 50px);
	--fs-scale-medium: 1.125em;
	--fs-scale-large: 1.25em;
	--fs-scale-title-accent: 1.28em;
}
body#goldcard {
background: #fcfaf5;
color: #1d2a3a;
font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic,  sans-serif;
}

body#goldcard * {
box-sizing: border-box;
}

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

body#goldcard a {
transition: opacity .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body#goldcard #maincontents {
width: min(1480px, calc(100% - 48px));
margin: 28px auto 64px;
padding: 0 0 0 0;
}

/* --------------------------------------------------------------------------
 Header
 -------------------------------------------------------------------------- */
#head > div {
max-width: 1400px;}
#headGnavLinklist {
max-width: 1400px;}
/* --------------------------------------------------------------------------
 First view
 -------------------------------------------------------------------------- */

body#goldcard #fv {
position: relative;
min-width: 1400px;
display: grid;
grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
column-gap: 30px;
row-gap: 0;
align-items: start;
padding: 34px;
overflow: hidden;
border: 1px solid rgba(216, 199, 159, .55);
border-radius: 28px;
background:
radial-gradient(circle at 15% 18%, rgba(242, 169, 0, .14), transparent 30%),
linear-gradient(180deg, #fffefd 0%, #fcfaf5 80%, #fcfaf5 100%);
box-shadow: 0 18px 50px rgba(29, 42, 58, .08);
}

body#goldcard #fv::before {
content: "";
position: absolute;
z-index: 0;
width: 640px;
height: 390px;
left: 20px;
top: 10px;
background: url("../../images/special/creditcard/fv-bg-pc.png") no-repeat center / contain;
opacity: 1;
pointer-events: none;
}

body#goldcard #fv > div {
position: relative;
z-index: 1;
min-width: 0;
}

body#goldcard #fv > div:nth-of-type(1) {
padding-top: 4px;
}

body#goldcard #fv span,
body#goldcard #fv a {
display: inline-block;
}

body#goldcard #fv a {
text-decoration: none;
}

body#goldcard #fv h1 {
	width: fit-content;
	margin: 0;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	padding: 0 22px;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 8px 50%);
	background: linear-gradient(90deg, #ffd36a 0%, #f6e3a3 100%);
	color: #1d2a3a;
	font-size: var(--fs-large);
	font-weight: bold;
	line-height: 1;
	letter-spacing: .03em;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

body#goldcard #fv h1 span {
display: inline;
}

body#goldcard #fv .fv-lead > p:nth-of-type(1) {
margin: 22px 0 0;
color: #1d2a3a;
font-size: var(--fs-fv-title);
font-weight: bold;
line-height: 1.36;
letter-spacing: .02em;
}

body#goldcard #fv .fv-lead > p:nth-of-type(1) span {
display: block;
}

body#goldcard #fv .fv-lead > p:nth-of-type(1) span:nth-child(2) em{
color: #f2a900;
text-shadow: 0 8px 20px rgba(242, 169, 0, .12);
}

body#goldcard #fv .fv-lead > p:nth-of-type(2) {
margin: 16px 0 0;
color: #4a5568;
font-size: var(--fs-medium);
font-weight: 700;
line-height: 1.85;
}

body#goldcard #fv .fv-lead > p:nth-of-type(2) span {
display: block;
}

body#goldcard #comparison-switcher-1,
body#goldcard #comparison-switcher-2 {
width: min(100%, 452px);
}

body#goldcard #comparison-switcher-1 {
margin-top: 24px;
padding: 16px;
border: 1px solid #e8e8e8;
border-radius: 24px 24px 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 250, 240, .98) 100%);
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}

body#goldcard #coparison-starter {
position: relative;
width: 100%;
min-height: 58px;
padding: 0 48px 0 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
color: #fff;
box-shadow: 0 18px 34px rgba(6, 29, 85, .26);
font-size: var(--fs-medium);
font-weight: bold;
letter-spacing: .02em;
}

body#goldcard #coparison-starter::before {
content: "";
position: absolute;
left: 11px;
top: 50%;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, .95) url("../../images/special/creditcard/icons/search-gold.svg") no-repeat center / 24px 24px;
color: #0b3478;
transform: translateY(-50%);
font-size: var(--fs-large);
}

body#goldcard #coparison-starter::after {
content: "";
position: absolute;
right: 22px;
top: 50%;
color: #fff;
transform: translateY(-50%);
font-size: var(--fs-xsmall);
line-height: 1;
width: 22px;
height: 22px;
-webkit-mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; background-color: var(--icon-white);
}

body#goldcard #coparison-starter:hover {
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
transform: translateY(-1px);
}

body#goldcard #comparison-switcher-1 > div {
display: none;
margin-top: 14px;
padding: 14px;
border: 1px solid #e8e8e8;
border-radius: 14px;
background: #fff;
}

body#goldcard #comparison-switcher-1 > div::before {
content: "比較したい条件を選択してください";
display: block;
margin: 0 0 10px;
color: #687385;
font-size: var(--fs-xsmall);
font-weight: bold;
}

body#goldcard .comparison-switcher ul {
margin: 0;
padding: 0;
list-style: none;
}

body#goldcard #comparison-switcher-1 ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

body#goldcard #comparison-switcher-1 li {
flex: 1 1 calc(33.333% - 8px);
}

body#goldcard #comparison-switcher-1 li a {
min-height: 38px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fffaf0;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
text-align: center;
}

body#goldcard #comparison-switcher-1 li.selected a,
body#goldcard #comparison-switcher-1 li a:hover {
border-color: #f2a900;
background: #fff4d6;
transform: translateY(-1px);
}

body#goldcard #comparison-switcher-2 {
margin-top: 0;
padding: 0 16px 16px;
border: 1px solid #e8e8e8;
border-top: 0;
border-radius: 0 0 24px 24px;
background: linear-gradient(180deg, rgba(255, 250, 240, .98) 0%, rgba(255, 255, 255, .94) 100%);
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}

body#goldcard #comparison-switcher-2 > span {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding-top: 16px;
border-top: 1px solid #e8e8e8;
color: #1d2a3a;
font-size: var(--fs-base);
font-weight: bold;
}

body#goldcard #comparison-switcher-2 > span::before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 999px;
background: #f2a900;
box-shadow: 0 0 0 5px rgba(242, 169, 0, .16);
}

body#goldcard #comparison-switcher-2 ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

body#goldcard #fv li[data-comparison="0"] {
display: none;
}

body#goldcard #comparison-switcher-2 li a {
position: relative;
min-height: 126px;
padding: 13px 12px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border: 1px solid #e8e8e8;
border-radius: 10px;
background: #fff;
color: #1d2a3a;
text-align: center;
box-shadow: 0 8px 18px rgba(29, 42, 58, .05);
}

body#goldcard #comparison-switcher-2 li a::before {
width: 42px;
height: 42px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: #fff4d6;
color: #0a2463;
font-size: var(--fs-xlarge);
}

body#goldcard #comparison-switcher-2 li.wallet a::before { content: ""; }
body#goldcard #comparison-switcher-2 li.gift a::before { content: ""; }
body#goldcard #comparison-switcher-2 li.point a::before { content: ""; }
body#goldcard #comparison-switcher-2 li.lounge a::before { content: ""; }

body#goldcard #comparison-switcher-2 li a > span:nth-of-type(1) {
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.45;
}

body#goldcard #comparison-switcher-2 li a > span:nth-of-type(2) {
margin-top: 5px;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: 700;
line-height: 1.55;
}

body#goldcard #comparison-switcher-2 li.selected a,
body#goldcard #comparison-switcher-2 li a:hover {
border-color: #f2a900;
background: #fff4d6;
transform: translateY(-2px);
}

body#goldcard #comparison-switcher-2 + a {
width: min(100%, 452px);
min-height: 82px;
margin-top: 18px;
padding: 15px 18px 15px 78px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
color: #1d2a3a;
}

body#goldcard #comparison-switcher-2 + a::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff4d6;
transform: translateY(-50%);
font-size: var(--fs-2xlarge);
}

body#goldcard #comparison-switcher-2 + a::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #f2a900;
font-size: var(--fs-icon-large);
}

body#goldcard #comparison-switcher-2 + a span:nth-child(1) {
color: #1d2a3a;
font-size: var(--fs-base);
font-weight: bold;
}

body#goldcard #comparison-switcher-2 + a span:nth-child(n+2) {
margin-top: 2px;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: 700;
line-height: 1.45;
}

body#goldcard #comparison-switcher-2 + a:hover {
border-color: #f2a900;
transform: translateY(-1px);
}

/* Pickup comparison table */
body#goldcard #fv > .fv-pickup {
min-width: 0;
}

body#goldcard #pickup {
position: relative;
overflow: hidden;
border: 1px solid #e8e8e8;
border-radius: 20px;
background: rgba(255, 255, 255, .25);
box-shadow: 0 18px 50px rgba(29, 42, 58, .10);
}

body#goldcard #pickup h2 {
margin: 0;
padding: 22px 28px 4px;
color: #1d2a3a;
font-size: var(--fs-3xlarge);
line-height: 1.5;
font-weight: bold;
text-align: center;
letter-spacing: .02em;
}

body#goldcard #pickup h2::after {
content: "";
width: 700px;
height: 3px;
margin: 10px auto 0;
display: block;
border-radius: 999px;
background: #f2a900;
}
body#goldcard #pickup h2 em {
font-weight: bold;
color:#f2a900;
}
body#goldcard #pickup > div {
max-height: 760px;
margin-top: 14px;
overflow: auto;
padding: 0 18px 18px;
}

body#goldcard #pickup table {
width: 100%;
min-width: 690px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}

body#goldcard #pickup table th,
body#goldcard #pickup table td {
border: 0;
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
vertical-align: top;
}

body#goldcard #pickup table tr > th:first-child,
body#goldcard #pickup table tr > td:first-child {
border-left: 1px solid #e8e8e8;
}

body#goldcard #pickup table thead tr:first-child > th {
border-top: 1px solid #e8e8e8;
}

body#goldcard #pickup table thead th {
padding: 8px 8px 0;
background: #fff;
text-align: center;
}

body#goldcard #pickup table thead tr:nth-child(1) th {
position: sticky;
top: 0;
z-index: 5;
padding-top: 12px;
background: #fff;
background-clip: padding-box;
}

body#goldcard #pickup table thead tr:nth-child(1) th span:nth-child(1) {
display: block;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.4;
}

body#goldcard #pickup table thead tr:nth-child(1) th span:nth-child(2) {
display: block;
margin-top: 4px;
color: #1d2a3a;
font-size: var(--fs-medium);
font-weight: bold;
line-height: 1.45;
}

body#goldcard #pickup table thead tr:nth-child(2) th {
padding-top: 8px;
padding-bottom: 8px;
background: #fff;
}

body#goldcard #pickup table thead tr:nth-child(2) th span {
position: relative;
width: fit-content;
max-width: 94%;
min-height: 30px;
margin: 0 auto 10px;
padding: 6px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #e8b534;
border-radius: 999px;
background: #fff;
color: #f97316;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.35;
}

body#goldcard #pickup table thead tr:nth-child(2) th img {
width: 180px;
margin: 0 auto;
display: block;
border-radius: 10px;
box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

body#goldcard #pickup table thead tr:nth-child(3) th {
padding: 12px 8px 14px;
border-bottom: 1px solid #e8e8e8;
background: #fff;
}


body#goldcard #pickup table thead tr:nth-child(3) th a {
min-width: 130px;
min-height: 34px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d8c79f;
border-radius: 999px;
background: #fff;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
}

body#goldcard #pickup table thead tr:nth-child(3) th a::after {
content: "";
margin-left: 6px;
color: #f2a900;
font-size: var(--fs-xsmall);
}

body#goldcard #pickup table thead tr:nth-child(3) th a:hover {
border-color: #f2a900;
background: #fff4d6;
}

body#goldcard #pickup table tbody[data-comparison="1"],
body#goldcard #pickup table tbody[data-comparison="2"],
body#goldcard #pickup table tbody[data-comparison="3"],
body#goldcard #pickup table tbody[data-comparison="4"],
body#goldcard #pickup table tbody[data-comparison="5"],
body#goldcard #pickup table tbody[data-comparison="6"] {
display: none;
}

body#goldcard #pickup table tbody td {
border-bottom: 1px solid #e8e8e8;
background: #fff;
}

body#goldcard #pickup table tbody tr:last-child td:first-child { border-radius: 0; }
body#goldcard #pickup table tbody tr:last-child td:last-child { border-radius: 0; }
body#goldcard #pickup table tbody tr:last-child td { border-bottom: 1px solid #e8e8e8; }
body#goldcard #pickup table tbody td:first-child { border-left: 1px solid #e8e8e8; }
body#goldcard #pickup table tbody td:last-child { border-right: 1px solid #e8e8e8; }

body#goldcard #pickup table tbody td > div {
	min-height: 86px;
	padding: 13px 14px;
	/* display: grid;
	gap: 5px;*/
}

body#goldcard #pickup table tbody td > div > span:nth-child(1) {
	display: block;
	color: #687385;
	font-size: var(--fs-xsmall);
	font-weight: bold;
	line-height: 1.45;
}

body#goldcard #pickup table tbody td > div > span:nth-child(2) {
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: normal;
line-height: 1.6;
}

body#goldcard #pickup table tbody td > div > span:nth-child(3) {
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: 600;
line-height: 1.65;
}

body#goldcard #pickup .clear-conditions {
position: absolute;
right: 18px;
top: 20px;
}

body#goldcard #pickup .clear-conditions a {
padding: 6px 12px;
display: inline-flex;
align-items: center;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fff;
color: #687385;
font-size: var(--fs-xsmall);
font-weight: 800;
}

body#goldcard #pickup + div {
margin-top: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #1d2a3a !important;
border: 1px solid #e8e8e8 !important;
border-top: 0 !important;
border-radius: 0 0 20px 20px !important;
background: rgba(255,255,255,.92) !important;
}

body#goldcard #pickup + div span {
font-size: var(--fs-xsmall);
font-weight: bold;
}

body#goldcard #pickup + div a {
min-width: 128px;
min-height: 36px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
color: #0b3478 !important;
font-size: var(--fs-xsmall);
font-weight: bold;
box-shadow: 0 10px 20px rgba(6, 29, 85, .18);
border-bottom: 1px solid #d8c79f !important;
}

body#goldcard #pickup + div a::after {
content: "";
margin-left: 7px;
font-size: var(--fs-xsmall);
line-height: 1;
width: 15px;
height: 15px;
-webkit-mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; background-color: var(--icon-white);
-webkit-mask-image: url("../../images/special/creditcard/icons/chevron-right.svg") !important; mask-image: url("../../images/special/creditcard/icons/chevron-right.svg") !important; background-color: var(--icon-gold) !important;
}

body#goldcard #pickup + div a:hover {
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
 Product list
 -------------------------------------------------------------------------- */

body#goldcard #items,
body#goldcard #article,
body#goldcard #supervisor-comment {
margin-top: 52px;
}

body#goldcard #items > h2,
body#goldcard .cc-sectionTitle {
margin: 0;
color: #1d2a3a;
font-size: var(--fs-heading);
line-height: 1.45;
font-weight: bold;
text-align: center;
letter-spacing: .02em;
}

body#goldcard #items > h2::after,
body#goldcard .cc-sectionTitle::after {
content: "";
width: 900px;
height: 3px;
margin: 12px auto 0;
display: block;
border-radius: 999px;
background: #f2a900;
}

body#goldcard #items > span,
body#goldcard .cc-sectionLead {
max-width: 820px;
margin: 14px auto 0;
display: block;
color: #4a5568;
font-size: var(--fs-small);
font-weight: 700;
line-height: 1.9;
text-align: center;
}

body#goldcard #items > ul {
margin: 32px auto 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: 22px;
max-width: 980px;
}

body#goldcard #items > ul > li {
min-width: 0;
padding: 24px;
display: flex;
flex-direction: column;
border: 1px solid #e8e8e8;
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}

body#goldcard #items > ul > li > div {
display: flex;
flex-direction: column;
}

body#goldcard #items > ul > li > div > span {
display: block;
}

body#goldcard #items > ul > li > div > span:nth-of-type(4) {
order: -1;
}

body#goldcard #items > ul > li > div > span:nth-of-type(4) img {
width: auto;
height: auto;
max-width: 280px;
max-height: 280px;
margin: 0 auto 15px;
display: block;
border-radius: 10px;
box-shadow: 0 8px 18px rgba(0, 0, 0, .10);
}

body#goldcard #items > ul > li > div > span:nth-of-type(1) {
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.45;
}

body#goldcard #items > ul > li > div > span:nth-of-type(2) {
margin-top: 4px;
color: #1d2a3a;
font-size: var(--fs-3xlarge);
font-weight: bold;
line-height: 1.45;
}

body#goldcard #items > ul > li > div > span:nth-of-type(3) {
width: fit-content;
margin-top: 10px;
padding: 7px 12px;
border: 2px solid #e8b534;
border-radius: 999px;
background: #fff;
color: #f97316;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.35;
}

body#goldcard #items > ul > li > span.application {
order: 1;
margin: auto;
padding-top: 18px;
width: 50%;
}

body#goldcard #items > ul > li > span.application a {
min-height: 38px;
width: 100%;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d8c79f;
border-radius: 999px;
background: #fff;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
text-decoration: none;
}

body#goldcard #items > ul > li > span.application a::after {
content: "";
margin-left: 7px;
color: #f2a900;
}

body#goldcard #items > ul > li > span.application a:hover {
border-color: #f2a900;
background: #fff4d6;
}

body#goldcard #items > ul > li > dl {
margin: 16px 0 0;
display: grid;
gap: 10px;
}

body#goldcard #items > ul > li > dl:nth-of-type(1) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

body#goldcard #items > ul > li > dl:nth-of-type(2) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

body#goldcard #items > ul > li > dl > div {
min-width: 0;
display: flex;
flex-direction: column;
}

body#goldcard #items > ul > li > dl dt {
padding: 7px 9px;
border: 1px solid #e8e8e8;
border-radius: 8px 8px 0 0;
background: #f8f3e8;
color: #4a5568;
font-size: var(--fs-small);
font-weight: bold;
line-height: 1.45;
text-align: center;
}

body#goldcard #items > ul > li > dl dd {
flex: 1 1 auto;
margin: 0;
padding: 9px;
border: 1px solid #e8e8e8;
border-top: 0;
border-radius: 0 0 8px 8px;
background: #fff;
color: #1d2a3a;
font-size: var(--fs-small);
font-weight: normal;
line-height: 1.55;
text-align: center;
}

body#goldcard #items > ul > li > dl dd a.modal-open {
margin-left: 5px;
color: #0b3478;
font-size: var(--fs-small);
font-weight: bold;
text-decoration: underline;
}

body#goldcard #items > ul > li > dl + span.prText {
margin-top: 14px;
padding: 12px 14px;
border-radius: 10px;
background: #fffaf0;
color: #4a5568;
font-size: var(--fs-small);
font-weight: normal;
line-height: 1.4;
}
/* 文字修飾 */
#items em {
color: #f97316;
font-weight: bold;
font-style: normal;
}
#items .underline { text-decoration: underline; }
#items .bold { font-weight: bold; }
#items .fs-large { font-size: var(--fs-scale-large); }
#items .fs-medium { font-size: var(--fs-scale-medium); }
/* --------------------------------------------------------------------------
Modal
 -------------------------------------------------------------------------- */
body#goldcard #items div.modal { width: 540px;}
body#goldcard #items div.modal > div > span {
display: block;
text-align: left;
}

body#goldcard #items div.modal > div > span:nth-of-type(1) {
margin-bottom: 10px;
color: #1d2a3a;
font-size: var(--fs-large);
font-weight: bold;
}

body#goldcard #items div.modal > div > span:nth-of-type(2) {
margin-bottom: 8px;
color: #f97316;
font-weight: bold;
}

/* --------------------------------------------------------------------------
 Article (reading content — shared styles for gold & platinum)
 -------------------------------------------------------------------------- */

body#goldcard #article {
padding: 54px 0 0;
border-top: 1px solid rgba(216, 199, 159, .45);
}
body#goldcard .cc-section__inner,
body#platinumcard .cc-section__inner {
max-width: 980px;
margin: 0 auto;
}
body#goldcard .cc-outline,
body#platinumcard .cc-outline {
max-width: 920px;
margin: 30px auto 0;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
body#goldcard .cc-pointBox,
body#goldcard .cc-articleBox,
body#platinumcard .cc-pointBox,
body#platinumcard .cc-articleBox {
padding: 24px;
border: 1px solid #e8e8e8;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}
body#goldcard .cc-pointBox__title,
body#goldcard .cc-articleBox__title,
body#platinumcard .cc-pointBox__title,
body#platinumcard .cc-articleBox__title {
margin: 0 0 14px;
color: #1d2a3a;
font-size: var(--fs-large);
font-weight: bold;
}
body#goldcard .cc-pointList,
body#goldcard .cc-articleList,
body#platinumcard .cc-pointList,
body#platinumcard .cc-articleList {
margin: 0;
padding: 0;
list-style: none;
}
body#goldcard .cc-pointList,
body#platinumcard .cc-pointList {
display: grid;
gap: 12px;
}
body#goldcard .cc-pointList li,
body#platinumcard .cc-pointList li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
color: #4a5568;
font-size: var(--fs-small);
font-weight: 700;
line-height: 1.75;
}
body#goldcard .cc-icon,
body#platinumcard .cc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
background-position: center; -webkit-mask-position: center; mask-position: center;
background-size: contain; -webkit-mask-size: contain; mask-size: contain;
}
body#goldcard .cc-icon--check-circle {
width: 22px;
height: 22px;
margin-top: .25em;
border-radius: 50%;
background: #fff4d6;
color: #f97316;
font-size: var(--fs-xsmall);
font-weight: bold;
background-image: url("../../images/special/creditcard/icons/check-circle-gold.svg");
}
body#goldcard .cc-icon--check-circle::before,
body#platinumcard .cc-icon--check-circle::before { content: ""; }
body#goldcard .cc-icon--chevron-right::before,
body#platinumcard .cc-icon--chevron-right::before { content: ""; }
body#goldcard .cc-icon--external::before,
body#platinumcard .cc-icon--external::before { content: ""; }
body#goldcard .cc-articleList,
body#platinumcard .cc-articleList {
display: grid;
gap: 10px;
}
body#goldcard .cc-articleList a,
body#platinumcard .cc-articleList a {
min-height: 48px;
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid #e8e8e8;
border-radius: 8px;
background: #fff;
color: #1d2a3a;
text-decoration: none;
font-size: var(--fs-small);
font-weight: 800;
}
body#goldcard .cc-articleList a .cc-icon,
body#platinumcard .cc-articleList a .cc-icon {
color: #f2a900;
font-size: var(--fs-2xlarge);
}
body#goldcard .cc-articleList a:hover,
body#platinumcard .cc-articleList a:hover {
border-color: #f2a900;
background: #fff4d6;
}
body#goldcard .cc-articleBody,
body#platinumcard .cc-articleBody {
max-width: 980px;
margin: 34px auto 0;
display: grid;
gap: 26px;
}
body#goldcard .cc-articleSection,
body#platinumcard .cc-articleSection {
padding: 34px 38px;
border: 1px solid #e8e8e8;
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
scroll-margin-top: 96px;
}
body#goldcard .cc-articleSection__header,
body#platinumcard .cc-articleSection__header {
margin-bottom: 20px;
}
body#goldcard .cc-articleSection__label,
body#platinumcard .cc-articleSection__label {
margin: 0 0 10px;
color: #f97316;
font-size: var(--fs-xsmall);
font-weight: bold;
letter-spacing: .12em;
}
body#goldcard .cc-articleSection__title,
body#goldcard .cc-articleSummary__title {
margin: 0;
color: #1d2a3a;
font-size: var(--fs-heading);
line-height: 1.52;
font-weight: bold;
letter-spacing: -0.015em;
}
body#goldcard .cc-articleSection__lead,
body#platinumcard .cc-articleSection__lead {
margin: 16px 0 0;
color: #4a5568;
font-size: var(--fs-medium);
font-weight: 800;
line-height: 1.9;
}
body#goldcard .cc-articleSection__text,
body#goldcard .cc-longReadItem__text,
body#platinumcard .cc-articleSection__text,
body#platinumcard .cc-longReadItem__text {
display: grid;
gap: 16px;
}
body#goldcard .cc-articleSection__text p,
body#goldcard .cc-longReadItem__text p,
body#goldcard .cc-articleSummary__text p,
body#goldcard .cc-faqItem__answer p,
body#platinumcard .cc-articleSection__text p,
body#platinumcard .cc-longReadItem__text p,
body#platinumcard .cc-articleSummary__text p,
body#platinumcard .cc-faqItem__answer p {
margin: 0;
color: #4a5568;
font-size: var(--fs-medium);
font-weight: normal;
line-height: 2.05;
}
body#goldcard .cc-readCardGrid,
body#platinumcard .cc-readCardGrid {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
body#goldcard .cc-readCard,
body#platinumcard .cc-readCard {
padding: 18px;
border: 1px solid #e8e8e8;
border-radius: 10px;
background: #f8f3e8;
}
body#goldcard .cc-readCard__title,
body#platinumcard .cc-readCard__title {
margin: 0;
color: #1d2a3a;
font-size: var(--fs-medium);
font-weight: bold;
line-height: 1.55;
}
body#goldcard .cc-readCard__text,
body#platinumcard .cc-readCard__text {
margin: 8px 0 0;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: 700;
line-height: 1.85;
}
body#goldcard .cc-articleSection--longRead,
body#platinumcard .cc-articleSection--longRead {
padding: 0;
overflow: hidden;
}
body#goldcard .cc-articleSection--longRead > .cc-articleSection__header,
body#platinumcard .cc-articleSection--longRead > .cc-articleSection__header {
margin: 0;
padding: 34px 38px 30px;
border-bottom: 1px solid #e8e8e8;
background: linear-gradient(135deg, #fff4d6 0%, #fff 76%);
}
body#goldcard .cc-longReadList,
body#platinumcard .cc-longReadList {
display: grid;
}
body#goldcard .cc-longReadItem,
body#platinumcard .cc-longReadItem {
padding: 34px 38px;
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 24px;
border-top: 1px solid #e8e8e8;
background: #fff;
}
body#goldcard .cc-longReadItem:first-child,
body#platinumcard .cc-longReadItem:first-child {
border-top: 0;
}
body#goldcard .cc-longReadItem:nth-child(even),
body#platinumcard .cc-longReadItem:nth-child(even) {
background: #fcfaf5;
}
body#goldcard .cc-longReadItem__number,
body#platinumcard .cc-longReadItem__number {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: #fff4d6;
color: #f97316;
font-size: var(--fs-medium);
font-weight: bold;
line-height: 1;
}
body#goldcard .cc-longReadItem__title,
body#platinumcard .cc-longReadItem__title {
margin: 0;
color: #1d2a3a;
font-size: var(--fs-3xlarge);
line-height: 1.55;
font-weight: bold;
}
body#goldcard .cc-longReadItem__summary,
body#platinumcard .cc-longReadItem__summary {
margin: 14px 0 0;
padding: 12px 16px;
border-radius: 8px;
background: #fff4d6;
color: #1d2a3a;
font-size: var(--fs-small);
font-weight: bold;
line-height: 1.75;
}
body#goldcard .cc-longReadItem__text,
body#platinumcard .cc-longReadItem__text {
margin-top: 22px;
}
body#goldcard .cc-longReadNote,
body#platinumcard .cc-longReadNote {
margin-top: 22px;
padding: 16px 18px;
border-left: 4px solid #f2a900;
border-radius: 8px;
background: #fff4d6;
}
body#goldcard .cc-longReadNote__title,
body#platinumcard .cc-longReadNote__title {
margin: 0 0 7px;
color: #1d2a3a;
font-size: var(--fs-small);
font-weight: bold;
}
body#goldcard .cc-longReadNote p,
body#platinumcard .cc-longReadNote p {
margin: 0;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: 800;
line-height: 1.85;
}
body#goldcard .cc-faqList,
body#platinumcard .cc-faqList {
display: grid;
gap: 12px;
}
body#goldcard .cc-faqItem,
body#platinumcard .cc-faqItem {
border: 1px solid #e8e8e8;
border-radius: 10px;
background: #f8f3e8;
overflow: hidden;
}
body#goldcard .cc-faqItem summary,
body#platinumcard .cc-faqItem summary {
min-height: 56px;
padding: 16px 18px;
cursor: pointer;
color: #1d2a3a;
font-size: var(--fs-base);
font-weight: bold;
line-height: 1.6;
}
body#goldcard .cc-faqItem__answer,
body#platinumcard .cc-faqItem__answer {
padding: 0 18px 18px;
/* CHAPTER6 FAQ: open/close is driven by jQuery (summary click -> slideToggle).
   Start closed here; jQuery reveals via inline display. */
display: none;
}
/* The jQuery handler calls preventDefault, so <details> never gets [open] and the
   browser keeps the panel collapsed no matter what display jQuery sets. Disable that
   native collapse so jQuery's slideToggle fully controls visibility. */
body#goldcard .cc-faqItem::details-content,
body#platinumcard .cc-faqItem::details-content {
content-visibility: visible;
}
body#goldcard .cc-articleSummary,
body#platinumcard .cc-articleSummary {
border-color: #d8c79f;
background: linear-gradient(135deg, #fff4d6 0%, #fff 74%);
}
body#goldcard .cc-articleSummary__text,
body#platinumcard .cc-articleSummary__text {
margin-top: 16px;
display: grid;
gap: 16px;
}
/* Supervisor: keep HTML untouched, only harmonize visual spacing */
body#goldcard #supervisor-comment {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
body#goldcard #supervisor {
max-width: 980px;
margin-top: 26px;
margin-left: auto;
margin-right: auto;
}
body#goldcard #supervisor-comment,
body#goldcard #supervisor div.fpProfile {
padding: 16px;
background-color: #fff;
border: 1px solid #e8e8e8;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}
body#goldcard #supervisor-comment h4,
body#goldcard #supervisor div.fpProfile h4 {
	width: auto;
	border-radius: 4px;
	margin: 5px 4px 10px 6px !important;
	padding: .5em .75em .4em .75em;
	font-size: var(--fs-medium) !important;
	font-weight: bold;
	line-height: 1.6;
	border-left: none; 
background: #f8f3e8;
color: #1d2a3a;
}
body#goldcard #supervisor-comment p {
margin: 20px 20px 0 20px;
}

/* --------------------------------------------------------------------------
 FV condition switcher: preact HTML structure
 -------------------------------------------------------------------------- */

body#goldcard .clear-conditions {
display: none;
}

body#goldcard ul.comparison-switcher {
margin: 0;
padding: 0;
list-style: none;
}

body#goldcard #comparison-switcher {
position: relative;
width: min(100%, 452px);
margin-top: 24px;
padding: 0 !important;
border: 0 !important;
border-radius: 24px;
background: transparent !important;
box-shadow: none !important;
}

body#goldcard #comparison-switcher > span {
display: block;
}

body#goldcard #comparison-switcher > span:first-child {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px !important;
padding-right: 90px !important;
color: #1d2a3a;
font-size: var(--fs-large);
font-weight: bold;
line-height: 1.6 !important;
}

body#goldcard #comparison-switcher > span:first-child::before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 999px;
background: #f2a900;
box-shadow: 0 0 0 5px rgba(242, 169, 0, .16);
display: none !important;
}

body#goldcard #comparison-switcher > span.clear-conditions {
position: absolute;
right: 16px;
top: 16px;
margin: 0;
}

body#goldcard #comparison-switcher > span.clear-conditions a {
padding: 6px 12px;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fff;
color: #687385;
font-size: var(--fs-xsmall);
font-weight: 800;
line-height: 1.3;
}

body#goldcard #comparison-switcher > span:nth-of-type(3) {
margin-top: 6px;
color: #687385;
font-size: var(--fs-xsmall);
font-weight: 700;
line-height: 1.7;
margin: -6px 0 14px !important;
}

body#goldcard #comparison-switcher > div {
margin-top: 0 !important;
}

body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}

body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li:not([data-comparison="0"]) a {
position: relative;
min-height: 186px !important;
padding: 72px 10px 16px !important;
display: flex;
flex-direction: column;
align-items: center !important;
justify-content: flex-start !important;
border: 1px solid #e8e8e8;
border-radius: 10px !important;
background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,248,229,.96) 100%) !important;
color: #1d2a3a;
text-align: center !important;
box-shadow: 0 10px 22px rgba(29,42,58,.07) !important;
border-color: rgba(216,199,159,.72) !important;
}

body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li:not([data-comparison="0"]) a::before {
position: absolute;
left: 50% !important;
top: 18px !important;
width: 44px !important;
height: 44px !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px !important;
background: #fff4d6;
color: #0a2463;
transform: translateX(-50%) !important;
font-size: var(--fs-large);
background-color: rgba(242,169,0,.14) !important;
background-size: 27px 27px !important; -webkit-mask-size: 27px 27px !important; mask-size: 27px 27px !important;
box-shadow: 0 0 0 1px rgba(216,199,159,.52), 0 10px 20px rgba(242,169,0,.13) !important;
}

body#goldcard #comparison-switcher li.wallet a::before { content: ""; }
body#goldcard #comparison-switcher li.gift a::before { content: ""; }
body#goldcard #comparison-switcher li.point a::before { content: ""; }

body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(1) {
color: #1d2a3a;
font-size: var(--fs-small) !important;
font-weight: bold;
line-height: 1.55 !important;
text-align: center !important;
}

body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(2) {
margin-top: 9px !important;
color: #4a5568;
font-size: var(--fs-xsmall) !important;
font-weight: 700;
line-height: 1.65 !important;
text-align: center !important;
}

body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.selected a,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a:hover {
border-color: #f2a900 !important;
background: linear-gradient(180deg, #fff4d6 0%, #fffaf0 100%) !important;
transform: translateY(-2px) !important;
}

body#goldcard #comparison-switcher-more {
width: fit-content;
margin: 12px auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #0b3478;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.5;
}


body#goldcard #comparison-switcher-more:hover {
opacity: .78;
}

body#goldcard #comparison-switcher-more + ul.comparison-switcher {
display: none;
margin: 10px 0 0;
padding: 10px;
border: 1px dashed #d8c79f;
border-radius: 14px;
background: #fff;
}

body#goldcard #comparison-switcher-more + ul.comparison-switcher li {
display: inline-block;
margin: 4px 5px 4px 0;
}

body#goldcard #comparison-switcher-more + ul.comparison-switcher li a {
min-height: 34px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fffaf0;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.3;
text-align: center;
}

body#goldcard #comparison-switcher-more + ul.comparison-switcher li.selected a,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li a:hover {
border-color: #f2a900;
background: #fff4d6;
}

body#goldcard #comparison-switcher + a {
width: min(100%, 452px);
min-height: 82px;
margin-top: 18px;
padding: 15px 18px 15px 78px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
color: #1d2a3a;
}

body#goldcard #comparison-switcher + a::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff4d6;
transform: translateY(-50%);
font-size: var(--fs-2xlarge);
}

body#goldcard #comparison-switcher + a::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #f2a900;
font-size: var(--fs-icon-large);
}

body#goldcard #comparison-switcher + a span:nth-child(1) {
color: #1d2a3a;
font-size: var(--fs-large);
font-weight: bold;
}

body#goldcard #comparison-switcher + a span:nth-child(n+2) {
margin-top: 2px;
color: #4a5568;
font-size: var(--fs-small);
font-weight: 700;
line-height: 1.45;
}

body#goldcard #comparison-switcher + a:hover {
border-color: #f2a900;
transform: translateY(-1px);
}

body#goldcard #pickup table tbody tr.emphasis td > div {
background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
}

body#goldcard #pickup table tbody tr.emphasis td > div > span:nth-child(1) {
	display: block;
	font-weight: bold;
	color: #d88900;
}

body#goldcard #pickup table thead tr:nth-child(3) th a,
body#goldcard #items > ul > li > span.application a {
	border-color: rgb(6, 29, 85);
	background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
	color: #fff;
	font-size: var(--fs-xsmall);
	box-shadow: 0 10px 20px rgba(6, 29, 85, .18);
}

body#goldcard #pickup table thead tr:nth-child(3) th a::before,
body#goldcard #items > ul > li > span.application a::before {
content: none;
color: #fff;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1;
display: none;
}

body#goldcard #pickup table thead tr:nth-child(3) th a::after,
body#goldcard #items > ul > li > span.application a::after {
color: #fff;
font-size: var(--fs-xsmall);
content: "";
width: 15px;
height: 15px;
margin-left: .55em;
display: inline-block;
-webkit-mask: url("../../images/special/creditcard/icons/external.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/external.svg") center / contain no-repeat; background-color: var(--icon-white);
}

body#goldcard #pickup table thead tr:nth-child(3) th a:hover,
body#goldcard #items > ul > li > span.application a:hover {
border-color: rgb(6, 29, 85);
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
transform: translateY(-1px);
}


body#goldcard #items > ul > li > dl:nth-of-type(1),
body#goldcard #items > ul > li > dl:nth-of-type(2) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body#goldcard #items > ul > li > dl.column2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Initial state for condition reset links; jQuery shows these after a condition is selected. */
body#goldcard #fv .clear-conditions {
display: none;
}
body#goldcard #items > ul > li > div + span.application {
order: 0;
margin: 16px auto 0 auto;
padding-top: 0;
width: 50%;
}

/* Back-to-top button: keep the common PC sprite at 100px x 40px. */
body#goldcard #foot #pagetop,
body#goldcard #foot #extraLinks > #pagetop {
width: 100px;
height: 40px;
}

body#goldcard #foot #pagetop img {
display: block;
width: 100px;
height: 40px;
max-width: none;
}


/* --------------------------------------------------------------------------
 Credit card SVG icons and comparison glow effect
 -------------------------------------------------------------------------- */


body#goldcard #comparison-switcher-2 li a::before,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li:not([data-comparison="0"]) a::before {
	content: "";
	background-color: #fff4d6;
	background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	background-position: center; -webkit-mask-position: center; mask-position: center;
	background-size: 26px auto; -webkit-mask-size: 26px auto; mask-size: 26px auto;
}
body#goldcard #comparison-switcher-2 li.wallet a::before,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.wallet a::before,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li.wallet a::before { background-image: url("../../images/special/creditcard/icons/wallet-gold.svg") !important; }
body#goldcard #comparison-switcher-2 li.gift a::before,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.gift a::before,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li.gift a::before { background-image: url("../../images/special/creditcard/icons/gift-gold.svg") !important; }
body#goldcard #comparison-switcher-2 li.point a::before,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.point a::before,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li.point a::before { background-image: url("../../images/special/creditcard/icons/point-gold.svg") !important; }
body#goldcard #comparison-switcher-2 li.lounge a::before,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.lounge a::before,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li.lounge a::before { background-image: url("../../images/special/creditcard/icons/lounge-gold.svg") !important; }
body#goldcard #comparison-switcher-2 li.family a::before,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.family a::before,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li.family a::before { background-image: url("../../images/special/creditcard/icons/family-gold.svg") !important; }
body#goldcard #comparison-switcher-2 li.conditions a::before,
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.conditions a::before,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li.conditions a::before { background-image: url("../../images/special/creditcard/icons/conditions-gold.svg") !important; }
body#goldcard #comparison-switcher-2 + a::before,
body#goldcard #comparison-switcher + a::before {
content: "";
background: #fff4d6 url("../../images/special/creditcard/icons/book-gold.svg") no-repeat center;
background-size: 34px auto; -webkit-mask-size: 34px auto; mask-size: 34px auto;
}
body#goldcard #comparison-switcher-2 + a::after,
body#goldcard #comparison-switcher + a::after {
content: "";
width: 20px;
height: 20px;
-webkit-mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; background-color: var(--icon-gold);
font-size: var(--fs-xsmall);
}


body#goldcard .cc-icon::before { content: "" !important; }


body#goldcard .cc-icon--chevron-right { -webkit-mask-image: url("../../images/special/creditcard/icons/chevron-right.svg"); mask-image: url("../../images/special/creditcard/icons/chevron-right.svg"); background-color: var(--icon-gold); }
body#goldcard .cc-icon--external { -webkit-mask-image: url("../../images/special/creditcard/icons/external.svg"); mask-image: url("../../images/special/creditcard/icons/external.svg"); background-color: var(--icon-gold); }
body#goldcard #pickup table tbody[data-comparison="7"],
body#goldcard #pickup table tbody[data-comparison="8"] { display: none; }
body#goldcard #pickup.is-highlight {
animation: ccGoldPickupGlow .72s ease-out;
}
@keyframes ccGoldPickupGlow {
	0% { box-shadow: 0 18px 50px rgba(29, 42, 58, .10), 0 0 0 0 rgba(232, 181, 52, .82); }
	45% { box-shadow: 0 18px 50px rgba(29, 42, 58, .10), 0 0 0 9px rgba(232, 181, 52, .38), 0 0 38px rgba(232, 181, 52, .34); }
	100% { box-shadow: 0 18px 50px rgba(29, 42, 58, .10), 0 0 0 0 rgba(232, 181, 52, 0); }
}


/* --------------------------------------------------------------------------
 Platinum card page: PC base styles
 -------------------------------------------------------------------------- */

body#platinumcard {
	background: #05080f;
	color: #f8f9fb;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	--platinum-accent: #108b74;
	--platinum-accent-2: #1aa488;
	--platinum-accent-3: #22d4b5;
	--platinum-orange: #ff7043;
	--platinum-gray-bg: #f5f6f8;
}

body#platinumcard * {
box-sizing: border-box;
}

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

body#platinumcard a {
transition: opacity .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body#platinumcard #maincontents {
margin: 28px auto 0 auto;
padding: 0 0;
margin-top: 18px;
}

/* --------------------------------------------------------------------------
 First view
 -------------------------------------------------------------------------- */

body#platinumcard #fv {
	position: relative;
	min-width: 1400px;
	display: grid;
	grid-template-columns: minmax(440px, 490px) minmax(0, 665px);
	column-gap: 32px;
	row-gap: 0;
	align-items: start;
	padding: 22px 0 30px;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	border-color: rgba(255,255,255,.11);
	width: 100%;
	min-height: 860px;
	justify-content: center;
}
body#platinumcard #fv::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 1400px;
  height: calc(100% + 50px);
  left: calc(50% - 700px);
  top: -50px;
  opacity: 1;
  pointer-events: none;
  background-color: #05080f;
  background-image:
    radial-gradient(circle at 76% 18%, rgba(30, 224, 196, .08), transparent 100%),
    linear-gradient(90deg, rgba(3, 8, 15, .93) 0%, rgba(3, 8, 15, .58) 38%, rgba(3, 8, 15, .89) 100%),
    linear-gradient(180deg, rgba(3, 8, 15, .06) 0%, rgba(3, 8, 15, .99) 100%),
    url("../../images/special/creditcard/photos/bg_mv.webp");
  background-repeat: no-repeat,
    no-repeat,
    no-repeat,
    no-repeat; -webkit-mask-repeat: no-repeat,
    no-repeat,
    no-repeat,
    no-repeat; mask-repeat: no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-size: 100% 100%,
    100% 100%,
    100% 100%,
    130% auto; -webkit-mask-size: 100% 100%,
    100% 100%,
    100% 100%,
    130% auto; mask-size: 100% 100%,
    100% 100%,
    100% 100%,
    130% auto;
  background-position: center,
    center,
    center,
    left -481px top -50px; -webkit-mask-position: center,
    center,
    center,
    left -481px top -50px; mask-position: center,
    center,
    center,
    left -481px top -50px;
}



body#platinumcard #fv > div {
position: relative;
z-index: 1;
min-width: 0;
}

body#platinumcard #fv > div:nth-of-type(1) {
padding-top: 0;
}

body#platinumcard #fv span,
body#platinumcard #fv a {
	/* display: inline-block;*/
}

body#platinumcard #fv a {
text-decoration: none;
}

body#platinumcard #fv h1 {
width: fit-content;
margin: 0;
min-height: 38px;
display: inline-flex;
align-items: center;
padding: 0 31px;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 8px 50%);
background: linear-gradient(90deg, #c7ccd4 0%, #f7f7f7 48%, #aeb4bd 100%);
color: #111820;
font-size: var(--fs-large);
font-weight: bold;
line-height: 1;
letter-spacing: .04em;
box-shadow: none;
justify-content: center;
border-radius: 0;
}

body#platinumcard #fv h1 span {
display: inline;
}

body#platinumcard #fv .fv-lead > p:nth-of-type(1) {
margin: 22px 0 0;
color: #fff;
font-size: var(--fs-fv-title);
font-weight: 600;
line-height: 1.22;
letter-spacing: -.03em;
margin-top: 24px;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
text-shadow: 0 2px 14px rgba(0,0,0,.38);
}

body#platinumcard #fv .fv-lead > p:nth-of-type(1) span {
display: block;
}

body#platinumcard #fv .fv-lead > p:nth-of-type(1) span:nth-child(2) em {
color: transparent;
text-shadow: none;
background: linear-gradient(180deg, #ffffff 0%, #c3c6ca 52%, #8e949b 100%);
-webkit-background-clip: text;
background-clip: text;
}

body#platinumcard #fv .fv-lead > p:nth-of-type(2) {
margin: 16px 0 0;
color: rgba(255,255,255,.88);
font-size: var(--fs-medium);
font-weight: 500;
line-height: 1.85;
margin-top: 10px;
}

body#platinumcard #fv .fv-lead > p:nth-of-type(2) span {
display: block;
}

body#platinumcard #comparison-switcher-1,
body#platinumcard #comparison-switcher-2 {
width: min(100%, 452px);
}

body#platinumcard #comparison-switcher-1 {
margin-top: 22px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
width: 474px;
}

body#platinumcard #coparison-starter {
position: relative;
width: 474px;
min-height: 65px;
padding: 0 22px 0 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(90deg, #06786d 0%, #0f957d 100%);
color: #fff;
box-shadow: 0 14px 28px rgba(16,139,116,.28);
font-size: var(--fs-medium);
font-weight: bold;
letter-spacing: .02em;
height: 65px;
}

body#platinumcard #coparison-starter::before {
content: "";
position: absolute;
left: 11px;
top: 50%;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, .95) url("../../images/special/creditcard/icons/search-emerald.svg") no-repeat center / 24px 24px;
color: #0b3478;
transform: translateY(-50%);
font-size: var(--fs-large);
}

body#platinumcard #coparison-starter::after {
content: "";
position: absolute;
right: 22px;
top: 50%;
color: #fff;
transform: translateY(-50%);
font-size: var(--fs-xsmall);
line-height: 1;
width: 22px;
height: 22px;
-webkit-mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; background-color: var(--icon-white);
}

body#platinumcard #coparison-starter:hover {
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
transform: translateY(-1px);
}

body#platinumcard #comparison-switcher-1 > div {
display: none;
margin-top: 14px;
padding: 14px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 14px;
background: rgba(4,14,22,.96);
box-shadow: none;
}

body#platinumcard #comparison-switcher-1 > div::before {
content: "比較したい条件を選択してください";
display: block;
margin: 0 0 10px;
color: rgba(255,255,255,.74);
font-size: var(--fs-xsmall);
font-weight: bold;
}

body#platinumcard .comparison-switcher ul {
margin: 0;
padding: 0;
list-style: none;
}

body#platinumcard #comparison-switcher-1 ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

body#platinumcard #comparison-switcher-1 li {
flex: 1 1 calc(33.333% - 8px);
}

body#platinumcard #comparison-switcher-1 li a {
min-height: 38px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fffaf0;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
text-align: center;
}

body#platinumcard #comparison-switcher-1 li.selected a,
body#platinumcard #comparison-switcher-1 li a:hover {
border-color: #f2a900;
background: #fff4d6;
transform: translateY(-1px);
}

body#platinumcard #comparison-switcher-2 {
margin-top: 0;
padding: 0 16px 16px;
border: 1px solid #e8e8e8;
border-top: 0;
border-radius: 0 0 24px 24px;
background: linear-gradient(180deg, rgba(255, 250, 240, .98) 0%, rgba(255, 255, 255, .94) 100%);
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}

body#platinumcard #comparison-switcher-2 > span {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding-top: 16px;
border-top: 1px solid #e8e8e8;
color: #1d2a3a;
font-size: var(--fs-base);
font-weight: bold;
}

body#platinumcard #comparison-switcher-2 > span::before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 999px;
background: #f2a900;
box-shadow: 0 0 0 5px rgba(242, 169, 0, .16);
}

body#platinumcard #comparison-switcher-2 ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

body#platinumcard #comparison-switcher-2 li a {
position: relative;
min-height: 126px;
padding: 13px 12px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border: 1px solid #e8e8e8;
border-radius: 10px;
background: #fff;
color: #1d2a3a;
text-align: center;
box-shadow: 0 8px 18px rgba(29, 42, 58, .05);
}

body#platinumcard #comparison-switcher-2 li a::before {
width: 42px;
height: 42px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: #fff4d6;
color: #0a2463;
font-size: var(--fs-xlarge);
}

body#platinumcard #comparison-switcher-2 li[data-comparison="1"] a::before { content: ""; }
body#platinumcard #comparison-switcher-2 li[data-comparison="2"] a::before { content: ""; }
body#platinumcard #comparison-switcher-2 li[data-comparison="3"] a::before { content: ""; }
body#platinumcard #comparison-switcher-2 li[data-comparison="4"] a::before { content: ""; }

body#platinumcard #comparison-switcher-2 li a > span {
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.45;
}

body#platinumcard #comparison-switcher-2 li.selected a,
body#platinumcard #comparison-switcher-2 li a:hover {
border-color: #f2a900;
background: #fff4d6;
transform: translateY(-2px);
}

body#platinumcard #comparison-switcher-2 + a {
width: min(100%, 452px);
min-height: 82px;
margin-top: 18px;
padding: 15px 18px 15px 78px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
color: #1d2a3a;
}

body#platinumcard #comparison-switcher-2 + a::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff4d6;
transform: translateY(-50%);
font-size: var(--fs-2xlarge);
}

body#platinumcard #comparison-switcher-2 + a::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #f2a900;
font-size: var(--fs-icon-large);
}

body#platinumcard #comparison-switcher-2 + a span:nth-child(1) {
color: #1d2a3a;
font-size: var(--fs-base);
font-weight: bold;
}

body#platinumcard #comparison-switcher-2 + a span:nth-child(n+2) {
margin-top: 2px;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: 700;
line-height: 1.45;
}

body#platinumcard #comparison-switcher-2 + a:hover {
border-color: #f2a900;
transform: translateY(-1px);
}

/* Pickup comparison table */
body#platinumcard #fv > .fv-pickup {
min-width: 665px;
width: 665px;
}

body#platinumcard #pickup {
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,.20);
border-radius: 8px;
background: rgba(3,8,15,.56);
box-shadow: none;
border-color: rgba(255,255,255,.12);
min-height: 760px;
backdrop-filter: blur(3px);
}

body#platinumcard #pickup h2 {
	margin: 0;
	padding: 16px 100px 10px 100px;
	color: #fff;
	font-size: var(--fs-3xlarge);
	line-height: 1.1;
	font-weight: bold;
	text-align: center;
	letter-spacing: -0.025em;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
body#platinumcard #pickup h2::after {
	content: "";
	width: 100%;
	height: 3px;
	margin: 10px auto 0;
	display: block;
	border-radius: 999px;
	background: var(--platinum-accent);
}

body#platinumcard #pickup > div {
max-height: none;
margin-top: 4px;
overflow: visible;
padding: 0 0 0;
}

body#platinumcard #pickup table {
width: 100%;
min-width: 0;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
border-left: 0;
border-right: 0;
}

body#platinumcard #pickup table th,
body#platinumcard #pickup table td {
vertical-align: top;
}

body#platinumcard #pickup table thead th {
padding: 8px 8px 0;
background: #fff;
text-align: center;
}

body#platinumcard #pickup table thead tr:nth-child(1) th {
position: static;
top: 0;
z-index: 5;
padding-top: 10px;
border-top: 1px solid #e8e8e8;
background: #fff;
}

body#platinumcard #pickup table thead tr:nth-child(1) th:first-child { border-left: 1px solid #e8e8e8; border-radius: 14px 0 0 0; }
body#platinumcard #pickup table thead tr:nth-child(1) th:last-child { border-right: 1px solid #e8e8e8; border-radius: 0 14px 0 0; }

body#platinumcard #pickup table thead th + th,
body#platinumcard #pickup table tbody td + td {
border-left: 1px solid #e8e8e8;
border-left-color: rgba(255,255,255,.18);
}

body#platinumcard #pickup table thead tr:nth-child(1) th span:nth-child(1) {
display: block;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.4;
}

body#platinumcard #pickup table thead tr:nth-child(1) th span:nth-child(2) {
	display: block;
	margin-top: 4px;
	color: #1d2a3a;
	font-size: var(--fs-medium);
	font-weight: bold;
	line-height: 1.45;
	min-height: 30px;
	letter-spacing: -0.05em;
}

body#platinumcard #pickup table thead tr:nth-child(2) th {
padding-top: 8px;
background: #fff;
}

body#platinumcard #pickup table thead tr:nth-child(2) th span {
position: relative;
width: fit-content;
max-width: 94%;
min-height: 46px;
margin: 8px auto 14px;
padding: 8px 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: linear-gradient(180deg, #ffffff 0%, #e5e2dc 100%);
color: #111820;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.35;
border-color: #108b74;
}

body#platinumcard #pickup table thead tr:nth-child(2) th img {
	width: 182px;
	margin: 0 auto;
	display: block;
	border-radius: 9px;
	box-shadow: 0 3px 12px rgba(255,255,255, 0.35);
	max-height: 120px;
}

body#platinumcard #pickup table thead tr:nth-child(3) th {
padding: 12px 8px 14px;
border-bottom: 1px solid #e8e8e8;
background: #fff;
}

body#platinumcard #pickup table thead tr:nth-child(3) th:first-child { border-left: 1px solid #e8e8e8; }
body#platinumcard #pickup table thead tr:nth-child(3) th:last-child { border-right: 1px solid #e8e8e8; }

body#platinumcard #pickup table thead tr:nth-child(3) th a {
min-width: 130px;
min-height: 34px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d8c79f;
border-radius: 999px;
background: #fff;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
}

body#platinumcard #pickup table thead tr:nth-child(3) th a::after {
content: "";
margin-left: 6px;
color: #f2a900;
font-size: var(--fs-xsmall);
}

body#platinumcard #pickup table thead tr:nth-child(3) th a:hover {
border-color: #f2a900;
background: #fff4d6;
}

body#platinumcard #pickup table tbody[data-comparison="1"],
body#platinumcard #pickup table tbody[data-comparison="2"],
body#platinumcard #pickup table tbody[data-comparison="3"],
body#platinumcard #pickup table tbody[data-comparison="4"],
body#platinumcard #pickup table tbody[data-comparison="5"],
body#platinumcard #pickup table tbody[data-comparison="6"] {
display: none;
}

body#platinumcard #pickup table tbody td {
border-bottom: 1px solid #e8e8e8;
background: #fff;
}

body#platinumcard #pickup table tbody tr:last-child td:first-child { border-radius: 0 0 0 14px; }
body#platinumcard #pickup table tbody tr:last-child td:last-child { border-radius: 0 0 14px 0; }
body#platinumcard #pickup table tbody tr:last-child td {
border-bottom: 0 !important;
}
body#platinumcard #pickup table tbody td:first-child { border-left: 1px solid #e8e8e8; }
body#platinumcard #pickup table tbody td:last-child { border-right: 1px solid #e8e8e8; }

body#platinumcard #pickup table tbody td > div {
	min-height: 76px;
	padding: 10px 12px;
	/*display: grid;
	gap: 5px;*/
	background: rgba(255,255,255,.025);
}

body#platinumcard #pickup table tbody td > div > span:nth-child(1) {
	display: block;
	color: rgba(255,255,255,.72);
	font-size: var(--fs-xsmall);
	font-weight: 500;
	line-height: 1.45;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

body#platinumcard #pickup table tbody td > div > span:nth-child(2) {
color: rgba(255,255,255,.93);
font-size: var(--fs-xsmall);
font-weight: 500;
line-height: 1.6;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

body#platinumcard #pickup table tbody td > div > span:nth-child(3) {
color: rgba(255,255,255,.68);
font-size: var(--fs-xsmall);
font-weight: 600;
line-height: 1.65;
}

body#platinumcard #pickup .clear-conditions {
position: absolute;
right: 18px;
top: 20px;
}

body#platinumcard #pickup .clear-conditions a {
padding: 6px 12px;
display: inline-flex;
align-items: center;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fff;
color: #687385;
font-size: var(--fs-xsmall);
font-weight: 800;
}

body#platinumcard #pickup + div {
margin-top: 0;
display: flex;
align-items: center;
justify-content: flex-end !important;
gap: 12px;
color: #fff;
min-height: 64px;
padding: 14px 28px;
border: 1px solid rgba(255,255,255,.20);
border-top: 0 !important;
border-radius: 0 0 8px 8px;
background: rgba(3,8,15,.34);
}

body#platinumcard #pickup + div span {
font-size: var(--fs-xsmall);
font-weight: bold;
}

body#platinumcard #pickup + div a {
min-width: 128px;
min-height: 36px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
background: transparent;
color: #52e5d4 !important;
font-size: var(--fs-xsmall);
font-weight: bold;
box-shadow: none;
border-bottom: 1px solid var(--platinum-accent, #108b74) !important;
}

body#platinumcard #pickup + div a::after {
content: "";
margin-left: 7px;
font-size: var(--fs-xsmall);
line-height: 1;
width: 15px;
height: 15px;
-webkit-mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; background-color: var(--icon-white);
-webkit-mask-image: url("../../images/special/creditcard/icons/chevron-right.svg") !important; mask-image: url("../../images/special/creditcard/icons/chevron-right.svg") !important; background-color: var(--icon-emerald) !important;
}

body#platinumcard #pickup + div a:hover {
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
 Product list
 -------------------------------------------------------------------------- */

body#platinumcard #items,
body#platinumcard #article,
body#platinumcard #supervisor {
margin-top: 52px;
padding: 36px 28px;
border-radius: 24px;
background: #fff;
color: #1d2a3a;
box-shadow: 0 18px 50px rgba(0,0,0,.16);
}

body#platinumcard #items > h2,
body#platinumcard .cc-sectionTitle {
margin: 0;
color: #1d2a3a;
font-size: var(--fs-heading);
line-height: 1.45;
font-weight: bold;
text-align: center;
letter-spacing: .02em;
}

body#platinumcard #items > h2::after,
body#platinumcard .cc-sectionTitle::after {
content: "";
width: 700px;
height: 3px;
margin: 12px auto 0;
display: block;
border-radius: 999px;
background: #f2a900;
}

body#platinumcard #items > span,
body#platinumcard .cc-sectionLead {
max-width: 820px;
margin: 14px auto 0;
display: block;
color: #4a5568;
font-size: var(--fs-small);
font-weight: 700;
line-height: 1.9;
text-align: center;
}

body#platinumcard #items > ul {
margin: 32px auto 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: 22px;
max-width: 980px;
margin-top: 44px;
}

body#platinumcard #items > ul > li {
	min-width: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	border: 1px solid #e8e8e8;
	border-radius: 20px;
	background: rgba(0,0,0,0.8);
	box-shadow: 0 16px 44px rgba(5,8,15,.65);
	border-color: #666;
}

body#platinumcard #items > ul > li > div {
display: flex;
flex-direction: column;
}

body#platinumcard #items > ul > li > div > span {
display: block;
}

body#platinumcard #items > ul > li > div > span:nth-of-type(4) {
order: -1;
}

body#platinumcard #items > ul > li > div > span:nth-of-type(4) img {
	width: auto;
	max-width: 280px;
	max-height: 280px;
	margin: 0 auto 15px;
	display: block;
	border-radius: 13px;
	box-shadow: 3px 6px 12px rgba(255,255,255, 0.35);
}

body#platinumcard #items > ul > li > div > span:nth-of-type(1) {
color: #999;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.45;
}

body#platinumcard #items > ul > li > div > span:nth-of-type(2) {
margin-top: 4px;
color: #fff;
font-size: var(--fs-3xlarge);
font-weight: bold;
line-height: 1.45;
}

body#platinumcard #items > ul > li > div > span:nth-of-type(3) {
width: fit-content;
margin-top: 10px;
padding: 7px 12px;
border: 2px solid #e8b534;
border-radius: 999px;
background: #fff;
color: #f97316;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.35;
}

body#platinumcard #items > ul > li > span.application {
order: 1;
margin: 0 auto;
padding-top: 18px;
width: 50%;
}

body#platinumcard #items > ul > li > span.application a {
min-height: 38px;
width: 100%;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d8c79f;
border-radius: 999px;
background: #fff;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
text-decoration: none;
}

body#platinumcard #items > ul > li > span.application a::after {
content: "";
margin-left: 7px;
color: #f2a900;
}

body#platinumcard #items > ul > li > span.application a:hover {
border-color: #f2a900;
background: #fff4d6;
}

body#platinumcard #items > ul > li > dl {
margin: 16px 0 0;
display: grid;
gap: 10px;
}
body#platinumcard #items > ul > li > dl.column2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body#platinumcard #items > ul > li > dl:nth-of-type(1) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

body#platinumcard #items > ul > li > dl:nth-of-type(2) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

body#platinumcard #items > ul > li > dl > div {
min-width: 0;
display: flex;
flex-direction: column;
}

body#platinumcard #items > ul > li > dl dt {
padding: 7px 9px;
border: 1px solid rgba(256,256,256,0.25);
border-radius: 8px 8px 0 0;
background: rgba(256,256,256,0.05);
color: #ccc;
font-size: var(--fs-small);
font-weight: bold;
line-height: 1.45;
text-align: center;
}

body#platinumcard #items > ul > li > dl dd {
flex: 1 1 auto;
min-height: 48px;
margin: 0;
padding: 9px;
border: 1px solid rgba(256,256,256,0.25);
border-top: 0;
border-radius: 0 0 8px 8px;
background: rgba(256,256,256,0.15);
color: #fff;
font-size: var(--fs-small);
font-weight: normal;
line-height: 1.55;
text-align: center;
}

body#platinumcard #items > ul > li > dl dd a.modal-open {
margin-left: 5px;
color: #0b3478;
font-size: var(--fs-small);
font-weight: bold;
text-decoration: underline;
}

body#platinumcard #items > ul > li > dl + span.prText {
margin-top: 14px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(256,256,256,0.15);
color: #cccccc;
font-size: var(--fs-small);
font-weight: normal;
line-height: 1.25;
}

/* --------------------------------------------------------------------------
 Article: platinum-specific reading-content overrides
 -------------------------------------------------------------------------- */

body#platinumcard #article {
padding: 78px max(28px, calc((100vw - 1480px) / 2 + 28px)) 72px;
border-top: 1px solid rgba(216, 199, 159, .45);
margin: 0 calc(50% - 50vw);
border: 0;
border-radius: 0;
background: var(--platinum-gray-bg) !important;
box-shadow: none;
color: #1d2a3a;
}
body#platinumcard .cc-icon--check-circle {
width: 22px;
height: 22px;
margin-top: .25em;
border-radius: 50%;
background: #fff4d6;
color: #f97316;
font-size: var(--fs-xsmall);
font-weight: bold;
background-image: url("../../images/special/creditcard/icons/check-circle-emerald.svg");
}
body#platinumcard .cc-articleSection__title,
body#platinumcard .cc-articleSummary__title {
margin: 0;
color: #1d2a3a;
font-size: var(--fs-heading);
line-height: 1.52;
font-weight: bold;
letter-spacing: .015em;
}
/* Supervisor: keep HTML untouched, only harmonize visual spacing */
body#platinumcard #supervisor-comment {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
body#platinumcard #supervisor {
max-width: 980px;
margin-top: 26px;
margin-left: auto;
margin-right: auto;
}
body#platinumcard #supervisor-comment,
body#platinumcard #supervisor div.fpProfile {
border-color: #e8e8e8;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}
body#platinumcard #supervisor-comment h4,
body#platinumcard #supervisor div.fpProfile h4 {
background: #f8f3e8;
color: #1d2a3a;
}
body#platinumcard #supervisor-comment p {
margin: 20px 20px 0 20px;
}

/* --------------------------------------------------------------------------
 FV condition switcher: preact HTML structure
 -------------------------------------------------------------------------- */

body#platinumcard .clear-conditions {
display: none;
}

body#platinumcard ul.comparison-switcher {
margin: 0;
padding: 0;
list-style: none;
}

body#platinumcard #comparison-switcher {
position: relative;
width: min(100%, 452px);
margin-top: 24px;
padding: 18px;
border: 1px solid #e8e8e8;
border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 250, 240, .98) 0%, rgba(255, 255, 255, .96) 100%);
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
}

body#platinumcard #comparison-switcher > span {
display: block;
}

body#platinumcard #comparison-switcher > span:first-child {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding-right: 92px;
color: #1d2a3a;
font-size: var(--fs-large);
font-weight: bold;
line-height: 1.5;
}

body#platinumcard #comparison-switcher > span:first-child::before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 999px;
background: #f2a900;
box-shadow: 0 0 0 5px rgba(242, 169, 0, .16);
}

body#platinumcard #comparison-switcher > span.clear-conditions {
position: absolute;
right: 16px;
top: 16px;
margin: 0;
}

body#platinumcard #comparison-switcher > span.clear-conditions a {
padding: 6px 12px;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fff;
color: #687385;
font-size: var(--fs-xsmall);
font-weight: 800;
line-height: 1.3;
}

body#platinumcard #comparison-switcher > span:nth-of-type(3) {
margin-top: 6px;
color: rgba(255,255,255,.74);
font-size: var(--fs-xsmall);
font-weight: 700;
line-height: 1.7;
margin: -6px 0 14px;
}

body#platinumcard #comparison-switcher > div {
margin-top: 14px;
}

body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a {
position: relative;
min-height: 66px;
padding: 11px 14px 11px 60px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 14px;
background: #fff;
color: #1d2a3a;
text-align: left;
box-shadow: 0 8px 18px rgba(29, 42, 58, .05);
}

body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a::before {
position: absolute;
left: 14px;
top: 50%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: #fff4d6;
color: #0a2463;
transform: translateY(-50%);
font-size: var(--fs-large);
}

body#platinumcard #comparison-switcher li[data-comparison="1"] a::before { content: ""; }
body#platinumcard #comparison-switcher li[data-comparison="2"] a::before { content: ""; }
body#platinumcard #comparison-switcher li[data-comparison="3"] a::before { content: ""; }

body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(1) {
color: #1d2a3a;
font-size: var(--fs-small);
font-weight: bold;
line-height: 1.45;
}

body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(2) {
margin-top: 3px;
color: #4a5568;
font-size: var(--fs-xsmall);
font-weight: 700;
line-height: 1.55;
}

body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.selected a,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a:hover {
border-color: #f2a900;
background: #fff4d6;
transform: translateY(-1px);
}
body#goldcard #fv #comparison-switcher-more,
body#platinumcard #fv #comparison-switcher-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	gap: 6px;
	margin: 12px auto 0;
	font-size: var(--fs-xsmall);
	font-weight: bold;
	line-height: 1.5;
}
body#platinumcard #comparison-switcher-more {
	color: #52e5d4;
}

body#platinumcard #comparison-switcher-more::after {
	content: "";
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	display: inline-block;
	border: 1px solid rgba(16,139,116,.8);
	border-radius: 999px;
	background-color: rgba(16,139,116,.18);
	background-image:
		linear-gradient(var(--platinum-accent-3, #22d4b5), var(--platinum-accent-3, #22d4b5)),
		linear-gradient(var(--platinum-accent-3, #22d4b5), var(--platinum-accent-3, #22d4b5));
	background-position: center, center; -webkit-mask-position: center, center; mask-position: center, center;
	background-repeat: no-repeat, no-repeat; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
	background-size: 8px 2px, 2px 8px; -webkit-mask-size: 8px 2px, 2px 8px; mask-size: 8px 2px, 2px 8px;
}
body#platinumcard #comparison-switcher-more.open::after,
body#platinumcard #comparison-switcher-more.opened::after {
	background-size: 8px 2px, 0 0; -webkit-mask-size: 8px 2px, 0 0; mask-size: 8px 2px, 0 0;
}

body#platinumcard #comparison-switcher-more:hover {
opacity: .78;
}

body#platinumcard #comparison-switcher-more + ul.comparison-switcher {
display: none;
margin: 10px 0 0;
padding: 10px;
border: 1px dashed #d8c79f;
border-radius: 14px;
background: rgba(4,14,22,.78);
width: 500px;
border-color: rgba(255,255,255,.18);
}

body#platinumcard #comparison-switcher-more + ul.comparison-switcher li {
display: inline-block;
margin: 4px 5px 4px 0;
}

body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a {
min-height: 34px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #fffaf0;
color: #1d2a3a;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1.3;
text-align: center;
}

body#platinumcard #comparison-switcher-more + ul.comparison-switcher li.selected a,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a:hover {
border-color: #f2a900;
background: #fff4d6;
}

body#platinumcard #comparison-switcher + a {
width: min(100%, 452px);
min-height: 82px;
margin-top: 18px;
padding: 15px 18px 15px 78px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid #e8e8e8;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgba(29, 42, 58, .08);
color: #1d2a3a;
}

body#platinumcard #comparison-switcher + a::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff4d6;
transform: translateY(-50%);
font-size: var(--fs-2xlarge);
}

body#platinumcard #comparison-switcher + a::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #f2a900;
font-size: var(--fs-icon-large);
}

body#platinumcard #comparison-switcher + a span {
color: #1d2a3a;
font-size: var(--fs-medium);
font-weight: bold;
}

body#platinumcard #pickup table tbody tr.emphasis td {
  background: linear-gradient(180deg, rgba(119, 68, 107, .55) 0%, rgba(255,255,255,.025) 100%);
}

body#platinumcard #pickup table tbody tr.emphasis td > div {
  background: transparent;
  color: #77446B;
}

body#platinumcard #pickup table tbody tr.emphasis td > div > span:nth-child(1) {
color: rgba(255,255,255,.78);
}

body#platinumcard #pickup table thead tr:nth-child(3) th a,
body#platinumcard #items > ul > li > span.application a {
border-color: #108b74;
background: linear-gradient(135deg, #108b74 0%, #1aa488 100%);
color: #fff;
font-size: var(--fs-xsmall);
box-shadow: 0 14px 28px rgba(16,139,116,.28);
}

body#platinumcard #pickup table thead tr:nth-child(3) th a::before,
body#platinumcard #items > ul > li > span.application a::before {
content: none !important;
color: #fff;
font-size: var(--fs-xsmall);
font-weight: bold;
line-height: 1;
display: none !important;
}

body#platinumcard #pickup table thead tr:nth-child(3) th a::after,
body#platinumcard #items > ul > li > span.application a::after {
color: #fff;
font-size: var(--fs-xsmall);
content: "";
width: 15px;
height: 15px;
margin-left: .55em;
display: inline-block;
-webkit-mask: url("../../images/special/creditcard/icons/external.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/external.svg") center / contain no-repeat; background-color: var(--icon-white);
}

body#platinumcard #pickup table thead tr:nth-child(3) th a:hover,
body#platinumcard #items > ul > li > span.application a:hover {
border-color: rgb(6, 29, 85);
background: linear-gradient(135deg, rgb(6, 29, 85) 0%, rgb(11, 52, 120) 100%);
transform: translateY(-1px);
}


body#platinumcard #items > ul > li > dl:nth-of-type(1),
body#platinumcard #items > ul > li > dl:nth-of-type(2) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Initial state for condition reset links; jQuery shows these after a condition is selected. */
body#platinumcard #fv .clear-conditions {
display: none;
}
body#platinumcard #items > ul > li > div + span.application {
order: 0;
margin: 16px auto 0 auto;
padding-top: 0;
width: 50%;
}

/* Back-to-top button: keep the common PC sprite at 100px x 40px. */
body#platinumcard #foot #pagetop,
body#platinumcard #foot #extraLinks > #pagetop {
width: 100px;
height: 40px;
}

body#platinumcard #foot #pagetop img {
display: block;
width: 100px;
height: 40px;
max-width: none;
}


/* --------------------------------------------------------------------------
 Credit card SVG icons and comparison glow effect
 -------------------------------------------------------------------------- */


body#platinumcard #comparison-switcher-2 li a::before,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a::before {
	content: "" !important;
	background-color: rgba(255,255,255,.12) !important;
	background-repeat: no-repeat !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
	background-position: center !important; -webkit-mask-position: center !important; mask-position: center !important;
	background-size: 28px 28px !important; -webkit-mask-size: 28px 28px !important; mask-size: 28px 28px !important;
	position: absolute;
	top: 22px;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: 0;
	border-radius: 999px;
	transform: translateX(-50%);
	display: block !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 10px 24px rgba(0,0,0,.5);
	opacity: 1;
}
body#platinumcard #comparison-switcher-2 li.point a::before,
body#platinumcard #comparison-switcher li.point a::before { background-image: url("../../images/special/creditcard/icons/point-emerald.svg") !important; }
body#platinumcard #comparison-switcher-2 li.concierge a::before,
body#platinumcard #comparison-switcher li.concierge a::before { background-image: url("../../images/special/creditcard/icons/concierge-emerald.svg") !important; }
body#platinumcard #comparison-switcher-2 li.loungelounge a::before,
body#platinumcard #comparison-switcher li.lounge a::before { background-image: url("../../images/special/creditcard/icons/lounge-emerald.svg") !important; }
body#platinumcard #comparison-switcher-2 li.gift a::before,
body#platinumcard #comparison-switcher li.gift a::before { background-image: url("../../images/special/creditcard/icons/gift-emerald.svg") !important; }
body#platinumcard #comparison-switcher-2 li.wallet a::before,
body#platinumcard #comparison-switcher li.wallet a::before { background-image: url("../../images/special/creditcard/icons/wallet-emerald.svg") !important; }
body#platinumcard #comparison-switcher-2 li.hotel_discounts a::before,
body#platinumcard #comparison-switcher li.hotel_discounts a::before { background-image: url("../../images/special/creditcard/icons/hotel-emerald.svg") !important; }
body#platinumcard #comparison-switcher-2 li.dining_discounts a::before,
body#platinumcard #comparison-switcher li.dining_discounts a::before { background-image: url("../../images/special/creditcard/icons/dining-emerald.svg") !important; }

body#platinumcard #comparison-switcher-2 + a::before,
	body#platinumcard #comparison-switcher + a::before {
	content: "" !important;
	background: #fff4d6 url("../../images/special/creditcard/icons/book-emerald.svg") no-repeat center / 28px 28px;
	background-image: url("../../images/special/creditcard/icons/book-white.svg") !important;
	background-color: rgba(255,255,255,.10) !important;
	background-repeat: no-repeat !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
	background-position: center !important; -webkit-mask-position: center !important; mask-position: center !important;
	background-size: 30px 30px !important; -webkit-mask-size: 30px 30px !important; mask-size: 30px 30px !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.20);
}
body#platinumcard #comparison-switcher-2 + a::after,
body#platinumcard #comparison-switcher + a::after {
	content: "";
	width: 20px;
	height: 20px;
	-webkit-mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat; background-color: var(--icon-emerald);
	font-size: var(--fs-xsmall);
	-webkit-mask-image: url("../../images/special/creditcard/icons/chevron-right.svg") !important; mask-image: url("../../images/special/creditcard/icons/chevron-right.svg") !important; background-color: var(--icon-white) !important;
}


body#platinumcard .cc-icon::before { content: "" !important; }


body#platinumcard .cc-icon--chevron-right {
-webkit-mask-image: url("../../images/special/creditcard/icons/chevron-right.svg"); mask-image: url("../../images/special/creditcard/icons/chevron-right.svg"); background-color: var(--icon-emerald);
}
body#platinumcard .cc-icon--external {
-webkit-mask-image: url("../../images/special/creditcard/icons/external.svg"); mask-image: url("../../images/special/creditcard/icons/external.svg"); background-color: var(--icon-emerald);
}
body#platinumcard #pickup table tbody[data-comparison="7"],
body#platinumcard #pickup table tbody[data-comparison="8"] { display: none; }


/* --------------------------------------------------------------------------
 Platinum card page theme
 -------------------------------------------------------------------------- */


body#platinumcard #maincontents > .breadcrumbs,
body#platinumcard #maincontents > .breadcrumbs a {
color: rgba(255,255,255,.72);
}


body#platinumcard #comparison-switcher-1,
body#platinumcard #comparison-switcher-2,
body#platinumcard #comparison-switcher {
border-color: rgba(255,255,255,.10);
background: rgba(7,13,24,.82);
box-shadow: 0 16px 34px rgba(0,0,0,.28);
}


body#platinumcard #coparison-starter,
body#platinumcard #pickup + div a,
body#platinumcard #pickup table thead tr:nth-child(3) th a,
body#platinumcard #items > ul > li > span.application a {
border-color: #108b74;
background: linear-gradient(135deg, #108b74 0%, #1aa488 100%);
box-shadow: 0 14px 28px rgba(16,139,116,.28);
}
body#platinumcard #coparison-starter:hover,
body#platinumcard #pickup + div a:hover,
body#platinumcard #pickup table thead tr:nth-child(3) th a:hover,
body#platinumcard #items > ul > li > span.application a:hover {
border-color: #1aa488;
background: linear-gradient(135deg, #108b74 0%, #1aa488 100%);
}
body#platinumcard #comparison-switcher-1 > div,
body#platinumcard #comparison-switcher-2 li a,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher,
body#platinumcard #comparison-switcher-2 + a,
body#platinumcard #comparison-switcher + a {
border-color: rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
color: #f8f9fb;
}
body#platinumcard #comparison-switcher-1 > div::before,
body#platinumcard #comparison-switcher-2 > span,
body#platinumcard #comparison-switcher > span:first-child,
body#platinumcard #comparison-switcher-2 li a > span:nth-of-type(1),
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(1),
body#platinumcard #comparison-switcher-2 + a span,
body#platinumcard #comparison-switcher + a span { color: #f8f9fb; }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(2),
body#platinumcard #comparison-switcher > span:nth-of-type(3) { color: rgba(255,255,255,.72); }
body#platinumcard #comparison-switcher-1 li a,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a,
body#platinumcard #comparison-switcher > span.clear-conditions a,
body#platinumcard #pickup .clear-conditions a {
border-color: rgba(255,255,255,.14);
background: rgba(255,255,255,.08);
color: #f8f9fb;
}
body#platinumcard #comparison-switcher-1 li.selected a,
body#platinumcard #comparison-switcher-1 li a:hover,
body#platinumcard #comparison-switcher-2 li.selected a,
body#platinumcard #comparison-switcher-2 li a:hover,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.selected a,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a:hover,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li.selected a,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a:hover {
border-color: #108b74;
background: rgba(16,139,116,.18);
}
body#platinumcard #comparison-switcher-2 > span::before,
body#platinumcard #comparison-switcher > span:first-child::before,
body#platinumcard #pickup h2::after,
body#platinumcard #items > h2::after,
body#platinumcard .cc-sectionTitle::after { background: #108b74; }
body#platinumcard #comparison-switcher-2 > span::before,
body#platinumcard #comparison-switcher > span:first-child::before {
box-shadow: 0 0 0 5px rgba(16,139,116,.20);
display: none;
}


body#platinumcard #pickup h2,
body#platinumcard #pickup + div { color: #f8f9fb; }


body#platinumcard #comparison-switcher-2 li a::before,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a::before,
body#platinumcard #comparison-switcher-2 + a::before,
body#platinumcard #comparison-switcher + a::before {
background-color: rgba(16,139,116,.16);
}


body#platinumcard #comparison-switcher-2 li[data-comparison="7"] a::before,
body#platinumcard #comparison-switcher li[data-comparison="7"] a::before { background-image: url("../../images/special/creditcard/icons/lounge-emerald.svg") !important; }
body#platinumcard #comparison-switcher-2 li[data-comparison="8"] a::before,
body#platinumcard #comparison-switcher li[data-comparison="8"] a::before { background-image: url("../../images/special/creditcard/icons/family-emerald.svg") !important; }


body#platinumcard #pickup.is-highlight { animation: ccPlatinumPickupGlow .72s ease-out; }
@keyframes ccPlatinumPickupGlow {
0% { box-shadow: 0 20px 56px rgba(0,0,0,.34), 0 0 0 0 rgba(16,139,116,.82); }
45% { box-shadow: 0 20px 56px rgba(0,0,0,.34), 0 0 0 9px rgba(16,139,116,.38), 0 0 38px rgba(16,139,116,.34); }
100% { box-shadow: 0 20px 56px rgba(0,0,0,.34), 0 0 0 0 rgba(16,139,116,0); }
}

/* --------------------------------------------------------------------------
 Platinum visual theme
 - FV visual tone aligned with the approved dark mockup.
 - Feature cards: three platinum-service cards, no hotel card.
 - Product buttons use visible "公式サイト" text and green CTA color.
 - Article area changes from orange/gold accents to a monotone light-gray theme.
 -------------------------------------------------------------------------- */

body#platinumcard #comparison-switcher-1 li a,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a {
border-color: rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
}

body#platinumcard #comparison-switcher-1 li.selected a,
body#platinumcard #comparison-switcher-1 li a:hover,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li.selected a,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a:hover {
border-color: #108b74;
background: rgba(16,139,116,.22);
}

body#platinumcard #comparison-switcher-2,
body#platinumcard #comparison-switcher {
width: 500px;
margin-top: 45px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

body#platinumcard #comparison-switcher-2 > span,
body#platinumcard #comparison-switcher > span:first-child {
display: block;
margin: 0 0 14px;
padding: 0;
border: 0;
color: #fff;
font-size: var(--fs-large);
font-weight: bold;
line-height: 1.6;
}


body#platinumcard #comparison-switcher-2 ul,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type {
width: 500px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}

body#platinumcard #comparison-switcher-2 li[data-comparison="5"],
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type > li[data-comparison="5"] {
display: none !important;
}

body#platinumcard #fv li[data-comparison="0"],
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.point,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.concierge,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li.lounge,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li.hotel_discounts,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li.dining_discounts { display: none; }

body#platinumcard #comparison-switcher-2 li a,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a {
	position: relative;
	min-height: 210px;
	padding: 21px 10px 18px;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.26);
	border-radius: 6px;
	box-shadow: none;
	color: #fff;
	text-align: center;
	}
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.dining_discounts a {
	background:
	linear-gradient(180deg, rgba(3,8,15,.15) 0%, rgba(3,8,15,.5) 40%, rgba(3,8,15,.99) 95%),
	url("../../images/special/creditcard/photos/bg_dining_discounts.webp") top center / auto 120% no-repeat;
}
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.hotel_discounts a {
	background:
	linear-gradient(180deg, rgba(3,8,15,.15) 0%, rgba(3,8,15,.5) 40%, rgba(3,8,15,.99) 80%),
	url("../../images/special/creditcard/photos/bg_hotel_discounts.webp") bottom 50px center / auto 120% no-repeat;
}
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.lounge a { 
	background:
	linear-gradient(180deg, rgba(3,8,15,.15) 0%, rgba(3,8,15,.5) 40%, rgba(3,8,15,.99) 80%), 
	url("../../images/special/creditcard/photos/bg_lounge.webp") bottom 50px right / auto 120% no-repeat;
}
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.lounge a,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.hotel_discounts a,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.dining_discounts a {
	background-repeat: no-repeat, no-repeat; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
	background-origin: border-box, border-box;
	background-clip: border-box, border-box;
}

body#platinumcard #comparison-switcher-2 li a > span:nth-of-type(1),
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(1) {
	color: #fff;
	font-size: var(--fs-medium);
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
}

body#platinumcard #comparison-switcher-2 li a > span:nth-of-type(2),
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a > span:nth-of-type(2) {
	margin-top: 13px;
	color: rgba(255,255,255,.86);
	font-size: var(--fs-small);
	line-height: 1.4;
	text-align: center;
}


body#platinumcard #comparison-switcher-2 + a,
body#platinumcard #comparison-switcher + a {
	width: 488px;
	min-height: 106px;
	margin-top: 26px;
	padding: 20px 24px 20px 96px;
	border: 1px solid rgba(255,255,255,.26);
	border-radius: 10px;
	background: rgba(4,13,21,.58);
	box-shadow: none;
	backdrop-filter: blur(4px);
}
body#platinumcard #comparison-switcher + a:hover {
	border-color: var(--platinum-accent-3);
	transform: translateY(-1px);
}
body#platinumcard #comparison-switcher-2 + a span,
body#platinumcard #comparison-switcher + a span {
	color: #fff;
	font-size: var(--fs-large);
	font-weight: bold;
}
body#platinumcard #comparison-switcher-2 + a:hover span,
body#platinumcard #comparison-switcher + a:hover span {
	color: var(--platinum-accent-3);
}

body#platinumcard #pickup h2 em {
font-style: normal;
color: var(--platinum-orange);
}


body#platinumcard #pickup table thead th,
body#platinumcard #pickup table thead tr:nth-child(1) th,
body#platinumcard #pickup table thead tr:nth-child(2) th,
body#platinumcard #pickup table thead tr:nth-child(3) th,
body#platinumcard #pickup table tbody td {
border-color: rgba(255,255,255,.18) !important;
background: transparent;
}


body#platinumcard #pickup table thead tr:nth-child(1) th span:nth-child(1),
body#platinumcard #pickup table thead tr:nth-child(1) th span:nth-child(2) {
color: #fff;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-weight: bold;
}


body#platinumcard #pickup table thead tr:nth-child(2) th span::after {
content: "";
position: absolute;
left: 50%;
bottom: -9px;
margin-left: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #e5e2dc;
}


body#platinumcard #pickup table tbody tr.emphasis td > div > span:nth-child(2) {
	display: block;
	color: var(--platinum-orange);
	font-size: var(--fs-medium);
	font-weight: bold;
	line-height: 1.25;
	text-shadow: 0 0 18px rgba(255,112,67,.22);
	letter-spacing: -0.02em;
}


body#platinumcard #items > ul > li > span.application a:hover,
body#platinumcard #pickup table thead tr:nth-child(3) th a:hover {
border-color: #1aa488;
background: linear-gradient(135deg, #108b74 0%, #1aa488 100%);
}


body#platinumcard #article .cc-sectionTitle,
body#platinumcard #article .cc-articleSection__title,
body#platinumcard #article .cc-articleSummary__title,
body#platinumcard #article .cc-pointBox__title,
body#platinumcard #article .cc-articleBox__title,
body#platinumcard #article .cc-longReadItem__title {
color: #1d2a3a;
}

body#platinumcard #article .cc-sectionLead,
body#platinumcard #article .cc-articleSection__lead,
body#platinumcard #article .cc-articleSection__text p,
body#platinumcard #article .cc-longReadItem__text p,
body#platinumcard #article .cc-articleSummary__text p,
body#platinumcard #article .cc-faqItem__answer p,
body#platinumcard #article .cc-readCard__text,
body#platinumcard #article .cc-pointList li,
body#platinumcard #article .cc-articleList a {
color: #4a5568;
}

body#platinumcard #article .cc-sectionTitle::after {
background: var(--platinum-accent);
}

body#platinumcard #article .cc-pointBox,
body#platinumcard #article .cc-articleBox,
body#platinumcard #article .cc-articleSection {
border-color: #dfe3e8;
background: #fff;
box-shadow: 0 10px 28px rgba(29,42,58,.07);
}

body#platinumcard #article .cc-articleSection__label {
color: #687385;
}

body#platinumcard #article .cc-articleSection--longRead > .cc-articleSection__header {
border-bottom-color: #dfe3e8;
background: linear-gradient(135deg, rgba(16,139,116,.10) 0%, #fff 76%);
}

body#platinumcard #article .cc-longReadItem {
border-top-color: #dfe3e8;
background: #fff;
}

body#platinumcard #article .cc-longReadItem:nth-child(even) {
background: #f7f8f9;
}

body#platinumcard #article .cc-longReadItem__number,
body#platinumcard #article .cc-longReadItem__summary,
body#platinumcard #article .cc-readCard,
body#platinumcard #article .cc-faqItem {
background: #eef0f2;
color: #1d2a3a;
}

body#platinumcard #article .cc-longReadNote {
border-left-color: var(--platinum-accent);
background: #eef6f4;
}

body#platinumcard #article .cc-articleSummary {
border-color: rgba(16,139,116,.28);
background: linear-gradient(135deg, rgba(16,139,116,.10) 0%, #fff 74%);
}

body#platinumcard #article .cc-icon--check-circle {
background-image: url("../../images/special/creditcard/icons/check-circle-emerald.svg");
}

body#platinumcard #article .cc-icon--chevron-right {
-webkit-mask-image: url("../../images/special/creditcard/icons/chevron-right.svg"); mask-image: url("../../images/special/creditcard/icons/chevron-right.svg"); background-color: var(--icon-emerald);
}


/* --------------------------------------------------------------------------
 Platinum finishing styles: icons, pickup emphasis and section accents
 -------------------------------------------------------------------------- */


/* FV service-card icons. */


body#platinumcard #comparison-switcher-2 li.concierge a::before,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.concierge a::before {
	background-image: url("../../images/special/creditcard/icons/concierge-white.svg") !important;
}
body#platinumcard #comparison-switcher-2 li.lounge a::before,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.lounge a::before {
	background-image: url("../../images/special/creditcard/icons/lounge-white.svg") !important;
}
body#platinumcard #comparison-switcher-2 li.hotel_discounts a::before,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.hotel_discounts a::before {
	background-image: url("../../images/special/creditcard/icons/hotel-white.svg") !important;
}
body#platinumcard #comparison-switcher-2 li.dining_discounts a::before,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.dining_discounts a::before {
	background-image: url("../../images/special/creditcard/icons/dining-white.svg") !important;
}

/* FV guide-card icon. */


/* Pickup title and emphasized comparison values. */
body#platinumcard #pickup h2 .cc-pickupTitleText {
display: inline-block;
line-height: 1.42;
}
body#platinumcard #pickup h2 .cc-pickupTitleAccent {
color: var(--platinum-orange);
font-size: var(--fs-scale-title-accent);
font-weight: bold;
letter-spacing: .04em;
text-shadow: 0 6px 20px rgba(255,112,67,.22);
}


/* Product list section gradient. */
body#platinumcard #items {
margin: 0 calc(50% - 50vw);
padding: 82px max(28px, calc((100vw - 1480px) / 2 + 28px)) 84px;
border: 0;
border-radius: 0;
background: linear-gradient(180deg, #05080f 0%, var(--platinum-gray-bg) 10%) !important;
box-shadow: none;
color: #1d2a3a;
}
body#platinumcard #items > h2 {
color: #fff;
text-shadow: 0 4px 18px rgba(0,0,0,.26);
}
body#platinumcard #items > h2::after {
background: var(--platinum-accent);
}
body#platinumcard #items > span {
color: rgba(255,255,255,.78);
}


/* Article section: light-gray background and emerald accent. */


body#platinumcard #article .cc-articleSection__label,
body#platinumcard #article .cc-pointBox__title,
body#platinumcard #article .cc-articleBox__title,
body#platinumcard #article .cc-articleSummary__title {
color: var(--platinum-accent);
}


body#platinumcard #article .cc-longReadItem__number {
border: 1px solid rgba(16,139,116,.22);
background: #e8f4f1;
color: var(--platinum-accent);
}
body#platinumcard #article .cc-longReadItem__summary,
body#platinumcard #article .cc-readCard,
body#platinumcard #article .cc-faqItem {
background: #eef6f4;
color: #1d2a3a;
}


body#platinumcard #article .cc-articleList a:hover {
border-color: var(--platinum-accent);
background: #eef6f4;
}


body#platinumcard #article .cc-icon--external {
-webkit-mask-image: url("../../images/special/creditcard/icons/external.svg"); mask-image: url("../../images/special/creditcard/icons/external.svg"); background-color: var(--icon-emerald);
}


/* --------------------------------------------------------------------------
 Final page adjustments: FV cards, pickup borders and text links
 -------------------------------------------------------------------------- */

/* Gold FV condition cards: horizontal row of vertical cards. */


body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li[data-comparison="0"] {
display: none !important;
}


/* Pickup-to-list links: right-aligned text link treatment. */
body#goldcard #pickup,
body#platinumcard #pickup {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
body#goldcard #pickup + div,
body#platinumcard #pickup + div {
min-height: 62px !important;
margin-top: 0 !important;
padding: 14px 28px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
}
body#goldcard #pickup + div span,
body#platinumcard #pickup + div span {
margin-right: auto !important;
}


body#goldcard #pickup + div a,
body#platinumcard #pickup + div a {
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 0 0 3px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: var(--fs-xsmall) !important;
	font-weight: 900 !important;
	line-height: 1.5 !important;
}


body#goldcard #pickup + div a::after,
body#platinumcard #pickup + div a::after {
content: "" !important;
width: 15px !important;
height: 15px !important;
margin-left: .45em !important;
display: inline-block !important;
vertical-align: -2px !important;
font-size: var(--fs-xsmall) !important;
background-repeat: no-repeat !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
background-position: center !important; -webkit-mask-position: center !important; mask-position: center !important;
background-size: contain !important; -webkit-mask-size: contain !important; mask-size: contain !important;
}


body#goldcard #pickup + div a:hover,
body#platinumcard #pickup + div a:hover {
opacity: .82 !important;
transform: translateY(-1px) !important;
}

/* Platinum pickup: remove duplicated borders and unnecessary rounding. */
body#platinumcard #pickup table thead tr:nth-child(1) th:first-child,
body#platinumcard #pickup table thead tr:nth-child(2) th:first-child,
body#platinumcard #pickup table thead tr:nth-child(3) th:first-child,
body#platinumcard #pickup table tbody td:first-child {
border-left: 0 !important;
border-radius: 0 !important;
}
body#platinumcard #pickup table thead tr:nth-child(1) th:last-child,
body#platinumcard #pickup table thead tr:nth-child(2) th:last-child,
body#platinumcard #pickup table thead tr:nth-child(3) th:last-child,
body#platinumcard #pickup table tbody td:last-child {
border-right: 0 !important;
border-radius: 0 !important;
}
body#platinumcard #pickup table tbody td,
body#platinumcard #pickup table tbody td > div {
border-radius: 0 !important;
}


/* Platinum supervisor section: gray-to-black transition. */
body#platinumcard section#supervisor-comment {
	max-width: none;
	margin: 0;
	padding: 0 0 0 0;
	border: 0;
	border-radius: 0;
	background: var(--platinum-gray-bg);
	box-shadow: none;
	color: #1d2a3a;
}
body#platinumcard section#supervisor-comment h4,
body#platinumcard section#supervisor-comment p {
	max-width: 980px;
	margin: 0 auto !important;
	border-style: solid;
	border-color: rgba(16,139,116,.28);
	background: #fff;
}
body#platinumcard section#supervisor-comment h4 {
	color: var(--platinum-accent);
	padding: 24px 24px 8px 24px;
	border-width: 1px 1px 0 1px;
	border-radius: 20px 20px 0 0;
	margin: 0;
	font-size: var(--fs-large);
	line-height: 1.52;
	font-weight: bold;
	letter-spacing: .015em;
}
body#platinumcard section#supervisor-comment p {
	padding: 8px 24px 24px 24px;
	border-width: 0 1px 1px 1px;
	border-radius: 0 0 20px 20px;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: #4a5568;
}

body#platinumcard section#supervisor {
	max-width: none;
	margin: 0 0;
	padding: 28px 0 64px 0;
	border: 0;
	border-radius: 0;
	background: linear-gradient(180deg, var(--platinum-gray-bg, #f5f6f8) 0%, #555 70%,rgba(63, 69, 71, 0.9) 100%);
	box-shadow: none;
	color: #1d2a3a;
}

body#platinumcard section#supervisor div.fpProfile {
	max-width: 980px;
	margin: 0 auto;
	border-color: #dfe3e8;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 18px 44px rgba(5, 8, 15, .20);
}
body#platinumcard section#supervisor div.fpProfile h4 {
	width: auto;
	border-radius: 4px;
	margin: 5px 4px 10px 6px !important;
	padding: .5em .75em .4em .75em;
	font-size: var(--fs-medium) !important;
	font-weight: bold;
	line-height: 1.6;
	border-left: none;
	background: linear-gradient(135deg, #eef6f4 0%, #fff 74%);
	color: #1d2a3a;
}

/* --------------------------------------------------------------------------
 SVG icon display integration: class-only icons and shared rules
 -------------------------------------------------------------------------- */
/* HTML should use only the icon name as the class, e.g. class="wallet". */
/* The申込条件 icon uses conditions.svg / class="conditions". */

/* goldcard: feature-label icon variables. */
body#goldcard .gift { --cc-feature-icon: url("../../images/special/creditcard/icons/gift.svg"); }
body#goldcard .wallet { --cc-feature-icon: url("../../images/special/creditcard/icons/wallet.svg"); }
body#goldcard .point { --cc-feature-icon: url("../../images/special/creditcard/icons/point.svg"); }
body#goldcard .star { --cc-feature-icon: url("../../images/special/creditcard/icons/star.svg"); }
body#goldcard .lounge { --cc-feature-icon: url("../../images/special/creditcard/icons/lounge.svg"); }
body#goldcard .plane-shield { --cc-feature-icon: url("../../images/special/creditcard/icons/plane-shield.svg"); }
body#goldcard .bag-shield { --cc-feature-icon: url("../../images/special/creditcard/icons/bag-shield.svg"); }
body#goldcard .family { --cc-feature-icon: url("../../images/special/creditcard/icons/family.svg"); }
body#goldcard .etc { --cc-feature-icon: url("../../images/special/creditcard/icons/etc.svg"); }
body#goldcard .brand { --cc-feature-icon: url("../../images/special/creditcard/icons/brand.svg"); }
body#goldcard .conditions { --cc-feature-icon: url("../../images/special/creditcard/icons/conditions.svg"); }
body#goldcard .concierge { --cc-feature-icon: url("../../images/special/creditcard/icons/concierge.svg"); }
body#goldcard .hotel { --cc-feature-icon: url("../../images/special/creditcard/icons/hotel.svg"); }
body#goldcard .dining { --cc-feature-icon: url("../../images/special/creditcard/icons/dining.svg"); }
body#goldcard .baggage { --cc-feature-icon: url("../../images/special/creditcard/icons/baggage.svg"); }

/* platinumcard: feature-label icon variables. */
body#platinumcard .gift { --cc-feature-icon: url("../../images/special/creditcard/icons/gift.svg"); }
body#platinumcard .wallet { --cc-feature-icon: url("../../images/special/creditcard/icons/wallet.svg"); }
body#platinumcard .point { --cc-feature-icon: url("../../images/special/creditcard/icons/point.svg"); }
body#platinumcard .star { --cc-feature-icon: url("../../images/special/creditcard/icons/star.svg"); }
body#platinumcard .lounge { --cc-feature-icon: url("../../images/special/creditcard/icons/lounge.svg"); }
body#platinumcard .plane-shield { --cc-feature-icon: url("../../images/special/creditcard/icons/plane-shield.svg"); }
body#platinumcard .bag-shield { --cc-feature-icon: url("../../images/special/creditcard/icons/bag-shield.svg"); }
body#platinumcard .family { --cc-feature-icon: url("../../images/special/creditcard/icons/family.svg"); }
body#platinumcard .etc { --cc-feature-icon: url("../../images/special/creditcard/icons/etc.svg"); }
body#platinumcard .brand { --cc-feature-icon: url("../../images/special/creditcard/icons/brand.svg"); }
body#platinumcard .conditions { --cc-feature-icon: url("../../images/special/creditcard/icons/conditions.svg"); }
body#platinumcard .concierge { --cc-feature-icon: url("../../images/special/creditcard/icons/concierge.svg"); }
body#platinumcard .hotel { --cc-feature-icon: url("../../images/special/creditcard/icons/hotel.svg"); }
body#platinumcard .dining { --cc-feature-icon: url("../../images/special/creditcard/icons/dining.svg"); }
body#platinumcard .baggage { --cc-feature-icon: url("../../images/special/creditcard/icons/baggage.svg"); }

/* goldcard: FV condition-card icon variables. */
body#goldcard #comparison-switcher li.gift,
body#goldcard #comparison-switcher-2 li.gift { --cc-condition-icon: url("../../images/special/creditcard/icons/gift-gold.svg"); }
body#goldcard #comparison-switcher li.wallet,
body#goldcard #comparison-switcher-2 li.wallet { --cc-condition-icon: url("../../images/special/creditcard/icons/wallet-gold.svg"); }
body#goldcard #comparison-switcher li.point,
body#goldcard #comparison-switcher-2 li.point { --cc-condition-icon: url("../../images/special/creditcard/icons/point-gold.svg"); }
body#goldcard #comparison-switcher li.star,
body#goldcard #comparison-switcher-2 li.star { --cc-condition-icon: url("../../images/special/creditcard/icons/star-gold.svg"); }
body#goldcard #comparison-switcher li.lounge,
body#goldcard #comparison-switcher-2 li.lounge { --cc-condition-icon: url("../../images/special/creditcard/icons/lounge-gold.svg"); }
body#goldcard #comparison-switcher li.family,
body#goldcard #comparison-switcher-2 li.family { --cc-condition-icon: url("../../images/special/creditcard/icons/family-gold.svg"); }
body#goldcard #comparison-switcher li.conditions,
body#goldcard #comparison-switcher-2 li.conditions { --cc-condition-icon: url("../../images/special/creditcard/icons/conditions-gold.svg"); }
body#goldcard #comparison-switcher li.concierge,
body#goldcard #comparison-switcher-2 li.concierge { --cc-condition-icon: url("../../images/special/creditcard/icons/concierge-gold.svg"); }
body#goldcard #comparison-switcher li.hotel,
body#goldcard #comparison-switcher-2 li.hotel { --cc-condition-icon: url("../../images/special/creditcard/icons/hotel-gold.svg"); }
body#goldcard #comparison-switcher li.hotel_discounts,
body#goldcard #comparison-switcher-2 li.hotel_discounts { --cc-condition-icon: url("../../images/special/creditcard/icons/hotel-gold.svg"); }
body#goldcard #comparison-switcher li.dining,
body#goldcard #comparison-switcher-2 li.dining { --cc-condition-icon: url("../../images/special/creditcard/icons/dining-gold.svg"); }
body#goldcard #comparison-switcher li.dining_discounts,
body#goldcard #comparison-switcher-2 li.dining_discounts { --cc-condition-icon: url("../../images/special/creditcard/icons/dining-gold.svg"); }

/* platinumcard: FV condition-card icon variables. */
body#platinumcard #comparison-switcher li.gift,
body#platinumcard #comparison-switcher-2 li.gift { --cc-condition-icon: url("../../images/special/creditcard/icons/gift-emerald.svg"); }
body#platinumcard #comparison-switcher li.wallet,
body#platinumcard #comparison-switcher-2 li.wallet { --cc-condition-icon: url("../../images/special/creditcard/icons/wallet-emerald.svg"); }
body#platinumcard #comparison-switcher li.point,
body#platinumcard #comparison-switcher-2 li.point { --cc-condition-icon: url("../../images/special/creditcard/icons/point-emerald.svg"); }
body#platinumcard #comparison-switcher li.star,
body#platinumcard #comparison-switcher-2 li.star { --cc-condition-icon: url("../../images/special/creditcard/icons/star-emerald.svg"); }
body#platinumcard #comparison-switcher li.lounge,
body#platinumcard #comparison-switcher-2 li.lounge { --cc-condition-icon: url("../../images/special/creditcard/icons/lounge-emerald.svg"); }
body#platinumcard #comparison-switcher li.family,
body#platinumcard #comparison-switcher-2 li.family { --cc-condition-icon: url("../../images/special/creditcard/icons/family-emerald.svg"); }
body#platinumcard #comparison-switcher li.conditions,
body#platinumcard #comparison-switcher-2 li.conditions { --cc-condition-icon: url("../../images/special/creditcard/icons/conditions-emerald.svg"); }
body#platinumcard #comparison-switcher li.concierge,
body#platinumcard #comparison-switcher-2 li.concierge { --cc-condition-icon: url("../../images/special/creditcard/icons/concierge-emerald.svg"); }
body#platinumcard #comparison-switcher li.hotel,
body#platinumcard #comparison-switcher-2 li.hotel { --cc-condition-icon: url("../../images/special/creditcard/icons/hotel-emerald.svg"); }
body#platinumcard #comparison-switcher li.hotel_discounts,
body#platinumcard #comparison-switcher-2 li.hotel_discounts { --cc-condition-icon: url("../../images/special/creditcard/icons/hotel-emerald.svg"); }
body#platinumcard #comparison-switcher li.dining,
body#platinumcard #comparison-switcher-2 li.dining { --cc-condition-icon: url("../../images/special/creditcard/icons/dining-emerald.svg"); }
body#platinumcard #comparison-switcher li.dining_discounts,
body#platinumcard #comparison-switcher-2 li.dining_discounts { --cc-condition-icon: url("../../images/special/creditcard/icons/dining-emerald.svg"); }

/* Platinum large FV service cards use white icons on the dark image cards. */
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.gift { --cc-condition-icon: url("../../images/special/creditcard/icons/gift-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.wallet { --cc-condition-icon: url("../../images/special/creditcard/icons/wallet-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.point { --cc-condition-icon: url("../../images/special/creditcard/icons/point-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.star { --cc-condition-icon: url("../../images/special/creditcard/icons/star-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.lounge { --cc-condition-icon: url("../../images/special/creditcard/icons/lounge-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.family { --cc-condition-icon: url("../../images/special/creditcard/icons/family-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.conditions { --cc-condition-icon: url("../../images/special/creditcard/icons/conditions-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.concierge { --cc-condition-icon: url("../../images/special/creditcard/icons/concierge-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.hotel { --cc-condition-icon: url("../../images/special/creditcard/icons/hotel-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.hotel_discounts { --cc-condition-icon: url("../../images/special/creditcard/icons/hotel-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.dining { --cc-condition-icon: url("../../images/special/creditcard/icons/dining-white.svg"); }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li.dining_discounts { --cc-condition-icon: url("../../images/special/creditcard/icons/dining-white.svg"); }

/* Article-list SVG icons. */
body#goldcard .cc-icon--chevron-right,
body#goldcard .cc-icon--external,
body#platinumcard .cc-icon--chevron-right,
body#platinumcard .cc-icon--external {
width: 18px;
height: 18px;
display: inline-block;
flex: 0 0 18px;
}

body#goldcard .cc-articleList a .cc-icon,
body#platinumcard .cc-articleList a .cc-icon {
width: 18px;
height: 18px;
}

body#goldcard .cc-icon,
body#platinumcard .cc-icon {
background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
background-position: center; -webkit-mask-position: center; mask-position: center;
background-size: contain; -webkit-mask-size: contain; mask-size: contain;
}
body#goldcard .cc-icon::before,
body#platinumcard .cc-icon::before { content: "" !important; }

/* FV condition cards and expanded condition chips. */
body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li { --cc-condition-icon-size: 27px 27px; }
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li { --cc-condition-icon-size: 28px 28px; }
body#goldcard #comparison-switcher-2 li,
body#platinumcard #comparison-switcher-2 li { --cc-condition-icon-size: 26px auto; }
body#goldcard #comparison-switcher-more + ul.comparison-switcher li,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li { --cc-condition-icon-size: contain; }

body#goldcard #comparison-switcher-more + ul.comparison-switcher li a,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a {
gap: 6px;
}

body#goldcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a::before,
body#goldcard #comparison-switcher-2 li a::before,
body#goldcard #comparison-switcher-more + ul.comparison-switcher li a::before,
body#platinumcard #comparison-switcher > div > ul.comparison-switcher:first-of-type li a::before,
body#platinumcard #comparison-switcher-2 li a::before,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a::before {
content: "";
background-image: var(--cc-condition-icon) !important;
background-repeat: no-repeat !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
background-position: center !important; -webkit-mask-position: center !important; mask-position: center !important;
background-size: var(--cc-condition-icon-size, contain) !important; -webkit-mask-size: var(--cc-condition-icon-size, contain) !important; mask-size: var(--cc-condition-icon-size, contain) !important;
}

body#goldcard #comparison-switcher-more + ul.comparison-switcher li a::before,
body#platinumcard #comparison-switcher-more + ul.comparison-switcher li a::before {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	display: inline-block;
}


/* Other-condition opener: restore the plus icon. */
body#goldcard #comparison-switcher-more::after {
	content: "";
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	display: inline-block;
	border: 1px solid rgba(216,137,0,.8);
	border-radius: 999px;
	background-color: #fff4d6;
	background-image:
	linear-gradient(#d88900, #d88900),
	linear-gradient(#d88900, #d88900);
	background-position: center, center; -webkit-mask-position: center, center; mask-position: center, center;
	background-repeat: no-repeat, no-repeat; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
	background-size: 8px 2px, 2px 8px; -webkit-mask-size: 8px 2px, 2px 8px; mask-size: 8px 2px, 2px 8px;
}
body#goldcard #comparison-switcher-more.open::after,
body#goldcard #comparison-switcher-more.opened::after {
	background-size: 8px 2px, 0 0; -webkit-mask-size: 8px 2px, 0 0; mask-size: 8px 2px, 0 0;
}


/* Comparison-table, card-detail and modal label icons. */
body#goldcard #pickup table tbody td > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage),
body#goldcard #items > ul > li > dl dt:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage),
body#goldcard #items div.modal > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage),
body#platinumcard #pickup table tbody td > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage),
body#platinumcard #items > ul > li > dl dt:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage),
body#platinumcard #items div.modal > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}

body#goldcard #pickup table tbody td > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#goldcard #items > ul > li > dl dt:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#goldcard #items div.modal > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#platinumcard #pickup table tbody td > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#platinumcard #items > ul > li > dl dt:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#platinumcard #items div.modal > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before {
content: "";
width: 18px;
height: 18px;
flex: 0 0 18px;
display: inline-block;
-webkit-mask-image: var(--cc-feature-icon); mask-image: var(--cc-feature-icon); background-color: var(--cc-icon-color);
background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
background-position: center; -webkit-mask-position: center; mask-position: center;
background-size: contain; -webkit-mask-size: contain; mask-size: contain;
}

body#goldcard #pickup table tbody td > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#goldcard #items div.modal > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#platinumcard #pickup table tbody td > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#platinumcard #items div.modal > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before {
width: 15px;
height: 15px;
flex-basis: 15px;
}

body#platinumcard #pickup table tbody td > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before,
body#platinumcard #items div.modal > div > span:is(.gift, .wallet, .point, .star, .lounge, .plane-shield, .bag-shield, .family, .etc, .brand, .conditions, .concierge, .hotel, .dining, .baggage)::before {
filter: drop-shadow(0 0 6px rgba(16,139,116,.24));
}

/* Detail modal links use an information icon. */
body#goldcard #fv a.modal-open,
body#platinumcard #fv a.modal-open,
body#goldcard #items > ul > li > dl dd a.modal-open,
body#platinumcard #items > ul > li > dl dd a.modal-open {
	width: 18px;
	height: 18px;
	margin-left: 6px;
	display: inline-flex;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	color: transparent !important;
	align-items: center;
	justify-content: center;
	vertical-align: -4px;
	border: 1px solid rgba(29, 42, 58, .14);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(29, 42, 58, .08);
	font-size: var(--fs-xsmall);
	line-height: 1;
	text-decoration: none;
}
body#goldcard #fv a.modal-open::before,
body#platinumcard #fv a.modal-open::before,
body#goldcard #items > ul > li > dl dd a.modal-open::before,
body#platinumcard #items > ul > li > dl dd a.modal-open::before {
	content: "";
	width: 18px;
	height: 18px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	background-position: center; -webkit-mask-position: center; mask-position: center;
	background-size: contain; -webkit-mask-size: contain; mask-size: contain;
}
body#goldcard #fv a.modal-open::before,
body#goldcard #items > ul > li > dl dd a.modal-open::before { background-image: url("../../images/special/creditcard/icons/detail-gold.svg"); }
body#platinumcard #fv a.modal-open::before,
body#platinumcard #items > ul > li > dl dd a.modal-open::before { background-image: url("../../images/special/creditcard/icons/detail-emerald.svg"); }

/* Platinum service cards: center the icon lane. */

section#reference,
section#guardWording {
	padding: 32px 0 0 0;
}
section#reference h4 {
	max-width: 940px;
	margin: 0 auto;
	padding: 0 0 8px 0;
	font-size: var(--fs-large);
	line-height: 1.52;
	font-weight: bold;
}
section#reference ul {
	max-width: 940px;
	margin: 0 auto;
	font-size: var(--fs-base);
	line-height: 1.6;
}
section#guardWording ul li {
	display: block;
	text-indent: -1em;
}
section#guardWording ul li:before {
	content:"※";
}
section#guardWording ul {
	max-width: 940px;
	margin: 0 auto;
	padding: 0 1em;
	font-size: var(--fs-base);
	line-height: 1.6;
}
section#guardWording ul li {}
body#platinumcard section#reference,
body#platinumcard section#guardWording {
	margin: 0;
	padding: 0 0 32px 0;
	background-color: rgba(63, 69, 71, 0.9);
}
	body#platinumcard section#guardWording { padding: 0 0 64px 0;}
body#platinumcard section#reference h4 {
	max-width: 940px;
	margin: 0 auto;
	color: #fff;
	font-size: var(--fs-large);
}

.cc-articleBody ul.referenceLinks { margin: .75em 0 0 0;}
body#platinumcard ul.referenceLinks {
	max-width: 940px;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: #fff;
}
#platinumcard section#guardWording ul { color: #fff;}
#goldcard ul.referenceLinks a { color: #0b3478 !important;}
#platinumcard ul.referenceLinks a { color: #52e5d4 !important}
#platinumcard .cc-articleBody ul.referenceLinks a { color: var(--platinum-accent) !important;}

/* 参考リンクの左端にアイコンを表示 */
#goldcard ul.referenceLinks a::before,
#platinumcard ul.referenceLinks a::before {
content: "";
display: inline-block;
width:24px;
height: 24px;
margin-right: 0;
vertical-align: -7px;
-webkit-mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat;
        mask: url("../../images/special/creditcard/icons/chevron-right.svg") center / contain no-repeat;
}
/* 色はページごとに指定 */
#goldcard ul.referenceLinks a::before { background-color: var(--icon-gold); }
#platinumcard ul.referenceLinks a::before { background-color: #52e5d4; }
#platinumcard .cc-articleBody ul.referenceLinks a::before { background-color: var(--platinum-accent);}


/* --------------------------------------------------------------------------
Modal
 -------------------------------------------------------------------------- */
#items div.modal { 
	width: 540px;
	font-weight: normal;
	color: #000;}
#items div.modal > div > span {
	display: block;
	text-align: left;
}
#items div.modal > div > span:nth-of-type(1) {
	margin-bottom: 10px;
	color: #1d2a3a;
	font-size: var(--fs-large);
	font-weight: bold;
}
#items div.modal > div > span:nth-of-type(2) {
	margin-bottom: 8px;
	color: #f97316;
	font-weight: bold;
}

/* --------------------------------------------------------------------------- */

#article h2.cc-sectionTitle span {
	display: block;
	line-height: 1.42;
}

/* ==========================================================================
 離脱防止ポップアップ（レコメンド）  ※creditcard.css内で意匠上書き（v2）
   #modal-recommend-8 : ゴールド / #modal-recommend-9 : プラチナ
   構成: .modal-head > h3 / .modal-body > p + dl.items > div( dt + dd + dd )
   dd:nth-of-type(1)=キャッチ＋券面 , dd:nth-of-type(2)=公式サイトボタン
   各カードはタイル化（枠・影）してリッチ感／立体感を付与
 ========================================================================== */

/* ---- 共通レイアウト（PC：横3列タイル） --------------------------------- */
body#goldcard #modal-recommend-8.modal.modal-recommend,
body#platinumcard #modal-recommend-9.modal.modal-recommend {
	width: 940px;
	max-width: 94vw;
}
body#goldcard #modal-recommend-8 .modal-body > p,
body#platinumcard #modal-recommend-9 .modal-body > p {
	text-align: center;
	line-height: 1.6;
}
/* 4行トラック（① カード名 ② キャッチ ③ 券面 ④ ボタン）を親で定義し、
   各カードを subgrid にすることで商品名の行数が違っても各段の縦位置を揃える */
body#goldcard #modal-recommend-8 .modal-body dl.items,
body#platinumcard #modal-recommend-9 .modal-body dl.items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto auto auto;
	column-gap: 16px;
	row-gap: 0;
	margin: 20px 0 4px;
	background-color: transparent;
}
body#goldcard #modal-recommend-8 .modal-body dl.items > div,
body#platinumcard #modal-recommend-9 .modal-body dl.items > div {
	margin: 0;
	padding: 20px 18px 22px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: subgrid;
	justify-items: center;
	text-align: center;
}
/* 金融機関名（1段目）＋カード名（2段目） */
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dt,
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dt {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	min-height: 3.6em;
	margin: 0 0 16px;
	justify-content: flex-start;
}
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dt > span:nth-of-type(1),
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dt > span:nth-of-type(1) {
	font-size: var(--fs-small);
	font-weight: normal;
	line-height: 1.3;
	letter-spacing: .04em;
}
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dt > span:nth-of-type(2),
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dt > span:nth-of-type(2) {
	font-size: var(--fs-large);
	font-weight: bold;
	line-height: 1.32;
}
/* dd(1)：キャッチ（2行目）→ 券面（3行目）。各行を親と共有して縦位置を揃える */
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dd:nth-of-type(1),
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dd:nth-of-type(1) {
	grid-row: 2 / span 2;
	display: grid;
	grid-template-rows: subgrid;
	justify-items: center;
	width: 100%;
	margin: 0;
}
/* キャッチは自行の下端に揃える（1行／2行が混在しても吹き出し位置が揃う） */
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dd:nth-of-type(1) > span,
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dd:nth-of-type(1) > span {
	grid-row: 1;
	align-self: end;
}
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dd:nth-of-type(1) > img,
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dd:nth-of-type(1) > img {
	grid-row: 2;
	align-self: start;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
/* dd(2)：公式サイトボタン（4行目・下端揃え） */
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dd:nth-of-type(2),
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dd:nth-of-type(2) {
	grid-row: 4;
	align-self: end;
	width: 100%;
	margin: 0;
	padding-top: 18px;
	text-align: center;
}
body#goldcard #modal-recommend-8 .modal-body dl.items a,
body#platinumcard #modal-recommend-9 .modal-body dl.items a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	min-width: 12em;
	padding: .75em 1.4em;
	border-radius: 999px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}
body#goldcard #modal-recommend-8 .modal-body dl.items a:hover,
body#platinumcard #modal-recommend-9 .modal-body dl.items a:hover {
	opacity: .92;
	transform: translateY(-1px);
}
body#goldcard #modal-recommend-8 .modal-body dl.items a::after,
body#platinumcard #modal-recommend-9 .modal-body dl.items a::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	-webkit-mask: url("../../images/special/creditcard/icons/external.svg") center / contain no-repeat;
	        mask: url("../../images/special/creditcard/icons/external.svg") center / contain no-repeat;
	background-color: #fff;
}

/* ---- ゴールド意匠（クリーム基調 × ゴールド／ネイビー：リッチ） ---------- */
body#goldcard #modal-recommend-8.modal.modal-recommend {
	border: 1px solid rgba(216, 199, 159, .7);
	box-shadow: 0 24px 60px rgba(29, 42, 58, .28);
}
body#goldcard #modal-recommend-8 .modal-head {
	background: linear-gradient(90deg, #e9b84a 0%, #f8dd8f 48%, #e6ad3c 100%);
	border-bottom: 1px solid rgba(184, 142, 19, .45);
}
body#goldcard #modal-recommend-8 .modal-head h3 { color: #1d2a3a; }
body#goldcard #modal-recommend-8 .modal-close { color: #1d2a3a; }
body#goldcard #modal-recommend-8 .modal-body {
	background: linear-gradient(180deg, #fffdf8 0%, #fbf5e9 100%);
}
body#goldcard #modal-recommend-8 .modal-body > p { color: #55606d; }
/* カードタイル：白＋ゴールド極細枠＋柔らかな影 */
body#goldcard #modal-recommend-8 .modal-body dl.items > div {
	background: #ffffff;
	border-color: rgba(216, 199, 159, .6);
	box-shadow: 0 6px 18px rgba(29, 42, 58, .07);
}
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dt > span:nth-of-type(1) { color: #6b7280; }
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dt > span:nth-of-type(2) { color: #1d2a3a; }
/* キャッチ：オレンジ枠ピル */
/* キャッチ：吹き出し（下向きの尾つき／ボタンと差別化） */
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dd:nth-of-type(1) > span {
	position: relative;
	display: inline-block;
	margin: 0 0 22px;
	padding: 7px 16px;
	border-radius: 10px;
	background: #ffedd0;
	color: #b5610d;
	font-weight: bold;
	font-size: var(--fs-base);
	line-height: 1.25;
}
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dd:nth-of-type(1) > span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-bottom: 0;
	border-top-color: #ffedd0;
}
body#goldcard #modal-recommend-8 .modal-body dl.items > div > dd:nth-of-type(1) > img {
	box-shadow: 0 8px 20px rgba(29, 42, 58, .18);
}
/* ボタン：ネイビー（艶グラデ） */
body#goldcard #modal-recommend-8 .modal-body dl.items a {
	background: linear-gradient(180deg, #1c327f 0%, #11205a 100%);
	box-shadow: 0 6px 16px rgba(17, 34, 94, .32);
}

/* ---- プラチナ意匠（チャコール基調 × エメラルド：立体・リッチ） --------- */
body#platinumcard #modal-recommend-9.modal.modal-recommend {
	border: 1px solid rgba(120, 206, 182, .65);
	box-shadow: 0 26px 70px rgba(0, 0, 0, .65);
}
body#platinumcard #modal-recommend-9 .modal-head {
	background: linear-gradient(90deg, #15233c 0%, #123040 100%);
	border-bottom: 3px solid #22d4b5;
}
body#platinumcard #modal-recommend-9 .modal-head h3 { color: #f8f9fb; }
body#platinumcard #modal-recommend-9 .modal-close { color: #f8f9fb; }
/* 本体：純黒回避のチャコール＋上部にエメラルドの微光 */
body#platinumcard #modal-recommend-9 .modal-body {
	background:
		radial-gradient(170% 130% at 50% -22%,
			rgba(34, 212, 181, .16) 0%,
			rgba(34, 212, 181, .11) 20%,
			rgba(34, 212, 181, .07) 38%,
			rgba(34, 212, 181, .04) 56%,
			rgba(34, 212, 181, .02) 74%,
			rgba(34, 212, 181, .01) 88%,
			rgba(34, 212, 181, 0) 100%),
		linear-gradient(180deg, #243651 0%, #18253c 45%, #0b1119 100%);
}
body#platinumcard #modal-recommend-9 .modal-body > p { color: #c8cfd8; }
/* カードタイル：一段明るいダーク＋エメラルド極細枠＋影 */
body#platinumcard #modal-recommend-9 .modal-body dl.items > div {
	background: linear-gradient(180deg, rgba(9, 16, 26, .5) 0%, rgba(9, 16, 26, .28) 100%);
	border-color: rgba(120, 206, 182, .22);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dt > span:nth-of-type(1) { color: rgba(255, 255, 255, .64); }
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dt > span:nth-of-type(2) { color: #f4f6f8; }
/* キャッチ：吹き出し（下向きの尾つき） */
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dd:nth-of-type(1) > span {
	position: relative;
	display: inline-block;
	margin: 0 0 22px;
	padding: 7px 16px;
	border-radius: 10px;
	background: #f5f3ed;
	color: #14233d;
	font-weight: bold;
	font-size: var(--fs-base);
	line-height: 1.25;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dd:nth-of-type(1) > span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-bottom: 0;
	border-top-color: #f5f3ed;
}
body#platinumcard #modal-recommend-9 .modal-body dl.items > div > dd:nth-of-type(1) > img {
	box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
}
/* ボタン：エメラルド（艶グラデ） */
body#platinumcard #modal-recommend-9 .modal-body dl.items a {
	background: linear-gradient(180deg, #1aa488 0%, #0d7d65 100%);
	box-shadow: 0 8px 20px rgba(13, 125, 101, .4);
}
/* ==== 離脱防止ポップアップ ここまで（v2） ==== */