@charset "utf-8";
/* =========================================================
   layout.css — header / main / footer の骨格
   ヘッダー：左ロゴ｜中央ナビ＋メニューボタン｜右CTA2つ（docs/design-direction.md）
   スクロール時は上部に固定し、高さを一段縮める（.is-scrolled は base.js が付ける）
   ========================================================= */

.header {
	position: sticky;
	top: 0;
	z-index: 100;

	/* 背景とぼかしは擬似要素に持たせる。.header 自体に backdrop-filter を置くと
	   「ぼかしの元になる背景」がヘッダー内で途切れ、下のメガメニューがぼかせなくなる */
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: var(--cl-bg-header);
		backdrop-filter: blur(0.3rem);
	}

	& .header-in {
		display: grid;
		/* 左右を同じ 1fr にして、ナビが画面の中心軸から動かないようにする */
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--sp-xs);
		min-height: var(--header-h);
		transition: min-height var(--ease-t);
	}

	& .header-logo { justify-self: start; }

	& .header-logo img {
		width: 12rem;
		transition: width var(--ease-t);
	}
}

/* ---- 中央ナビ（PCのみ）------------------------------------------------ */
.header-nav {
	display: none;
	justify-self: center;

	/* 左右の 1fr（ロゴ列・CTA列）と取り合いになるので、gap は控えめの固定値にする。
	   広げるとボタン側が押されて文字が折り返す */
	& ul { display: flex; align-items: center; gap: 2.4rem; }

	/* 親項目は a。PC はホバー／フォーカスでメガメニューを開き、クリックで各ページの入口へ遷移する */
	& :is(a, button) {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		padding: 1.5rem 0;
		border: 0;
		background-color: transparent;
		color: inherit;
		font-size: 1.6rem;
		font-weight: 500;
		cursor: pointer;
	}

	/* 下層を持つ項目の▼。三角形を border で作ると回したときに位置がずれるので、
	   正方形のマスクにして中心で回す */
	& .header-nav-item._hasChild > a::after {
		content: "";
		width: 1em;
		height: 1em;
		background-color: currentColor;
		/* 線が細く見えるので、この用途だけ stroke-width 2 のファイルを使う */
		-webkit-mask: url(../images/common/icons/chevron-down.svg) no-repeat center / contain;
		mask: url(../images/common/icons/chevron-down.svg) no-repeat center / contain;
		transition: rotate var(--ease-t);
	}

	& .header-nav-item._hasChild > a[aria-expanded="true"] { color: var(--cl-accent); }
	& .header-nav-item._hasChild > a[aria-expanded="true"]::after { rotate: 180deg; }
}

@media (any-hover: hover) {
	.header-nav :is(a, button):hover { color: var(--cl-accent); opacity: 1; }
}

/* ---- メニューボタン（SPのフルスクリーンメニューを開く）------------------- */
.header-menuBtn {
	display: grid;
	place-content: center;
	gap: 0.4rem;
	width: 4.4rem;
	height: 4.4rem;   /* 枠は出さないが、指で押せる大きさは確保する */
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;

	& span {
		display: block;
		width: 2.4rem;
		height: 0.2rem;
		background-color: currentColor;
		transition: translate var(--ease-t), rotate var(--ease-t), opacity var(--ease-t);
	}

	/* 開いているあいだは × にする（線の太さ0.2rem＋間隔0.4rem＝中心まで0.6rem）*/
	&[aria-expanded="true"] span:nth-child(1) { translate: 0 0.6rem; rotate: 45deg; }
	&[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	&[aria-expanded="true"] span:nth-child(3) { translate: 0 -0.6rem; rotate: -45deg; }
}

/* ---- 右上のCTA -------------------------------------------------------- */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-xs);

	/* ナビが非表示になる SP でも、右端に寄せる */
	grid-column: 3;
	justify-self: end;
}

.header-actions-btns {
	display: none;
	gap: 1rem;

	/* 「資料DL」「お問い合わせ」は 2行に折り返させない */
	& .c-btn { white-space: nowrap; }
}

/* ---- フォームページ用の簡易表示 -------------------------------------------
   入力に集中してもらうため、ナビを畳んでロゴと電話だけにする。
   会社を確かめたい人のためにロゴ（トップへ）とパンくずは残す */
.header._min {
	& .header-in { grid-template-columns: 1fr auto; }
	& .header-nav,
	& .header-actions-btns,
	& .header-menuBtn { display: none; }
}

