@charset "utf-8";
/* CSS Document */

/* フォントサイズ早見表 [ 1rem = 16px の場合 ] */
/* font-size:0.63rem; => 10px */
/* font-size:0.69rem; => 11px */
/* font-size:0.75rem; => 12px */
/* font-size:0.81rem; => 13px */
/* font-size:0.88rem; => 14px */
/* font-size:0.94rem; => 15px */
/* font-size:1.00rem; => 16px */ /*★*/
/* font-size:1.06rem; => 17px */
/* font-size:1.13rem; => 18px */
/* font-size:1.19rem; => 19px */
/* font-size:1.25rem; => 20px */
/* font-size:1.31rem; => 21px */
/* font-size:1.38rem; => 22px */
/* font-size:1.44rem; => 23px */
/* font-size:1.50rem; => 24px */
/* font-size:1.56rem; => 25px */
/* font-size:1.63rem; => 26px */
/* font-size:1.69rem; => 27px */
/* font-size:1.75rem; => 28px */
/* font-size:1.81rem; => 29px */
/* font-size:1.88rem; => 30px */
/* font-size:1.94rem; => 31px */
/* font-size:2.00rem; => 32px */
/* font-size:2.06rem; => 33px */
/* font-size:2.13rem; => 34px */
/* font-size:2.19rem; => 35px */
/* font-size:2.25rem; => 36px */
/* font-size:2.31rem; => 37px */
/* font-size:2.38rem; => 38px */
/* font-size:2.44rem; => 39px */
/* font-size:2.50rem; => 40px */

/*reset.css の後に読み込む 調整用のCSS*/

img {
	height: auto;
	max-width: 100%;
}

html {
 	line-height: 1.6;
	font-size:100%;
	font-family: 'Noto Sans JP', sans-serif;
}
header,
main,
footer {
  container-type: inline-size;
	margin-inline: auto;
	max-width: 750px;
}
body {
	background-color: #FFEDED;
}
.inner {
	padding-inline: min(25px,3.3cqw);
}

/* ====================
	header
==================== */
header {
	background-color: #fff;
}
.header_brand {
	align-items: center;
	display: grid;
	grid-template-columns: min(236px, 35cqw) 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"logo feature"
		"logo target";
	height: min(85px, 11.33cqw);
	padding: min(15px, 2cqw);
}
.heaer_brand_logo {
	grid-area: logo;
}
.header_brand_feature {
	align-self: self-end;
	color: #1a294f;
	font-size: clamp(.69rem, 2.134cqw, 1rem);
	font-weight: bold;
	grid-area: feature;
	text-align: right;
}
.header_brand_target {
	align-self: self-start;
	font-size: clamp(.69rem, 2.134cqw, 1rem);
	font-weight: bold;
	grid-area: target;
	text-align: right;
}

/* ====================
	page title
==================== */
.page_title {
	background-image: url(/fs/lp/open/hiroshimaminami/img/bg_page_title.webp);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto 1fr;
	min-height: 61cqw;
	text-align: center;
}
.page_title .title_logo img {
	margin-top: 4.8cqw;
	width: 39.2cqw;
}
.page_title .school_name {
	color: #1a294f;
	font-size: min(3.125rem, 6.67cqw);
	font-weight: bold;
	padding-top: 1.6cqw;
}
.page_title .open_date {
	color: #1a294f;
	font-size: min(2.5rem, 5.34cqw);
	font-weight: bold;
	line-height: 1;
}
.page_title .open_catch img {
	margin-top: 3.2cqw;
	width: 49.6cqw;
}

