@charset "utf-8";

body.bg{
	background: url("../img/bg1.jpg") no-repeat center 150px;
	background-attachment: fixed;
}

h2{
	color: #FFFFFF;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
 	-webkit-justify-content: center;
 	justify-content: center;
	height: 600px;
	min-width: 1280px;
}

h2 img{display: none;}

h2 div{
	width: 100%;
	height: 215px;
	background: rgba(19,31,54,0.75);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 38px;
	font-size: 3.8rem;
	letter-spacing: 3px;
	line-height: 1.4;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
 	-webkit-justify-content: center;
 	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}

h2 div span{
	display: block;
	opacity: 0;
}

h2 div small{
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 21px;
	font-size: 2.1rem;
	letter-spacing: 1px;
	padding: 0 0 8px 0;
	opacity: 0;
}

h2 div small.en{
	font-size: 16px;
	font-size: 1.6rem;
	padding: 8px 0 0 0;
}

h2 div span.show,
h2 div small.show{animation: txtShow 0.5s ease-in-out forwards 0s;}

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



/**************************************************
 header
**************************************************/
header{position: static;}



/**************************************************
 breadCrumb
**************************************************/
#breadCrumb{
	width: 1000px;
	margin: 0 auto;
	padding: 20px 0;
	font-size: 14px;
	font-size: 1.4rem;
	color: #20334D;
}

#breadCrumb a{color: #20334D;}

#breadCrumb a:hover{opacity: 0.5;}



/**************************************************
 article
**************************************************/
article{
	width: 1280px;
	margin: 115px auto;
}

article.style1{width: 750px;}

article.style2{/*width: 1000px;*/}

article.style3{
	width: 100%;
	min-width: 1280px;
}

section.style1{margin: 110px 0 0 0;}

section.style2{}

.Navy{color: #0C1F84;}


section.style3{
	width: 1000px;
	min-width: 1000px;
	margin: 110px auto 0 auto;
}

article h3{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 28px;
	font-size: 2.8rem;
	line-height: 1.3;
	letter-spacing: 2px;
}

article h3.style1{
	text-align: center;
	margin: 40px 0 0 0;
}

article h3.style2{
	text-align: center;
	margin: 100px 0 0 0;
}

article h4{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 1.3;
	letter-spacing: 2px;
}

article h4.style1{
	text-align: center;
	margin: 40px 0 0 0;
}

article h4.style2{
	text-align: center;
	margin: 20px 0 0 0;
}

article h4.style3{
	text-align: center;
	margin: 55px 0 0 0;
}

article h4.style4{margin: 40px 0 0 0;}

article p{
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	color: #20334D;
	padding: 30px 0;
}

article p.style1{
	width: 750px;
	margin: 0 auto;
	/*text-align: center;*/
}

article p.center{text-align: center;}

article p.style2{padding: 15px 0 30px 0;}

article p.style3{padding: 50px 0 30px 0;}

#copyHanger{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	opacity: 0;
}

#copyHanger.style1{margin: 0 auto 110px auto;}

#copyHanger.show{animation: copyEfeect 0.5s ease-in-out forwards;}

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

#efInner{
	width: 1280px;
	margin: 0 auto;
}

#efInner dl{
	display: -webkit-flex;
 	display: flex;
	width: 1207px;
	height: 400px;
	overflow: hidden;
	background-color: #2A3449;
}

#efInner dl.style1{margin-left: 73px;}

#efInner dl.style2{margin: 30px 0 0 0;}

#efInner dl.style1.style3{margin: 45px 0 0 73px;}

#efInner dl.style4{margin: 80px 0 0 0;}

#efInner dl dt{
	display: -webkit-flex;
 	display: flex;
	-webkit-align-items: center;
	align-items: center;
	width: 750px;
	height: 400px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 29px;
	font-size: 2.9rem;
	letter-spacing: 1px;
	line-height: 1.4;
	padding:  0 0 0 140px;
	color: #FFFFFF;
	transform: skewX(15deg);
	position: relative;
	z-index: 1;
	background-color: #2A3449;
}

