@charset "UTF-8";

/* Front
  ================================================ */
#front #content.site-content,#home #content.site-content {margin: 0;padding: 0;}

#front header#masthead {
    background: transparent;
    z-index: 10;
    position: relative;
    box-shadow: none;
    /* padding: 10px 15px; */
}
header#masthead .container {/* max-width: 100%; *//* padding: 0; */}
#front .hero {
	background-image: url("images/front/hero_bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0;
	margin-top: -65px;
	padding: 0;
	height: 100vh;
	z-index: 0;
}
#front .hero .container {
	position: relative;
}
#front .hero .box {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	margin: auto;
	width: 100%;
	max-width: 1080px;
	color: #FFF;
}
#front .hero h1 {color: inherit !important;font-size: 2.25rem !important;}
#front .hero p {
    text-align: center;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1080px;
    color: inherit !important;
}
#front .hero .scroll {position: absolute;left: 50%;bottom: 3%;color: #fff;font-size: 1.5rem;width: 70px;margin-left: -35px;}
#front .hero .scroll i {font-size: 2.0rem;}


.front .h2_eng,.front h2 {
    text-align: center;
    color: inherit;
}
.front .h2_eng {
    font-size: 1.625rem;
    font-weight: 600;
}
.front h2 {
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 15px 0 0;
    padding: 0;
}

