/* system */

#system{
	width			: 730px;
	clear			: left;
}

.topimg{
	font-size: 0;
	line-height: 0;
	margin: 0 0 10px 0;
}
.topimg a:hover{
	opacity: 0.7;
	filter: alpha(opacity=70);
}

#bt{
	width			: 730px;
	height			: 60px;
	margin			: 0 0 9px 0;
	background		: url(./img/bt_bg.gif) no-repeat;
}

#bt ul{
	display			: block;
	padding			: 10px 0 0 11px;
}

#bt li{
	width			: 143px;
	height			: 40px;
	float			: left;
}

#bt ul:after{
	content			: "";
	display			: block;
	clear			: both;
}

#sche{
	width: 730px;
	height: 120px;
	background: url(img/sche.gif) no-repeat;
	margin: 0 0 10px 0;
	padding: 64px 0 0 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#sche p{
	font-size: 0;
	line-height: 0;
	text-align: center;
}

#sys1{
	width: 730px;
	font-size: 0;
	line-height: 0;
}
#sys1 > div{
	display: inline-block;
	vertical-align: top;
	width: 360px;
	height: 415px;
	margin: 0 10px 10px 0;
}
#sys1 > div:nth-of-type(even){	margin-right: 0;}
#sys1 > div:nth-of-type(1){	background: url(img/sys1_1.jpg) no-repeat;}
#sys1 > div:nth-of-type(2){	background: url(img/sys1_2.jpg) no-repeat;}
#sys1 > div:nth-of-type(3){	background: url(img/sys1_3.jpg) no-repeat;}
#sys1 > div:nth-of-type(4){	background: url(img/sys1_4.jpg) no-repeat;}

#sys2{
	width: 730px;
	font-size: 0;
	line-height: 0;
}
#sys2 > div{
	display: inline-block;
	vertical-align: top;
	width: 360px;
	height: 415px;
	margin: 0 10px 10px 0;
}
#sys2 > div:nth-of-type(even){	margin-right: 0;}
#sys2 > div:nth-of-type(1){	background: url(img/sys2_1.jpg) no-repeat;}
#sys2 > div:nth-of-type(2){	background: url(img/sys2_2.jpg) no-repeat;}

#cre{
	width: 730px;
	height: 179px;
	background: url(img/cre.gif?t=0704) no-repeat;
	margin: 0 0 10px 0;
	padding: 106px 0 0 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#cre p{
	font-size: 0;
	line-height: 0;
	text-align: center;
}

#event{
	margin			: 0 0 10px 0;
}


.box_bg{
	width			: 730px;
	float			: left;
	background		: url(./img/box.gif) repeat-y;
	margin			: 0 0 10px 0;
}

.box{
	width			: 730px;
	float			: left;
	padding			: 0 0 18px 0;
	background		: url(./img/box_bt.gif) no-repeat bottom;
}

.box h3{
	margin			: 0 0 8px 0;
}

.box div{
	margin			: 0 0 10px 0;
	text-indent		: -9999px;
}

#play p,
#op p,
#area p{
	font-size		: 12px;
	line-height		: 20px;
	color			: #ff3333;
	padding			: 0 20px;
}


/* area */

#area table{
	font-size		: 12px;
	line-height		: 16px;
	margin			: 0 0 0 20px;
}

#area th{
	width			: 148px;
	font-weight		: normal;
	text-align		: left;
	padding			: 4px 0 3px 0;
}

#area th p{
}

#area td{
	padding			: 4px 0 3px 0;
}

#area td p{
	padding-left	: 45px;
	background		: url(./img/td.gif) no-repeat 0 6px;
}

#play div{
	width			: 730px;
	height			: 244px;
	background		: url(./img/play.gif?t=1118) no-repeat 16px 0;
}

#op div{
	width			: 730px;
	height			: 315px;
	background		: url(./img/op.gif?t=1020) no-repeat top center;
}

#area div{
	width			: 730px;
	height			: 170px;
	background		: url(./img/area.gif?t=0115) no-repeat top center;
	margin			: 0 0 0 0;
}


/* sbox */

