@chaeset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}

/* ここから */
body {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	color:#605e5c;
	font-size: 20px;
	line-height:1.6;
	font-family: 'Noto Sans JP', sans-serif, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}
p,h1,h2,h3,h4,h5,h6 {margin: 0;}
ul li {list-style:none;}
img { vertical-align: bottom;}
a:hover { opacity: 0.8;　}
a { text-decoration:none; }

/* レイアウト */
.spbr { display:none; }
.pcbr { display:block; }
.lg { font-size:150%; }
.sm { font-size:80%; }
.rd { color:#ff0000; }
.container { width:1170px; margin:0 auto; }
.clear { clear:both; }
.sp {display: none;}
.clearfix:after {content: "";display: block;clear: both;}
.emp {padding-bottom: 4px;background: linear-gradient(transparent 50%, #fffd9b 0%);font-weight:800;}
.js-marker { display: inline;position: relative;background-image: linear-gradient(90deg, #ffff66, #ffff66);  background-repeat: no-repeat;background-position: bottom left;background-size: 0 30%;transition: all 1s ease-in-out;font-weight: bold;}
.js-marker.inview {background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */}

/* ボタン */
.btn1{display:block;width:300px;margin:30px auto 10px auto;background-color:#08a597;color:#ffffff;border-radius:4px;padding:5px 10px;text-align:center;font-weight:600;}

/* header */
header {margin: 0 auto; padding:15px 0; }
header img {  float: left;}
header a {
	width: 32.47%;
	float: right;
	font-size: 16px;
	padding: 1% 0;
	background-color: #eeeeee;
	display: block;
	border-radius: 5px;
	text-align: center;
	color:#333333;
}
#timer {
    background-color: #f36683;
    text-align: center;
    color: #ffffff;
    font-size: 120%;
    padding:10px;
    font-weight: bold;
	line-height:1.2;
}
#timer span{
	font-size:80%;
	margin-left:5px;
	background-color:#ffffff;
	padding:1px 6px;
	border-radius:5px;
	color:#f36683;
}

/* mainvisual */
#mainvisual{background-image:url("./img/h1_background.jpg");height: 100vh;background-size: 100%;display: flex;justify-content: center;align-items: center;}
#mainvisual > div{width:90vw;height:90vh;border:10px solid #008c7b;}
#mainvisual p{position: absolute;top:45%;left:0;font-size: 200%;text-align:center;font-weight: 900;background-color:#008c7b;color:#fff;padding:20px 20px 20px 30px;}
#mainvisual p span{font-size:60%;letter-spacing: 5px;}
#mainvisual a {font-size:2rem;font-weight:900;padding-top: 60px;position: absolute;bottom: 20px;left: 50%;z-index: 2;display: inline-block;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);text-decoration: none;color: #fff;}
#mainvisual a span {position: absolute;top: 0;left: 50%;width: 24px;height: 24px;margin-left: -12px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: sdb 1s infinite;animation: sdb 1s infinite;box-sizing: border-box;}
@-webkit-keyframes sdb {
  0% {-webkit-transform: rotate(-45deg) translate(0, 0);}
  20% {-webkit-transform: rotate(-45deg) translate(-10px, 10px);}
  40% {-webkit-transform: rotate(-45deg) translate(0, 0);}
}
@keyframes sdb {
  0% {transform: rotate(-45deg) translate(0, 0);}
  20% {transform: rotate(-45deg) translate(-10px, 10px);}
  40% {transform: rotate(-45deg) translate(0, 0);}
}

/* apply */
.apply {text-align:center;overflow: visible;width: 100%;height: 100%;border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;padding: 20px 0;}
.apply p {font-size:150%;font-weight:900;margin-bottom:20px;}
.apply p span{color:#D11516;}	
.apply img {animation: dokidoki 1s infinite;}
@keyframes dokidoki {
    0% {
        transform: scale(1.05)
    }
    5% {
        transform: scale(1)
    }
    95% {
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.05)
    }
}

/* intro */
#intro { background-image:url("./img/intro_background.jpg");padding:100px 0 50px 0;background-size:cover;text-align:center; }
#intro div { background-color: rgba(255,255,255,0.6);margin-top:30px;padding: 30px 10px;border-radius: 5px;line-height: 2;font-size: 1.2rem;}
#intro div span{font-size:1.5rem;font-weight:bold;}
#intro h2 {font-size:200%;}
#intro h1 {font-size:400%;font-weight:900;letter-spacing: 5px;border-bottom: 2px solid #605e5c;display:inline-block;}
#intro h1 span {color:#D2373A;}
#intro > p {margin-top:30px;}
#intro #intro_target {background-color:#008c7b;color:#ffffff;padding:5px 10px;border-radius:60px;text-align:center;width:200px;margin:20px auto 0 auto;}
#intro #intro_target span{font-size:1.5rem;font-weight:900;}

/* howto */
#howto {background-color:#f4f8fa63;padding:50px 0;}
#howto h2 {text-align:center;font-weight:900;margin-bottom:20px;font-size: 250%;}
#howto > p {text-align:center;}
#howto > div {margin:70px auto;}
#howto > div h3{font-size: 200%;margin-bottom: 50px;font-weight: 600;letter-spacing: 5px;line-height:2;}
#howto > div h3 span {padding:4px 5px 6px 8px;border:1px solid #333;font-weight:900;margin-right:5px;border-radius:2px;background-color: #FFF;}
#howto > div > div {display:flex;}
#howto > div > div p{margin: 0 0 0 30px;line-height: 2;}

/* jisseki */
#jisseki{background-image:url("https://mapl.jp/asset/lp/shotai/img/jisseki_background.jpg");padding:50px 0;background-size:cover;text-align:center; }
.swiper-wrapper {width: 100%;}
.swiper-slide {color: #ffffff;width: 100%;height: 100%;text-align: center;}
#jisseki h2 {text-align:center;font-weight:900;margin-bottom:20px;font-size: 250%;}
#jisseki h3 {text-align:center;font-weight:600;margin-bottom:20px;font-size:150%;}
#jisseki p {margin-bottom:30px;}

/* nagare */
#nagare h2 {text-align:center;font-weight:900;margin-bottom:20px;font-size: 250%;}
#nagare h3 {font-weight:600;margin-bottom:20px;font-size:150%;}
#nagare > p {text-align:center;}
#nagare{padding:50px 0;}
#nagare > div {margin:20px auto;padding:30px 0;text-align:center;}
#nagare > div img{margin-bottom:30px;}
#nagare > div:nth-child(odd){background-color:#f5f5f5;}

/* feature */
#feature {
	background-image:url('./img/about_background.jpg?20201029');
	background-size:cover;
	background-position:center;
    padding: 50px 0;
	text-align:center;
}
#feature h2 {
	text-align:center;
	font-weight:900;
    text-shadow: 0px 3px 3px #666;
	color:#ffffff;
	margin-bottom:20px;
	font-size:26px;
}
#feature h2 span {
	font-size:250%;
}
/*#feature h4 {
	font-weight:bold;
	text-align:center;
}
#feature h4 span{
	font-size:200%;
}*/
#feature h4 {
	position: relative;
	display: inline-block;
	margin:-50px 0 30px 0;
	padding:10px;
	min-width: 100px;
	max-width: 100%;
	color: #ffffff;
	background: #ff5656;
	line-height:1.2;
	border-radius:5px;
	font-weight:900;
	font-size:170%;
}
#feature h4 span{
	font-size:150%;
}
#feature h4:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 10px solid #ff5656;
}
#feature h3 {
	font-size:180%;
	font-weight:800;
	text-align:center;
    margin-bottom: 20px;
}
#feature .container > div {
    background:#ffffff;
	padding:30px  30px 30px 30px;
	margin:50px 0 30px 0;
	border-radius:5px;
}
#feature .container > div h3 span {
	font-size:120%;
	color:#ff5656;
	margin:0 5px;
}
#feature .container > div h3 .sm{
	font-size:60% !important;
	color:#333333 !important;
}
#feature .container div p {
	margin:20px 0;
}
#feature .tabContents {
	display: none;
	padding:10px;
}
#feature .tabContents.active {
	display: block;
}
#feature #lecturelist > p { 
	margin:30px 0;
    text-align: center;
}
#feature #lecturelist ul li { 
	display:inline-block;
	width:40%;
	padding:10px 0;
	font-size:150%;
	font-weight:bold;
}
#feature #lecturelist ul li a {
	display:block;
	color:#ffffff;
}
#feature #lecturelist table {
	width:100%;
}
#feature #lecturelist table th {
	border:1px solid #ffffff;
    color: #ffffff;
	padding:5px;
	vertical-align:middle;
	font-size:80%;
}
#feature #lecturelist table td {
	border:1px solid #dddddd;
	background-color:#ffffff;
	padding:5px;
	vertical-align:middle;
	font-size:80%;
}
#feature #lecturelist h5{
    font-size: 150%;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: bold;
    letter-spacing:10px;
}
.japanese { background-color: #feaf36;}
.english {background-color: #fe6c6d;}
.math {background-color: #68BDFD;}
.social {background-color: #60C696;}
.science {background-color: #8A8CD8;}
.ao {background-color: #666666;}
.subject { width:10%; }
.level { width:10%; font-size:70% important; }
.name { width:50%; }
.teacher { width:30%; }
	
	
/* guide */
#guide {
	background-color:#f5f5f5;
	padding:80px 0;
}
#guide .container {
	background-color:#ffffff;
	border-radius:10px;
	padding:50px;
}
#guide h2 {
	font-size:200%;
	text-align:center;
	margin-bottom:50px;
	font-weight:900;
}
#guide table {
	width:100%;
	border-bottom:1px solid #cccccc;
}
#guide table tr {
	border-top:1px solid #cccccc;
}
#guide table tr th {
	background-color:#008C7B;
	color:#ffffff;
	width:20%;
	vertical-align:middle;
	padding:10px;
}
#guide table tr td {
	width:80%;
	padding:20px;
}

