@charset "utf-8";
/*****************************************************
	
	全ての要素をリセット
	各ブラウザの表示を統一するための設定です
	
*****************************************************/
html {overflow-y: scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin: 0;padding: 0;outline:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style: normal;}
table {	border-collapse: collapse;border-spacing: 0;}
caption,p {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;text-align:left;}
img,abbr,acronym,fieldset {border: 0;}
li {list-style-type: none;}
img{vertical-align:middle;}
.line {font-size:1px;line-height:1px;}

 /* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


/*--- default ---*/
body {
	color: #111;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
	line-height:2em;
	letter-spacing:0.05em;
	-webkit-text-size-adjust: 100%;
}

/*--- Safari用のハックは、Chromeに適用されないようにする ---*/
@supports (-webkit-touch-callout: none) {
  body {
    /* Safari用のハック */
    height: -webkit-fill-available;
  }
}
table{
	border-collapse:collapse;
}


.clear{
	clear:both;}

.min{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

}

.nav,#message h2,#service h2,#recruit .titlebox,#company .company_box h2,#company .company_box ul li .title,#main .box .maincopy,.mean-nav,.mojikazari_a,.mojikazari_b,#contents h1,#contents .midashikazari,.sp-copy{
	font-family: 'Muli', sans-serif;
	letter-spacing:0.05em;
	}
.front_rogo,#message .syamei,footer .syamei,#main .box .subcopy,.page_rogo,.sp-copy{
	font-family: 'M PLUS 1p', sans-serif;
	letter-spacing:0.05em;
}
#contents .midashikazari,.servicemenu_inner{font-family: 'Anton', sans-serif;}
/*****************************************************
	
	コンテンツ
	
*****************************************************/
#wrap{
	width: 100%;
	height: auto;
	margin:0 auto;
	overflow:hidden;
	

}
a:link {
	color:#111;
	text-decoration:none;
}

a:visited{
	color:#111;
	text-decoration:none;
}

a:hover{                     
	text-decoration: none;
}

