@charset "utf-8";

.top-hero {
	position: relative;
}

.ct-top-width {
	max-width: 900px;
}

/* ===============================================
   ヒーロー（カバーブロック）
   =============================================== */
.top-hero {
	padding-bottom: 160px;
}
/* 上寄せ */
.top-hero .wp-block-cover__inner-container {
	align-self: flex-start;
	padding-right: 40px;
}

/* PC：左は1920pxで200px（比例）、1920px超は中央寄せで固定*/
@media (min-width: 992px) {
	body .top-hero.wp-block-cover {
		min-height: min(1034 / 1920 * 100vw, 1034px);
		padding-left: 0;
		padding-right: 0;
	}
	.top-hero .wp-block-cover__inner-container,
	body .top-hero.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
		width: 100%;
		max-width: var(--design-width);
		margin-left: auto;
		margin-right: auto;
		padding-top: var(--hero-top);
		padding-left: var(--hero-left);
	}
}


.top-hero .wp-block-cover__inner-container > *,
.top-hero .is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 見出し：1200px以上は70px固定、それ以下は可変 */
.top-hero__title {
	max-width: min(798px, 100%);
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	color: var(--blue);
	font-size: clamp(35px, 70 / 1200 * 100vw, var(--fs-hero-title));
	font-weight: var(--fw-hero-title);
	line-height: var(--lh-hero-title);
	letter-spacing: var(--ls-hero-title);
}

.top-hero .top-hero__title + *,
.top-hero .top-hero__title + * > :first-child {
	margin-top: 0;
}

/* リード文 */
.top-hero .top-hero__lead {
	max-width: min(798px, 100%);
	margin: 0 0 var(--mb-hero-lead);
	color: var(--blue);
	font-size: var(--fs-hero-lead);
	font-weight: var(--fw-hero-lead);
	line-height: var(--lh-hero-lead);
}
/* 段落の間 */
.top-hero .top-hero__lead + .top-hero__lead {
	margin-top: var(--mb-hero-lead) !important;
}

/* 文字の周りに薄い白 */
.top-hero__title,
.top-hero .top-hero__lead {
	text-shadow: 0 0 6px #FFFFFF;
}

/* ボタン */
.top-hero__actions {
	margin-top: 36px;
}
.top-hero__btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 26px;
	border-radius: 3px;
	background: var(--gold);
	color: var(--white);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .2s;
}
.top-hero__btn .wp-block-button__link::after {
	content: "›";
	font-size: 18px;
	line-height: 1;
	transition: transform .2s;
}
.top-hero__btn .wp-block-button__link:hover {
	background: var(--gold-hover);
	color: var(--white);
}
.top-hero__btn .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

@media (max-width: 991.98px) {
	.top-hero__title {
		margin-bottom: 20px;
	}
	.top-hero__actions {
		margin-top: 28px;
	}
}