@charset "utf-8";
/* ///////////////////////////////////////////////////////////////////////
// CTA共通デザイン
/////////////////////////////////////////////////////////////////////// */
:root {
	--PCtel: #2c8f00;
	--tel-gradation: linear-gradient(90deg, #0ca700, #0a8e00);
	--pamph-gradation: linear-gradient(90deg, #f96812, #e15300);
	--pamph-line: #f96812;
	--consul-gradation: linear-gradient(135deg, #d70000 30%, #7c0101);
	--consul-line: #d40f45;
	--lt-highLight: url(/koukousei/site_wp/wp-content/themes/site/images/common/lt_highLight.svg);
	--rb-shadow: url(/koukousei/site_wp/wp-content/themes/site/images/common/rb_shadow.svg);
}
.btnBox {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(0.4rem, var(--sp-4px), 1rem);
}
@media screen and (max-width: 834px) {
	:root {
		--lt-highLight: url(/koukousei/site_wp/wp-content/themes/site/images/common/lt_highLight_sp.svg);
		--rb-shadow: url(/koukousei/site_wp/wp-content/themes/site/images/common/rb_shadow_sp.svg);
	}
}
/* 吹き出し */
.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;
	&::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用電話 */
.PCtel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	color: var(--PCtel);
	width: 32.6rem;
	margin-bottom: 0.1em;
}
.PCtel .telBox {
	font-weight: 800;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.4rem;
}
.PCtel .telBox .telText {
	font-family: var(--fontFamily-sans-noto);
	font-weight: 800;
	font-size: 1.3rem;
	display: block;
	line-height: 1;
	letter-spacing: 0.1em;
	& span {
		line-height: 1;
		display: block;
		margin-bottom: 0.15em;
		background-image: linear-gradient(#35a62a 50%, var(--PCtel) 50%);
		color: #fff;
		text-align: center;
		padding-block: 0.15em 0.28em;
		letter-spacing: 0.25em;
		clip-path: polygon(0 0, 100% 0, calc(100% - 0.3em) 50%, 100% 100%, 0 100%);
	}
}
.PCtel .telBox .telNumb {
	font-family: var(--fontFamily-serif-noto);
	font-size: 4rem;
	letter-spacing: 0.01em;
	line-height: 0.8;
	display: block;
	margin-bottom: 0.1em;
}
.PCtel .businessHour {
	font-family: YakuHanJP, var(--fontFamily-yugo);
	font-weight: bold;
	font-size: 1.47rem;
	letter-spacing: 0.05em;
	color: #666;
	line-height: 1;
	text-align: center;
	margin-bottom: 0.05em;
}
/* ボタンデザイン共通 */
.ippan_button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	width: 30rem;
	aspect-ratio: 300 / 68;
	height: auto;
	font-family: var(--fontFamily-serif-noto);
	font-weight: 900;
	font-size: 2rem;
	color: #fff;
	position: relative;
	border: clamp(1px, var(--sp-1px), 2px) solid;
	text-align: center;
	line-height: 1.1;
	transition: all 0.2s;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
	& span {
		line-height: 1.1;
	}
	& .highLight {
		position: absolute;
		content: '';
		width: 85%;
		height: 25%;
		border-radius: 50em;
		background-image: linear-gradient(#fff 2%, rgba(255, 255, 255, 0.7) 15%, transparent);
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}
	&::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: 0.8rem;
		height: auto;
		aspect-ratio: 7/10;
		right: 0.8rem;
	}
	&:hover {
		transform: translateY(2px);
	}
}
@media screen and (max-width: 834px) {
	.ippan_button::after {
		display: none;
	}
	.ippan_button .highLight {
		height: 30%;
	}
}
/* SP用電話ボタン */
.ippan_button.tel {
	background-image: var(--lt-highLight), var(--rb-shadow), var(--tel-gradation);
	background-size: auto 70%, auto 70%, cover;
	background-position: 0 0, 100% 100%, 50% 50%;
	border-color: var(--tel-dark);
	padding-left: clamp(3rem, var(--sp-30px), 6rem);
	&::before {
		mask: url(/koukousei/site_wp/wp-content/themes/site/images/common/icon_tel.svg);
		mask-repeat: no-repeat;
		mask-size: contain;
		background-color: #fff;
		width: auto;
		height: 2em;
		aspect-ratio: 73/95;
		top: 53%;
		left: clamp(1rem, var(--sp-10px), 2rem);
	}
	&::after {
		background-color: var(--tel-dark);
	}
	&:hover {
		box-shadow: none;
	}
}
@media screen and (max-width: 834px) {
	.ippan_button.tel {
		border-radius: 50em;
		border-color: var(--PCtel);
		background-size: auto 75%, auto 75%, cover;
	}
}
/* 学習相談ボタン */
.ippan_button.consul {
	background-image: var(--consul-gradation);
	outline: 1px solid #fff;
	outline-offset: -0.3rem;
	border-color: var(--consul-line);
	border-radius: 0.3em;
	color: #fff;
	padding-left: 3.5rem;
	&::before {
		background-image: url(/koukousei/site_wp/wp-content/themes/site/images/common/sonsulIcon.svg);
		background-size: contain;
		background-position: 50% 50%;
		width: auto;
		height: 2.4em;
		aspect-ratio: 1/1;
		left: 1.5rem;
	}
	& span span {
		display: block;
		font-family: var(--fontFamily-sans-noto);
		font-size: 75%;
		text-align: center;
		margin-bottom: 0.25em;
	}
	&::after {
		background-color: #fff;
	}
	&:hover {
		box-shadow: none;
	}
}

/* 資料請求ボタン */
.ippan_button.pamph {
	background-image: var(--lt-highLight), var(--rb-shadow), var(--pamph-gradation);
	background-size: auto 75%, auto 75%, cover;
	background-position: 0 0, 100% 100%, 50% 50%;
	border-color: var(--pamph-line);
	padding-left: 4rem;
	border-radius: 50em;
	overflow: hidden;
	& span:not(.highLight) {
		text-align: center;
		z-index: 1;
	}
	&::before {
		background-image: url(/koukousei/site_wp/wp-content/themes/site/images/common/entryBtn_bg.png);
		width: auto;
		height: clamp(3.4rem, var(--sp-34px), 5.4rem);
		aspect-ratio: 150/137;
		left: 0.6rem;
		z-index: 1;
	}
	&::after {
		background-color: #fff;
	}
	&:hover {
		box-shadow: none;
	}
}
@media screen and (max-width: 834px) {
	.ippan_button.pamph {
		background-size: auto 75%, auto 75%, cover;
	}
}
/* 注釈 */
.btnBox .notes {
	display: block;
	line-height: 1;
	font-family: var(--fontFamily-sans-noto);
	font-weight: 700;
	font-size: clamp(1.2rem, var(--sp-12px), 2.7rem);
	text-align: center;
	margin-inline: auto;
}