@charset "UTF-8";
/* リセット、フォント、変数(:root) */

/* =====================================
01. Root Tokens (変数)
===================================== */
:root {
	/* ===Color === */
	--akamaru-color-white: #ffffff;
	--akamaru-color-navy_main: #0f2540;
	--akamaru-color-navy_dark01: #202630;
	--akamaru-color-navy_dark02: #191d28;
	--akamaru-color-red_accent01: #bc002d;
	--akamaru-color-red_accent02: #e44021;
	--akamaru-color-gray_main: #afafaf;

	/* === Spacing === */
	--space-xxs: clamp(8px, 1.2vw, 15px);
	--space-xs: clamp(15px, 2vw, 30px);
	--space-sm: clamp(25px, 4vw, 60px);
	--space-md: clamp(40px, 6vw, 90px);
	--space-lg: clamp(60px, 8vw, 120px);
	--space-xl: clamp(80px, 12vw, 180px);
	--space-2xl: clamp(120px, 16vw, 240px);
	--space-3xl: clamp(140px, 20vw, 280px);

	/* === Fontfamily === */

	--font-ja: '游明朝体', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'MS PMincho', 'Noto Serif JP', serif;
	--font-en: 'Times New Roman', Times, serif;

	--font-shop-en: 'Montserrat', sans-serif;

	--font-shop-ja: 'Yu Gothic', 'YuGothic', 'Noto Sans JP', sans-serif;

	/* Line-height */
	--lh-tight: 1; /* 見出し */
	--lh-normal: 1.8; /* 本文 */
	--lh-loose: 2; /* キャプション長文など */

	/* Letter-spacing */
	--ls-tight: -0.02em;
	--ls-normal: 0;
	--ls-loose: 0.02em;

	/* Fixed sizes（PC想定） */
	--fz-12: clamp(1rem, 0.8vw, 1.2rem);
	--fz-14: clamp(1.2rem, 1vw, 1.4rem);
	--fz-16: clamp(1.3rem, 1.1vw, 1.6rem);
	--fz-18: clamp(1.4rem, 1.25vw, 1.8rem);
	--fz-20: clamp(1.5rem, 1.4vw, 2rem);
	--fz-24: clamp(1.8rem, 1.7vw, 2.4rem);
	--fz-28: clamp(2rem, 1.9vw, 2.8rem);
	--fz-32: clamp(2.1rem, 2.6vw, 3.2rem);
	--fz-36: clamp(2.2rem, 2.5vw, 3.6rem);
	--fz-40: clamp(2.2rem, 2.8vw, 4rem);
	--fz-80: clamp(3.6rem, 5.6vw, 8rem);
}

/* フォントサイズ */
@media screen and (max-width: 1024px) {
	:root {
		--fz-12: clamp(1.1rem, 1vw, 1.2rem);
		--fz-14: clamp(1.3rem, 1.3vw, 1.4rem);
		--fz-16: clamp(1.4rem, 1.5vw, 1.6rem);
		--fz-18: clamp(1.6rem, 1.7vw, 1.8rem);
		--fz-20: clamp(1.7rem, 1.6vw, 2rem);
		--fz-24: clamp(2rem, 2vw, 2.4rem);
		--fz-28: clamp(2.2rem, 2.3vw, 2.8rem);
		--fz-32: clamp(2.4rem, 2.6vw, 3.2rem);
		--fz-36: clamp(2.6rem, 3vw, 3.6rem);
		--fz-40: clamp(2.8rem, 3.3vw, 4rem);
		--fz-80: clamp(4rem, 6vw, 8rem);
	}
}

/* 余白 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	:root {
		--space-xxs: clamp(10px, 1.5vw, 15px);
		--space-xs: clamp(20px, 2.5vw, 30px);
		--space-sm: clamp(35px, 4.5vw, 60px);
		--space-md: clamp(55px, 6.5vw, 90px);
		--space-lg: clamp(80px, 8.5vw, 120px);
		--space-xl: clamp(110px, 12.5vw, 180px);
		--space-2xl: clamp(160px, 17vw, 240px);
		--space-3xl: clamp(200px, 22vw, 280px);
	}
}

@media screen and (max-width: 768px) {
	:root {
		--space-xxs: clamp(8px, 1.2vw, 12px);
		--space-xs: clamp(14px, 2vw, 20px);
		--space-sm: clamp(24px, 3.5vw, 36px);
		--space-md: clamp(36px, 5vw, 54px);
		--space-lg: clamp(54px, 6.5vw, 72px);
		--space-xl: clamp(72px, 8vw, 96px);
		--space-2xl: clamp(96px, 10vw, 120px);
		--space-3xl: clamp(120px, 12vw, 160px);
	}
}

/* @media screen and (max-width: 500px) {
	:root {
		--space-xxs: clamp(6px, 1.5vw, 10px);
		--space-xs: clamp(10px, 2vw, 16px);
		--space-sm: clamp(16px, 3vw, 24px);
		--space-md: clamp(24px, 4vw, 36px);
		--space-lg: clamp(36px, 5vw, 48px);
	}
} */

/* =====================================
02. Reset 基本リセット
- 余白/装飾の初期化・ボックスモデル
===================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol,
li {
	margin: 0;
	padding: 0;
	font-weight: inherit;
}

ul,
ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* =====================================
03. Base HTML 設定
- フォントサイズ・スクロール挙動
===================================== */
html {
	font-size: 62.5%;
}

html:focus-within {
	scroll-behavior: smooth;
}

/* =====================================
04. Typography & Body ベース
===================================== */
body {
	position: relative;
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: var(--lh-normal);
	font-size: var(--fz-18);
	font-weight: 400;
	width: 100%;
	height: 100%;
	color: var(--akamaru-color-navy_main);
	overflow-x: hidden;
	font-family: var(--font-ja);
	/* フォントスムージング（Mac最適化） */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	z-index: -1;
}

/* =====================================
05. Links リンク
===================================== */
a {
	color: inherit;
	text-decoration: none;
}
a:not([class]) {
	text-decoration-skip-ink: none;
}

/* =====================================
06. Inline Elements 強調表現の継承
===================================== */
em,
strong,
b,
i {
	font-weight: inherit;
	font-size: inherit;
	font-style: inherit;
}

/* =====================================
07. Media メディア要素のリセット/整形
===================================== */
img,
picture {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

img,
svg,
video {
	display: block;
	height: auto;
}

/* 画像のドラッグ防止 */
img {
	user-select: none;
	-webkit-user-drag: none;
}

/* picture 要素のブロック化 */
picture {
	display: block;
}

address {
	font-style: normal;
}

.video_wrapper video {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* =====================================
08. Form フォーム/ボタン初期化
===================================== */
input,
button,
textarea,
select {
	font: inherit;
	border: none;
}

/* ボタンのアクセシビリティ */
button {
	cursor: pointer;
	background: none;
}
button:disabled {
	cursor: default;
}

/* iOS系の見た目リセット */
input,
textarea {
	appearance: none;
	border-radius: 0;
}

/* =====================================
09. Motion Preferences 動きの最小化
===================================== */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}