/**
 * main.css - テーマのメインスタイル
 *
 * 変数（カスタムプロパティ）を先頭にまとめ、企業サイト／LP の
 * デザイン変更に対応しやすい構成にしています。
 * セクション単位のスタイルは、必要に応じてファイル分割し @import せず
 * ビルド or 個別 enqueue で管理することを推奨します。
 */

/* =========================================================
   1. デザイントークン（カスタムプロパティ）
   ========================================================= */
:root {
	--color-text: #1a1a1a;
	--color-bg: #ffffff;
	--color-primary: #3a5082;
	--color-primary-dark: #2a3a54;
	--color-muted: #666666;
	--color-border: #e2e2e2;

	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.8;

	--content-width: 1200px;
	--content-padding: 20px;

	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 32px;
	--spacing-xl: 64px;
}

/* =========================================================
   2. ベース / リセット
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

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

a {
	color: var(--color-primary);
}

a:hover,
a:focus {
	color: var(--color-primary-dark);
}

/* =========================================================
   3. レイアウト
   ========================================================= */
.site-header__inner,
.site-footer__inner,
.site-main {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--content-padding);
}

.site-main {
	padding-block: var(--spacing-xl);
}

/* フルワイド（LP用） */
.site-main--lp {
	max-width: none;
	padding-inline: 0;
}

/* =========================================================
   4. ヘッダー / ナビ
   ========================================================= */
.site-header {
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding-block: var(--spacing-md);
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
}

.site-title a {
	text-decoration: none;
}

.primary-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-toggle {
	display: none;
}

/* =========================================================
   5. フロント / ヒーロー
   ========================================================= */
.front-hero {
	padding-block: var(--spacing-xl);
	text-align: center;
	color: #fff;
	background: linear-gradient(45deg, var(--color-primary-dark), var(--color-primary));
}

.front-hero__title {
	margin: 0 0 var(--spacing-md);
	font-size: clamp(1.8rem, 5vw, 3rem);
}

/* =========================================================
   6. ボタン
   ========================================================= */
.button {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.button--primary {
	color: #fff;
	background-color: var(--color-primary);
}

.button--primary:hover,
.button--primary:focus {
	color: #fff;
	opacity: 0.85;
}

/* =========================================================
   7. フッター
   ========================================================= */
.site-footer {
	margin-top: var(--spacing-xl);
	padding-block: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
	color: var(--color-muted);
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	margin: 0 0 var(--spacing-md);
	padding: 0;
	list-style: none;
}

/* =========================================================
   8. アクセシビリティ
   ========================================================= */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: var(--spacing-sm) var(--spacing-md);
	clip: auto;
	background: #fff;
}

/* =========================================================
   9. レスポンシブ
   ========================================================= */
@media (max-width: 782px) {
	.menu-toggle {
		display: inline-block;
		padding: var(--spacing-sm) var(--spacing-md);
		cursor: pointer;
		background: none;
		border: 1px solid var(--color-border);
		border-radius: 4px;
	}

	.main-navigation .primary-menu {
		display: none;
		width: 100%;
		flex-direction: column;
	}

	.main-navigation.is-active .primary-menu {
		display: flex;
	}
}