/* ============================================================
   skk/support  サポート導線4カード（旧 frame-45 系のリファクタ）
   見出しラッパーは共通 .skk-section-head、大見出しは固有
   ============================================================ */

.skk-support {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	align-items: center;
	gap: var(--size-space-1200);
	padding: var(--size-space-1600) 0;
	position: relative;
	flex: 0 0 auto;
	background-color: var(--basewhite);
}

.skk-support__title {
	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-support__cards {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-space-600);
	position: relative;
	flex: 0 0 auto;
}

.skk-support__row {
	display: flex;
	width: 800px;
	max-width: 100%;
	align-items: flex-start;
	justify-content: center;
	gap: var(--size-space-600);
	position: relative;
	flex: 0 0 auto;
}

.skk-support__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--size-space-600);
	padding: var(--size-space-600);
	position: relative;
	flex: 1;
	flex-grow: 1;
	border-radius: var(--size-radius-400);
	border: 2px solid var(--themasecondary);
	cursor: pointer;
	text-decoration: none;
}
.skk-support__card:focus-visible {
	outline: 2px solid #4a90e2;
	outline-offset: 2px;
}

.skk-support__card-title {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	margin-top: -2px;
	font-weight: var(--subtitle-font-weight);
	color: var(--baseblack);
	font-size: var(--subtitle-font-size);
	text-align: center;
	letter-spacing: var(--subtitle-letter-spacing);
	line-height: var(--subtitle-line-height);
	font-family: var(--subtitle-font-family);
	font-style: var(--subtitle-font-style);
	position: relative;
}

.skk-support__card-desc {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	font-weight: var(--body-s-font-weight);
	color: var(--baseblack);
	font-size: var(--body-s-font-size);
	text-align: center;
	letter-spacing: var(--body-s-letter-spacing);
	line-height: var(--body-s-line-height);
	font-family: var(--body-s-font-family);
	font-style: var(--body-s-font-style);
	position: relative;
}

/* アイコン（円背景 + 中のベクター / 直接画像） */
.skk-support__icon-box {
	display: flex;
	flex-direction: column;
	width: 100px;
	height: 100px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--size-space-600);
	position: relative;
	background-color: var(--themasecondary);
	border-radius: 999px;
	overflow: hidden;
	aspect-ratio: 1;
}
.skk-support__icon-box--guide { padding: var(--size-space-600) 22px; }
.skk-support__icon-vec {
	position: relative;
	align-self: stretch;
	width: 100%;
}
.skk-support__icon-vec--faq { aspect-ratio: 1.08; }
.skk-support__icon-vec--guide { aspect-ratio: 1.43; }
.skk-support__icon-img {
	position: relative;
	width: 100px;
	height: 100px;
	aspect-ratio: 1;
}

/* 供花バナー */
.skk-support__banner {
	display: flex;
	width: 800px;
	max-width: 100%;
	height: 135px;
	align-items: center;
	justify-content: center;
	gap: var(--size-space-600);
	padding: var(--size-space-600);
	position: relative;
	border-radius: var(--size-radius-400);
	border: 1px solid var(--basegrey);
	background-image: url("../../assets/anima/pc/img/pc-banner02.svg?v=2");
	background-size: cover;
	background-position: 50% 50%;
}
/* リンク時（供花のご案内PDF）。押せることが分かるよう、ロゴと同じく薄くする。 */
a.skk-support__banner {
	cursor: pointer;
	text-decoration: none;
	transition: opacity .25s ease;
}
a.skk-support__banner:hover {
	opacity: .7;
}
a.skk-support__banner:focus-visible {
	outline: 2px solid #4a90e2;
	outline-offset: 2px;
}

.skk-support__banner-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 1;
	flex-grow: 1;
	margin-top: -2px;
	margin-bottom: -2px;
	gap: var(--size-space-0);
}

.skk-support__banner-underline {
	position: absolute;
	top: calc(50% + 13px);
	left: calc(50% - 274px);
	width: 548px;
	height: 35px;
}

.skk-support__banner-caption-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--size-space-300);
	position: relative;
	flex: 0 0 auto;
}

.skk-support__banner-line {
	position: relative;
	width: 26px;
	height: 2px;
}
.skk-support__banner-line--l { margin-left: -1px; }
.skk-support__banner-line--r { margin-right: -1px; }

.skk-support__banner-caption {
	display: flex;
	align-items: center;
	width: fit-content;
	margin-top: -1px;
	font-weight: var(--body-m-font-weight);
	color: var(--baseblack);
	font-size: var(--body-m-font-size);
	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-support__banner-big {
	display: flex;
	align-items: center;
	width: fit-content;
	font-weight: 700;
	color: var(--baseblack);
	font-size: 44px;
	line-height: 61.6px;
	white-space: nowrap;
	font-family: "Zen Kaku Gothic New", Helvetica;
	position: relative;
}
.skk-support__banner-ch--a { letter-spacing: 1.55px; }
.skk-support__banner-ch--b { letter-spacing: 1.36px; }
.skk-support__banner-ch--c { letter-spacing: 4.07px; }
.skk-support__banner-ch--d { letter-spacing: 2.13px; }
.skk-support__banner-ch--e { letter-spacing: -0.19px; }
.skk-support__banner-ch--f { letter-spacing: 0.19px; }

@media (max-width: 1100px) {
	.skk-support__banner { width: calc(100% - 32px); }
}

@media (max-width: 768px) {
	.skk-support__cards { width: 100%; box-sizing: border-box; padding: 0 var(--size-space-600); }
	.skk-support__row { width: 100%; flex-direction: column; }
	.skk-support__card { width: 100%; flex: 0 0 auto; box-sizing: border-box; }
	.skk-support__banner {
		flex-direction: column;
		box-sizing: border-box;
		width: calc(100% - 48px);
		height: 250px;
		background-image: url("../../assets/anima/sp/img/sp-banner02.jpg");
		background-image: image-set(url("../../assets/anima/sp/img/sp-banner02.webp") type("image/webp"), url("../../assets/anima/sp/img/sp-banner02.jpg") type("image/jpeg"));
	}
	.skk-support__banner-caption { font-size: 13px; }
	.skk-support__banner-line { width: 14px; height: 14px; }
	.skk-support__banner-underline { width: 280px; left: calc(50% - 140px); }
	.skk-support__banner-big { display: block; width: 100%; white-space: normal; text-align: center; font-size: 34px; line-height: 1.4; }
}