@charset "UTF-8";
/* =========================================================================
 * JDB Bank Child - grand.css
 * 大手銀行公式サイト相当の壮大デザイン(front-page 専用 + 全体トーン強化)
 * ========================================================================= */

/* ============================================================
 * 共通エレメント
 * ============================================================ */
.jdb-gold-bar {
	display:inline-block;
	width:32px;
	height:2px;
	background:linear-gradient(90deg, var(--jdb-accent), var(--jdb-accent-2));
	vertical-align:middle;
	margin-right:.7em;
	transform:translateY(-2px);
}
.jdb-section-header { margin:0 0 3rem; }
.jdb-section-header--center { text-align:center; }
.jdb-section-header__kicker {
	font-size:.85rem;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--jdb-primary);
	font-weight:600;
	margin:0 0 .8rem;
}
.jdb-section-header__title {
	font-size:clamp(1.6rem, 3.2vw, 2.4rem);
	line-height:1.4;
	font-weight:800;
	color:var(--jdb-charcoal);
	margin:0 0 .8rem;
	letter-spacing:.01em;
}
.jdb-section-header__sub {
	color:var(--jdb-gray-700);
	margin:0;
}
.jdb-on-dark { color:#fff !important; }
.jdb-on-dark .jdb-gold-bar { background:linear-gradient(90deg, var(--jdb-accent), var(--jdb-accent-2)); }
.jdb-hide-sp { display:none; } @media (min-width:768px) { .jdb-hide-sp { display:inline; } }
.jdb-hide-pc { display:inline; } @media (min-width:768px) { .jdb-hide-pc { display:none; } }

/* ============================================================
 * 1. Grand Hero(フルブリード写真 + 重厚なコピー)
 * ============================================================ */
.jdb-hero-grand {
	position:relative;
	min-height:78vh;
	min-height:680px;
	display:flex;
	align-items:center;
	color:#fff;
	overflow:hidden;
	margin:-40px 0 0; /* Cocoon ヘッダー直下に詰める */
}
.jdb-hero-grand__media {
	position:absolute; inset:0;
	z-index:0;
}
.jdb-hero-grand__media img {
	width:100%; height:100%;
	object-fit:cover;
	object-position:center;
}
.jdb-hero-grand__overlay {
	position:absolute; inset:0;
	background:
		linear-gradient( to right, rgba(10,61,98,.94) 0%, rgba(10,61,98,.78) 38%, rgba(10,61,98,.42) 68%, rgba(10,61,98,.28) 100% ),
		linear-gradient( to bottom, rgba(7,44,71,.35) 0%, rgba(7,44,71,.55) 100% );
}
.jdb-hero-grand__inner {
	position:relative; z-index:2;
	width:100%;
	padding:4rem 0;
}
.jdb-hero-grand__kicker {
	font-size:.85rem;
	letter-spacing:.18em;
	color:var(--jdb-accent-2);
	font-weight:700;
	text-transform:uppercase;
	margin:0 0 1.4rem;
}
.jdb-hero-grand__title {
	font-size:clamp(1.85rem, 4.4vw, 3.6rem);
	line-height:1.32;
	font-weight:800;
	margin:0 0 1.5rem;
	letter-spacing:.01em;
	text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.jdb-hero-grand__rate {
	color:var(--jdb-accent);
	font-size:1.15em;
	letter-spacing:.02em;
	font-weight:900;
	text-shadow:0 2px 20px rgba(201,161,74,.45);
}
.jdb-hero-grand__lead {
	font-size:clamp(1rem, 1.6vw, 1.2rem);
	line-height:1.85;
	color:#e8f1f7;
	max-width:580px;
	margin:0 0 2rem;
}
.jdb-hero-grand__cta {
	display:flex; flex-wrap:wrap;
	gap:1rem;
	margin:0 0 2rem;
}
.jdb-hero-grand__note {
	font-size:.78rem;
	color:rgba(232,241,247,.7);
	max-width:680px;
	line-height:1.65;
}

/* ============================================================
 * 2. ボタン群(大手銀行風・厚みのある)
 * ============================================================ */
.jdb-btn-primary-xl,
.jdb-btn-ghost-xl,
.jdb-btn-gold-xl,
.jdb-btn-ghost {
	display:inline-flex;
	align-items:center;
	gap:.6em;
	padding:1.05em 2.2em;
	border-radius:4px;
	text-decoration:none;
	font-weight:700;
	letter-spacing:.05em;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
	border:none;
	cursor:pointer;
}
.jdb-btn-primary-xl {
	background:linear-gradient(180deg, var(--jdb-accent) 0%, var(--jdb-accent-2) 100%);
	color:#0a3d62;
	box-shadow:0 6px 18px rgba(201,161,74,.32), inset 0 1px 0 rgba(255,255,255,.5);
	font-size:1.08rem;
}
.jdb-btn-primary-xl:hover {
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(201,161,74,.42), inset 0 1px 0 rgba(255,255,255,.5);
	color:#0a3d62;
}
.jdb-btn-ghost-xl {
	background:transparent;
	color:#fff;
	border:2px solid rgba(255,255,255,.7);
	font-size:1.04rem;
}
.jdb-btn-ghost-xl:hover {
	background:#fff;
	color:var(--jdb-primary);
}
.jdb-btn-gold-xl {
	background:linear-gradient(180deg, var(--jdb-accent) 0%, var(--jdb-accent-2) 100%);
	color:#0a3d62;
	font-size:1.18rem;
	padding:1.2em 2.6em;
	box-shadow:0 10px 30px rgba(201,161,74,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
.jdb-btn-gold-xl:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(201,161,74,.55); color:#0a3d62; }
.jdb-btn-ghost {
	background:transparent;
	color:var(--jdb-primary);
	border:1.5px solid var(--jdb-primary);
	padding:.85em 1.8em;
	font-size:.96rem;
}
.jdb-btn-ghost:hover { background:var(--jdb-primary); color:#fff; }
.jdb-arrow { display:inline-block; transition:transform .15s ease; }
.jdb-btn-primary-xl:hover .jdb-arrow, .jdb-btn-gold-xl:hover .jdb-arrow { transform:translateX(4px); }

/* ============================================================
 * 3. Trust Bar(信頼指標の横バー)
 * ============================================================ */
.jdb-trust-bar {
	background:#fff;
	border-bottom:1px solid var(--jdb-gray-200);
	padding:1.4rem 0;
	box-shadow:0 2px 14px rgba(10,61,98,.05);
}
.jdb-trust-bar__list {
	list-style:none; padding:0; margin:0;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
	gap:1.2rem 2rem;
	text-align:center;
}
.jdb-trust-bar__list li {
	border-left:2px solid var(--jdb-accent);
	padding:.2rem 0 .2rem 1rem;
	text-align:left;
}
.jdb-trust-bar__list strong {
	display:block;
	font-size:1.25rem;
	color:var(--jdb-primary);
	font-weight:800;
	letter-spacing:.01em;
}
.jdb-trust-bar__list span {
	display:block;
	font-size:.78rem;
	color:var(--jdb-gray-700);
	margin-top:.2rem;
}

/* ============================================================
 * 4. Section base
 * ============================================================ */
.jdb-section { padding:6rem 0; }
@media (max-width:767px) { .jdb-section { padding:3.5rem 0; } }
.jdb-section--white { background:#fff; }
.jdb-section--gray { background:#f6f8fb; }
.jdb-section--navy {
	background:linear-gradient(135deg, #0a3d62 0%, #0f5298 60%, #072c47 100%);
	color:#fff;
	position:relative;
	overflow:hidden;
}
.jdb-section--navy::before {
	content:'';
	position:absolute; top:0; right:0;
	width:600px; height:600px;
	background:radial-gradient(circle, rgba(201,161,74,.18) 0%, transparent 60%);
	pointer-events:none;
}

/* ============================================================
 * 5. Feature Grid(3カラム特徴)
 * ============================================================ */
.jdb-feature-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
	gap:2.5rem;
}
.jdb-feature {
	padding:2.5rem 2rem;
	background:#fff;
	border-top:3px solid var(--jdb-accent);
	box-shadow:0 4px 20px rgba(10,61,98,.06);
	transition:transform .2s ease, box-shadow .2s ease;
}
.jdb-feature:hover {
	transform:translateY(-4px);
	box-shadow:0 12px 32px rgba(10,61,98,.12);
}
.jdb-feature__icon {
	color:var(--jdb-primary);
	width:56px; height:56px;
	margin-bottom:1.5rem;
}
.jdb-feature__icon svg { width:100%; height:100%; }
.jdb-feature h3 {
	font-size:1.25rem;
	color:var(--jdb-charcoal);
	margin:0 0 1rem;
	font-weight:700;
	line-height:1.4;
}
.jdb-feature p {
	color:var(--jdb-gray-700);
	font-size:.96rem;
	line-height:1.85;
	margin:0 0 1.2rem;
}
.jdb-feature__more {
	color:var(--jdb-primary);
	font-weight:700;
	text-decoration:none;
	font-size:.92rem;
	letter-spacing:.02em;
}
.jdb-feature__more:hover { color:var(--jdb-accent); }

/* ============================================================
 * 6. Rate Compare(横棒チャート)
 * ============================================================ */
.jdb-rate-compare { margin:2.5rem 0 1.5rem; }
.jdb-rate-row {
	display:grid;
	grid-template-columns:200px 1fr 140px;
	align-items:center;
	gap:1.2rem;
	padding:1rem 0;
	border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:767px) {
	.jdb-rate-row { grid-template-columns:130px 1fr 100px; gap:.6rem; font-size:.9rem; }
}
.jdb-rate-row__name {
	color:#e8f1f7;
	font-weight:500;
}
.jdb-rate-row__bar {
	display:block;
	height:14px;
	background:linear-gradient(90deg, rgba(201,161,74,.28) 0%, rgba(201,161,74,.55) 100%);
	border-radius:2px;
}
.jdb-rate-row--hero .jdb-rate-row__bar {
	background:linear-gradient(90deg, var(--jdb-accent) 0%, var(--jdb-accent-2) 100%);
	height:22px;
	box-shadow:0 0 24px rgba(201,161,74,.5);
}
.jdb-rate-row--hero .jdb-rate-row__name {
	color:#fff;
	font-weight:800;
	font-size:1.05em;
}
.jdb-rate-row--hero .jdb-rate-row__value {
	color:var(--jdb-accent);
	font-weight:900;
	font-size:1.35em;
}
.jdb-rate-row__value {
	color:#fff;
	font-weight:700;
	text-align:right;
}
.jdb-rate-compare__note {
	font-size:.78rem;
	color:rgba(232,241,247,.65);
	max-width:780px;
	margin:1.5rem auto 0;
	text-align:center;
	line-height:1.7;
}

/* ============================================================
 * 7. Step Grid(申込みステップ4枚)
 * ============================================================ */
.jdb-step-grid {
	list-style:none; padding:0; margin:0 0 2rem;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:1.5rem;
	counter-reset:step;
}
.jdb-step {
	padding:2rem 1.5rem;
	background:#fff;
	border:1px solid var(--jdb-gray-200);
	border-radius:6px;
	position:relative;
	box-shadow:0 2px 10px rgba(10,61,98,.04);
}
.jdb-step__num {
	display:block;
	font-size:2.5rem;
	font-weight:900;
	font-family:Inter, sans-serif;
	color:var(--jdb-accent);
	line-height:1;
	margin-bottom:1rem;
	letter-spacing:-.02em;
}
.jdb-step h3 {
	font-size:1.1rem;
	color:var(--jdb-primary);
	margin:0 0 .8rem;
	font-weight:700;
}
.jdb-step p {
	font-size:.9rem;
	color:var(--jdb-gray-700);
	line-height:1.75;
	margin:0;
}
.jdb-step-cta { text-align:center; margin:2.5rem 0 1rem; }
.jdb-step-note { text-align:center; font-size:.85rem; color:var(--jdb-gray-700); }

/* ============================================================
 * 8. Split Section(画像 + テキスト 50/50)
 * ============================================================ */
.jdb-split-section {
	display:grid;
	grid-template-columns:1fr 1fr;
	min-height:520px;
}
@media (max-width:899px) {
	.jdb-split-section { grid-template-columns:1fr; }
}
.jdb-split-section--reverse .jdb-split-section__media { order:2; }
@media (max-width:899px) {
	.jdb-split-section--reverse .jdb-split-section__media { order:0; }
}
.jdb-split-section__media {
	position:relative;
	min-height:380px;
}
.jdb-split-section__media img {
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
}
.jdb-split-section__body {
	background:#fff;
	display:flex; align-items:center;
	padding:4rem 3rem;
}
.jdb-split-section__inner { max-width:520px; margin:0 auto; }
.jdb-split-section__title {
	font-size:clamp(1.5rem, 2.6vw, 2rem);
	color:var(--jdb-charcoal);
	font-weight:800;
	line-height:1.45;
	margin:0 0 1.3rem;
}
.jdb-split-section__body p {
	color:var(--jdb-gray-700);
	font-size:1rem;
	line-height:1.95;
	margin:0 0 1.5rem;
}

/* check list */
.jdb-check-list {
	list-style:none; padding:0; margin:0 0 1.5rem;
}
.jdb-check-list li {
	position:relative;
	padding:.55em 0 .55em 2em;
	color:var(--jdb-charcoal);
	font-size:.96rem;
	border-bottom:1px dashed var(--jdb-gray-200);
}
.jdb-check-list li::before {
	content:'';
	position:absolute; left:0; top:.85em;
	width:18px; height:18px;
	background:var(--jdb-accent);
	border-radius:50%;
	box-shadow:inset 0 0 0 4px #fff, 0 0 0 1px var(--jdb-accent);
}
.jdb-check-list li::after {
	content:'';
	position:absolute; left:5px; top:1.1em;
	width:8px; height:5px;
	border-left:2px solid var(--jdb-accent);
	border-bottom:2px solid var(--jdb-accent);
	transform:rotate(-45deg);
	z-index:2;
}

/* key-vals */
.jdb-keyvals {
	display:grid;
	grid-template-columns:120px 1fr;
	gap:.6em 1em;
	margin:0 0 1.5rem;
	font-size:.96rem;
}
.jdb-keyvals dt { color:var(--jdb-primary); font-weight:700; }
.jdb-keyvals dd { color:var(--jdb-gray-700); margin:0; }

/* ============================================================
 * 9. Card link grid(比較・関連系)
 * ============================================================ */
.jdb-card-link {
	display:block;
	padding:1.8rem;
	background:#fff;
	border-left:4px solid var(--jdb-accent);
	text-decoration:none;
	transition:all .2s ease;
	box-shadow:0 2px 10px rgba(10,61,98,.04);
}
.jdb-card-link:hover {
	transform:translateY(-3px);
	box-shadow:0 10px 24px rgba(10,61,98,.1);
	border-left-color:var(--jdb-primary);
}
.jdb-card-link h3 {
	color:var(--jdb-primary);
	margin:0 0 .5rem;
	font-size:1.1rem;
	font-weight:700;
}
.jdb-card-link p {
	color:var(--jdb-gray-700);
	margin:0;
	font-size:.9rem;
}

/* ============================================================
 * 10. Final CTA(画面下部の壮大な締め)
 * ============================================================ */
.jdb-final-cta {
	background:
		linear-gradient(135deg, rgba(10,61,98,.92) 0%, rgba(15,82,152,.86) 50%, rgba(7,44,71,.94) 100%),
		radial-gradient(ellipse at center, rgba(201,161,74,.15), transparent 60%);
	background-color:#0a3d62;
	color:#fff;
	padding:6rem 0;
	text-align:center;
	position:relative;
	overflow:hidden;
}
.jdb-final-cta::before {
	content:'';
	position:absolute; top:0; left:50%;
	transform:translateX(-50%);
	width:80px; height:3px;
	background:linear-gradient(90deg, var(--jdb-accent), var(--jdb-accent-2));
}
.jdb-final-cta h2 {
	font-size:clamp(1.7rem, 3.5vw, 2.6rem);
	font-weight:800;
	line-height:1.4;
	margin:0 0 1rem;
	color:#fff;
}
.jdb-final-cta > .jdb-container > p {
	color:#e8f1f7;
	font-size:1.1rem;
	margin:0 0 2.5rem;
}
.jdb-final-cta__note {
	color:rgba(232,241,247,.7) !important;
	font-size:.78rem !important;
	max-width:720px;
	margin:2rem auto 0 !important;
	line-height:1.7;
}

/* ============================================================
 * 11. ヘッダー全体のトーン強化
 * ============================================================ */
.jdb-site-header {
	background:#fff;
	border-bottom:1px solid var(--jdb-gray-200);
	box-shadow:0 1px 4px rgba(10,61,98,.04);
}
.jdb-site-header__title {
	color:var(--jdb-primary);
	font-weight:800;
	letter-spacing:.01em;
}

/* ============================================================
 * 12. CTA(article footer の jdb-apply-cta)を厚みあるデザインに
 * ============================================================ */
.jdb-apply-cta {
	background:linear-gradient(135deg, #f6f8fb 0%, #e8f1f7 100%);
	border:none;
	border-top:4px solid var(--jdb-accent);
	padding:2.5rem;
	margin:3rem 0 2rem;
	box-shadow:0 4px 24px rgba(10,61,98,.08);
}
.jdb-apply-cta__brand {
	display:flex; align-items:center; gap:.7em;
	color:var(--jdb-primary);
	font-weight:700;
	margin-bottom:1rem;
	font-size:.95rem;
}
.jdb-apply-cta__mark {
	display:inline-flex; align-items:center; justify-content:center;
	width:36px; height:36px;
	background:linear-gradient(135deg, var(--jdb-primary), var(--jdb-primary-2));
	color:#fff;
	font-weight:900;
	font-size:1.1rem;
	border-radius:50%;
	box-shadow:0 4px 10px rgba(10,61,98,.3);
}
.jdb-apply-cta__headline {
	font-size:clamp(1.3rem, 2.4vw, 1.7rem);
	color:var(--jdb-charcoal);
	line-height:1.45;
	margin:0 0 1rem;
	font-weight:800;
}
.jdb-apply-cta__hero {
	color:var(--jdb-primary);
	font-weight:900;
}
.jdb-apply-cta__sub {
	color:var(--jdb-gray-700);
	line-height:1.85;
	margin:0 0 1.5rem;
}
.jdb-apply-cta__features {
	list-style:none; padding:0; margin:0 0 1.8rem;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
	gap:.7em 1.5em;
}
.jdb-apply-cta__features li {
	font-size:.92rem;
	color:var(--jdb-charcoal);
}
.jdb-apply-cta__btn {
	display:inline-block;
	padding:1.1em 2.4em;
	background:linear-gradient(180deg, var(--jdb-accent), var(--jdb-accent-2));
	color:#0a3d62 !important;
	font-weight:800;
	font-size:1.05rem;
	border-radius:4px;
	text-decoration:none;
	box-shadow:0 6px 18px rgba(201,161,74,.32);
	transition:transform .15s ease, box-shadow .15s ease;
}
.jdb-apply-cta__btn:hover {
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(201,161,74,.42);
}
.jdb-apply-cta__legal {
	font-size:.78rem;
	color:var(--jdb-gray-700);
	line-height:1.7;
	margin-top:1.5rem;
}

/* ============================================================
 * 13. 法令注意書きの装飾
 * ============================================================ */
.jdb-disclaimer {
	background:#fdfaf3;
	border-left:4px solid var(--jdb-warning);
	padding:1.2rem 1.5rem;
	margin:2rem 0;
	font-size:.88rem;
}
.jdb-disclaimer p { margin:0 0 .5rem; color:var(--jdb-charcoal); font-weight:700; }
.jdb-disclaimer ul { margin:0; padding-left:1.4em; color:var(--jdb-gray-700); }
.jdb-disclaimer li { line-height:1.75; margin:.3em 0; }

/* ============================================================
 * 14. lede / risk-note(本文先頭・末尾の装飾)
 * ============================================================ */
.jdb-lede {
	font-size:1.08rem;
	line-height:1.95;
	color:var(--jdb-charcoal);
	padding:1rem 1.2rem;
	background:#f6f8fb;
	border-left:3px solid var(--jdb-primary);
	margin:0 0 1.5rem;
	font-weight:500;
}
.jdb-risk-note {
	background:#fdfaf3;
	border-left:3px solid var(--jdb-warning);
	padding:.9rem 1.2rem;
	margin:1.5rem 0;
	font-size:.88rem;
	color:var(--jdb-gray-700);
}
.jdb-risk-note p { margin:0; }

/* ============================================================
 * 15. インラインCTAボックス(固定ページ内に既に入っている)
 * ============================================================ */
.jdb-inline-cta {
	background:linear-gradient(135deg, #f6f8fb 0%, #e8f1f7 100%) !important;
	border-left:6px solid var(--jdb-accent) !important;
	padding:2rem !important;
	margin:2.5rem 0 !important;
	border-radius:4px;
	box-shadow:0 4px 18px rgba(10,61,98,.06);
}
.jdb-inline-cta p:first-child {
	color:var(--jdb-primary);
	font-size:1.1rem !important;
	margin-bottom:1rem !important;
}
.jdb-inline-cta a[href="/register/"] {
	background:linear-gradient(180deg, var(--jdb-accent), var(--jdb-accent-2)) !important;
	color:#0a3d62 !important;
	padding:.9em 2em !important;
	font-weight:800 !important;
	box-shadow:0 6px 18px rgba(201,161,74,.3);
	transition:transform .15s ease, box-shadow .15s ease;
}
.jdb-inline-cta a[href="/register/"]:hover {
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(201,161,74,.42);
}