@import url('reset.css');

html {
	border: 0px;
}

body {
	width:100%;
	font-size:13.6px;
	*font-size: small;
	*font: x-small;
	line-height:1;
	color: #333;
	font-family: 'Noto Sans JP', sans-serif;
	margin:0;
	padding: 0 0 0 0;
	overflow-x: hidden;
	padding-top:100px;
	font-feature-settings: "palt";
}

.clear {
	clear: both;
	padding: 0px;
	margin: 0px;
	height: 0px;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: #333;
}

a:hover {
	color: #E60012;
	text-decoration: none;
}

a.shiryo{
	display:block;
	width:515px;
	margin:0 17px 0 0;
	padding:22px 0;
	background:url(../images/arrow_w.webp) right 20px top 50% no-repeat #E60012;
	border:2px solid #E60012;
	color:#fff;
	-webkit-background-size: 32px auto;
	background-size: 32px auto;
	font-size:164%;
	font-weight:700;
	line-height:1;
	letter-spacing: 1px;
	text-align:center;
	cursor: pointer;
}

a.syutsugan{
	display:block;
	width:515px;
	margin:0 0 0 0;
	padding:22px 0;
	background:url(../images/arrow_r.webp) right 20px top 50% no-repeat #fff;
	border:2px solid #E60012;
	color:#E60012;
	-webkit-background-size: 32px auto;
	background-size: 32px auto;
	font-size:164%;
	font-weight:700;
	line-height:1;
	letter-spacing: 1px;
	text-align:center;
	cursor: pointer;
}

a.syuichi{
	display:block;
	width:515px;
	margin:0 17px 0 0;
	padding:22px 0;
	background:url(../images/arrow_w.webp) right 20px top 50% no-repeat #000;
	border:2px solid #000;
	color:#fff;
	-webkit-background-size: 32px auto;
	background-size: 32px auto;
	font-size:164%;
	font-weight:700;
	line-height:1;
	letter-spacing: 1px;
	text-align:center;
	cursor: pointer;
}


.box{
	cursor: pointer;
}



br.no{
	display:none;
}

.sp{
	display:none;
}




/* ----header----- */

header{
	position:fixed;
	width:100%;
	height:100px;
	margin:0 0;
	padding:0 0 0 0;
	z-index:100000;
	background:#fff;
	top:0;
}


#head{
	width:1400px;
	margin:0 auto;
	padding:0 0 0 0;
	display: flex;
	flex-wrap:nowrap;
	align-items:flex-start;
	justify-content:space-between;
}

#logo{
	width:325px;
	margin:35px 0 0 30px;
	padding:0;
}

#logo img{
	width:100%;
	margin:0;
	padding:0 0 0 0;
}


#headBnr{
	margin:0 140px 0 0;
	padding:0;
}
#headBnr ul{
	width:460px;
	margin:0 0 0 0;
	padding:0;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
	list-style: none;
}

#headBnr li{
	width:110px;
	margin:0 0 0 0;
	cursor: pointer;
}

#headBnr li img{
    width:100%;
}

#headBnr li a:hover{
    opacity:0.7;
}



/* ----visu----- */


#visu{
	position: relative;
	width:2000px;
	height:654px;
	padding:0 0 0 0;
	overflow:hidden;
	text-align:center;
	left: 50%;
	transform: translate(-50%, 0);
	background:#f2f2f2;
}



/* ----mainCopy----- */



#mainCopy{
	position: relative;
	z-index: 0;
	width:100%;
	margin:0 auto 0 auto;
	padding:50px 0 200px 0;
	background:#f2f2f2;
	text-align:center;
}

#mainCopy h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:360%;
	font-weight:900;
	line-height:1.4;
	letter-spacing: 2px;
	color:#E60012;
}

#mainCopy p{
	margin:50px 0 0 0;
	padding:0 0 0 0;
	font-size:146%;
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
}

#mainCopy ul{
	margin:70px 0 0 0;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}


#mainCopy ul li:nth-child(1) a{
	margin:0 17px 0 0;
}