/* ====================
	新規開校入会キャンペーン
==================== */
.sec_cp {
	background-color: #e8516a;
}
.sec_heading_cp {
	text-align: center;
}
.sec_heading_cp img {
	margin-top: -.8cqw;
	max-width: 85.47cqw;
}
.list_benefit {
	display: grid;
	gap: 0 2cqw;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto 1fr auto;
	margin-top: 8cqw;
}
.benefit_item {
	background-color: #fff;
	border-radius: 12px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: subgrid;	
	grid-row: span 3;
	text-align: center;
}
.benefit_title {
	padding-inline: 3.2cqw;
	transform: translateY(-50%);
}
.benefit_content {
	padding: 0 0 1.6cqw;
}
.benefit_content img {
	width: min(174px, 23.2cqw);
}
.benefit_note {
	font-size: clamp(.63em, 2.67cqw, 1.25rem);
}
.list_benefit_note {
	line-height: 1.2;
	margin-top: 3.2cqw;
}	
.list_benefit_note li {
	color: #fff;
	display: inline;
	font-size: clamp(.63em, 2.67cqw, 1.25rem);
	padding-right: .2em;
}

/* ====================
	CTA
==================== */
.cta_box {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: min(85px, 11.3cqw) min(25px, 3.3cqw) min(55px, 6.3cqw);
}
.sec_cp .cta_box {
	padding-top: min(65px, 8.667cqw);
	margin-bottom: 4cqw;
}
.cta_box a {
	position: relative;
}
.cta_box a::before {
	background-color: #000;
	border-radius: 100px;
	content: "";
	display: block;
	height: 100%;
	mix-blend-mode: overlay;
	position: absolute;
	transform: translateY(1px);
	width: 100%;
}
.cta_box a img {
	position: relative;
	transition: transform .3s ease-out;
	z-index: 1;
}
.cta_box a:hover img {
	transform: translateY(-.4cqw);
}

/* ====================
	教室情報
==================== */
.sec_school {
	background-color: #e8516a;
	padding: 14cqw 0 4cqw;
}
.sec_heading_school {
	text-align: center;
}
.sec_heading_school img {
	max-width: 83.47cqw;
}
.list_school_info {
	background-color: #fff;
	border-radius: 12px;
	display: grid;
	gap: 4cqw 0;
	grid-template-columns: 1fr;
	margin-top: 8cqw;
	padding: 6cqw 4cqw;
}
.schoool_info_title {
	color: #1a294f;
	font-size: min(4.667cqw, 2.19rem);
	position: relative;
	text-align: center;
}
.schoool_info_title::after {
	background-color: #1a294f;
	content: "";
	height: clamp(2px, .4cqw, 3px);
	inset: auto 0 0 0;
	margin-inline: auto;
	position: absolute;
	width: 3em;
}
.school_info_content {
	font-size: min(4cqw, 1.88rem);
	margin-top: 2cqw;
	text-align: center;
}
.school_info_content a[href^="tel:"] {
	border-bottom: 1px solid currentColor;
	padding-left: .5em;
	position: relative;
}
.school_info_content a[href^="tel:"]::before {
	border-color: transparent currentColor;
	border-style: solid;
	border-width: .2em 0 .2em .3em;
	content: "";
	display: blodk;
	height: 0;
	inset: 0 auto 0 0;
	margin: auto 0;
	position: absolute;
	transform: translateY(5%);
	width: 0;
}
.school_info_map iframe {
	aspect-ratio: 4/3;
	margin-top: 4cqw;
}

