@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   トップページ ヒーローエリア
   テンプレート：swell_child/parts/top/main_visual-single.php
   PC：高さは画面幅の約44%（画像は横幅いっぱい、上下は中央基準でトリミング）
   タブレット・スマホ：画像は切らずに全体を表示
   PC（960px〜）：画像の上、右側にボックスを重ねる
   タブレット・スマホ（〜959px）：画像を上、ボックスを下に重ねて配置
========================================================= */
.okaya-hero {
	--hero-navy: #134a7c;   /* ラベル・チェックの色 */
	--hero-text: #333;
	--hero-line: #dcdfe4;
	position: relative;
	height: max(560px, 44.4vw);   /* ヒーローの高さ（PC） */
	color: var(--hero-text);
	overflow: hidden;
}

/* 画像：横幅いっぱい、高さに合わせて上下をトリミング */
.okaya-hero__media {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
}
.okaya-hero .okaya-hero__media img {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;   /* 見せたい位置に応じて center top / center bottom などに変更 */
}

/* ボックスを画像の上に重ねる領域 */
.okaya-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 1;
	box-sizing: border-box;
	padding: 40px 5.3%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* 白いボックス */
.okaya-hero__box {
	box-sizing: border-box;
	width: clamp(460px, 40vw, 580px);
	padding: 40px 36px 44px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(19, 74, 124, .12);
	text-align: center;
}

/* 紺色のラベル */
.okaya-hero__label {
	display: inline-block;
	margin: 0 0 20px;
	padding: 6px 2em;
	background: var(--hero-navy);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .08em;
	border-radius: 2px;
}

/* 明朝体の見出し */
.okaya-hero__title {
	margin: 0 0 24px;
	padding: 0;
	background: none;
	border: none;
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: .08em;
	color: var(--hero-text);
	text-align: center;
}
.okaya-hero__title::before,
.okaya-hero__title::after {
	content: none;
}

/* チェックリスト */
.okaya-hero__list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.okaya-hero__list li {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 26px;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: .04em;
	border-bottom: 1px solid var(--hero-line);
}
.okaya-hero__list li:last-child {
	border-bottom: none;
}
/* 四角い枠 */
.okaya-hero__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(11px + .8em - 9px);
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 1px solid #b9bec6;
	background: #fff;
}
/* 紺のチェック */
.okaya-hero__list li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: calc(11px + .8em - 6px);
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--hero-navy);
	border-bottom: 2px solid var(--hero-navy);
	transform: rotate(45deg);
}

/* ---------- タブレット・スマホ（〜959px） ---------- */
@media (max-width: 959px) {
	.okaya-hero {
		height: auto;
		overflow: visible;
	}
	.okaya-hero__media {
		position: relative;
		inset: auto;
	}
	.okaya-hero .okaya-hero__media img {
		height: auto;
	}
	.okaya-hero__inner {
		position: relative;
		inset: auto;
		padding: 0 24px 48px;
		display: block;
	}
	.okaya-hero__box {
		width: 100%;
		max-width: 580px;
		margin: -72px auto 0;   /* 画像に重ねる量 */
	}
}

/* ---------- スマホ（〜599px） ---------- */
@media (max-width: 599px) {
	.okaya-hero__inner {
		padding: 0 16px 36px;
	}
	.okaya-hero__box {
		margin-top: -40px;
		padding: 28px 18px;
	}
	.okaya-hero__label {
		padding: 5px 1em;
		font-size: 12px;
		letter-spacing: .04em;
		margin-bottom: 16px;
	}
	.okaya-hero__title {
		font-size: min(19px, 4.9vw);
		letter-spacing: .04em;
		margin-bottom: 16px;
	}
	.okaya-hero__list li {
		font-size: 14px;
		letter-spacing: .02em;
		padding: 10px 0 10px 26px;
	}
	.okaya-hero__list li::before { top: calc(10px + .8em - 9px); }
	.okaya-hero__list li::after  { top: calc(10px + .8em - 6px); }
}