@charset "UTF-8";
/* CSS Document */
div.main::before{display:none;}
div.main::after{
	position:absolute;
	content:"";
	right:0;
	bottom:min(2.604vw,50px);
	display:inline-block;
	width:min(17.7vw,340px);
	height:min(14.635vw,281px);
	background:url(../img/learn/svg/main-i.svg) center/contain no-repeat;
}
div.title{
	position:absolute;
	width:min(52.08vw,1000px);
	left:50%;
	transform:translateX(-50%);
	bottom:min(3.906vw,75px);
	text-align:right;
}
div.title h1{
	color:#fff;
	font-size:clamp(40px,3.125vw,60px);
	line-height:1.2;
	font-weight:600;
}
div.title p{
	color:#fff;
	font-size:clamp(14px,1.25vw,24px);
	font-weight:600;
}
@media screen and (max-width:768px){

div.main::after{
	bottom:min(15.625vw,120px);
	width:clamp(120px,31.25vw,240px);
	height:clamp(98.94px,25.781vw,198px);
}	
div.title{
	width:100%;
	left:15px;
	right:auto;
	transform:translateX(0);
	bottom:min(6.51vw,50px);
	text-align:left;
}
div.title h1{
	font-size:clamp(32px,8.33vw,64px);
	line-height:1.5;
}
div.title p{font-size:clamp(14px,3.645vw,28px);}

}