a:active{
	text-decoration:none;
}
.clear:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clear            { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */
a,a img {
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
a img:hover,.shopnav a:hover,.foot-nav a:hover  {
    opacity: 0.6;
    filter: alpha(opacity=60);
} 
a[href^="tel:"] {
    pointer-events: none;
}
@media screen and (max-width:768px)	{
a[href^="tel:"] {
    pointer-events: auto!important;
}

}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
border:1px solid #ccc;
margin:50px auto;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.pagetop {
	display: none;
	position: fixed;
	bottom: 70px;
	right: 50px;
	z-index:300;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	border-radius: 50px;	
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	text-align: center;
	color: #fff;
	font-size: 150%;
	text-decoration: none;
	line-height: 50px;
	behavior:url("PIE.htc");
}
.pagetop a:hover {
	background-color:#b2a856;
}

@media only screen and ( max-width : 640px ) {
	.pagetop {
	bottom: 20px;
	right: 30px;
}
}


/*****************************************************
	
	メインヘッダー
	
*****************************************************/
header{
	width:100%;
	margin:0 auto;
	position:relative;
	z-index:100;
	position:absolute;
	min-height:80px;
	/* overflow:hidden; */
}
header .rogomark{
	width:280px;
	position:relative;
	top:40px;
	left:10%;
}
header .rogomark img{
	width:100%;
}
.rogomoji-jp{
	font-family: 'Noto Serif JP', serif!important;
}
.page .rogomark{
	width:60px;
	position:relative;
	top:10px;
	left:20px;
}
header .front_rogo,.page_rogo{
	position:absolute;
	top: 45px;
	left: 150px;
	font-size: 170%;
	font-weight: 900;
	z-index: 0;
	line-height:1.3em;
}
header .front_rogo{
	display:none;
}
header .front_rogo span{
	font-size: 60%;
	display:block;
	font-weight: 500;
}

.h_nav{
	position:fixed;
	right:-0px;
	top:0px;
	-webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}

.page_rogo{
	position:absolute;
	top:25px;
	left:90px;
	font-size: 140%;
	font-weight: 900;
	z-index: 0;
	line-height:1.3em;
}

@media only screen and ( max-width : 1300px ) {
header .rogomark{
	width: 180px;
	left:40px;
	top: 10px;
}
header .front_rogo{
	color:#fff;
	top:45px;
	left:140px;
	font-size: 160%;
}


}
@media only screen and ( max-width : 900px ) {
header .rogomark{
	width:135px;
	top: 10px;
	left:20px;
}
header .front_rogo{
	top:100px;
	font-size: 140%;
	left:20px;
}


}


@media only screen and ( max-width : 500px ) {
header .rogomark{
	width:115px;
	top:10px;
	
}
.page_rogo{
	top: 30px;
	left:80px;
	font-size: 105%;
}
.page .rogomark{
	width:60px;
	position:relative;
	top:10px;
	left:12px;
	
}

}
@media only screen and ( max-width : 360px ) {
.page_rogo{
	top: 20px;
	font-size:95%;
	
}
.page_rogo span{
	display:block;
}
}
.nav{
	overflow:hidden;
	float:right;
	width: 660px;
	opacity:0;
	margin:25px 2% 0 0;
	-webkit-animation: nav 0s ease 2.4s 1 normal forwards;
	animation:nav 0s ease 2.4s 1 normal forwards;
	
}
.nav li a{
	font-size:85%;
	float:left;
	width: 110px;
	position:relative;
	text-align:center;
}

.nav li a:after{
	content:'';
	width:120px;
	bottom:0px;
	left:50%;
	margin-left:-60px;
	position:absolute;
	border-bottom:1px solid #c6a252;
	opacity:0;
	 -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
.nav li a:hover:after{
	content:'';
	width:50%;
	bottom:0px;
	margin-left:-25%;
	border-bottom:1px solid #c6a252;
	opacity:1.0;
}

.menubg{
	width:0px;
	height:80px;
	right:-20px;
		 background:#111;

	top:0px;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	      -ms-skew(-20deg);
	     transform:skew(-20deg);
	     position:absolute;
	     z-index:-10;
	     -webkit-animation: menubg 1.5s ease 1.90s 1 normal forwards;
	animation: menubg 1.5s ease 1.90s 1 normal forwards;
}

.menubg_wh{
	width:0px;
	height:80px;
	right:-20px;
		 background:rgba(255,255,255,1.0);
	top:0px;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	      -ms-skew(-20deg);
	     transform:skew(-20deg);
	     position:absolute;
	     z-index:-15;
	     -webkit-animation: menubg_wh 1.5s ease 1.90s 1 normal forwards;
	animation: menubg_wh 1.5s ease 1.90s 1 normal forwards;
	-webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
	box-shadow: 0 0 0px #aaa;
}
.nav_scrollhead{
	box-shadow: 0 0 5px #aaa;
	background:rgba(255,255,255,0.9);
}



@keyframes menubg{
	0% {
		width: 0;
	}
	30% {
		width: 780px;
	}
	70% {
		width: 780px;
	}
	100% {
		width: 0;
	}
}
@-webkit-keyframes menubg{
	0% {
		width: 0;
	}
	30% {
		width: 780px;
	}
	70% {
		width: 780px;
	}
	100% {
		width: 0;
	}
}
@keyframes nav{
	0% {opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 100;}
}
@-webkit-keyframes nav{
	0% {opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 100;}
}
@keyframes menubg_wh{
	0% {width: 0px; }
	70% { width: 780px; }
	100% { width: 780px;}
}
@-webkit-keyframes menubg_wh{
	0% {width: 0px; }
	70% { width: 780px; }
	100% { width: 780px;}
}

@media only screen and ( max-width : 1150px ) {
.menubg,.menubg_wh,.nav{
	display:none;
}

}

footer{
	width:100%;
	margin:0 auto;
	position:relative;
	background:#111;
	color:#fff;
	font-size:90%;
	padding:70px 0;
	z-index:10;
}
footer .foot_rogomark{
	width:80px;
	margin:0 auto 15px;
	
}
footer .foot_rogomark img{
	width:100%;
	
}
footer p{
	text-align:center;
	line-height:2em;
	padding:0 2em;
}
footer a{
	color:#fff;
}
footer .syamei{
	font-size:115%;
	margin-bottom:20px;
}
footer .copyright{
	text-align:center;
	font-size:80%;
	margin:50px auto 0px;
	line-height:1.5em;
	width:90%;
	
}

#message{
	margin: 200px auto;
	position:relative;
	padding:200px 0;
	max-width:1600px;
}

#message .bg-wh{
	width: 55%;
	height: 100%;
	left: 50%;
	margin-left: -27.5%;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	-ms-skew(-20deg);
	transform:skew(-20deg);
	background: #fff;
	position:absolute;
	top:0;
	z-index:-5;
}
#message .bg-gaikan{
	background:url(../image/front/gaikan.jpg);
	background-repeat:no-repeat;
	background-position: left -160px top -60px;
	top:0px;

}
#message .bg-daihyo{
	background:url(../image/front/daihyo.jpg);
	background-repeat:no-repeat;
	left:50%;
	bottom:0;
	background-position: left 155px top -10px;
}
#message .bg-gaikan,
#message .bg-daihyo{
	background-size:100%;
	width: 50%;
	height:60%;
	position:absolute;
	z-index:-10;
}
@media only screen and ( max-width : 1300px ) {
#message{
	margin: 130px auto 200px;
	
}
#message .bg-gaikan{
	background:url(../image/front/gaikan.jpg);
	background-position: right 130% top -60px;
	background-size:550px;
	background-repeat:no-repeat;
}
#message .bg-daihyo{
	background:url(../image/front/daihyo.jpg);
	background-position: right -120px top -30px;
	background-size:600px;
	background-repeat:no-repeat;

}
}

