@charset "euc-jp";
/*-----------------------------------------------------------------------------------------
reset
----------------------------------------------------------------------------------------*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:where([hidden]:not([hidden='until-found'])){display:none!important}
:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}
@supports not (min-block-size:100dvb){:where(html){block-size:100%}}
@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}
:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}
:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}
:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}
:where(:disabled){cursor:not-allowed}
:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}
:where(button){border-style:solid}
:where(a){text-underline-offset:.2ex}
:where(ul,ol){list-style:none}
:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}
:where(img,picture,svg){max-inline-size:100%;block-size:auto}
:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}
:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}
:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}
:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

a{text-decoration: none;}

/*-----------------------------------------------------------------------------------------
important
----------------------------------------------------------------------------------------*/
#micola .smp{display: none !important;}
#micola .hidden{display: none !important;}


/*-----------------------------------------------------------------------------------------
base
----------------------------------------------------------------------------------------*/

body{
    box-sizing: border-box;
    color: #262326;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif ,"Plus Jakarta Sans", sans-serif; ;
}
#micola{ 
    text-align: center;
    position: relative;    
    width: 100%;
    height: 100vh;
    a{ color: #262326;}
    }

/*-----------------------------------------------------------------------------------------
common
----------------------------------------------------------------------------------------*/
/*==========text==========*/
#micola {
h2{
    font-size: 60px;
    color: white;
    p{font-size:16px}}

    h3 span{            
            border: 1px solid;
            border-radius: 90px;
            padding: 0 10px;
            margin: 0 5px;}

    h4{font-size: 12px;}

    .price{  font-size: 2rem;}

    .grd{
        font-weight: bold;
        background: linear-gradient(to bottom left, #e3e3e3, #dab6cb, #acc1db);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;}

    }

/*==========price==========*/
#micola .prices{font-size: 40px;position: relative;font-family: "Oswald", sans-serif;font-weight: 700;
    .prdisp-taxin{padding-right: 10px;}
}
    
#micola .prices::after{
        content: '';
        width: 6px;
        height: 6px;
        border: 0;
        border-top: solid 2px #262326;
        border-right: solid 2px #262326;
        transform: rotate(45deg);
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }

/*==========表示==========*/
.hidden2 {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1s ease-out, filter 1s ease-out;
}
.visible {
    opacity: 1;
    filter: blur(0);
}

/*==========パーツ==========*/
/*丸いアイコン*/
#micola .maru
{    display: flex;
    justify-content: center;
    gap: 10px;
    div{ 
        color: #fff;
        background-color: #262326;
        border: solid 1px #262326;
        border-radius: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        width: 25px;}
}
#micola .maru a:hover{
    color: #262326;
    background-color: #ffffff6c;
transition: 1s;}



/*クーポン*/
#micola .coupon > div{
        position: relative;
        background-color: #b73b6e;
        padding: 10px;
        color: white;
            p span:first-of-type{color:#e4ef34 ;font-weight: 900;}
            p span:last-of-type{border: 1px solid white;margin:0 10px ;padding: 0 10px;}
        }

/*詳細はこちらボタン*/
#micola .buy_btn{
            position: relative;
            display: block;
            text-align: center;
            font-size: 22px;
            color: #fff;
            background-color: #262326;
            border: solid 1px #262326;
            margin: 2% auto;
            width: 100%;
            padding: 3% 0;
            transition: 0.3s;}
#micola .buy_btn::after {
            position: absolute;
            font-family: "Material Icons";
            content: 'arrow_forward_ios';
            font-weight: 100;
            margin-left: 2%;
            transform: translateY(-50%);
            top: 50%;
            right: 5%;}
#micola .buy_btn:hover{
            color: #262326;
            background-color: #ffffff6c;}
            #micola .buy_btn.color_1{
                color: #fff;
                background-color: #cbc9c7;
                border: solid 1px #cbc9c7;
                margin: 8% auto 0% auto;
            }
            
            #micola .buy_btn.color_2{
                margin: 4% auto 0% auto;
                color: #fff;
                background-color: #99afbd;
                border: solid 1px #99afbd;
            }
            
            #micola .buy_btn.color_3{
                margin: 4% auto 0% auto;
                color: #fff;
                background-color: #a79d94;
                border: solid 1px #a79d94;
            }
            
            #micola .buy_btn.color_4{
                margin: 4% auto;
                color: #fff;
                background-color: #6d6d6d;
                border: solid 1px #6d6d6d;
            }
            
            #micola .buy_btn.color_5{
                margin: 4% auto 0% auto;
                color: #fff;
                background-color: #e0b7b3;
                border: solid 1px #e0b7b3;
            }
            
            #micola .buy_btn.color_6{
                margin: 4% auto 0% auto;
                color: #fff;
                background-color: #b6b9cc;
                border: solid 1px #b6b9cc;
            }
            
            
            #micola .buy_btn.color_1:hover,
            #micola .buy_btn.color_2:hover,
            #micola .buy_btn.color_3:hover,
            #micola .buy_btn.color_4:hover,
            #micola .buy_btn.color_5:hover,
            #micola .buy_btn.color_6:hover{
                color: #212121;
                background-color: #fff;
            }
            

