/* ============================================================
   SKK 共通コンポーネント（複数ブロックで共有）
   Anima由来の button-4 / button-5 / img-2 等を意味のある名前へ集約
   ============================================================ */

/* 矢印付きリンクボタン（「詳しく見る」等） — 旧 .button-4 / .button-5 / .img-2 */
.skk-arrow-link {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	min-width: 120px;
	max-width: 250px;
	align-items: center;
	justify-content: center;
	gap: var(--size-space-200);
	padding: var(--size-space-300) var(--size-space-800);
	flex: 0 0 auto;
	position: relative;
	background-color: var(--basewhite);
	border: 2px solid;
	border-color: var(--baseblack);
	border-radius: var(--size-radius-200);
	cursor: pointer;
	text-decoration: none;
}

.skk-arrow-link:focus-visible {
	outline: 2px solid #4a90e2;
	outline-offset: 2px;
}

.skk-arrow-link__label {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	margin-top: -1px;
	font-family: var(--button-small-font-family);
	font-weight: var(--button-small-font-weight);
	font-size: var(--button-small-font-size);
	line-height: var(--button-small-line-height);
	letter-spacing: var(--button-small-letter-spacing);
	font-style: var(--button-small-font-style);
	color: var(--baseblack);
	text-align: center;
	position: relative;
}

.skk-arrow-link__icon {
	position: relative;
	width: 24px;
	height: 24px;
	aspect-ratio: 1;
}

/* セクション見出しブロック（見出し＋リード） — 旧 frame-17 / text-wrapper-19 / text-wrapper-18 */
.skk-section-head {
	display: flex;
	flex-direction: column;
	width: 1000px;
	max-width: 100%;
	align-items: center;
	gap: var(--size-space-400);
	padding: var(--size-space-400) 0 var(--size-space-600);
	position: relative;
	flex: 0 0 auto;
}
.skk-section-head__title {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	margin-top: -1px;
	font-weight: var(--TIT-m-font-weight);
	color: var(--baseblack);
	font-size: var(--TIT-m-font-size);
	text-align: center;
	letter-spacing: var(--TIT-m-letter-spacing);
	line-height: var(--TIT-m-line-height);
	font-family: var(--TIT-m-font-family);
	font-style: var(--TIT-m-font-style);
	position: relative;
}
.skk-section-head__lead {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	font-weight: var(--body-m-font-weight);
	color: var(--baseblack);
	font-size: var(--body-m-font-size);
	text-align: center;
	letter-spacing: var(--body-m-letter-spacing);
	line-height: var(--body-m-line-height);
	font-family: var(--body-m-font-family);
	font-style: var(--body-m-font-style);
	position: relative;
}
@media (max-width: 1100px) {
	.skk-section-head { width: calc(100% - 32px); }
}
@media (max-width: 768px) {
	.skk-section-head {
		width: 100%;
		box-sizing: border-box;
		padding-left: var(--size-space-600);
		padding-right: var(--size-space-600);
	}
}

/* SP専用改行（PCでは非表示） — 旧 .sp-br */
.skk-sp-br { display: none; }
@media (max-width: 768px) {
	.skk-sp-br { display: inline; }
}

/* 資料請求など塗りつぶしCTAボタン — 旧 button-9 / button-11 / button-10 / img-2(mail) */
.skk-cta-button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	min-width: 150px;
	max-width: 500px;
	align-items: flex-end;
	justify-content: center;
	gap: var(--size-space-300);
	padding: var(--size-space-400) var(--size-space-600);
	flex: 0 0 auto;
	position: relative;
	background-color: var(--themaprimary);
	border: 2px solid;
	border-color: var(--basewhite);
	border-radius: var(--size-radius-200);
	cursor: pointer;
	text-decoration: none;
}
.skk-cta-button--tight { margin-right: -2px; }
.skk-cta-button:focus-visible {
	outline: 2px solid #4a90e2;
	outline-offset: 2px;
}
.skk-cta-button__label {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	font-family: var(--button-font-family);
	font-weight: var(--button-font-weight);
	color: var(--basewhite);
	font-size: var(--button-font-size);
	text-align: center;
	letter-spacing: var(--button-letter-spacing);
	line-height: var(--button-line-height);
	font-style: var(--button-font-style);
	position: relative;
}
.skk-cta-button__icon {
	position: relative;
	width: 24px;
	height: 24px;
	aspect-ratio: 1;
}
@media (max-width: 768px) {
	.skk-cta-button { align-items: center; justify-content: center; }
	.skk-cta-button--tight { align-self: stretch; }
	.skk-cta-button--fixed { width: 300px; max-width: 100%; }
	.skk-cta-button__label { flex: 0 0 auto; font-size: 20px; white-space: nowrap; }
}