.front .front_copy {padding: 50px 0;background-color: #1078a6;color: #fff;}
.front .front_copy h2 {font-size: 1.75rem;margin: 0 0 20px;}
.front .front_copy .copy {font-size: 1.25rem;font-weight: 600;text-align: center;}

.front .japan_wood {padding: 170px 0 120px;position: relative;background-image: url("images/front/tree.png");background-position: center bottom;background-repeat: no-repeat;background-size: 300px;}
.front .japan_wood h2 {display: flex;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;align-items: center;text-align: left;background-color: #fff;padding: 30px 0;font-size: 1.75rem;color: #1078a6;line-height: 1.7;position: absolute;top: 30px;right: 50%;z-index: 5;width: 180px;height: auto;margin: 0;margin-right: -90px;letter-spacing: 3px;}
.front .japan_wood .container {/* position: relative; */}
.front .japan_wood .img {overflow: hidden;margin-left: -15px;margin-right: -15px;}
.front .japan_wood .img img {max-width: 150%;}
.front .japan_wood .omoi {color: #1078a6;margin-top: 60px;}
.front .japan_wood h3 {font-size: 1.5rem;color: #1078a6;margin: 0 0 20px;}
.front .japan_wood p {font-size: 1.0rem;}
.front .japan_wood button {max-width: 200px;margin: auto;margin-top: 30px;}
.front .japan_wood button a {padding: .75em 2em;}


.front .concept{padding:80px 0;background-color:#e8f2f7}
.front .concept .container{}
.front .concept .h2_eng{color:#1078a6}.front .concept .slider{margin:60px 0 0;padding:0 15px}

.front .concept .slick-track{display: flex;}
.front .concept .col{padding:0;display: flex;align-items: center;height: auto;}.front .concept .col .box{background-color:#fff;margin:0 10px;height: -webkit-fill-available;}
.front .concept .col img{}
.front .concept .col .inner{text-align:center;padding:30px 0;margin:-50px auto 0;width:83%;position:relative;background-color:#fff}
.front .concept .col .eng{font-size:.875rem;font-weight:600;color:#1078a6}
.front .concept .col h3{font-size:1.25rem;font-weight:600;line-height:1.4;margin:15px 0}
.front .concept .col p{font-size:.875rem}
.front .concept .col button{max-width:200px;margin-top:30px}
.front .concept .col button a{padding:.75em 2em}
.front .concept .slick-prev{left:-5px}
.front .concept .slick-prev:before{left:7px}
.front .concept .slick-next{right:-5px}
.front .concept .slick-next:before{right:7px}
.front .concept .slick-dots{bottom:-15px;position:inherit}
.front .concept .slider + button{max-width: 260px;margin-top: 40px;}
.front .concept .slider + button a{padding:.75em 2em}

.front .other {padding: 80px 0;background-color: #ccc;}

.front .pro_upper{padding:80px 0}
.front .pro_upper .copy{text-align:center;font-size:1.375rem;font-weight:600}
.front .pro{background-color:#000;padding:80px 0;color:#fff}
.front .pro .copy{text-align:left;margin:30px 0 0 !important}
.front .pro .container{}
.front .pro .engineer{overflow:hidden;margin-top:40px;border:2px solid #fff;padding:20px}
.front .pro .engineer .box{width:100%;margin-bottom:20px}
.front .pro .engineer .box .ttl{font-size:1.5rem;font-weight:600;line-height:1.4}
.front .pro .engineer .box p{font-size:.875rem;margin-top:15px}
.front .pro button{max-width:200px}
.front .pro .engineer .box button a{padding:.75em 2em}
.front .pro .slider{}
.front .pro .slick-prev {left: 2px;}
.front .pro .slick-prev:before {left: 7px;}
.front .pro .slick-next {right: 2px;}
.front .pro .slick-next:before {right: 7px;}
.front .pro .slick-dots {bottom: -15px;position: inherit;}

.front .sponser {
    padding: 80px 0;
}
.front .sponser .container {}
.front .sponser ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}
.front .sponser li {
    display: inline-block;
    padding: 7px;
}
.front .sponser img {
    width: 98px;
}

@media screen and (min-width: 768px) {
	header#masthead {/* padding: 10px 20px; *//* height: auto; */}
	#front .hero {margin-top: -73px;}
	
	.front .concept .slick-prev:before {left: -5px;}
	.front .concept .slick-next:before {right: -5px;}
	
	.front .japan_wood {padding: 170px 0 120px;/* position: relative; *//* background-image: url("images/front/tree.png"); */background-position: 85% bottom;background-repeat: no-repeat;background-size: 300px;}
	.front .japan_wood h2 {/* display: flex; */-ms-writing-mode: tb-rl;/* writing-mode: vertical-rl; *//* align-items: center; *//* text-align: left; *//* background-color: #fff; */padding: 30px 0;font-size: 2.0rem;/* color: #1078a6; *//* line-height: 1.7; *//* position: absolute; */top: 30px;right: 38px;/* z-index: 10; */width: 180px;height: auto;margin: 0;}
	.front .japan_wood .container {/* position: relative; */}
	.front .japan_wood .img {/* overflow: hidden; *//* margin-left: -15px; *//* margin-right: -15px; */margin: 0;}
	.front .japan_wood .img img {max-width: 100%;margin-top: -80px;}
	.front .japan_wood .omoi {/* background: linear-gradient(to bottom, #fff, #fff, transparent); */}
	.front .japan_wood h3 {font-size: 1.5rem;color: #1078a6;margin: 0 0 20px;}
	.front .japan_wood p {font-size: 1.0rem;}
	.front .japan_wood button {margin: inherit;margin-top: 30px;}
	.front .japan_wood button a {padding: .75em 2em;}
	
	.front .pro .copy{text-align:center;margin:30px 0 0}
	.front .pro .engineer{margin-top:40px;border: 0;padding: 0;}
	.front .pro .engineer .box{border:2px solid #fff;padding: 25px 30px;float:left;width:260px;height: 287px;margin: 0;}
	.front .pro .engineer .box .ttl{font-size:1.5rem;font-weight:600;line-height:1.4}
	.front .pro .engineer .box p{font-size:.875rem;margin-top:15px}
	.front .pro .engineer .box button{}
	.front .pro .engineer .box button a{}
	.front .pro .slider{float:right;width:410px}
	.front .pro .slick-prev {left: 5px;}
	.front .pro .slick-prev:before {left: 7px;}
	.front .pro .slick-next {right: 5px;}
	.front .pro .slick-next:before {right: 7px;}
	
	.front .sponser {}
	.front .sponser .container {}
	.front .sponser ul {text-align: center;}
	.front .sponser li {padding: 10px;}
	.front .sponser img {width: 110px;}
}

@media screen and (min-width: 992px) {
	#front .hero {margin-top: -87px;}
	#front .hero h1 {font-size: 3.125rem !important;}
	#front .hero p {font-size: 2.0rem;}
	#front .hero .scroll {position: absolute;bottom: 10%;color: #fff;font-size: 1.5rem;}
	#front .hero .scroll i {font-size: 2.0rem;}
	.front .front_copy {padding: 80px 0;}
	.front .front_copy h2 {font-size: 3.125rem;margin: 0 0 30px;}
	.front .front_copy .copy {font-size: 1.625rem;}

	.front .japan_wood {padding: 200px 0 360px;position: relative;background-image: url("images/front/tree.png");background-position: 5% bottom;background-repeat: no-repeat;background-size: 400px;}
	.front .japan_wood h2 {-ms-writing-mode: tb-rl;writing-mode: vertical-rl;text-align: left;background-color: #fff;padding: 30px;color: #1078a6;line-height: 1.7;position: absolute;top: 50px;right: 15%;height: 15em;margin: 0;letter-spacing: 3px;}
	.front .japan_wood .container {/* position: relative; */}
	.front .japan_wood .img {position: absolute;top: 200px;right: 0;width: 800px;}
	.front .japan_wood .img img {}
	.front .japan_wood .omoi {color: #1078a6;width: 50%;overflow: hidden;background-color: #fff;position: relative;padding: 30px;margin-top: 0;}
	.front .japan_wood h3 {font-size: 1.875rem;color: #1078a6;margin: 0 0 20px;}
	.front .japan_wood p {font-size: 1.0rem;}
	.front .japan_wood button {max-width: 200px;margin: 0;margin-top: 15px;float: right;}
	.front .japan_wood button a {padding: .75em 2em;}
	
	.front .pro .container {max-width: 960px;}
	.front .pro .copy{text-align:center;margin:30px 0 0}
	.front .pro .engineer{margin-top:40px}
	.front .pro .engineer .box{padding: 25px 30px;width: 260px;height: 300px;}
	.front .pro .engineer .box .ttl{font-size:1.5rem;font-weight:600;line-height:1.4}
	.front .pro .engineer .box p{font-size:.875rem;margin-top:15px}
	.front .pro .engineer .box button{}
	.front .pro .engineer .box button a{}
	.front .pro .slider{width: 640px;}
	
	.front .sponser {}
	.front .sponser .container {}
	.front .sponser ul {max-width: 900px;}
	.front .sponser li {}
	.front .sponser img {width: 134px;}
	.front .sponser img.denso {
    width: 110px;
}
	.front .sponser img.clc {
    width: 180px;
}
	.front .sponser img.mitsubishi {
    width: 110px;
}
	.front .sponser img.ykk {
    width: 106px;
}
}