@charset "UTF-8";

/* common
========================= */
section{
	margin-bottom: 5rem;
}
/*PC*/
@media (min-width: 751px){
	section{
		margin-bottom: 10rem;
	}
}

.cont-wrap{
	background: #fff;
	-webkit-border-radius: 2rem;
	        border-radius: 2rem;
	padding: 3rem 2rem;
	position: relative;
}
/*PC*/
@media (min-width: 751px){
	.cont-wrap{
		padding: 6rem;
	}
}

h2{
	font-size: 2.6rem;
	line-height: 1.4;
	margin-bottom: 3rem;
}

h3{
	color: #e2761e;
	font-size: 2rem;
	line-height: 1.4;
	font-feature-settings: "palt";
}
/*PC*/
@media (min-width: 751px){
	h2{
		font-size: 3.6rem;
		margin-bottom: 8rem;
	}
	h3{
		font-size: 2.6rem;
	}
}

span.text-line{
	border-bottom: #ffe1c1 5px solid;
}

/* main visual
========================= */

#mainvisual{
	width: 90%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4rem;
}
#mainvisual img{
	-webkit-border-radius: 3rem;
	        border-radius: 3rem;
}

/*PC*/
@media (min-width: 751px){
	#mainvisual{
		margin-bottom: 8rem;
	}
}

/* greeting
========================= */

section#greeting .alph{
	position: absolute;
	left: -1rem;
	top: -1rem;
	width: calc(236 / 770 * 100vw);
	max-width: 236px;
}
section#greeting .cont-wrap{
	box-shadow: 0px 3px 0px 0px rgba(23, 24, 24, 0.2);
}

/*PC*/
@media (min-width: 751px){
	section#greeting .alph{
		left: -3rem;
		top: -3rem;
	}
	section#greeting .ph{
		width: 347px;
		margin-bottom: 0;
	}
}


/* result
========================= */

section#result{
	background: #fffcf8;
	padding: 4rem 0;
	margin-bottom: 0;
}
section#result h2{
	margin-bottom: 6rem;
}
section#result .cont-wrap{
	padding-top: 6rem;
	border: 2px solid #3d342c;
}
section#result .cont-wrap.top-large{
	padding-top: 8rem;
}
section#result .ph{
	width: calc(400 / 770 * 100vw);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}
section#result .top-area{
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 2px dashed #3d342c;
}
section#result .badge{
	position: absolute;
	top: -30px;
	right: -10px;
}
section#result .badge img{
	height: 80px;
	width: auto;
}
section#result .badge span{
	display: block;
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1;
	padding-right: 1.5rem;
}
section#result .res-graph{
	margin-top: 1rem;
}

/*PC*/
@media (min-width: 751px){
	section#result{
		padding: 8rem 0;
	}
	section#result h2{
		margin-bottom: 8rem;
	}
	section#result .cont-wrap.top-large{
		padding-top: 6rem;
	}
	section#result .ph{
		width: 210px;
		margin-left: 0;
		margin-right: auto;
		margin-bottom: 0;
	}
	section#result .top-area{
		padding-bottom: 3rem;
		margin-bottom: 3rem;
	}
	section#result .tit-area{
		width: calc( 100% - 250px);
	}
	section#result .badge{
		top: -30px;
		right: 10px;
	}
	section#result .badge img{
		height: 130px;
		width: auto;
	}
	section#result .res-graph{
		max-width: 880px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1.5rem;
	}
}

/* point & special
========================= */

section#point,
section#special{
	background: url("../img/orange-bg.jpg") repeat;
	-webkit-background-size: 56px 56px;
	     -o-background-size: 56px 56px;
	        background-size: 56px 56px;
	padding: 4rem 0;
}
section#point h2{
	max-width: 806px;
	color: #FFF;
	background: url("../img/point-tit.png") no-repeat 50% bottom;
	-webkit-background-size: 100%;
	     -o-background-size: 100%;
	        background-size: 100%;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}
