@charset "utf-8";
/* ============================================================
   common.css — EDF5 / edf_switch2 共通
   reset + デザイントークン + ベース + 共通フッター + ユーティリティ
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
picture, video, canvas, svg { display: block; max-width: 100%; }

/* ---------- design tokens ---------- */
:root {
	--bg:        #04070c;   /* ページ背景（ほぼ黒） */
	--bg2:       #070b12;
	--ink:       #ffffff;
	--muted:     #aab0bb;
	--blue:      #0587eb;   /* セクションラベル/罫線/リンク/アクティブ（2026/06/25指定 #0587eb） */
	--blue-2:    #0466b1;   /* タブ/ボタン青 */
	--font-en:   "Rajdhani", "Noto Sans JP", sans-serif;  /* 英数字（ナビ/EN見出し/日付） */
	--navy:      #04223c;   /* BUY/特典パネル（comp #022948） */
	--navy-2:    #0a3a66;
	--red:       #cf1733;   /* 強調/ボタン赤 */
	--red-2:     #7c0e26;
	--line:      rgba(255,255,255,.14);
	--content:   1560px;    /* comp基準のコンテンツ幅（1920時に左右余白180） */
	--ease:      cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
html { font-size: 62.5%; scroll-behavior: smooth; }
body {
	line-height: 1.8;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-size: 1.6rem;
	color: var(--ink);
	background: var(--bg);
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}

/* ---------- responsive visibility ---------- */
.pc { display: block; }
.sp { display: none !important; }
@media screen and (max-width: 767px) {
	.pc { display: none !important; }
	.sp { display: block; }
	body { font-size: 1.4rem; }
}

/* ---------- container ---------- */
.inner { width: min(var(--content), 82%); margin-inline: auto; }
@media screen and (max-width: 767px) {
	.inner { width: 88%; }
}

/* ============================================================
   共通フッター（comp準拠 / 著作権はEDF5用）
   ============================================================ */
.site-footer {
	text-align: center;
	padding: 56px 0 28px;
	background: #000;
}
.site-footer__top {
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
	gap: 36px;
}
.site-footer__logos { display: flex; align-items: center; gap: 34px; }
.site-footer__logos li { height: 42px; display: flex; align-items: center; }
.site-footer__logos img { width: auto; height: 100%; }
.site-footer__sns { display: flex; align-items: center; gap: 18px; }
.site-footer__sns .follow { height: 20px; width: auto; opacity: .9; }
.site-footer__sns a { display: flex; align-items: center; }
.site-footer__sns a img { height: 26px; width: auto; }
.site-footer__sns .divider { width: 1px; height: 26px; background: var(--line); }
.site-footer__copy { margin-top: 30px; font-size: 1.1rem; color: #6a7079; line-height: 2; }
.site-footer a:hover { opacity: .65; transition: .3s; }
@media screen and (max-width: 767px) {
	.site-footer__top { gap: 20px; }
	.site-footer__logos { gap: 18px; }
	.site-footer__logos li { height: 30px; }
	.site-footer__sns a img { height: 22px; }
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
}