/* ====================
	チャイルド・アイズとは
==================== */
.sec_childeyes {
	background-color: #ddf2ef;
	padding: 14cqw 0 4cqw;
}
.sec_heading_childeyes {
	text-align: center;
}
.sec_subtitle_childeyes {
	color: #1a294f;
	font-size: min(5.334cqw, 2.5rem);
	font-weight: bold;
	line-height: 1.4;
	margin-top: 8cqw;
	text-align: center;
}
.sec_childeyes .subsec_childeyes:nth-of-type(2) .sec_subtitle_childeyes {
	margin-top: 17.33cqw;
}
.subsec_childeyes_text {
	font-size: min(4cqw, 1.88rem);
	margin-top: 4cqw;
	padding-inline: min(40px, 5.34cqw);
}
.sec_heading_childeyes img {
	max-width: 83.47cqw;
}
.wrap_embed_video {
	margin-top: 8cqw;
	text-align: center;
}
.wrap_embed_video iframe {
	aspect-ratio: 560/315;
	height: auto;
	width: 100%;
}
.wrap_table_feature {
	margin-top: 9.333cqw;
	padding-bottom: 4cqw;
}
.feature_item {
	background-color: #fff;
	border-radius: 12px;
	margin-top: 17.6cqw;
	padding: 8cqw;
	position: relative;
}
.feature_item:nth-child(even) {
	background-color: #ffe0ed;
}
.feature_title {
	color: #1a294f;
	font-size: min(4.8cqw, 2.25rem);
	font-weight: bold;
	text-align: left;
}
.feature_title_num img {
	inset: 0;
	margin-inline: auto;
	transform: translateY(-60%);
	position: absolute;
	width: min(104px, 13.87cqw);
}
.feature_content {
	font-size: min(4cqw, 1.88rem);
	margin-top: 4cqw;
}

/* ====================
	コース
==================== */
.sec_course {
	background-color: #e8516a;
	padding: 14cqw 0 4cqw;
}
.sec_heading_course {
	text-align: center;
}
.sec_heading_course img {
	max-width: 83.47cqw;
}
.sec_course_detail {
	background-color: #fff;
	border-color: #1a294f;
	border-style: solid;
	border-width: clamp(3px, .534cqw, 4px);
	border-radius: 3.733cqw;
	margin-top: 9.333cqw;
	padding: 0 5.334cqw 8cqw;
}
.sec_heading_course_detail {
	text-align: center;
	transform: translateY(-1%);
}
.sec_heading_course_detail img {
	width: min(610px, 81.34cqw);
}
.course_detail_photo {
	display: block;
	margin-top: 6cqw;
}
.course_detail_photo img {
	aspect-ratio: 61/42;
}
.course_detail_catch {
	color: #1a294f;
	font-size: min(4.8cqw, 2.25rem);
	margin-top: 4cqw;
}
.course_detail_text {
	font-size: min(4cqw, 1.88rem);
	margin-top: 4cqw;
}
.sec_heading_achievement {
	margin-top: 8cqw;
}
.sec_heading_achievement {
	background-color: #e8516a;
	border-radius: min(10px, 1.34cqw);
	color: #fff;
	font-size: clamp(1.38rem, 4.267cqw, 1.88rem);
	font-weight: bold;
	line-height: 1;
	padding: 2cqw;
	position: relative;
	text-align: center;
}
.sec_heading_achievement::after {
	border-color: #e8516a transparent;
	border-style: solid;
	border-width: 1.6cqw 1.2cqw 0;
	content: "";
	height: 0;
	inset: auto 0 0;
	margin: 0 auto;
	position: absolute;
	transform: translateY(95%);
	width: 0;
}
.achievement_item {
	border-color: #e8516a;
	border-style: solid;
	border-width: clamp(3px, .534cqw, 4px);
	border-radius: min(10px, 1.34cqw);
	margin-top: 4cqw;
	padding: 2cqw 4cqw;
}
.achievement_title {
	color: #1a294f;
	font-size: min(4.667cqw, 2.19rem);
	font-weight: bold;
}
.achievement_accordion_triger {
	cursor: pointer;
	display: block;
	position: relative;
	width: 100%;
}
.achievement_accordion_triger::before,
.achievement_accordion_triger::after {
	background-color: #e8516a;
	border-radius: 100px;
	content: "";
	display: block;
	height: 3.2cqw;
	inset: 0 3% 0 auto;
	margin: auto 0;
	position: absolute;
	transform-origin: center 3cqw;
	transform: rotate(45deg);
	width: .534cqw;
}
.achievement_accordion_triger::after {
	transform: rotate(-45deg);
}
.achievement_content {
	display: grid;
	font-size: clamp(1.38rem, 4.267cqw, 1.88rem);
	grid-template-columns: 1fr;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s ease;
}
.list_achievement_name {
	list-style: disc outside;
	font-size: min(4cqw, 1.88rem);
	overflow: hidden;
	padding-left: min(5.333cqw, 2.5rem);
}
.list_achievement_name li {
	line-height: 1.3;
	margin-top: .4cqw;
}
.achievement_title:has(:checked) + .achievement_content {
	grid-template-rows: 1fr;
}
.achievement_accordion_triger:has(:checked)::before {
	transform-origin: center .2cqw;
	transform: rotate(-45deg);
}
.achievement_accordion_triger:has(:checked)::after {
	transform-origin: center .2cqw;
	transform: rotate(45deg);
}