@media only screen and ( min-width : 1500px ) {

#message .bg-gaikan{
	background:url(../image/front/gaikan.jpg);
	background-position: right 130% top -60px;
	background-size:600px;
	background-repeat:no-repeat;
}
#message .bg-daihyo{
	background:url(../image/front/daihyo.jpg);
	background-position: right -120px top -30px;
	background-size:600px;
	background-repeat:no-repeat;

}
}
#message h2{
	font-weight:900;
	text-align:center;
	font-size:180%;
	margin:0 auto 30px;
}
#message .messegebox{
	width: 40%;
	margin:0 auto;
}
#message .syamei{
	text-align:center;
	margin:35px 0 0px;
	font-size:90%;
	font-weight: 800;
}
#message .name{
	text-align:center;
	font-size:120%;
}
#message .katagaki{
	font-size:75%;
	margin-right:0.5em;
}
@media only screen and ( max-width : 1200px ) {
	#message .bg-gaikan{
	background-position: left -130px top -30px;

}
}
@media only screen and ( max-width : 1200px ) {
#message{
	padding:0;
	margin:80px auto 150px;
}

#message .bg-wh{
	display:none;

}

#message .bg-gaikan,
#message .bg-daihyo{
	background-size:cover;
	width: 50%;
	height:350px;
	z-index:-10;
	background-position:center;
}
#message .bg-gaikan{
	box-sizing:border-box;
	border-right:5px solid #fff;
	
}
#message .bg-gaikan{position:absolute;}
#message .bg-daihyo{position:relative;}
#message h2{
	margin:70px auto 30px;
}

#message .messegebox{
	width:85%;
}
}

@media only screen and ( max-width : 700px ) {
	#message .bg-gaikan,#message .bg-daihyo{
	height:200px;
	box-sizing:border-box;
	
}

}
#sns{
	background:#145c8d;
	color:#fff;
	padding:170px 0 150px;
	position:relative;
}
#sns:after{
	position:absolute;
	content:'NEWS';
	top:40px;
	left:50px;
	font-size:650%;
	-webkit-writing-mode:vertical-rl;
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
}
#sns .fb-box{
	width:90%;
	max-width:500px;
	margin:0 auto;
}
@media only screen and ( max-width : 800px ) {
#sns:after{
	position:absolute;
	content:'NEWS';
	top:100px;
	left:50%;
	margin-left:-1.5em;
	font-size:220%;
	-webkit-writing-mode:horizontal-tb;
	-ms-writing-mode:lr-tb;
	writing-mode:horizontal-tb;
}
#sns{
	
	padding:190px 0 150px;
}
}
#service{
	background:#1e2c4b;
	color:#fff;
	padding:100px 0 50px;
}
#service h2{
	font-weight:900;
	text-align:center;
	font-size:220%;
}
#slide_content{
	width:100%;
	max-width:1400px;
	margin:80px auto;
}

.service_box{
	width: 100%;
	margin:0 auto;
	overflow:hidden;
	height:500px;
	background:#1e2c4b;
	position:relative;
}
.service_box .inner{
    width:85%;
    margin:0 auto;
	
}
.service_box .photo{
	float:right;
	width:60%;
	overflow:hidden;
	position:relative;
}
.service_box .photo img{
	height:500px;
	width:auto;
	position:relative;
	left:50%;
	margin-left:-405px;
	
}

.service_box .info{
	float:left;
	width:30%;
	padding:5%;
	background:#111;
	min-height:500px;
		text-align:center;

}
.service_box .title{
	margin:20px auto;
	font-size:120%;
	border-bottom:1px solid #b2a856;
	padding:0 1em 10px;
	display:inline-block;

}
.service_box .naiyo{
	font-size:95%;
	line-height:2.0em;
	padding:0 1em;
	margin:15px 0 35px;

}
.service_box .bt a{
	border:1px solid #b2a856;
	color:#b2a856;
	font-size:85%;
	padding:7px 50px;


}
.service_box .bt a:hover{
	border:1px solid #b2a856;
	background:#b2a856;
    padding:7px 70px;
    color:#111;
}

