@charset 'UTF-8';
.loading {width: 100vw;height: 100vh;transition: all 1.5s;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9999;opacity: 1;visibility: visible;}
.loading.is-active {opacity: 0;visibility: hidden;}
.loading-animation {width: 100vw;height: 100vh;transition: all .9s;background-color: #fff;z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;padding: 0 0 100px;}
.loading-animation img{width: 70px; margin: 0 auto 50px;display: block;}
.loading-animation.is-active {opacity: 1;visibility: visible;}
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 3;
  --_g: no-repeat radial-gradient(circle closest-side,#F10B65 90%,#0000);
  background: 
var(--_g) 0%   50%,
var(--_g) 50%  50%,
var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
  margin: 0 auto;
}
@keyframes l3 {
20%{background-position:0%   0%, 50%  50%,100%  50%}
40%{background-position:0% 100%, 50%   0%,100%  50%}
60%{background-position:0%  50%, 50% 100%,100%   0%}
80%{background-position:0%  50%, 50%  50%,100% 100%}
}

body{
position: relative;
}
body.nav-visible{
overflow: hidden;
}
header{
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 100;
}
.header-wrap{
max-width: 1366px;
margin: 0 auto;
padding: 10px 14px;
position: relative;
}
.header-inner{
width: 100%;
display: flex;
justify-content: space-between;
}
.header-logo-box{
width: 56px;
display: flex;
align-items: center;
}
.header-nemu-box{
width: fit-content;
padding: 10px 0 0;
}
ul.gnavi-box {
text-align: right;
margin: 0 0 12px;
}
ul.gnavi-box li.gnavi-once{
display: inline-block;
margin: 0 0 0 16px;
}
ul.gnavi-box li a.ua{
padding: 0 20px 0 34px;
font-size: 17px;
font-weight: 700;
line-height: 32px;
position: relative;
}
ul.gnavi-box li a.ua:hover{
cursor: pointer;
}
ul.gnavi-box li a.g-nav::after{
position: absolute;
width: 22px;
height: 24px;
top: 50%;
left: 0;
content: '';
transform: translateY(-50%);
}
ul.gnavi-box li.gnavi-once:nth-child(1) a::after{
background: url("../images/icon-product.svg") no-repeat;
background-size: 100% auto;
}
ul.gnavi-box li.gnavi-once:nth-child(2) a::after{
background: url("../images/icon-shop.svg") no-repeat;
background-size: 100% auto;
}
ul.gnavi-box li.gnavi-once:nth-child(3) a::after{
background: url("../images/icon-shop-seach.svg") no-repeat;
background-size: 100% auto;
}
ul.anchor-box {
border-left:1px solid #CACACA; 
}
ul.anchor-box li{
display: inline-block;
border-right:1px solid #CACACA; 
}
ul.anchor-box li a{
padding: 0 28px;
line-height: 32px;
text-align: center;
font-size: 14px;
font-weight: 700;
}


.product-nav{
width: 92%;
max-width: 1300px;
max-height: calc(100vh - 120px);
margin: 0 auto;
background: #fff;
position: absolute;
left: 0;
right: 0;
top: 80px;
z-index: 100;

visibility: hidden;
padding: 0 0;
text-align: left;
filter: drop-shadow(0 0 6px rgba(0,0,0,.12));
opacity: 0;
transform: translateY(15px) ;
transition:
opacity .3s ease,
transform .3s ease,
visibility 0s linear .3s;
}

.product-nav::before {
content: "";
position: absolute;
top: -14px;
right: 394px;
width:40px;
height:40px;
background:#fff;
transform:rotate(45deg);
}

.nav-visible .product-nav{
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity .3s ease,
transform .3s ease,
visibility 0s;
}
.product-nav-inner{
position: relative;
max-height: inherit;
margin: 0 auto;
padding: 40px 40px 24px;
overflow-y: scroll;
}

.main-product-box{
display: flex;
justify-content: space-between;
margin: 0 0 22px;
}
.main-product-box li{
display: block;
width: 12.4%;
}
.main-product-box li:nth-child(1){
display: block;
width: 26.9%;
border: 1px solid #E0E0E0;
}

.main-product-box li a{
display: block;
}


.other-product-ttl{
background: #4FABFF;
text-align: center;
font-size: 17px;
font-weight: 500;
color: #fff;
line-height: 2;
margin: 0 0 14px;
}

.category-box{
padding: 12px 0;
border-bottom: 1px solid #DEDEDE;
}
.category-box:last-child{
border-bottom: none;
}

.category-name{
font-size: 16px;
font-weight: 700;
color: #4FABFF;
margin: 0 0 4px;
}
.category-box li{
display: inline-block;
}
.category-box li a{
display: flex;
align-items: center;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
position: relative;
margin: 0 40px 0 0;
padding: 0 28px 0 0;
}

.category-box li a::before {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-top: 1px solid #474747;
border-right: 1px solid #474747;
top: 50%;
right: 0;
transform: rotate(45deg) translateY(-50%);
transition: right 0.4s;
}
.category-box li a:hover::before {
right: -8px;
}



.category-box li a img{
height: 48px;
width: auto;
margin: 0 8px 0 0;
}
.category-box li a p span{
font-size: 10px;
}


@media (min-width: 767px) { 
header .header .inner nav .dropdown {
 height: 85vh;
}
header .header .inner nav .dropdown--block {
height: 100%;
overflow-y: scroll;
}
}








@media (max-width: 767px) { 
header {
height: auto;
}
.header-wrap {
padding:0;
}
.header-inner {
display: block;
}

.header-logo-box {
position: absolute;
top: 10px;
left: 3%;
width: 46px;
}
.header-nemu-box {
width: 100%;
padding: 0;
}
ul.gnavi-box {
width: 100%;
position: relative;
padding: 0 0 0 25%;
margin: 0;
display: flex;
}
ul.gnavi-box li {
display: block;
width: 33.3333%;
height: 70px;
margin: 0;
}
ul.gnavi-box li a.ua {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
font-size: 14px;
line-height: 1.2;
}



ul.gnavi-box li a::after {
display: none;
}
ul.anchor-box{
display: flex;
border: none;
border-top: 1px solid #CACACA;
border-bottom: 1px solid #CACACA;
}
ul.anchor-box li {
width: 25%;
height: 40px;
display: block;
}
ul.anchor-box li:last-child {
border: none;
}
ul.anchor-box li a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
}

.product-nav {
width: 96%;
max-height: calc(100vh - 130px);
top: 70px;
padding: 0 0;
text-align: left;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, .12));
transform: translateY(15px);
transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.product-nav::before {
top: -10px;
right: 55%;
}
.product-nav-inner {
padding: 5% 5% 70px;
overflow-y: scroll;
}
.main-product-box {
flex-wrap: wrap;
margin: 0 0 12px;
}

