/* ============================================================
   ANFANG Site Common — assets/css/anfang-site.css
   ------------------------------------------------------------
   共通ヘッダー・スマホメニュー・フッターの見た目。
   すべて .anfang-site（ヘッダー・メニュー・フッターそれぞれの外側の要素）配下に限定。
   素の html / body / a などは指定しない。

   ページ側のCSS（.one-lp * { margin:0 } など）の影響を受けないよう、
   ここで使う要素はこのファイルの中で余白・色・書体を明示している。
   基準：ANFANG_DESIGN_SYSTEM_v2.md 6章（ヘッダー・フッター）／TOPページ v1.0.0 の見た目
   ============================================================ */

.anfang-site {
	--as-bg-page:       #0D0D0E;
	--as-bg-surface:    #17171A;
	--as-text-strong:   #F5F4F1;
	--as-text-main:     #C9C9CC;
	--as-text-dim:      #8A8A8E;
	--as-border:        #2A2A2D;
	--as-border-soft:   rgba(255, 255, 255, 0.06);
	--as-accent:        #3AA6FF;

	--as-font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--as-font-en: "Inter", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--as-fs-small: 0.875rem;
	--as-fs-micro: 0.75rem;

	--as-content-max: 1120px;
	--as-content-pad: 24px;
	--as-header-h:    72px;

	--as-ease:     cubic-bezier(0.16, 1, 0.3, 1);
	--as-dur-fast: 0.15s;

	box-sizing: border-box;
	font-family: var(--as-font-jp);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

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

.anfang-site ul,
.anfang-site li,
.anfang-site p,
.anfang-site small,
.anfang-site nav {
	margin: 0;
	padding: 0;
}

.anfang-site ul {
	list-style: none;
}

/* テーマ側の本文リンク指定（.entry-content a など）に負けないよう、詳細度を上げている。
   色はここで決めず、リンクごとに指定する（ここで color を決めるとロゴ等の指定より強くなるため） */
.anfang-site.anfang-site a,
.anfang-site.anfang-site a:hover,
.anfang-site.anfang-site a:focus {
	text-decoration: none;
	background: none;
	box-shadow: none;
}

.anfang-site a:focus-visible,
.anfang-site button:focus-visible,
a.anfang-site:focus-visible {
	outline: 2px solid var(--as-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.anfang-site .as-container {
	width: 100%;
	max-width: var(--as-content-max);
	margin: 0 auto;
	padding: 0 var(--as-content-pad);
}

/* ---- 本文へスキップ（キーボード操作のときだけ見える） ---- */
a.anfang-site.as-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 10px 16px;
	background: var(--as-bg-surface);
	border: 1px solid var(--as-accent);
	border-radius: 6px;
	color: var(--as-text-strong);
	font-size: var(--as-fs-small);
	line-height: 1.4;
}

a.anfang-site.as-skip:focus {
	left: 16px;
	top: 16px;
}

/* ---- ロゴ（A記号＋ANFANG） ---- */
.anfang-site .as-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--as-text-strong);
	font-family: var(--as-font-en);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	line-height: 1;
}

.anfang-site .as-logo__mark {
	display: block;
	height: 22px;
	width: auto;
	flex: none;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.anfang-site.as-header {
	position: sticky;
	top: 0;
	z-index: 100;
	margin: 0;
	background: rgba(13, 13, 14, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--as-border-soft);
}

.anfang-site .as-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--as-header-h);
}

.anfang-site .as-nav {
	margin-left: auto;
}

.anfang-site .as-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
}

.anfang-site .as-nav__list a {
	font-size: var(--as-fs-small);
	font-weight: 400;
	color: var(--as-text-dim);
	transition: color var(--as-dur-fast) var(--as-ease);
}

.anfang-site .as-nav__list a:hover {
	color: var(--as-text-strong);
}

.anfang-site .as-nav__list a.is-current {
	color: var(--as-text-strong);
	font-weight: 600;
}

.anfang-site .as-header__account {
	font-size: var(--as-fs-small);
	color: var(--as-text-main);
	transition: color var(--as-dur-fast) var(--as-ease);
}

.anfang-site .as-header__account:hover {
	color: var(--as-accent);
}