@media only screen and ( max-width : 900px ) {
.service_box{
	height:auto;
	
}
.service_box .photo{
	float:none;
	width:100%;
	overflow:hidden;
	height:auto;
}
.service_box .photo img{
	height:auto;
	width:100%;
	position:relative;
	left:0%;
	margin-left:auto;
}

.service_box .info{
	float:none;
	width:100%;
	padding:20px 50px 60px;
	box-sizing:border-box;
	background:#111;
	min-height:auto;
		text-align:center;

}

}
@media only screen and ( max-width : 500px ) {
.service_box .photo{
	float:none;
	width:100%;
	overflow:hidden;
	height:auto;
}
.service_box .photo img{
	height:auto;
	width:100%;
	position:relative;
	left:0%;
	margin-left:auto;
}
.service_box .info{
	float:none;
	width:100%;
	padding:20px 10px 60px;
	box-sizing:border-box;
	background:#111;
	min-height:auto;
		text-align:center;

}
.service_box .naiyo{
	font-size:88%;
	line-height:1.7em;
	

}
}

#recruit{
	position:relative;
	overflow:hidden;
	background: #111;
}
#recruit .titlebox{
	position:absolute;
	z-index:10;
	width:250px;
	border:3px solid #fff;
	top:30px;
	left:30px;
	font-size:240%;
	text-align:center;
	line-height:1em;
	padding:10px 0 5px;
	color:#fff;
	-webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;

}
#recruit .titlebox span{
	display:block;
    font-size:50%;
    border-top:1px solid #fff;
    margin:10px 0 0;
    padding-top:5px;

}
#recruit .bg{
	
	text-align:center;
}
#recruit .bg img{
	width:96%;
	padding:2%;
	max-width:1570px;
}

@media only screen and ( max-width : 900px ) {
	#recruit .titlebox{
	position:relative;
	z-index:10;
	width:50%;
	border:0px solid #fff;
	top:0;
	left:0;
	margin:5% auto;
	padding:10px 0 5px;
	box-sizing:border-box;
	font-size:180%;
	

}
#recruit .bg img{
	width:94%;
	padding:0 3% 3%;
	max-width:1570px;
}
}
@media only screen and ( max-width : 600px ) {
		#recruit .titlebox{
	
	font-size:150%;
	

}
}

#company{
	margin:170px auto;
	background:url(../image/front/bg_company.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding: 40px 0 80px;
	position:relative;
}

#company .titleline{
	width: 5px;
	height: 260px;
	left:50%;
	margin-left:-740px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	      -ms-skew(20deg);
	     transform:skew(20deg);
	background: #b2a856;
	top:-170px;
	position:absolute;
	z-index:10;
}
#company .bg_line{
	width: 35%;
	height: 170%;
	left:8%;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	 -ms-skew(-20deg);
	     transform:skew(-20deg);
	background: #f6f6f6;
	top:-170px;
	position:absolute;
	z-index:5;
}
#company .bg_line_wh{
	width: 50%;
	height: 150%;
	left:-18%;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	      -ms-skew(-20deg);
	     transform:skew(-20deg);
	background: #fff;
	top:-80px;
	position:absolute;
	z-index:0;
}
#company .company_box{
	width:90%;
	max-width:1300px;
	margin:0 auto;
	position:relative;
	z-index:10;
}
#company .company_box h2{
	font-weight:900;
	font-size:220%;
	margin:0 2% 30px;
	
}
#company .company_box .read{
	font-size:95%;
	line-height:1.8em;
	width:90%;
	max-width: 350px;
	margin: 0 2%;
}
#company .company_box .midashi{
	font-size: 110%;
	line-height:1.5em;
	font-weight:bold;
	margin:80px 2% 20px;
}
#company .company_box .midashi span{
	display:block;
	
	
}
#company .company_box ul{
	overflow:hidden;
	margin:0 auto;
	
}
#company .company_box ul li a{
	background:#fff;
	overflow:hidden;
	width:29.3%;
	float:left;
	margin:0 2%;
	position:relative;
	
}
#company .company_box ul li a:after{
	content:'';
	width: 0px;
	height: 0px;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #b2a856;
	position:absolute;
	bottom:10px;
	left:10px;

	
}

#company .company_box ul li .photo{
	width: 45%;
	float:right;
	position:relative;
}

#company .company_box ul li .photo img{
	width:100%;
	-webkit-transition: 0.5s ease-in-out;
       -moz-transition: 0.5s ease-in-out;
         -o-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;

}
#company .company_box ul li .photo img:hover{
	opacity:0.7;

}
#company .company_box ul li .title{
	padding:17px 23px;
	font-size:115%;
	line-height:1.5em;
	font-weight:900;
	position: absolute;
	
}
#company .company_box ul li .title span{
	display:block;
	font-size:70%;
}



@media only screen and ( max-width : 1450px ) {

#company .titleline{
	width: 5px;
	height: 180px;
	left:50%;
	margin-left:-47%;
	top:-170px;
	
}

}

