@charset "UTF-8";
/*================================================================================

media query mixin

================================================================================*/
/*    google font on web
--------------------------------------------------------------------------------*/
/*    google font on server
--------------------------------------------------------------------------------*/
/*    icomoon
--------------------------------------------------------------------------------*/
/*    custom
--------------------------------------------------------------------------------*/
/*============================================================================
isShow mixin
============================================================================*/
/*============================================================================
mainArea
============================================================================*/
.home_mainArea {
    position: relative;
    /*width: 100vw;*/
    /*height: 100vh;*/
    /* min-height: 500px; */
    /* height: auto; */
    background-color: #000;
    padding-top: 38.2%;
}
.home_mainArea::after {
    /*content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(/assets/img/shoptop_header_shd.png) no-repeat left top;
    background-size: cover;
    opacity: 0.5;*/
}
@media screen and (max-width: 768px) {
.home_mainArea {
    padding-top:215px;
}
}

.home_mainArea_cont {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    opacity: 1;
}
@media screen and (max-width: 768px) {
.home_mainArea_cont {
   display: none;
}
}
.home_mainArea_cont.-num {
    width: 65%;
 height: auto;
 -webkit-transform: translate(-50%, -47%);
 transform: translate(-50%, -47%);
 mix-blend-mode: overlay;
 opacity: .65;
 -webkit-transition: 5s opacity ease;
 transition: 5s opacity ease;
}
.home_mainArea_cont.-num svg.home_svg {
    fill: #fff;
 width: 100vw;
 height: 58vh;
}
.home_mainArea_cont.-num.-isLight {
    opacity: .65;
}
@media screen and (max-width: 480px) {
.home_mainArea_cont.-num {
    width: auto;
 right: 20px;
 left: 20px;
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
}
}
.home_mainArea_cont.-tit {
    width: 300px;
 /*-webkit-transform: translate(-50%, -36%);*/
 /*transform: translate(-50%, -36%);*/
    top:0;
    bottom: 0;
    left:0;
    right:0;
    margin:auto;
}
@media screen and (max-width: 768px) {
.home_mainArea_cont.-tit {
    width: 300px;
 /*-webkit-transform: translate(-50%, -50%);*/
 /*transform: translate(-50%, -50%);*/
}
}
@media screen and (max-width: 480px) {
.home_mainArea_cont.-tit {
    width: 240px;
 left: 0px;
 right: 0px;
 margin: auto;
 /*-webkit-transform: translate(0, -50%);*/
 /*transform: translate(0, -50%);*/
}
}
.home_mainArea_cont.-tit .home_mainArea_tit {
    position: relative;
 width: 100%;
 opacity: 0;
 -webkit-transition: 1s;
 transition: 1s;
 height: 100%;
}
.home_mainArea_cont.-tit .home_mainArea_tit.isOn {
    opacity: 1;
 -webkit-transition: 1s;
 transition: 1s;
}
.home_mainArea_cont.-tit .home_mainArea_tit::before {
     content: ''; 
    display: table;
    /*padding-top: 37%;*/
}
.home_mainArea_cont.-tit .home_mainArea_tit img {
    position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: auto;
 -webkit-transition: opacity 5s ease;
 transition: opacity 5s ease;
 opacity: 1;
}
.home_mainArea_cont.-tit .home_mainArea_tit img.-isActive {
    opacity: 1;
}

.top-mainArea_news {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 360px;
    height: auto;
    z-index: 5;
    opacity: 0;
    -webkit-transition: 1s;
    transition: 1s;
}
@media screen and (max-width: 768px) {
.top-mainArea_news {
    position: relative;
    bottom: inherit;
    right: inherit;
    left: inherit;
    margin: auto;
    width: 100%;
    height: inherit;
    z-index: 5;
    padding: 0 20px;
    opacity: 1;
}
}
.top-mainArea_news.isOn {
    opacity: 1;
 -webkit-transition: 1s;
 transition: 1s;
}

#home_mainArea_slider {
    position: absolute;
 z-index: 3;
 overflow: hidden;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 opacity: .95;
}
#home_mainArea_slider::after {
 /*   content: '';
 position: absolute;
 z-index: 2;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: url(/assets/img/main_pic_shd.png) no-repeat left top;
 background-size: cover;
 opacity: 1;*/
}
#home_mainArea_slider .home_mainArea_slider_item {
    opacity: 0;
    -webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: opacity 3s linear, -webkit-transform 9s linear;
transition: opacity 3s linear, -webkit-transform 9s linear;
transition: opacity 3s linear, transform 9s linear;
transition: opacity 3s linear, transform 9s linear, -webkit-transform 9s linear;
position: relative;
z-index: 1;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding-top: 38.2%;
 /*
&:nth-child(2) {
transform-origin: 80% top; @include max-screen($breakpoint-sp) {
background-position: 60% top;
}
}
&:nth-child(3) {
transform-origin: left center; @include max-screen($breakpoint-sp) {
background-position: left 15% center;
}
}
*/ /*
&:nth-child(5) {
transform-origin: left center; @include max-screen($breakpoint-sp) {
background-position: left 33% center;
}
}
*/}
@media screen and (max-width: 768px) {
#home_mainArea_slider .home_mainArea_slider_item {
    padding-top:215px;
}
}
#home_mainArea_slider .home_mainArea_slider_item:not(:first-child) {
    position: absolute;
 top: 0;
 left: 0;
}
@media screen and (max-width: 480px) {
    #home_mainArea_slider .home_mainArea_slider_item:nth-child(4) {
    /* background-position: -600px 0px; */
}
}
#home_mainArea_slider .home_mainArea_slider_item.-isShow {
    opacity: 1;
}
#home_mainArea_slider .home_mainArea_slider_item.-isZoom {
    -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
#home_mainArea_slider .home_mainArea_slider_item img {
    display: block;
}

/*============================================================================
xxx
============================================================================*/

/*# sourceMappingURL=top.css.map */