@charset 'UTF-8';

/*  future
--------------------------------------- */

.kv {
background: url("/ja/assets/img/products/bg_kv_01.jpg") no-repeat center;
}

.kv .inner {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}

.kv h1 {
padding: 49px 0 10px;
color: #000033;
font-size: 30px;
font-weight: bold;
}

.kv p {
padding: 0 0 30px;
color: #000033;
font-size: 15px;
font-weight: bold;
line-height: 1.47;
}

.product {
overflow-x: hidden;
}

.main {
position: relative;
background: #000;
z-index: 1;
}

.main .bg01 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
background: url("/ja/assets/img/products/bg_slide_01.png") no-repeat center;
z-index: 2;
}
.main .bg02 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
background: url("/ja/assets/img/products/bg_slide_02.png") no-repeat center;
z-index: 2;
}
.main .bg03 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
background: url("/ja/assets/img/products/bg_slide_03.png") no-repeat center;
z-index: 2;
}

.main .inner {
position: relative;
min-height: 869px;
padding: 75px 0 0;
text-align: center;
background: url("/ja/assets/img/products/bg_main_01.png") no-repeat center;
box-sizing: border-box;
z-index: 3;
}

.main h2 {
margin: 0 0 52px;
padding: 0 0 22px;
color: #fff;
font-size: 30px;
font-weight: bold;
letter-spacing: 2px;
background: url("/ja/assets/img/products/bg_h2_01.png") no-repeat center bottom;
}

.main ul {
display: flex;
justify-content: flex-end;
max-width: 964px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}

.main ul li {
width: 292px;
min-height: 301px;
margin: 0 0 0 8px;
padding: 45px 58px 0 26px;
background: url("/ja/assets/img/products/img_main_01.png") no-repeat center;
background-size: contain;
box-sizing: border-box;
opacity: 0;
}

.main ul li.up-start {
opacity: 1;
}

.main ul li:nth-child(2) {
background: url("/ja/assets/img/products/img_main_02.png") no-repeat center;
background-size: contain;
}
.main ul li:nth-child(3) {
background: url("/ja/assets/img/products/img_main_03.png") no-repeat center;
background-size: contain;
}

.main ul li h3 {
font-size: 30px;
font-weight: bold;
}

.main ul li .txt {
margin: 0 0 5px;
font-size: 14px;
line-height: 1.58;
text-align: left;
}

.main ul li .btn {
text-align: left;
}

.main ul li .btn a {
display: inline-block;
position: relative;
}

.main ul li .btn a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: 0.3s all;
}

.main ul li .btn .movie01:before {
background: url("/ja/assets/img/products/btn_movie_01_ov.png") no-repeat center;
background-size: contain;
}
.main ul li .btn .movie02:before {
background: url("/ja/assets/img/products/btn_movie_02_ov.png") no-repeat center;
background-size: contain;
}
.main ul li .btn .movie03:before {
background: url("/ja/assets/img/products/btn_movie_03_ov.png") no-repeat center;
background-size: contain;
}

.main ul li .btn a:hover:before {
opacity: 1;
}

.info {
position: relative;
margin: 40px 0 0;
z-index: 2;
}

.info h2 {
margin: 0 0 50px;
padding: 0 0 18px;
font-size: 30px;
font-weight: bold;
text-align: center;
background: url("/ja/assets/img/bg_h2_01.png") no-repeat center bottom;
}

.info .list01 {
max-width: 1400px;
margin: 0 auto 88px;
}

.info .list01 .lefts {
max-width: 1130px;
margin: 0 0 40px;
box-sizing: border-box;
opacity: 0;
}

.info .list01 .rights {
max-width: 1130px;
margin: 0 0 0 auto;
box-sizing: border-box;
opacity: 0;
}

.info .list01 .lefts.left-start ,
.info .list01 .rights.right-start {
opacity: 1;
}

.info .list01 .lefts a {
position: relative;
display: block;
min-height: 209px;
background: url("/ja/assets/img/products/bg_product_01.png") no-repeat right center;
}
.info .list01 .lefts a::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background: url("/ja/assets/img/products/bg_product_01_ov.png") no-repeat right center;
z-index: 0;
transition: 0.3s all;
}
.info .list01 .lefts a:hover::before {
width: 100%;
}

.info .list01 .rights a {
position: relative;
display: block;
min-height: 209px;
background: url("/ja/assets/img/products/bg_product_02.png") no-repeat left center;
}
.info .list01 .rights a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: url("/ja/assets/img/products/bg_product_02_ov.png") no-repeat left center;
z-index: 0;
transition: 0.3s all;
}
.info .list01 .rights a:hover::before {
width: 100%;
}