/* flow */
.flow { border-bottom:1px solid #f5f5f5; }
.flow h2 {
	font-size:200%;
	text-align:center;
	margin:50px 0;
	font-weight:900;
}
.flow_cont {
    background: #009f88;
    border-radius: 10px;
    margin-bottom: 50px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.flow_cont:after {
    content: url(./img/flow_arrow.png);
    position: absolute;
    bottom: -30px;
    width: 74px;
    left: 0;
    right: 0;
    margin: auto;
}
.flowBox .flow_cont:last-child:after { content: none; }
.flow_cont .imgArea { width:25%; }
.flow_cont .txtArwa { width: 75%; color:#ffffff; }
p.flownum {
    background: #fff102;
    color: #009f88;
    display: inline-block;
    padding: 0 10px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1rem;
}
.flow_cont .txtArwa h3 {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 16px;
}
.flow_cont .txtArwa p.txt {
    color: #fff;
    padding: 0;
    line-height: 2.2;
	font-size:16px;
}

/* qanda */
#qanda {
	background-color:#009f88;
	padding:50px 0;
}
#qanda h2 {
	font-size:200%;
	text-align:center;
	margin:0 0 50px 0;
	color:#ffffff;
	font-weight:900;
}
#qanda .qanda_box {
	background-color:#ffffff;
	border-radius:10px;
	padding:15px;
	line-height:2;
	margin-bottom:30px;
}
#qanda .qanda_box .qanda_q {
	font-size: 120%;
    font-weight: 600;
	cursor: pointer;
}
#qanda .qanda_box .qanda_q span{
	font-weight:900;
	margin-right:10px;
	color:#1f66b3;
}
#qanda .qanda_box .qanda_q::after{
	content:"+";
	float:right;
}
#qanda .qanda_box .qanda_a span{
	font-weight:900;
	margin-right:10px;
	color:#f73d5b;
}

