@charset "utf-8";

/*===============================================
●共通
===============================================*/

/* subMenu */
#subMenu ul {
	display: flex;
	background-color: #000;
}
#subMenu li a {
	display: inline-block;
	color: rgba(255, 255, 255, 0.6);
	text-decoration:none;
	padding: 1em;
}
#main.companyTop		#subMenu li.companyTop a,
#main.companyConcept	#subMenu li.companyConcept a,
#main.companyGreeting	#subMenu li.companyGreeting a,
#main.companyOffice		#subMenu li.companyOffice a,
#main.companyProfile	#subMenu li.companyProfile a,
#subMenu li a:hover {color: #fff;}
#titBackground {position: relative;}

/* qualityWrap
---------------------------------------- */
#qualityWrap .policyImg {
	background-color: #F4F8FF;
	padding: 2em;
}

/* bkgLightGray
---------------------------------------- */
#bkgLightGray {
	background-color: #F9F9F9;
	position: relative;
	z-index: 1;
}
#bkgLightGray p {
	font-family: "Muli", sans-serif;
	font-weight: 700;
	color: #fff;
	text-align: left;
	display: block;
	position: relative;
	z-index: -1;
}
#bkgLightGray #youtube {
	display: block;
	margin: 0 auto;
}
#bkgLightGray #youtube #youtubeInner {
	width: 100%;
	position: relative;
	padding-top: 56.25%;
}
#youtube #youtubeInner iframe {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}
#bkgLightGray p.movie {text-align: right;}
#bkgLightGray div {text-align: center;}

/* company_greeting.php
---------------------------------------- */
.bkgLightB {background-color: rgba(235,242,255,0.5);}
.bkgLightG {background-color: rgba(248,251,248,1);}
.nameBox .position {
	font-size: 0.87em;
	display: block;
	text-align: right;
	margin-bottom: 0.5em;
}
#greetingWrap section div.rightText {
	text-align: right;
}
.nameBox .name {display: inline-block;}

/* company_profile.php
---------------------------------------- */
#chart .bkgLtblue {
	background: #F4F8FF;
	padding: 3%;
}
#chart p {margin-bottom: 1em;}

/* company_concept.php
---------------------------------------- */

/* companyConcept */
#companyConcept .leftBox p {font-size: 1.14em;}
#companyConcept .rightBox {
}
#companyConcept .rightBox #textT {
	text-align: right;
}
#companyConcept .rightBox #textT,
#companyConcept .rightBox #textL {
	font-family: "ocr-b-std", monospace;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -2px;
}
#companyConcept .rightBox #textL {text-align: left;}
#companyConcept .rightBox #textR {
	font-family: "ocr-b-std", monospace;
	text-align: right;
	letter-spacing: -4px;
}
#companyConcept .rightBox div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* companyPhilosopy */
#companyPhilosopy {
	background: url("../../images/company/bkg_contents.jpg") no-repeat center center / cover;
}
#companyPhilosopy ul li {
	font-size: 1.14em;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.8em;
	margin-bottom: 0.8em;
}
#companyPhilosopy ul li,
#companyPhilosopy p,
#companyPhilosopy .tit01 h2 {
	color: #fff;
}
#companyPhilosopy .tit01 h2 span,
#companyPhilosopy h3 {color: #CFDEFB;}

