@charset "UTF-8";

/* =========================================================================
 * JDB Bank Child - main.css
 * デザインガイドライン仕様書 (05_design_guideline.md) 準拠
 *
 * 目次:
 *   0. CSS変数 (カラー / 余白 / 角丸 / 影 / フォント / レイアウト)
 *   1. リセット & ベース
 *   2. タイポグラフィ
 *   3. レイアウト (コンテナ / グリッド)
 *   4. リンク / フォーカス可視化 (WCAG AA)
 *   5. ヘッダー / フッター 微調整
 *   6. アクセシビリティ補助
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 0. CSS Variables  (JDB銀行ブランド:藍 #0a3d62 + ゴールド #c9a14a)
 * ------------------------------------------------------------------------- */
:root {
	/* Brand — Primary (藍系・銀行らしい落ち着き) */
	--jdb-primary:        #0a3d62;
	--jdb-primary-2:      #0f5298;
	--jdb-primary-dark:   #072c47;
	--jdb-primary-light:  #e8f1f7;

	/* Brand — Accent (シャンパンゴールド) */
	--jdb-accent:         #c9a14a;
	--jdb-accent-2:       #d6b75e;
	--jdb-accent-light:   #f8f1de;

	/* Legacy aliases — 既存CSSが --jdb-red を参照している箇所を JDB藍へマップ */
	--jdb-red:            var(--jdb-primary);
	--jdb-red-dark:       var(--jdb-primary-dark);
	--jdb-red-light:      var(--jdb-primary-light);

	/* Neutrals */
	--jdb-black:      #0A0A0A;
	--jdb-charcoal:   #1d2433;
	--jdb-gray-900:   #2A2A2A;
	--jdb-gray-700:   #4a5568;
	--jdb-gray-500:   #767676; /* WCAG AA on white 4.54:1 */
	--jdb-gray-300:   #D8D8D8;
	--jdb-gray-200:   #e1e7ef;
	--jdb-gray-100:   #f6f8fb;
	--jdb-white:      #FFFFFF;

	/* Semantic */
	--jdb-success:    #1d8348;
	--jdb-warning:    #b7791f;
	--jdb-info:       #0A84FF;
	--jdb-danger:     #c0392b;

	/* Typography */
	--jdb-font-jp:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "Meiryo", sans-serif;
	--jdb-font-en:    "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--jdb-font-mono:  "JetBrains Mono", "Source Code Pro", Menlo, Consolas, monospace;

	--jdb-fs-base:    17px;       /* PC本文 */
	--jdb-fs-sp:      15px;       /* SP本文 */
	--jdb-lh-base:    1.8;
	--jdb-lh-tight:   1.45;

	/* Spacing scale (8px base) */
	--jdb-sp-1:       4px;
	--jdb-sp-2:       8px;
	--jdb-sp-3:       12px;
	--jdb-sp-4:       16px;
	--jdb-sp-5:       24px;
	--jdb-sp-6:       32px;
	--jdb-sp-7:       48px;
	--jdb-sp-8:       64px;
	--jdb-sp-9:       80px;
	--jdb-sp-10:      120px;

	/* Layout */
	--jdb-container:  1200px;
	--jdb-gutter:     24px;

	/* Radius */
	--jdb-radius-sm:  8px;
	--jdb-radius-md:  12px;
	--jdb-radius-lg:  16px;
	--jdb-radius-pill:9999px;

	/* Shadows */
	--jdb-shadow-sm:  0 2px 6px rgba(0,0,0,0.06);
	--jdb-shadow-md:  0 4px 16px rgba(0,0,0,0.08);
	--jdb-shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

	/* Transitions */
	--jdb-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
	--jdb-dur-fast:   120ms;
	--jdb-dur-base:   200ms;
}

/* -------------------------------------------------------------------------
 * 1. リセット拡張(Cocoon側のリセットを尊重しつつ)
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--jdb-font-jp);
	font-size:   var(--jdb-fs-base);
	line-height: var(--jdb-lh-base);
	color:       var(--jdb-black);
	background:  var(--jdb-white);
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
 * 2. タイポグラフィ
 * ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--jdb-font-jp);
	color:       var(--jdb-black);
	line-height: var(--jdb-lh-tight);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(24px, 3vw, 32px); margin-top: var(--jdb-sp-7); border-left: 6px solid var(--jdb-red); padding-left: var(--jdb-sp-4); }
h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: var(--jdb-sp-6); }
h4 { font-size: 18px; }

p { margin: 0 0 var(--jdb-sp-4); }

strong, b { font-weight: 700; color: var(--jdb-black); }
em        { font-style: italic; }

ul, ol {
	margin: 0 0 var(--jdb-sp-4) 1.5em;
	padding: 0;
}
li + li { margin-top: var(--jdb-sp-1); }

blockquote {
	margin: var(--jdb-sp-5) 0;
	padding: var(--jdb-sp-4) var(--jdb-sp-5);
	border-left: 4px solid var(--jdb-red);
	background: var(--jdb-gray-100);
	color: var(--jdb-gray-900);
	border-radius: 0 var(--jdb-radius-sm) var(--jdb-radius-sm) 0;
}

code, kbd, samp {
	font-family: var(--jdb-font-mono);
	font-size: 0.92em;
	background: var(--jdb-gray-100);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * 3. レイアウト
 * ------------------------------------------------------------------------- */
.jdb-container {
	width: 100%;
	max-width: var(--jdb-container);
	margin-inline: auto;
	padding-inline: var(--jdb-gutter);
}

.jdb-section {
	padding-block: var(--jdb-sp-9);
}

@media (max-width: 768px) {
	body { font-size: var(--jdb-fs-sp); }
	.jdb-section { padding-block: var(--jdb-sp-7); }
}

/* -------------------------------------------------------------------------
 * 4. リンク / フォーカス
 * ------------------------------------------------------------------------- */
a {
	color: var(--jdb-red);
	text-decoration: none;
	transition: color var(--jdb-dur-fast) var(--jdb-ease);
}
a:hover { color: var(--jdb-red-dark); text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--jdb-red);
	outline-offset: 2px;
	border-radius: 4px;
}

/* スキップリンク(アクセシビリティ) */
.jdb-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--jdb-black);
	color: var(--jdb-white);
	padding: var(--jdb-sp-2) var(--jdb-sp-4);
	z-index: 10000;
	transition: top var(--jdb-dur-fast) var(--jdb-ease);
}
.jdb-skip-link:focus { top: 0; }

/* -------------------------------------------------------------------------
 * 5. ヘッダー / フッター 微調整(Cocoon上書き)
 * ------------------------------------------------------------------------- */
#header,
.header { background: var(--jdb-white); }

#footer,
.footer { background: var(--jdb-charcoal); color: var(--jdb-gray-200); }
#footer a, .footer a { color: var(--jdb-white); }

/* -------------------------------------------------------------------------
 * 6. アクセシビリティ
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* スクリーンリーダー専用 */
.jdb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}