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

/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
img{
	vertical-align: bottom;
	max-width: 100%;
}
a img {
  border: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
	color:#8FB5E0;
	text-decoration:none;
}
* {
  	-o-box-sizing: border-box;
  	-ms-box-sizing: border-box;
  	box-sizing: border-box;
}
hr{
	border-left:none;
	border-right:none;
	border-top:none;
	border-bottom:solid 1px #ccc;
}

.tac{ text-align: center;}
.tal{ text-align: left;}
.tar{ text-align: right;}

.mt10{ margin-top: 10px;}
.mt20{ margin-top: 20px;}
.mt30{ margin-top: 30px;}
.mt40{ margin-top: 40px;}
.mt50{ margin-top: 50px;}
.mt60{ margin-top: 60px;}

.mb10{ margin-bottom: 10px;}
.mb20{ margin-bottom: 20px;}
.mb30{ margin-bottom: 30px;}
.mb40{ margin-bottom: 40px;}
.mb50{ margin-bottom: 50px;}
.mb60{ margin-bottom: 60px;}

.ml10{ margin-left: 10px;}
.ml20{ margin-left: 20px;}
.ml30{ margin-left: 30px;}
.ml40{ margin-left: 40px;}
.ml50{ margin-left: 50px;}
.ml60{ margin-left: 60px;}

.mr10{ margin-right: 10px;}
.mr20{ margin-right: 20px;}
.mr30{ margin-right: 30px;}
.mr40{ margin-right: 40px;}
.mr50{ margin-right: 50px;}
.mr60{ margin-right: 60px;}

.linkText-black{
	color: #333;
}

.pc_none{
	display:none !important;
}
.flex{ display:flex;}
.flex_wrap{ flex-wrap: wrap;}
.flex_between { justify-content: space-between;}
.flex_around { justify-content: space-around;}
.flex_end { align-items: flex-end;}

body{
	font-size: 14px;
	line-height: 1.7;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	color: #232323;
}

/* youtube設定 */
.mv{
	position: relative;/*ローディング画像などを表示す際の基点とするため指定*/
    width: 100%; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  	 height: 50vw;
    text-align: center;
    background-size: cover;
	overflow: hidden;
}
#youtube-area{
    z-index: 1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

#youtube {
/*天地中央配置*/
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
/*縦横幅指定*/
  	width: 100%; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  	height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  	min-height: 100%;
  	min-width: 100%;
}
#youtube video{
	width: 100%;
	height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 2;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
}

