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


html{overflow-x:hidden;}
html, body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif !important;
	color: #333333;
	margin:0 !important;
	padding:0 !important;
	font-size:17px;
	line-height:1.6;
}

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;}


.width50, .width50_pc{max-width:50%;}
.width70_pc{max-width:70%;}

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

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



/* Hタグ
--------------------------------------------------------------------------------------------------------------- */
h1 {font-size:1.9rem; margin: 0; line-height:1.4;}
h2 {font-size:2.1rem; margin: 0 0 30px 0; line-height:1.4; font-weight:bold; color:#003399;}
h3 {font-size:1.5rem; margin: 0 0 10px 0; padding: 6px 0; line-height:1.4; color:#003399; border-bottom:dashed 2px #003399;}
h4 {font-size:1.3rem; margin: 0 0 8px 0;line-height:1.4; color:#003399;}
h5 {font-size:1.3rem; margin: 0 0 10px 0; padding:10px 0; line-height:1.4; background-color:#DFEBFF; text-align:center; color:#003399;}



/* Head Wrapper
--------------------------------------------------------------------------------------------------------------- */
#headwrapper{}
#header{margin:0 auto;}




/* 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;}



/* Boxes
--------------------------------------------------------------------------------------------------------------- */

#flow{width:90%; margin:0 auto; overflow:hidden;}
.flow_box{display:flex; border:solid 2px #039; overflow:hidden;}
.flow_left{width:10%; float:left; background:#039; padding:2%; text-align:center}
.flow_right{width:80%; float:right; padding:2%;}

.recruit_box{width:100%; border-top:dashed 3px #039; padding: 15px 0; font-size:1.2rem; overflow:hidden;}
.recruit_left{width:15%; float:left; color:#039;}
.recruit_right{width:83%; float:right;}

.recruit_box:last-child{border-top:dashed 3px #039; border-bottom:dashed 3px #039;}


.border01{border: solid 1px #039;}



table{width: 100%; border-collapse: collapse;}
table tr{border-bottom: solid 2px white;}
table tr:last-child{border-bottom: none;}
table th{border: none !important; position: relative; text-align: left; width: 25%; background-color: #B9DFFF; 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 */

#newsletter input, #newsletter button, #newsletter select, #newsletter textarea{border:1px solid #06C; margin: 0 0 10px 0; border-radius:22px; vertical-align: top;}
#newsletter input, #newsletter textarea{display:block; width:90%; padding:8px; vertical-align:top;}
#newsletter select{padding:8px; font-size:inherit;}
#newsletter button{padding:8px 50px 10px; border:none; background:#CCC; text-transform:uppercase; font-size:1.2rem; font-weight:700; cursor:pointer;}
#newsletter input[type="radio"]{display:inline-block; width:5%; outline:none; font-size:inherit; vertical-align: bottom;}
#newsletter input[type="checkbox"]{display:inline-block; width:20px; outline:none; font-size:inherit; vertical-align:bottom;}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{width:100%; color:#FFF; padding: 35px 0; background-color:#00C; overflow:hidden;}
#footer_in{max-width:950px; margin:0 auto;}

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




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




/* botton
--------------------------------------------------------------------------------------------------------------- */
.btn01{border:double 4px #1d2088 !important; text-decoration:none; margin:0 auto; font-size:0.9rem; padding: 6px 10px;}
.btn01:hover{color:#FFFFFF; background-color:#1d2088; text-decoration:none !important;}



/* 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%;}





/* 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:900px){
	#header{width: 100%; margin: 0px auto;}
	.container{width: 92%; margin: 0px auto;}
	#serial{padding:50px 100px; background-color:#EFEFEF; overflow:hidden;}
}



@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.3rem;}
h4 {font-size:1.2rem;}
	
#header{width: 100%; margin: 0px auto;}
	
.width50_pc, .width70_pc{max-width:90%; margin: 0 auto;}	


	.one_third, .two_third{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%;}

#flow{width:100%;}
.flow_left{width:20%; vertical-align:middle;}
.flow_right{width:70%;padding:3%;}

.recruit_left{width:30%; float:left; color:#039;}
.recruit_right{width:68%; float:right;}


.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;}



}