/* ====================
	よくある質問
==================== */
.sec_faq {
	background-color: #fff;
	padding: 14cqw 0 4cqw;
}
.sec_heading_faq {
	text-align: center;
}
.sec_heading_faq img {
	max-width: 83.47cqw;
}
.list_faq {
	padding: 0 6.667cqw 3.33cqw;
}
.faq_item {
	margin-top: 13.333cqw;
}
.faq_title {
	display: grid;
	gap: 0 2.8cqw;
	grid-template-columns: min(104px, 13.866cqw) 1fr;
	grid-template-rows: auto;
}
.faq_title_text {
	color: #1a294f;
	font-size: min(4.8cqw, 2.25rem);
	font-weight: bold;
}
.faq_content {
	font-size: min(4cqw, 1.88rem);
	margin-top: 4cqw;
}
.faq_content_icon {
	color: #e8516a;
	font-weight: bold;
	padding-right: .2em;
}

/* ====================
	フッター
==================== */
footer {
	background-color: #e8516a;
}
.wrap_footer_copyright {
	line-height: 1;
	margin-bottom: 18cqw;
	padding: 10.66cqw 0 12.667cqw;
	text-align: center;
}
.footer_copyright {
	color: #fff;
	font-size: min(2.933cqw, 1.38rem);
	letter-spacing: 1px;
}
.footer_cta {
	background-color: #63D7FF;
	bottom: 0;
	max-width: 750px;
	position: fixed;
	width: 100%;
	z-index: 1;
}
.list_footer_cta {
	align-items: stretch;
	display: grid;
	gap: 2cqw;
	grid-template-columns: 1fr 2fr;
	height: 18cqw;
	padding: 2cqw 10cqw;
}
.footer_cta_tel {
	align-items: center;
	background-color: #fff;
	border: .8cqw solid #FFEB00;
	border-radius: 2.666cqw;
	display: flex;
	font-size: min(4.8cqw, 2.25rem);
	font-weight: bold;
	gap: 0 2cqw;
	height: 100%;
	justify-content: center;
	transition: transform .3s ease-out;
}
.footer_cta_tel img {
	height: 1em;
	width: auto;
}
.footer_cta_trial {
	align-items: center;
	background-color: #FD1739;
	border-radius: 2.666cqw;
	color: #fff;
	display: flex;
	font-size: min(4.8cqw, 2.25rem);
	font-weight: bold;
	height: 100%;
	justify-content: center;
	transition: transform .3s ease-out;
}

.footer_cta_tel:hover,
.footer_cta_trial:hover {
	transform: translateY(-.4cqw);
}
@media screen and (min-width: 750px) {
	.wrap_footer_copyright {
		margin-bottom: 12cqw;
	}
	.list_footer_cta {
		height: 12cqw;
		padding: 2cqw 15cqw;
	}
	.footer_cta_tel {
		border-radius: 1.6cqw;
		font-size: min(3.2cqw, 1.5rem);
	}
	.footer_cta_trial {
		border-radius: 1.6cqw;
		font-size: min(3.2cqw, 1.5rem);
	}
}