ul.gnavi-box li .main-product-box li{
width: 48%;
height:auto;
margin: 0 0 4%;
}
ul.gnavi-box li .main-product-box li:nth-child(1),
ul.gnavi-box li .main-product-box li:nth-child(6){
display: block;
width: 100%;
}
ul.gnavi-box li .main-product-box li:nth-child(1){
border: 1px solid #E0E0E0;
}
.other-product-wrap{
border: 1px solid #B3B3B3;
}
.other-product-ttl {
background: #4FABFF;
text-align: left;
font-size: 3.98vw;
font-weight: 500;
margin: 0 0;
padding: 0 14px;
line-height: 3.4;
}
.category-box {
padding:0;
border-bottom: 1px solid #DEDEDE;
}
.category-name {
background: #C4E3FF;
font-size: 3.98vw;
font-weight: 500;
color: #474747;
margin: 0 0;
padding: 0 14px;
line-height: 3.4;
}
ul.gnavi-box li .category-box li {
display: block;
width: 100%;
height: auto;
margin: 0;
border-bottom: 1px solid #B3B3B3;
} 
ul.gnavi-box li .category-box li:last-child {
border-bottom: none;
} 


.category-box li a {
width: 100%;
display: flex;
align-items: center;
font-size: 3.73vw;
line-height: 1.4;
margin: 0 0 0;
padding: 12px 0 12px;
}
.category-box li a::before {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-top: 1px solid #474747;
border-right: 1px solid #474747;
top: 50%;
right: 18px;
transform: rotate(45deg) translateY(-50%);
transition: right 0.4s;
}
.category-box li a .opi {
width: 17%;
margin: 0 4px 0 0;
}
.category-box li a .opi img {
display: block;
margin: 0 auto;
}

.nav-close-box{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: #fff;
padding: 12px 0;
}
.nav-close{
width: 200px;
border-radius: 100px;
border: 1px solid #B3B3B3;
font-size: 14px;
text-align: center;
line-height: 30px;
margin: 0 auto;
position: relative;
}
.nav-close::after {
position: absolute;
width: 14px;
height: 14px;
top: 50%;
right: 16px;
content: '';
background: url(../images/icon-close.svg) no-repeat;
background-size: 100% auto;
transform: translateY(-50%);
}



}


.main-catch{
opacity:0;
transform: translateY(-40px);
transition:opacity 1s 0.5s,transform 1s 0.5s;
}
.loaded .main-catch.ose{
opacity:1;
transform: translateY(0);
transition:opacity 1s 0.5s,transform 1s 0.5s;
}