#mainCopy ul li:nth-child(2) a{
	margin:0 0 0 17px;
}

#mainCopy ul a:hover{
    opacity:0.7;
}






/* ----merit----- */


#merit {
	position: relative;
	z-index: 0;
	width:100%;
	margin:0 auto 0 auto;
	padding:70px 0 100px 0;
	text-align:center;
}

#merit::after{
  content: '';
  position: absolute;
  left:0;
  top: -100px;
  /*四角形を傾けます*/
  transform: skewY(-3deg);
  transform-origin: top right;
  z-index: -1;
  width:100%;
  height:100%;
  background:#fff;
}

#merit h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:380%;
	font-weight:900;
	line-height:1.4;
	letter-spacing: 2px;
}

#merit p{
	margin:30px 0 0 0;
	padding:0 0 0 0;
	font-size:146%;
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
}

#merit div.merit01{
	position: relative;
	width:1400px;
	margin:100px auto 0 auto;
	padding:0 0 0 0;
}

#merit div.merit01 ul{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	list-style-type:none;
}

#merit div.merit01 li{
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}

#merit div.merit02{
	position: relative;
	width:1200px;
	margin:90px auto 0 auto;
	padding:0 0 0 0;
}

#merit ul.syutsugan{
	position: relative;
	width:fit-content;
	margin-top:45px;
	padding:0 0 0 0;
	overflow:hidden;
	text-align:center;
	left: 50%;
	transform: translate(-50%, 0);
}

#merit ul.syutsugan li{
	margin:0 0 10px 0;
	padding:0 0 0 0;
}

#merit p.proviso{
	width:1140px;
	margin:30px auto 0 auto;
	padding:0 0 0 0;
	font-size:146%;
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
	text-align:left;
}




#merit h3{
	position: relative;
	text-align: center;
	margin:120px 0 0 0;
	padding:0 0 0 0;
	font-size:320%;
	font-weight:900;
	line-height:1.4;
	letter-spacing: 3px;
}

#merit h3:before,
#merit h3:after {
	position: relative;
	display: inline-block;
	content: "";
	background: #000;
	width: 5px;
	height: 90px;
	margin: 0 40px;
	margin-top: 5px;
	vertical-align: middle;
}

#merit h3:before {
	transform: rotate(-37deg);
}

#merit h3:after {
	transform: rotate(37deg);
}

#merit div.btn{
	width:515px;
	margin:20px auto 0 auto;
	padding:0 0 0 0;
}


#merit div.btn a:hover{
    opacity:0.7;
}







/* ----special01----- */


#special01 {
	position: relative;
	z-index: 0;
	width:100%;
	margin:0 auto 0 auto;
	padding:70px 0 370px 0;
	text-align:center;
}

#special01::after{
  content: '';
  position: absolute;
  left:0;
  top: -100px;
  /*四角形を傾けます*/
  transform: skewY(-3deg);
  transform-origin: top right;
  z-index: -1;
  width:100%;
  height:100%;
  background:#BFE7E5;
}

#special01 div.bakudan{
	position: relative;
	width:1200px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}

#special01 div.bakudan img{
	position: absolute;
	top:-155px;
	left:40px;
}

#special01 h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:360%;
	font-weight:900;
	line-height:1.4;
	letter-spacing: 2px;
}

#special01 h2 span{
	color:#E60012;
}

#special01 p{
	margin:50px 0 0 0;
	padding:0 0 0 0;
	font-size:146%;
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
}



#special02{
	position: relative;
	width:1200px;
	margin:-290px auto 0 auto;
	padding:0 0 0 0;
}

#special02 h3{
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#special02 ul{
	position: relative;
	width:1230px;
	margin:30px 0 0 0;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
}

#special02 ul li{
	width:390px;
	margin:0 0 0 0;
	padding:58px 20px 160px 0;
	background:url(../images/bg_special01.webp) no-repeat;
	font-size:180%;
	font-weight:700;
	line-height:1.6;
	letter-spacing: 2px;
	text-align:center;
}