/*-----------------------------------------------------------------------------------------
header
----------------------------------------------------------------------------------------*/
#micola #header{
    width: 100%;height: 100vh;        
    background-color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    h1{
        z-index: 99;position: relative;width: 30vw;
        opacity: 0;
        filter: blur(10px);
        animation: reveal 1s ease forwards;
        animation-delay: 0.3s; 
    }}
    @keyframes reveal {
        0% {
            opacity: 0;
            filter: blur(10px);
        }
        100% {
            opacity: 1;
            filter: blur(0);
        }
    }

#micola #header .backimage{
    div{position: absolute;}
    img{   
        filter: grayscale(100%);
        animation: colorize 3s ease forwards;
        opacity: 1;}

    .hi_7{       
        left: -5vw;
        top: -2vh;
        width: 43vw;
        img{animation-delay: 1s;}}

    .hi_6{
        bottom: 0;
        width: 66vw;
        right: -9vw;
        img{animation-delay: 1.5s;}}

    .hi_5{
        width: 30vw;
        bottom: -20vh;
        left: 16vw;
        img{animation-delay: 2s;}}

    .hi_4{
        width: 30vw;
        top: -16vh;
        right: 14vw;
        img{animation-delay: 2.5s;}}

    .hi_3{
        width: 41vw;
        bottom: -37vh;
        left: 4vw;
        filter: blur(3px);
        img{animation-delay:2.5s;}}

    .hi_2{
        left: -4vw;
        top: 0;
        width: 18vw;
        filter: blur(3px);
        img{animation-delay: 3s;}}

    .hi_1{     
        width: 36vw;
        right: -20vw;
        top: 2vh;
        filter: blur(3px);
        img{animation-delay: 3s;}}

}

@keyframes colorize {
    0% {
        filter: grayscale(100%);

    }
    50% {
        filter: saturate(200%);
    }
    100% {
        filter: grayscale(0%);
    }
}
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down a{
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll_down a{
  color: #262326;
  position: absolute;
  bottom: 60px;
  left: 50%;
  display: block;
  background-size: 14px auto;
  z-index: 2;
  text-decoration: none; 
  transform: translate(-50%, -50%);
}

.scroll_down a:before {
  position: absolute;
  top: calc(50% + 24px);
  left: calc(50% - 8px);
  transform: rotate(-45deg);
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid #262326;
  border-width: 0px 0 2px 2px;
  animation: bounce 2s linear infinite;
}

.scroll_down a:after {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid #262326;
  content: "";
  border-radius: 50%;
  top: calc(50% + 16px);
  left: calc(50% - 19px);
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  70%,
  80% {
    -webkit-transform: translateY(0)rotate(-45deg);
    -ms-transform: translateY(0)rotate(-45deg);
    transform: translateY(0)rotate(-45deg);
  }
  40% {
    -webkit-transform: translateY(-8px)rotate(-45deg);
    -ms-transform: translateY(-8px)rotate(-45deg);
    transform: translateY(-8px)rotate(-45deg);
  }
  60% {
    -webkit-transform: translateY(-4px)rotate(-45deg);
    -ms-transform: translateY(-4px)rotate(-45deg);
    transform: translateY(-4px)rotate(-45deg);
  }
}


/*-----------------------------------------------------------------------------------------
main
----------------------------------------------------------------------------------------*/

#micola main{width: 100%;}

#micola main .wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;}
    
#micola main .wrap > div{
    width: 100%;
        .inner{  
            width: 100%;  
            padding: 50px 20px;
            box-sizing: border-box;
}}


/*-----------------------------------------------------------------------------------------
main intro
----------------------------------------------------------------------------------------*/
#micola #intro{
    background-color: #f6f6fa;position: relative;
    padding: 50px 0;
    .inner{margin: auto;width: 1080px;}
}

#micola #intro .inner > div:first-of-type{
    display: flex;
    width: 500px;
    position: relative;
    flex-direction: column;
    align-items: center;
    z-index: 1;
        img{width: 80%;}
}
#micola #intro .intropic{
    position: absolute;
    bottom: -104px;
    right: 0;

    img{    max-height: 100vh;        
        filter: grayscale(100%);
        animation: colorize 3s ease forwards;
        animation-delay: 3s;}
}
/*-----------------------------------------------------------------------------------------
main ranking
----------------------------------------------------------------------------------------*/
#micola #ranking{
    z-index: 2;
    background-color: #e2d0d9;    
    background: linear-gradient(to bottom left, #e3e3e3, #dab6cb, #acc1db);
    .inner{            width: 880px;       margin: auto;}
    .itemlist{
        display: flex;            
        flex-direction: row;
        flex-wrap: wrap;

        box-sizing: border-box;
        gap: 20px;}
    img:hover{opacity: 0.7;transition: 0.5s;}
    }

    #micola #ranking .item{
        border-radius: 20px;
        overflow: hidden;
        background-color: white;  
        align-items: center;
        justify-content: center; 
        width: fit-content;
        margin: auto;     
        img{width: 100%;}
        p.grd{font-size: 3rem;}
        .text{      
            display: flex;
            flex-direction: column;
            }
    }

    #micola #ranking .no1{ 
        width: 100%;
        display: flex;
        flex-direction: row;
        .pic{width: 50%;}
        .text{width: 50%;}}
    #micola #ranking .no2,    #micola #ranking .no3{
        display: flex;
        flex-direction: column;
        width: calc(100% / 2 - 10px);
        .pic{width: 100%;}
        .text{width: 100%;}
    }