#sbox_bg{
	width			: 728px;
	clear:left;
	border			: 1px solid #dddddd;
	background		: url(./img/sbox.gif) top left;
	margin			: 0 0 10px 0;
}

#sbox{
	width			: 708px;
	border			: 1px solid #e1c86a;
	background		: #ffffff;
	margin			: 9px 0 9px 9px;
	padding			: 9px 0 9px 0;
}

#sbox h3{
	margin			: 0 0 10px 9px;
}

#sbox p{
	font-size		: 12px;
	line-height		: 18px;
	padding			: 0 0 20px 9px;
}

#sbox span{
	color			: #ff3333;
}

#sbox table{
	font-size		: 11px;
	line-height		: 13px;
	margin			: 0 0 0 9px;
}

#sbox th{
	width			: 70px;
	font-weight		: normal;
	text-align		: left;
	color			: #27b3b9;
	padding: 6px 0;
}

#sbox td{
	padding: 6px 0;
}




/* caution */

#caution{
	width			: 730px;
	margin			: 0 0 10px 0;
}

#caution h3{
	margin			: 0 0 10px 0;
}

#caution h4{
	margin			: 0 0 5px 0;
}

#c_text div{
	margin			: 0 0 10px 0;
}

#c_text p{
	font-size		: 12px;
	line-height		: 20px;
	color			: #27b3b9;
	padding			: 0 5px 10px 5px;
}

#caution ul{
	display			: block;
	width			: 710px;
	margin			: 0 0 15px 10px;
}

#caution li{
	font-size		: 12px;
	line-height		: 20px;
	background		: url(./img/i1.gif) no-repeat 1px 8px;
	border-bottom	: 1px dotted #dddddd;
	padding			: 4px 0 3px 0;
}

#caution li p{
	padding			: 0 0 0 20px;
}

.cbox_bs{
	width			: 730px;
	float			: left;
	background		: url(./img/cbox.gif) repeat-y;
	margin			: 0 0 20px 0;
}

.cbox_bg{
	width			: 730px;
	float			: left;
	background		: url(./img/cbox_bt.gif) no-repeat bottom;
}

.cbox{
	width			: 730px;
	float			: left;
	padding			: 10px 0 0 0;
	background		: url(./img/cbox_top.gif) no-repeat;
}

.cbox p{
	font-size		: 11px;
	line-height		: 18px;
	color			: #ff3333;
	padding			: 0 0 10px 20px;
}

#mae{
	text-align		: center;
}



/* res */

.box2_bs{
	margin			: 0 0 0 10px;
}

.box2_bg{
	width			: 710px;
	float			: left;
	margin			: 0 0 10px 0;
	background		: url(./img/box2.gif) repeat-y;
}

.box2{
	width			: 710px;
	float			: left;
	padding			: 0 0 35px 0;
	background		: url(./img/box2_bt.gif) no-repeat bottom;
}

.box2 h3{
	margin			: 0 0 15px 0;
}

.box3{
	width			: 690px;
	margin			: 0 0 20px 10px;
	padding			: 0 0 20px 0;
	border-bottom		: 1px solid #dddddd;
}

.box3b{
	width			: 690px;
	margin			: 0 0 0 10px;
}

.box3b div{
	margin			: 10px 0;
	text-align		: center;
}

.box3 h4,
.box3b h4{
	margin			: 0 0 5px 2px;
}

.box3 ul{
	display			: block;
	width			: 630px;
	margin			: 0 0 0 30px;
}

.box3 li{
	font-size		: 12px;
	line-height		: 20px;
	border-bottom	: 1px dotted #dddddd;
	padding			: 8px 0 7px 0;
}

.box3 li div{
	background		: url(./img/dot.gif) repeat-y top left;
	padding			: 0 0 0 12px;
}

.p01{
	font-size		: 12px;
	line-height		: 18px;
	padding			: 25px 0 0 10px;
}

.p02{
	font-size		: 12px;
	line-height		: 18px;
	padding			: 0 0 0 28px;
}

