@charset "utf-8";
/* CSS Document */

.pc_only{display: block;}
.sp_only{display: none;}
.clearfix:after {display: block;clear: both;content: "";}

#container{width: 75%; margin: 0px auto}
.top_img img{width: 100%; height: auto}

h2.page_title{text-align: center; font-size: 30px; font-weight: normal}
p.page_title_sub{text-align: center; font-size: 14px;}

/*********work**********/
.work{background: url(../images/work/bg.png) no-repeat top; background-size: 100% auto; padding-top: 50px}
.work .exp{font-size:14px; text-align: left; line-height: 24px; margin-bottom: 50px;}
.work_item{}
.work_item .item{width: 31.1%; margin-right: 3.3%; margin-bottom: 50px; float: left;}
.work_item .item a{color: inherit}
.work_item .item:hover{opacity: 0.7 !important}

.work_item .item:nth-child(3n){margin-right: 0;}
.work_item .item .img{width: 100%}
.work_item .item .img img{width: 100%; height: auto}
.work_item .item h4{font-size: 18px;}
.work_item .item p{font-size: 12px;}
.select-wrap{width: 30%; border-bottom: #000 solid 1px; margin: 0px 0px 30px 0px; position: relative; display: block;}
.select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;

    margin: 0;
    padding: 11px 35px 11px 11px;
    padding: .6875rem 2.1875rem .6875rem .6875rem;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
}

.entypo-down-open-mini:before {
    content: '▼';
    font-family: 'entypo',sans-serif;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 12px;
    right: .75rem;
    margin-top: -8px;
    margin-top: -.5rem;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1;
    color: #000;
}


.pager{text-align: center; font-size: 14px; padding-bottom: 50px;}
.pager span{ display: inline-block; border-bottom: #000 solid 1px; margin: 0px 20px;}
.pager span a{color: inherit}


/*-----------worksDetail-------------*/
.work_detail{background: url(../images/work/bg_detail.png) center center no-repeat; background-size: 100% auto; }
#worksDetSlideSp {display:none;}
.worksDetTT {font-size:28px;font-weight:bold;text-align:center;width:100%;padding-top:90px;margin-bottom:60px;text-indent:-45px;}
#worksDetailBox {width:720px;margin:0 auto;}
#worksMainImg {width:720px;max-width:720px;height:488px;max-height:488px;text-align:center;margin-bottom:25px;}
#worksMainImg img {max-width:720px;max-height:488px;}
#worksSlider {width:720px;overflow:hidden;margin-bottom:60px;}
#worksSlider li {width:106px;height:72px;overflow:hidden;float:left;margin-right:16px;}
#worksSlider li:last-child{margin-right: 0px;}
#worksSlider li a {display:block;}
#worksDetailBox h3 {font-size:14px;color:#000000;margin-bottom:5px;}
#worksDetailBox h4 {font-size:13px;color:#666666;margin-bottom:10px;}
#worksDetailBox #worksDetailInfo {font-size:12px;color:#666666;margin-bottom:25px;
line-height:18px;}
#worksDetailBox #worksDetailCopy {font-size:13px;color:#666666;margin-bottom:60px;line-height:20px;}
#worksDetReturnBt {width:280px;margin:0 auto;}


