@charset "UTF-8";


.header-menu-list > li:nth-child(4) a{background: #333;color:#fff;}
.company{position: relative;}

.company::after{
	display: block;
	content: '';
	background: url('../img/company/bg_company.png') no-repeat center center; 
	background-size: 100%;
	width: 492px;
	height: 8197px;
	position: absolute;
	left: -30px;
	top: 740px;
	transform: translate(-50%,0);
	z-index: -1;
}

.company-title{
	font-size: 33px;
	text-align: center;
	padding-bottom: 20px;
	position: relative;
}

.company-title::after {
	display: block;
	content: '';
	background: url('../img/common/img_dot.png') no-repeat center center; 
	background-size: 100%;
	width: 40px;
	height: 5px;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,0);
}

.company-inner{
	width: 64%;
	max-width: 881px;
	margin: 0 auto;
}


/* company kv  ---------------------------------------*/

.companykv-wrapper{margin-bottom: 190px;}

.companykv{display: flex;}

.companykv-image{width: 63%;}

.companykv-detail{
	position: relative;
	width: 37%;
}

.companykv-bgtext{
	position: absolute;
	top: 43%;
	right: 84px;
	text-align: center;
	font-size: 100px;
	letter-spacing: 5px;
	line-height: 1.1;
	color: #F4F4ED;
	transform: translate(0,-50%);
}

.companykv-title-wrapper{
	position: absolute;
	top: calc(43% + 173px);
	right: 100px;
	transform: translate(0,-50%);
}

.companykv-title{
	font-size: 24px;
	position: relative;
	padding-top: 20px;
}

.companykv-title::after {
	display: block;
	content: '';
	background: #333333;
	background-size: 100%;
	width: 54px;
	height: 1px;
	position: absolute;
	right: 0px;
	top: 0;
}


/* company greeting  ---------------------------------------*/

.companygreeting{
	position: relative;
	margin-bottom: 100px;
}

.companygreeting-inner{
	display: flex;
	position: relative;
	flex-wrap: wrap;
	margin-top: 45px;
}

.companygreeting-lead{
	width: 100%;
	font-size: 35px;
	line-height: 2;
	text-align: center;
	position: relative;
	padding-bottom: 62px;
	margin-bottom: 90px;
	letter-spacing: 4px;
}

.companygreeting-lead::after {
	display: block;
	content: '';
	background: #707070;
	background-size: 100%;
	width: 100px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,0);
}

.companygreeting-detail{
	width: 55%;
	padding-left: 105px;
}

.companygreeting-detail-text{
	font-size: 14px;
	line-height: 2.2;
	letter-spacing:0.1em;
}

.companygreeting-detail-text p{margin-bottom: 30px;}

.companygreeting-detail-text p:last-of-type{margin-bottom: 5px;}

.companygreeting-detail-name{
	text-align: center;
	width: 160px;
	margin-left: auto;
}

.companygreeting-detail-name-text{
	font-size: 18px;
	margin-bottom: 15px;
}

.companygreeting-detail-name-image{}

.companygreeting-image{
	width: 45%;
	text-align: right;
	padding-top: 15px;
}

.companygreeting-image img{width: 85%;}

.companygreeting-bgtext{
	position: absolute;
	top: 90px;
	right: 0;
	color: #F4F4ED;
	font-size: 200px;
	z-index: -1;
}


/* company message  ---------------------------------------*/

.companymessage{
	text-align: center;
	background: url("../img/company/bg_message.jpg") repeat center top;
	background-size: 1316px;
	padding: 125px 0 100px;
	position: relative;
	margin-bottom: 48px;
}

.companymessage-corporate{
	width: 60%;
	margin: 0 auto 135px;
}

.companymessage-corporate-text{
	margin-top: 50px;
	font-size: 25px;
	line-height: 2;
	letter-spacing: 0.5px;
}

.companymessage-guidelines{
	width: 60%;
	margin: 0 auto;
}

.companymessage-guidelines-text{
	margin-top: 45px;
	font-size: 25px;
	line-height: 2;
	letter-spacing: 0.5px;
	margin-bottom: 75px;
	position: relative;
	font-family: 'Noto Serif JP', serif;
}

.companymessage-btn-wrapper{}

