@charset "UTF-8";
/* CSS Document */
#wrap h2{
	border-left:6px solid #0F42B5;
	padding:4px 8px;
	font-size:20px;
	font-weight:bold;
	margin-bottom:16px;
}

#wrap h3{
font-size:20px;
margin-bottom:32px;
color:#005CAC;
font-weight:bold;
	position: relative;
}
}


#wrap h4{
font-size:20px;
margin-bottom:10px;
color:#000;
font-weight:bold;
border-bottom:2px solid #0F42B5;
}
#wrap h5{
font-size:18px;
margin-bottom:10px;
font-weight:bold;
}
#wrap h6{
font-size:16px;
margin-bottom:10px;
}
#wrap p{
line-height:2.0em;
}
#wrap .fontL{
font-size:20px;
}
#wrap .fontS{
font-size:12px;
}
.note{
font-size:12px;
color:#333;
}
strong{
font-weight:bold;
}
.right{
text-align:right;
}
.center{
text-align:center;
}
.red{
color:#CC0000;
}
#wrap ul{
margin:0 0 16px 20px;
}
#wrap ul li{
	line-height:1.6em;
	margin-bottom:16px;
	list-style-type: disc;
}
#wrap ol{
margin:0 0 16px 40px;
}
#wrap ol li{
list-style-type: decimal;
line-height:2.0em;
margin-bottom:16px;
}
#wrap dt{
margin-bottom:8px;
}
#wrap dd{
margin-bottom:20px;
padding-left:8px;
}
#wrap table{
width:100%;
}
#wrap table th{
vertical-align:top;
width:20%;
font-weight:bold;
}
#wrap iframe{
	max-width:100%;
}
@media only screen and (min-width: 768px) {
#wrap h2{
	border-left:10px solid #0F42B5;
	padding:2px 12px;
	font-size:32px;
	margin-bottom:32px;
}
#wrap h3{
font-size:26px;
margin-bottom:56px;
}

#wrap dd{
margin-bottom:30px;
padding-left:14px;
}
#wrap table th{
border-top: 1px solid #595757;
border-bottom: 1px solid #707070;
	font-size: 16px;
padding: 20px 8px;
}
#wrap table td{
border-top: 1px solid #595757;
border-bottom: 1px solid #707070;
	font-size: 16px;
padding: 20px 12px;
}
}
@media only screen and (max-width:768px) {
#wrap table tr{
display: block;
margin-bottom: 10px;}
#wrap table th{
border-bottom: none;
display: block;
width: 100%;
padding: 6px 4%;}
#wrap table td{
border-bottom: 1px solid #595757;
display: block;
width: 100%;
padding: 6px 4%;}
}

.block{
clear:both;
padding-bottom:20px;
}
.main-inner{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
}

.hidden{
display:none;
}


.Lbox{
float:left;
width:50%;
padding:0 1%;
margin-bottom:20px;
}
.Rbox{
float:right;
width:50%;
padding:0 1%;
margin-bottom:20px;
}
@media only screen and (min-width: 768px) {
.block{
padding-bottom:80px;
}
.main-inner{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
}
.Lbox{
float:none;
width:100%;
padding:0 1%;
margin-bottom:20px;
}
.Rbox{
float:none;
width:100%;
padding:0 1%;
margin-bottom:20px;
}

}


.floatL,.alignleft,img.alignleft{
	margin:0 auto 30px;
	display: block;
	text-align:center;
}
.floatR,.alignright,img.alignright{
	margin:0 auto 30px;
	display: block;
	text-align:center;
}
.aligncenter{clear: both;display: block;margin:auto;}

.center{
	text-align:center;
}

@media only screen and (min-width: 768px) {
.floatL,.alignleft,img.alignleft{
	float:left;
	margin:0 30px 30px 0;
}
.floatR,.alignright,img.alignright{
	float:right;
	margin:0 30px 0 30px;
}
}


/* interview */
#interview{
	margin-top:30px;
	padding:30px 0;
	background:#FFF url(../images/top/bg_interview.png) no-repeat top center;
	background-size: auto 40px;
}
#interview h2{
	border:none;
	text-align:center;
}

.pointBox{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
}
.pointBox .imgBox {
	text-align:center;
	margin-bottom:20px;
	position: relative;
	 line-height:0;
}
.txtBox {
	z-index:99;
}
.point1{
	position: relative;
	margin-bottom:40px;
}
.point1 .bg{
	position: absolute;
	top:330px;
	left:-8px;
	background-color:#E5EFF7;
	width:600px;
	height:58%;
}