div.col00 h2{color:#2C353C;}
div.col01 h2{color:#A8513E;}
div.col02 h2{color:#5A7D65;}
div.col03 h2{color:#245A84;}
div.col04 h2{color:#245A84;}

.min{font-size:14px;}
.center{text-align:center;}
.txt-right{text-align:right;}

a.apply-btn{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:540px;
	height:100px;
	color:#fff;
	font-size:24px;
	font-weight:600;
	line-height:1;
	margin:30px auto 0;
	border-radius:20px;
	background:#8E4362;
	box-shadow:0 8px 0 #532136;
	transform:translateY(0);
	transition:0.3s ease;
}
a.apply-btn:hover{
	box-shadow:0 1px 0 #532136;
	transform:translateY(7px);
}

@media screen and (max-width:768px){

a.apply-btn{
	width:420px;
	height:80px;
	font-size:18px;
	border-radius:10px;
}

}

/* movie 動画 */
div.mov-box.simple-type{
	position:relative;
	width:710px;
	height:400px;
	overflow:hidden;
	border-radius:20px;
	margin:0 auto;
}
* + div.mov-box.simple-type{margin:50px auto 0;}
div.mov-box.simple-type::before,
div.mov-box.simple-type::after{display:none;}
div.mov-box.simple-type video{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
}

/* google map */
div.map-box.simple-type{
	width:738px;
	height:420px;
	margin:15px auto 0;

}
div.map-box.simple-type div{
	position:relative;
	width:100%;
	height:100%;
	border-radius:20px;
	overflow:hidden;
}
div.map-box.simple-type::before{
	width:calc(100% - 15px);
	height:calc(100% - 15px);
	right:-15px;
	bottom:-15px;
	background:#2C353C;
}
div.map-box.simple-type::after{display:none;}
div.map-box.simple-type + p{margin-top:25px;}

@media screen and (max-width:768px){

div.mov-box.simple-type {
	height:auto;
	border-radius:0;
}

div.map-box.simple-type{
	width:100%;
	height:auto;
}
div.map-box.simple-type div{
	width:100%;
	height:0;
	padding-top:56.25%;
	border-radius:10px;
}
div.map-box.simple-type::before{
	width:calc(100% - 5px);
	height:calc(100% - 5px);
	right:-5px;
	bottom:-5px;
}

}

/* トップコンテンツ */
div.learn-box{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	align-items:center;
}
div.learn-box div.img{width:500px;}
div.learn-box div.txt{width:calc(100% - 550px);}
div.learn-box div.txt p{
	font-size:18px;
	font-weight:500;
	line-height:2;
}

@media screen and (max-width:768px){

div.learn-box{flex-direction:column;}
div.learn-box div.img,
div.learn-box div.txt{width:auto;}
div.learn-box div.txt{margin-top:15px;}

div.learn-box div.txt p{
	font-size:16px;
	line-height:1.6;
}

}


/* Why Study the Koto? */
ul.study-list{
	position:relative;
	padding:50px;
	background:#fff;
	border-radius:20px;
}
ul.study-list::after{
	position:absolute;
	content:"";
	display:inline-block;
	bottom:-100px;
	right:-100px;
	width:320px;
	height:270px;
	background:url(../img/learn/illust01.png) center/contain no-repeat;
}
ul.study-list li{
	position:relative;
	font-size:18px;
	font-weight:500;
	padding-left:1.5em;
}
ul.study-list li::before{
	position:absolute;
	content:"●";
	left:0;
	color:#A8513E;
}
ul.study-list li + li{margin-top:15px;}

@media screen and (max-width:768px){

ul.study-list{
	padding:30px;
	border-radius:10px;
}	
ul.study-list::after{
	bottom:-50px;
	right:-20px;
	width:160px;
	height:135px;
}
ul.study-list li{font-size:16px;}

}

/* Lessons for All Levels */
div.lessonlevel-box{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
div.lessonlevel-box div.img{width:calc(100% - 515px);}
div.lessonlevel-box div.txt{width:500px;}
div.lessonlevel-box div.img{
	background:#5A7D65;
	border-radius:20px;
	padding-bottom:15px;
}
div.lessonlevel-box div.img img{
	border-radius:20px;
}
div.lessonlevel-box div.txt div{
	padding:50px;
	background:#fff;
	border-radius:20px;
}
div.lessonlevel-box div.txt div + div{margin-top:15px;}
div.lessonlevel-box div.txt div h3{
	color:#5A7D65;
	font-size:20px;
	font-weight:600;
}
div.lessonlevel-box div.txt div p{
	font-weight:500;
	padding-top:5px;
}

@media screen and (max-width:768px){

div.lessonlevel-box{flex-direction:column;}
div.lessonlevel-box div.img,
div.lessonlevel-box div.txt{width:auto;}	
div.lessonlevel-box div.txt{margin-top:15px;}

div.lessonlevel-box div.img{border-radius:10px;}
div.lessonlevel-box div.img img{border-radius:10px;}

div.lessonlevel-box div.txt div{
	padding:30px;
	border-radius:10px;
}

}


/* How Lessons Work */
div.how-lesson-box{
	position:relative;
	padding:55px 50px 50px;
	background:#fff;
	border-radius:20px;
}
div.how-lesson-box + div.how-lesson-box{margin-top:15px;}
div.how-lesson-box::before{
	position:absolute;
	content:"";
	top:0;
	left:50%;
	transform:translateX(-50%);
	display:inline-block;
	width:50%;
	height:10px;
	background:#245A84;
	border-radius:5px;
}
div.how-lesson-box::after{
	position:absolute;
	right:-15px;
	bottom:-5px;
	content:"";
	display:inline-block;
	width:150px;
	height:150.2px;
	background:url(../img/learn/svg/illust02.svg) center/contain no-repeat;
	z-index:1;
}

div.how-lesson-box ul.check li{
	position:relative;
	font-weight:500;
	padding-left:40px;
}
div.how-lesson-box ul.check li + li{margin-top:30px;}
div.how-lesson-box ul.check li::before{
	position:absolute;
	content:"";
	display:inline-block;
	left:0;
	top:8px;
	width:27.02px;
	height:25px;
	background:url(../img/learn/svg/check-i.svg) center/contain no-repeat;
}
div.how-lesson-box ul.check li span{
	display:block;
	color:#245A84;
	font-size:24px;
	font-weight:600;
}

div.how-lesson-box.recital-type::before{background:#8E4362;}
div.how-lesson-box.recital-type::after{display:none;}

div.how-lesson-box.recital-type{
	display:flex;
	justify-content:space-between;
	align-items:center;
	border:2px solid #8E4362;
}
div.how-lesson-box.recital-type div.img{
	width:100px;
	text-align:center;
}
div.how-lesson-box.recital-type div.img img{
	width:87.1px;
	height:92.74;
}
div.how-lesson-box.recital-type div.txt{width:calc(100% - 150px);}

div.how-lesson-box.recital-type h3{
	color:#8E4362;
	font-size:24px;
	font-weight:600;
}
div.how-lesson-box.recital-type p{font-weight:500;}

@media screen and (max-width:768px){

div.how-lesson-box{
	padding:35px 30px 30px;
	border-radius:10px;
}
div.how-lesson-box::after{
	right:-10px;
	top:-10px;
	bottom:auto;
	width:75px;
	height:75.1px;
}
div.how-lesson-box ul.check li + li{margin-top:15px;}
div.how-lesson-box ul.check li{padding-left:30px;}
div.how-lesson-box ul.check li::before{
	top:6px;
	width:20.02px;
	height:18.52px;
}
div.how-lesson-box ul.check li span{font-size:18px;}

div.how-lesson-box.recital-type{
	flex-direction:column;
	padding-top:45px;
}
div.how-lesson-box.recital-type div.txt{
	width:100%;
	margin-top:15px;
}
div.how-lesson-box.recital-type h3{font-size:18px;}

}


/* About Your Teacher */
p.teacher-read{
	color:#A8513E;
	font-weight:600;
}
div.teacher-wrap{margin:30px auto 0;}
div.teacher-wrap + div.teacher-wrap{margin-top:50px;}
div.teacher-message{
	position:relative;
	padding:50px;
	margin:50px auto 0;
	background:#fff;
	border-radius:20px;
}
div.teacher-message h3{
	position:absolute;
	top:-25px;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	font-size:24px;
	font-weight:600;
	line-height:1;
	width:180px;
	height:50px;
	background:#A8513E;
	border-radius:25px 25px 0 25px;
}
div.teacher-message p{
	font-weight:500;
	line-height:2;
}
div.teacher-message p + p{margin-top:15px;}

@media screen and (max-width:768px){

div.teacher-wrap + div.teacher-wrap{margin-top:50px;}	
div.teacher-message{
	padding:40px 30px 30px;
	margin-top:30px;
	border-radius:10px;
}
div.teacher-message h3{
	top:-20px;
	font-size:18px;
	width:150px;
	height:40px;
	border-radius:20px 20px 0 20px;
}

}

/* Voices from Students */
div.studentsvoice-box + div.studentsvoice-box{margin-top:50px;}
div.studentsvoice-box h3.hukidashi{
	position:relative;
	color:#fff;
	font-size:20px;
	font-weight:600;
	background:#5A7D65;
	padding:30px 50px;
	border-radius:20px;
}
div.studentsvoice-box h3.hukidashi::after{
	position:absolute;
	content:"";
	bottom:-50px;
	left:75px;
	border:10px solid transparent;
	border-top:60px solid #5A7D65;
	transform:rotate(-45deg);
}
div.studentsvoice-box div.txt{
	padding:50px 50px 30px;
	background:#fff;
	border-radius:20px;
	margin:15px auto 0;
}
div.studentsvoice-box div.txt p{
	font-size:18px;
	font-weight:500;
	line-height:2;
}
div.studentsvoice-box div.txt p + p{margin-top:15px;}

@media screen and (max-width:768px){

div.studentsvoice-box + div.studentsvoice-box{margin-top:30px;}
div.studentsvoice-box h3.hukidashi{
	font-size:16px;
	padding:15px 30px;
	border-radius:10px;
}	
div.studentsvoice-box h3.hukidashi::after{
	bottom:-40px;
	border-top:50px solid #5A7D65;
}
div.studentsvoice-box div.txt{
	padding:30px 30px 30px;
	border-radius:10px;
}
div.studentsvoice-box div.txt p{font-size:16px;}

}


/* fee */
div.area.bk-w{
	background:#fff;
	padding:75px 15px;
	margin:100px auto 0;
}
div.learnfee-box div{
	display:flex;
	flex-wrap:wrap;
	padding:30px;
	border-bottom:1px solid #2C353C;
}
div.learnfee-box div.label{
	width:100%;
	background:#245A84;
}
div.learnfee-box div.label p{color:#fff;}

div.learnfee-box p{
	font-size:24px;
	font-weight:600;
}
div.learnfee-box p.heading{width:200px;}

div.learnfee-box + p{
	font-weight:600;
	margin-top:15px;
}

@media screen and (max-width:768px){

div.area.bk-w{
	padding:50px 15px;
	margin-top:50px;
}	
div.learnfee-box div{
	flex-direction:column;
	padding:15px;
}
div.learnfee-box p{font-size:18px;}
div.learnfee-box p.heading{width:auto;}

div.learnfee-box + p{text-align:left;}	

}


/* Frequently Asked Questions (FAQ) */
div.qa-box > p:nth-child(n + 3)::before{display:none;}
div.qa-box ul{
	position:relative;
	color:#C08E39;
	font-size:18px;
	font-weight:500;
	padding-left:45px;
	margin-top:15px;
}
div.qa-box ul.dot li{
	position:relative;
	padding-left:1.25em;
}
div.qa-box ul.dot li::before{
	position:absolute;
	content:"●";
	left:0;
}
div.qa-box ul.num li{
	position:relative;
	counter-increment: number 1;
	padding-left:1.25em;
}
div.qa-box ul.num li::before{
	position:absolute;
	content:counter(number)'.';
	top:0;
	left:0;
}

@media screen and (max-width:768px){

div.qa-box ul.dot li,
div.qa-box ul.num li{
	font-size:16px;
	font-weight:400;
}

}