@media only screen and ( max-width : 1000px ) {
#company{
	margin:170px auto;
	background:none;
	position:relative;
}
#company:after{
	content:'';
	position:absolute;
	z-index:5;
	width:100%;
	height:300px;
	background:url(../image/front/bg_company.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	bottom:0;
}
#company .bg_line{
	width: 35%;
	height: 170%;
	left:8%;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	 -ms-skew(-20deg);
	     transform:skew(-20deg);
	background: #f4f4f4;
	top:-170px;
	position:absolute;
	z-index:5;
}
#company .titleline{
	width: 5px;
	height: 250px;
	left:50%;
	margin-left:-250px;
	top:-170px;
	
}
#company .company_box h2{
	text-align:center;
	margin-bottom:50px;
	
}
#company .company_box .read{
	margin: 0 auto;
}
#company .company_box .midashi{
	font-size: 110%;
	line-height:1.5em;
	font-weight:bold;
	margin:80px 2% 20px;
}
#company .company_box .midashi span{
	display:inline;
	
	
}




#company .company_box ul li a{
	background:#fff;
	overflow:hidden;
	width:29.3%;
	float:left;
	margin:0 2%;
	position:relative;
	height:auto;
	
}
#company .company_box ul li a:after{
	content:'';
	width: 0px;
	height: 0px;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #b2a856;
	position:absolute;
	bottom:10px;
	left:10px;

	
}

#company .company_box ul li .photo{
	width: 100%;
	float:none;
	position:relative;
	overflow:hidden;
}
#company .company_box ul li .photo img{
	width: 100%;
}

#company .company_box ul li .title{
	font-size:100%;
	text-align:center;
	position:relative;
	
}






}


@media only screen and ( max-width : 650px ) {

#company{
	padding-bottom:30px;
}
#company:after{
	height:560px;
	
}
#company .titleline{
	width: 4px;
	height: 180px;
	left:50%;
	margin-left:-150px;
	top:-170px;
	
}
	#company .company_box ul{
	margin:70px auto 0;
	width:300px;
}
#company .company_box .midashi{
	font-size: 110%;
	text-align:center;
	margin:80px 2% 20px;
}
#company .company_box ul li a{
	background:#fff;
	overflow:hidden;
	width: 95%;
	float:left;
	margin:0px auto 20px;
	position:relative;
	height:140px;
}


#company .company_box ul li .photo{
	width: 140px;
	float:right;
	position:relative;
	height:140px;
	overflow:hidden;
}
#company .company_box ul li .photo img{
	width: auto;
	height:140px;
}
#company .company_box ul li .photo:after{
	width:0;
	height:0;
 
}

#company .company_box ul li .title{
	font-size:100%;
	text-align:left;
	position:absolute;
	top:0;

	
}



}

#main{
	overflow:hidden;
	position:relative;
	width:100%;
	height:100vh;
}
#main .mainphoto{
	overflow:hidden;
	position:absolute;
	width:100%;
	left:20%;
	height: 100vh;
	z-index:-5;
}
#main .mainphoto img{
	position: absolute;
	
	width: auto;
	height: auto;
	min-width:100%;
	min-height:100%;
top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    
	
}

#main .mainphoto:after{
	content:'';
	position:absolute;
	top:0;
	left:-45%;
	width:65%;
	height:100%;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	      -ms-skew(20deg);
	     transform:skew(20deg);
	background: #fff;
}

@media only screen and ( min-width : 1800px ) {
#main .mainphoto img{
	height:125%!important;
	width:auto!important;
	
	min-width:auto!important;
	min-height:125%!important;
top: -12.5%;
    left: 50%;
    transform: scale(0.8) translate(-50%, 0%);
    transform-origin: left;
    
	
}
}
@media only screen and ( min-width : 1800px ) {
#main .mainphoto:after{
	content:'';
	position:absolute;
	top:0;
	left:-45%;
	width:65%;
	height:100%;
	-webkit-transform: skew(0);
	   -moz-transform: skew(0);
	     -o-transform: skew(0);
	      -ms-skew(0);
	     transform:skew(0);
	background: #fff;
}
}
#main .box{
	position:absolute;
	bottom:0%;
	left: 7%;
	margin-bottom: 3vh;
	z-index: 10;
}
@media only screen and ( max-width : 1700px ) {

#main .mainphoto{
	overflow:hidden;
	position:absolute;
	width:100%;
	left:20%;
	height: 81.2vh;
	z-index:-5;
}
#main .mainphoto img{
	top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    transform-origin: left;
}
}
@media only screen and ( max-width : 1300px ) {

#main .box{
	position: relative;
	bottom: 0;
	left: auto;
	margin-bottom: 1em;
	z-index: 10;
	text-align: center;
	width: 100%;
}	
}
@media only screen and ( max-width : 800px ) {
	#main .mainphoto img{
	width: auto;
	height: auto;
	min-width:auto;
	min-height:auto;
	position:relative;
}
}
#main .box .photo ul{
	overflow:hidden;

}
#main .box .photo li{
	overflow:hidden;
	width:100px;
	height:250px;
	float:left;
	position:relative;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	-ms-skew(-20deg);
	     transform:skew(-20deg);
	     margin:0 15px;
}

