@charset "utf-8";
/* ------------------ top ------------------ */
/* --- base --- */
section + section {padding-top: 12em;}

section h2 {
	font-size: 3.6rem;
	line-height: 1.35;
	text-align: center;
	padding-top: 2.934rem;}
section h2 small {
	display: block;
	line-height: 1.375;
	font-size: 0.5em;}
section h3 {
	font-size: 2.4rem;
	line-height: 1.5;
	text-align: center;}
section h3 small {
	display: inline-block;}

section h2 + .btn_waku {margin-top: 3rem;}
section ul + .btn_waku,
section p + .btn_waku {margin: 3.625rem 0 0;}


/* --- common --- */


/* --------- mainimg --------- */
.mainimg {
	width: 100%;}


/* --- animation iroiro --- */
.mainimg li {
	position: relative;}
.mainimg li span {
	display: block;
	position: absolute;
	transition: all 0.5s 0s ease-out;}
.mainimg li img {
	width: 100%;
	height: auto;}

.banner02 .parts_01 {
	top: 14.012%;
	left: 5.10416%;
	width: 89.53125%;
	opacity: 0;
}
.banner02.slick-active .parts_01 {
	animation: parts_rigth_in 1s 0.5s forwards;
}
.banner02 .parts_02 {
	top: 27.1169%;
	left: 4.6875%;
	width: 90.52083%;
	opacity: 0;
}
.banner02.slick-active .parts_02 {
	animation: parts_rigth_in 1s 1s forwards;
}
.banner02 .parts_03 {
	top: 50.6%;
	left: 16.71875%;
	width: 21.2799%;
}
.banner02 .parts_04 {
	top: 58.5685%;
	left: 16.667%;
	width: 22.083%;
}
.banner02 .parts_05 {
	top: 66.43%;
	left: 16.667%;
	width: 21.0416%;
}
.banner02 .parts_06 {
	top: 74.294%;
	left: 16.667%;
	width: 22.91667%;
}
.banner02 .parts_07 {
	top: 82.56%;
	left: 16.667%;
	width: 21.9791667%;
}
.banner02 .parts_08 {
	top: 50.907258%;
	left: 43.90625%;
	width: 32.55208%;
}
.banner02 .parts_09 {
	top: 65.02%;
	left: 43.75%;
	width: 39.2708%;
}
.banner02 .parts_10 {
	top: 79.334677%;
	left: 43.75%;
	width: 25.625%;
}
.banner02 .parts_11 {
	top: 60.78629%;
	left: 43.75%;
	width: 39.53125%;
	height: 2px;
	background: #fff;
}
.banner02 .parts_12 {
	top: 75.4%;
	left: 43.75%;
	width: 39.53125%;
	height: 2px;
	background: #fff;
}

.banner04 .parts_01 {
	top: 9.07258%;
	left: 20.26%;
	width: 75.52%;
	opacity: 0;
}
.banner04.slick-active  .parts_01 {
	animation: parts_zoom 0.5s 1s forwards;
}
.banner04 .parts_02 {
	top: 41%;
	left: 9.8958%;
	width: 11.5104%;
}
.banner04 .parts_03 {
	bottom: -1px;
	left: 29.583334%;
	width: 65.88541667%;
}
.banner04 .parts_04 {
	top: 13.1%;
	left: 5.3125%;
	width: 11.3%;
}
.banner04 .parts_05 {
	top: 8.97%;
	left: 4.2708%;
	width: 13.38541667%;
	height: 2px;
	background: #fff;
}
.banner04 .parts_06 {
	top: 26.915%;
	left: 4.2708%;
	width: 13.38541667%;
	height: 2px;
	background: #fff;
}