#efInner dl.style1 dt{
	order: 1;
	transform: skewX(-15deg);
	padding:  0 0 0 60px;
}

#efInner dl dt span{
	transform: skewX(-15deg);
	opacity: 0;
}

#efInner dl.style1  dt span{transform: skewX(15deg);}

#efInner dl dt span.show{animation: efiEfeect1 0.5s ease-in-out forwards 0.15s;}

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

#efInner dl dd{
	/*display: -webkit-flex;
 	display: flex;*/
	width: 567px;
	height: 400px;
	margin-left: -60px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

#efInner dl.style1 dd{
	order: 0;
	margin: 0 -60px 0 0;
}

#efInner dl dd img{
	display: block;
	width: auto;
	height: 100%;
}

#efInner dl dd span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #2A3449;
}

#efInner dl.style1 dd span{
	left: auto;
	right: 0;
}

#efInner dl dd span.show{animation: efiEfeect2 0.35s ease-in-out forwards;}
#efInner dl.style1 dd span.show{animation: efiEfeect3 0.35s ease-in-out forwards;}

@keyframes efiEfeect2{
	0% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 0;
		left: 100%;
	}
}

@keyframes efiEfeect3{
	0% {
		width: 100%;
		right: 0;
	}
	100% {
		width: 0;
		right: 100%;
	}
}

#efInner p{
	text-align: center;
	width: 748px;
	margin: 0 auto;
}

#efInner p.style1{text-align: left;}

.styleHanger1{
	position: relative;
	margin: 45px 0 0 0;
	padding: 1px 0 0 0;
}

.styleHanger1.style1{margin: 150px 0 0 0;}

.styleHanger1::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 190px;
	top: 0;
	left: 0;
	background-color: #E7ECF1;
	z-index: -1;
}

