@charset "utf-8";

@media screen and (max-width: 767px){
	.breadcrumbs{
		position: relative;
		z-index: 2;
	}
}

/* mvWrap */
.mvWrap{
	position: relative;
	padding-top: 70px;
	z-index: 1;
}
.mvWrap::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 940px;
	height: 296px;
	margin: auto;
	background: url(/about-kumon/method/fushigi/img/index_bg_hatena.png) no-repeat center;
	background-size: contain;
	z-index: 1;
	animation-name: c_fade;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-duration: 2s;
}
.mvWrap .pageNav li:nth-child(2n){
	margin-right: 0;
}
.mvWrap .img_01{
	position: absolute;
	top: -30px;
	right: 45px;
	width: 141px;
	animation: c_fadeInR 2s ease 1s 1 normal backwards;
}
.mvWrap .img_02{
	position: absolute;
	bottom: -60px;
	left: 60px;
	width: 139px;
	animation: c_fadeInL 2s ease 1s 1 normal backwards;
}

@media print, screen and (min-width: 768px){
	.mvWrap .mv h1{
		width: 545px;
		margin: 0 auto;
	}
	.mvWrap .mv .sub{
		width: 390px;
		margin: 30px auto 0;
	}
	.mvWrap .pageNav{
		width: 545px;
		margin: 30px auto 0;
	}
	.mvWrap .pageNav .flex{
		justify-content: center;
	}
	.mvWrap .pageNav li{
		margin: 4px 4px 0 0;
	}
	.mvWrap .pageNav li.kyoshitsu img{	width: 165px;}
	.mvWrap .pageNav li.kyozai img{ width: 86px;}
	.mvWrap .pageNav li.kyoka img{	width: 86px;}
	.mvWrap .pageNav li.gakushuho img{	width: 117px;}
}

@media screen and (max-width: 767px){
	.mvWrap{
		padding-top: 77px;
	}
	.mvWrap::after{
		width: 100%;
		height: 360px;
		top: -5px;
		background: url(/about-kumon/method/fushigi/img/index_bg_hatena_sp.png) no-repeat center;
		background-size: contain;
	}
	.mvWrap .mv{
		padding-left: 10px;
		padding-right: 10px;
		background-color: rgba(255, 255, 255, 0.6);
	}
	.mvWrap .mv .sub{
		margin-top: 20px;
	}
	.mvWrap .pageNav{
		position: relative;
		padding-top: 180px;
	}
	.mvWrap .pageNav::before{
		content: '';
		display: block;
		position: absolute;
		top: 25px;
		left: 0;
		right: 0;
		width: 100%;
		height: 154px;
		margin: auto;
		background: url(/about-kumon/method/fushigi/img/index_01_03_sp.png) no-repeat top center;
		background-size: contain;
		z-index: 1;
	}
	.mvWrap .pageNav > ul{
		position: relative;
		z-index: 2;
	}
	.mvWrap .img_01{
		top: -62px;
		left: 0;
		right: 0;
		width: 81px;
		margin: auto;
	}
	.mvWrap .img_02{
		bottom: 126px;
		left: 4%;
		width: 75px;
	}
}

@media screen and (max-width: 320px) {
	.mvWrap .pageNav{
		padding-top: 160px;
	}
}