.info .list01 .lefts .txtBox {
width: 290px;
margin: 0 0 0 auto;
}

.info .list01 .rights .txtBox {
width: 290px;
}

.info .list01 .txtBox h3 {
padding: 52px 0 18px;
font-size: 25px;
font-weight: bold;
}

.info .list01 .txtBox p {
font-size: 14px;
line-height: 1.58;
}

.info .list02 {
max-width: 900px;
margin: 0 auto 100px;
padding: 0 20px;
box-sizing: border-box;
}

.info .list02 h3 {
margin: 0 0 30px;
padding: 8px 20px;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: left;
background: url("/ja/assets/img/bg_h3_01.png") no-repeat center;
}

.info .list02 ul {
display: flex;
justify-content: space-between;
}

.info .list02 ul li {
width: 23.256%;
}

.info .list02 ul li a {
position: relative;
display: block;
overflow: hidden;
}

.info .list02 ul li .txt {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
color: #fff;
font-size: 15px;
font-weight: bold;
line-height: 1.2;
text-align: center;
background: rgba(0,0,0,0.5);
box-sizing: border-box;
transition: all 0.5s;
}

.info .list02 ul li .txt.on {
height: 100%;
padding: 50px 0 0;
transition: all 0.5s;
}

.info .list02 ul li .txt span {
display: block;
width: 100%;
}

.info .list02 ul li .txt span:after {
content: 'AT';
position: absolute;
bottom: -60px;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0 auto;
color: #fff;
font-size: 25px;
font-weight: bold;
}
.info .list02 ul li:nth-child(2) .txt span:after {
content: 'Industry';
font-size: 25px;
}
.info .list02 ul li:nth-child(3) .txt span:after {
content: 'MT';
}
.info .list02 ul li:last-child(4) .txt span:after {
content: 'Other';
font-size: 25px;
}

.info .list02 ul.mb45 {
text-align: center;
display: flex;
justify-content: center;
}

.info .list02 ul.mb45 li .txt span:after {
content: 'Electrification';
font-size: 20px;	
	
}





@keyframes fadeInUp{
0%{
opacity:0;
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0)
}
to{
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}

@keyframes fadeInRight{
0%{
opacity:0;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
border-left:none;
}
to{
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0);
border-left:none;
}
}

@keyframes fadeInLeft{
0%{
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
to{
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}

.up-start{
-webkit-animation-name:fadeInUp;
animation-name:fadeInUp;
animation-duration: 1s;
}
.right-start{
-webkit-animation-name:fadeInRight;
animation-name:fadeInRight;
animation-duration: 1s;
}
.left-start{
-webkit-animation-name:fadeInLeft;
animation-name:fadeInLeft;
animation-duration: 1s;
}

#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 9999;
}

.popup {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 560px;
height: 315px;
margin: auto;
z-index: 10000;
}

.popup .close {
position: absolute;
top: -40px;
right: 0;
width: 36px;
}

.popup .close a {
display: block;
transition: 0.3s opacity;
}

.popup .close a:hover {
opacity: 0.6;
}

.popup #youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



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

.main .bg01 {
height: 500px;
background: url("/ja/assets/img/products/bg_slide_01.png") no-repeat center;
background-size: auto 100%;
}
.main .bg02 {
height: 500px;
background: url("/ja/assets/img/products/bg_slide_02.png") no-repeat center;
background-size: auto 100%;
}
.main .bg03 {
height: 500px;
background: url("/ja/assets/img/products/bg_slide_03.png") no-repeat center;
background-size: auto 100%;
}

}

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

.main ul {
max-width: inherit;
}

.main ul li {
width: 29.2vw;
min-height: 30.1vw;
margin: 0 0 0 0.8vw;
padding: 4.5vw 5.8vw 0 2.6vw;
}

.main ul li h3 {
font-size: 3vw;
}

.main ul li .txt {
margin: 0 0 0.5vw;
font-size: 1.4vw;
}

.main ul li .btn {
width: 12.9vw;
}

.info .list02 ul li {
width: 20vw;
}

.info .list02 ul li .txt {
padding: 2.9vw 0;
font-size: 0.5vw;
}

}

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

.kv {
background: url("/ja/assets/img/products/bg_kv_01_sp.jpg") no-repeat center;
background-size: cover;
}

.kv .inner {
width: 88%;
margin: 0 auto;
padding: 0;
}

.kv h1 {
padding: 6% 0 0;
color: #000033;
font-size: 20px;
font-weight: bold;
line-height: 2;
}

.kv p {
padding: 0 0 7%;
color: #000033;
font-size: 11px;
font-weight: bold;
line-height: 1.23;
}