/* ---- ハンバーガーボタン ---- */
.anfang-site .as-menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 40px;
	height: 40px;
	margin: 0 -8px 0 auto;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--as-text-strong);
	cursor: pointer;
	font: inherit;
}

.anfang-site .as-menu-btn__bar {
	display: block;
	width: 20px;
	height: 1.5px;
	margin: 0 auto;
	background: var(--as-text-strong);
	transition: transform var(--as-dur-fast) var(--as-ease);
}

.anfang-site .as-menu-btn[aria-expanded="true"] .as-menu-btn__bar:first-child {
	transform: translateY(3.75px) rotate(45deg);
}

.anfang-site .as-menu-btn[aria-expanded="true"] .as-menu-btn__bar:last-child {
	transform: translateY(-3.75px) rotate(-45deg);
}

/* ---- スマホメニュー ---- */
.anfang-site.as-mobile-menu {
	position: fixed;
	inset: var(--as-header-h) 0 0 0;
	z-index: 99;
	margin: 0;
	padding: 32px 0;
	background: var(--as-bg-page);
	overflow-y: auto;
}

.anfang-site.as-mobile-menu[hidden] {
	display: none;
}

.anfang-site .as-mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.anfang-site .as-mobile-menu__list a {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--as-text-main);
}

.anfang-site .as-mobile-menu__list a.is-current {
	color: var(--as-text-strong);
	font-weight: 600;
}

/* ============================================================
   フッター
   - 列見出しとコピーライトは text-dim（デザインシステム10章：
     これより薄い色を文字に使わない）
   ============================================================ */
.anfang-site.as-footer {
	margin: 0;
	padding: 56px 0 32px;
	background: var(--as-bg-page);
	border-top: 1px solid var(--as-border);
	color: var(--as-text-dim);
}

.anfang-site .as-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 40px;
}

.anfang-site .as-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

.anfang-site .as-footer__heading {
	margin-bottom: 16px;
	font-family: var(--as-font-en);
	font-size: var(--as-fs-micro);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--as-text-dim);
}

.anfang-site .as-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.anfang-site .as-footer__col a {
	font-size: var(--as-fs-small);
	color: var(--as-text-dim);
	transition: color var(--as-dur-fast) var(--as-ease);
}

.anfang-site .as-footer__col a:hover {
	color: var(--as-text-strong);
}

.anfang-site .as-footer__bottom {
	padding-top: 24px;
	border-top: 1px solid var(--as-border-soft);
}

.anfang-site .as-footer__bottom small {
	font-size: var(--as-fs-micro);
	color: var(--as-text-dim);
}

/* ============================================================
   レスポンシブ（860px でハンバーガー、640px でスマホ余白）
   ============================================================ */
@media (max-width: 1024px) {
	.anfang-site .as-footer__cols {
		gap: 40px;
	}
}

@media (max-width: 860px) {
	.anfang-site .as-nav,
	.anfang-site .as-header__account {
		display: none;
	}

	.anfang-site .as-menu-btn {
		display: flex;
	}
}

@media (max-width: 640px) {
	.anfang-site {
		--as-content-pad: 20px;
	}

	.anfang-site .as-footer__cols {
		gap: 32px 40px;
	}

	.anfang-site .as-footer__col {
		min-width: 130px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.anfang-site .as-menu-btn__bar,
	.anfang-site .as-nav__list a,
	.anfang-site .as-header__account,
	.anfang-site .as-footer__col a {
		transition: none;
	}
}

/* v1.0.3：画面幅が1200pxより広いと、ヘッダーの線・セクションの背景・フッターが途中で切れていたのを直す
   （2026-10-12 斉藤さん「セクションの背景幅が途中で切れている」）。
   原因：ページを「全幅」にすると、テーマ（Astra）が本文の中身に「最大幅＝コンテンツ幅（1200px）」を付ける
   （.ast-page-builder-template .entry-content[data-ast-blocks-layout] > … > *）。
   ANFANG の各ページは中身の幅を自分で決めているので、ページの一番外側の子だけこの制限を外す。
   中身（文字・カード）の位置は変わらない（ONE・TOP・Complete・お問い合わせで実物を測って確認）。 */
.entry-content > .one-lp > *,
.entry-content > .anfang-top > *,
.entry-content > .anfang-complete > *,
.entry-content > .anfang-contact > * {
	max-width: none !important;
}