.banner07 .parts_01 {
	top: 41.33%;
	left: 12.6%;
	width: 74.0625%;
	opacity: 0;
}
.banner07.slick-active  .parts_01 {
	animation: parts_bottom_in 0.5s 1s forwards;
}
.banner07 .parts_02 {
	top: 61.79%;
	left: 29.0625%;
	width: 40.8334%;
}
.banner07 .parts_03 {
	top: 70.96774%;
	left: 27.291667%;
	width: 44.2708334%;
}
@keyframes parts_rigth_in {
	0% {
		opacity: 0;
		transform: translateX(100px);
	}
	100% {
		opacity: 1;
		transform:  translateX(0);
	}
}
@keyframes parts_bottom_in {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform:  translateY(0);
	}
}
@keyframes parts_zoom {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}



/* --------- contents --------- */

#contents {
	position: relative;
}


/*--- chirashi ---*/
.chirashi .btn_waku{width: 500px; margin: 30px auto 0;}


/* --- news_list --- */
.news_list {margin: 6rem auto 0;} /* 90px */
.news_list h3,
.news_list ul {padding-top: 7.6rem;} /* 120px */
	.news_list li + li {margin-top: 1.2em;}
	.news_list li > a {display: flex; align-items: baseline;}
	.news_list a > p + p {margin-left: 2.727%;} /* 30px */