.companymessage-btn{
	width: 543px;
	background: none;
}

.companymessage-bgtext{
	position: absolute;
	right: -175px;
	top: 35%;
	transform: rotate(90deg);
	color: #F4F4ED;
	font-size: 200px;
	z-index: -1;
}


/* company overview  ---------------------------------------*/

.companyoverview{margin-bottom: 140px;}

.companyoverview-table-wrapper{margin: 80px auto 35px;}

.companyoverview-table tr:nth-of-type(2n + 1) {background: #F4F4ED;}
.companyoverview-table tr:nth-of-type(2n) {background: #fff;}

.companyoverview-table th,
.companyoverview-table td{
	font-size: 14px;
	padding: 20px 0;
}

.companyoverview-table th{
	width: 27%;
	padding-left: 68px ;
}

.companyoverview-table td{
	width: 73%;
	line-height: 1.7;
}

.companyoverview-map{
	margin-bottom: 35px;
	position: relative;
	padding-bottom: 50.3%;
	height: 0;
	overflow: hidden;
}

.companyoverview-map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.companyoverview-map-list{}

.companyoverview-map-list-item{
	font-size: 14px;
	letter-spacing: 0.5px;
}

.companyoverview-map-list-item span{
	display: inline-block;
	width: 19.5%;
	letter-spacing: 0px;
}


/* company history  ---------------------------------------*/

.companyhistory{margin-bottom: 165px;}

.companyhistory-table{margin: 80px 0 45px;}

.companyhistory-table tr:nth-of-type(2n + 1) {background: #F4F4ED;}
.companyhistory-table tr:nth-of-type(2n) {background: #fff;}

.companyhistory-table th,
.companyhistory-table td{
	font-size: 14px;
	padding: 20px 0;
	line-height: 1.7;
}

.companyhistory-table th{
	width: 45.5%;
	padding-left: 21.5%;
	letter-spacing: 0.5px;
}

.companyhistory-table td{
	width: 54.5%;
	letter-spacing: 0px;
}

.companyhistory-image-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 89%;
	margin: 0 auto;
}

.companyhistory-image-left-wrapper{width: 53%;}

.companyhistory-image-left-top{margin-bottom: 10px;}

.companyhistory-image-left-bottom{margin-bottom: 8px;}

.companyhistory-image-left-text{font-size: 14px;}

.companyhistory-image-right-wrapper{width: 46%;}

.companyhistory-image-right{
	margin-bottom: 8px;
	width: 98%;
	margin-left: auto;
}

.companyhistory-image-right-text{
	font-size: 14px;
	line-height: 1.5;
}


/* company hub  ---------------------------------------*/

.companyhub{margin-bottom: 140px;}
.companyhub-table-main{margin:48px 0 15px;}

.companyhub-table-main th{
	font-size: 12px;
	padding-bottom: 20px;
}

.companyhub-table-main-name{
	width: 23%;
	padding-left: 20px;
}

.companyhub-table-main-adress{width: 59%;}

.companyhub-table-main-tell{width: 18%;}

.companyhub-table-main td{
	background: #F4F4ED;
	font-size: 14px;
	line-height: 1.7;
	padding: 20px 0;
	vertical-align: top;
}

.companyhub-table-main td:first-of-type{padding-left: 20px;}

.companyhub-btn{display: inline-block;}

.companyhub-table-main-btn{
	display: inline-block;
	margin-left: 15px;
	padding-right: 30px;
	position: relative;
	border-bottom: 1px solid #333333;
	transition: 0.3s;
}

.companyhub-table-main-btn:hover{opacity: 0.7;}

.companyhub-table-main-btn::after {
	display: block;
	content: '';
	background: url('../img/company/icon_arrow_right.png') no-repeat center center; 
	background-size: 100%;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translate(0,-50%);
}

.companyhub-table-branch td{
	font-size: 14px;
	padding: 20px;
	width: 50%;
}

.companyhub-table-branch tr td:last-of-type{padding: 20px 20px 20px 25px;}

.companyhub-table-branch tr:first-of-type td:first-of-type,
.companyhub-table-branch tr:last-of-type td:last-of-type{background: #F8F8F8;}

.companyhub-table-branch tr:first-of-type td:last-of-type,
.companyhub-table-branch tr:last-of-type td:first-of-type{background: #F4F4ED;}

.companyhub-table-flex{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	font-size:13px;
}

.companyhub-table-companyname{width:40%;}
.companyhub-table-companyaddress{width:55%;}


/* company connection  ---------------------------------------*/

.companyconnection{}

.companyconnection-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 92%;
	margin: 60px auto 0;
}

.companyconnection-list-item{
	width: 252px;
	height: 252px;
	margin-bottom: 30px;
	text-align: center;
	border-radius: 50%;
	border: 1px solid #333;
	background: #fff;
}

.companyconnection-list-item a{
	display: block;
	height: 100%;
	width: 100%;
	transition: 0.3s;
}

.companyconnection-list-item a:hover{opacity: 0.7;}

.companyconnection-list-item-apurevu .companyconnection-list-item-image{
	width: 30%;
	margin: 0px auto 13px;
	padding-top: 15px;
}
.companyconnection-list-item-shibuya .companyconnection-list-item-image{
	width: 28%;
	padding-left: 5px;
	margin: 0px auto 10px;
	padding-top: 15px;
}
.companyconnection-list-item-sanki .companyconnection-list-item-image{
	width: 27%;
	margin: 0px auto 10px;
	padding-top: 10px;
}
.companyconnection-list-item-comazono .companyconnection-list-item-image{
	width: 70%;
	margin: 0px auto 13px;
	padding-top: 43px;
}
.companyconnection-list-item-arikura .companyconnection-list-item-image{
	width: 43%;
	margin: 0px auto 17px;
	padding-top: 40px;
}

.companyconnection-list-item-industry{
	font-size: 14px;
	padding-bottom: 5px;
	position: relative;
	margin-bottom: 10px;
}

.companyconnection-list-item-masuki .companyconnection-list-item-industry{padding-top: 78px;}

.companyconnection-list-item-industry::after {
	display: block;
	content: '';
	background: #707070; 
	background-size: 100%;
	width: 30px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,0);
}

.companyconnection-list-item-name{
	font-size: 17px;
	line-height: 1.4;
	margin-bottom: 15px;
}

.companyconnection-list-item .companyhub-table-main-btn{
	font-size:13px;
	display: inline-block;
	padding-bottom: 5px;
}

.companyconnection-list-item .companyhub-table-main-btn::after{top:36%;}

/* english  ---------------------------------------*/

.companymessage-corporate.is-en{
	width: 100%;
}

.companymessage-en-flex{
	margin-top: 60px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}

.companymessage-en-flex .companymessage-image{width: 40%;}
.companymessage-en-flex .companymessage-image img{width:100%;}

.companymessage-en-flex .companymessage-corporate-text{
	width: 60%;
	font-size:14px;
	padding: 0 7%;
	text-align: left;
}



/* small pc */
@media screen and (min-width: 769px) and (max-width: 1200px){

	.company-inner{width:90%;}

}

/* small pc */
@media screen and (min-width: 769px) and (max-width: 890px){

	.companyconnection-list-item{
		width: 220px;
		height: 220px;
	}
	.companyconnection-list-item-name{font-size:14px;margin-bottom: 10px}
	.companyconnection-list-item .companyhub-table-main-btn{font-size:11px;}

}



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

	.company::after{display: none;}

	.company-title{font-size: 24px;}

	.company-inner{width: 85%;}


	/* company kv  ---------------------------------------*/

	.companykv-wrapper{
		margin-bottom: 0px;
		padding-top: 20px;
	}

	.companykv{display: block;}

	.companykv-image{
		width: 100%;
		position: relative;
	}

	.companykv-image img{width: 82%;}

	.companykv-detail{
		width: 100%;
		margin-top: 35px;
	}

	.companykv-bgtext{
		top: 93px;
		right: 80px;
		text-align: left;
		font-size: 60px;
		letter-spacing: 0px;
		line-height: 0.8;
		transform: translate(50%,0) rotate(90deg);
	}

	.companykv-title-wrapper{position: static;}

	.companykv-title{
		font-size: 16px;
		text-align: center;
	}

	.companykv-title::after {display: none;}


	/* company greeting  ---------------------------------------*/

	.companygreeting{margin-bottom: 65px;}

	.companygreeting-inner{
		width: 76%;
		margin: 30px auto 0;
	}

	.companygreeting-lead{
		font-size: 21px;
		line-height: 1.9;
		padding-bottom: 20px;
		margin-bottom: 30px;
		letter-spacing: 2px;
		order: 2;
	}

	.companygreeting-detail{
		width: 100%;
		padding-left: 0px;
		order: 3;
	}

	.companygreeting-detail-text{
		line-height: 2.1;
		letter-spacing: 1.2px;
		margin-bottom: 20px;
	}

	.companygreeting-detail-name{width: 150px;}

	.companygreeting-detail-name-text{
		font-size: 12px;
		margin-bottom: 0px;
	}

	.companygreeting-detail-name-image{
		width: 80%;
		margin-left: 10px;
	}

	.companygreeting-image{
		width: 100%;
		text-align: center;
		padding-top: 0px;
		order: 1;
		margin-bottom: 15px;
	}

	.companygreeting-image img{width: 98%;}

	.companygreeting-bgtext{
		top: 24%;
		right: auto;
		left: -40px;
		font-size: 52px;
		z-index: -1;
		transform: rotate(90deg) translate(0,50%);
	}


	/* company message  ---------------------------------------*/

	.companymessage{
		padding: 50px 0 30px;
		margin-bottom: 62px;
	}

	.companymessage-image{
		margin-top: 55px;
		text-align: left;
		margin-bottom: 25px;
	}

	.companymessage-image img{width: 75%;}

	.companymessage-corporate{
		width: 100%;
		padding-bottom: 50px;
		margin: 0 auto 55px;
		position: relative;
		padding-bottom: 43px;
	}

	.companymessage-corporate::after {
		display: block;
		content: '';
		background: #707070;
		background-size: 100%;
		width: 100px;
		height: 1px;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%,0);
	}

	.companymessage-corporate-text{
		font-size: 16px;
		line-height: 2.5;
		letter-spacing: 0.5px;
		width: 85%;
		margin: 25px auto 0;
		text-align: center;
	}

	.companymessage-guidelines{width: 75%;}

	.companymessage-guidelines-text{
		margin-top: 25px;
		font-size: 14px;
		line-height: 2.2;
		letter-spacing: -0.5px;
		margin-bottom: 23px;
		text-align: left;
		font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	}

	.companymessage-bgtext{
		right: -70px;
		top: 41%;
		font-size: 52px;
	}


	/* company overview  ---------------------------------------*/

	.companyoverview{margin-bottom: 45px;}

	.companyoverview-table-wrapper{margin: 45px auto 28px;}

	.companyoverview-table th,
	.companyoverview-table td{
		font-size: 14px;
		padding: 20px 0;
	}

	.companyoverview-table th{
		width: 38%;
		padding-left: 20px;
	}

	.companyoverview-table tr:nth-of-type(2) th,
	.companyoverview-table tr:nth-of-type(5) th,
	.companyoverview-table tr:nth-of-type(8) th,
	.companyoverview-table tr:nth-of-type(10) th{vertical-align: top;}

	.companyoverview-table td{
		width: 62%;
		padding-right: 15px;
		letter-spacing: -0.5px;
	}

	.companyoverview-map{margin-bottom: 20px;}

	.companyoverview-map-list{padding-left: 20px;}

	.companyoverview-map-list-item{margin-bottom: 25px;}

	.companyoverview-map-list-item span{width: 100%;}


	/* company history  ---------------------------------------*/

	.companyhistory{margin-bottom: 115px;}

	.companyhistory-table{margin: 50px 0 30px;}

	.companyhistory-table tr{height: 63px;}

	.companyhistory-table th,
	.companyhistory-table td{padding: 0;}

	.companyhistory-table th{
		width: 50%;
		padding-left: 20px;
		vertical-align: top;
		padding-top: 10px;
	}

	.companyhistory-table tr:nth-of-type(2) th{vertical-align: middle;}

	.companyhistory-table td{width: 50%;}

	.companyhistory-image-wrapper{
		display: block;
		width: 98%;
	}

	.companyhistory-image-left-wrapper{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}

	.companyhistory-image-left-top{
		margin-bottom: 5px;
		width: 100%;
	}

	.companyhistory-image-left-top img{width: 183px;}

	.companyhistory-image-left-bottom{
		margin-bottom: 0px;
		width: 183px;
	}

	.companyhistory-image-left-text{
		display: inline-block;
		width: calc(100% - 200px);
		margin-top: 40px;
		line-height: 1.7;
		margin-left: 10px;
	}

	.companyhistory-image-right-wrapper{
		width: 100%;
		display: flex;
	}

	.companyhistory-image-right{
		width: 183px;
		margin-left: 0;
	}

	.companyhistory-image-right img{width: 100%;}

	.companyhistory-image-right-text{
		font-size: 14px;
		line-height: 1.6;
		display: inline-block;
		width: calc(100% - 190px);
		margin-top: 140px;
		margin-left: 10px;
	}


	/* company hub  ---------------------------------------*/

	.companyhub{margin-bottom: 100px;}
	.companyhub-table-main{margin:40px 0 8px;}
	.companyhub-table-main th{padding-bottom: 5px;}
	.companyhub-table-main-name{width: 32%;}
	.companyhub-table-main-adress{width: 67%;}

	.companyhub-table-main td{
		line-height: 1.5;
		padding: 15px 18px 10px 0;
		letter-spacing: -0.5px;
	}

	.companyhub-btn{
		width: 104px;
		margin-left:auto;
		display: block;
	}

	.companyhub-table-main-btn{
		margin-left: 0;
		padding-right: 60px;
	}

	.companyhub-table-main-btn::after {
		width: 19px;
		height: 19px;
	}

	.companyhub-table-branch,
	.companyhub-table-branch tbody,
	.companyhub-table-branch tr,
	.companyhub-table-branch th,
	.companyhub-table-branch td{display: block}

	.companyhub-table-branch td{
		padding: 0px 20px;
		height: auto;
	}

	.companyhub-table-branch tr td:last-of-type{padding: 0px 0 0px 20px;}

	.companyhub-table-branch td{
		font-size: 14px;
		padding: 20px 0 20px 20px;
		width: 100%;
	}

	.companyhub-table-branch tr td:last-of-type{padding: 20px 0 20px 20px;}

	.companyhub-table-branch tr:first-of-type td:first-of-type{background: #F8F8F8;}
	.companyhub-table-branch tr:last-of-type td:last-of-type{background: #F4F4ED;}

	.companyhub-table-branch tr:first-of-type td:last-of-type{background: #F4F4ED;}
	.companyhub-table-branch tr:last-of-type td:first-of-type{background: #F8F8F8;}

	.companyhub-table-flex{
		display:flex;
		justify-content:space-between;
		align-items:center;
		flex-wrap:wrap;
		font-size:13px;
	}

	.companyhub-table-companyname{width:90px;}
	.companyhub-table-companyaddress{width:calc(100% - 90px)}


	/* company connection  ---------------------------------------*/

	.companyconnection-list{
		justify-content: center;
		margin: 50px auto 0;
	}

	.companyconnection-list-item{margin-bottom: 38px;}

	.companyconnection-list-item-shibuya .companyconnection-list-item-image{
		width: 28%;
		padding-left: 0;
		margin: 0px auto 5px;
		padding-top: 15px;
	}

	.companyconnection-list-item-sanki .companyconnection-list-item-image{
		width: 32%;
		margin: 0px auto 7px;
	}

	.companyconnection-list-item-comazono .companyconnection-list-item-image{margin: 0px auto 15px;}
	.companyconnection-list-item-arikura .companyconnection-list-item-image{margin: 0px auto 15px;}
	.companyconnection-list-item-masuki .companyconnection-list-item-industry{margin-top: 0px;}
	.companyconnection-list-item-name{letter-spacing: 1px;}
	.companyconnection-list-item .companyhub-table-main-btn{padding-right: 30px}


	/* english  ---------------------------------------*/

	.companymessage-corporate.is-en{}

	.companymessage-en-flex{
		margin-top: 40px;
		display: block;
	}

	.companymessage-en-flex .companymessage-image{width: 80%;}

	.companymessage-en-flex .companymessage-corporate-text{
		width: 100%;
		font-size:14px;
		padding: 0 10%;
	}
	.companymessage-corporate::after{display: none}

}