@charset "UTF-8";

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

/* -------------------------------------------------------------------------
 * 0. CSS Variables
 * ------------------------------------------------------------------------- */
:root {
	/* Brand / Primary */
	--rdp-red:        #E60012;
	--rdp-red-dark:   #A8000C;
	--rdp-red-light:  #FFF5F5;

	/* Neutrals */
	--rdp-black:      #0A0A0A;
	--rdp-charcoal:   #1F1F1F;
	--rdp-gray-900:   #2A2A2A;
	--rdp-gray-700:   #4A4A4A;
	--rdp-gray-500:   #767676; /* WCAG AA on white で 4.54:1 */
	--rdp-gray-300:   #D8D8D8;
	--rdp-gray-200:   #E8E8E8;
	--rdp-gray-100:   #F5F5F7;
	--rdp-white:      #FFFFFF;

	/* Semantic */
	--rdp-success:    #00B27A;
	--rdp-warning:    #FF8A00;
	--rdp-info:       #0A84FF;
	--rdp-danger:     #E60012;

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

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

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

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

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

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

	/* Transitions */
	--rdp-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
	--rdp-dur-fast:   120ms;
	--rdp-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(--rdp-font-jp);
	font-size:   var(--rdp-fs-base);
	line-height: var(--rdp-lh-base);
	color:       var(--rdp-black);
	background:  var(--rdp-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(--rdp-font-jp);
	color:       var(--rdp-black);
	line-height: var(--rdp-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(--rdp-sp-7); border-left: 6px solid var(--rdp-red); padding-left: var(--rdp-sp-4); }
h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: var(--rdp-sp-6); }
h4 { font-size: 18px; }

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

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

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

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

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

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

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

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

/* -------------------------------------------------------------------------
 * 4. リンク / フォーカス
 * ------------------------------------------------------------------------- */
a {
	color: var(--rdp-red);
	text-decoration: none;
	transition: color var(--rdp-dur-fast) var(--rdp-ease);
}
a:hover { color: var(--rdp-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(--rdp-red);
	outline-offset: 2px;
	border-radius: 4px;
}

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

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

#footer,
.footer { background: var(--rdp-charcoal); color: var(--rdp-gray-200); }
#footer a, .footer a { color: var(--rdp-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;
	}
}

/* スクリーンリーダー専用 */
.rdp-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;
}