/* responsive.css — ブレークポイント調整。字間はトークンごと段階的に詰める */

/* ==========================================================================
   1440px 以上: サイト全体を 1440px の見た目のまま比例拡大する
   ==========================================================================

   寸法はすべて rem か vw で書いているので、ルートの文字サイズを画面幅に
   比例させれば全体が同じ倍率で伸びる。上限は設けない。
   tan(atan2()) は長さ同士の比を単位なしの数にする定番の書き方で、
   100% に掛けるためブラウザの文字サイズ設定も保たれる。 */

@media (min-width: 1440px) {
	html {
		font-size: calc(100vw / 90); /* tan() 非対応ブラウザ向け（16px × 幅 / 1440） */
		font-size: calc(100% * tan(atan2(100vw, 1440px)));
	}
}

/* タブレット（768px〜1024px）。SP と範囲が重ならないよう min-width で下限を切る */

@media (min-width: 768px) and (max-width: 1024px) {
	:root,
	body {
		--wp--custom--letter-spacing--wide: 0.05em;
		--wp--custom--letter-spacing--wider: 0.08em;
		--wp--custom--letter-spacing--widest: 0.12em;
	}
}

/* ==========================================================================
   ヘッダー: 幅が詰まったらナビを2段に落とさず、ラベル側を折り返す
   ========================================================================== */

/* ナビをロゴの下へ回り込ませず、ラベルを <wbr> の位置で折る（ハンバーガーより広い幅のみ） */
@media (min-width: 768px) {
	.site-header .site-header__inner {
		flex-wrap: nowrap;
	}

	/* ロゴは縮ませない。縮むのはナビ側 */
	.site-header .site-header__logo {
		flex-shrink: 0;
	}

	/* 入れ子の全層を min-width: 0 にしないと縮まない */
	.site-header .site-nav,
	.site-header .site-nav .wp-block-navigation__responsive-container,
	.site-header .site-nav .wp-block-navigation__responsive-container-content,
	.site-header .site-nav .wp-block-navigation__container,
	.site-header .site-nav .wp-block-navigation-item,
	.site-header .site-nav .wp-block-navigation-item__content {
		min-width: 0;
	}

	/* ナビ自身の折り返しも止める（開いたオーバーレイは除く） */
	.site-header
		.site-nav
		.wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container {
		flex-wrap: nowrap;
	}
}

/* トップの横並びの解除（〜900px）: 経営理念・カード・会社概要を縦積みにする */

@media (max-width: 900px) {
	/* 経営理念: 文を上、写真を下に */
	.philosophy {
		padding-block: 0;
	}

	.philosophy__body {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--50);
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
		/* 切り欠きがないので、地のグラデーションは角から角まで */
		--ys-panel-start: 0%;
		--ys-panel-end: 100%;
	}

	.philosophy__text {
		max-width: none;
	}

	/* components.css と同じ強さで上書きする */
	:root .philosophy .philosophy__media {
		position: static;
		width: 100%;
		clip-path: none;
	}

	.philosophy__media img {
		height: auto;
		aspect-ratio: 2400 / 756;
	}

	/* カード: 1列にして中央に置く */
	.card-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 30rem;
		margin-inline: auto !important;
		row-gap: var(--wp--preset--spacing--40);
	}

	/* 会社概要: 見出し・写真・一覧の順に縦積み */
	.company__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	}

	.company__intro .heading-block {
		padding-inline-start: var(--wp--custom--text-inset);
	}

	.wp-block-group.company {
		padding-block: var(--wp--preset--spacing--50);
	}

	.profile {
		padding-block-start: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 1024px) {
	/* PC の広い余白のままだとロゴ＋4項目が収まらず、ナビが折り返す */
	:root,
	body {
		--wp--custom--nav-item-padding: clamp(0.75rem, 2.2vw, 1.5rem);
	}
}

/* ハンバーガーへの切り替え（600〜767px）。コアの 600px では 665px 付近で折り返す */

@media (min-width: 600px) and (max-width: 767px) {
	.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/* スマートフォン（〜767px） */

@media (max-width: 767px) {
	:root,
	body {
		--wp--custom--letter-spacing--wide: 0.04em;
		--wp--custom--letter-spacing--wider: 0.06em;
		--wp--custom--letter-spacing--widest: 0.1em;
		/* 1行の字数が少ない SP は行間を広げる */
		--wp--custom--line-height--normal: 1.7;
		--wp--custom--line-height--relaxed: 1.8;
	}

	/* --- ハンバーガー展開時のオーバーレイ --- */

	/* コアの余白は固定値でヘッダー高に連動しないため、計算して開くボタンに揃える */
	.site-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding-block-start: calc(
			(var(--wp--custom--header-height) - 24px) / 2
		);
		padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	}

	/* 展開時は項目が縦に並ぶため、タップしやすい 44px の高さを確保する */
	.site-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		min-height: 44px;
		align-items: center;
		padding-block: 0.5em;
		/* コアがオーバーレイ内で padding-inline を 0 にするので指定し直す */
		padding-inline: var(--wp--custom--nav-item-padding);
	}

	/* 現在ページの濃紺の文字はオーバーレイ（濃紺）では見えないため、白地に反転させる */
	.site-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content,
	.site-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.current_page_item
		> .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--brand);
	}

	/* 他ページへのリンクはホバーで下線（PC の濃紺はオーバーレイ上で見えない） */
	.site-nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:not(.current-menu-item):not(.current_page_item)
		> .wp-block-navigation-item__content:hover {
		text-decoration: underline;
	}

	/* オーバーレイ内は背景が濃いため、フォーカスリングも白にする */
	.site-nav .wp-block-navigation__responsive-container.is-menu-open
		:where(a, button):focus-visible {
		outline-color: var(--wp--preset--color--base);
	}

	/* --- トップのヒーロー: 最長の行（15字）が 375px で1行に収まる大きさ --- */

	.wp-block-heading.hero-front__lead {
		padding-inline-start: 0;
		font-size: clamp(1.125rem, 5.4vw, 1.375rem);
	}

	/* --- 見出しの字下げ: 狭い画面では本文幅を削るだけなので外す --- */

	.heading-block,
	.company__intro .heading-block {
		padding-inline-start: 0;
	}

	/* --- 会社概要の一覧: 項目名を上、内容を下に縦積み --- */

	.profile__row {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 0.6em;
	}

	.profile__label {
		font-size: var(--wp--preset--font-size--x-small);
	}

	/* --- 選ばれる理由: 字下げを外す --- */

	.strength-item .strength-item__title,
	.strength-item__text {
		padding-inline: 0;
	}

	/* --- フッター: 字下げを外す --- */
	.site-footer__message,
	.site-footer__bottom {
		padding-inline-start: 0;
	}
}

/* 印刷 */

@media print {
	.site-header,
	.site-footer,
	.page-banner,
	.hero-front,
	.philosophy__media {
		display: none;
	}

	body {
		--wp--custom--letter-spacing--wide: 0.02em;
		--wp--custom--letter-spacing--wider: 0.04em;
		--wp--custom--letter-spacing--widest: 0.08em;
	}
}