﻿@import"https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap";
.kv {
	padding: 24px 0;
	background: #f4f4f4;
	overflow: hidden
}
.kv__main {
	margin-bottom: 16px
}
.kv__main-images {
	width: 100%
}
.kv__main-item.swiper-slide-active {
	border: 4px solid #f66
}
.pickup {
	padding-top: 80px;
	padding-bottom: 104px
}
@media only screen and (max-width: 750px) {
	.pickup {
		padding-bottom: 80px
	}
}
.pickup__container {
	position: relative;
	border-radius: 4px;
	border: 2px dashed #ff7b01;
	background: #ffedab;
	padding: 40px 64px
}
@media only screen and (max-width: 750px) {
	.pickup__container {
		padding: 34px 12px 32px 12px
	}
}
.pickup__container::after {
	content: "";
	background: no-repeat url(../images/top/illust_reading.png);
	background-size: contain;
	position: absolute;
	bottom: -40px;
	left: -50px;
	width: 106px;
	height: 93px
}
@media only screen and (max-width: 750px) {
	.pickup__container::after {
		width: 88px;
		height: 82px;
		bottom: -30px;
		left: -20px
	}
}
.pickup__title {
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 0 #ff4d01, -1px -1px 0 #ff4d01, -1px 1px 0 #ff4d01, 1px -1px 0 #ff4d01, 1px 0 0 #ff4d01, -1px 0 0 #ff4d01, 0 1px 0 #ff4d01, 0 -1px 0 #ff4d01;
	font-size: 32px;
	font-weight: 900;
	line-height: 100%;
	letter-spacing: 6.4px;
	position: absolute;
	left: 0;
	right: 0;
	top: -0.6em;
	margin: auto
}
.pickup__grid {
	margin-bottom: 24px
}
.pickup__link {
	border-radius: 4px;
	display: block;
	position: relative
}
.pickup__image {
	width: 100%
}
.pickup__more {
	text-align: center
}
.guidance {
	padding: 56px 0 72px;
	background: url(../images/top/img-guidance_bg.png);
	background-size: cover;
	margin-bottom: 104px
}
@media only screen and (max-width: 750px) {
	.guidance {
		margin-bottom: 80px
	}
}
.guidance__subtitle {
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	background: url(../images/top/img-guidance_subtitle.svg) center no-repeat;
	background-size: contain;
	padding: .2em;
	min-height: 44px
}
.guidance__title {
	font-size: 30px;
	font-size: clamp(24px, 2.5714285714px + 2.8571428571vw, 30px)
}
.guidance__title-strongtext {
	font-size: 36px;
	font-size: clamp(30px, 8.5714285714px + 2.8571428571vw, 36px);
	font-weight: 700
}
.guidance__container {
	position: relative
}
.guidance__container::before {
	content: "";
	background: no-repeat url(../images/top/img_XXX-left.png);
	background-size: cover;
	position: absolute;
	bottom: -70px;
	left: -130px;
	width: 262px;
	height: 159px
}
@media only screen and (max-width: 750px) {
	.guidance__container::before {
		width: 168px;
		height: 102px;
		bottom: -70px;
		left: 0
	}
}
.guidance__container::after {
	content: "";
	background: no-repeat url(../images/top/img_XXX-right.png);
	background-size: cover;
	position: absolute;
	bottom: -70px;
	right: -100px;
	width: 265px;
	height: 148px
}
@media only screen and (max-width: 750px) {
	.guidance__container::after {
		width: 170px;
		height: 95px;
		bottom: -70px;
		right: 0
	}
}
@media only screen and (max-width: 750px) {
	.guidance__content {
		padding: 0
	}
}
.guidance__card {
	display: flex;
	flex-direction: column;
	padding: 24px 32px 32px 32px;
	border-radius: 8px;
	border: 2px solid #099;
	background: #fff;
	box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, .1)
}
.guidance__card--elementary {
	border: 2px solid #099
}
.guidance__card--juniorsenior {
	border: 2px solid #f66
}
@media only screen and (max-width: 750px) {
	.guidance__card {
		width: 100%
	}
}
.guidance__card-title {
	font-size: 18px;
	font-weight: 700
}
.guidance__card-title--elementary {
	color: #099
}
.guidance__card-title--juniorsenior {
	color: #f66
}
.guidance__card-header {
	margin-bottom: 8px
}
.guidance__card-description {
	margin-bottom: 12px;
	font-weight: 500
}
.guidance__how {
	padding: 12px 16px 24px 16px;
	margin-bottom: 20px;
	flex-grow: 1
}
.guidance__how-title {
	font-weight: 700;
	margin-bottom: 8px
}
.guidance__how-item {
	margin-bottom: 8px;
	text-indent: calc(-1em - 8px);
	padding-left: calc(1em + 8px);
	font-weight: 500
}
.guidance__how-item::before {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	border-radius: 50%;
	margin-right: 8px
}
.guidance__how-item--elementary::before {
	background-color: #099
}
.guidance__how-item--juniorsenior::before {
	background-color: #f66
}
.guidance__how-subtext {
	font-size: 12px;
	text-indent: -1em;
	padding-left: 1em;
	font-weight: 400
}
.guidance__how-subtext::before {
	content: "※"
}
.guidance__more {
	text-align: center
}
.guidance__more .btn {
	min-width: 220px;
	z-index: 1
}
.events {
	margin-bottom: 104px
}
.events__container {
	position: relative
}
.events__container::before {
	content: "";
	background: no-repeat url(../images/top/illust_classroom.png);
	background-size: contain;
	position: absolute;
	top: -20px;
	left: 0px;
	width: 146px;
	height: 139px
}
@media only screen and (max-width: 750px) {
	.events__container::before {
		width: 116px;
		height: 111px;
		left: 25px;
		top: -68px
	}
}
.events__grid {
	background: #f5f5f5;
	padding: 24px;
	margin-bottom: 24px
}
@media only screen and (max-width: 750px) {
	.events__grid .container_840 {
		padding: 0
	}
}
.events__item {
	width: calc(50% - 12px)
}
@media only screen and (max-width: 750px) {
	.events__item {
		width: 100%
	}
}
.events__item-title {
	font-weight: 500
}
@media only screen and (max-width: 750px) {
	.events__item-title {
		width: 100%
	}
}
.events__tags .tag__target {
	display: flex
}
@media only screen and (max-width: 750px) {
	.events__tags {
		width: 100%
	}
}
.events__image {
	width: 100%
}
.events__image-link {
	width: 100%;
	display: block
}
.events__image-wrapper {
	margin-bottom: 8px
}
.events__links {
	margin-bottom: 24px
}
.events__links-item:before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #ff7b01;
	margin-right: 8px;
	border-radius: 50%
}
.events__more {
	text-align: center
}
.how {
	background: #ffeeb0;
	padding: 80px 0 104px
}
.how__points {
	border-radius: 10px;
	border: 2px dashed #ff7b01;
	background: #fffbe5;
	padding: 16px 32px 32px 32px;
	margin-bottom: 32px
}
.how__points-title {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2.2px;
	margin-bottom: 16px
}
.how__points-strongtext {
	color: #ff4d01;
	font-size: 32px;
	font-weight: 700
}
.how__nav-link {
	display: block;
	position: relative;
	padding: 16px 39px 16px 60px;
	font-size: 20px;
	font-size: clamp(16px, 1.7142857143px + 1.9047619048vw, 20px);
	font-weight: 500;
	border-radius: 5em;
	border: 2px solid #ff4d01;
	background: #fff;
	box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, .1)
}
@media only screen and (max-width: 750px) {
	.how__nav-link {
		font-weight: 700;
		line-height: 1.6;
		padding: 24px 39px 24px 60px
	}
}
.how__nav-link:hover {
	opacity: 1;
	box-shadow: none;
	transform: translateY(4px)
}
.how__nav-link::after {
	content: "";
	background: url(../images/common/icon_arrow-bottom.svg);
	width: 15px;
	height: 17px;
	position: absolute;
	right: 24px;
	top: 0;
	bottom: 0;
	margin: auto
}
.how__nav-num {
	height: 1.8em;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #ff7b01;
	border-radius: 4px;
	padding: 4px 3px 4px 5px;
	color: #ff7b01;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 1.8px;
	line-height: 1.2
}
.how__character {
	margin-bottom: 32px
}
.how__characters--center {
	text-align: center
}
.how__characters-text {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px
}
.how__section {
	margin-bottom: 20px
}
.how__section-inner {
	border-radius: 8px;
	background: #fff;
	padding: 40px 56px 48px 64px;
	box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, .1);
	position: relative
}
@media only screen and (max-width: 750px) {
	.how__section-inner {
		padding: 20px
	}
}
.how__section-header {
	margin-bottom: 24px;
	line-height: 1.2
}
@media only screen and (max-width: 750px) {
	.how__section-header {
		margin-bottom: 16px
	}
}
.how__section-num {
	height: 1.8em;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	margin: auto;
	background: #ff7b01;
	border-radius: 8px 0px;
	padding: 4px 6px 4px 6px;
	color: #ff7b01;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	letter-spacing: 1.8px
}
.how__section-title {
	font-size: 28px;
	font-weight: 700
}
@media only screen and (max-width: 750px) {
	.how__section-title {
		line-height: 1.4
	}
}
.how__section-subtitle {
	color: #ff4d01;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px
}
@media only screen and (max-width: 750px) {
	.how__section-subtitle {
		line-height: 1.4
	}
}
.how__section-text + .how__section-text {
	margin-top: 1em
}
.how__section-image {
	text-align: right;
	margin-bottom: 32px;
	width: 100%
}
@media only screen and (max-width: 750px) {
	.how__section-image {
		text-align: center;
		margin-bottom: 16px
	}
}
.how__more {
	text-align: right
}
@media only screen and (max-width: 750px) {
	.how__more {
		text-align: center
	}
}
.format {
	margin: 104px 0
}
@media only screen and (max-width: 750px) {
	.format {
		margin: 80px 0
	}
}
.format__container {
	position: relative
}
.format__container::after {
	content: "";
	background: no-repeat url(../images/top/illust_students.png);
	background-size: contain;
	position: absolute;
	top: -50px;
	left: 0px;
	width: 119px;
	height: 95px
}
@media only screen and (max-width: 750px) {
	.format__container::after {
		width: 95px;
		height: 99px;
		top: -60px;
		left: 16px
	}
}
.format__section {
	margin-bottom: 40px
}
@media only screen and (max-width: 750px) {
	.format__section {
		margin-bottom: 20px
	}
}
.format__section-item {
	margin-bottom: 32px;
	padding: 32px 40px 48px 40px;
	border-radius: 8px;
	border: 2px solid #ff7b01;
	background: #fff
}
@media only screen and (max-width: 750px) {
	.format__section-item {
		padding: 32px 20px
	}
}
.format__section-header {
	border-bottom: 2px solid #dadada;
	padding-bottom: 8px;
	margin-bottom: 20px;
	line-height: 1.2
}
.format__section-subtitle {
	color: #ff4d01;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 4px
}
.format__section-title {
	font-size: 36px;
	font-weight: 700
}
.format__section-heading {
	color: #ff4d01;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 16px
}
.format__section-text + .format__section-text {
	margin-top: 1em
}
.format__section-image {
	text-align: right;
	margin-bottom: 32px;
	width: 100%
}
@media only screen and (max-width: 750px) {
	.format__section-image {
		text-align: center;
		margin-bottom: 16px
	}
}
.format__more {
	text-align: right
}
@media only screen and (max-width: 750px) {
	.format__more {
		text-align: center
	}
}
.format__allmore {
	text-align: center
}
.gallery {
	padding-bottom: 0
}
.gallery__image {
	width: 100%
}
.topics {
	padding: 80px 0 64px
}
.topics__content {
	margin-bottom: 48px
}
.topics__list {
	width: calc(100% - 210px)
}
@media only screen and (max-width: 750px) {
	.topics__list {
		margin-bottom: 20px;
		width: 100%
	}
}
.topics__more {
	text-align: right;
	width: 210px
}
@media only screen and (max-width: 750px) {
	.topics__more {
		width: 100%;
		text-align: center
	}
}
.topics__item {
	font-size: 16px;
	margin-bottom: 16px
}
.topics__item:last-child {
	margin-bottom: 0
}
.topics__date {
	color: #777;
	font-weight: 400;
	width: 7em
}
@media only screen and (max-width: 750px) {
	.topics__date {
		width: 100%;
		line-height: 1.2
	}
}
.topics__text {
	width: calc(100% - 8em)
}
@media only screen and (max-width: 750px) {
	.topics__text {
		width: 100%
	}
}
@media only screen and (max-width: 750px) {
	.topics__banner-item {
		width: 100%;
		margin-bottom: 16px
	}
}
@media only screen and (max-width: 750px) {
	.topics__banner-image, .topics__banner-link {
		width: 100%
	}
}
.recruit {
	padding: 64px 0 48px;
	background: url(../images/top/img-recruit_bg.png);
	background-size: cover
}
@media only screen and (max-width: 750px) {
	.recruit {
		padding: 48px 0 180px;
		overflow: hidden
	}
}
.recruit__container {
	position: relative
}
.recruit__container::before {
	content: "";
	background: no-repeat url(../images/top/img-recruit_teachers.png);
	background-size: cover;
	position: absolute;
	z-index: 0;
	bottom: -48px;
	right: -80px;
	width: 518px;
	height: 328px
}
@media only screen and (max-width: 750px) {
	.recruit__container::before {
		width: 398px;
		height: 208px;
		bottom: -220px;
		left: 0;
		right: 0;
		margin: auto
	}
}
.recruit__intro {
	margin-bottom: 40px;
	position: relative;
	z-index: 1
}
.recruit__intro span {
	display: inline-block;
	background: #fff;
	padding: 0 4px
}
@media only screen and (max-width: 750px) {
	.recruit__intro span {
		margin-bottom: 4px
	}
}
.recruit__intro-text {
	position: relative;
	z-index: 1;
	font-size: 24px;
	font-weight: 700
}
.recruit__intro-highlight {
	color: #ff4d01;
	font-weight: 700
}
.recruit__banner-link {
	padding: 16px 24px;
	font-size: 20px;
	font-weight: 700;
	width: 100%
}
.recruit__banner-accent {
	color: #ff4d01;
	font-size: 13px;
	font-weight: 700
}