.styleInner{
	width: 748px;
	margin: 0 auto;
	font-size: 0;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.styleInner div{
	/*display: inline-block;
	vertical-align: top;*/
	width: 50%;
	margin: 45px 0 0 0;
	/*display: -webkit-flex;
 	display: flex;
	flex-wrap: wrap;
	flex-direction: column;*/
}

.styleInner div.style1{padding: 0 0 0 30px;}

.styleInner div.style2{padding: 0 30px 0 0;}

.styleInner div.photo img{width: 100%;}

.styleInner.style1 div.photo{order: 1;}

.styleInner.style1 div.style2{order: 0;}

.styleInner div h5{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 1px;
	line-height: 1.3;
}

.styleInner div p{padding: 10px 0 30px 0;}

.styleInner div p:last-child{padding: 10px 0 0 0;}

.styleInner div p img{
	display: block;
	width: 100%;
	margin: 5px 0 0 0;
}

.styleHanger1 p.w500{
	width: 500px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}

.imageHanger1{padding: 30px 0;}

.imageHanger1 img{width: 100%;}

.imageHanger2{
	padding: 10px 0 60px 0;
	text-align: center;
}

.imageHanger2.style1{padding: 20px 0 0 0;}

.imageHanger2.style1 img.style1{
	display: block;
	margin: 20px auto 0 auto;
}

.imageHanger3{
	width: 1000px;
	margin: 0 auto;
	padding: 30px 0;
}

.imageHanger3 img{width: 100%;}

.btnHanger{
	font-size: 0;
	text-align: center;
	margin: 40px 0 0 0;
}

.btnHanger.style1{margin: 0;}

.btnHanger a{
	display: inline-block;
	width: 245px;
	height: 48px;
	font-size: 16px;
	font-size: 1.6rem;
	border: 1px solid #000000;
	border-radius: 0.5rem;
	color: #20334D;
	padding: 16px 0 0 0;
	background-color: #FFFFFF;
}

.btnHanger a[href$=".pdf"]{
	background: url("../img/pdf_icon.png") no-repeat 90% center #FFFFFF;
	background-size: 18px 19px;
}

.btnHanger.style3 a[href$=".pdf"]{
	background: url("../img/pdf_icon.png") no-repeat 95% center #FFFFFF;
	background-size: 18px 19px;
}

.btnHanger.style2 a{position: relative;}

.btnHanger.style2 a::before{
	position: absolute;
	content: '\02228';
	top: 15px;
	right: 12px;
	font-size: 18px;
	font-size: 1.8rem;
	transform: rotate(-90deg);
}

.btnHanger a:nth-child(2){margin: 0 8px;}

.btnHanger.style3{margin: 0;}

.btnHanger.style3 a{
	display: block;
	width: 496px;
	padding: 16px 0 0 27px;
	margin: 0 auto 10px auto;
	text-align: left;
}

.btnHanger a:hover{
	background-color: #000000;
	color: #FFFFFF;
}

.btnHanger a[href$=".pdf"]:hover{
	background: url("../img/pdf_icon.png") no-repeat 90% center #000000;
	background-size: 18px 19px;
}

.btnHanger.style3 a[href$=".pdf"]:hover{
	background: url("../img/pdf_icon.png") no-repeat 95% center #000000;
	background-size: 18px 19px;
}

.tableHanger{
	width: 1000px;
	margin: 0 auto;
	padding: 30px 0 60px 0;
}

.tableHanger table{
	width: 100%;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	color: #20334D;
	border-top:1px solid #707070;
	border-left:1px solid #707070;
}

.tableHanger table tr:nth-child(2n){background-color: #E7ECF1;}

.tableHanger table th{
	text-align: left;
	padding: 20px 30px;
	border-bottom:1px solid #707070;
	border-right:1px solid #707070;
}

.tableHanger table td{
	text-align: right;
	padding: 20px 30px;
	border-bottom:1px solid #707070;
	border-right:1px solid #707070;
}

.tableHanger p{padding: 20px 0 30px 0;}

table.style1{
	width: 100%;
	margin: 30px 0 0 0;
	border-top: 1px solid #707070;
	border-left: 1px solid #707070;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	color: #20334D;
}

table.style1 tr:nth-child(2n){background-color: #E7ECF1;}

table.style1 th,
table.style1 td{
	text-align: left;
	padding: 20px 30px;
	border-bottom:1px solid #707070;
	border-right:1px solid #707070;
}

table.style1 th{white-space: nowrap;}



/**************************************************
 business
**************************************************/
h2.busApparel{
	background: url("../business/img/bg1.jpg") no-repeat center center;
	background-size: cover;
}

h2.busSpm{
	background: url("../business/img/bg2.jpg") no-repeat center center;
	background-size: cover;
}

.apColumn{
	display: -webkit-flex;
 	display: flex;
	width: 750px;
	margin: 0 auto;
	/*flex-wrap: wrap;
	flex-direction: column;*/
}

.apColumn.style1{margin: 60px auto 0 auto;}

.apCont{
	display: -webkit-flex;
 	display: flex;
	width: 490px;
	margin: 0 0 0 20px;
	order: 1;
	flex-wrap: wrap;
	flex-direction: column;
}

.apColumn.style1 .apCont{
	order: 0;
	margin: 0 20px 0 0;
}

.apPhoto{
	/*display: -webkit-flex;
 	display: flex;*/
	width: 240px;
	order: 0;
}

.apColumn.style1 .apPhoto{order: 1;}

.apPhoto img{width: 95%;}



/**************************************************
 technology
**************************************************/
h2.tecApparel{
	background: url("../technology/img/bg1.jpg") no-repeat center center;
	background-size: cover;
}

h2.tecSpm{
	background: url("../technology/img/bg2.jpg") no-repeat center center;
	background-size: cover;
}

h2.tecInd{
	background: url("../technology/img/bg3.jpg") no-repeat center center;
	background-size: cover;
}

#tecSpm{
	width: 1000px;
	margin: 0 auto;
	font-size: 0;
	padding: 70px 0 0 0;
}

#tecSpm div{
	display: inline-block;
	vertical-align: top;
	width: 480px;
	margin: 30px 0 0 0;
}

#tecSpm div:nth-child(2n){margin: 30px 0 0 40px;}

#tecSpm div span{display: block;}

#tecSpm div span img{width: 100%;}

#tecSpm div h4{padding: 20px 0 0 0;}

#tecSpm div p{padding: 15px 0 30px 0;}

#tecSpm div p small{
	display: block;
	padding: 15px 0 0 0;
	font-size: 12px;
	font-size: 1.2rem;
}