.news_list [class*="category"] {
	position: relative;
	z-index: 10;
	width: 8rem;
	text-align: center;
	color: #fff;
	white-space: nowrap;}
	.news_list [class*="category"]::after {
		position: absolute;
		top: 0; left: 0;
		z-index: -1;
		transform: skewX(-40deg) translateY(10%);
		content: '';
		display: block;
		width: 100%; height: 80%;
		background: #e60012;}
	.news_list .category02::after {background: #030894;}

.news_list .btn_waku {text-align: center;}
	.news_list [class*="btn_0"] {display: inline-block;}

/* --- title_backimg --- */
.title_backimg_news::after {
	left: 0;
	width: 50%;
	padding: 15% 0;
	background: url("../img/title_backimg/news.png") top center no-repeat;
	background-size: 100% auto;}

@media (min-width:641px) {
	.news_list [class*="btn_0"] {max-width: 360px;}
	.news_list .btn_01 + .btn_02 {margin-left: 3em;}

	/* --- title_backimg --- */
	.title_backimg_news::after {left: -10%;}
}
@media (min-width:1101px) {
	.news_list {max-width: 1110px;}
	.news_list a .title {
		flex: 1;
		margin-left: 3.603%;} /* 40px */
}
@media (max-width:1110px) {
	.news_list {width: 90.625%;}
	.news_list li > a {flex-wrap: wrap;}
	.news_list a .title {
		width: 100%;
		margin-left: 0;}
}
@media (max-width:640px) {
	.news_list {margin-top: 0;}
	.news_list li + li {margin-top: 2rem;}
	.news_list a > p + p {margin-left: 5.173%;} /* 30px */

	.news_list .title {
		font-size: 1.5rem;
		margin-top: 0.476em;}

	.news_list [class*="btn_0"] {width: 72.413%;}
	.news_list .btn_01 + .btn_02 {margin-top: 1.5em;}

	/* --- title_backimg --- */
	.title_backimg_news::after {
		top: 5rem;
		width: 60%;}
}

/* --- banner --- */
.banner {
	padding-top: 8em;
}
.banner__list {
	width: 90.625%;
	max-width: 800px;
	margin: 0 auto;
}
.banner__link img {
	max-width: 100%;
	height: auto;
}
@media (max-width:640px) {
.banner {
	padding-top: 5em;
}
    
/*--- chirashi ---*/
.chirashi img{width: 100%;}
.chirashi .btn_waku{width: 85%;}

    
}



/* --- point --- */
.point {margin-top:  80px;}
.point h2 + div {margin-top:  4rem;}
.point h2.mds_sankac::before {border-color: rgba(250,217,226,0.5) transparent transparent transparent;}

.point > div {
	width: 90.625%;
	padding: 4rem 0 0;
	margin: 0 auto;}
	.point > div div + div {margin-top: 10rem;}
	.point > div div h3 + p {
		padding: 1em 0;
		font-size: 1.25em;
		margin-top: 1.5rem;
		background: #fff;}

.point .w_school.title_backimg_dream {margin-top: 16rem;}

.point .course {width: 100%;}
	.course h4 {font-size: 1.8rem; color: #e60012;}
	.course h4 .icon_triangle {vertical-align: sub;}
	.course h4 .icon_triangle::before {
		border-width: 0.3em 0 0.3em 0.45em;
		border-color: transparent transparent transparent #030894;}

	.course li {
    	position:relative;
		margin-top: 2.067rem;
		/* --- hihyouji220721 
		background: url("../img/index/course_image02.jpg") center no-repeat;
		background-size: 100% auto; --- */ }
		/* --- hihyouji220721 
		.course li:first-of-type {background-image: url("../img//index/course_image01.jpg");}
		.course li:last-of-type {background-image: url("../img//index/course_image03.jpg");} --- */

	.course h3 + ul {margin-top: 1rem;}
	.course h4 + p {
		margin-top: 1rem;
		font-size: 1.25em;
		padding: 1em;
		background: rgba(230,0,18,0.05);}
	.course h4 + p b {
		display: inline-block;
		padding: 0 0.3em;
		background: rgba(230,0,18,0.3);}

.point .btn_01 {margin: 0 auto;}

.course a.course__button {
    width:70%;
    margin: auto;
    padding:8px 0;
    display:block;
    text-align: center;
    position:absolute; bottom:-35px; left:0; right:0;
    transition: all 0.3s 0s ease-out;
    background:none;
    z-index:10;
}
.course a.course__button::after {
    content: '';
    width: 100%; height: 100%;
    position:absolute; top:0; left:0;
    display: block;
    border: solid 1px #e60012;
    background:#fff;
    transform: skewX(-45deg);
    z-index: -1;
}
.course a.course__button:hover {color:#fff;}
.course a.course__button:hover::after {background:#e60012;}


/* --- title_backimg --- */
.title_backimg_course::after {
	top: -6%; left: 22%;
	width: 50%;	padding: 15% 0;
	background: url("../img/title_backimg/course.png") top center no-repeat;
	background-size: 92% auto;}
.title_backimg_support::after {
	top: -35%; left: -20%;
	width: 100%;
	padding: 15% 0;
	background: url("../img/title_backimg/support.png") top center no-repeat;
	background-size: 100% auto;}
.title_backimg_dream::after {
	top: -35%; left: -10%;
	width: 100%;
	padding: 15% 0;
	background: url("../img/title_backimg/dream.png") top center no-repeat;
	background-size: 87% auto;}
@media (min-width:641px) {
	.point > div div {
		width: 48.148%;
		margin-left: auto;
		margin-right: auto;}
		.course li {
			display: flex;
			flex-direction: column;
			width: 48.148%;}

		.course h4 + p {flex: 1;}


	.support h3 + p,
	.w_school,.course h3 + p {text-align: center;}

	.point .btn_01 {max-width: 580px;}
}
@media (min-width:1081px) {
		.course li {width: 31.25%;}
}
@media (min-width:1201px) {
	.point > div {max-width: 1200px;}
}
@media (max-width:640px) {
	.point > div {padding-bottom: 0;}
		.course h4 {font-size: 2.134rem;}
		.course li {width: 100%;}
		.course li:last-child {margin-top: 3.5em;}
		.course p{text-align: center;}


	/* --- title_backimg --- */
	.title_backimg_course::after {
		top: -3%; left: -5%;
		width: 80%;}
	.title_backimg_support::after {
		top: -18%; left: -2.5%;
		width: 97%;}
	.title_backimg_dream::after {
		top: -18%; left: -8%;
		width: 90%;}

	.title_backimg_support.active::after {transition-delay: 0.5s;}
}

/* --- kyouryoku --- */
.kyouryoku h2 {font-size: 3.6rem}
.kyouryoku p {text-align: center;}
.kyouryoku .btn_02 {margin: 0 auto;}

.kyouryoku h2 + p {margin-top: 3rem;}

@media (min-width:641px) {
	.kyouryoku .btn_02 {max-width: 580px;}
}
@media (max-width:640px) {
	.kyouryoku {
		width: 90.625%;
		margin: 0 auto;}
	.kyouryoku .btn_02 {max-width: 520px;}
}

/* --- faq --- */
.faq h2 {font-size: 3.6rem;}
.faq .btn_02 {margin: 0 auto;}

.faq {
	width: 90.625%;
	margin: 0 auto;}

.faq h2 + p {
	text-align: center;
	margin-top: 3rem;}

@media (min-width:961px) {
	.faq {max-width: 960px;}
}
@media (min-width:641px) {
	.faq .btn_02 {max-width: 580px;}
}
@media (max-width:640px) {
	.faq .btn_01 {max-width: 520px;}
}

/* --- kousya --- */
.kousya {
	width: 90.625%;
	margin: 0 auto;}

.kousya h4 {
	width: 28.07%;
	font-size: 1.6rem;
	text-align: center;
	padding: 10.351% 0;}

	.mito_kou .mds_sikaku span {background: url("../img/share/back_pattern02.png");}
	.urawa_kou .mds_sikaku span {background: url("../img/share/back_pattern03.png");}

.kousya h4 + p {width: 66.666%;}
.kousya p + div {margin-top: 2em;}

.kousya > .hirt {align-items: flex-start}
.kousya > div {width: 100%;}



@media (min-width:1201px) {
	.kousya {max-width: 1200px;}
}
@media (min-width:641px) {
	.kousya > div {width: 47.5%;}
}
@media (max-width:640px) {
	.kousya > div + div {margin-top: 6rem;}
}


/* --- etcetera --- */
@media (min-width:813px) {
	/* iPhoneX縦サイズ 812px */
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;
	}
	a[href^="tel:"]:hover {
		opacity: 1;
	}
}



/* --- tokusyoku--- */
ul.hirt small{
	font-size: 16px;
}
li.fade2{
	margin-top: 100px;
}

.w_school p{
	text-align: center;
}
.w_school .btn_waku{
	width: 100%;
	text-align: center;
	margin: 50px auto 0;
}


@media (max-width:640px) {
li.fade3{display: none;}
	
	.w_school{
		margin: 0 auto;
	}
	.w_school .btn_waku .btn_01 {
	  width: 520px;
}
}





/* --- sinrosido--- */

.hirt .sinrosido{
	width: 100%;
}

.hirt .sinrosido img{
	width: 100%;
	margin-bottom: 100px;
}
.sinrosido h3{
	color: #e60012;
}
.sinrosido h4{
	margin-top: 50px;
	font-size: 1.8rem;
}
.sinrosido h4 span.muryo{
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #e60012;
  text-align:center;
  line-height: 90px;
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
  color: #fff;
}

.hirt .sinrosido  .online h4{
	margin: 10px 0 -10px 20px;
	color: #e60012
}
.sinrosido h4 + p {
		margin-top: 1rem;
		font-size: 1.25em;
		padding: 1em;
		background: rgba(230,0,18,0.05);}
.sinrosido h4 + p b {
		display: inline-block;
		padding: 0 0.3em;
		background: rgba(230,0,18,0.3);}

.hirt .sinrosido  .online{
	border: solid 5px #e60012;
	margin: 60px 0 100px 0;
	width: 100%;
	display: block;
}
.sinrosido li {
    	position:relative;
	margin-top: 2.067rem;}

.hirt .sinrosido .online p{
	background: #fff;
	margin: 0;
}

	
@media (max-width:640px) {
.hirt .sinrosido h4 {font-size: 2.134rem;}
.hirt .sinrosido li {width: 100%;}
.hirt .sinrosido li:last-child {margin-top: 3.5em;}
.hirt .sinrosido  .online{margin-bottom: 0px;}
}