/* place */
#place {
	padding:50px 0;
}
#place h2 {
	font-size: 200%;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 900;
}
#place h3{
	font-size:250%;
	font-weight:900;
    color: #009380;
	cursor: pointer;
	line-height:1;	
    display: inline-block;
}
#place .place_school_name {
	cursor: pointer;
}
#place .place_school_name span {
	font-size: 14px;
    color: #333333;
    display: inline-block;
    margin-bottom: 10px;
}
#place .place_school_name::after {
	content: "â–¼";
	float:right;
	color:#cccccc;
	display:inline-block;
	font-size:150%;
    top: -15px;
	position:relative;
}
#place .place_school {
	border:1px solid #cccccc;
	padding:20px;
	font-size:16px;
	margin-bottom:20px;
}
#place .place_school_detail {
	display:none;
    margin-top: 20px;
    border-top: 1px dashed #cccccc;
    padding-top: 30px;
}
#SchoolInfo_icon {
    font-size: 50%;
    margin: 10px 0;
}
#place #SchoolInfo_icon .SchoolInfo_icon_topic {
    background-color: #666666;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
}
#place #SchoolInfo_icon span {
    margin-right: 5px;
}
#place .col4 {
	width:31%;
	display:inline-block;
	margin-left: 0px;
	vertical-align:top;
}
#place .col8 {
	width:66%;
	display:inline-block;
    margin-left: 2%;
	vertical-align:top;
}
#place .place_school h4 {
    margin: 10px 0;
    color: #009380;
    background-color: #f5f5f5;
    padding: 10px;
}
#place .btn1 {
	background-color: #ed4545;
    border: 1px solid #920E0E;
    box-shadow: 0 4px #920E0E;
    display: block;
    color: #ffffff;
    padding: 20px 10px;
    font-size: 150%;
	font-weight:bold;
    border-radius: 5px;
    margin: 20px auto 0 auto;
    color: #ffffff !important;
    text-decoration: none !important;
	text-align:center;
}