/**************************************************
 facility
**************************************************/
h2.facility{
	background: url("../facility/img/bg1.jpg") no-repeat center center;
	background-size: cover;
}

.facBtn{
	width: 1000px;
	font-size: 0;
	margin: 40px auto 0 auto;
	padding: 0 0 60px 0;
}

.facBtn a{
	display: inline-block;
	position: relative;
	width: 195px;
	height: 48px;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: center;
	border: 1px solid #000000;
	border-radius: 0.5rem;
	color: #20334D;
	padding: 16px 0 0 0;
	background-color: #FFFFFF;
	margin: 10px 6px 0 0;
}

.facBtn a:nth-child(5n){margin: 10px 0 0 0;}

.facBtn a::before{
	position: absolute;
	content: '\02228';
	top: 15px;
	right: 12px;
	font-size: 18px;
	font-size: 1.8rem;
}

.facBtn a:hover{
	background-color: #000000;
	color: #FFFFFF;
}

.styleInner.facility{margin: 20px auto 0 auto;}

.styleInner.facility div{
	width: 370px;
	margin: 10px 0 0 0;
}

.styleInner.facility div:nth-child(2n){margin: 10px 0 0 8px}

.styleInner.facility div.last{/*order: 1;*/}

.styleInner.facility div img{
	width: 100%;
	height: auto;
}

.styleInner.facility div h5{padding: 10px 15px 0 15px}

.styleInner.facility div p{padding: 10px 15px 30px 15px;}



/**************************************************
 company
**************************************************/
h2.company{
	background: url("../company/img/bg.jpg") no-repeat center center;
	background-size: cover;
}

.map{
	width: 1000px;
	margin: 0 auto 0 auto;
}

#historyPhoto{
	text-align: center;
	padding: 30px 0 0 0;
}

#historyPhoto img{width: calc((100% - 17px) / 3);}

#historyPhoto img:nth-child(2){margin: 0 8px;}

ul.suppliers{
	font-size: 0;
	color: #20334D;
	margin: 20px 0 0 0;
}

ul.suppliers li{
	display: inline-block;
	vertical-align: top;
	width: calc((100% - 231px) / 3);
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.3;
	margin: 10px 0;
	padding: 0 0 0 14px;
	position: relative;
}

ul.suppliers li::before{
	position: absolute;
	content: '';
	background-color: #20334D;
	width: 4px;
	height: 4px;
	border-radius: 10.0rem;
	top: 7px;
	left: 0;
}

ul.suppliers li:nth-child(3n+2){margin: 10px 115px;}

.awardList{
	margin: 10px 0 0 0;
	font-size: 0;
}

.awardList:nth-child(2){margin: 30px 0 0 0;}

.awardImage{
	display: inline-block;
	vertical-align: top;
	width: 496px;
}

.awardImage img{width: 100%;}

.awardList dl{
	display: inline-block;
	vertical-align: top;
	width: 335px;
	margin: 0 0 0 43px;
}

.awardList dl dt{
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
}

.awardList dl dd{
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	color: #20334D;
	padding: 10px 0 0 0;
}

article p.greeting,
article p.sign{
	width: 750px;
	margin: 0 auto;
}

article p.greeting img{
	float: left;
	width: 360px;
	margin: 0 30px 30px 0;
}

article p.sign{text-align: right;}

article p.sign strong{
	display: block;
	font-size: 20px;
	font-size: 2.0rem;
}