#special02 ul li span{
	color:#E60012;
}





/* ----syuichi----- */

#syuichi{
	position: relative;
	z-index: 0;
	width:100%;
	margin:230px auto 0 auto;
	/*padding:0 0 140px 0;*/
	padding:0;
}

#syuichi::after{
  content: '';
  position: absolute;
  left:0;
  top: -90px;
  transform: skewY(-3deg);
  transform-origin: top right;
  z-index: -1;
  width:100%;
  height:1530px;
  background:#E60012;
}

#syuichi div.frame{
	position: relative;
	width:1200px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	background:#fff;
	border:5px solid #E60012;
	top: -160px;
}

#syuichi div.block01{
	width:1200px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}

#syuichi div.block01 h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#syuichi div.point{
	position: relative;
	width:1100px;
	margin:60px auto 0 auto;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:nowrap;
}

#syuichi div.point div.list{
	position: relative;
	width:530px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#syuichi div.point h3{
	width:100%;
	margin:0 0 0 0;
	padding:0 0 25px 0;
	display: inline-block;
	transform: skewX(-6deg);
	font-size:300%;
	font-weight:900;
	line-height:1.3;
	border-bottom:2px solid #E60012;
	color: #E60012;
	text-align:center;
	letter-spacing: 2px;
}

#syuichi div.point p{
	margin:25px 0 0 0;
	padding:0 0 0 0;
	font-size:138%;
	font-weight:400;
	line-height:1.6;
	letter-spacing: 1px;
}

#syuichi div.point div.ph{
	margin:30px 0 0 0;
	padding:0 0 0 0;
}




#syuichi div.block02 h2{
	width:1040px;
	margin:80px auto 0 auto;
	padding:15px 30px 20px 30px;
	font-size:300%;
	font-weight:900;
	line-height:1;
	color: #fff;
	background: #E60012;
	letter-spacing: 2px;
}

#syuichi div.block02 h2 span{
	display: inline-block;
	transform: skewX(-6deg);
}

#syuichi div.couse{
	position: relative;
	width:1100px;
	margin:20px auto 0 auto;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-wrap:nowrap;
	z-index:100;
}

#syuichi div.couse ul{
	position: relative;
	width:470px;
	margin:0 0 0 30px;
	padding:0 0 0 0;
	list-style-type:none;
}

#syuichi div.couse ul li{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:158%;
	font-weight:400;
	line-height:1.7;
	letter-spacing: 1px;
}

#syuichi div.couse ul li span.red{
	color:#E60012;
}

#syuichi div.couse ul li span.blue{
	color:#039EF7;
}

#syuichi div.couse ul li span.yellow{
	color:#FFF23F;
}


#syuichi p.proviso{
	width:1020px;
	margin:30px auto 0 auto;
	font-size:138%;
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
	text-align:left;
	padding-left:1em;
	text-indent:-1em;
}



#syuichi div.btn{
	width:515px;
	margin:80px auto 80px auto;
	padding:0 0 0 0;
}

#syuichi div.btn a:hover{
	opacity:0.7;
}







/* ----online----- */

#online{
	position: relative;
	z-index: 0;
	width:100%;
	margin:150px auto -300px auto;
	padding:0 0 0 0;
}

#online::after{
  content: '';
  position: absolute;
  left:0;
  top: -90px;
  transform: skewY(3deg);
  transform-origin: top right;
  z-index: -1;
  width:100%;
  height:1400px;
  background:#E60012;
}

#online div.frame{
	position: relative;
	width:1200px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	background:#fff;
	border:5px solid #E60012;
	top: -290px;
	padding-bottom: 230px; /* button 非表示 */
}

#online div.block01{
	width:1200px;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}

#online div.block01 h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#online div.point{
	position: relative;
	width:1100px;
	margin:60px auto 0 auto;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:nowrap;
}

#online div.point div.list{
	position: relative;
	width:530px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#online div.point h3{
	width:100%;
	margin:0 0 0 0;
	padding:0 0 25px 0;
	display: inline-block;
	transform: skewX(-6deg);
	font-size:300%;
	font-weight:900;
	line-height:1.3;
	border-bottom:2px solid #E60012;
	color: #E60012;
	text-align:center;
	letter-spacing: 2px;
}