.header{
	position: absolute;
	width: 100%;
	z-index: 999;
}
.header .logo{
	width: 300px;
}
.header .logo img{
	width: 100%;
}
.header--gray{
	background-color: #aaa;
}
.headerInner{
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.headerMenu ul{
	display: flex;
}
.headerMenu ul li{
	color: #fff;
	font-size: 16px;
}
.headerMenu ul li + li{
	margin-left: 20px;
}
.headerMenu ul li a{
	color: #fff;
}


.hamburger{
	display: none;
}
nav.globalMenuSp{
	display: none;
}

.footercontent{
	display: flex;
}
.footerlogo{
	background-color:#aaa;
	width: 36%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footerlogo img{
	width: 160px;
}
.footerinfo{
	background-color: #444;
	width: 64%;
	padding: 50px 150px 50px 50px;
}
.footerMenu ul{
	display: flex;
}
.footerMenu ul li{
	color: #fff;
}
.footerMenu ul li + li{
	margin-left: 20px;
}
.footerMenu ul li a{
	color: #fff;
}
.copy{
	font-size: 12px;
	color: #fff;
}

.pt--frontPage{
	padding-top: 0;
}
.pt--Page{
	padding-top: 80px;
}
.ride--gray{
	background-color: #444;
}
.ride--gray img{
	opacity: 0.5;
}

.maincontent{
	padding: 80px 0 0;
}
.maincontent-g{
	padding: 80px 0;
	background-color:#ccc;
}
.maincontent--nallow{
	padding: 40px 0;
}

.maincontentInner{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.mainText01{
	font-size: 40px;
}
.mainText02{
	font-size: 36px;
}
.mainText03{
	font-size: 32px;
}
.mainText04{
	font-size: 22px;
}
.mainText05{
	font-size: 16px;
}
.mainText06{
	font-size: 14px;
}
.mainText07{
	font-size: 12px;
}
.mainText08{
	font-size: 18px;
}
.text-black{
	color: #232323;
}
.text-white{
	color: #fff;
}

.maincontentTop01{
	margin-top: 80px;
}
.maincontentTop02{
	margin-top: 60px;
}
.maincontentTop03{
	margin-top: 40px;
}
.maincontentTop04{
	margin-top: 30px;
}
.maincontentTop05{
	margin-top: 20px;
}
.maincontentTop06{
	margin-top: 10px;
}

.maincontentBottom01{
	margin-bottom: 80px;
}
.maincontentBottom02{
	margin-bottom: 60px;
}
.maincontentBottom03{
	margin-bottom: 40px;
}
.maincontentBottom04{
	margin-bottom: 30px;
}
.maincontentBottom05{
	margin-bottom: 20px;
}
.maincontentBottom06{
	margin-bottom: 10px;
}

.contactlink{
	display: inline-block;
	padding: 10px 40px;
	border: solid 1px #333;
	color: #232323;
}

.frontcontentBox{
	margin-left: 10px;
	padding-top: 30px;
	padding-left: 30px;
	border-left: solid 1px #666;
}
.flex--half{
	justify-content: space-between;
	align-items: flex-end;
}
.flex--half__item{
	width: 50%;
}
.flex--half__item--text{
	padding-left: calc((100vw - 910px) / 2);
}
.flex--half__item + div{
	width: 50%;
	margin-right: 40px;
}
.flex--half__item img{
	width: 100%;
}
.flex--a-center{
	align-items: center;
}
.flex--a-center .flex--half__item + div{
	margin-right: 0px;
	margin-left: 40px;
}
.flex--reverse{
	flex-direction: row-reverse;
}

.mainMenu{
	display: flex;
	justify-content: center;
}
.mainMenu li + li{
	margin-left: 20px;
}
.mainMenu__box{
	position: relative;
	width: 280px;
}
.mainMenu__box img{
	width: 100%;
}
.mainMenu__box__text {
	position: absolute;
	color: #fff;
	top: 60%;
	left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.newsList ul li{
	display: flex;
	margin-bottom: 20px;
}
.newsList ul li p + p{
	margin-left: 10px;
	padding-left: 10px;
	border-left:solid 1px #666;
}
.newsList ul li a{
	color: #333;
}

.infomation{
	display: flex;
	justify-content: center;
}
.infomation__item{
	width: 320px;
	text-align: center;
}
.infomation__item + .infomation__item{
	margin-left: 100px;
}
.infomation__line{
	border-bottom: solid 1px #333;
}
.table01{
	width: 100%;
}
.table01 tr{
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	font-size: 20px;
}
.table01 tr + tr{
	border-top: none;
}
.table01 th{
	width: 260px;
	padding: 10px;
}
.table01 td{
	padding: 10px;
}
.table01--small tr{
	font-size: 16px;
}
.table01--recruit th{
	padding-left: 60px;
	text-align: left;
	vertical-align: top;
}
.table01--recruit .inputText{
	width: 100%;
	border:none;
	background-color: #eee;
	padding: 2px;
}
.table01--recruit .inputText::placeholder{
	color: #ccc;
}
.table01--recruit .textarea{
	width: 100%;
	resize: vertical;
	border: none;
	background-color: #eee;
	padding: 2px;
}
.submit{
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.submit_btn{
	padding: 6px 26px;
	background-color: #ededed;
	color: #333;
	border: none;
	font-size: 16px;
	border-radius: 4px;
}

.commentBox{
	display: flex;
	align-items: center;
}
.commentBox__item{
	padding: 0 60px 0 0;
	min-width: 280px;
}
.commentBox__item + .commentBox__item{
	padding: 0 0 0 60px;
	border-left: solid 1px #333;
}

.achievement{
	display: flex;
	flex-wrap: wrap;
}
.achievement div{
	font-size: 18px;
	font-weight: bold;
	margin: 0 20px 20px;
}
.achievement div img{
	width: 100%;
}
.step{
	background-color: #666;
	color: #fff;
	font-size: 18px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 0;
	padding-left: calc((100vw - 910px) / 2);
	margin-right: calc((100vw - 0px) / 2);
}
.work{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.work2{
	width: 680px;
	margin-left: auto;
	margin-right: auto;
}
.work2 div{
	width: 322px;
	margin-top: 30px;
}
.work2 div:nth-child(1),
.work2 div:nth-child(2){
	margin-top: 0;
}
.work2 div img{
	width: 100%;
}

.single-maincontent{
	border-bottom: solid 1px #333;
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.company-img{
	display: flex;
	justify-content: space-between;
}
.company-img img{
	width: 100%;
}
.company-img .company-img_item1{
	width: 64%;
}
.company-img .company-img_item2{
	width: 24%;
}
/* for-individuals */
.kumikoType{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.kumikoType__Item{
	width: 260px;
	text-align: center;
	margin-top: 40px;
}
.kumikoType__Item:nth-child(1),
.kumikoType__Item:nth-child(2),
.kumikoType__Item:nth-child(3){
	margin-top: 0;
}
.kumikoType__Item__ttl{
	font-size:20px;
	font-weight: bold;
	margin-top: 10px;
}
.kumikoType__Item__txt{
	text-align: left;
	margin-top: 10px;
}
.for-img{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

/* gallery */
.gallery_box .xo-slider-template-default .swiper-wrapper{
	transform: translate3d(0px, 0px, 0px) !important;
}
.gallery_box .xo-slider .swiper-wrapper{
	flex-wrap: wrap;
}
.gallery_box .xo-slider-template-default .swiper-button-prev,
.gallery_box .xo-slider-template-default .swiper-button-next{
	display: none;
}
.gallery_box .xo-slider .swiper-slide{
	width: 290px !important;
	margin-top: 10px;
}
.gallery_box .xo-slider .swiper-slide:nth-child(3n){
	margin-right: 0;
}
.gallery_box .swiper-slide a{
	position: relative;
	z-index: 999;
}

@media only screen and ( max-width : 768px ) {
	.header .logo{
		width: 60%;
	}
	.headerMenu ul{
		display: none;
	}
	.hamburger {
	  	display : block;
	  	position: absolute;
	  	z-index : 1001;
	  	right : 20px;
	  	top   : 10px;
	  	width : 42px;
	  	height: 42px;
	  	cursor: pointer;
	  	text-align: center;
	}
	.hamburger span {
	  	display : block;
	  	position: absolute;
	  	width   : 30px;
	  	height  : 2px ;
	  	left    : 6px;
	  	background : #fff;
	  	-webkit-transition: 0.3s ease-in-out;
	  	-moz-transition   : 0.3s ease-in-out;
	  	transition        : 0.3s ease-in-out;
	}
	.hamburger span:nth-child(1) {
	  	top: 10px;
	}
	.hamburger span:nth-child(2) {
	  	top: 20px;
	}
	.hamburger span:nth-child(3) {
	  	top: 30px;
	}
	/* スマホメニューを開いてる時のボタン */
	.hamburger.active{
		position: fixed;
	}
	.hamburger.active span:nth-child(1) {
	  	top : 16px;
	  	left: 6px;
	  	background :#fff;
	  	-webkit-transform: rotate(-45deg);
	  	-moz-transform   : rotate(-45deg);
	  	transform        : rotate(-45deg);
	}
	
	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
	  	top: 16px;
	  	background :#fff;
	  	-webkit-transform: rotate(45deg);
	  	-moz-transform   : rotate(45deg);
	  	transform        : rotate(45deg);
	}
	
	/* メニュー背景　*/
	nav.globalMenuSp {
		opacity: 0;
		display: block;
	  	position: fixed;
	  	z-index : 998;
	  	top  : 0;
	  	left : 0;
	  	color: #fff;
	  	background: rgba( 71,70,73,0.8 );
	  	text-align: center;
	  	width: 100%;
		height: 100vh;
		transform: translateX(100%);
		transition: all 0.6s;
		padding-top: 64px;
	}
	
	nav.globalMenuSp ul {
	  	margin: 0 auto;
	  	padding: 0;
	  	width: 100%;
	}
	nav.globalMenuSp ul li {
	  	list-style-type: none;
	 	padding: 0;
	  	width: 100%;
	  	transition: .4s all;
	}
	nav.globalMenuSp ul li:last-child {
	  	padding-bottom: 0;
	}
	nav.globalMenuSp ul li:hover{
	  	background :#ddd;
	}
	nav.globalMenuSp ul li a {
	  	display: block;
	  	color: #fff;
	  	padding: 1em 0;
	  	text-decoration :none;
		font-size: 16px;
	}
	/* クリックでjQueryで追加・削除 */
	nav.globalMenuSp.active {
	  	opacity: 1;
	  	display: block;
	   	transform: translateX(0%);
	}
	.spNoflex{
		display: block;
	}
	.spNoflex .flex--half__item{
		width: 100%;
		padding: 0 17px;
	}
	.spNoflex .flex--half__item + div{
		margin-right: 0;
		margin-top: 30px;
	}
	.flex--a-center.spNoflex .flex--half__item + div{
		margin-left: 0;
	}
	.maincontentInner{
		width: 100%;
		padding: 0 17px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.footercontent{
		display: block;
	}
	.footerlogo{
		background-color:#aaa ;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footerlogo img{
		width: 300px;
		padding: 20px;
	}
	.footerinfo{
		background-color: #444;
		width: 100%;
		padding: 20px ;
	}
	.footerMenu ul{
		flex-wrap: wrap;
		justify-content: center;
	}
	.footerMenu ul li{
		margin: 0 10px 10px;
	}
	
	.mainText01{
		font-size: 36px;
	}
	.mainText02{
		font-size: 32px;
	}
	.mainText03{
		font-size:28px;
	}
	.mainText04{
		font-size: 18px;
	}
	.mainText05{
		font-size: 14px;
	}
	.mainText06{
		font-size: 13px;
	}
	.mainText07{
		font-size: 12px;
	}
	
	.mainMenu{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.mainMenu li + li{
		margin-top: 30px;
		margin-left: 0;
	}
	.mainMenu__box{
		position: relative;
		width: 100%;
	}
	.mainMenu__box img{
		width: 100%;
	}
	
	.infomation{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.infomation__item{
		width: 80%;
		text-align: center;
	}
	.infomation__item + .infomation__item{
		margin-left: 0;
		margin-top: 50px;
	}
	
	.table01 tr{
		font-size: 16px;
	}
	.table01 th{
		width: 100px;
		padding: 6px;
	}
	.table01 td{
		padding: 6px;
	}
	
	.work{
		flex-wrap: wrap;
	}
	.work div{
		width: 48%;
		margin-bottom: 10px;
	}
	.work div img{
		width: 100%;
	}
	
	.work2{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.work2 div{
		width: 48%;
		margin-top: 10px;
	}
	
	.commentBox{
		display: block;
	}
	.commentBox__item{
		padding: 0 0 20px;
		min-width: auto;
	}
	.commentBox__item:first-child{
		text-align: center;
	}
	.commentBox__item + .commentBox__item{
		padding: 20px 0 0;
		border-top: solid 1px #333;
		border-left: none;
	}
	.achievement div{
		width: 44%;
		margin: 0 3% 20px;
	}
	.step{
		font-size: 16px;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-right: 17px;
		padding-left: 17px;
		margin-right: 0;
	}
	.kumikoType__Item{
		width: 47%;
	}
	.kumikoType__Item:nth-child(3){
		margin-top: 40px;
	}
	.kumikoType__Item__img{
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
	.kumikoType__Item__img img{
		width: 100%;
	}
	.for-img{
		display: block;
		margin-top: 20px;
	}
	.for-img img{
		width: 100%;
	}
	.for-img_item1,
	.for-img_item2{
		margin-top: 20px;
	}
	.gallery_box .xo-slider .swiper-slide{
		width: 49% !important;
		margin-top: 20px;
		margin-right: 2% !important;
	}
	.gallery_box .xo-slider .swiper-slide:nth-child(3n){
		margin-right: 2% !important;
	}
	.gallery_box .xo-slider .swiper-slide:nth-child(2n){
		margin-right: 0 !important;
	}
	
}