#main .box .photo li:first-child:before,
#main .box .photo li:nth-child(2):before,
#main .box .photo li:nth-child(3):before{
	content:'';
	position:absolute;
	width:200%;
	left:-50%;
	height:100%;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	     -ms-skew(20deg);
	     transform:skew(20deg);
}
#main .box .photo li:first-child:before{
background:url(../image/front/headphoto1.jpg);
background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
#main .box .photo li:nth-child(2):before{
background:url(../image/front/headphoto2.jpg);	
background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
#main .box .photo li:nth-child(3):before{
background:url(../image/front/headphoto3.jpg);	
background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

#main .box .maincopy{
	font-size: 350%;
	font-weight:900;
	line-height:1.0em;
	clear:both;
	padding:30px 0 15px;
	margin-left: -35px;
	color: #135c8e;
}
#main .box .maincopy .subcopy{
	display:block;
	font-size:65%;
	font-weight:800;
	color:#111;
}
@media only screen and ( min-width : 1301px ) {
	.sp-copy .maincopy{
		display:none;
	}
}
.sp-copy .maincopy{
	font-size: 250%;
	font-weight:900;
	clear:both;
	padding: 0px 20px 0;
	color: #135c8e;
	text-align:center;
	margin:50px 0 0;
	line-height:1.2em;
}
.sp-copy .maincopy .subcopy{
	display:block;
	font-size:65%;
	font-weight:800;
	margin:10px 0 0 0;
	color:#111;
	line-height:1.0em;
}
@media only screen and ( max-width : 1300px ) {
#main .mainphoto:after{
	display:none;
}
#main .box .photo li{
	     display:none;
}
#main .box .maincopy{
	display:none;
}



#main{
	overflow:hidden;
	position:relative;
	width:100%;
	height: 700px;
}
#main .mainphoto{
	overflow:hidden;
	position:absolute;
	width:100%;
	left:0%;
	height: 700px;
	z-index:-5;
}
#main .mainphoto img{
	width: auto;
	height: auto;
	min-width:100%;
	min-height:100%;
	top: -10%;
    left: 50%;
    transform: translate(-50%, 0%);
    transform-origin: left;
}
}


@media only screen and ( max-width : 900px ) {
#main{
	height: 550px;
}


#main .mainphoto{
	left:0%;
	height: 550px;
}
#main .mainphoto img{
	
	top: -28%;
    left: 50%;
    transform:scale(0.8) translate(-50%, 0%);
    transform-origin: left;
}
}
@media only screen and ( max-width : 700px ) {
#main{
	height: 500px;
}


#main .mainphoto{
	left:0%;
	height: 500px;
}
#main .mainphoto img{
	
	top: -35%;
    left: 50%;
    transform:scale(0.7) translate(-50%, 0%);
    transform-origin: left;
}
.sp-copy .maincopy{
	font-size: 220%;
}
.sp-copy .maincopy .subcopy{
	font-size:60%;
}
}
@media only screen and ( max-width : 460px ) {
#main{
	height: 360px;
}


#main .mainphoto{
	left:0%;
	height: 360px;
}
#main .mainphoto img{
	top: -67%;
    left: 50%;
    transform:scale(0.45) translate(-50%, 0%);
    transform-origin: left;
    
}

}
.mojikazari_a,.mojikazari_b{
	position:absolute;
	z-index:10;
	color:rgba(230,230,230,0.5);
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 18vh;
	font-weight:900;
	letter-spacing:0em;
	display:none;
}
.mojikazari_a{
	left:1.3em;
	top:-8px;
}
.mojikazari_b{
	left:0.26em;
	top:-15px;
	
}

@media only screen and ( max-width : 1200px ) {
.mojikazari_a,.mojikazari_b{
	position:absolute;
	z-index:10;
	color:rgba(255,255,255,0.4);
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size:12.5vh;
  font-weight:900;
  letter-spacing:0em;
}
.mojikazari_a{
	left:0.26em;
	top:0.1em;
	

}
.mojikazari_b{
	left:0.26em;
	top:3.2em;
	
}	
}


/*****************************************************
	
	ページ
	
*****************************************************/