#online div.point p{
	margin:25px 0 0 0;
	padding:0 0 0 0;
	font-size:138%;
	font-weight:400;
	line-height:1.6;
	letter-spacing: 1px;
}

#online div.point div.ph{
	margin:30px 0 0 0;
	padding:0 0 0 0;
}




#online div.block02 h2{
	width:1040px;
	margin:80px auto 0 auto;
	padding:15px 30px 20px 30px;
	font-size:300%;
	font-weight:900;
	line-height:1;
	color: #fff;
	background: #E60012;
	letter-spacing: 2px;
}

#online div.block02 h2 span{
	display: inline-block;
	transform: skewX(-6deg);
}

#online div.couse{
	position: relative;
	width:1100px;
	margin:20px auto 0 auto;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-wrap:nowrap;
}

#online div.couse ul{
	position: relative;
	width:470px;
	margin:0 0 0 30px;
	padding:0 0 0 0;
	list-style-type:none;
}

#online div.couse ul li{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:158%;
	font-weight:400;
	line-height:1.7;
	letter-spacing: 1px;
}

#online div.couse ul li span.red{
	color:#E60012;
}

#online div.couse ul li span.blue{
	color:#039EF7;
}

#online div.couse ul li span.yellow{
	color:#FFF23F;
}


#online p.proviso{
	width:1020px;
	margin:30px auto 0 auto;
	font-size:138%;
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
	text-align:left;
	padding-left:1em;
	text-indent:-1em;
}



#online div.btn{
	width:515px;
	margin:80px auto 80px auto;
	padding:0 0 0 0;
}

#online div.btn a:hover{
	opacity:0.7;
}









/* ----important----- */

#important{
	display:table;
	width:1200px;
	/*margin:90px auto 0 auto;*/
	margin:0 auto 0 auto;
	padding:0 0 100px 0;
}

#important h2{
	display:table-cell;
	margin:0 0 0 0;
	padding:100px 20px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	background:#FDE5E7;
	font-size:180%;
	font-weight:700;
	line-height:1.8;
	letter-spacing: 3px;
	color:#E60012;
}

#important ul{
	display:table-cell;
	width:1100px;
	margin:0 0 0 0;
	padding:0 0 0 30px;
	list-style-type:none;
}

#important ul li{
    padding-left:1em;
	text-indent:-1em;
	font-size:138%;
	font-weight:400;
	line-height:1.7;
}








/* ----AOshiryo----- */

#AOshiryo0,
#AOshiryo{
	position: relative;
	z-index: 0;
	width:100%;
	margin:50px auto 0 auto;
	padding:40px 0 140px 0;
	text-align:center;
}

#AOshiryo0::after,
#AOshiryo::after{
  content: '';
  position: absolute;
  left:0;
  top: -90px;
  transform: skewY(-3deg);
  transform-origin: top right;
  z-index: -1;
  width:100%;
  height:100%;
  background:#F2F2F2;
}

#AOshiryo0 h2,
#AOshiryo h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:360%;
	font-weight:900;
	line-height:1.4;
	letter-spacing: 2px;
}

#AOshiryo0 h2 span,
#AOshiryo h2 span{
	color:#E60012;
}

#AOshiryo0 div.btn,
#AOshiryo div.btn{
	width:515px;
	margin:50px auto 0 auto;
	padding:0 0 0 0;
}

#AOshiryo0 div.btn a:hover,
#AOshiryo div.btn a:hover{
    opacity:0.7;
}

#AOshiryo0 p,
#AOshiryo p{
	margin:50px 0 0 0;
	padding:0 0 0 0;
	font-size:138%;
	font-weight:400;
	line-height:1.6;
	letter-spacing: 1px;
}

#AOshiryo0 p a,
#AOshiryo p a{
	color:#E60012;
	font-weight:900;
}