/*********voice**********/
.voice{ background: #E3E3E3;}
.voice #container{width:83%;/* width: 980px;*/ margin: 0px auto}
.voice_item{ position: relative}
.voice_item .item{width: 100%; padding-bottom: 20%; position: relative}
.voice_item .item:hover{opacity: 0.7}

.voice_item .item .img{
    width: 52%;
    transform: skewY(6deg);
    overflow: hidden;
}

.voice_item .item .img img {
    width: 100%;
    transform: skewY(-6deg) scale(1.2);
}

.voice_item .item .text{
    width: 52%;
    transform: skewY(6deg);
    overflow: hidden;
	height: 369px;
	background: #153374;
	position: absolute;
	right: 0;
	top: 12%;
	
	
}

.voice_item .item .inner{color: #FFF;text-align:left;transform: skewY(-6deg); padding-left: 13%; padding-top: 13%; padding-right: 13%}
.voice_item .item .inner h3{font-size: 30px;}
.voice_item .item .inner p.alpha{font-size: 18px; border-bottom: #FFF solid 1px;padding-bottom: 5px} 
.voice_item .item .inner p{font-size: 14px;}


/*********voice_detail**********/
.voice_detail{}


.voice_detail .top_img{position: relative;}
.voice_detail .top_img img{width: 44% !important;}
.voice_detail .top_img .inner{color: #FFF;text-align:left;position: absolute;

top: 50%;
left: 10%;
-webkit-transform: translate(0%,-50%);
-moz-transform: translate(0%,-50%);
-ms-transform: translate(0%,-50%);
-o-transform: translate(0%,-50%);
transform: translate(0%,-50%);
	
}
.voice_detail .top_img .inner h3{font-size: 30px;}
.voice_detail .top_img .inner p.alpha{font-size: 18px; border-bottom: #FFF solid 1px;padding-bottom: 5px} 
.voice_detail .top_img .inner p{font-size: 14px;}

.voice_detail .on_area,
.voice_detail .off_area .inner{width: 81%; margin: 0px auto; text-align: left; padding: 50px 0px; position: relative}
.voice_detail .on_area h3,
.voice_detail .off_area h3{font-size: 30px; color: #153374; margin: 30px 0px 10px 0px;}

.voice_detail .on_area p,
.voice_detail .off_area p{font-size: 14px; margin: 0px 0px 0px 0px; line-height: 24px}

.voice_detail .on_area .img,
.voice_detail .off_area .img{width:81%;}

.voice_detail .on_area .on,
.voice_detail .off_area .off{width:36%; position: absolute; top: 50px; right: 0}

.voice_detail .off_area{width: 100%; background: #153374; color: #FFF;}
.voice_detail .off_area h3{color: #FFF;}

.voice_detail .works_area{ width: 100%; background: url(../images/voice/bg_works.png) no-repeat; background-size: 100% auto; padding: 30px 0px;}
.voice_detail .works_area .work_item{width: 75%; margin: 0px auto; border-bottom: #000 solid 1px;}


.voice_detail .voice_area{
	padding: 20px 0px;
}

.voice_detail .voice_area .item{ width: 33.3%; float: left; position: relative;}

.voice_detail .voice_area .item:hover > .img {opacity: 0.4 !important;}
.voice_detail .voice_area .item:hover > .inner {display:block}
 
.voice_detail .voice_area  .inner{text-align:left;position: absolute; display: none;
top: 50%;
left: 10%;
-webkit-transform: translate(0%,-50%);
-moz-transform: translate(0%,-50%);
-ms-transform: translate(0%,-50%);
-o-transform: translate(0%,-50%);
transform: translate(0%,-50%);
}
.voice_detail .voice_area  .inner h3{font-size: 30px;}
.voice_detail .voice_area  .inner p.alpha{font-size: 18px; border-bottom: #000 solid 1px;padding-bottom: 5px} 
.voice_detail .voice_area  .inner p{font-size: 14px;}

/*0112Matsukawa*/
@media screen and (max-width: 760px) {
.sVoiceIn{position:relative;width:100%;height:400px;margin-bottom:20px;}
.sVoice{width:100%;height:400px;position:absolute;}
.sVoiceT{position:absolute;bottom:0px;background-color:#153374;color:#fff;width:100%;padding:1%;text-align:center;}
.sVoiceT h3{font-size:18px;}
}



/*********person**********/
.person{background: #eeeeee;}
.person #container{width: 100%;}

.person h2.catch{border: #000 solid 1px;transform: skewY(-6deg); display: inline-block; padding: 10px 10px 10px 5%; background: #FFF }
.person h2.catch div{font-size: 24px;}
.person .item{ width: 100%; position: relative; padding: 5% 0%}

.person .item .text{width:100%;height: 400px; border: #14306c solid 15px; background: #020a31; border-left:none; 
	border-right: none;transform: skewY(-6deg)}
.person .item .text .inner{width:36%;transform: skewY(6deg); text-align: left; padding: 0px 0px 0px 5% }
.person .item .text .inner .num{ font-size: 100px; color: #fff;-webkit-text-stroke: 1px #000; margin-top:-30px}
.person .item .text .inner h3{font-size: 45px; }
.person .item .text .inner p{font-size: 14px; line-height: 24px;}

.person .item .img{ width: 50%; transform: skewY(-6deg); position: absolute; right: 0; top: 2%; overflow: hidden; z-index: 2}
.person .item .img img{transform: skewY(6deg) scale(1.2);}

.person .item_1{color: #FFF;}
.person .item_2 .text{border: #e7da1f solid 15px; background: #e1c804; border-left:none; border-right: none;}
.person .item_3 .text{border: #e3e3e3 solid 15px; background: #d8d8d8; border-left:none; border-right: none;}

/*********company**********/
.company .tab{text-align: center; font-size: 21px; margin-bottom: 80px;}
.company .tab span{display: inline-block; margin: 0px 20px;}
.company .tab span a{color: #000}
.company .tab span a.current{color: #153374; font-weight: bold}
.company #container { width: 100%; background: url(../images/company/bg_1.png) no-repeat top; background-size: 100% auto}
.company #container .inner{/*width: 81.6%;*/ width: 980px; margin: 0px auto;}

.company .hd_message{margin-bottom: 100px;}
.company .hd_message .thank{ width: 48%; float: left;}
.company .hd_message .text{ width: 48%; float: right; font-size: 14px; text-align: left; line-height: 24px;}

/*0112Matsukawa*/
.company .hd_message .thank.koudou,.company .hd_message .text.koudou{width:50%;}
@media screen and (max-width: 760px) {
.company .hd_message .thank.koudou{margin-bottom:0;}
.company .hd_message .thank.koudou,.company .hd_message .text.koudou{float:none;width:100%;}

}

.company .info_area{width: 73%; margin: 0px auto;}
.company .info_area table{width: 100%; font-size: 14px; border-collapse: collapse; line-height: 28px; margin-bottom: 100px}
.company .info_area table tr{border-bottom: #000 solid 1px}
.company .info_area table th,
.company .info_area table td{font-weight: normal; text-align: left; vertical-align: top; padding: 30px 0px;}
.company .info_area table th{width: 20%;}
.company .info_area table td a{color:#888;}

/*********company(組織図)**********/
.company .group_1{width: 350px; margin: 80px auto 0px auto; text-align: left}
.company .group_1 .img{width: 192px; margin: 0px auto; text-align: left; font-size: 14px;}
.company .group_1 p{font-size: 14px; line-height: 24px}
.company .bg{width: 670px; margin: 0px auto; position: relative}
.company .bg .line_1{width:138px; float: left; }
.company .bg .line_2{width:138px; float: right }

.company .bg .group{width:100%; position: absolute; bottom: 0px; text-align: center }
.company .bg .group img{width:288px !important; } 


.company .ft_group{position: relative; margin-bottom: 80px;} 

.company .group_2{width: 350px; text-align: left; float: left;}
.company .group_2 .img{width: 192px; margin: 0px auto; text-align: left; font-size: 14px;}
.company .group_2 p{font-size: 14px; line-height: 24px}

.company .group_3{width: 350px; text-align: left; float: right}
.company .group_3 .img{width: 192px; margin: 0px auto; text-align: left; font-size: 14px;}
.company .group_3 p{font-size: 14px; line-height: 24px}

.company .ft_group .line_3{width:100%; position: absolute; top: 145px; text-align: center }
.company .ft_group .line_3 img{width:288px !important; } 

/*********company(挨拶)**********/
.greetng_area {margin: 50px auto 0px auto; padding-bottom: 50px}
.greetng_area .message{width: 511px; float: left; font-size: 14px; line-height: 28px; text-align: left}
.greetng_area .message .post{text-align: right;font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho",  serif;}
.greetng_area .message h3{text-align: right; font-size: 30px;font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho",  serif;}

.greetng_area .president{width: 431px; float: right;}


/*********RECRUIT**********/
.recruit #container{ width: 100%; margin: 0px auto}
.recruit #container .inner{ width: 980px; margin: 0px auto}
.recruit .exp{font-size:14px; text-align: left; line-height: 24px; margin-bottom: 50px; }

.recruit .blue{background:#153374; width: 100%; text-align: center; display: table;margin-bottom: 100px; padding: 30px 0px; }
.recruit .blue .item{display:table-cell; color: #FFF; text-align: left; padding-right: 20px}
.recruit .blue .item h3{ font-size: 16px;}
.recruit .blue .item p{ font-size: 14px; line-height: 24px}

.recruit #container .inner table{width: 100%; border-collapse: collapse; border-top: #AFAFAF solid 1px; margin: 50px 0px}
.recruit #container .inner table th{width:26%; background: #F2F2F2; text-align: center}
.recruit #container .inner table td{text-align: left; padding-left: 50px;}

.recruit #container .inner table th,
.recruit #container .inner table td{padding-top: 20px; padding-bottom: 20px; font-size: 14px; vertical-align: top; }
.recruit #container .inner table tr{border-bottom: #AFAFAF solid 1px}
.recruit #container .inner2{width:720px; margin: 0px auto; }
.recruit #container .inner2 .item{border: #AFAFAF solid 1px; text-align: center; padding: 15px 0px; font-size: 14px;}
.recruit #container .inner2 .line{width: 1px; background:#AFAFAF; margin: 0px auto; height:40px;}

.entry_button{background: url(../images/recruit/bg.png) no-repeat bottom; background-size: 100% 100%; padding: 150px 0px 100px 0px}
.entry_button .button{width: 340px; background: #153374; color: #FFF; text-align: center; margin: 0px auto; font-size: 14px; line-height: 50px;}

.entry_button .button a{display: block; width: 100%}
.entry_button .button:hover{opacity: 0.7}


/*************entry_form***************/
.entry_form #container{width: 720px; margin: 0px auto}
.entry_form #container .exp{font-size: 14px; text-align: left; border-bottom: #231815 solid 1px; line-height: 24px; padding: 30px 0px}
.entry_form #container .exp span{color:#C1272D}
.entry_form #container table{width: 100%;}
.entry_form #container table th{width: 20%; font-size: 14px; text-align: left; font-weight: normal; vertical-align: middle}
.entry_form #container table th span{color:#C1272D }
.entry_form #container input[type="text"] {width: 100%; height:50px; background: #F2F2F2; }
.entry_form #container textarea{width: 100%; height:186px; background: #F2F2F2; }
.entry_form #container table td{padding: 10px 0px; vertical-align: top; font-size: 14px;}

.submit_button{margin: 50px 0px 100px 0px;}
.submit_button .button{width: 340px; background: #153374; color: #FFF; text-align: center; margin: 0px auto; font-size: 14px; line-height: 50px; cursor: pointer}
.submit_button .button:hover{opacity: 0.7}

@media screen and (max-width: 760px) {
	.pc_only{display: none;}
	.sp_only{display: block;}
	#container{width: 90%; margin: 0px auto}
	
	/*********work**********/
	.work{background:none;}
	.select-wrap{width: 100%;}
	.work_item .item{width: 100%; margin: 0px 0px 15% 0px; float: none;}
	
	
	/*-----------worksDetail--------------*/

	#worksMainImg {display:none;}
	#worksSlider {display:none;}
	#worksDetSlideSp {display:block;}
	.worksDetTT {font-size:18px;font-weight:bold;text-align:center;width:100%;padding-top:25px;margin-bottom:30px;}
	#worksDetailBox {width:88%;margin:0 auto;}
	#worksDetailBox h3 {font-size:14px;color:#000000;margin-bottom:5px;}
	#worksDetailBox h4 {font-size:13px;color:#666666;margin-bottom:10px;}
	#worksDetailBox #worksDetailInfo {font-size:12px;color:#666666;margin-bottom:25px;
	line-height:18px;}
	#worksDetailBox #worksDetailCopy {font-size:13px;color:#666666;margin-bottom:60px;line-height:20px;}
	#worksDetReturnBt {width:100%;margin:0 auto;}
	
	.bx-wrapper img {
		width: 100%;
		display: block;
	}
	
	/*********voice**********/
	.voice #container{width:100%; margin: 0px auto}
	.voice_item .item .img{width: 100%;}
	.voice_item .item .text{width: 100%;transform: skewY(6deg);position: relative;}
	.voice_item .item .inner{ padding-left: 10%; padding-top: 5%; padding-right: 10%}
	
	/*********voice_detail**********/
	.voice_detail{}
	.voice_detail .top_img img{width: 62% !important; height: 365px}
	
	.voice_detail .on_area,
	.voice_detail .off_area .inner{width: 90%; margin: 0px auto;}
	
	
	.voice_detail .on_area .img,
	.voice_detail .off_area .img{width:100%;}

	.voice_detail .on_area .on,
	.voice_detail .off_area .off{width:50%; position: absolute; top: 0%; left: 0}
	
	.voice_detail .works_area .work_item{width: 90%;}

	.voice_detail .voice_area .item{ width: 100%; float: none; margin-bottom: 30px;}
	
	.voice_detail .voice_area .item > .img {opacity: 0.4 !important;}
	.voice_detail .voice_area .item > .inner {display:block}
	
	/*********person**********/

	.person h2.catch div{font-size: 12px;}
	
	.person .item .text{height: auto !important}
	.person .item .text .inner{width:90%; margin: 0px auto; padding: 0px;}
	.person .item .text .inner .num{ font-size: 72px;margin-top:-10px; display: inline-block; vertical-align: middle}
	.person .item .text .inner h3{font-size: 24px; display: inline-block; vertical-align: middle;}
	.person .item .img{ width: 100%; position: relative; overflow: hidden;transform: skewY(0deg)}
	.person .item .img img{transform: skewY(0deg) scale(1.2);}
	.person .item .text .inner p{padding-top: 5%;}
	
	/*********company**********/
	.company #container .inner{width: 90%; }
	
	.company .tab{font-size: 14px; margin-top: 30px}
	.company .tab span{margin: 0px 10px;}
	.company .hd_message .thank{ width: 100%; float: none; margin-bottom: 20px;}
	.company .hd_message .text{ width: 100%; float: none;}
	
	.company .info_area{width: 100%;}
	.company .info_area table th{width: 30%;}
	
	
	/*********company(組織図)**********/
	.company .group_1,
	.company .group_2,
	.company .group_3{width: 100%; float: none;}
	.company .group_1 .img,
	.company .group_2 .img,
	.company .group_3 .img{width: 50%; margin: 0px auto}
	
	/*********company(挨拶)**********/

	.greetng_area .message{width: 100%; float: none;}
	.greetng_area .president{width: 100%; float: none;}
	
	/*********RECRUIT**********/
	.recruit #container .inner{ width: 90%;}
	.recruit #container .inner2{width:90%;}
	.recruit .blue .item{display:block;padding-right:0px; margin-bottom: 40px}
	
	
	.recruit #container .inner table{border-top:none;}
	.recruit #container .inner table th{width:100%;text-align: left;padding-left: 20px; font-size: 14px;}
	.recruit #container .inner table td{text-align: left; padding-left: 0px; font-size: 12px;}

	.recruit #container .inner table th,
	.recruit #container .inner table td{padding-top: 20px; padding-bottom: 20px; display: block; }
	.recruit #container .inner table tr{border-bottom:none}
	
	.recruit #container .inner2 .item{ font-size: 12px; text-align: left; padding: 10px;}
	.entry_button .button{width: 90%;}
	
	/*************entry_form***************/
	.entry_form #container{width: 90%; margin: 0px auto}
	.entry_form #container table th{width: 100%; display: block}
	.entry_form #container table th span{color:#C1272D }
	.entry_form #container table td{display: block; margin-bottom: 10px;}
	.submit_button .button{width: 90%;}

}
.pri{width:80%;margin:0 auto;}
.pri h2{font-size: 4.8rem; color: #3e3a39; font-weight: 700; margin-bottom: .3em;text-align:center;margin-bottom:30px;}
.pri p{font-size: 1.4rem; line-height: 2rem; padding: 0 5%; text-align: justify;}