#contents h1{
	background:rgba(30,44,75,0.7);
	color:#fff;
	text-align:center;
	margin:80px auto;
	padding:150px 0;
	font-size:220%;
	font-weight:900;
	position:relative;
	letter-spacing:0.05em;
}
@media only screen and ( max-width : 990px ) {
#contents h1{
	padding:13vw 0;
	font-size: calc(100% + 2vw);
	
}	
}
#contents .midashibg_accsess:before{
	content:'';
	background:url(../image/front/bg_access.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
}
#contents .midashibg_about:before{
	content:'';
	background:url(../image/front/bg_company.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
}
#contents .midashibg_contact:before{
	content:'';
	background:url(../image/front/bg_company.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
}
#contents .midashibg_recruite:before{
	content:'';
	background:url(../image/front/bg_rec.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
}
#contents .midashibg_service:before{
	content:'';
	background:url(../image/front/bg_company.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
}
#contents .content_box{
	width:93%;
	max-width:1300px;
	margin:11vw auto 15vw;
}
#contents .content_boxfull{
	width:100%;
	margin: 11vw auto 13vw;
}
.content_box a,.content_boxfull a{
	color:#3f8fc5;
}
.content_box a:hover,.content_boxfull a:hover{
	color:#3f8fc5;
	background:yellow;
}
#contents .motion{
	text-align: center;
	font-size: 170%;
	color: #135c8e;
	position:relative;
	margin: 13vw 0 -2vw;
	width:100%;
}
#contents .motion:before{
	    position: absolute;
    content: "";
    bottom: -15px;
    background-color: #135c8e;
    height: 1px;
    width: 100vw;
    left: 0;
    transition: transform 1.5s cubic-bezier(.23,1,.32,1);
    transform-origin: left;
    transform: scaleX(0);
	transition-delay:1.0s;
}


#contents .midashikazari{
	position:absolute;
	left:0;
	font-size:15vw;
	color:rgba(230,230,230,0.4);
	z-index:-10;
	white-space: nowrap
}
#contents .motion_line:before{
    transform: scaleX(1);
	
}

@media only screen and ( max-width : 700px ) {
	#contents .motion{
	text-align: center;
}
#contents .motion:before{
	width: 100vw;
    }
 #contents .midashikazari{
	font-size: 18vw;
}
}
@media only screen and ( max-width : 600px ) {
	
 #contents .midashikazari{
	font-size: 16vw;
}
}