/* 電話ブロック（ラベル＋電話リンク） — 旧 frame-3 / button / img-7 / text-wrapper-52 / text-wrapper-10 */
.skk-phone-block {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: var(--size-space-0);
	position: relative;
	flex: 0 0 auto;
}
.skk-phone-block__label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin-top: -1px;
	font-weight: var(--body-m-font-weight);
	color: var(--baseblack);
	font-size: var(--body-m-font-size);
	text-align: center;
	letter-spacing: var(--body-m-letter-spacing);
	line-height: var(--body-m-line-height);
	white-space: nowrap;
	font-family: var(--body-m-font-family);
	font-style: var(--body-m-font-style);
	position: relative;
}
.skk-phone-link {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	min-width: 150px;
	max-width: 500px;
	align-items: flex-end;
	justify-content: center;
	gap: var(--size-space-100);
	flex: 0 0 auto;
	border-radius: 99px;
	position: relative;
	cursor: pointer;
	text-decoration: none;
}
.skk-phone-link:focus-visible {
	outline: 2px solid #4a90e2;
	outline-offset: 2px;
}
.skk-phone-link__icon {
	width: 32px;
	height: 32px;
	position: relative;
	aspect-ratio: 1;
}
.skk-phone-link__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin-top: -2px;
	font-family: "Zen Kaku Gothic New", Helvetica;
	font-weight: 700;
	color: var(--baseblack);
	font-size: 44px;
	text-align: center;
	letter-spacing: 0;
	line-height: 44px;
	white-space: nowrap;
	position: relative;
}

/* ------------------------------------------------------------------
 * ヘッダー／フッターのロゴのリンク化とホバー（HM-7 / HM-8）
 *
 * ロゴは <div> でリンクになっておらず、TOPページへ戻る導線が無かった。
 * <a> へ変更したが、インライン要素のままだと style.css 側の width/height が
 * 効かないためブロック化する。
 * ------------------------------------------------------------------ */
a.skk-header__logo,
a.skk-footer__logo {
	display: block;
	transition: opacity .25s ease;
}

a.skk-header__logo:hover,
a.skk-footer__logo:hover {
	opacity: .7;
}

/* グローバルナビ。押せることが分かるよう、下線を伸ばして色を変える。 */
.skk-header__nav-link,
.skk-header__utility-link {
	position: relative;
	transition: color .25s ease;
}

.skk-header__nav-link::after,
.skk-header__utility-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--color-primary, #9b8759);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}

.skk-header__nav-link:hover::after,
.skk-header__utility-link:hover::after,
.skk-header__nav-link:focus-visible::after,
.skk-header__utility-link:focus-visible::after {
	transform: scaleX(1);
}

.skk-header__nav-link:hover .skk-header__nav-label,
.skk-header__nav-link:hover .skk-navlabel,
.skk-header__utility-link:hover .skk-navlabel {
	color: var(--color-primary, #9b8759);
}

/* 電話番号のCTAも押せることが分かるように。 */
.skk-header__tel {
	transition: opacity .25s ease;
}

.skk-header__tel:hover {
	opacity: .8;
}

/* 動きを減らす設定の利用者には、変化を伝えるだけにとどめる。 */
@media (prefers-reduced-motion: reduce) {
	a.skk-header__logo,
	a.skk-footer__logo,
	.skk-header__nav-link,
	.skk-header__utility-link,
	.skk-header__nav-link::after,
	.skk-header__utility-link::after,
	.skk-header__tel {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * 追従ヘッダー
 *
 * ヘッダーは キャッチ / ロゴ・電話 / ナビ / 対応状況 の4段構成で、PCでは
 * 合計200px前後ある。そのまま固定すると画面を占有しすぎるため、
 * スクロールしたら装飾にあたる2段（キャッチ・対応状況）を畳んで、
 * ロゴとナビだけを残す。
 *
 * .skk-header--stuck は assets/js/main.js が付け外しする。
 * ------------------------------------------------------------------ */
/*
 * 親の .PC-top が overflow-x: hidden を持っており、CSSの仕様で片方の軸が
 * visible 以外になるともう片方が auto になる。その結果 .PC-top 自体が
 * スクロールコンテナ扱いになり、sticky がビューポート基準で効かなくなる。
 *
 * overflow-x: clip なら、はみ出しは同じく切るがスクロールコンテナを作らない
 * ため、横スクロール抑止を保ったまま sticky が機能する。
 */
.PC-top {
	overflow-x: clip;
}

header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* nav 行には背景が無く、固定すると本文が透けるため親側で敷く */
	background: var(--basewhite, #fff);
}

.skk-header__catch,
.skk-header__status {
	overflow: hidden;
	transition: max-height .3s ease, opacity .2s ease;
	max-height: 120px;
	opacity: 1;
}

.skk-header--stuck .skk-header__catch,
.skk-header--stuck .skk-header__status {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

/* 畳んだあとに影を出して、本文の上に乗っていることを示す */
.skk-header--stuck {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* ページ内リンクの着地点がヘッダーに隠れないようにする */
html {
	scroll-padding-top: 140px;
}

@media screen and (max-width: 1100px) {
	html {
		scroll-padding-top: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skk-header__catch,
	.skk-header__status {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * ロゴを1枚のSVGに統一
 *
 * 以前はマーク（PNG）と社名（SVG）の2枚をCSSの絶対配置で重ねており、
 * ブラウザによって位置がずれる問題があった。旧サイトから引き継いだ
 * assets/img/logo.svg（viewBox 899x100、比8.99）1枚に置き換え、
 * 親要素（.skk-header__logo / .skk-footer__logo / .skk-header__sp-logo）の
 * サイズに収める。親の比は9.00〜9.17でほぼ一致する。
 * ------------------------------------------------------------------ */
.skk-logo__single {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}