@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Noto+Sans+JP:wght@100;200;400;500;600;700&family=Noto+Serif+JP:wght@600;700&family=Manrope:wght@200;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
.time-box span{font-family: "fot-tsukuaoldmin-pr6n", sans-serif !important; }
*{ box-sizing: border-box; margin: 0;padding: 0;font-family: 'Noto Sans JP', sans-serif; }
body{ height: 100vh; background:transparent;}
body::before{ 
    content: '';
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: #fff;
}
h1{ line-height: 0 !important; }
.p-black{color: #292929;}
span.dot{ font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
.break_s{display: none;}
#mask-cover{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    /* background: linear-gradient(0deg, #FCC4C0,  #D8BAFF,#A5EFFF); */
    z-index: 9999;
    transition: all 0.3s ease;
    filter: blur(0px);
}
.mask_bg{ 
    width: 100%; height: 100%; position: absolute;top: 0; left: 0; opacity: 0;
    filter: blur(0.1rem);
    animation: mask-bg 0.5s forwards ease;
}
.mask_bg img{  width: 100%; height: 100%; object-fit: cover;}
#mask-cover.mask-hide{ pointer-events: none; opacity: 0; filter: blur(200px);}

section{ background-color: #fff; }
.outter{ opacity: 1; width: 100%; height: 100vh;padding-top: 40px; background-color: #fff;}
.outter>.container{ width: 100%;height: 100%; position: relative; max-width: unset; }
@media (max-width:650px) {
    .outter{ padding-top: 50px;}
}
@media (max-width:550px) {
    .break_s{display: block;}
}
@media (max-width:479px) {
    .outter{ height:100vh; }
}
.smooth-title .ani-title {
    clip-path: inset(0 100% 0 0);
    transition: 0.5s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
    line-height: 1;
}
.smooth-title.is-active .ani-title { clip-path: inset(0);}
.anim-blur{ filter: blur(2rem); }
.anim-blur.is-active { animation: anim-blur 0.5s forwards; }

@keyframes anim-blur{ 
    0%{filter: blur(2rem); opacity: 0; transition: all 0.5s;}
    100%{  filter: blur(0); opacity: 1;  transition: all 0.5s;}
 }

.cross_wrap{max-width: 300px; text-align: center;}
.cross_wrap img{width: 100%; }
.time_wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
.time {
    position: relative;
    height: 5px;
    width: 200px;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    border-radius: 30px;
    margin: auto;
}
.time-box{ 
    font-size: 60px;
    color: #292929;
    text-align: center;
    left: 15px;
    opacity: 0;
    animation: mask-bg 0.5s forwards ease;
    animation-delay: 0.3s;
}
.time-box span{font-family: "Playfair Display", serif !important;font-weight: 400; }
.persent-num{ font-size: 1.6em; transition: all 1.5s ease;}
.persent{ font-size: 24px;}
@keyframes mask-bg{
    0%{opacity: 0;}
    100%{opacity: 100;}
}
nav{
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
ul,li{ list-style: none; }
.logo_wrap{ width: 360px; }
.logo_wrap img{ transform: scale(1.5) translate(10px,14px); transform-origin: left center; transition: 0.3s;}
/* .logo_s{ display: none; } */
.burger_01{ width: 100%; height: 1px; background: #292929;margin-bottom: 5px; display: block; transition: all 0.3s ease-in-out;}
.burger_02{ width: 50%; height: 1px; background: #292929; display: block; transition: all 0.3s ease-in-out;}
.list_box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.navbar {
    width: 50px; padding: 10px;
    height: 100%;
    position: relative;
    cursor: pointer;
    right: -10px;
}
.nav-toggle {
    width: 30px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #fff;
    font-weight: 100;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-49%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.navbar:hover .burger_01{ width: 50%;}
.navbar:hover .burger_02{ width: 100%;}
.nav {
    position: fixed;
    width: 0%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    left: 0;
    top: 0;
    background: #292929;
    z-index: 9999;
}
.nav > div { margin:auto;}
.nav-items { margin: 60px;}
.nav-item { position: relative; font-size: 75px; text-align: center; padding-left: 0; margin: auto;}
.nav-item a {
    position: relative;
    /* top: 140px; */
    text-decoration: none;
    color: #D8BAFF;
    text-transform: uppercase;
    font-family: "Manrope", sans-serif !important;
    font-size: 75px;
    font-weight: 200;
    letter-spacing: 0;
    transition: 1s;
    white-space: nowrap;
}
.nav-item a:hover{ color: #A5FFF4;}
.nav-item a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0%;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
    transition: 0.3s;
}
.nav-item:hover a::after {width: 100%;}
.nav-item:hover a{ text-decoration: none; }
@media (max-width: 1200px) {
    .logo_wrap{ width: 25%; }
}
.logo_wrap{ width: 360px; }
@media (max-width: 990px) {
    .nav { left: 0%;}
    .nav-item a { font-size: 40px; letter-spacing: 0;}
}
main{
    max-width:600px ;
    height: calc(100vh - 60px) ;
    top: 60px;
    position: absolute;
    right: 60px;
    background:  #8EEAF0 ;
    display: none;
    /* padding-top: 59px; */
    /* overflow-y: scroll; */
} 
main > div{ overflow: hidden; }
.container{ max-width: 960px;margin: auto; position: relative;}
.scrollbar::-webkit-scrollbar{
    height: 2px;
    width: 5px;
    background: rgba(255, 255, 255, 0);
    position: absolute;
    right: 5px;
}
.scrollbar::-webkit-scrollbar-track {
    position: absolute;
    background-color: rgba(255, 255, 255, 0) !important;
    border-radius: 10px;
    margin: 10px 100px;
}
.scrollbar::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);
    transition: all 0.5s ease;
}
.scrollbar:hover::-webkit-scrollbar-thumb{ background-color: rgba(0, 0, 0, 0.3);} 
@media (max-width:650px) {
   .scrollbar::-webkit-scrollbar{ display: none; }
}

.p-title,.big-title{ font-family: 'Krona One', sans-serif; text-align: center; }
.p-sub-title{ font-family: 'Noto Sans JP', sans-serif; font-weight: 400; margin: 0;font-size: 14px;}
.p-normal{  font-family: 'Noto Serif JP', serif; font-weight: 400;line-height: 2; font-size: 14px; }

.hero-selector{ 
    position: relative;z-index: 5;
    background:  -webkit-linear-gradient(270deg,#FFF, #ffffff00);
    padding-top: 60px;padding-bottom: 60px;}
.hero-selector ul{ margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; padding-left: 60px; padding-right: 60px;}
.hero-selector li{  padding-left: 0; position: relative; overflow: hidden;}
.hero-selector li a{display: block; clip-path: circle(38%);  }
.hero-selector li img{ transform: scale(1); transition: 0.5s;}
.hero-selector li a:hover img{ transform: scale(1.15); transition: 0.5s;}
.hero-selector li .head_circle{ position:absolute; width: 100%; height: 100%;top: 0; left: 0;transform-origin: center ; opacity: 0; transition: 0.3s;pointer-events: none; animation: circle 15s linear infinite;}
.hero-selector li:hover .head_circle{opacity: 1; transition: 0.3s;}

.hero_btn_box{ position: fixed; right: 15px;top: 50%;  width: 50px; transform: translateY(-50%); padding: 15px;z-index: 20; 
    opacity: 0; pointer-events: none; transition: 0.3s;}
.hero_unactive{opacity: 0; pointer-events: none; transition: 0.3s; }
.hero_active{ opacity: 1; pointer-events: all; transition: 0.3s;}
.hero_btn_box div{ margin: 15px 0px; }
.hero_btn_box a{padding-top: 99%;width: 100%; display: block; background: url(../image/shine.png)no-repeat; background-size: contain !important;background-position:center !important; transform: scale(1); transition: 0.3s;}
.btn_unactive a{ opacity: 0.5;transition: 0.3s;}
.btn_active a{ opacity: 1; transform: scale(1.5); transition: 0.3s;}
.btn1.btn_active a{ background: url(../image/shine_shu.png)no-repeat;}
.btn2.btn_active a{ background: url(../image/shine_nari.png)no-repeat;}
.btn3.btn_active a{ background: url(../image/shine_uki.png)no-repeat;}
.btn4.btn_active a{ background: url(../image/shine_elira.png)no-repeat; }
.btn5.btn_active a{ background: url(../image/shine_doppio.png)no-repeat;  }
.btn6.btn_active a{ background: url(../image/shine_millie.png)no-repeat;  }
@keyframes circle{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}
@media (max-width:768px) {
    .hero_btn_box{width: 40px; right: 5px;}
}
@media (max-width:640px) {
    .hero-selector ul{ flex-wrap: wrap; }
    .hero-selector li{ width: 33.33333%;}
    .hero_btn_box{width: 40px; right: 0px;}
}
@media (max-width:480px) {
    .hero-selector ul{ padding-left: 20px; padding-right: 20px; }
}

/* ============= 導購按鈕============= */
.shop_btn{
    background: #292929;
    display: block;
    max-width: 240px;
    padding: 16px 24px;
    font-family: 'Noto Sans JP', sans-serif;
    margin: auto;
    text-align:  center;
    overflow: hidden;
}
.shop_btn > span{
    font-weight: 700;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition:all 1s ease;
}
.shop_btn:hover {text-decoration: none;}

.shop_btn  span.shop_now{
    background: -webkit-linear-gradient(180deg,#A5EFFF,#D8BAFF, #FCC4C0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}
.shop_now::before{
    content: '';
    background: linear-gradient(70deg,#A5EFFF,#D8BAFF, #FCC4C0);
    width: 300px;
    height: 100px;
    position: absolute;
    top: -20px;
    left: -90px;
    z-index: -100;
    opacity: 0;
    transform-origin: left center;
    transition: all 0.1s ease-in-out;
}
.shop_btn:hover .shop_now::before{
    content: '';
    background: linear-gradient(70deg,#A5EFFF,#D8BAFF, #FCC4C0);
    opacity: 1;
}
.shop_btn:hover span.shop_now{
    background: -webkit-linear-gradient(180deg,#292929);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #292929;
    position: relative;
    z-index: 10;
}
.show_more {
    width: 50px;
    height: 50px;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    transition: 0.3s ease-in-out;
    color: rgba(255, 255, 255, 0) ;
    font-size: 16px;
    z-index: 10;
    pointer-events: none;
}
.arrows {
    overflow: hidden;
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: 0.3s ease-in-out; 
}
.shop_btn .arrow, .shop_btn .arrow-hidden {
    width: 25px;
    height: 25px;
    color: #A5EFFF;
    display: inline-block;
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    transition: left 0.3s ease-in-out;
    background:unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.shop_btn .arrow-hidden { left: -50px; }
.shop_btn:hover .arrow { left: 70px; transition: left 0.1s ease-in-out;}
.shop_btn:hover .arrow-hidden {
    left: 50%;
    transition: all 0.3s ease-in-out;
    color: #292929;
}
.fv{
    background: linear-gradient(0deg, #EFF2F1 0%,  #8EEAF0 100%);
    padding-bottom: 60px; overflow: hidden;
    position: relative;
}

@media (max-width:959px) {
    main{
      height: calc(100vh - 60px) ;
      position: absolute;
      right:unset;
      left: 50%;
      transform: translateX(-50%);
    }
    .logo_wrap img{ transform: scale(1.25) translate(10px,8px); }
}
@media (max-width:650px) {
    nav{ height: 50px; }
    main{
      height: calc(100vh - 60px) ;
      position: absolute;
      right:unset;
      left: 50%;
      transform: translateX(-50%);
      /* padding-top: 50px; */
      top: 49px;
    }
    .logo_wrap{ width: 250px;}
    .logo_l{ width: 100%; }
    .logo_wrap img{ transform: scale(1.15) translate(0px,5px); }
}
.logo_shrink img{ transform: unset;}
.fv_m {
    /* margin: 30px 60px 60px; */
    position: relative;
    height: calc(100vh - 60px) ;
    width: 100%;
}
.fv_m::after{ 
    content:'';
    width: 100%;
    height: 30%;
    background: -webkit-linear-gradient(89deg,#EFF2F1, #a5fff400);
    position: absolute;
    bottom: -60px;
    left: 0;
 }
.fv_m img,video{
    width: 100%;
    height: 100%;
    display: inline-block;
    object-fit: cover;
    object-position: center center;
    line-height: 0;
    border: 0;
}
.fv article{ 
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-family: 'Krona One', sans-serif;
    color: #292929;
    z-index: 10;
}
.fv article h3{
    font-family: 'Krona One', sans-serif; font-size:36px ; color: fff; 
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 1px black;
    line-height: 1;
    word-wrap:normal;
    
}
.fv article p{ margin: 0px 0px; font-size:12px ;}
.fv article p:last-of-type{ margin-bottom: 20px; font-size: 24px;font-family: 'Noto Serif JP', serif; font-weight: 600;}

.stream { padding: 200px 30px 100px; position: relative; overflow: hidden; z-index: 25;}
.stream .container>div{ 
    max-width: 560px;
    margin: auto;
}
.stream h3,p{text-align: center; }
.stream h3{ position: relative; font-family: 'Noto serif JP', serif; font-weight: 600; z-index: 10;}
#pr_stream p{ font-family: "fot-tsukuaoldmin-pr6n", sans-serif ;}
.big-title-box > figure{
    position: absolute;
    left: 50%;
    transform: translate(-50%,-70%);
    max-width: 700px;
}
.stream::after{
    content: '';
    width: 70px;
    height: 60px;
    position: absolute;
    left: 50%;
    bottom:0px;
    transform: translateX(-50%);
    background: url(../image/deco_star_color.svg) no-repeat center; 
    background-size: contain;
}
.big-title-box > figure img{ width: 100%; }
@media (max-width:1600px) {
    .big-title-box > figure{
        width: 100%;
    }
}
@media (max-width:960px) {
    .big-title-box > figure{ width: 80%;}
    .stream { padding: 100px 30px 100px 30px; }
}
@media (max-width:650px) {
    .big-title-box > figure{
        left: 50%;
        width: 100%;
        transform: translate(-50%,-110%) scale(1.1);
    }
    .stream { padding: 150px 30px 100px;}
}

#cp_intro article{margin: 0px 30px 60px 30px; padding-top: 60px;}
.cp_intro  .p-normal{
    background: -webkit-linear-gradient(180deg,#FCC4C0,#D8BAFF, #A5FFF4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
#cp_intro::before { 
    content: '';
    width: 1px;
    height: 60px;
    background: #999999;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0%;
 }
@media (max-width:650px) {
    #cp_intro article{margin: 0px 30px 60px 30px; padding-top: 60px;}
    
}
.yt_wrap{position: relative;padding: 30px;}
.yt_box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    padding-bottom: 56%;
    border: 1px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(to left, #D8BAFF, #FCC4C0);
}
.yt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vd_frame{
    position: absolute;
    width: 93%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.pd_slider{ position: absolute;top: -120px; width: 100%; overflow: hidden;}
.pd_slider .slide-track {
    -webkit-animation: scroll 30s linear infinite;
            animation: scroll 30s linear infinite;
    display: flex;
    width: calc(600px * 4);
}
.pd_slider .slide { width: 600px; }
.pd_slider img{ width:100%; }

@media (max-width:1600px) {
    .pd_slider{top: -60px;  }
    .pd_slider .slide-track {width: calc(400px * 4);}
    .pd_slider .slide { width: 400px; }
}
@media (max-width:960px) {
    .pd_slider{ top: -180px;}
    .pd_slider .slide-track { width: calc(800px * 4);}
    .pd_slider .slide { width: 800px; }
}
@media (max-width:480px) {
    .pd_slider{ top: -90px;}
    .pd_slider .slide-track { width: calc(500px * 4);}
    .pd_slider .slide { width: 500px; }
    .yt_wrap{padding: 30px;margin-left:-30px ;margin-right: -30px;}
    .vd_frame{ width: 92%;}
}
@media (max-width:420px) {
    .vd_frame{ width: 89%;}
}

.btn_box{ display: flex;flex-direction: row; justify-content: center; align-items: center; margin-top: 30px;}
.normal_btn{ display: block; width: 25%; text-align: center; color: #D9D9D9; font-size: 12px;line-height: 0.8; border: 1px solid #D9D9D9; border-radius: 50px; padding: 6px 16px; transition: all 0.3s ease; }
.normal_btn:first-of-type{ margin-right: 15px; } 
.normal_btn:hover{  text-decoration: none; color: #292929; background-color: #D9D9D9; transition: all 0.3s ease;}
.company{ width: 100%;padding: 90px 30px 0px 30px; text-align: center;}
.company >img{ max-width: 200px; }
/* SPECIAL KIT============================ */

/* ----------------------------
  attention
---------------------------- */
.attention {padding: 200px 30px 100px; position: relative; overflow: hidden;}
.attention article{ padding:30px 10px 0px 30px; max-width: 960px; position: relative; background: #fff;}
.attention_info_wrap{ position: relative; z-index: 10;} 
.attention article::before{ 
    content: '';
    width: 16px;
    height: 100px;
    position: absolute;
    top: -8px;
    left: -8px;
    background: url(../image/deco_top.svg) no-repeat;
    background-size: 100% auto;
    background-position: top center;
}
.attention article::after { 
    content: '';
    width: 16px;
    height: 100px;
    position: absolute;
    bottom: -9px;
    right: -9px;
    background: url(../image/deco_btm.svg) no-repeat;
    background-size: 100% auto;
    background-position: top center;
    z-index: 10;
}
h3.title_attention{ 
    position: absolute; 
    max-width: 550px;
    right: 0;
    top: -110px;
    /* transform: translate(0%,-30%); */
    z-index: 20;
}
#attention h3.big-title{ 
    text-align: start; padding-left: 30px; margin-bottom: 0;
    font-family: 'Noto Serif JP', serif;
}
.attention_info_wrap{ background: #fff; padding: 30px;}
.attention_info_wrap li{ 
    text-align: justify; font-size: 14px;line-height: 1.8; margin-bottom: 15px;font-weight: 300;
    text-indent:-1em;padding-left: 1em;
}
.attention_wrap{ position: relative; max-width: 960px; margin: auto;}
#bg_color{ 
    position: absolute; 
    width: 960px;
    height: 90%;
    top: 20%;
    left: 10%;
    overflow: hidden;
    padding: 0;
}
#bg_color li{  padding: 0;}
#bg_color img{ object-fit: cover;object-position:center; width: 100%; }
.bg_bottom{ background: -webkit-linear-gradient(270deg,#EFF2F1, #8EEAF0); }
@media (max-width:1600px) {
    .attention article{ padding:10px 30px; }
}

@media (max-width:960px) {
    h3.title_attention{  max-width: 500px;}
    #bg_color{ 
        width: 110vw;
        left: -10% ;
        top: 5%;
        height: 150vh;
    }
    #bg_color img{ height: 200vh;}
}
@media (max-width:640px) {
    .attention_info_wrap{ padding-left: 0;}
    .attention article{ padding-right: 0;}
    #attention h3.big-title{padding-left: 0 !important;}
    h3.title_attention{  top: -150px;}
}

/* SNS=================================== */
.sns_share{ 
    padding: 30px 60px 30px; 
    position: relative;
}
.icon_sns { text-align: center; margin-bottom: 20px; }
.icon_sns a{ font-size: 36px;color: #292929; transition: all 0.3s; }
.icon_sns a:hover{color: #2cbbaa; opacity: 0.7; transition: all 0.3s;  }
.icon_sns a{ margin-right: 20px; }
.icon_sns a:first-of-type + a{ margin-right: 19px;}
.icon_sns a:last-of-type{ margin-right:0px;}
.icon_sns a:nth-last-of-type(2){ margin-right:18px;}
.support{ max-width: 150px; margin: auto; margin-bottom: 10px;}
.copyright{ margin-bottom: 5px; font-size: 0.9em;}
.logo-js{ 
    background: url(../image/logo-js-black.png) no-repeat;
    background-position: center;
    background-size: 100% auto;
    display: inline-block;
    transition: all 0.3s ease;
    z-index: 100;
}
.shop_btn_js:hover .logo-js{ 
    background: url(../image/logo-white.png) no-repeat; 
    background-position: center;
    background-size: 100% auto;
    transition: all 0.3s ease;
    z-index: 100;
}
.shop_btn_js{
    background: -webkit-linear-gradient(0deg,#A5FFF4,#EFF2F1, #FCC4C0);
    width: 100% ;
    max-width: unset;
    text-align: center;
    position: relative;
}
.shop_btn_js  img{ max-width: 120px; }

.logo-js::after{
    content: '';
    background: #292929 ;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    transform-origin: left center;
    transition: all 0.1s ease-in-out;
}
.shop_btn_js:hover {
    /* content: ''; */
    /* background: -webkit-linear-gradient(0deg,#A5FFF4,#EFF2F1, #FCC4C0); */
    background: #292929 ;
    opacity: 1;
    z-index: 0;
    transition: all 0.3s ease-in-out;
}

.nav .icon_sns { 
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);}
.nav .icon_sns a{  
    color: #D8BAFF !important;
    z-index: 50;
}
.nav .icon_sns a:first-of-type + a{ margin-right: 20px; }

@keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-400px * 2));
    }
}
@keyframes roll {
    0% {
      transform: translate(-50%,-50%) rotateZ(0deg) ;
    }
    100% {
        transform: translate(-50%,-50%) rotateZ(360deg) ;
    }
}
  

@media (max-width:1600px) {
    main{ width:400px ;}  
    .special_kit{  padding: 60px 30px; } 
    .product_info_wrap{ padding: 0px 30px; } 
    .sns_share{ 
        /* margin: 30px 30px 0px; */
        padding:30px 30px 30px;
    }
    ul.slide{ margin-left: -30px; margin-right: -30px;}
    .slide__item{ padding: 30px; }
}
@media (max-width:640px) {
    main{ max-width: 640px; width:100%; right: 0;}    
    .special_kit{  padding: 60px 60px; }  
    .kv{ display: none !important; }
    ul.slide{margin-left: -60px; margin-right: -60px;}
}
@media (max-width:480px) { 
    .special_kit{  padding: 60px 30px; }  
    ul.slide{margin-left: -30px; margin-right: -30px;}
}

@media (max-width:360px) { 
    .special_kit{  padding: 60px 15px; }  
    .product_card{ padding: 40px 15px;  }
    .product_card.pd_02{ padding: 40px 15px;   }
    .product_box h3.product_name{ white-space: nowrap; font-size: 1.35rem; font-size: 800;}
    .product_info_wrap{ padding: 0 15px; }
    .product_box h3.product_name::before{  left: -15px;width: 6px;height: 27px;}
    .product_box h3.product_name::after{  right: -15px;width: 6px;height: 27px;}
    ul.slide{margin-left: -15px; margin-right: -15px;}
    .center .slick-list{ margin-left: -15px; margin-right: -15px; }
    .slide__item{ padding: 15px; }
}
.slick-next:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../image/arrow-next.svg)no-repeat;
    background-size: 30% auto;
    background-position: center;
}
.slick-prev:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../image/arrow-prev.svg)no-repeat;
    background-size: 30% auto;
    background-position: center;
}
.slick-prev {left:0; width: 40px; height: 40px;}
.slick-next {right:0;width: 40px; height: 40px;}


/* Animation */
@-webkit-keyframes move {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -8px, 0);
		transform: translate3d(0, -8px, 0);
	}
	35% { opacity: 1; }
	50% { opacity: 1; }
	65% { opacity: 1; }
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes move {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -8px, 0);
		transform: translate3d(0, -8px, 0);
	}
	35% { opacity: 1; }
	50% { opacity: 1; }
	65% { opacity: 1; }
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.kv-title{
    position: absolute;
    width: 100%;
    padding:10px 20px 0 20px;
    background: #fff;
    top:0;
    z-index: 50;
}
.kv-title>img{ 
    position: absolute;
    width: 30%;
 }
.kv-title::after{
    content: '';
    position: absolute;
    top: calc(100% - 1px) ;
    left: 0; 
    right: 0;
    padding-bottom: 10%;
    background: #fff;
    clip-path: polygon(105% 0, 0 0, 0 25%);
    z-index: -1;
}

/* ---------------------------- 
intro_campaign
---------------------------- */
.character_outter_wrap{background: #fff;}
.intro_campaign{
    /* margin-top: 100px; */
    padding: 100px 30px 0px;
    position: relative;
    z-index: 15;
}
.intro_campaign::after{
    content: '';
    width: 70px;
    height: 60px;
    position: absolute;
    left: 50%;
    bottom:20px;
    transform: translateX(-50%);
    background: url(../image/deco_star.svg) no-repeat center; 
    background-size: contain;
}
.intro_campaign> .container{
  margin: auto;
  max-width: 800px;
  padding-bottom: 100px;
}
.intro_campaign h2{ max-width: 500px; margin: auto;margin-top: 60px; margin-bottom: 20px;}
.brand_box{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    margin: auto;
    margin-bottom: 60px;
}
.brand_box figure{ margin: 0; padding: 0 10px;}
.brand_box_cross{ width: 60px;height: 30px; position: relative;}
.brand_box_cross span{ 
    position: absolute;width: 100%;height: 1px; background: #292929;
    top: 50%;
    transform-origin:center ;
    transform: rotateZ(45deg) translateY(-50%) ;
 }
.brand_box_cross span:nth-last-of-type(1){
    top: 50%;
    transform-origin:center ;
    transform: rotateZ(-45deg) translateY(-50%);}

.intro_campaign  p{
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 2.1;
    font-size: 0.9em;
    letter-spacing: 0em;
}

@media screen and (max-width:959px) {
    .intro_campaign> .container{
        padding-bottom: 60px;
      }
    .intro_campaign::after{
          content: '';
          bottom:-30px;
          /* padding-bottom: 80px; */
    }
}
@media screen and (max-width:640px) {
   .intro_campaign h2{margin-top: 0;}
}
/*----------------------------  
intro_character
---------------------------- */
#character .container{max-width: 100%; }
#character article{max-width: 100%; }
.intro_character {
    padding: 0px 0 100px 0px;
    overflow: hidden;
    position: relative;
}
.intro_character::after {
   content: '';
   width: 100%;
   height: 360px;
   position: absolute;
   bottom: 0;
   left: 0;
   background: url(../image/bg_mask_white.png)no-repeat;
   background-size: 100% 100%;
   background-position:center bottom ;
}
.intro_character article{
    display: flex;
    flex-direction: row;
    /* overflow: hidden; */
}
.intro_character article:nth-of-type(even) .inner_container{
    flex-direction: row-reverse;
    /* padding-top: 60px; */
}
/* .intro_character article:nth-of-type(3){ padding-top: 60px;} */
.intro_character .pd_info_card {width: 45%;}
.character_bg{
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}
.character_bg img{ height: 100%; width: 100%; object-fit: cover; }
.character_img {position: relative;/* display: flex; flex-direction: column; justify-content: center; */ padding-left: 0;}
.character_img img.character_illus{ 
    position: relative; transform: scale(1.2) ;transform-origin: center; filter:drop-shadow(3px 3px 0px #00000026);
    width: 100%; 
    object-fit:contain ; 
    object-position: center;
}
.character_img img.character_frame{ position: absolute; transform: scale(1.4); width: 100%; object-fit:contain ; object-position: center;}
.character_img img.character_flower{ position: absolute; transform: scale(1.2); width: 100%; object-fit:contain ; object-position: center; left: 0;}
.character_img img.character_deco{ position: absolute; transform: scale(1.2); width: 10%; left: 0;bottom: 0;}
.character_img img.character_pd{  position: absolute; width: 45%; left: 50%; transform: translate(-35%,110%); filter: drop-shadow(0 0 0.75rem #fff);}
.character_img img.character_deco{ position: absolute; }
.character_img img.nari_sheep_01{ width: 25%;left: unset; right: 10%;bottom: 0%;}
.character_img img.nari_sheep_02{ width: 18%;left: 10%; bottom: 12%;}

@media screen and (max-width:959px) {
    .character_img img.nari_sheep_01{ width: 22%;right: 13%;bottom: 6%;}
    .character_img img.nari_sheep_02{ width: 15%;left: 13%; bottom: 18%;}
}
.tag_perfume{
    background: #A660A7;
    color: #fff;
    padding: 6px 10px;
    border-radius: 9px;
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.character_block{ position: relative; z-index:1; }
.character_block.block_02{ z-index:2;}
.character_block.block_03{ z-index:3;}
.character_block.block_04{ z-index:4;}
.character_block.block_05{ z-index:5;}
.character_block:nth-of-type(2) .tag_perfume{ background: #F28A73; }
.character_block:nth-of-type(3) .tag_perfume{ background: #C269E6; }
.character_block:nth-of-type(4) .tag_perfume{ background: #B262A3; }
.character_block:nth-of-type(5) .tag_perfume{ background: #A50082; }
.character_block:nth-of-type(6) .tag_perfume{ background: #21777F; }
.sub_perfume{ 
    font-size: 1.5em; 
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-style: normal;
    font-weight: 600;
    color: #9574B1;
}
.character_block:nth-of-type(2) .sub_perfume{ color: #F28A73;}
.character_block:nth-of-type(3) .sub_perfume{ color: #C269E6;}
.character_block:nth-of-type(4) .sub_perfume{ color: #B262A3;}
.character_block:nth-of-type(5) .sub_perfume{ color: #B262A3;}
.character_block:nth-of-type(6) .sub_perfume{ color: #96B1A5;}
.inner_container{ width: 960px; margin: auto; padding-top: 120px; position: relative; z-index: 1;}
.character_btoom{ top: unset; bottom: 0; z-index: 0;}
.copywrite_perfume {padding-bottom: 10px;}
.copywrite_perfume p{ 
    text-align: center; 
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 2.1;
    font-size: 0.95em;
    letter-spacing: 0;
}
.perfume_box{ max-width: 240px; margin: auto;}
.name_box{ text-align: center; }
.name_box h2{ max-width: 400px;margin: auto; margin-bottom: 20px;}
.character_block:nth-of-type(2) .name_box h2{ transform: scale(1.025) translateY(-10px);}
.table_perfume li{ font-size: 14px; }
.table_perfume li div{ font-family: "Manrope", sans-serif; font-weight: 600;}
.table_perfume li div:not(.tag_tone){ font-family: "fot-tsukuaoldmin-pr6n", sans-serif; }
.table_perfume{padding: 30px 0;position: relative; border-top:1px dashed #292929;border-bottom:1px dashed #292929;}
.table_perfume ul,.table_price ul  {padding-left: 0; margin-left: 0;margin-bottom: 0;} 
.table_perfume > li,.table_price > li  {padding-left: 0; } 
.table_perfume .uk-grid+.uk-grid,.table_price .uk-grid+.uk-grid{ margin-top: 8px;}
.table_price{padding: 30px 0;}
.table_price .price_tag span{font-size: 2rem; font-weight: 600; font-family: "Manrope", sans-serif; font-style: normal;}
.table_price .price_tag span.yan{font-weight: 600; font-family: "Noto Sans JP", sans-serif; }
.table_price .price_tag span.tex{ font-size: 1rem; font-weight: 600;font-family: "Noto Sans JP", sans-serif;padding-left: 6px;}
.tag_special_set{ line-height: 1; }
.table_price li div{display: table-cell; vertical-align: bottom; }
.table_price .sub-info{ font-size: 13px; line-height: 1.5; margin-bottom: 5px;font-weight: 300;}
.price_item{position: relative; font-size: 13px;}
.price_item span{ position: absolute; transform: translateY(22px);font-family: "Manrope", sans-serif; font-weight: 600}
.price_item .tag_special_set { transform: translateY(15px);}

.section_bg{ width: 100%;height: 100vh; z-index: 0 !important; opacity: 0.6; position:fixed; top: 0px; left: 0;}
.section_bg div{ position: absolute; top: 0; left: 0 ;width: 100%; height: 100%;}
.section_bg img{ width: 100%; height:100%; object-fit: cover; }
.bg.fadeOut{ opacity: 1; animation: bg_02 0.5s forwards;}
.bg.fadeIn{ animation: bg 0.5s ease-in-out forwards; transition:opacity 0.3s ease-in-out;} 
#trigger_bg{ position: fixed; left: 0; top: 3%; }
@keyframes bg {
    0%{ opacity: 0; filter: blur(2rem);}
    100%{ opacity: 1; filter: blur(0);}
}
@keyframes bg_02 {
    0%{ opacity: 1;filter: blur(0);}
    100%{ opacity: 0; filter: blur(2rem);}
}
/* Title Visible */
@media screen and (max-width:959px) {
	.intro_character .pd_info_card {
        margin-left:0 !important ;
        margin: auto !important;
        width: 70%;
	}
    .intro_character article:nth-of-type(even){ padding-top: 0px;}  
    .block_01 .inner_container{padding-top: 0;}
    .name_box h2 { max-width: 500px; margin-bottom: 20px;}
    .intro_character { padding-left: 0px;}
    .character_img img.character_illus,.character_img img.character_flower{  transform: scale(1) ;}
    .character_img img.character_frame{ transform: scale(1.1) ;}
    .character_img img.character_pd{   filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 10px #fff);}
    .character_img{width: 80%; margin: auto;}
    .intro_character .pd_info_card { padding-left: 0;}  
    .perfume_box{ margin-top: 30px;}
}
@media screen and (max-width:640px) {
    .intro_character .pd_info_card { width: 80%;} 
    .character_img{width: 100%; z-index: 0; background: #fff;}
    .character_img img.character_illus{  transform: scale(1) ;filter:unset;}
    .character_img img.character_frame,.character_img img.character_flower{display: none;}
    .section_bg{opacity: 0.5;}
    .hero-selector{background: #FFF;}
    .character_img::before{
        content: '';position: absolute;width: 100%; height: 30vh;
        left: 0;bottom: calc(30vh * -1); background: -webkit-linear-gradient(90deg,#ffffff00, #fff);
    }
    .character_block::after{
        content: '';position: absolute;width: 100%; height: 50vh;
        left: 0;bottom: 0; background: -webkit-linear-gradient(90deg,#fff, #ffffff00);
    }
    .inner_container{ padding-top: 0; }
    .intro_character .pd_info_card{ padding-top: 0; position: relative;z-index: 10; transform: translateY(-3%);}
}
@media screen and (max-width:480px) {
    .tag_special_set br{ display: block; }
}
@media screen and (max-width:380px) {
	.intro_character .pd_info_card {
		padding-left: 30px;
        padding-right: 30px;
        width: 100%;
	}
}

/* ---------------------------- 
special_set
---------------------------- */
.special_set {padding: 100px 0 100px ; position: relative; z-index: 10;}
.special_set .container .uk-grid{ margin: auto;align-items: center; justify-content: center; padding: 60px 20px; max-width: 960px;}
.special_kit{ padding: 60px 60px; background: -webkit-linear-gradient(90deg,#8EEAF0,#EFF2F1, #8EEAF0); position: relative;}
.special_kit::before { 
    content: '';
    width: 1px;
    height: 60px;
    background: #292929;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0%;
 }
 .special_kit .pd_01::after { 
    content: '';
    width: 50%;
    height: 60px;
    background: url(../image/box_venetian.gif) no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    left: -60px;
    top: -60px;
    /* mix-blend-mode: screen; */
 }

 .special_kit .pd_02::after { 
    content: '';
    width: 50%;
    height: 60px;
    background: url(../image/box_venetian.gif) no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    left: -60px;
    bottom: -30px;
 }
 .special_kit .big-title{ margin-top: 30px; }

.product_card { 
    background: url(../image/bg_set.jpg) no-repeat ;
    background-size: cover;
    background-position: center;
    padding: 60px 30px;
    position: relative;
    margin-top: 60px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif; 
}
.product_card.pd_02 { 
    background: url(../image/bg-pd-02.png) no-repeat ,-webkit-linear-gradient(270deg,#D8BAFF, #EFF2F100);
    background-size: 100% auto;
    background-position: center bottom;
    padding: 60px 30px;
    position: relative;
    margin-top: 60px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif; 
}
h3.title_special_set{ 
    position: absolute; 
    width: 600px;
    left: 50%;
    transform: translate(-50%,-30%);
    z-index: 20;
}
.product_card article{
    z-index: 10;
    width: 50%;
    padding-left: 0;
}
.product_card article .pd_inner_wrap{
    padding: 60px 0px 30px;
    background: #fff;
    width: 80%;
    margin: auto;
}
.product_info_wrap{padding: 0 30px; }
.product_box h3.product_name{ font-weight: 700; margin: 0; position: relative;display: inline;}
.product_name_en{color: #292929; margin: 0; font-size: 14px; font-weight: 600; font-family: 'Noto serif JP', serif !important;}
span.specials{ font-family: 'Noto serif JP', serif !important;}
.product_content{
    font-size: 10px; font-weight: 400;color: #fff;
    background: #000; line-height: 1.6;padding:0px 5px 1px 5px;
    white-space: nowrap;
}
.plus{ margin: 10px; }
 .price_ori{ margin: 0; text-decoration: line-through; line-height: 1;}
 .price_special{ font-weight: 800; font-size: 2rem; color: #292929; margin: 0;font-family: "Manrope", sans-serif; font-style: normal;}
 .price_special span{font-size: 1rem;}
 .price_special ~ p{ margin-top: 0; margin-bottom: 5px; }
 .gift_card{ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px; max-width: 360px;margin: auto; margin-top: 20px;
    width: 50%;
}
.gift_card > div{ 
    position: relative; 
    transform: scale(1.3) translate(0%,10%);
}
.center{ margin-left: -60px; margin-right: -60px; margin-top: 30px;}
.slick-slide{ padding: 5px; transition: all 0.3s ease;   /* transform: scale(0.95);  */}
ul.slide{padding-left: 0 ; margin-left: -60px; margin-right: -60px; margin-top: -30px;}
.center .slick-list{ margin-left: -30px; margin-right: -30px; }
.slide__item{ padding: 30px; }
.center .slick-slide img { 
    border: 1px solid #292929; filter: drop-shadow(5px 5px hsla(0, 0%, 0%, 0.6));
    transform: rotate(7deg) scale(0.7);
    transform-origin: center;
}
.slick-slide.slick-current{  transform: scale(1); transition: all 0.3s ease;}
.slick-dots li button{ 
    width: 10px; height: 10px; transform-origin: center;
    background: url(../image/shine.png)no-repeat;background-size: contain; background-position: center;
    transform: scale(1); transition: all 0.3s ease; margin: auto; opacity: 0.7;transition: 0.3s;}
.slick-dots li.slick-active button{ transform: scale(1.7) ; opacity: 1;}
.slick-dots li button:before,.slick-dots li.slick-active button:before{ content: ''; display: none; }
ul.slick-dots{ bottom: 40px; }
@media (max-width:1599px) {
    .center .slick-slide img {  transform: rotate(7deg) scale(1); }
    .gift_card{ padding: 30px; max-width: 360px;margin: auto; margin-top: 0px;}
    ul.slick-dots{ bottom: 20px; }
    .special_set {padding: 0 30px 100px ;}
}
@media (max-width:767px) {
    .product_card{
        flex-direction: column-reverse;
    }
    .gift_card{ 
        position: relative;
        transition: 0.5s;
        width: 70%;
        max-width: unset;
    }
    .gift_card > div{ 
        transform-origin: center;
        transform: scale(1.5) translate(0%,10%);
   }
    .product_card article{width: 100%; }
}
@media (max-width:640px) {
    .center{ margin-left: -90px; margin-right: -90px; margin-top: 30px;}
    .center .slick-slide img {  transform: rotate(7deg) scale(0.7); }
    ul.slick-dots{ bottom: 40px; }
    /* .slick-slide{ max-width: 300px;} */
    h3.title_special_set{ width: 85%;}
    .product_info_wrap{padding: 0 20px; }
}
@media (max-width:500px) {
    .center .slick-slide img {  transform: rotate(7deg) scale(1); }
    ul.slick-dots{ bottom: -40px; }
    /* .slick-slide{ max-width: 300px;} */
}
@media (max-width:480px) {
    .center{ margin-left: -60px; margin-right: -60px; margin-top: 30px;}
    .slick-slide{ max-width: unset;}
    .product_card article{ width: 100%;}
    .gift_card > div{  transform: scale(1.7) translate(0%,10%);}
    .product_card article .pd_inner_wrap{width: 95%;}
}
.swipe-area{ position: relative;}
.swipe-here{
    width: 90px;
    height: 90px;
    position: absolute;
    z-index: 100;
    color: #292929;
    right: 0;
    bottom:0px;
    pointer-events:none;
}
.swipe-here svg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transform-origin: center;
    font-size: 20px;
    animation: swipe 2s infinite;
}
.swipe-here::before{
    content: '';
    width: 100px;
    height: 100px;
    background: url(../image/swipe.png) no-repeat;
    background-position: center;
    background-size: 100% auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transform-origin: center;
    animation: roll 10s infinite linear;
}
@media (max-width:1599px) { 
    .swipe-here{ bottom:unset;}
}
@media (max-width:640px) { 
    .swipe-here{ bottom:0px;}
}
@media (max-width:500px) { 
    .swipe-here{ bottom:unset;}
}
@media (max-width:320px) { 
    .gift,.product_content {white-space: wrap;}
    .attention article{padding: 10px 15px; }
    .sns_share { margin: 30px 15px 0px; }
}
@keyframes swipe{
    0%{ transform: translate(-50%,-50%) rotate(-20deg); }
    50%{ transform: translate(-50%,-50%) rotate(20deg); }
    100%{ transform: translate(-50%,-50%) rotate(-20deg); }
}

.gift{ font-family: "fot-tsukuaoldmin-pr6n", sans-serif ; font-size: 14px;line-height: 1.5;margin-top: 0; margin-bottom: 8px;color: #292929;white-space: nowrap; }
.gift_mark{  font-size: 0.5rem;}
.note{ font-size: 10px; line-height: 1.2;}
/* .pd_02 .gift_mark{ background-image: linear-gradient(to top, #D8BAFF, #D8BAFF);} */
.pd_02 .mark,.pd_02 .set_num{ -webkit-text-fill-color: #D8BAFF;}
.sample{ position: relative; width: 90%; padding-top: 100%; margin: auto;}
.sample > img{ position: absolute; top: 50%;left: 50%;transform: translate(-50%,-50%);width: 75%;}
.sample::after{ 
    content: ''; 
    top: 50%;
    left: 50%;
    width: 110%;
    transform: translate(-50%,-50%); 
    padding-top: 120%;
    position: absolute;
    transform-origin: center;
    background-image: url(../image/text-ring-02.png) ;
    background-repeat: no-repeat;
    background-size: 130% auto;
    background-position: center;
    animation: roll 30s infinite linear;
}
.pd_01{ margin-top: 90px; }

.grag{ color: #292929; font-size: 24px; }
.grag > span{ font-family: 'Noto Sans JP', sans-serif; font-weight: 800;margin-right: 5px; }
.pd_01 figure img{ max-width: 240px; }

/* ----------------------------
  Latest Look
---------------------------- */
.carousel_character {overflow: hidden; position: relative; z-index: 20;}
.latest {
	/* height: 48.461538462em; */
	position: relative;
	transition: background 0.8s;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
    z-index: 10;
}
.latest .container {height: 100%; }
.carousel_character ul.slick-dots{ pointer-events: none; }
.carousel_character ul.slick-dots li{ pointer-events: all; }
@media screen and (max-width: 812px) {
	.latest {
		overflow: hidden;
		height: auto;
	}
}

/* Each */
#bg_color_character{ 
    position: absolute; 
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0;
}
#bg_color_character li{ 
    background-repeat: no-repeat;
    background-position: top center;background-size: 100% auto; 
    width: 100%;height: 100%;padding-top: 100%;
}
.bg_color_character li[data-panel="0"] { background: url(../image/bg_shu.jpg); }
.bg_color_character li[data-panel="1"] { background: url(../image/bg_nari_02.png); }
.bg_color_character li[data-panel="2"] { background: url(../image/bg_uki.png); }
.bg_color_character li[data-panel="3"] { background: url(../image/bg_elira_01.png); }
.bg_color_character li[data-panel="4"] { background: url(../image/bg_doppio.png); }
.bg_color_character li[data-panel="5"] { background: url(../image/bg_millie.png); }

/* ----------------------------
  Panels
---------------------------- */
.panels {
	margin: 0 8.3333333%;
	height: 100%;
	position: relative;
    margin-bottom: 0 !important;
}
.panels .slick-arrow{background: #292929;z-index: 20;}

@media screen and (max-width: 812px) {
	.panels {margin: 0 2.6666667%;}
}

/* Panel
---------------------------- */
.panel {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
    padding: 0;
}
@media screen and (max-width: 1600px) {
    .panels{padding: 0; margin: 0;}
    .panel-head{width: 100vw;}
}
@media screen and (max-width: 812px) {
	.panel {display: block;margin-top: 0%;}
}
.panel {pointer-events: none;}
[data-panel="0"] .panel-01,
[data-panel="1"] .panel-02,
[data-panel="2"] .panel-03,
[data-panel="3"] .panel-04 {
	pointer-events: auto;
}

/* Panel Head
---------------------------- */
.panel-head {
	width: 100%;
	height: 100%;
	position: relative;
}

@media screen and (max-width: 812px) {
	.panel-head {
		padding-top: 0%;
		width: 100%;
		/* height: 0; */
		-webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
	}
}

/* Panel Head Title
---------------------------- */
#latest-head-wrap{
    width: 100%;
	position: absolute;
    top: 0;
}

.panel-head-title {
	z-index: 1;
    position: absolute;
    top: 0%;
    left: 5%;
}
.panel-head-title img {height: 100%;}
@media screen and (min-width: 641px) {
	.panel-03 .panel-head-title { left: unset; right: 51%;}
}

@media screen and (max-width: 640px) {
	.panel-head-title {
		text-align: center;
		top: 5%;
		margin-top:0;
        width: 100%;
        left: unset;
	}
	.panel-head-title img {
		height: auto;
        width: 90%;
        position: unset;
        margin: auto;
        /* left: -35%; */
        top: 0;
        /* transform: unset; */
	}
}

/* Transition */
.panel-head-title {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate3d(20px, 0, 0);
	transform: translate3d(20px, 0, 0);
	transition: opacity 0.8s, visibility 0.8s, transform 0.8s;
	transition-delay: 0s;
    height: 100%;
}
.slick-active .panel-head-title {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0) ;
	transform: translate3d(0, 0, 0) ;
	transition-delay: 0.7s;
}

/* Panel Head Image
---------------------------- */
.panel-head-image {width: 100%;height: 100%;/* box-sizing: border-box; */}
@media screen and (max-width: 812px) {
	.panel-head-image {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
}

/* Each */
.panel .panel-head-image img {margin-bottom: 0%;margin-left: 0%;width: 100%;}

@media screen and (max-width: 812px) {
	.panel .panel-head-image img {margin-top: 0;margin-left: 0%;width: 100%;}	
}

/* Transition */
.panel-head-image {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate3d(20px, 0, 0);
	transform: translate3d(20px, 0, 0);
	transition: opacity 0.8s, visibility 0.8s, transform 0.8s;
	transition-delay: 0s;
    position: relative;
    z-index: 10;
}
.slick-active .panel-head-image{
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transition-delay: 0.4s;
}

/* Panel Body
---------------------------- */
.panel-head .panel-body{
    position: absolute;
    width: 30%;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
	background: #fff;
    padding: 30px;

}
.panel-body::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
	background: #fff;
    top: -1px;
    left: 0;
    z-index: 50;
}
.panel-body::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
	background: #fff;
    bottom: -1px;
    left: 0;
    z-index: 50;
}

.panel-body-wrap { pointer-events: all;} 
.panel-title-name p{ 
    margin-top: 20px;
    font-size: 16px;
    color: #A660A7;
    letter-spacing: 15px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    font-size: 1.5rem;
    /* padding-left: 15px; */
 }
.panel-02 .panel-title-name p{ color: #F28A73;}
.panel-03 .panel-title-name p{ color: #C269E6;}
.panel-04 .panel-title-name p{ color: #95C8D8;}
.panel-05 .panel-title-name p{ color: #A50082;}
.panel-06 .panel-title-name p{ color: #21777F;}
.shop_btn{ transform-origin: center; transform:scale(0.75) translateY(-30px);}
.panel-body .shop_btn_s{display: none;}
 @media screen and (min-width: 1600px) {
     .panel-head .panel-body{ z-index: 20;}
 }
 @media screen and (max-width: 1600px) {
     .panel-head .panel-body{
         width: 50%;
         right:0;
         padding: 20px;
         height: 100%;
         z-index: 0;
     }
     .panel-body-wrap {
         width: 60%;
         margin: auto;
         position: relative;
         top: 50%;
         transform: translateY(-50%);
     } 
 }
@media screen and (max-width: 640px) {
    .panel-head .panel-body{
        width: 100%;
        top: unset;
        bottom: 0%;
        right:unset;
        transform: unset;
        padding: 20px;
        position: relative;
    
    }
    .panel-body-wrap {
        width: 100%;
        margin: auto;
        position: relative;
        top: 0%;
        transform: translateY(0%);
        display: flex;
        flex-direction: row-reverse;
    } 
    .panel-body::before{ display: none;}
}
@media screen and (max-width: 640px) {
	.panel-body {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
        flex-direction: row-reverse;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		width: 100%;
        z-index: 10;
	}
    .panel-title-name{ display: flex;flex-direction: column;justify-content: space-evenly; margin-top: -30px;}
    .panel-body .shop_btn_l{  display: none;}
    .panel-body .shop_btn_s{  display: block; transform: unset; background: transparent;}
    .panel-body .shop_btn  span.shop_now{
        background:#292929;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        z-index: 10;
        transition: all 0.3s ease;
    }
    .panel-body .shop_btn  span.shop_now:hover{
        background: -webkit-linear-gradient(180deg,#D8BAFF, #A5FFF4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .panel-body  .shop_now::before{ content: ''; background: linear-gradient(70deg,#D8BAFF, #A5FFF4);}
    .panel-body .shop_btn:hover .shop_now::before{ opacity: 0;}
    .panel-body .show_more, .panel-body .shop_btn .arrow-hidden {color: #D8BAFF ;}
    .panel-body .shop_btn .arrow { color: #292929;}
    .panel-body .shop_btn:hover .arrow {opacity: 0;}
    .panel-body .shop_btn:hover:hover .show_more {color: #00000000;}
   .panels ul.slick-dots { bottom: 40px;}
    .panel-title-name p{  font-size: 16px; letter-spacing: 10px; }
}
@media screen and (max-width: 480px) {
   .panels ul.slick-dots { bottom: 0px;}
}

/* Transition */
.panel-body {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s, visibility 0.8s;
	transition-delay: 0s;
}
.slick-active .panel-body{opacity: 1;visibility: visible;transition-delay: 0.5s;}

/* Panel Body Image
---------------------------- */
.panel-body-image {text-align: center;overflow: hidden; padding: 0 20px;}
.panel-body-image img {max-width: none;width: 100%;}
.panel-title-name-box img{ transform-origin: center; transform: scale(1.125); }
@media screen and (max-width: 1600px) {
    .panel-title-name-box img{ transform: scale(1.19); }
}
@media screen and (max-width: 639px) {
	.panel-body-image {width: 50%;}
    .panel-title-name{width: 50%;}
    .panel-title-name-box{display: flex; flex-direction: column; justify-content: center;}
     .panel-body-image { padding: 0;}
}

/* Each */
li.panel .panel-body-image img {margin-top: 2%;}

@media screen and (max-width: 639px) {
	li.panel .panel-body-image img {margin-top: 0; margin: auto;width: 90%;}
}

/* ----------------------------
  Latest & Panels Transition
---------------------------- */
.btn_opacity{ border: 1px solid #fff; padding: 5px 10px; margin: 0 10px;}
#attention .slick-arrow{ display: none; opacity: 0;visibility: hidden;pointer-events: none;}
.deco_flower{ position: absolute;width: 40%;margin-left: -30px;}
.deco_butterfly{position: absolute;width: 40%;margin-right:0px; bottom: 10%; right: 0;}
.deco_butterfly img,.deco_flower img{width: 100%;}
.break-s{display: none;}
.break_m{display: none;}
.break_ml{display: none;}
@media screen and (max-width: 960px) {
    .deco_flower{ width: 60%; top: 20%;}
    .deco_butterfly{ width: 60%; bottom: 0%;}
}
@media  screen and (min-width:720px) and (max-width:960px)  {
    /* .break_m{display: block;} */
    .break_L{display: none;}
}
@media  screen and (min-width:500px) and (max-width:719px)  {
    .break_ml{display: block;}
    .break_L{display: none;}
}
@media screen and (max-width: 499px) {
    .break-s{display: block;}
    .break_m{display: none;}
    .break_L{display: none;}
}
@media screen and (max-width: 640px) {
    .deco_flower{ width: 80%; top: 20%;}
    .deco_butterfly{ width: 80%; bottom: 0%;}
}