.main .bg01 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vw;
background: url("/ja/assets/img/products/bg_slide_01_sp.png") no-repeat center;
background-size: cover;
z-index: 1;
}
.main .bg02 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vw;
background: url("/ja/assets/img/products/bg_slide_02_sp.png") no-repeat center;
background-size: cover;
z-index: 1;
}
.main .bg03 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vw;
background: url("/ja/assets/img/products/bg_slide_03_sp.png") no-repeat center;
background-size: cover;
z-index: 1;
}

.main .inner {
position: relative;
min-height: 150.133vw;
padding: 12vw 0 0;
text-align: center;
background: url("/ja/assets/img/products/bg_main_01_sp.png") no-repeat center;
background-size: cover;
box-sizing: border-box;
z-index: 3;
}

.main h2 {
margin: 0 0 8.4vw;
padding: 0 0 2.5vw;
color: #fff;
font-size: 5.33vw;
font-weight: bold;
letter-spacing: 0;
background: url("/ja/assets/img/products/bg_h2_01.png") no-repeat center bottom;
background-size: 26.6vw auto;
}

.main ul {
display: block;
position: relative;
max-width: inherit;
padding: 0;
}

.main ul li {
position: absolute;
top: 0;
left: 29.333vw;
width: 44.533vw;
min-height: 48vw;
margin: 0;
padding: 6vw 6.5vw 0 3.5vw;
background: url("/ja/assets/img/products/img_main_01_sp.png") no-repeat center;
background-size: contain;
box-sizing: border-box;
}

.main ul li:nth-child(2) {
top: 38.6vw;
left: 6.666vw;
background: url("/ja/assets/img/products/img_main_02_sp.png") no-repeat center;
background-size: contain;
}
.main ul li:nth-child(3) {
top: 38.6vw;
left: 52vw;
background: url("/ja/assets/img/products/img_main_03_sp.png") no-repeat center;
background-size: contain;
}

.main ul li h3 {
font-size: 4.933vw;
}

.main ul li .txt {
margin: 0 0 1vw;
font-size: 2.534vw;
line-height: 1.35;
text-align: left;
letter-spacing: -1px;
}

.main ul li .btn {
width: 20.66vw;
}

.main ul li .btn a:before {
display: none;
}

.info {
position: relative;
margin: 2vw 0 0;
z-index: 2;
}

.info h2 {
margin: 0 0 8vw;
padding: 0 0 2vw;
color: #333;
font-size: 5.33vw;
font-weight: bold;
background: url("/ja/assets/img/bg_h2_01.png") no-repeat center bottom;
background-size: 26.6vw auto;
}

.info .list01 {
max-width: inherit;
margin: 0 auto 13vw;
}

.info .list01 .lefts {
max-width: inherit;
margin: 0 0 5.33vw;
}

.info .list01 .rights {
max-width: inherit;
margin: 0;
}

.info .list01 .lefts a {
display: block;
min-height: 24.933vw;
background: url("/ja/assets/img/products/bg_product_01_sp.png") no-repeat right center;
background-size: 100% auto;
}

.info .list01 .rights a {
display: block;
min-height: 24.933vw;
background: url("/ja/assets/img/products/bg_product_02_sp.png") no-repeat left center;
background-size: 100% auto;
}

.info .list01 .lefts a::before ,
.info .list01 .rights a::before {
display: none;
}

.info .list01 .lefts .txtBox {
width: 28.67vw;
margin: 0 6.66vw 0 auto;
}

.info .list01 .rights .txtBox {
width: 28.67vw;
margin: 0 0 0 6.66vw;
}

.info .list01 .txtBox h3 {
padding: 7vw 0 0;
font-size: 4vw;
font-weight: bold;
line-height: 1.23;
}

.info .list02 {
max-width: 86.666vw;
margin: 0 auto 10vw;
padding: 0;
box-sizing: border-box;
}

.info .list02 h3 {
margin: 0 0 4%;
padding: 7px 10px;
color: #fff;
font-size: 15px;
font-weight: bold;
text-align: left;
background: url("/ja/assets/img/bg_h3_01_sp.png") no-repeat center;
background-size: cover;
}

.info .list02 ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.info .list02 ul li {
width: 41.333vw;
margin: 0 0 4vw;
}

.info .list02 ul li a {
position: relative;
display: block;
}

.info .list02 ul li .txt {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 3px 0 2px;
color: #fff;
font-size: 2.534vw;
font-weight: bold;
line-height: 2;
text-align: center;
background: rgba(0,0,0,0.5);
}

.popup {
width: 88vw;
height: 49.5vw;
}

.popup .close {
top: -30px;
right: 0;
width: 24px;
}

.popup .close a:hover {
opacity: 1;
}

}