.p03{
	display			: block;
	width			: 630px;
	font-size		: 11px;
	font-weight		: bold;
	line-height		: 16px;
	color			: #ff3333;
	margin			: 0 0 15px 30px;
	padding			: 0 0 20px 0;
	border-bottom	: 1px dotted #dddddd;
}

.p04{
	font-size		: 12px;
	line-height		: 30px;
	padding			: 0 0 0 28px;
}

.p05{
	padding			: 20px 0 0 25px;
}

.h5-1{
	font-size		: 16px;
	font-weight		: bold;
}

.h5-2{
	font-size		: 14px;
	font-weight		: bold;
	color			: #cc99ff;
}






.pagetop{
	clear			: left;
	text-align		: right;
	margin			: 0 0 20px 0;
}

#caution + .pagetop , .box2_bs + .pagetop{
	margin-right		: 10px;
}

.c01{	color			: #ff3333;}
.c02{	color			: #bd75ed;}
.c03{	color			: #2bb74e;}
.c04{	color			: #229eed;}


/** course **/

.course{
	font-size: 0;
	line-height: 0;
	margin: 0 0 10px 0;
}






/** op_box **/

#op_box{
}
#op_box div{	text-indent: 0; margin: 0;}
#op_box dl{
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	font-size: 0;
	line-height: 0;
	margin: 0 25px;
	padding: 10px 0;
	border-bottom: 1px dotted #ddd;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#op_box dt{
	width: 128px;
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	text-align: left;
	color: #b08a00;
	padding: 0 0 0 20px;
	background: url(img/op_box.gif) no-repeat 1px 9px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#op_box dd{
	width: calc(100% - 128px);
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
}
#op_box dd button{
	position: relative;
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 108px;
	height: 30px;
	font-size: 13px;
	line-height: 13px;
	border: 1px solid #e2ca6e;
	border-radius: 3px;
	margin-right: 3px;
	background: #fff;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#op_box dd button span{
	display: inline-block;
	vertical-align: top;
	width: 18px;
	height: 18px;
	background: url(img/op_new.png) no-repeat;
	background-size: 18px auto;
	position: absolute;
	top: -3px;
	left: -4px;
}
#op_box dd button:last-of-type{	margin-right: 0;}

#op_box .op_txt{
	font-size: 12px;
	line-height: 20px;
	text-align: left;
	color: #ff3333;
	margin: 10px 0 0 0;
	padding: 0 25px;
}

.op_toptxt{
	font-size: 12px;
	line-height: 20px;
	text-align: left;
	margin: 10px 0;
	padding: 0 25px;
}
.op_toptxt span{	color: #ff3333;}


/** modal **/
.modalArea{
	display: none;
	position: fixed;
	z-index: 1001;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modalBg{
	width: 100%;
	height: 100%;
	background-color: rgba(30,30,30,0.9);
}

.modalWrapper{
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 600px;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
}
.closeModal{
	content: '+';
	font-size: 30px;
	line-height: 30px;
	color: #999;
	position: absolute;
	top: -30px;
	right: 0;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.modalContents{	text-align: left;}

.modalContents h4{
	position: relative;
	font-size: 36px;
	font-weight: bold;
	line-height: 40px;
	color: #b08a00;
	margin: 0 0 10px 0;
	padding: 0 0 0 35px;
}
.modalContents h4 span{
	font-size: 30px;
	line-height: 40px;
	position: absolute;
	top: -2px;
	left: 0;
}

.modalContents .modal_p{
	font-size: 18px;
	font-weight: bold;
	line-height: 25px;
}

.modalContents .modal_caution{
	margin: 15px 0 0 0 !important;
	padding: 15px 0 0;
	color: #ff0000;
	border-top: 1px dotted #ddd;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.modalContents .modal_caution p:nth-of-type(1){
	position: relative;
	font-size: 18px;
	font-weight: bold;
	line-height: 25px;
	margin: 0 0 10px 0;
	padding: 0 0 0 28px;
}
.modalContents .modal_caution p:nth-of-type(1) span{
	font-size: 25px;
	line-height: 25px;
	position: absolute;
	top: -2px;
	left: 0;
}

.modalContents .modal_caution p:nth-of-type(2){
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}