section#point h2 p.f-min{
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 160%;
	font-weight: bold;
}
section#point h2 p.f-min span{
	color: #fff000;
	border-bottom: #FFF000 8px solid;
}
section#point .point-num{
	width: calc(200 / 770 * 100vw);
	max-width: 108px;
	margin-left: auto;
	margin-right: auto;
}
section#special .special-num{
	width: calc(260 / 770 * 100vw);
	max-width: 164px;
}
section#special h2{
	color: #FFF;
	display: flex;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	line-height: 1.6;
}
section#special h2 .kira{
	width: 63px;
}
section#special h2 .f-large{
	color: #fff000;
	border-bottom: #FFF000 8px solid;
}

/*PC*/
@media (min-width: 751px){
	section#point,
	section#special{
		padding: 8rem 0;
	}
	section#point .point-wrap{
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
	    -webkit-align-items: stretch;
	            align-items: stretch;
	}
	section#point .point-wrap li.cont-wrap{
		width: calc( ( 100% - 40px ) / 2 );
		padding: 4rem;
		margin-bottom: 0;
	}
	section#special .point-wrap li.cont-wrap{
		padding: 4rem;
	}
}


/* accordion
========================= */

.accordion{
	background: #FFF;
	-webkit-border-radius: 1.5rem;
	        border-radius: 1.5rem;
}
.ac-title{
	position: relative;
	color: #3D342C;
	padding: 1.5rem;
	padding-right: 3rem;
	transition: all .5s;
	font-size: 1.8rem;
}
.ac-title .arrow{
	transform: rotate(135deg);
	transition: 0.3s;
	border-top: solid 2px #595890;
	border-right: solid 2px #595890;
}
#lesson-ebay .arrow{
	border-top: solid 2px #c7809b;
	border-right: solid 2px #c7809b;
}
#lesson-mind .arrow{
	border-top: solid 2px #58905c;
	border-right: solid 2px #58905c;
}
.ac-title.open .arrow{
	transform: rotate(-45deg);
}
.ac-text{
	padding: 0 2rem 2rem;
	display: none;
}
.ac-text span{
	border-bottom: #FFF000 4px solid;
}
.ac-box{
	padding: 1.5rem;
	background: #F5EADF;
	-webkit-border-radius: 1.5rem;
	        border-radius: 1.5rem;
}
.ac-box h4{
	color: #c7809b;
}

/*PC*/
@media (min-width: 751px){
	.ac-title:hover{
		cursor: pointer;
		color: #595890;
		transition: all .5s;
	}
	#lesson-ebay .ac-title:hover{
		color: #c7809b;
	}
	#lesson-mind .ac-title:hover{
		color: #58905c;
	}
	.ac-title{
		padding: 3rem;
		font-size: 2.2rem;
	}
	.ac-text{
		padding: 0 3rem 3rem;
	}
	.ac-box{
		padding: 2rem;
		background: #F5EADF;
		-webkit-border-radius: 1.5rem;
		        border-radius: 1.5rem;
	}
}

/* lesson
========================= */
.lesson-wrap{
	padding: 2rem;
	background: #595890;
	-webkit-border-radius: 2rem;
	        border-radius: 2rem;
}
#lesson-ebay .lesson-wrap{
	background: #c7809b;
}
#lesson-mind .lesson-wrap{
	background: #58905c;
}
.lesson-wrap .star{
	width: calc(100 / 770 * 100vw);
	max-width: 100px;
	margin-left: auto;
	margin-right: auto;
}
.lesson-wrap h2{
	color: #FFF;
}

/*PC*/
@media (min-width: 751px){
	.lesson-wrap{
		padding: 4rem;
		-webkit-border-radius: 3rem;
	        border-radius: 3rem;
	}
	.lesson-wrap h2{
		font-size: 4rem;
		margin-bottom: 4rem;
	}
}