/**************************************************
 overseas
**************************************************/
h2.vietnam{
	background: url("../overseas/img/bg1.jpg") no-repeat center center;
	background-size: cover;
}

h2.china{
	background: url("../overseas/img/bg2.jpg") no-repeat center center;
	background-size: cover;
}

.osSlider{
	width: 750px;
	margin: 30px auto 0 auto;
}

.osSlider.vn{margin: 30px auto 50px auto;}

.osSlider ul{
	height: calc(750px * 0.5334);
	position: relative;
}

.osSlider ul li{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.osSlider ul li img{width: 100%;}

.osPhoto{
	width: 1000px;
	margin: 0 auto;
}

.osPhoto ul{font-size: 0;}

.osPhoto ul li{
	display: inline-block;
	vertical-align: top;
	width: 328px;
	margin: 10px 0 0 0;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	letter-spacing: 1px;
	text-align: center;
	color: #2A3449;
}

.osPhoto ul li:nth-child(2){margin: 10px 8px 0 8px;}

.osPhoto2{
	width: 480px;
	margin: 0 auto;
	padding: 30px 0 0 0;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	letter-spacing: 1px;
	text-align: center;
}

.osPhoto2.style1{text-align: left;}

.osPhoto ul li img,
.osPhoto2 img{
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

table.style1.os tr:nth-child(2n){background: none;}

table.style1.os tr:nth-child(odd){background-color: #E7ECF1;}

table.style1.os tr td:nth-child(2){text-align: right;}
	


/**************************************************
 recruit
**************************************************/
h2.recruit{
	background: url("../recruit/img/bg.jpg") no-repeat center center;
	background-size: cover;
}

#recruitImage{
	width: 1000px;
	margin: 0 auto;
	padding: 40px 0;
}

#recruitImage img:nth-child(2),
#recruitImage img:nth-child(3){
	width: 480px;
	margin: 40px 0 0 0;
}

#recruitImage img:nth-child(3){margin: 40px 0 0 40px;}

#recruitInquiry{
	background-color: #E7ECF1;
	padding: 90px 0 130px 0;
	min-width: 1280px;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

#recruitInquiry dl dt{
	font-size: 29px;
	font-size: 2.9rem;
	padding: 0 0 50px 0;
}

#recruitInquiry dl dd strong{
	display: inline-block;
	vertical-align: top;
	font-size: 40px;
	font-size: 4.0rem;
	font-weight: normal;
}

#recruitInquiry dl dd strong span{
	font-size: 28px;
	font-size: 2.8rem;
}

#recruitInquiry dl dd strong small{
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 5px 0 0 0;
}

#recruitInquiry dl dd a{
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	font-size: 1.6rem;
	margin-left: 80px;
	color: #FFFFFF;
	padding: 16px 34px;
	background-color: #2A3449;
	border-radius: 0.5rem;
}

#recruitInquiry dl dd a:hover{opacity: 0.5;}



/**************************************************
 news & privacy
**************************************************/
h2.news{
	background: rgba(19,31,54,0.9);
	height: auto;
}

h2.news div{background: rgba(19,31,54,0);}

#newsTitle{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 28px;
	font-size: 2.8rem;
	line-height: 1.3;
	position: relative;
}

#newsTitle::before{
	position: absolute;
	content: '';
	width: 130px;
	height: 5px;
	background-color: #E7ECF1;
	bottom: -10px;
	left: 0;
}

#upDate{
	font-size: 16px;
	font-size: 1.6rem;
	text-align: right;
	color: #20334D;
	padding: 30px 0 20px 0;
}

.privacyInner{
	width: 750px;
	margin: 0 auto;
}

ul.privacy{
	font-size: 16px;
	font-size: 1.6rem;
	color: #20334D;
	padding: 0 0 20px 50px;
	margin: -20px 0 0 0;
	list-style: disc;
}

ul.privacy li{margin: 10px 0;}



/**************************************************
 instagram
**************************************************/