@charset "utf-8";

/* ///////////////////////////////////////////////////////////////////////
// CTA共通デザイン
/////////////////////////////////////////////////////////////////////// */
:root {
	--tel-bg: #fff;
	--tel-dark: #00329f;
	--PCtel: #3758a4;
	--aoPamph-bg: #00a901;
	--aoPamph-dark: #005d1b;
	--consul-bg: #1849b1;
	--consul-dark: #00329f;
}
.btnBox {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(0.6rem, var(--sp-6px), 1rem);
}
/* 吹き出し */
.CTAballoon {
	font-family: var(--fontFamily-sans-noto);
	font-weight: 500;
	font-size: clamp(1.7rem, var(--sp-17px), 1.8rem);
	text-align: center;
	position: relative;
	line-height: 1.2;
	color: #181818;
	min-height: clamp(1.7rem, var(--sp-17px), 3.4rem);
	display: flex;
	justify-content: center;
	align-items: center;
	& strong {
		font-size: 130%;
		color: #ce0000;
		margin-bottom: 0.2em;
	}
	&::before,
	&::after {
		position: absolute;
		content: '';
		background-color: #181818;
		width: 1px;
		height: 110%;
		bottom: -0.15em;
	}
	&::before {
		transform: rotate(-25deg);
		left: -1em;
	}
	&::after {
		transform: rotate(25deg);
		right: -1em;
	}
}
/* PC用電話 */
.ao_PCtel {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	color: var(--PCtel);
}
.ao_PCtel .telBox {
	font-family: var(--fontFamily-serif-noto);
	font-weight: 800;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
}
.ao_PCtel .telBox span {
	line-height: 1;
	&.telText {
		font-size: 2.4rem;
	}
	&.telNumb {
		font-size: 5.7rem;
	}
}
.ao_PCtel .businessHour {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	border: solid 1px var(--PCtel);
	border-radius: 0.5rem;
	font-family: var(--fontFamily-yugo);
	font-weight: bold;
	font-size: 1.6rem;
	color: var(--PCtel);
	line-height: 1;
	text-align: center;
	padding: 0.4em;
	& span {
		display: block;
		line-height: 1;
		text-align: center;
	}
	& .week {
		font-size: 85%;
	}
	& .time {
		display: block;
		writing-mode: vertical-lr;
		width: fit-content;
	}
}
/* ボタンデザイン共通 */
.ao_button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	width: 38rem;
	aspect-ratio: 380 / 80;
	height: auto;
	font-family: var(--fontFamily-sans-noto);
	font-weight: 700;
	position: relative;
	border-radius: 50em;
	border: 1px solid;
	text-align: center;
	line-height: 1.15;
	transition: all 0.2s;
	& span {
		line-height: 1.15;
	}
	&::before,
	&::after {
		position: absolute;
		content: '';
		top: 50%;
		transform: translateY(-50%);
	}
	&::before {
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
	}
	&::after {
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		width: 1rem;
		height: auto;
		aspect-ratio: 7/10;
		right: 1rem;
	}
	&:hover {
		transform: translateY(2px);
	}
}

/* 資料請求ボタン */
.ao_button.ao_pamph {
	background-color: var(--aoPamph-bg);
	border-color: var(--aoPamph-dark);
	box-shadow: 0 2px var(--aoPamph-dark);
	color: #fff;
	padding-left: 3.5rem;
	font-size: clamp(2.8rem, var(--sp-28px), 3rem);
	&::before {
		background-image: url(/koukousei/site_wp/wp-content/themes/site/images/common/entryBtn_bg_ao.png);
		width: auto;
		height: clamp(3.4rem, var(--sp-34px), 5.4rem);
		aspect-ratio: 1/1;
		left: 0.6rem;
	}
	&::after {
		background-color: #fff;
	}
	&:hover {
		box-shadow: none;
	}
}

/* SP用電話ボタン */
.ao_button.tel {
	background-color: var(--tel-bg);
	border-color: var(--tel-dark);
	box-shadow: 0 2px var(--tel-dark);
	color: var(--tel-dark);
	font-size: clamp(2.2rem, var(--sp-22px), 2.5rem);
	padding-left: 2rem;
	&::before {
		background-image: url(/koukousei/site_wp/wp-content/themes/site/images/common/cta_shape-tel.svg);
		width: auto;
		height: 2.2em;
		aspect-ratio: 103/150;
		top: 53%;
		left: 2rem;
	}
	&::after {
		background-color: var(--tel-dark);
	}
	&:hover {
		box-shadow: none;
	}
}
/* 学習相談ボタン */
.ao_button.consul {
	background-color: var(--consul-bg);
	border-color: var(--consul-dark);
	box-shadow: 0 2px var(--consul-dark);
	color: #fff;
	padding-left: 3.5rem;
	font-size: clamp(2.6rem, var(--sp-26px), 2.8rem);
	&::before {
		background-image: url(/koukousei/site_wp/wp-content/themes/site/images/common/cta_shape-calender.svg);
		width: auto;
		height: 1.4em;
		aspect-ratio: 1/1;
		left: 1.8rem;
	}
	&::after {
		background-color: #fff;
	}
	&:hover {
		box-shadow: none;
	}
}

/* LP用 --------------------------------------------------------------- */
/* 中間CTA
--------------------------------------------------------------------- */
.ao_middleCTA {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: flex-end;
	gap: 2rem;
	margin: clamp(4rem, var(--sp-40px), 5rem) auto;
	width: 100%;
	max-width: 80rem;
}
/* 各ボタン枠 */
.ao_middleCTA .btnBox {
	gap: clamp(0.6rem, var(--sp-6px), 1rem);
}
/* 共通ボタンデザイン */
.ao_middleCTA .btnBox .ao_button {
	width: clamp(33rem, 88vw, 35rem);
	aspect-ratio: 350 / 80;
	& span {
		display: block;
		line-height: 1;
	}
	/* ボタン1つのみ用 */
	&.btnOnly {
		width: clamp(31rem, 82.666vw, 70rem);
		aspect-ratio: 700/92;
		font-size: clamp(2rem, var(--sp-20px), 3.5rem);
	}
}
.ao_middleCTA .btnBox .ao_button.ao_pamph span {
	font-size: 75%;
}
.ao_middleCTA .btnBox .ao_button.ao_pamph::before {
	background-image: url(/koukousei/site_wp/wp-content/themes/site/images/lp/common/inEntry_sub.svg);
	height: calc(100% - 1rem);
}
.ao_middleCTA .btnBox .ao_button.tel span {
	background-color: var(--tel-dark);
	color: #fff;
	width: fit-content;
	font-size: 1.7rem;
	padding-inline: 2em;
	padding-block: 0.2em 0.35em;
	margin: 0 auto;
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.8rem) 50%, 100% 100%, 0 100%, 0.8rem 50%);
}
.ao_middleCTA .btnBox .ao_button.consul span {
	font-size: 75%;
}
/* 注釈 */
.ao_middleCTA .btnBox .notes {
	display: block;
	line-height: 1;
	font-family: var(--fontFamily-sans-noto);
	font-weight: 700;
	font-size: 1.4rem;
	text-align: center;
	margin-inline: auto;
}
@media screen and (max-width: 834px) {
	.ao_middleCTA {
		flex-direction: column;
		align-items: center;
		gap: 3rem;
	}
}
@media screen and (max-width: 600px) {
	.ao_middleCTA {
		padding-inline: 2rem;
	}
	.ao_middleCTA .btnBox .ao_button.btnOnly {
		aspect-ratio: 500/104;
	}
}