@charset "utf-8";
/* Hero*/
@media (max-width: 767px){	
	.hero-img img{width: 120px;}
}

/* Find */
.find{padding: 45px 0 35px; background: #ee6d34; color: #fff; position: relative; overflow: hidden; margin: 60px 0 0 0;}
.find .container{position: relative;}
.find .img{position: absolute; top: 110px; right: 0; width: calc(50% - 440px); height: 100%;}
.find .img .anime{position: absolute; top: 0; left: 0; right: 0; width: 397px; margin: 0 auto; padding-bottom: 665px;}
.find .img .animeImg:before{background: url("../img/goods/anime.svg") no-repeat top left/400% auto;
animation: animeImg 1s infinite steps(3); -webkit-animation: animeImg 1s infinite steps(3);}
.find .txt{padding: 30px 0 0 0; text-align: center; font-size: 1.9rem;}
.find .list{max-width: 880px; margin: 0 auto; position: relative;}
.find .item{position: absolute; width: 30.8%; cursor: default;}
.find .item .front{display: none;}

@media only screen and (min-width: 1200px){
    .find .item .front{display: block;
    transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transition: .6s; -webkit-transition: .6s;}
    .find .item .back{position: absolute; top: 0; left: 0;
    transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transition: .6s; -webkit-transition: .6s;}    
	
    .find .item:focus .front,
	.find .item:hover .front{opacity: 1; transform: rotateY(180deg); -webkit-transform: rotateY(180deg);}
    .find .item:focus .back,
	.find .item:hover .back{transform: rotateY(0deg); -webkit-transform: rotateY(0deg);}    
}

.find .item1{top: 1%; left: 1.36%;}
.find .item2{top: 1%; left: 34.5%;}
.find .item3{top: 1%; left: 67.7%;}
.find .item4{top: 25.8%; left: 1.36%;}
.find .item5{top: 25.8%; left: 34.5%;}
.find .item6{top: 25.8%; left: 67.7%;}
.find .item7{top: 50.7%; left: 1.36%;}
.find .item8{top: 50.7%; left: 34.5%;}
.find .item9{top: 50.7%; left: 67.7%;}
.find .item10{top: 75.55%; left: 1.36%;}
.find .item11{top: 75.55%; left: 34.5%;}
.find .item12{top: 75.55%; left: 67.7%;}

.find .manual1{top: 0.36%; left: 1.36%;}
.find .manual2{top: 0.36%; left: 34.5%;}
.find .manual3{top: 0.36%; left: 67.7%;}
.find .manual4{top: 20.31%; left: 1.36%;}
.find .manual5{top: 20.31%; left: 34.5%;}
.find .manual6{top: 20.31%; left: 67.7%;}
.find .manual7{top: 40.3%; left: 1.36%;}
.find .manual8{top: 40.3%; left: 34.5%;}
.find .manual9{top: 40.3%; left: 67.7%;}
.find .manual10{top: 60.25%; left: 1.36%;}
.find .manual11{top: 60.25%; left: 34.5%;}
.find .manual12{top: 60.25%; left: 67.7%;}
.find .manual13{top: 80.2%; left: 1.36%;}
.find .manual14{top: 80.2%; left: 34.5%;}
.find .manual15{top: 80.2%; left: 67.7%;}

@media (max-width: 1919px){
    .find .img{top: calc(50% - 22vw);}
    .find .img .anime{width: 90%; padding-bottom: 162.997%;}
}

@media (max-width: 1199px){
    .find .img{display: none;}
}

@media (max-width: 767px){
    .find .txt{text-align: left; padding: 30px 0 0 0; font-size: 1.6rem;}
}

/* Goods (index.html) */
.goods-box{padding: 30px 0 0 0;}

/* Manual (index2.html) */

/* Safety (index3.html) */
.safety-map{max-width: 960px; margin: 0 auto 60px; line-height: 1; position: relative;}
.safety-map a{display: block; position: absolute; width: 15%;}
.safety-map a figure{position: absolute; top: 0; left: 0; width: 100%; opacity: 0; z-index: 1; transition: .4s;}
.safety-map a:focus figure,
.safety-map a:hover figure{opacity: 1;}
.safety-map .item1{top: 0; left: 8.33%;}
.safety-map .item2{top: 0; left: 61.04%;}
.safety-map .item3{top: 24.6%; right: 0.73%;}
.safety-map .item4{bottom: 1.7%; left: 0.73%;}
.safety-map .item5{bottom: 0; right: 18.23%;}

.modal-wrap{display: none; padding: 0 !important; overflow: initial !important; margin-top: 110px !important; line-height: 0;}
.modal-tit{width: 144px; margin: 0 auto; left: 0; right: 0; position: absolute; top: -110px;}

@media only screen and (max-width: 880px){
  .modal-wrap button{right: 0 !important; top: -37px !important;}
}