.point2{
	position: relative;
	margin-bottom:40px;
}
.point2 .bg{
	position: absolute;
	top:330px;
	right:-8px;
	background-color:#E5EFF7;
	width:600px;
	height:58%;
}

.point3{
	position: relative;
	margin-bottom:3px;
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
}
.point3 .txtBox {
	z-index:99;
	padding-top:40px;
}
.point3 .bg{
	position: absolute;
	top:60px;
	left:-8px;
	background-color:#E5EFF7;
	width:600px;
	height:95%;
}

#message{
	padding:30px 0;
	background: url(../images/top/bg_intro.png), linear-gradient(to right, #29A1D8, #005CAC);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
#message h2{
	border:none;
	text-align:center;
}
#message h2 img{
	width:60%;
}
#message .messageBox{
	background-color:#FFF;
	border-radius:5px;
	padding:30px 10px;
	color:#005CAC;
}

#workflow{
	padding:30px 0;
	background: #E5EFF7 url(../../newgrad/voice/08/images/bg_workflow.png) no-repeat center top;
	background-size: auto 40px;
	text-align:center;
}
#workflow h2{
	border:none;
	text-align:center;
}
#workflow .flowBox{
	padding:0 10px;
	margin:0 auto;
}

#other{
	padding:30px 0;
	text-align:center;
}
#other h2{
	border:none;
	text-align:center;
}
#other .otherBox{
	width:90%;
	margin:0 auto;
	padding:0;
}
#other p.bt{
	margin:20px 0 0;
}
#other .bt a{
	background:#000 url(../images/top/bt_arrow2.png) no-repeat;
	background-position: left 15% center;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	display:block;
	width:80%;
	padding:10px 0;
	margin:0 auto;
}

#ftLink{
	background-color:#E6E6E6;
	padding:20px 0;
}

#ftLink .container{
	position:relative;
}
.bt_recruit{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
	align-items:center;
}
.bt_recruit .btn{
	padding:0 10px;
	margin:0 1%;
	width:46%; 
	text-align:center;
}

@media only screen and (min-width: 768px) {
#interview{
	margin-top:60px;
	padding:80px 0 120px;
	background-size: auto auto;
}
.pointBox{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	width:1000px;
	margin:0 auto;
}
.point1{
	margin-bottom:120px;
}

.point1 .pointBox div.imgBox {
	flex: 0 0 600px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 2;/* 回り込みを右へ */
}
.point1 .pointBox div.txtBox {
	flex: 1 1 400px;/* ウィンドウ幅に連動して伸縮 */
	order: 1;/* 回り込みを右へ */
	padding-top:100px;
}

.point1 .bg{
	position: absolute;
	top:130px;
	left:-600px;
	background-color:#E5EFF7;
	width:1200px;
	height:80%;
}

.point2{
	margin-bottom:120px;
}

.point2 .pointBox div.imgBox {
	flex: 0 0 600px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 1;/* 回り込みを右へ */
}
.point2 .pointBox div.txtBox {
	flex: 1 1 400px;/* ウィンドウ幅に連動して伸縮 */
	order: 2;/* 回り込みを右へ */
	padding-top:100px;
}

.point2 .bg{
	position: absolute;
	top:130px;
	right:-600px;
	background-color:#E5EFF7;
	width:1200px;
	height:80%;
}

.point3{
	width:1000px;
	margin:0 auto 30px;
}
.point3 .txtBox {
	padding-top:10px;
}

.point3 .bg{
	position: absolute;
	top:30px;
	left:-600px;
	background-color:#E5EFF7;
	width:1700px;
	height:100%;
}

#message{
	padding:120px 0 120px;
}
#message h2 img{
	width:auto;
}

#message .messageBox{
	padding:80px 150px;
}

#workflow{
	padding:80px 0 120px;
	background-size: auto auto;
}
#workflow .flowBox{
	width:1000px;
	margin:0 auto;
	padding:0;
}

#other{
	padding:120px 0 120px;
}
#other .otherBox{
	width:800px;
	margin:0 auto;
	padding:0;
}
#other p.bt{
	margin:60px 0 0;
}
#other .bt a{
	width:350px;
	padding:20px 0;
}

.bt_recruit .btn{
	margin:0 1% 60px;
}

#ftLink{
	padding:60px 0 0;
}
}