.fade01,
.fade-in{
opacity:0;
}
.fade01.scrolled,
.fade-in.scrolled{
opacity:1;
transition:opacity 1.5s .8s;
}
.fade02{
opacity:0;
}
.fade02.scrolled{
opacity:1;
transition:opacity 1.5s 1.4s;
}
.fade03{
opacity:0;
}
.fade03.scrolled{
opacity:1;
transition:opacity 1.5s 1.9s;
}
.fade04{
opacity:0;
}
.fade04.scrolled{
opacity:1;
transition:opacity 1.5s 1.9s;
}
.fade05{
opacity:0;
}
.fade05.scrolled{
opacity:1;
transition:opacity 1.5s 1.9s;
}


.f1{
opacity:0;
}
.loaded .f1.ose{
opacity:1;
transition:opacity 1.2s 1.1s;
}
.f2{
opacity:0;
}
.loaded .f2.ose{
opacity:1;
transition:opacity 1.2s 1.8s;
}
.f3{
opacity:0;
}
.loaded .f3.ose{
opacity:1;
transition:opacity 1.2s 2.3s;
}
.f4{
opacity:0;
}
.loaded .f4.ose{
opacity:1;
transition:opacity 1.2s 2.5s;
}
.f5{
opacity:0;
}
.loaded .f5.ose{
opacity:1;
transition:opacity 1.5s 3s;
}


.clip-kv{
opacity:0;
}
.loaded .clip-kv.ose{
opacity:1;
transition:opacity 1s 0.4s;
}
.clip-kv2{
clip-path: inset(0 100% 0 0);
}
.loaded .clip-kv2.ose{
clip-path: inset(0);
transition:clip-path 1.3s 1.2s;
}
.move-up-kv{
opacity:0;
transform: translateY(40px);
}
.loaded .move-up-kv.ose{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 1.2s,transform 0.9s 1.2s;
}
.fade-et{
opacity:0;
}
.loaded .fade-et.ose{
opacity:1;
transition:opacity 1.8s 1.2s;
}
.fade-oj01{
opacity:0;
}
.loaded .fade-oj01.ose{
opacity:1;
transition:opacity 1s 2.2s;
}
.fade-oj02{
opacity:0;
}
.loaded .fade-oj02.ose{
opacity:1;
transition:opacity 1s 2.8s;
}


.fade-a{
opacity:0;
}
.loaded .fade-a.ose{
opacity:1;
transition:opacity 1.2s 3.2s;
}
.fade-b{
opacity:0;
}
.loaded .fade-b.ose{
opacity:1;
transition:opacity 1.2s 3.7s;
}
.fade-c{
opacity:0;
}
.loaded .fade-c.ose{
opacity:1;
transition:opacity 1.2s 4.2s;
}
.fade-d{
opacity:0;
}
.loaded .fade-d.ose{
opacity:1;
transition:opacity 1.2s 4.7s;
}
.clip-h1{
clip-path: inset(0 100% 0 0);
}
.clip-h1.scrolled{
clip-path: inset(0);
transition:clip-path 1.4s;
}
.clip-y{
clip-path: inset(0 0 100% 0);
}
.clip-y.scrolled{
clip-path: inset(0);
transition:clip-path 1.8s 0s;
}

.fade-in{
opacity:0;
}
.fade-in.scrolled{
opacity:1;
transition:opacity 1s;
}
.move-up{
opacity:0;
transform: translateY(40px);
}
.move-up.scrolled{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0s,transform 0.9s 0s;
}
.to-left{
opacity:0;
transform: translateX(60px);
transition:opacity 1s 0s,transform 1s 0s;
}
.to-left.scrolled{
opacity:1;
transform: translateX(0);
transition:opacity 1s 0s,transform 1s 0s;
}
.to-right{
opacity:0;
transform: translateX(-60px);
transition:opacity 1s 0s,transform 1s 0s;
}
.to-right.scrolled{
opacity:1;
transform: translateX(0);
transition:opacity 1s 0s,transform 1s 0s;
}
.clip-y{
clip-path: inset(0 0 100% 0);
}
.clip-y.scrolled{
clip-path: inset(0);
transition:clip-path 1s 0s;
}

@media (max-width: 767px) {  
.fade01{
opacity:0;
}
.fade01.scrolled,
.fade-in.scrolled{
opacity:1;
transition:opacity 1.5s .3s;
}
.fade02.scrolled{
opacity:1;
transition:opacity 1.5s .3s;
}
.fade03.scrolled{
opacity:1;
transition:opacity 1.5s .3s;
}
}