@charset "utf-8";

/* =============================================
Common Rules (Variable Definitions)
================================================ */
:root {
	--header-h: 64px;

	/* ---------------------------------------
	Color Information
  --------------------------------------- */

	/* --- Base --- */
	--color-main: #000000;
	--color-main-wh: #ffffff;
	--color-text-main: #333333;
	--color-text-sub: #666666;

	/* --- Background --- */
	--color-bg-base: #ffffff;
	--color-bg-black: #000000;
	--color-bg-light: #f9f9f9;

	/* --- Border --- */
	--color-border-wh: #ffffff;
	--color-border-light: #eeeeee;
	--color-border-dark: #000000;

	/* ---------------------------------------
	Font Information
  --------------------------------------- */

	/* Family */
	--font-base: 'Noto Sans JP', sans-serif;
	--font-en: 'Roboto', sans-serif;

	/* Weight */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-bold: 800;

	/* [OLD] Line Height */
	--lh-none: 1;
	--lh-tight: 1.25; /* 見出し用 */
	--lh-base: 1.75; /* 本文用：読みやすさ重視 */
	--lh-loose: 2; /* 注釈など、ゆったり見せたい時 */

	/* [NEW] Line Height */
	--lh-050: 0.5;
	--lh-075: 0.75;
	--lh-100: 1;
	--lh-125: 1.25;
	--lh-150: 1.5;
	--lh-175: 1.75;
	--lh-200: 2;

	/* ---------------------------------------
	Size Information
  --------------------------------------- */

	/* --- Border --- */
	--bd-thin: 1px;
	--bd-base: 2px;
	--bd-thick: 4px;
	--bd-circle: 40px;

	/* --- Font --- */
	--fs-xxl: 3rem; /* 48px */
	--fs-xl: 2rem; /* 32px */
	--fs-lg: 1.5rem; /* 24px */
	--fs-md: 1.125rem; /* 18px */
	--fs-base: 0.875rem; /* 14px */
	--fs-sm: 0.75rem; /* 12px */
	--fs-xs: 0.625rem; /* 10px */

	/* --- Space --- */
	--space-xxs: 2px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-xxl: 64px;

	--sp-carousel-gap: 24px;

	/* --- 4. レイアウト（最大幅） --- */
	--width-wide: 1100px; /* 一覧ページやMOVIEの最大幅 */
	--width-narrow: 800px; /* テキストメイン（詳細・規約など）の最大幅 */

	/* --- 5. アニメーション速度 --- */
	--transition-base: 0.3s ease; /* ホバー時のフワッとした動きを統一 */
}

/* =============================================
   スマホ(SP)用の自動調整
   ============================================= */
@media (max-width: 768px) {
	:root {
		--fs-xxl: 2rem; /* 32px */
		--fs-xl: 1.5rem; /* 24px */
		--fs-lg: 1.25rem; /* 20px */
		--fs-md: 1rem; /* 16px */
		--fs-base: 0.9375rem; /* 基本（本文、Pタグなど） */
		--fs-sm: 0.8125rem; /* 小（日付、カテゴリなど） */
		--fs-xs: 0.75rem; /* 極小（タグ、注釈など） */
	}
}

@media (max-width: 768px) {
	:root {
		--sp-carousel-gap: 12px;
	}
}

/* =============================================
   Base & Reset（サイト全体の基本設定）
   ============================================= */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-base);
	color: var(--color-text-main);
	background-color: var(--color-bg-base);
	font-size: var(--fs-base);
	line-height: var(--lh-100);
	letter-spacing: 0.05em;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
	padding-top: var(--header-h);
}

a {
	color: var(--color-main);
	text-decoration: none;
	transition: all var(--transition-base);
}

a:hover {
	opacity: 0.7;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}