#AOshiryo0 p a:hover,
#AOshiryo p a:hover{
	border-bottom:2px solid #E60012;
}







/* ----application----- */

#application0,
#application{
	position: relative;
	z-index: 0;
	width:100%;
	margin:30px auto 0 auto;
	padding:40px 0 170px 0;
	text-align:center;
}

#application0 h2,
#application h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:360%;
	font-weight:900;
	line-height:1.4;
	letter-spacing: 2px;
}

#application0 h2 span,
#application h2 span{
	color:#E60012;
}
#application0 p,
#application p{
	margin:30px 0 0 0;
	padding:0 0 0 0;
	font-size:138%;
	font-weight:400;
	line-height:1.6;
	letter-spacing: 1px;
}

#application0 div.point,
#application div.point{
	position: relative;
	width:1200px;
	margin:50px auto 0 auto;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-wrap:nowrap;
}

#application0 div.point,
#application div.point{
	position: relative;
	width:1200px;
	margin:50px auto 0 auto;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-wrap:nowrap;
}

#application0 div.point,
#application div.point{
	position: relative;
	width:1200px;
	margin:100px auto 0 auto;
	padding:0 0 0 0;
	list-style-type:none;
	display: flex;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:nowrap;
}

#application0 div.point div.list,
#application div.point div.list{
	position: relative;
	width:380px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background:#FDE5E7;
}

#application0 div.point div.list div.icon,
#application div.point div.list div.icon{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	top:-45px;
	left: 50%;
	transform: translate(-50%, 0);
}

#application0 div.point div.list h3,
#application div.point div.list h3{
	position: relative;
	margin:0 0 0 0;
	padding:90px 0 40px 0;
	font-size:164%;
	font-weight:700;
	line-height:1.6;
}

#application0 div.point div.list h3.mid,
#application div.point div.list h3.mid{
	padding:110px 0 30px 0;
}


#application0 div.btn,
#application div.btn{
	width:515px;
	margin:70px auto 0 auto;
	padding:0 0 0 0;
}

#application0 div.btn a:hover,
#application div.btn a:hover{
    opacity:0.7;
}








/* ---------------page-top--------------- */

#page-top {
	position: fixed;
	bottom: 0;
	right: 0px;
}
#page-top a {
	text-decoration: none;
	padding: 0 0;
	display: block;
}


#page-top img {
	width:70px;
}

/* --------------footer-------------- */






/* ----フッタ固定メニュー----- */


footer{
	position:relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	text-align:center;
	z-index:1;
}

footer ul.link1,
footer ul.link2{
	display:inline-block;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	text-align:center;
}

footer ul.link1 li,
footer ul.link2 li{
	display:inline-block;
	margin:0 0 0 0;
	padding:0 15px;
	font-size:108%;
	line-height:1.7;
	border-left:1px solid #ccc;
}

footer ul.link1 li:first-child{
	border-left:none;
}

footer ul.link1 li a:hover,
footer ul.link2 li a:hover{
	border-bottom:1px solid #E60012;
}

footer p.copyright{
	width:100%;
	margin:30px auto 0 auto;
	padding:30px 0 30px 0;
	text-align:center;
	font-size:116%;
	line-height:1.7;
	text-align:center;
	color:#fff;
	background:#000;
}

/** ボタン グレーアウト */
a.disabled {
	pointer-events: none;
	background: #999;
    color: #fff;
    border: #000;
}

/* 残り時間 */
.remainTimeArea{
	font-size:1rem;
}
.remainTime{
	font-weight:bold !important;
}
.remainTimeArea .timer{
	margin-top:0rem !important;
}
.remainTimeArea .timer span{
	font-size:2rem;
	font-weight:bold;
	color:#E60012;
}
.remainTimeArea .attention{
	font-size:1rem !important;
	margin:0 auto !important;
	width: max-content;
	text-align: left;
}

p.attention{
 padding-left:2rem !important;
}
p.attention{
 list-style-type:none;
 text-indent: -0.5rem;
}
p.attention::before {
  content:  "※";
  display:  inline-block;
}