/* company_office.php
---------------------------------------- */
article.companyOffice section {
	background-color: #EBF2FF;
}
.officeWrap h3 {
	font-weight: bold;
	font-size: 1.14em;
}
.officeWrap address {font-size: 1.14em;}
.officeWrap address a {padding-right: 0.5em;}
.officeWrap section a{text-decoration: none;}
.googleMap a {
	background-color: #000;
	color: #fff;
	display: inline-block;
	text-align: center;
}
.googleMap a {
	display: inline-block;
	padding: 0.4em 1.8em;
	margin-top: 1em;
	border-radius: 3px;
}
.googleMap a svg {
	width: 0.71em;
	height: 0.97em;
	fill: #fff;
	margin-right: 0.5em;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* subMenu */
	#subMenu {padding: 0 1em;}
	#subMenu ul {
		width: 100%;
		display: table;
		font-size: 0;
		background-color: transparent;
	}
	#subMenu li {
		width: 33%;
		font-size: 14px;
		display: inline-block;
		padding: 0 0.5em;
		line-height: 1.2em;
		margin-bottom: 4px;
		background-color: #000;
	}
	#subMenu li a {
		width: 100%;
		padding: 1em 0;
		text-align: center;
		white-space: nowrap;
	}
	#subMenu li:nth-child(4) {
		width: 40%;
		margin-bottom: 0;
	}
	#subMenu li:nth-child(5) {margin-bottom: 0;}
	#subMenu ul:after {
		content: "";
		width: 27%;
		height: 3.2em;
		background-color: #000;
	}
	
	/* companyWrap
	---------------------------------------- */
	#companyWrap .mainText {margin-bottom: 1em;}
	
	/* philosophy */
	#philosophy {margin-top: 3em;}
	#philosophy ul {margin: 1em 0 3em;}
	#philosophy ul li {
		font-size: 1.25em;
		line-height: 1.2em;
		margin-bottom: 0.8em;
	}
	
	/* quality */
	#qualityWrap {margin-bottom: 3em;}
	#quality p.sourceRegular {
		font-size: 1.14em;
		margin: 0.8em 0;
	}
	#quality .textStyle {
		line-height: 1.5em;
		margin-bottom: 3em;
	}
	#qualityWrap .policyImg {width: 100%;}
	
	/* bkgLightGray
	---------------------------------------- */
	#bkgLightGray {
		margin: 0 -1em 3em;
		padding: 1.5em 1em;
	}
	#bkgLightGray p {font-size: 5em;}
	
	/* company_profile.php
	---------------------------------------- */
	#chart p {
		font-size: 1.28em;
		line-height: 1.5em;
	}
	
	/* company_greeting.php
	---------------------------------------- */
	#greetingWrap section {padding: 2em 1em 1em 1em;}
	#greetingWrap section .imgBox {
		width: 50%;
		margin: 0 auto 1em;
	}
	#greetingWrap .bkgLightB {margin-bottom: 2em;}
	.rightText p {
		line-height: 1.6em;
		margin-bottom: 1em;
	}
	.nameBox .name {width: 10em;}

	/* company_concept.php
	---------------------------------------- */
	#companyConcept .leftBox div {
		width: 60%;
		margin: 0 auto 1.2em;
	}
	#companyConcept .leftBox p {
		line-height: 1.5em;
		margin-bottom: 1em;
	}
	#companyConcept .rightBox {
		width: 60%;
		margin: 0 auto;
	}
	#companyConcept .rightBox p {font-size: 1.28em;}
	#companyPhilosopy section h3 {
		font-size: 1.28em;
		line-height: 1.5em;
		margin-bottom: 1em;
	}
	#companyPhilosopy section {padding-bottom: 3em;}
	#companyPhilosopy section:last-child {padding-bottom: 0;}
	#btnBox .contentsEnd {margin-bottom: 3em;}
	
	/* company_office.php
	---------------------------------------- */
	.companyOffice section:last-child {margin-bottom: 0;}
	.companyOffice section {
		padding: 1em;
		margin-bottom: 2em;
	}
	.officeWrap h3 {margin: 0.8em 0;}
	.officeWrap address {line-height: 1.6em;}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){

	/* companyメニュー
	---------------------------------------- */
	/* subMenu */
	#subMenu {
		width: 100%;
		max-width: 1180px;
		padding: 0 10px;
		margin: -3em auto 0;
		zoom: 1;
		overflow: hidden;
	}
	#subMenu:after {
		content: ""; 
		display: block; 
		clear: both;
	}
	#subMenu ul {
		width: 46%;
		position: relative;
		float: right;
		max-width: 35.5em;
		margin-right: 2em;
		justify-content: space-around;
	}
	#subMenu ul:before {
		position: absolute;
		content: "";
		left: -2em;
		top: 0px;
		border: none;
		border-left: solid 2em #000;
		border-top: solid 3.3em transparent;
		transform: rotate(180deg);
	}
	#subMenu ul:after {
		position: absolute;
		content: "";
		right: -2em;
		top: 0px;
		border: none;
		border-right: solid 2em #000;
		border-top: solid 3.3em transparent;
		transform: rotate(180deg);
	}

	/* companyWrap
	---------------------------------------- */
	#companyWrap .mainText {margin-bottom: 3em;}
	#companyWrap #philosophy,
	#companyWrap #quality, #qualityWrap {
		margin-bottom: 6em;
	}
	
	/* philosophy */
	#philosophy {margin: 6em 0;}
	#philosophy ul li {
		margin-bottom: 1.5em;
		font-size: 1.42em;
	}

	/* qualityWrap
	---------------------------------------- */
	/* qualityWrap */
	.policyImg img {
		width: 45%;
		display: block;
		margin: 0 auto;
	}
	
	/* quality */
	#quality .tit01 p {font-size: 1.71em;}
	#quality p.sourceRegular {
		font-size: 1.42em;
		margin: 1em 0;
	}

	/* bkgLightGray
	---------------------------------------- */
	#bkgLightGray {
		padding: 2.7em 0;
		margin-bottom: 6em;
	}
	#bkgLightGray p {font-size: 10em;}
	#youtube {width: 55%;}
	
	/* company_greeting.php
	---------------------------------------- */
	#greetingWrap section {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	#greetingWrap section.bkgLightB {align-items: center;}
	#greetingWrap .bkgLightB {
		padding: 3em 3em 0 0;;
		margin-bottom: 3em;
	}
	#greetingWrap .bkgLightG {
		padding: 3em;
		flex-direction: row-reverse;
	}
	#greetingWrap .bkgLightB .imgBox {
		width: 36%;
		margin-right: 4%;
	}
	#greetingWrap .bkgLightG .imgBox {width: 27%;}
	#greetingWrap section div.rightText {
		width: 60%;
	}
	.rightText p {
		font-size: 1.14em;
		line-height: 2.2em;
		margin-bottom: 1em;
	}
	.nameBox .name {width: 13em;}
	
	/* company_profile.php
	---------------------------------------- */
	.companyProfile .tableStyle th,
	.companyProfile .tableStyle td {
		padding: 0 0 1.5em 0;
	}
	#chart p {
		font-size: 1.71em;
		line-height: 1.45em;
	}
	
	/* company_concept.php
	---------------------------------------- */
	/* companyConcept */
	#companyConcept {
		width: 100%;
		display: flex;
		align-items: center;
	}
	#companyConcept .leftBox {
		width: 48%;
		margin-right: 10%;
	}
	#companyConcept .leftBox img {
		display: block;
		max-width: 26.6em;
		margin-bottom: 2em;
	}
	#companyConcept .leftBox p {line-height: 2.2em;}
	#companyConcept .rightBox {width: 42%;}
	#companyConcept .rightBox img {
		display: block;
		width: 100%;
		max-width: 25.7em;
		margin: 0 auto 1em;
	}
	#companyConcept .rightBox p {font-size: 2.28em;}
	
	/* companyPhilosopy */
	#companyPhilosopy section {
		width: 100%;
		display: flex;
	}
	#companyPhilosopy section:first-child {
		padding-bottom: 6em;
	}
	#companyPhilosopy .tit01 {
		width: 25%;
		margin-right: 5%;
	}
	#companyPhilosopy .rightLi {width: 65%;}
	#companyPhilosopy section h3 {
		font-size: 1.71em;
		line-height: 1.5em;
		margin-bottom: 1em;
	}
	#companyPhilosopy section p {
		font-size: 1.42em;
		line-height: 1.5em;
		margin-bottom: 1em;
	}
	#btnBox .contentsEnd {margin-bottom: 6em;}
	
	/* company_office.php
	---------------------------------------- */
	/* .companyOffice .officeWrap section {margin-bottom: 4%;} */
	/* .companyOffice .officeWrap section:last-child {margin-bottom: 0;} */
	.companyOffice .officeWrap section {
		/* width: 48%; */
		width: calc((100% - 32px) / 2);
	}
	.companyOffice .officeWrap section {padding: 2.5em;}
	.officeWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 32px;
	}
	.officeWrap h3 {margin: 2em 0;}
	.officeWrap address {line-height: 2em;}
	.googleMap a {
		display: inline-block;
		padding: 0.4em 1.8em;
		margin-top: 1em;
		border-radius: 3px;
	}
	.googleMap a svg {
		width: 0.71em;
		height: 0.97em;
		fill: #fff;
		margin-right: 0.5em;
	}
}

/*===============================================
●画面の横幅が1024px以上(tablet)
===============================================*/
@media (min-width: 730px) and (max-width: 1024px){

	/* companyメニュー
	---------------------------------------- */
	/* subMenu */
	#subMenu ul {
		right: 0;
		width: 100%;
		max-width: 30em;
	}
	#subMenu ul li a {padding: 1em 0.3em;}
}