@charset "utf-8";
@import url("fontawesome-4.6.3.min.css");


html{overflow-x:hidden;}
html, body{
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color: #333333;
	margin:0 !important;
	padding:0 !important;
	font-size:17px;
	line-height:1.6;
	font-weight:bold;
}

img{max-width:100%; height: auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle; /*-webkit-backface-visibility: hidden;*/}

p{margin:0;}

.bold{font-weight:bold;}
.center{text-align:center !important;}
.right{text-align:right;}
.left{text-align:left;}
.clear{display:block; overflow:hidden;}
.flex{display:flex !important;}
hr{border:dashed 2px #039;}

ul{margin:0; padding:0;}
li{margin:0; padding:0; list-style:none;}


/*
a{color:#039; outline:none; text-decoration:underline;}
a:hover{color:#039; text-decoration:none;} */

.pc{display:block !important;}
.sp{display:none !important;}

.width90{max-width:90%; margin:0 auto;}




/* Hタグ
--------------------------------------------------------------------------------------------------------------- */
h1{font-size:2rem; margin: 0 0 10px 0; line-height:1.4;}
h2{font-size:1.8rem; margin: 0 0 30px 0; line-height:1.4;}
h3{font-size:1.8rem; margin: 0 0 20px 0; padding: 6px 0; line-height:1.4;}
h4{font-size:1.3rem; margin: 0 0 8px 0;line-height:1.4;}
h5{font-size:1.1rem; margin: 0 0 10px 0; line-height:1.4;}

.program h4 {color:#F03}


h3{position: relative; padding: 0 65px; text-align: center;}
h3:before{position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; content: ''; background: #000;}
h3 span {position: relative; padding: 0 1em; background: #fff;}


/* Rows */
.row0{color:#474747; background-color:#CA1233;}
.row1, .row1 a{color:#FFFFFF; background-color: #E6005B;}
.row2{color:#474747; background-color: #F4F2F2;}
.row3{color:#474747;}
.row4{color:#fff; background-color: #666;}
.row5, .row5 a{color:#C1C2C4; background-color:#2A2D34;}


/* Head Wrapper
--------------------------------------------------------------------------------------------------------------- */
#headwrapper{}
#header{max-width: 950px; margin:0 auto;}


#pageintoro{max-width: 950px; padding:30px 0px; margin:0 auto 50px auto;}


a.entry{display:block; font-size:1.5rem; padding:20px 20px; color:#A8003A; background-color:#FFDFDF; text-decoration:none;}
a.entry:hover{background-color:#A8003A; color:#FFF;}
a.entry.active{background-color:#A8003A; color:#FFF;}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{max-width: 950px; margin:0 auto; padding:0px 0px 30px 0px; display: block; text-align:left;}
.content_blue{background-color: #0054A7; padding:50px; color:#FFF; text-align:left;}

ul{margin:0 0 80px 0; overflow:hidden;}
ul.link{}
ul.link li{width:18.5%; float:left; margin:0 1.5% 0 0; font-size:1.2rem; background-color:#A8003A; color:#FFF; text-align:center;}
ul.link li:last-child{margin:0;}

ul.link li a{display:block; padding:10px 0; color:#A8003A; background-color:#FFDFDF; text-decoration:none;}
ul.link li a:hover{background-color:#A8003A; color:#FFF;}
ul.link li a.active{background-color:#A8003A; color:#FFF;}


/* Boxes
--------------------------------------------------------------------------------------------------------------- */
.program{padding:30px; border: solid 2px #e83174; background-color:#fff2f7;}


.border01{border: solid 1px #039;}
.underline01{background: linear-gradient(transparent 50%, #FBB 50%);}


table{width: 100%; border-collapse: collapse;}
table tr{border-bottom: solid 3px white;}
table tr:last-child{border-bottom: none;}
table th{border: none !important; position: relative; text-align: left; width: 25%; background-color: #FFDFDF; text-align: center; padding: 10px 0;}
table td{border: none !important; text-align:left; width: 75%; background-color: #F5F5F5; padding: 10px 0px 10px 20px;}




/* title
--------------------------------------------------------------------------------------------------------------- */
.title01 {border-bottom:solid 3px #039; padding: 5px 40px;}

.title02 {
  background: linear-gradient(transparent 65%, #39F 35%);
  padding: 0 25px;
  color:#fff;
}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:180px; height:180px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.8;}
#backtotop:hover{opacity:1;}



/* form
--------------------------------------------------------------------------------------------------------------- */
form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
label, input, textarea, select, button{display:block; resize:none; outline:none; color:inherit; font-size:inherit; font-family:inherit; vertical-align:top;}
label{margin-bottom:5px;}
:required, :invalid{outline:none; box-shadow:none;}
::placeholder{opacity:1;}/* Makes sure the placeholder text is not transparent */



/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{width:100%; padding: 35px 0; background-color: #E8E8E8; overflow:hidden;}
#footer_in{max-width:950px; margin:0 auto; font-size:0.7rem;}

#footer_left{width:35%; float:left;}
#footer_right{width:35%; float:right;}




/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
.btn02{transition:all .3s ease-in-out;}



/* botton
--------------------------------------------------------------------------------------------------------------- */
.btn01 {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 8px 20px;
  text-decoration: none;
  color: #fff;
  background: #F60;
  transition: .4s;
}

.btn01:hover {
  background: #F90;
  color: #fff;
}


/* font
--------------------------------------------------------------------------------------------------------------- */
.font01{font-size:1.3rem !important; line-height: 1.8;}
.font02{font-size:2rem !important; line-height: 1.5;}

.font_color01{color:#666;}



/* Grid 
-------------------------------------------------------------------------*/

.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter, .one_fifth, .two_fifth, .three_fifth, .four_fifth
{display:inline-block; float:left; margin:0 0 0 2%; list-style:none;}

.first{margin-left:0;}

.one_quarter{width:21.8421%;}
.one_half{width:48.95833%;}

.one_third{width:31.5%;}
.two_third{width:65.97222%;}
.three_quarter{width:73.94736%;}




/* Spacing
--------------------------------------------------------------------------------------------------------------- */
.nospace{margin:0 !important; padding:0 !important;}

.space_0{margin-top:0 !important; margin-bottom:0 !important;}

.btmspace_5{margin-bottom:5px;}
.btmspace_8{margin-bottom:8px;}
.btmspace_10{margin-bottom:10px;}
.btmspace_20{margin-bottom:20px;}
.btmspace_30{margin-bottom:30px;}
.btmspace_40{margin-bottom:40px;}
.btmspace_50{margin-bottom:50px;}
.btmspace_80{margin-bottom:80px;}
.btmspace_100{margin-bottom:100px;}


.inspace_5{padding:5px;}
.inspace_10{padding:10px;}
.inspace_15{padding:15px;}
.inspace_25{padding:25px;}
.inspace_30{padding:30px;}
.inspace_50{padding:50px;}
.inspace_80{padding:80px;}



/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width:950px){
	#header{width: 100%; margin: 0px auto;}
	.container{width: 92%; margin: 0px auto;}
	#serial{padding:50px 100px; background-color:#EFEFEF; overflow:hidden;}
	#pageintoro{width:94%; margin: 0px auto 30px auto;}
}



@media screen and (max-width:750px){
	
html, body{
	font-size:15px;
	line-height:1.6;
}

.flex{display:block !important;}

.container{padding:0px 0px 30px 0px;}	

.pc{display:none !important;}
.sp{display:block !important;}
	
	
h2 {font-size:1.7rem;}
h3 {font-size:1.6rem;}
h4 {font-size:1.2rem;}
	
#header{width:94%; margin: 0px auto;}
#pageintoro{width:94%; margin: 0px auto 30px auto;}

	
.width50_pc, .width70_pc{max-width:90%; margin: 0 auto;}	


	.one_third, .two_third, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}
	.one_half, .one_quarter{display:block; float:none; width:auto; margin:0 0 10px 0; padding:0;}
	
table, table th, table td{display:block; width:100%; box-sizing: border-box; border-collapse:collapse; padding:10px;}
table tr{border-bottom: solid 4px white;}


#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:5px; right:5px; width:90px; height:90px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}


.img50{width: 90%;}

.btn01{display:block;}


/* font
--------------------------------------------------------------------------------------------------------------- */
.font01{font-size:1.1rem !important;}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer_in{width:90%; margin:0 auto;}

#footer_left{width:100%; margin:0 0 30px 0; float:none;}
#footer_right{width:90%; margin:0 0 20px 0; float:none;}



}