.footer._min {
	/* 中身がコピーライトだけになるので、余白も詰める */
	padding-block: var(--sp-m) var(--sp-s);

	& .footer-in { display: none; }

	/* 外枠の罫線があるので、中の区切り線は出さない */
	& .footer-bottom { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
}

/* ---- メガメニュー（SP：≡ で開くフルスクリーン）--------------------------- */
/* ヘッダーに backdrop-filter があると position:fixed の基準がヘッダーになるため、
   絶対配置＋高さ計算で画面いっぱいにする */
.header-mega {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	display: none;
	block-size: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: var(--sp-s) var(--sp-l);
	/* 地色はヘッダーと同じ半透明。面積が広く後ろの見出しが透けるので、ぼかしは強めにする。
	   リンクのカードだけを白く浮かせる */
	background-color: var(--cl-bg-header);
	backdrop-filter: blur(1.6rem);

	/* 開くときだけ、上から軽く降ろす。
	   面（この要素）のフェードは短くして、開きかけに背面が透ける時間をなくす。
	   降りてくる動きは中身（.header-mega-in）側で見せる */
	opacity: 0;
	transition: opacity 0.12s, display var(--ease-t) allow-discrete;

	& .header-mega-in {
		display: grid;
		gap: var(--sp-m);
		opacity: 0;
		translate: 0 -1rem;
		transition: opacity var(--ease-t), translate var(--ease-t);
	}

	/* SPはカテゴリの切れ目に線を入れる（線が上下の中間にくる）*/
	& .header-mega-in > * + * {
		padding-block-start: var(--sp-m);
		border-block-start: 1px solid var(--cl-line);
	}
}

/* SPメニューの先頭に置く2カラムのCTA
   c-btn の min-width（20rem）のままだと、2列で画面幅を超えてはみ出すので、ここでは外す */
.header-mega-cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;

	& .c-btn { min-width: 0; }
}

.header:is(.is-menuOpen, .is-megaOpen) .header-mega {
	opacity: 1;

	@starting-style { opacity: 0; }
}

.header:is(.is-menuOpen, .is-megaOpen) .header-mega-in {
	opacity: 1;
	translate: 0;

	@starting-style {
		opacity: 0;
		translate: 0 -1rem;
	}
}

.header.is-menuOpen .header-mega { display: block; }

/* スクロールを後ろのページに伝えない */
body.is-menuLock { overflow: hidden; }

@media print, screen and (min-width: 640px) {
	.header {
		& .header-logo img { width: 18rem; }

		&.is-scrolled .header-in { min-height: 7rem; }
		&.is-scrolled .header-logo img { width: 13rem; }
	}

	.header-nav { display: block; }
	.header-actions-btns { display: flex; }

	/* PCはナビのホバーで開くので ≡ は出さない */
	.header-menuBtn { display: none; }

	/* SP専用のブロックと仕切り線 */
	.header-mega-cta,
	.header-mega .c-brand { display: none; }
	.header-mega .header-mega-in > * + * { padding-block-start: 0; border-block-start: 0; }

	/* ヘッダー直下に下がってくるパネル。中身は選択中のグループだけ */
	.header-mega {
		block-size: auto;
		max-block-size: calc(100dvh - var(--header-h));
		padding-block: var(--sp-m);
	}

	.header.is-megaOpen .header-mega { display: block; }
	.header-mega .c-megaGroup { display: none; }
	.header-mega .c-megaGroup.is-current { display: grid; }
}

/* ---- SP：画面下の固定CTAバー ------------------------------------------- */
.spCta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding: 1rem var(--gutter);
	/* iPhone のホームバーに重ならないように */
	padding-block-end: calc(1rem + env(safe-area-inset-bottom));
	border-block-start: 1px solid var(--cl-line);
	background-color: var(--cl-bg-header);

	/* 中身は c-btn _secondary（資料DL）／ c-btn _primary（相談・診断）。黒は主ボタンだけ */
	& .c-btn {
		min-width: 0;
		min-height: 4.4rem;
		padding-inline: 1rem;
		font-size: var(--fs-s);
	}
}

@media print, screen and (min-width: 640px) {
	.spCta { display: none; }
}

/* ---- main ------------------------------------------------------------- */
.main {
	display: block;
	/* 下の余白はフッター側（.footer の padding-block-start）で取る */

	/* 固定ヘッダーにアンカー先が隠れないように */
	& :target { scroll-margin-block-start: calc(var(--header-h) + var(--sp-xs)); }
}

/* SP は下固定CTAバーの分だけ余白を足す（ボタン 4.4rem ＋ 上下の余白 1rem×2）*/
body { padding-block-end: calc(6.4rem + env(safe-area-inset-bottom)); }

@media print, screen and (min-width: 640px) {
	body { padding-block-end: 0; }
}

/* ---- footer -----------------------------------------------------------
   左：ロゴ・社名・拠点・SNS・認証バッジ ／ 右：サイトマップ3カラム
   下：copyright（左）と規約リンク（右） */
