/**
 * 01_base.css (Monochrome Refresh)
 *
 * サイト全体の基本的なスタイルとCSS変数を定義します。
 * 配色をモノクローム（白、黒、グレー）に変更。
 */

/*-------------------------------------------------
 * CSSカスタムプロパティ (CSS変数)
 *-------------------------------------------------*/
:root {
	/* 1. 色 (Colors) - モノクローム */
	
	/* プライマリカラー (黒・チャコール) */
	--color-primary: #1F1F1F; /* ディープチャコール (ほぼ黒) */
	--color-primary-dark: #000000; /* 黒 */

	/* アクセントカラー (CTAボタン用) */
	--color-accent: #1F1F1F; /* プライマリカラーと同じチャコール */
	--color-accent-hover: #444444; /* やや明るいグレー */

	/* テキストカラー */
	--color-text-base: #333333; /* 基本テキスト（濃いグレー） */
	--color-text-lead: var(--color-primary); /* 見出し（チャコール） */
	--color-text-light: #666666; /* やや薄いテキスト */
	--color-text-reverse: #FFFFFF; /* 反転色（白） */

	/* 背景色 */
	--color-bg-body: #FFFFFF; /* ボディ背景（白） */
	--color-bg-light: #F7F7F7; /* 薄いグレーの背景（セクション背景など） */
	--color-bg-dark: var(--color-primary); /* 濃い背景（フッターなど） */
	
	/* 罫線 */
	--color-border: #E0E0E0; 
	--color-border-dark-bg: rgba(255, 255, 255, 0.1); /* 暗い背景用の罫線 */

	
	/* 2. フォント (Typography) */
	--font-family-base: 'Noto Sans JP', sans-serif;
	--font-family-heading: 'Montserrat', sans-serif;
	
	/* 3. レイアウト (Layout) */
	--layout-width-max: 1100px;
	--header-height: 80px;

	/* 4. その他 (Misc) */
	--transition-base: 0.3s ease-in-out;
	--border-radius-base: 8px; /* 角丸 */
}


/*-------------------------------------------------
 * 基本設定 (Base styles)
 *-------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%; /* 1rem = 10px */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family-base);
	font-size: 1.6rem; /* 16px */
	line-height: 1.75;
	color: var(--color-text-base);
	background-color: var(--color-bg-body);
	word-wrap: break-word;
	overflow-wrap: break-word;
	margin: 0;
}

body.no-scroll {
	overflow: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* リンク色 (通常リンクはテキスト色に) */
a {
	color: var(--color-text-light);
	text-decoration: none;
	transition: color var(--transition-base);
}
a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}