/* mastar-area
========================= */
.master-area{
	position: relative;
	background: #252321;
}
.master-area h3{
	color: #fff000;
}
.master-area .text-area{
	padding: 3rem 0;
}
.master-area .text{
	color: #FFF;
}
.master-area:before{
	position: absolute;
	left: 50%;
	margin-left: -15px;
	margin-top: -30px;
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}
#master01:before{
	border-bottom: 30px solid #313527;
}
#master02:before{
	border-bottom: 30px solid #373e47;
}
#master03:before{
	border-bottom: 30px solid #4f2c3a;
}
section#master03{
	margin-bottom: 0;
}
/*PC*/
@media (min-width: 751px){
	.master-bg{
		opacity: 0.8;
		padding: 6rem 0;
		min-height: 480px;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
	}
	#master01 .master-bg{
		background: url("../img/lesson01-bg_pc.png") no-repeat right 25%;
		-webkit-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	#master02 .master-bg{
		background: url("../img/lesson02-bg_pc.png") no-repeat left 25%;
		-webkit-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	#master03 .master-bg{
		background: url("../img/lesson03-bg_pc.png") no-repeat right top;
		-webkit-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	.master-area .text-area{
		padding: 0;
	}
	.master-area:before{
		margin-left: -30px;
		margin-top: -40px;
		border-left: 60px solid transparent;
		border-right: 60px solid transparent;
	}
	#master01:before{
		border-bottom: 40px solid #313527;
	}
	#master02:before{
		border-bottom: 40px solid #373e47;
	}
	#master03:before{
		border-bottom: 40px solid #4f2c3a;
	}
	#master02 h3,
	#master02 .text{
		margin-left: auto;
		margin-right: 0;
	}
}
/*PC*/
@media (min-width: 1000px){
	.master-area .text-area h3,
	.master-area .text-area .text{
		max-width: calc(600 / 1440 * 100vw);
	}
}

/* order
========================= */

section#order .documment{
	background: #FFF;
	padding: 1.5rem;
	height: 400px;
	overflow: hidden;
	-webkit-border-radius: 5px;
		        border-radius: 5px;
	border: 1px solid #ddd;	
}
section#order .documment .text{
	overflow: scroll;
	height: 100%;
}
section#order .documment .text span{
	display: block;
	text-align: center;
}
section#order label{
	font-weight: bold;
	display: block;
}
section#order .order-area{
	transition: all .5s;
	margin-top: 3rem;
}
section#order a.btn.btn-or{
	background: #e2761e;
}
section#order .order-area a.btn{
	pointer-events: none;
	background: #6e6e6e;
	transition: all .5s;
}
section#order .order-area.open a.btn{
	pointer-events: auto;
}
section#order .order-area.open a.btn.btn-nor{
	background: #379b37;
}
section#order .order-area.open a.btn.btn-pr{
	background: #e2761e;
}
section#order .order-area.open a.btn.btn-cash{
	background: #5b5991;
}
/*PC*/
@media (min-width: 751px){
	section#order .documment{
		padding: 3rem;
	}
	section#order label{
		font-size: 1.8rem;
	}
	section#order label:hover{
		cursor: pointer;
	}
	section#order .btn-or{
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
	section#order .order-check{
		-webkit-justify-content: center;
		        justify-content: center;
	}
	section#order .order-check label{
		margin-bottom: 0;
	}
	section#order .order-area{
		margin-top: 6rem;
	}
	section#order .order-area .dispflex{
		-webkit-justify-content: center;
		        justify-content: center;
	}
	section#order .order-area .btn{
		width: 100%;
		max-width: 360px;
		margin-bottom: 0;
	}
}

/* teacher
========================= */

section#teacher li h3{
	display: flex;
	-webkit-align-items: center;
	        align-items: center;
	gap: 20px;
}
section#teacher li .ph{
	width: 100px;
}
section#teacher .arrow{
	border-top: solid 2px #e2761e;
	border-right: solid 2px #e2761e;
}
/*PC*/
@media (min-width: 751px){
	section#teacher li .ph{
		width: 120px;
	}
}

/* message
========================= */

section#message{
	padding: 4rem 0;
	background: #fff1de;
	margin-bottom: 0;
}
section#message li{
	position: relative;
	margin-bottom: 6rem;
	position: relative;
 	box-shadow: 0px 0px 9px 1px rgba(23, 24, 24, 0.1);
}
section#message li:nth-of-type(odd):after{
	content: "";
	display: block;
	width: 44px;
	height: 38px;
	background: #FFF;
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	position: absolute;
	bottom: -35px;
	right: 44px;
}
section#message li:nth-of-type(even):after{
	content: "";
	display: block;
	width: 44px;
	height: 38px;
	background: #FFF;
	clip-path: polygon(0 0, 100% 100%, 100% 0);
	position: absolute;
	bottom: -35px;
	left: 44px;
}

/*PC*/
@media (min-width: 751px){
	section#message{
		padding: 8rem 0;
	}
	section#message .cont-wrap{
		padding: 4rem;
	}
}