.footer {
	padding-block: var(--sp-l) var(--sp-m);
	/* 直前が白いセクションのときに境目が分かるように。
	   黒帯のCTAが直前にある場合は、黒の上なので見えない（害もない）*/
	border-block-start: 1px solid var(--cl-line);
}

.footer-in {
	display: grid;
	gap: var(--sp-m);
}

/* サイトマップ。4カラムは窮屈なので、縦に伸ばして3カラムに。
   2段目のグループ（課題から探す／会社情報）の始点をそろえるため subgrid を使う */
/* SPはアコーディオンを全幅で縦に積む（2カラムだと開閉で高さがちぐはぐになる）*/
.footer-navs {
	display: grid;
	grid-template-columns: 1fr;
}

.footer-navCol {
	display: grid;
	align-content: start;
}

.footer-nav {
	width: 100%;
	border-block-end: 1px solid var(--cl-line);

	& .footer-nav-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: var(--sp-xs);
		font-size: 1.6rem;
		font-weight: var(--fw-bold);
		cursor: pointer;
		list-style: none;
	}

	& .footer-nav-title::-webkit-details-marker { display: none; }

	& .footer-nav-title::after {
		content: "";
		width: 1.4rem;
		height: 1.4rem;
		background-color: currentColor;
		-webkit-mask: url(../images/common/icons/chevron-right.svg) no-repeat center / contain;
		mask: url(../images/common/icons/chevron-right.svg) no-repeat center / contain;
		rotate: 90deg;
		transition: rotate var(--ease-t);
	}

	&[open] .footer-nav-title::after { rotate: -90deg; }

	/* なめらかな開閉（Chrome 131+ / Safari 18.4+。非対応環境では瞬時に開く）*/
	&::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--ease-t), content-visibility var(--ease-t);
		transition-behavior: allow-discrete;
	}

	&[open]::details-content { block-size: auto; }

	& ul { display: grid; gap: 0.75em; padding-block-end: var(--sp-s); }
	& a { color: var(--cl-text-sub); font-size: var(--fs-ui); }
}

@media (any-hover: hover) {
	.footer-nav a:hover,
	.footer-policy a:hover { color: var(--cl-accent); opacity: 1; }
}

.footer-bottom {
	display: grid;
	gap: var(--sp-xs);
	margin-block-start: var(--sp-l);
	padding-block-start: var(--sp-s);
	border-block-start: 1px solid var(--cl-line);

	& .footer-policy { display: grid; gap: 0.8em; }
	& .footer-policy a { font-size: var(--fs-xs); }

	& .footer-copy {
		order: 2;
		/* 規約リンクとくっつかないように、SPだけ離す */
		margin-block-start: 4rem;
		color: var(--cl-text-sub);
		font-size: var(--fs-xs);
	}
}

@media print, screen and (min-width: 640px) {
	.footer { & .c-brand-logo img { width: 25rem; } }
	.c-brand .c-brand-url img { width: 24rem; margin-block-start: 0.8rem; }

	.footer-nav {
		border-block-end: 0;

		/* PCは常に開いた状態なので、読み込み時にアニメーションさせない */
		&::details-content { block-size: auto; transition: none; }

		& .footer-nav-title { padding-block: 0; cursor: default; }
		& .footer-nav-title::after { display: none; }
		& ul { margin-block-start: var(--sp-xs); padding-block-end: 0; }
	}

	.footer-bottom .footer-policy { display: flex; flex-wrap: wrap; gap: 1.5em; }
	.footer-bottom .footer-copy { order: 0; margin-block-start: 0; }

	/* minmax(0, …) にしておかないと、inner がまだ 1200px に届かない幅で列が縮めず横にはみ出す */
	.footer-in { grid-template-columns: 32rem minmax(0, 1fr); gap: var(--sp-m) 20rem; }

	.footer-navs {
		gap: var(--sp-m) var(--sp-s);
		grid-template-columns: repeat(3, minmax(0, 20rem));
		/* 1段目の高さは「オンライン部署」「事例・読みもの」で決める。
		   2段にまたがる「サービス」の長さで押し下げられないように min-content にする */
		grid-template-rows: min-content auto;
		justify-content: space-between;
	}

	.footer-navCol {
		grid-row: 1 / span 2;
		grid-template-rows: subgrid;
	}

	/* グループが1つだけの列（サービス）は2段にまたがらせる。
	   そうしないと、この列の長さで1段目が伸びて他の列の2段目が下がる */
	.footer-navCol._single .footer-nav { grid-row: 1 / span 2; }

	.footer-bottom {
		grid-template-columns: auto auto;
		align-items: center;
		justify-content: space-between;
	}

	.footer-bottom .footer-policy { justify-self: end; order: 2; }
}