@charset "UTF-8";
/* =========================================================
   base.css - リセット / デザイントークン / 基準スケール
   ---------------------------------------------------------
   Figmaのアートボード幅 1440px を基準に 1rem = 10px として
   すべての数値を rem（Figmaのpx ÷ 10）で記述しています。

   ルートの font-size を「実効ビューポート幅 ÷ 144」とすることで、
   画面幅が広がっても狭まってもデザインが等倍でスケールし、
   Figmaの見た目（余白・位置関係）がそのまま維持されます。
   1920px を超えるとスケールを固定し、コンテンツは中央寄せ、
   背景色・背景画像のみ画面いっぱいに広がります。
   ========================================================= */

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, em, img, small, strong, sub, sup, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, main, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, svg, video { max-width: 100%; height: auto; vertical-align: top; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
sup { font-size: 60%; vertical-align: super; line-height: 0; }

/* ---------- tokens ---------- */
:root {
	--c-main: #003070;
	--c-blue: #205da4;       /* イントロ背景（グレイン込みの見た目） */
	--c-blue-deep: #004697;
	--c-accent: #5ea9e6;
	--c-gold: #e4be71;
	--c-navy-dark: #0a2342;
	--c-dark: #15161e;
	--c-text: #20242b;
	--c-light: #f0f1ff;
	--c-border: #d8e3f0;
	--c-gray: #f7f7f7;
	--c-line: #d9d9d9;
	--c-footer: #333333;

	--font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--font-gothic: "Zen Kaku Gothic New", var(--font-sans);
	--font-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--font-en: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;

	--header-h: 10.2rem;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-soft: cubic-bezier(.16, .84, .32, 1);
	--ease-pop: cubic-bezier(.2, .9, .28, 1);
	--ease-back: cubic-bezier(.34, 1.5, .5, 1);
}

/* ---------- scale ---------- */
/* --ws-vw は header.php のインラインスクリプトで
   document.documentElement.clientWidth（スクロールバーを除いた幅）が入る。
   JSが動かない環境でも 100vw にフォールバックする。 */
html {
	/* 元の基準（1920pxで 1rem = 13.3333px）に対して70%の 9.3333px を上限にする。
	   1344px以上で頭打ちになり、以降は拡大せず左右に余白が出る。
	   ※TOPのMVだけは top.css 側で頭打ちにしていないので縮小の対象外 */
	font-size: min(calc(var(--ws-vw, 100vw) / 144), 9.3333px);
	overflow-y: scroll;
}

/* SPは414px幅を基準にする（1rem = 10px）。
   FigmaのSPデザインは390px基準だが、実装は414pxで1:1になるようスケールし、
   413px以下は414pxの見た目のまま等倍で縮小する。
   タブレット寄りの幅では大きくなりすぎないよう12pxで頭打ちにする。 */
@media screen and (max-width: 1023px) {
	/* 狭い端末で文字が小さくなりすぎないよう下限9.4pxを設ける
	   （幅370px未満のときだけ効く。レイアウトは%指定が主なので破綻しない） */
	/* SPは414pxを基準（1rem = 10px）。413px以下は414pxの見た目のまま等倍で縮小する。 */
	html { font-size: min(calc(var(--ws-vw, 100vw) / 41.4), 12px); }
	/* ヘッダーはロゴ（2.268rem）＋上下15pxぶんだけの高さ */
	:root { --header-h: calc(2.268rem + 30px); }
}

/* 全体の縮小（70%）から外したい要素のための単位。
   縮小前と同じ 1rem = 10px 相当で、1440px以上で頭打ちになる。 */
:root { --r100: min(calc(var(--ws-vw, 100vw) / 144), 10px); }

/* 1920px を超えたときにステージの外側に生まれる余白 */
:root { --gutter: max(0px, calc((var(--ws-vw, 100vw) - 144rem) / 2)); }

/* Figmaのアートボード（1440px）に相当する領域。
   1920px までは画面幅そのもの、それ以上では中央寄せの固定幅になる。 */
.l-stage {
	position: relative;
	width: min(100%, 144rem);
	margin-inline: auto;
}

body {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 2;
	color: var(--c-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-wrap: break-word;
}

.l-wrap { overflow-x: clip; }
.l-main { display: block; }

/* ---------- utilities ---------- */
.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.u-pc { display: block; }
.u-sp { display: none; }
br.u-pc { display: inline; }
br.u-sp { display: none; }

@media screen and (max-width: 1023px) {
	.u-pc { display: none; }
	.u-sp { display: block; }
	br.u-pc { display: none; }
	br.u-sp { display: inline; }
}

/* ---------- scroll animation ---------- */
.js-fade {
	opacity: 0;
	transition:
		opacity .5s var(--ease-pop),
		transform .65s var(--ease-pop);
	transition-delay: calc(var(--fade-delay, 0) * .09s);
	will-change: opacity, transform;
}

.js-fade[data-fade="up"] { transform: translateY(2.4rem); }
.js-fade[data-fade="fade"] { transform: none; }

/* 画像は「ぽんっ」と出す。
   opacity と transform だけを使うことで GPU 合成のみになり、
   スクロール中でもカクつかない。 */
.js-fade[data-fade="pop"] {
	transform: scale(.9);
	transition:
		opacity .3s ease-out,
		transform .55s var(--ease-back);
	transition-delay: calc(var(--fade-delay, 0) * .08s);
}

.js-fade.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-fade,
	.js-fade[data-fade="clip"] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}