@keyframes c_fadeInR {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes c_fadeInL {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* linkNavWrap */
.linkNavWrap{
	position: relative;
	background: #dcf4ff;
	margin: 100px auto 90px;
	padding: 20px 0 80px;
}
.linkNavWrap::before{
	content: '';
	display: block;
	position: absolute;
	top: -145px;
	left: 0;
	width: 100%;
	height: 165px;
	background: url(/about-kumon/method/fushigi/img/index_bg_dot.png) repeat-x top center;
}
.linkNavWrap .hukidashiList{
	position: relative;
	z-index: 2;
}
.linkNavWrap .hukidashiBox{
	margin-top: 20px;
}
.linkNavWrap .hukidashiBox a{
	position: relative;
	width: 100%;
	background-color: #fff;
	border: 3px solid #1a6cc1;
	border-radius: 6px;
}
.linkNavWrap .hukidashiBox a::before{
	content: '';
	display: block;
	background-color: #1a6cc1;
	border-radius: 50%;
	position: absolute;
	width: 35px;
	height: 35px;
	bottom: 17px;
	right: 17px;
	z-index: 1;
}
.linkNavWrap .hukidashiBox a::after{
	content: '';
	display: block;
	background: url(/common_2019/img/arrow/arrow_wh_r.svg) no-repeat;
	background-size: contain;
	position: absolute;
	width: 9px;
	height: 16px;
	bottom: 26px;
	right: 29px;
	z-index: 2;
}
.linkNavWrap .hdBlock{
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 80px;
	border-radius: 5px 5px 0 0;
}
.linkNavWrap .hdBlock::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 40px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #cefbff;
	border-bottom: 0;
	border-right: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}
.linkNavWrap .kyoshitsu .hdBlock{	background-color: #cefbff;}
.linkNavWrap .kyozai .hdBlock{ background-color: #ffd0d0;}
.linkNavWrap .kyoka .hdBlock{	background-color: #eae0ff;}
.linkNavWrap .gakushuho .hdBlock{	background-color: #fff7c1;}
.linkNavWrap .kyoshitsu .hdBlock::after{	border-top-color: #cefbff;}
.linkNavWrap .kyozai .hdBlock::after{ border-top-color: #ffd0d0;}
.linkNavWrap .kyoka .hdBlock::after{	border-top-color: #eae0ff;}
.linkNavWrap .gakushuho .hdBlock::after{	border-top-color: #fff7c1;}
.linkNavWrap .hdBlock .txt img{
	vertical-align: bottom;
}
.linkNavWrap .hdBlock .person{
	position: absolute;
	bottom: 0;
	right: 5px;
	width: 130px;
	z-index: 2;
}
.linkNavWrap .contsBlock{
	padding: 50px 1.5em 40px;
	text-align: center;
}
.linkNavWrap .contsBlock .em{
	font-size: 28px;
	line-height: 1.42;
}
.linkNavWrap .contsBlock .img{
	margin-top: 25px;
}

@media print, screen and (min-width: 768px){
	.linkNavInner{
		position: relative;
		z-index: 2;
	}
	.linkNavInner::after{
		content: '';
		display: block;
		position: absolute;
		top: -331px;
		right: 24px;
		width: 249px;
		height: 358px;
		background: url(/about-kumon/method/fushigi/img/index_01_03.png) no-repeat top right;
		z-index: 1;
	}
	.linkNavWrap .hukidashiList{
		display: flex;
		flex-wrap: wrap;
	}
	.linkNavWrap .hukidashiBox{
		display: flex;
		width: 470px;
		margin-right: 20px;
	}
	.linkNavWrap .hukidashiBox:nth-child(-n+2){
		margin-top: 0;
	}
	.linkNavWrap .hukidashiBox:nth-child(2n){
		margin-right: 0;
	}
	.linkNavWrap .hukidashiBox a{
		display: flex;
		flex-direction: column;
	}
	.linkNavWrap li.kyoshitsu .hdBlock .person{	width: 130px;}
	.linkNavWrap li.kyozai .hdBlock .person{ width: 102px;}
	.linkNavWrap li.kyoka .hdBlock .person{	width: 102px;}
	.linkNavWrap li.gakushuho .hdBlock .person{	width: 108px;}
	.linkNavWrap li.kyoshitsu .hdBlock .txt img{ width: 178px;}
	.linkNavWrap li.kyozai .hdBlock .txt img{	width: 90px;}
	.linkNavWrap li.kyoka .hdBlock .txt img{ width: 90px;}
	.linkNavWrap li.gakushuho .hdBlock .txt img{ width: 123px;}
	.linkNavWrap .contsBlock .img{
		display: flex;
		align-items: center;
	}
}


@media screen and (max-width: 767px){
	.linkNavWrap{
		margin: 70px auto 70px;
		padding: 10px 0 70px;
	}
	.linkNavWrap::before{
		height: 153px;
		top: -143px;
		background: url(/about-kumon/method/fushigi/img/index_bg_dot_sp.png) repeat-x top center;
		background-size: 24px auto;
	}
	.linkNavWrap .hukidashiBox:first-child{
		margin-top: 0;
	}
	.linkNavWrap .hukidashiBox a{
		display: block;
	}
	.linkNavWrap .hukidashiBox a::before{
		width: 30px;
		height: 30px;
		bottom: 12px;
		right: 12px;
	}
	.linkNavWrap .hukidashiBox a::after{
		width: 8px;
		height: 13px;
		right: 22px;
		bottom: 21px;
	}
	.linkNavWrap .contsBlock{
		padding: 25px 1em;
	}
	.linkNavWrap li.kyoshitsu .hdBlock .person{	width: 102px;}
	.linkNavWrap li.kyozai .hdBlock .person{ width: 82px;}
	.linkNavWrap li.kyoka .hdBlock .person{	width: 82px;}
	.linkNavWrap li.gakushuho .hdBlock .person{	width: 82px;}
	.linkNavWrap li.kyoshitsu .hdBlock .txt img{ width: 124px;}
	.linkNavWrap li.kyozai .hdBlock .txt img{	width: 63px;}
	.linkNavWrap li.kyoka .hdBlock .txt img{ width: 63px;}
	.linkNavWrap li.gakushuho .hdBlock .txt img{ width: 87px;}
	.linkNavWrap .hdBlock{
		height: 60px;
	}
	.linkNavWrap .hdBlock .person{
		width: 100px;
	}
	.linkNavWrap .contsBlock .em{
		font-size: 21px;
	}
	.linkNavWrap .contsBlock .img{
		margin-top: 20px;
	}
}

@media screen and (max-width: 320px) {
	.linkNavWrap li.kyoshitsu .hdBlock .person{	width: 75px;right: 0;}
	.linkNavWrap li.kyozai .hdBlock .person{ width: 62px;}
	.linkNavWrap li.kyoka .hdBlock .person{	width: 62px;}
	.linkNavWrap li.gakushuho .hdBlock .person{	width: 62px;}
}