/**
 * Hagiwara theme - メインスタイルシート
 *
 * ここに実際のスタイルを記述する。style.css はテーマヘッダー専用。
 * デザイン仕様: docs/design-guide.md を参照。
 */

:root {
	--color-navy: #0b2e63;
	--color-navy-dark: #081f45;
	--color-gold: #d4a437;
	--color-bg: #ffffff;
	--color-bg-soft: #f8f9fb;
	--color-text: #333333;
	--font-family-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
	--container-max-width: 1280px;
	--container-padding: 24px;
	/*
	 * .section は padding-block（上下）に適用するため、隣接セクション同士では
	 * 上下の値が合算される。design-guide.md の「セクション余白 PC120px/SP80px」を
	 * “セクション間の合計余白” として扱い、片側はその半分を設定する。
	 */
	--section-spacing-pc: 60px;
	--section-spacing-sp: 40px;
	--header-height-sp: 64px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

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

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

a {
	color: inherit;
}

/* アクセシビリティ: スクリーンリーダー専用テキスト */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 1em;
	background: #fff;
	color: #222;
	clip: auto;
}

/*
 * アクセシビリティ: キーボード操作時のフォーカス位置を明示する。
 * マウスクリック時には表示されず、キーボード操作時のみ表示される :focus-visible を使用する。
 * 濃いネイビー背景（最下部CTA・Footer）ではこの色では見えづらいため、
 * 各コンポーネント側で outline-color を上書きしている（contact-cta.css / footer.css）。
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

/* レイアウト */
.site-header,
.site-footer {
	width: 100%;
}

/*
 * .site-main はフルワイド（幅の制約なし）。
 * 各セクションが背景を画面幅100%で表示できるようにするため、
 * 中央寄せの幅制限はセクション内側のコンテナ（例: .hero__inner, .about__inner）側で管理する。
 * スマホ幅では .site-header が position:fixed になるため、
 * その高さ分だけ padding-top を確保し、Heroの表示開始位置が隠れないようにする。
 */
.site-main {
	width: 100%;
	padding-top: var(--header-height-sp);
}

/* 固定ページ等、セクション分割を行わないテンプレート用の中央寄せ修飾クラス */
.site-main--boxed {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* セクション共通の上下余白（各セクションのラッパーに付与して使用する） */
.section {
	padding-block: var(--section-spacing-sp);
}

@media (min-width: 769px) {
	.section {
		padding-block: var(--section-spacing-pc);
	}

	/* PCでは .site-header が固定表示ではないため、確保していた余白を解除する */
	.site-main {
		padding-top: 0;
	}
}