.gaiyo{
	width:100%;
	max-width:1000px;
	margin:0 auto 10vw;
	overflow:hidden;
border-bottom:1px dotted #aaa;
line-height:1.8em;
}
.gaiyo dt{
	width:30%;
	clear:both;
	float:left;
	padding:25px;
	box-sizing:border-box;
color:#666;

}
.gaiyo-area dl.gaiyo{
background:url(../image/page/bg-rogo.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:90%;
}

.gaiyo dd{
	padding:25px 10px 25px 30%;
	box-sizing:border-box;
	border-top:1px dotted #aaa;


}
.ninka{
	width:100%;
	max-width:1000px;
	margin:0 auto 10vw;
	overflow:hidden;
line-height:1.8em;
}
.ninka dt{
	text-align:center;
	background:#125b8e;
	width:80%;
	max-width:280px;
	padding:10px 0;
	color:#fff;
	margin:0 0;
	border-radius:5px;
	position:relative;
}
.ninka dt:before{content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 15px solid #125b8e;
}
.ninka dd ul{
	overflow:hidden;
	margin:40px auto;
}
.ninka dd ul li{
	padding:10px;
}
.ninka dd ul li:nth-child(odd){
	background:#f6f8f9;
}
@media only screen and ( max-width : 700px ) {
.gaiyo-area dl.gaiyo{
background:none;
	
}

	.gaiyo dt{
	width:100%;
	float:none;
	padding:10px 15px;
	background:#125b8e;
	color:#fff;

}
.gaiyo dd{
	padding:15px 15px 25px;
	box-sizing:border-box;
border-top:0px dotted #aaa;
}
}

.rinenbox{
	overflow:hidden;

}
.rinenbox .inner{
	width:44%;
	float:left;
	margin:0 3%;
	line-height:1.7em;


}
.rinenbox .inner li{
	list-style-type:disc;
	margin:0 0 8px 1.5em;


}

.bartitle{
	display:inline-block;
	margin:0 0 25px;
	font-size:180%;
	color:#fff;
	padding:13px 13px 10px;
	letter-spacing:0.05em;
	background:#111;
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}
.bartitle_inview{animation: clcip-to-right .8s cubic-bezier(.86,0,.07,1) both;}




@keyframes clcip-to-right{
	0% {
		 -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
	}
	
	100% {
		-webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
	}
}
@-webkit-keyframes clcip-to-right{
	0% {
		 -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
	}
	
	100% {
		-webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
	}
}

@media only screen and ( max-width : 680px ) {
	.rinenbox .inner{
	width:100%;
	float:none;
	margin:0 auto 50px;
	line-height:1.7em;


}
}

.service_l,.service_r{
	position:relative;
	margin: 6vw auto 13vw!important;
}

.service_l:before{
position:absolute;
content:'';
top:100px;
left:0;
width:0%;
height:88%;
background:#1e2c4b;
z-index:-10;
-webkit-transition: 1s cubic-bezier(.86,0,.07,1);
       -moz-transition: 1s cubic-bezier(.86,0,.07,1);
         -o-transition: 1s cubic-bezier(.86,0,.07,1);
            transition: 1s cubic-bezier(.86,0,.07,1);
            transition-delay:0.5s;
}

.service_l_inview:before{
width:90%;
}


.service_r:before{
position:absolute;
content:'';
top:100px;
right:0;
width:0%;
height:88%;
background:#1e2c4b;
z-index:-10;
-webkit-transition: 1s cubic-bezier(.86,0,.07,1);
       -moz-transition: 1s cubic-bezier(.86,0,.07,1);
         -o-transition: 1s cubic-bezier(.86,0,.07,1);
            transition: 1s cubic-bezier(.86,0,.07,1);
            transition-delay:0.5s;
}

.service_r_inview:before{
width:90%;
}
.service_inner{
	color:#fff;
	font-size:95%;
	width:75%;
	max-width:1300px;
	padding:50px 0 0;
	margin:0 auto;
	overflow:hidden;
	position:relative;

}

.service_slide{
	width:50%;
	float:left;
}
.service_slide img{
	width:100%;
}
.service_txt{
	width:36%;
	float: left;
	margin:150px 0 0 6%;
	padding:2%;

}


.service_r .service_slide{
	float:right;
}

.service_r .service_txt{
	float:left;
}

@media only screen and ( max-width : 960px ) {

	.service_r .service_slide,.service_slide{
	float:none;
	width:100%;
}

.service_r .service_txt,.service_txt{
	float:none;
	width:90%;
	margin:30px 5%;
	box-sizing:border-box;
}
.service_l_inview:before,.service_r_inview:before{
width:100%;
height:95%;
}
.service_l,.service_r{
	position:relative;
	margin: 6vw auto 30vw!important;
}
}

@media only screen and ( max-width : 640px ) {

	.service_r .service_txt,.service_txt{
	float:none;
	width:100%;
	margin:30px auto;
	box-sizing:border-box;
}

.service_l,.service_r{
	position:relative;
	margin: 6vw auto 20vw;
}
.service_l_inview:before,.service_r_inview:before{
width:100%;
height:88%;
}
.service_inner{
	width:85%;
	

}
}

.servicemenu{
	position:fixed;
	top:0;
	right:0px;
	height:100%;
	z-index:550;
}


.servicemenu_inner{
	width:70px;
	height:50vh;
	position:relative;
	margin:25vh 0;
}

.servicemenu_inner:after{
	content:'';
	width:100%;
	height:100%;
	border:20px solid;
	position:absolute;
	top:-20px;
	left:-20px;
	background:#111;
	z-index:-10;
}
.servicemenu_inner li a{
	color:#ccc;
	letter-spacing:0.1em;
	display:block;
	font-size:130%;
	text-align:center;
	height: calc(50vh / 8);
	line-height: calc(50vh / 8);
}

.servicemenu_inner li a:hover{
	color:#b2a856;
	
}
.servicemenu_inner li span{
	position:absolute;
	opacity:0.0;
	right:10px;
	color:#111;
	left:-10px;
	margin-top:-5.7vh;
	line-height: calc(50vh / 8);
	z-index:-10;
	text-align:center;
	background:#eee;
	width:180px;
	font-size:90%;
	cursor:default;
	-webkit-transition: 0.5s ease-in-out;
       -moz-transition: 0.5s ease-in-out;
         -o-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;
}
.servicemenu_inner li a:hover + span{
	display:block;
	opacity:1.0;
	left:-200px;
}
 .progress-container {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 999;
  width: 1px;
  height:100%;
  background: #888;
  }
 .progress-bar {
 	position:relative;
  background: #b2a856;
  width:3px;
  left:-1px;
  }

@media only screen and ( max-width : 1100px ) {

	.servicemenu{
	display:none;
}
}


.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
.pklist{
	margin:-90px auto 0;
	padding:0 auto;
	width:95%;
	max-width:1200px;
	font-size:85%;
	overflow:hidden;
}
.pklist li{
	float:left;
	position:relative;
}
.pklist li:first-child:after{
	content:'>';
	margin:0 0.2em;
}