@charset "utf-8";

.inner { width: 90%; max-width: 1184px; margin: 0 auto; padding: 0; }

/* ==================================================
.section
================================================== */
.section { margin-bottom: 60px; }
.section h1 { margin-bottom: 60px; }
.section h1 em,
.section h1 span { display: block; line-height: 1.2; font-weight: bold; }
.section h1 em { font-size: 50px; }
.section h1 span { font-size: 24px; margin-top: 10px; color: #707070; }
.section h1 a { float: right; font-size: 18px; font-weight: bold; text-align: right; margin-top: -4em;  position: relative; display: inline-block; padding-left: 55px; vertical-align: middle; }
.section h1 a:before,
.section h1 a:after { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
.section h1 a:before { width: 45px; height: 20px; background: #000; }
.section h1 a:after { left: 20px; width: 3px; height: 3px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
@media screen and (max-width:830px){
	.section h1 a { float: none; font-size: 14px; margin-top: 10px; }
}
@media screen and (max-width:767px){
	.section { margin-bottom: 60px; }
	.section h1 { margin-bottom: 30px; }
	.section h1 em,
	.section h1 span { display: block; line-height: 1.2; font-weight: bold; }
	.section h1 em { font-size: 30px; }
	.section h1 span { font-size: 18px; }
}

/* ==================================================
keyVisual
================================================== */
#keyVisual { position: relative; width: 90%; height: auto; margin: 0 auto 110px; padding: 0; }
#keyVisual:before { content: ""; display: block; padding-top: 55%; overflow-y: hidden; }
@media screen and (max-width:880px){
	#keyVisual { margin: 0 auto 80px; }
	#keyVisual:before { padding-top: 63%; }
}
@media screen and (max-width:767px){
	#keyVisual { position: static; width: 100%; height: auto; margin: 0 auto 60px; }
	#keyVisual:before { padding-top: 0; }
	#keyVisual .inner { width: 100% max-width: 100%; }
}
#kvTitle { position: absolute; width: 100%; left: 0; top: 30%; text-align: center; color: #fff; z-index: 10; }
#kvTitle h1 { font-size: 6.2vw; line-height: 1; font-weight: bold; letter-spacing: -.06em; margin-bottom: 10px; }
#kvTitle p { font-size: 1.5vw; line-height: 1.5; font-weight: bold; margin: 0; }
@media screen and (max-width:767px){
	#kvTitle { position: static; width: 90%; margin: 0 auto 15px; text-align: left; color: #000; }
	#kvTitle h1 { font-size: 13vw; }
	#kvTitle p { font-size: 4vw; }
}
#kvMain { position: absolute; width: 100%; bottom: 0; right: 0; z-index: 9; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;  -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  align-items: center; }
#kvMain img { position: absolute; display: block; width: 100%; top: 0; left: 0; z-index: 8; }
#kv01,
#kv02 { position: relative; width: 50%; height: auto; }
#kv01:before,
#kv02:before { content: ""; display: block; padding-top: 110%; }
@media screen and (max-width:880px){
	#kv01:before,
	#kv02:before { padding-top: 125%; }
}
@media screen and (max-width:767px){
	#kvMain { position: static; display: block; width: 100%; max-width: 1184px; bottom: 0; left: 0; right: 0; margin: 0 auto; }
	#kv01,
	#kv02 { width: 100%; margin-bottom: 20px; }
	#kv01:before,
	#kv02:before { padding-top: 108%; }
}
.kvTxt { position: absolute; bottom: 0; width: 94%; max-width: 475px; margin: 0 auto; padding: 3%; text-align: center; z-index: 10; }
#kv01 .kvTxt { right: 0; }
#kv02 .kvTxt { left: 0; }
@media screen and (max-width:767px){
	.kvTxt { width: 94%; max-width: 100%; }
}

.kvTxt h1 { font-size: 24px; line-height: 1.5; font-weight: bold; margin-bottom: 20px; }
.kvTxt p { font-size: 14px; margin: 0; }
@media screen and (max-width:966px){
	.kvTxt h1 { font-size: 20px; }
}
@media screen and (max-width:865px){
	.kvTxt h1 { font-size: 18px; }
	.kvTxt p { font-size: 12px; }
}
@media screen and (max-width:767px){
	.kvTxt h1 { font-size: 20px; margin-bottom: 10px; }
	.kvTxt p { font-size: 14px; }
}
.kvTxt nav ul { text-align: right; }
.kvTxt nav ul li {  }
.kvTxt nav ul li a { display: inline-block; width: 35px; height: 15px; }
.kvTxt nav ul li a { position: relative; display: inline-block; vertical-align: middle; text-decoration: none; }
.kvTxt nav ul li a:before,
.kvTxt nav ul li a:after  { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
.kvTxt nav ul li a:before { width: 35px; height: 15px; }
.kvTxt nav ul li a:after  { left: 15px; width: 4px; height: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#kv01 .kvTxt { background: #000; color: #f7f7f7; }
#kv01 .kvTxt nav ul li a { background: #f7f7f7; }
#kv01 .kvTxt nav ul li a:after  { border-top: 1px solid #000; border-right: 1px solid #000; }
#kv02 .kvTxt { background: #f7f7f7; color: #000; }
#kv02 .kvTxt nav ul li a { background: #000; }
#kv02 .kvTxt nav ul li a:after  { border-top: 1px solid #fff; border-right: 1px solid #fff; }


/* ==================================================
homeNews
================================================== */
#homeNews { margin-bottom: 80px; }
#homeNewsBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;  justify-content: space-between; }
#homeNews dl dt span { display: inline-block }
#homeNews dl dt span:first-of-type { width: 5em; }
#homeNews dl dt span:last-of-type  { width: 10em; text-align: center; font-size: 14px; line-height: 1.5; border: 1px solid #707070; margin-left: .7em; }
#homeNews aside { margin-top: 30px; }
#homeNews aside ul { overflow-y: hidden; }
#homeNews aside ul li { float: left; display: block; width: 23%; margin: 0 0 10px 2.6%; }
#homeNews aside ul li:nth-of-type(4n+1) { margin: 0 0 10px; }
#homeNews aside ul li img { display: block; width: 100%; margin: 0 auto; }
.sectionL { width: 77%; text-align: left; }
.sectionR { width: 18%; }
.sectionL dl { clear: both; margin-top: -1px; padding: 18px 0; border-top: 1px solid #bebebe; border-bottom: 1px solid #bebebe; }
.sectionL dl dt { float: left; width: 15em; clear: left; }
.sectionL dl dd { padding-left: 17em; }
.sectionR img { display: block; margin: 0 auto 10px; }
.sectionR dl { text-align: left; }
.sectionR dl dt { font-size: 14px; }
.sectionR dl dd {font-size: 15px; }
@media screen and (max-width:767px){
	#homeNews { margin-bottom: 40px; }
	#homeNewsBox { display: block; }
	#homeNews aside ul li { float: left; display: block; width: 49%; margin: 0 0 10px 2%; }
	#homeNews aside ul li:nth-of-type(2n+1) { margin: 0 0 10px; }
	.sectionL,
	.sectionR { width: 100%; margin-bottom: 30px; }
	.sectionL dl {  padding: 15px 0; }
	.sectionL dl dt { float: none; width: 100%; }
	.sectionL dl dd { padding: 0; margin-top: 5px; }
}

/* ==================================================
homeWorks
================================================== */
#homeWorks { margin-bottom: 50px; }
#homeWorks ul { list-style-type: none; margin: 0; padding: 0; overflow-y: hidden; }
#homeWorks ul li { float: left; display: block; width: 11.3%; margin: 0 0 2em 1.35%; }
#homeWorks ul li:nth-of-type(8n+1) { margin: 0 0 2em; clear: both; }
#homeWorks ul li img { display: block; margin: 0 auto 5px; }
@media screen and (max-width:767px){
	#homeWorks { margin-bottom: 30px; }
	#homeWorks .inner { width: 100%; }
	#homeWorks ul li,
	#homeWorks ul li:nth-of-type(8n+1) { width: 33%; margin: 0 0 2em; clear: none; }
	#homeWorks ul li:nth-of-type(3n+1) { clear: both; }
}

/* ==================================================
homeStrength
================================================== */
#homeStrength { margin: 0 auto 100px; padding: 80px 0 100px; background: #f7f7f7; }


#homeStrengthTxt { text-align: center; color: #000; z-index: 10; }
#homeStrengthTxt h1 { font-size: 6.5vw; line-height: 1; font-weight: bold; letter-spacing: -.06em; margin-bottom: 10px; }
#homeStrengthTxt p { font-size: 1.8vw; line-height: 1; font-weight: bold; margin-bottom: 30px; }
#homeStrength nav { font-size: 18px; font-weight: bold; margin-top: 40px; text-align: right; }
#homeStrength nav a { position: relative; display: inline-block; padding-left: 55px; vertical-align: middle; }
#homeStrength nav a:before,
#homeStrength nav a:after { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
#homeStrength nav a:before { width: 45px; height: 20px; background: #000; }
#homeStrength nav a:after { left: 20px; width: 3px; height: 3px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }


#homeStrength4 { }
#homeStrength4 ol { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;  -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  align-items: center; }
#homeStrength4 ol li { width: 25%; position: relative; height: auto; }
#homeStrength4 ol li:before { content: ""; display: block; padding-top: 160%; }
#homeStrength4 ol li img { position: absolute; top: 0; left: 0; display: block; width: 100%; }
#homeStrength4 ol li .strengthTxt { position: absolute; bottom: 0; left: 15%; display: block; width: 70%; margin: 0 auto; padding: 5% 0; background: #000; color: #fff; font-size: 14px; line-height: 1.4; font-weight: bold; z-index: 10; }
#homeStrength4 ol li .strengthTxt > span { display: block; font-size: 38px; line-height: 1.3; font-weight: bold; }
@media screen and (max-width:1590px){
	#homeStrength4 { position: static; width: 100%; }
}
@media screen and (max-width:800px){
	#homeStrength4 ol li .strengthTxt { font-size: 12px; }
}
@media screen and (max-width:767px){
	#homeStrength4 ol { display: block; }
	#homeStrength4 ol li { width: 100%; margin-bottom: 20px; }
	#homeStrength4 ol li .strengthTxt { font-size: 14px; }
}

/* ==================================================
homeContact
================================================== */
#homeContact { margin-bottom: 95px; }
#contactDetail { padding: 20px; border: 1px solid #707070; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;  justify-content: space-between; align-self: stretch; }
#contactCll { text-align: left; font-size: 20px; line-height: 2.1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;  align-items: center; }
#contactTxt p { margin: 0; font-size: 20px; line-height: 2.1; }
#contactLnk { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;  align-items: center; }
#contactLnk a { display: block; padding: 1em 3em; background: #000; color: #fff; font-size: 24px; font-weight: bold; text-decoration: none !important; }
@media screen and (max-width:767px){
	#homeContact { margin-bottom: 50px; }
	#contactCll { width: 100%; font-size: 14px; margin-bottom: 1em; order: 2; text-align: center; }
	#contactCll ul { margin: 0 auto; }
	#contactTxt { width: 100%; margin-bottom: 1em; order: 1; }
	#contactTxt p { width: 100%; font-size: 14px; }
	#contactLnk { width: 100%; display: block; order: 3; }
	#contactLnk a { display: block; padding: 1em 0; font-size: 18px; }
}

/* ==================================================
homeNav
================================================== */
#homeNav { margin-bottom: 50px; }
#homeNav ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;  justify-content: space-between; align-self: stretch; }
#homeNav ul li { width: 48%; margin-bottom: 18px; }
#homeNav ul li a { display: block; background: #000; color: #fff; font-size: 24px; padding: 10px 0; line-height: 60px; text-decoration: none !important; }
#homeNav ul li a span { display: block; font-size: 16px; }
#homeNav ul li:nth-of-type(1) a { line-height: 1.6; }
@media screen and (max-width:767px){
	#homeNav { margin-bottom: 30px; }
	#homeNav ul { display: block; }
	#homeNav ul li { width: 100%; margin-bottom: 10px; }
	#homeNav ul li a { font-size: 20px; }
	#homeNav ul li a span { font-size: 14px; }
}