/* order */
#order {
	padding-bottom:50px;
	background-color:#f5f5f5;
}
#order h2 {
	text-align: center;
	background-image:url('./img/order_background.png');
	background-repeat: repeat;
	padding:20px 0;
	background-position:center;
}
#order > div {
	width:100%;
	background-color: #416eb2; 
	padding-bottom:50px;
	padding-top:100px;
}

/* footer */
footer {
	background-color: #008c7b;
	color: #ffffff;
	font-size: 50%;
	text-align: center;
	padding: 10px;
}
footer a {
	color:#FFFFFF;
	text-decoration:underline;
}

/* fixed */
#fixed {
    position: fixed;
	bottom:20px;
}
#fixed_apply_btn {
    width: 250px;
    color: #ffffff;
    display: block;
    background-color: #DB3C7B;
    padding: 10px 5px;
    border-radius: 0 10px 10px 0px;
    text-align: center;
    font-weight: bold;
}
#PageTop {
    position: fixed;
    bottom: 20px;
    right: 10px;
    background-color: #08a597;
    font-size:200%;
	border-radius:10px;
    padding: 0 15px;
    color: #FFFFFF;
}

@media screen and (max-width:1024px) {
  
	body { font-size:16px; }
	.container { width:100%; }
	.spbr { display:block; }
	.pcbr { display:none; }
	.pc { display: none; }
	.sp { display: block; width:100%; margin:0 auto; }
	
	    
	/* header */
	header img { margin-left:10px; width:70%; }
	header a { width:50px;margin-right:10px; }
	header span { display:none; }
	
	/* mainvisual */
	#mainvisual{height:50vh;background-size: cover;background-position:center;}
	#mainvisual > div {height:45vh;border: 5px solid #008c7b;}
	#mainvisual a{display:none !important;}
	.mv_btm{font-size:1.5rem;text-align:center;font-weight: 900;background-color:#008c7b;color:#fff;padding:10px 0;}
	.mv_btm span{font-size:70%;letter-spacing:2px;}
	
	/* intro */
	#intro {padding:20px 10px;}
	#intro h2 {font-size: 1.5rem;letter-spacing: -2px;}
	#intro h1 {font-size: 2.2rem;font-weight: 900;letter-spacing: 2px;margin-top: 10px;}
	#intro div {margin-top:20px;padding:0px;line-height:2;font-size: 1rem;}
	#intro div span{font-size:1.2rem;}
	
	/* apply */
	.apply { margin:0px auto; width:95%; }	
	.apply p { font-size:110%; }
	.apply p span { font-size:170%; }
	
	/* howto */
	#howto h2{font-size:1.8rem;}
	#howto > div{margin:50px auto;}
	#howto > div > div {display:block;}
	#howto > div h3{font-size:1.3rem;margin-bottom:20px;padding:0 20px;letter-spacing:0px;}
	#howto > div > div img{width:90%;margin:0 auto;display:block;}
	#howto > div > div p{margin:20px;font-size:80%;}
	
	/* nagare */
	#nagare{padding:20px 0 0 0;}
	#nagare h2{font-size:1.8rem;}
	#nagare > div{padding:20px 0;}
	#nagare > div p{text-align:left;font-size:80%;padding: 0 20px;}
	#nagare > div img{width:90%;margin:0 auto 20px auto;display:block;}
 
	/* about */
	#about {padding:30px 0;}
	#about .container > img {
		width:96%;
		margin:2%
	}
	#about h2 {
		margin-bottom:20px;
	}
	
	/* feature */
	#feature h3 {
		font-size: 135%;
	}
	#feature h4{font-size:90%;}
	#feature .container > div {
		padding: 15px;
		width: 90%;
		margin: 50px auto 50px auto;
	}
	#feature .container div img {
		width:100%;
	}
	#feature .container div p {
		text-align:left;
		font-size:80%;
	}
	
	/* guide */
	#guide {
		padding:20px 0;
	}
	#guide h2 {
		margin-bottom:20px;
	}
	#guide .container {
		width:80%;
		padding: 5%;
		margin: 5%;
	}
	#guide table {
		border-bottom:0px;
	}
	#guide table tr th {
		width:96%;
		padding:2%;
		display:block;
	}
	#guide table tr td {
		width:96%;
		padding:20px 2% 20px 2%;
		display:block;
	}
	
	/* flow */
	.flow_cont {
		background: #009f88;
		border-radius: 10px;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		position: relative;
		flex-wrap: wrap;
		width: 80%;
		margin: 0 auto 50px auto;
		font-size: 90%;
	}
	.flow_cont h3{ font-size: 150% !important; }
	.imgArea {
		text-align: center;
		width: 100% !important;
		margin: 10px 0 30px;
	}
	.flow_cont .txtArwa {
		width: 100%;
		text-align: center;
	}
	
	/* qanda */
	#qanda .qanda_box {
		width:85%;
		font-size:80%;
		margin:0 auto 10px auto;
	}
	
	/* place */
	#place h2 {
		font-size:150%;
		margin-bottom:20px;
	}
	#place h3 {
		font-size:24px;
	}
	#place .place_school {
		padding: 10px 10px;
		width:90%;
		margin:0 auto 10px auto;
	}
	#place .place_school > div {
	}
	#place .place_school_detail {
		padding-top:10px;
		margin-top:10px;
	}
	#place .col4 {
		width:100%;
		display:block;
	}
	#place .col8 {
		width:100%;
		display:block;
		margin-top:20px;
		margin-left:0px;
	}
	
	/* order */
	#order h2 img {
		width:80%;
	}

  
  
	/* footer */
	footer {
		width:98%;
		padding:1%;
		padding-bottom:70px;
	}

}