/*-----------------------------------------------------------------------------------------
main itemroop
----------------------------------------------------------------------------------------*/
#micola #itemroop{    
    position: relative;
    background-color: white;
    overflow: hidden;
.inner{padding: 0;}}
#micola img.bgtext{
    top: 20%;width: 100vw;position: absolute;left: 0;
    }


#micola .parade {
    overflow: hidden;
    width: 200%;
    animation: scroll 50s linear infinite;}

    #micola .parade-track{
        display: flex;
        width: calc(200%);
        animation: scroll 50s linear infinite;
        a{            width: 221px;}
        img {
            flex-shrink: 0;
            width: 100%;
          }
      }

      @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

/*-----------------------------------------------------------------------------------------
main itemcorner
----------------------------------------------------------------------------------------*/
#micola #itemcorner{   
    background: linear-gradient(to bottom, #e3e3e3, #dab6cb, #acc1db);
    .inner{    
        display: flex;    
        flex-direction: column;
        gap:30px;
        width: 1080px; margin: auto;}
    }
#micola #itemcorner .itemlist{
    display: flex;
    gap: 50px; 
    justify-content: center;     
    margin: 0 auto 60px;
    flex-wrap: wrap;}

#micola #itemcorner .itemlist .item{
    width: 400px;
    display: flex;
    flex-direction: column;
    h3{margin-bottom: 10px;}
}

/*お気に入り=========*/
#micola .item a.heart{
    position: absolute;
    font-size: 40px;
    z-index: 99;
    top:5px;
    left: 10px;
    color: #fff;
    transition: 0.3s;
    
}
#micola .item a.heart:hover{
    color: #ffb6c2;
    opacity: 1;
}
    
/*-------------------------
slider
----------------------------*/

    #micola #itemcorner .itemlist .item [class^="thumb_slider"]
    {position: relative;}

    #micola #itemcorner .itemlist .item .swiper{        
        position: relative;
        .pickup{
            margin: 10px;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 80;
            div{    
                border: 1px solid #262326;
                width: 70px;
                min-height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff61;}
            } 
    }


/*カラーボタン=========*/
#micola .item .swiper-thumb-wrapper {
    justify-content: center;
    margin:10px auto 15px auto;
    li{
        content: "";
        width: 25px!important;
        height: 25px!important;
        border-radius: 50%;
        margin: 0 4px;
        cursor: pointer;
        border: solid 1px #b1b1b1;
    }
}


/*矢印=========*/
#micola .item .swiper-button-prev,
#micola .item .swiper-button-next{
    transform: translateY(-50%);
}

#micola .item .swiper-button-prev::after,
#micola .item .swiper-button-next::after {
    color: #fff;
    font-size: 40px;
    font-weight: bold
}


/*-----------------------------------------------------------------------------------------
navi
----------------------------------------------------------------------------------------*/
#micola #navi{
    padding: 50px 20px;
    border-radius: 20px;
    z-index: 100;
    width: 200px;
    position: fixed;
    left: 20px;
    top: 20px;        
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.5s ease, filter 0.5s ease;
    backdrop-filter: blur(0); 
    .wrap{    gap: 20px;
        display: flex;
        flex-direction: column;}
}

#micola #navi.show {
    opacity: 1;
    filter: blur(0);
    backdrop-filter: blur(5PX); 
    filter: drop-shadow(2px 4px 6px #2c2c2c42);
}

#micola #navi .menu{    display: flex;
    gap: 1rem;
    flex-direction: column;}
    #micola #navi .menu a:hover
{color:#b73b6e;filter: blur(1px);}




/*-----------------------------------------------------------------------------------------
footer
----------------------------------------------------------------------------------------*/
#micola footer{    
    background-color: #262326;color: white;
    padding: 10px 0;
    a{color: white;}
    .wrap{
        display: flex;    
        gap: 10px; 
        width: fit-content;
        margin: auto;}
}


/*-----------------------------------------------------------------------------------------
anime
----------------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------------
241121追加しました
----------------------------------------------------------------------------------------*/
.coupon_area {
    width: 880px;
    margin: 4% auto 3%;
}

.coupon_area a {
    text-align: center;
}

.coupon_area p {
    font-size: 35px;
    padding-top: 20px;
    width: 73%;
    margin: 0 auto;
}