@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@300;400;500;600&family=Manrope:wght@200;600&family=Playfair+Display:ital,wght@0,400;1,400&family=Cormorant+SC:wght@300;400;500&display=swap');
/* @font-face {
  font-family: "Noto Serif TC";
  src: url("../fonts/lithue-1.0.otf") format("opentype");
  font-style: normal;
  font-display: swap;
} */
body,html{ 
  height: 100%; 
  overflow: hidden !important; 
  overscroll-behavior: none; 
  padding: 0; margin: 0;}

.font-adventure{ 
   font-family: "adventures-unlimited", sans-serif;
   font-weight: 400;
   font-style: normal; }

/* ===== Lenis 容器 ===== */
.lenis-wrapper { 
  position: relative; 
  overflow: visible;
  background: url(../image/bg_texture.webp)no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* 如果有需要阻止特定區塊的原生滾動（例如內部可拖拽區），才加 data-lenis-prevent */
[data-lenis-prevent] { overscroll-behavior: contain; }
.lenis-wrapper {
  position: fixed; inset: 0; overflow: hidden; 
  /* touch-action: none; */
}
.time-box{font-family: "Cormorant SC", serif; font-weight: 400; }
*{  box-sizing: border-box; margin: 0;padding: 0;font-family: 'Noto Sans TC', sans-serif; }
:root{
    --p: #333;
    --white: #fff;
}
body::before{ 
    content: '';
    width: 100%;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: #fff;
}
.font-sunflower{ font-family: 'Noto Serif TC', serif; font-weight: 500; }
h1{ line-height: 0 !important; }
p{text-align: center;}
.p-black{color: #333;}
span.dot{ font-family: 'Noto Sans TC', sans-serif; font-weight: 300;}
.break_s{display: none;}
#mask-cover{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff; z-index: 9999;transition: all 0.3s ease;
}
#mask-cover.mask-hide{ pointer-events: none; opacity: 0; filter: blur(200px);}

/* section{ background-color: #fff; } */
.main_content{position: relative; }
.outter{ 
    width: 100%; height:100vh; background-color: #fff; position: relative;top: 0;left: 0;
     opacity: 1;transition: opacity .3s ease,filter 1.5s ease;
}
.outter::after{ 
    content:''; width: 100%; height:300px; 
    background: linear-gradient(to top, #ffffff00, #fff); ; position: absolute;bottom: -300px;left: 0;
}
.outter.ready{ opacity: 1; }
.outter>.container{ width: 100%;height: 100%; position: relative; max-width: unset; overflow: hidden; }
@media (max-width:650px) {
    .outter{ padding-top: 0px; position: relative;}
}
@media (max-width:550px) {
    .break_s{display: block;}
}
/* @media (max-width:479px) {
    .outter{ height:95lvh; }
} */
.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);}
.ani-title img{ width: 100%; height: auto;  }
.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;margin-top: 0;}
.cross_wrap img{width: 100%; }
.time_wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; opacity: 0; animation: load-start 1s forwards;}
.loaded .loading_mask{ opacity: 0; transition:all 0.5s; pointer-events: none;}
.load_box_inner{ color: var(--p);font-size: 2rem; text-align: center;display: flex;flex-direction: row; align-items: center; justify-content: center;padding-left: 20px;}
.load_text,.letter{ 
    font-family: "Cormorant SC", serif;font-weight: 500;font-style: normal; font-size: 2rem;margin-bottom: 0;color: #afafb0;
}
.dot_flow{ display: flex; flex-direction: row;justify-content: center;align-items: center;margin-left: 16px; }
.dot_flow p{font-size: 2.2rem;}
.dotcolor{
    margin: 0px 2px;
    transform: translateY(0px);
    animation: colors 1.3s ease-in-out infinite;
}
.dotcolor:nth-of-type(2) { animation-delay: -1.1s;} 
.dotcolor:nth-of-type(3) { animation-delay: -0.9s; }
.background-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:-1;
    opacity: 0.875;
  }
@keyframes load-start{ 
    0%{opacity: 0;}
    100%{ opacity: 1;}
 }
@keyframes colors {
  0%,100% { transform: initial; }
  50% { transform: translateY(-20px);}
}
@keyframes mask-bg{
    0%{opacity: 0;}
    100%{opacity: 100;}
}

@media screen and (max-width: 768px) {
  .time_wrap{max-width: 240px; }
   .load_text, .letter{ font-size: 1.5rem; }
}
nav{
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background:rgba(255, 255, 255, 0.5);
    /* background: linear-gradient(to bottom,#fff, #ffffff00); */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    opacity: 0;
    pointer-events: none; transition: 0.8s;
}
nav.nav-active{opacity: 1; pointer-events: all; transition: 0.8s;}
ul,li{ list-style: none; }
.logo_wrap{ width: 360px; }
.logo_wrap img{ transform: scale(1) translate(10px,2px); 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: 100%; 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: 60px; padding: 10px;
    height: 100%;
    position: relative;
    cursor: pointer;
    right: -15px;
}
.nav-toggle {
    width: 40px;
    color: #fff;
    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{background: #a8a6a7;}
.navbar:hover .burger_02{background: #a8a6a7;}
.nav {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    left: 0;
    top: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    z-index: 999;
    pointer-events: none;
    transition: 0.5s;
}
.nav.open{ opacity: 1; pointer-events: all; transition: 0.5s;}
.nav > div { margin:auto;}
.nav-items { margin: 60px;}
.nav-item { position: relative; text-align: center; padding-left: 0; margin: auto; margin-bottom: 20px;}
.nav-item a {
    position: relative;
    /* top: 140px;  color: #D8BAFF;*/
    text-decoration: none;
    color: #54366E;
    text-transform: uppercase;
    font-size: 1.5em;
    letter-spacing: 3px;
    transition: 1s;
    white-space: nowrap;
}
.nav-item a:hover{ color: #54366e5f; transition: all 0.3s ease; }
/* .nav-item a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0%;
    height: 1px;
    background: #54366E;
    transform: translateY(-50%);
    transition: 0.3s;
}
.nav-item:hover a::after {width: 100%;} */
.nav-item:hover a{ text-decoration: none; }
.lang_items{ display: flex; flex-direction: row; justify-content: center;align-items: center; max-width: 400px; padding-right: 30px; margin: auto;}
/* .lang_items li{margin-left: 10px;}
.lang_items li:first-of-type{margin-left: 0;} */
.lang_items a{display: flex;flex-direction: column; align-items: center; overflow: hidden;position: relative;width: 60px;    
  aspect-ratio: 1 / 1;  border-radius: 50%; border:1px solid #54366E; margin-left: 10px; text-decoration: none !important;}
.lang_items a span.text_box{  text-align: center; margin: auto; width: 100%; display: grid;place-items: center;}
.lang_items a span{ color: #54366E; font-size: 1.25rem;}
.lang_items li:hover a{ background-color: #54366E; transition:all 0.3s ease ; }
.lang_items li:hover span{ color: #fff; transition:all 0.3s ease ; }

nav.is-active .logo_wrap img {opacity: 0; transition: all 0.5s;}
nav.is-active {background:rgba(255, 255, 255, 0); transition: all 0.5s;}
@media screen and (max-width: 480px) {
    .lang_items a{width:calc(12vw + 5px) ;}
}

#header-menu {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  width: 40px;
  height: 30px;
  cursor: pointer;
  transition: 0.3s ease;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
  margin-bottom: 0px;
}

#header-menu:hover { transform: scale(1);}
@media screen and (max-width: 1199px) {
  #header-menu{ margin-bottom: 0;}
}
@media screen and (max-width: 768px) {
  #header-menu.is-hidden { opacity: 0; }
}
#header-menu.start {opacity: 1;visibility: visible;}
@media screen and (max-width: 768px) {
  #header-menu.start.is-hidden { opacity: 0;}
}
#header-menu.end {transition: 0.3s ease;}
#header-menu a {
  display: block;
  position: absolute;
  width: 100%;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#header-menu a:hover {opacity: 1;}
#header-menu a span.fr {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #a8a6a7;
  left: 0;
  transition: 0.3s ease;
  border-radius: 10px;
  z-index: 2;
}
#header-menu a span.fr:nth-child(1) {top: 0;}
#header-menu a span.fr:nth-child(2) {top: 5px;}
#header-menu a span.fr:nth-child(3) { bottom: 0;}
#header-menu[aria-expanded='true'] a span:nth-of-type(1) {
  transform: translateY(5px) rotate(-405deg);
}
#header-menu[aria-expanded='true'] a span:nth-of-type(2) {
  opacity: 0;
  transform: translateX(5px);
}
#header-menu[aria-expanded='true'] a span:nth-of-type(3) {
  transform: translateY(-5px) rotate(405deg);
}

@media (max-width: 1200px) {
    .logo_wrap{ width: 25%; }
}
.logo_wrap{ width: 200px; }
@media (max-width: 990px) {
    .nav { left: 0%;}
    .nav-item a { font-size: clamp(18px, 5vw, 30px); letter-spacing: 3;}
}

.entry_v1{ position: fixed; bottom: 20px; right: 20px; width: 100px;z-index: 50; transition: 0.3s ease opacity; opacity: 0;}
.entry_hide{ opacity: 1; pointer-events: none; transition: 0.3s ease opacity;}
/* main{
    max-width:600px ;
    height: calc(100dvh - 60px) ;
    top: 60px;
    position: absolute;
    right: 60px;
    background:  #8EEAF0 ;
    display: none;
} 
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 TC', sans-serif; font-weight: 400; margin: 0;font-size: 14px;}
.p-normal{  font-family: 'Noto Serif TC', serif; font-weight: 400;line-height: 2; font-size: 14px; }

.hero-selector{  position: relative;z-index: 5;padding-top: 60px;padding-bottom: 30px;}
.hero-selector ul{ margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-around;
     padding-left: 0px; padding-right: 0px;}
.hero-selector li{  padding-left: 0; position: relative;  width: 20%; }
.hero-selector li a{ display: block;  width: 100%; height: auto;  backface-visibility: hidden; }
.window_box{position: relative; transform-style: preserve-3d; transform: rotateY(0deg); transition:all 0.8s;perspective: 1000px;}
.hero-selector li:hover .window_box{transform: rotateY(180deg); transition:all 0.8s;}

.hero-selector li img{ transform: scale(1); transition: 0.5s; width:100% ;}
.hero-selector li:nth-last-of-type(3) img.head_circle{ transform: scale(1) rotateY(180deg); transform-origin: center bottom;}
/* .hero-selector li a:hover img{ transition: 0.5s;} */
.hero-selector li .head_circle{ position:absolute; width: 100%;bottom: 0; left: 0;transform-origin: center ; 
    transition: 0.3s;pointer-events: none; backface-visibility: hidden; transform: rotateY(180deg); }
/* .hero-selector li:hover .head_circle{opacity: 1; transition: 0.3s;} */
.hero-selector li p{font-family: 'Noto Serif TC', serif; font-size: 1rem; color: #afafb0; transition: all 0.3s;}
.hero-selector li:nth-of-type(1):hover p{color: #c70d40; }
.hero-selector li:nth-of-type(2):hover p{color: #62567e; }


.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; opacity: 0.5;}
.btn_unactive a{ opacity: 0.5;transition: 0.3s;}
.btn_active a{ opacity: 1; transform: scale(1.5); transition: 0.3s;}

.about_before_wrap,.about_after_wrap,.about_wrap_inner,.about_wrap{position: relative;}
.about_wrap::before{ content: '';  position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 60px);background: #ad9242;}
.about_wrap::after{ content: '';  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 60px);background: #ad9242;}
.about_wrap_inner::before{ content:''; position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: calc(100% - 60px);height: 1px; background: #ad9242;}
.about_wrap_inner::after{ content:''; position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: calc(100% - 60px);height: 1px; background: #ad9242;}
.about_after_wrap{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 30px 30px;}
.about_before_wrap::before{content: '';position: absolute;top: 0px;left: 0px;width: 20px; height: 20px;background: url(../image/deco_about_top_left.svg)no-repeat center; background-size: contain;}
.about_before_wrap::after{content: '';position: absolute;top: 0px;right: 0px;width: 20px; height: 20px;background: url(../image/deco_about_top_right.svg)no-repeat center; background-size: contain;}
.about_after_wrap::before{content: '';position: absolute;bottom: 0px;left: 0px;width: 20px; height: 20px;background: url(../image/deco_about_bottom_left.svg)no-repeat center; background-size: contain;}
.about_after_wrap::after{content: '';position: absolute;bottom: 0px;right: 0px;width: 20px; height: 20px;background: url(../image/deco_about_bottom_right.svg)no-repeat center; background-size: contain;}

.hero-panel-bg .about_wrap{position: absolute; width: calc(100% - 60px); height: calc(100% - 60px);top:50%; left: 50%; transform: translate(-50%,-50%);}
.bk_s{display: none;}
@keyframes circle{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}
@media (max-width:1024px) {
   .window_box{position: relative; transform-style: preserve-3d; transform: rotateY(180deg); transition:all 0.8s;perspective: 1000px;}
   .hero-selector li:hover .window_box{transform: rotateY(180deg); }
   .hero-selector li:nth-of-type(1) p{color: #c70d40; }
   .hero-selector li:nth-of-type(2) p{color: #62567e; }
}
@media (max-width:768px) {
    .hero_btn_box{width: 40px; right: 5px;}
    .hero-selector{width: 400px; margin: auto;}
    .hero-selector ul{flex-wrap: wrap;}
    .hero-selector li{ width: 50%; padding: 0 10px;}
}
@media (max-width:640px) {
    /* .hero-selector { background: #fff; } */
    .hero-selector ul{ flex-wrap: wrap; }
    .hero_btn_box{width: 40px; right: 0px;}
    .intro_campaign h3{font-size: 1.25rem;}
    .intro_campaign p.p-black{font-size: 12px;}
}
@media (max-width:480px) {
    .hero-selector{width: 100%;}
    .hero-selector ul{ width: 100%; padding-left: 0px; padding-right: 0px; }
    .intro_campaign p.p-black{font-size: 11px;}
    .intro_campaign h3{font-size: 4.25vw; white-space: nowrap;}
    .about_after_wrap{ padding: 30px 20px;}
    .bk_s{display: block;}
}

/* ============= 導購按鈕============= */
.shop_btn{
    background: #292929;
    display: block;
    max-width: 240px;
    padding: 16px 24px;
    font-family: 'Noto Sans TC', 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;
    font-size: 1.25rem;
    z-index: 10;
    transition: all 0.3s ease;
    font-family: 'Noto Serif TC', serif !important;
}
.shop_now::before{
    content: '';
    background: linear-gradient(70deg,#A5EFFF,#D8BAFF, #FCC4C0);
    width: 300px;
    height: 100px;
    position: absolute;
    top: -22px;
    left: -90px;
    z-index: -100;
    opacity: 0;
    transform-origin: left center;
    transition: all 0.3s ease;
}
.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) translate(10px,3px); }
}
@media (max-width:650px) {
    nav{ height: 50px; }
    /* main{
      height: calc(100vh - 60px) ;
      position: absolute;
      right:unset;
      left: 50%;
      transform: translateX(-50%);
      top: 49px;
    } */
    .logo_wrap{ width: 250px;}
    .logo_l{ width: 100%; }
    .logo_wrap img{ transform: scale(0.8) translate(0px,0px); }
}
.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: 0px 30px 0px; position: relative; overflow: hidden; z-index: 25;}
.stream .container>div{  max-width: 560px;margin: auto;}
.stream h3{ max-width: 400px; text-align: center; position: relative; margin: auto; font-weight: 600; z-index: 10;letter-spacing: 3px;}
.stream p{text-align: center; font-family: "Noto Serif TC", serif !important; }
.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:50px;
    transform: translateX(-50%);
    background: url(../image/deco_star_color.svg) no-repeat center; 
    background-size: contain;
} */
.big-title-box > figure img{ width: 100%; }
.stream .p-sub-title{ white-space: nowrap; }
.pr_time{font-size: 1.15rem;}
.pr_time span{font-size: 0.85rem;}

@media (max-width:1600px) {
    .big-title-box > figure{ width: 100%;}
}
@media (max-width:960px) {
    .big-title-box > figure{ width: 80%; }
    .stream { padding: 0px 30px 60px 30px; }
}
@media (max-width:650px) {
    .big-title-box > figure{
        left: 50%;
        width: 100%;
        transform: translate(-50%,-110%) scale(1.1);
    }
    .stream { padding: 0px 30px 60px;}
    .stream .p-sub-title{ white-space: wrap; }
}

#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: 0px;margin-left:-30px ;margin-right: -30px;padding-top: 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; }

/* ----------------------------
  attention
---------------------------- */
.attention {padding: 90px 30px 100px; position: relative; overflow: hidden;}
.attention article{ display: flex; flex-direction: column; align-items: center; justify-content: center;  padding:60px 30px 80px; max-width: 960px; position: relative; }
.attention_info_wrap{ display: inline-block;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; 
    width: 100%;
    max-width:560px;
    left: 50%;
    top: -5%;
    transform: translate(-50%,0%);
    z-index: 20;
    text-align: center;
    line-height: 0.5;
    font-size: 5rem;
    color: #8d8a8b;
    margin-bottom: 0;
}
.attention h3:not(.title_attention){ letter-spacing: 3px;}
.attention_info_wrap{ background: #fff; padding: 30px;}
.attention_info_wrap li{ 
    font-family: 'Noto Serif TC', serif;
    text-align: justify; font-size: 13px;line-height: 1.8; margin-bottom: 15px;font-weight:500;
    text-indent:-1em;padding-left: 1em;
}
.attention_wrap{ position: relative; max-width: 960px; margin: auto; 
   /* background: url(../image/bg_attention.webp) no-repeat center; background-size: cover; */
}

.attention_wrap::before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0;
   background: url(../image/bg_attention.webp) no-repeat center; background-size: cover; opacity: 0.6;
}
#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:60px 30px 80px; }
}

@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{padding: 60px 0px 60px;}
    .attention article{padding-top: 0;}
    h3.title_attention{ 
        width: 100%;
        max-width:320px;
        position: relative;
        left: 50%;
        top: 0%;
        transform: translate(-50%,-25%);
    }
}
@media (max-width:480px) {
    h3.title_attention{  max-width:300px; }
}

/* SNS=================================== */
.sns_share{ 
    padding: 30px 60px 30px; 
    position: relative;
}
.icon_sns { text-align: center; margin-bottom: 20px; }
.icon_sns a{ 
    font-size: 36px; transition: all 0.3s; 
    background: linear-gradient(to left, #D8BAFF, #A5EFFF);
    background: -webkit-linear-gradient(to left, #D8BAFF, #A5EFFF);
    background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    color: transparent; 
}
.icon_sns a{ margin-right: 20px; }
.icon_sns a:nth-of-type(2){ 
    background: linear-gradient(to left, #dbbeee, #D8BAFF);
    background: -webkit-linear-gradient(to left, #dbbeee, #D8BAFF);
    background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    color: transparent; 
}
.icon_sns a:nth-of-type(3){ 
    background: linear-gradient(to left, #e7c2d7, #dbbeee);
    background: -webkit-linear-gradient(to left, #e7c2d7, #dbbeee);
    background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    color: transparent; 
}
.icon_sns a:last-of-type{ 
    margin-right:0px;
    background: linear-gradient(to left, #FCC4C0, #e7c2d7);
    background: -webkit-linear-gradient(to left, #FCC4C0, #e7c2d7);
    background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    color: transparent; 
}
.icon_sns a:hover{
    background: linear-gradient(to left, #2cbbaa, #A5EFFF);
    background: -webkit-linear-gradient(to left, #2cbbaa, #A5EFFF);
    background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    color: #2cbbaa; opacity: 0.7; transition: all 0.3s;  
}
/* .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:768px) {
    .pd_01 article.pd_info_door{ margin-top: 25%;} 
}
@media (max-width:640px) {
    main{ max-width: 640px; width:100%; right: 0;}    
    .special_kit{  padding: 60px 60px; }  
    ul.slide{margin-left: -60px; margin-right: -60px;}
    .slick-prev, .slick-next{top:35%;}
}
@media (max-width:480px) { 
    .special_kit{  padding: 60px 30px; }  
    ul.slide{margin-left: -30px; margin-right: -30px;}
    .special_kit .title_sub span{ font-size: 1.25rem; }  
}

@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::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: 30px 30px 0px;
    position: relative;
    z-index: 15;
    background: unset;
}
.intro_campaign h3{
    /* margin-top: 100px; */
    text-align: center;
    padding: 10px 30px 20px;
    line-height: 1.5;
    letter-spacing: 3px;
    position: relative;
    margin-top: 0;
}
@media screen and (max-width: 748px) {
	/* .hero { background:  linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);} */
}
/* .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: 400px; margin: auto;margin-top: 60px; margin-bottom: 20px; }
.brand_box{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 360px;
    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: "Noto Serif TC", serif;
    font-weight: 500;
    font-style: normal;
    line-height: 2.1;
    font-size: 0.9em;
    letter-spacing: 0em;
    margin-bottom: 20px;
    margin-top: 0px;
}

@media screen and (max-width:959px) {
    .intro_campaign> .container{
        padding-bottom: 60px;
      }
    .intro_campaign::after{
          content: '';
          bottom:-30px;
          /* padding-bottom: 80px; */
    }

   .intro_campaign h2{max-width: 300px;}
}
@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 0px 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: column;}
/* .intro_character article:nth-of-type(even) .inner_container{ flex-direction: row-reverse;} */
.intro_character .pd_info_card {width: 50%; padding-left: 0; }
.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) ;  width: 100%;   object-fit:contain ;   object-position: center; display: none;}
.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%; }
.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%;}

#block_0 .character_flower.fl_01{ left: 50%; top: 50%;transform:scale(0.6) translate(-120%,-90%); opacity: 0.5;}
#block_0 .character_flower.fl_02{ left: 50%; top: 50%;transform:scale(0.6) translate(-50%,-60%); opacity: 0.5;}
#block_1 .character_flower.fl_01{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-50%); }
#block_1 .character_flower.fl_02{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-50%); }
#block_2 .character_flower.fl_01{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-50%); }
#block_2 .character_flower.fl_02{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-20%); }
#block_3 .character_flower.bb_01{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-50%); }
#block_3 .character_flower.bb_02{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-50%); }
#block_3 .character_flower.fl_01,#block_3 .character_flower.fl_02{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-50%); }
#block_4 .character_flower.fl_01{ left: 50%; top: 50%;transform:scale(1) translate(-50%,-50%); }

@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: #960018;
    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: #58A7ED; }
.character_block:nth-of-type(3) .tag_perfume{ background: #DFCDBF; }
.character_block:nth-of-type(4) .tag_perfume{ background: #09CE99; }
.character_block:nth-of-type(5) .tag_perfume{ background: #C85B94; }
.character_block:nth-of-type(6) .tag_perfume{ background: #C2C259; }
.character_block:nth-of-type(7) .tag_perfume{ background: #AB7D21; }
.sub_perfume{ 
    font-size: 1.2rem; 
    font-family: "Noto Serif TC", serif;
    font-style: normal;
    position: relative;
    margin-bottom: 30px;
    color: #c70d40;
    font-weight: 500;
}
.character_block:nth-of-type(2) .sub_perfume{color: #62567e;}
/* .sub_perfume::after{ 
    content: '';display: block; position: absolute; bottom: 0; left: 50%;transform: translateX(-50%);
    width: 100%; height: 20px; background: url(../image/deco_line_mori.svg)no-repeat; background-position: center; background-size: contain;} */
/* .character_block:nth-of-type(2) .sub_perfume{ color: #62567e;}
.character_block:nth-of-type(3) .sub_perfume{ color: #DFCDBF;}
.character_block:nth-of-type(4) .sub_perfume{ color: #8AD7C1;}
.character_block:nth-of-type(5) .sub_perfume{ color: #EC8CBD;}
.character_block:nth-of-type(6) .sub_perfume{ color: #C2C259;}
.character_block:nth-of-type(7) .sub_perfume{ color: #C49A47;} */
.inner_container{justify-content: center;  width: 960px; margin: auto; padding-top: 0px; position: relative; z-index: 1;}
.character_btoom{ top: unset; bottom: 0; z-index: 0;}
.copywrite_perfume {padding-bottom: 10px;position: relative;}
.copywrite_perfume p{ 
    text-align: center; 
    font-family: "Noto Serif TC", serif;
    font-weight: 300;
    font-style: normal;
    line-height: 2.1;
    font-size: 0.85em;
    letter-spacing: 0;
}

.copywrite_perfume::after{ 
    content: '';display: block; position: absolute; bottom: -10px; left: 50%;transform: translateX(-50%);
    width: 100%; height: 20px; background: url(../image/deco_line_mori.svg)no-repeat; background-position: center; background-size: contain;}
.block_02  .copywrite_perfume::after{ content: ''; background: url(../image/star_line_L_ina.svg)no-repeat; 
     position: absolute; bottom: -10px; left: 50%;transform: translateX(-50%);width: 100%; height: 20px; background-position: center; background-size: contain;
}
.perfume_box{ max-width: 240px; margin: auto; position: relative;}
.name_box{ text-align: center; }
.name_box h2{ max-width: 400px;margin: auto; margin-bottom: 20px; text-align: center;}
.name_box h2 img{ width: 60%;}
/* .character_block:nth-of-type(2) .name_box h2{ transform: scale(1.025) translateY(-10px);} */
.table_perfume{ display: none;}
.table_perfume li{ font-size: 0.85em;}
.table_perfume li div{font-family: "Noto Serif TC", serif;}
.table_perfume li div:not(.tag_tone){ font-family: "Noto Serif TC", serif;}
.table_perfume{padding: 30px 30px;position: relative;}
.table_perfume ul,.table_price ul  {padding-left: 0; margin-left: 0;margin-bottom: 0;position: relative;} 
.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 20px 0; max-width: 300px; margin: auto;}
.table_price .price_tag span{font-size: 2rem; font-family: "Noto Serif TC", serif; font-style: normal;}
.table_price .price_tag span.yan{font-family: "Noto Serif TC", serif; font-size: 0.85rem;margin-right: 8px; }
.table_price .price_tag span.tex{ font-size: 1rem; font-family: "Noto Serif TC", serif;padding-left: 6px;}
.tag_special_set{ line-height: 1; }
.table_price li div{display: table-cell; vertical-align: bottom; }
.price_tag{text-align: right;}
.perfume_info_box{ margin-top: 30px; padding: 20px; outline: 1px solid #29292939;}
.table_price .sub-info{ font-size: 11px; line-height: 1.5; margin-bottom: 5px;font-weight: 300;}
.table_price .sub-info:last-of-type{ margin-bottom: 0;}
/* .info_content{ font-weight: 300; } */
.price_item{position: relative; font-size: 13px; font-family: 'Noto Serif TC',serif;}
.price_item span{ position: absolute; transform: translateY(26px);}
.price_item .tag_special_set { font-family: 'Noto Serif TC',serif;}

.section_bg{ width: 100%;height: 100vh; z-index: 0 !important; opacity: 0.6; position:fixed; top: 0px; left: 0;}
/* .section_bg {opacity: 0;} */
.section_bg .bg{ position: absolute; top: 0; left: 0 ;width: 100%; height: 100%; opacity: 0;}
.section_bg img{ width: 100%; height:100%; object-fit: cover; }
/* .bg.fadeOut{ opacity: 0; animation: bg_02 0.5s forwards;}
.bg.fadeIn{ opacity: 1; animation: bg 0.5s ease-in-out forwards; transition:opacity 0.3s ease-in-out;}  */
#trigger_bg{ position: fixed; left: 0; top: 3%; }

.detail-visible{height:100vh; display: flex; flex-direction: column; justify-content: center;}

.para_wrap{ display: flex; flex-direction: column; justify-content: center; align-items: end; }
.fragrance_list_wrap{ max-width: 350px;  padding:0px;position: relative;z-index: 0;
    /* background: url(../image/mori_pd_bg.svg)no-repeat center; background-size: cover; */
}
.fragrance_list_wrap img{ width: 100%;transform: translateY(0%);}
ul.fragrance_list {padding: 90px 30px; margin-bottom: 0; border: 1px solid #fff;}
.fragrance_list p{text-align: center; font-size: 80%; font-family: 'Noto Serif TC', serif;}
.fragrance_list .fragrance_tag{max-width: 90px;}

.illus_wrap{ position: relative; width: 100%;transform: translate(0px, 0px);padding:0 40px; z-index: 1;}
.window_portrait{ position: relative;max-height: 800px; height: 100vh; width: auto; max-width: unset; top: 0%; left: 50%; transform: translate(-50%,0%); }
.bg_flora{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; ; }
.bg_flora img{ width: 100%; height: 100%; object-fit: contain; object-position: center; }
.frag_list_wrap{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; ; }
.frag_list_wrap img{width: 300px; height: auto; position: absolute; top:60%;right: 30px;  object-fit: contain; object-position: center; }
.block_02 .frag_list_wrap img{right: unset; left: 30px; }
/* 
.illus_wrap{ position: relative; width: 70%;transform: translate(-70px, 0px);padding:0 40px; z-index: 1;}
.window_portrait{ position: absolute; width: 138%; max-width: unset; top: 0%; left: 53%; transform: translate(-50%,0%); } */

/* .block_02 .illus_wrap{ position: relative; width: 70%;transform: translate(60px, 60px); }
.block_02 .window_portrait{ position: absolute; width: 92%;top: 0%; left: 55%; transform: translate(-50%,0%); }
.block_02 .fragrance_list_wrap{ background:unset; } */
.name_door_box{display: none;}

@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);}
}

@media screen and (max-width:1100px) {
  .illus_wrap{  width: 70%;transform: translate(-30px, 60px); }
  .block_02 .illus_wrap{  width: 70%;transform: translate(0px, 0px); }
  .frag_list_wrap img{width: 300px; right: -30px; }
  .block_02 .frag_list_wrap img{right: unset; left: -60px; }
  .window_portrait{width: 500px; max-height: unset; height: auto;}
}
@media screen and (max-width:959px) {
    .character_img{margin: auto; margin-bottom: 10px;}
	.intro_character .pd_info_card {
        margin-left:0 ;
        margin: auto;
        /* margin-top: 30px; */
        max-width: 500px;
	}
    .name_door_box{ display: block;position: relative;z-index: 10; transform: translateY(90%); padding: 0 20px;}
    .block_02 .name_door_box{ transform: translateY(10%); }
    .name_box h2{display: none;}
   .detail-visible{height: auto;}
   .illus_wrap{ padding: 0 20px;}
   .window_portrait{ position: relative;max-height: unset; height: auto; width: 168%; max-width: unset; top: 0%; left: 50%; transform: translate(-48%,0%); }
   .block_02 .window_portrait{ position: absolute; width: 99%; top:12%;transform: translate(-45%,0%);  }
   .para_wrap{align-items: center;}
   .frag_list_wrap {display: none;}
   .block_02 .sub_perfume{ margin-top: 0;}
}
@media screen and (max-width:959px) {
    .intro_character article:nth-of-type(even){ padding-top: 0px;}  
    .inner_container{padding-top: 0; width: 100%;margin-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_illus{ display: block; }
    .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%; }
    .intro_character .pd_info_card { padding-left: 0;}  
    .perfume_box{ margin-top: 30px;}

    .fragrance_list_wrap{display: none;}
    .illus_wrap{  max-width:340px;transform: unset; }
    .block_02 .illus_wrap{  width: 340px; }
    /* .block_02 .illus_wrap{  width: 50%;transform: unset; } */
    .table_perfume{ display: block; max-width: 360px; margin: auto; padding: 30px 0px;}
    .table_price{ max-width: 360px; margin: auto; padding: 30px 0px;}

    .table_perfume::after{  content: ''; display:flex ; position: absolute; width:360px; height: 20px; background: url(../image/star_line_s_mori.svg)no-repeat; background-size: 100% auto; bottom: -10px; left: 50%; transform: translateX(-50%);} 
    .copywrite_perfume::after{ content: '';position: absolute;width:360px; height: 20px; background: url(../image/star_line_s_mori.svg)no-repeat;  background-position: center; background-size:  100% auto; }
    .block_02 .table_perfume::after{ 
    content: '';display: block; position: absolute; bottom: -10px; left: 50%;transform: translateX(-50%);
    width:360px; height: 20px; background: url(../image/star_line_s_ina.svg)no-repeat; background-position: center; background-size: 100% auto;}
    .block_02  .copywrite_perfume::after{ content: ''; background: url(../image/star_line_s_ina.svg)no-repeat; 
     position: absolute; bottom: -10px; left: 50%;transform: translateX(-50%);width:360px; height: 20px; background-position: center; background-size: 100% auto;}
}

@media screen and (max-width:768px) {
  .inner_container{justify-content: center;}

}
@media screen and (max-width:640px) {
    .intro_character .pd_info_card { width: 80%;}  
    .character_img{width: 100%; z-index: 0; }
    .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: unset;}
}
@media screen and (max-width:480px) {
    .tag_special_set br{ display: block; }
    .sub_perfume{ font-size: 4.5vw;letter-spacing: 0px; }
    .copywrite_perfume p,.table_perfume li { font-size: 0.75em; }
    .illus_wrap,.block_02 .illus_wrap{width: 100%;}
    .window_portrait{width: 165%;}

    .table_perfume{ display: block; max-width:unset; width: 100%; padding: 30px 0px;}
    .table_price{ max-width: unset; width: 100%; padding: 30px 0px;}

    .table_perfume::after{  content: ''; width:calc(100vw - 60px); background: url(../image/star_line_s_mori.svg)no-repeat; background-size: 100% auto;} 
    .copywrite_perfume::after{ content: ''; background: url(../image/star_line_s_mori.svg)no-repeat; 
    width:calc(100vw - 60px); background-position: center; background-size:  100% auto;}

    .block_02 .table_perfume::after{  content: '';display: block; position: absolute; bottom: -10px; left: 50%;transform: translateX(-50%);
    width:calc(100vw - 60px); height: 20px; background: url(../image/star_line_s_ina.svg)no-repeat; background-position: center; background-size: 100% auto;}
    .block_02  .copywrite_perfume::after{ content: ''; background: url(../image/star_line_s_ina.svg)no-repeat; 
     position: absolute; bottom: -10px; left: 50%;transform: translateX(-50%);width:calc(100vw - 60px); height: 20px; background-position: center; background-size:  100% auto;}
}
@media screen and (max-width:380px) {
	.intro_character .pd_info_card {padding-left: 30px; padding-right: 30px; width: 100%;}

    .table_perfume::after{  content: ''; width:calc(100vw - 60px); } 
    .copywrite_perfume::after{ content: ''; width:calc(100vw - 60px); }

    .block_02 .table_perfume::after{  content: ''; width:calc(100vw - 60px); }
    .block_02  .copywrite_perfume::after{ content: '';width:calc(100vw - 60px); }
}

/* ---------------------------- 
special_set
---------------------------- */
.special_set {padding: 100px 0 100px ; position: relative; z-index: 10;}
.special_set .container {max-width: unset;width: 100%;}
.special_set .container .uk-grid{ margin: auto;align-items: center; justify-content: center; padding: 60px 0px; max-width: 1200px;}
.special_kit{ padding:0px 60px 60px;  position: relative;}
.special_kit::before { 
    content: '';
    width: 100%;
    height: 100vh;
    background:url(../image/bg_special_set.webp)no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
 }
 /* .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;
 } */

 .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{ max-width: 400px; margin: auto; margin-bottom: 30px;}
 ul.special_set_img_wrap{width: 100%; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 20px; padding-left: 0;}

 .special_duo_set_list{ position: relative; margin: auto; display:  flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 60px;padding-left: 0;margin-top: 30px;}
 .special_duo_set_list li{ max-width: 300px; width: 300px; padding: 10px; background: #fff;}
 .special_duo_set_list li *{ text-align: center; }
 .special_duo_set_list li p{font-family: 'Noto Serif TC', sans-serif; margin-bottom: 7px; margin-top: 0; font-size: 13px;}
 .special_duo_set_list li .list_wrap{ padding:30px 20px; border: 1px solid #807f80;}
 .special_duo_set_list li .list_wrap h3{position: relative;}
 .special_duo_set_list li .list_wrap h3::after{ content: ''; width: 90%; height: 1px; background: #807f80; left: 50%; transform: translateX(-50%); position: absolute; bottom: -5px;}
 .special_kit .order_time {display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 10px; }
.special_kit .order_time ul{ display: inline-block; padding-left: 0;}
.special_kit .order_time li{font-size: 0.8rem;}
.special_duo_set_list::after{content: '&'; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
    font-size: 2rem; color: #292929; font-family: 'Noto Serif TC', serif; z-index: 1;}

.special_duo_set .title_sub{line-height: 1.5; font-size: 1.5rem; letter-spacing: 3px;}
.product_name_en{position: relative;}
.product_name_en::after{ content: ''; display: block; position: absolute; width: 200px; height: 20px; margin: auto; background: url(../image/shine_gray.svg)no-repeat; background-size: contain; background-position: center; left: 50%; bottom: 0%; transform: translate(-50%,30px);}
.special_title_wrap{ position: relative;}
.special_title_wrap::after{content: '';width: 300px;height: 20px; display: block; position: absolute;  background: url(../image/shine_gray.svg)no-repeat; background-position: center; background-size: contain; left: 50%; bottom: -30px; transform: translateX(-50%);}


@media (min-width:641px) {
   .special_duo_set_list li {opacity: 1 !important;}
}

@media (max-width:767px) {
    .list_wrap h3{font-size: clamp(18px, 7vw,1.35rem)}
   .special_duo_set_list li p{font-size:10px;}
}

@media (max-width:640px) {
    .special_set_img_wrap{width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;}
    .special_duo_set_list{ flex-direction: column;}
    .special_kit{ padding:0px 30px 60px; }
    .special_duo_set .title_sub{font-size:clamp(1rem,10vw,24px);margin-top: 0;line-height: 1.25; }
    .special_kit .big-title{ margin-bottom: 10px;}
   .special_duo_set_list li p{font-size: clamp(11px, 2.5vw,12px)}
}
@media (max-width:330px) {
    .special_duo_set_list{width: 100%;}
   .special_duo_set_list li{max-width: unset; width: 100%;}
}

.product_card { 
    /* background: url(../image/bg_elira_01.png) no-repeat ; */
    background-size: cover;
    background-position: center;
    padding: 60px 30px;
    position: relative;
    margin-top: 60px;
    text-align: center;
    font-family: 'Noto Sans TC', sans-serif; 
    margin-left: 0;
}
.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 TC', 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: 40%;
    padding-right: 0;
}
.product_card article .pd_inner_wrap{
    padding: 90px 0px 30px;
    /* background: #ffffff85; */
    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 TC', serif !important;}
span.specials{ font-family: 'Noto Serif TC', 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-size: 2.75rem; color: #292929; margin: 0;font-family: "Noto Serif TC", serif; font-style: normal;}
 .price_special span{font-size: 1rem;padding-right: 10px;}
 .price_special ~ p{ margin-top: 0; margin-bottom: 5px; }
 .gift_card{ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto !important; 
    width: 60%;
    position: relative;
}
.gift_card > div{ 
    position: relative; 
    background: url(../image/special_set_bg_mori.webp)no-repeat;
    background-position: center top;
    background-size: 100% 90%;
}
.block_02 .gift_card > div{  
    background: url(../image/special_set_bg_ina.webp)no-repeat;
    background-position: center top;
    background-size: 100% 90%;
}
.title_limited{ 
    width: 75%;
    position: absolute;
    top: -5%;
    left: 0;
}
.gift_card img:not(.limited){ transform: scale(0.95) translate(5%,2%); margin-top: 5%;}
.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; }

.frame_wrap{display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;}
.frame_wrap div,.frame_wrap svg{width: 100%;}
.frame_top{width: 100%; flex: 0 0 auto; }
.frame_btm{ width: 100%; flex: 0 0 auto;}
.frame_middle{ width: 100%; flex: 1 1 auto; 
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: repeating-linear-gradient(
    to bottom,              /* 虛線方向（由上到下） */
    #8f8c8d 0 80px,           /* 線段長度 12px */
    transparent 80px 100px   /* 間隔長度 8px */
  ) 1;

  /* 確保 border-image 只套在左右兩側 */
  border-image-slice: 1;
  border-image-outset: 0;
}
@media (max-width:1599px) {
    .center .slick-slide img {  transform: rotate(7deg) scale(1); }
    .gift_card{ margin: auto; }
    ul.slick-dots{ bottom: 20px; }
    .special_set {padding: 0 0px 100px 30px;}
}

@media (max-width:960px) {
    .product_card article .pd_inner_wrap{width: 100%;}
    .product_card{margin-top: 0;}
    .title_limited{ 
    width: 95%;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
}
}

@media (max-width:768px) {
    .special_set {padding: 0 30px 100px 30px;}
    .product_card{
        flex-direction: column-reverse;
    }
    .gift_card{ 
        position: relative;
        transition: 0.5s;
        width: auto;
        max-width: 500px;
        margin: 0;
        padding: 0;
    }
    .gift_card > div{ 
        transform-origin: center;
        transform: scale(1) translate(0%,0%);
        background: unset;
        max-width: 360px;
   }
   .gift_card > div::before{
    content: ''; width: 100%; height: 100vh; position: absolute; top: 0; left: 0;
    background: url(../image/special_set_bg_mori_s.webp)no-repeat;
    background-size: 100% 100%;background-position: center top;
    z-index: -1; opacity: 0.6;
   }
   .block_02 .gift_card > div::before{
    content: ''; width: 100%; height: 100vh; position: absolute; top: 0; left: 0;
    background: url(../image/special_set_bg_ina_s.webp)no-repeat;
    background-size: 100% 100%;background-position: center top;
    z-index: -1;
   }

   .gift_card img:not(.limited){ transform: scale(1.1) translateY(12%);}
   .product_card article{width: 100%; padding: 0 20px;}
   .product_card article .pd_inner_wrap{width: auto; max-width: 400px; padding-top: 60px;}
}
@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: 0px; }
    /* .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: -10px; }
    /* .slick-slide{ max-width: 300px;} */
    .title_limited{ 
        width: 100%;
        top: -8%;
        left: 50%;
        transform: translateX(-50%);
    }
}
@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) translate(0%,0%);}
    .product_card article .pd_inner_wrap{width: 100%;}
}
.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 90px; }
    .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-size: 0.95rem; font-family: "Noto Serif TC", serif; line-height: 1.5;margin-top: 0; margin-bottom: 8px;color: #292929;white-space: nowrap; }
.product_info_wrap .gift:nth-last-of-type(1){margin-bottom: 30px;}
.gift_mark{  font-size: 0.75rem;}
.gift span:not(.sub_note){ position: relative;}
.gift span.sub_note{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px;}
.order_time{margin-top: 30px;}
.product_info_wrap h3{font-size: 2.5rem;}
.note{ font-size:0.8rem; line-height: 1.2; margin-bottom: 7px; margin-top: 0px; margin-bottom: 5px;}
/* .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 TC', sans-serif; font-weight: 800;margin-right: 5px; }
.pd_01 figure img{ max-width: 240px; }

@media screen  and (max-width: 1024px){
   .product_info_wrap h3{font-size: 2rem;}
   .gift_card > div{position: relative;}
   /* .gift_card > div::after{
     content: '';
     width: 100%;
     height: 70vh;
     background: #000;
        position: absolute;
        top: 50%;left: 50%;
        transform: translate(-50%,-50%);
        z-index: -1;
   } */
}
    

@media screen and (max-width: 320px) {
	.pd_01 figure img{ max-width: 100%; }
}

/* ----------------------------
  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-vox-l.png); }
.bg_color_character li[data-panel="1"] { background: url(../image/bg-ike-l.png); }
.bg_color_character li[data-panel="2"] { background: url(../image/bg_klara_01.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-maria-l.png); }
.bg_color_character li[data-panel="5"] { background: url(../image/bg_sonny_01.png); }
.bg_color_character li[data-panel="6"] { background: url(../image/bg_luca_01.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 {
	/* width: 60%; */
	/* margin-top: 57.7142857%; */
	z-index: 1;
    position: absolute;
    top: 0%;
    left: 5%;
}
.panel-head-title img {
	/* width: auto; */
	height: 100%;
    /* transform: rotateZ(270deg); */
}
@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%;}	
    /* .panel.panel-05 .panel-head-image img{ height: 100%; width: auto; } */
}
/* 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: #960018;
    letter-spacing: 15px;
    font-family: 'Noto Serif TC', serif;
    font-weight: 600;
    font-size: 1.5rem;
    /* padding-left: 15px; */
 }
.panel-02 .panel-title-name p{ color: #58A7ED;}
.panel-03 .panel-title-name p{ color: #DFCDBF;}
.panel-04 .panel-title-name p{ color: #09CE99;}
.panel-05 .panel-title-name p{ color: #C85B94;}
.panel-06 .panel-title-name p{ color: #C2C259;}
.panel-07 .panel-title-name p{ color: #AB7D21;}
.shop_btn{ transform-origin: center; transform:scale(0.75) ;}
.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%;
	}
}

/* ----------------------------
  pupop up shop
---------------------------- */
.popup_shop{
    background-color: transparent;
    background-size: cover;
    padding: 100px 30px;
    background-attachment: fixed;
    position: relative;
}
.popup_shop.trigger::before{
    content:'';
    position: fixed;
    width: 100vw;
    height: 100dvh;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background:url(../image/bg-keytype.jpg)no-repeat center;
    background-size: cover;
    background-color: transparent;
    opacity: 0.6;
    z-index: 0;
}
#popup_info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-left: 0;margin-top: 20px;
    max-width: 500px;
margin: auto;
}
#popup_shop *{color: #292929 ;}
#popup_shop .brick{position: relative;}
#popup_shop .brick::before{content: ''; display: block; width: 8px;height: 8px; background:#292929; position: relative;left: 50%; transform: translateX(-50%) rotateZ(45deg);}
#popup_shop article{margin-bottom: 20px; margin-top: 20px;}
#popup_shop h3.section_title {font-family: 'Krona One', sans-serif; }
.pop_title{max-width: 500px; margin: auto; margin-bottom: 20px;}
.pop_title img{width: 100%;}
#popup_shop .big-title{ margin-bottom: 20px;font-family: 'Noto serif JP', serif; font-size: 1.75em;margin-top: 15px;}
#popup_info li{padding: 20px 20px; outline: 1px solid #968861;margin-bottom: 20px; width: 100%; position: relative;}
#popup_info li h3 { font-family: 'Noto serif JP', serif; font-size: 1.55em;margin-bottom: 8px;}
#popup_info li h3 span{ font-family: 'Noto serif JP', serif; }
#popup_info li::before{
   content: '';  position: absolute; width: 60px; height: 60px; left: 0;top: 0;background-image: url(../image/frame_top.svg) ;
   background-repeat: no-repeat; background-size: contain;background-position:left top;
}
#popup_info li::after{
   content: '';  position: absolute; width: 60px; height: 60px; right: 0;bottom: 0;background-image: url(../image/frame_btm.svg) ;
   background-repeat: no-repeat; background-size: contain;background-position:right bottom;
}
#popup_shop .info{font-size: 14px;margin-top: 5px;}
#popup_shop .pop-note{font-size: 10px; margin: auto;margin-top: 8px; width: 90%; line-height: 1.5; text-align: center; color: #292929;}
.btn_opacity{ display: inline-block; border: 1px solid #292929; padding: 15px 20px; margin: 0 10px; font-size: 1em; font-family: 'Noto serif JP', serif;}
.attention article::after{
    content:''; width: 150px; height: 200px; position: absolute; bottom: 15px; left: 50%; transform: translate(-50%,0);
    background: url(../image/deco_lightbeams.svg)no-repeat; background-position: center bottom; background-size: contain; 
}
#attention .slick-arrow{ display: none; opacity: 0;visibility: hidden;pointer-events: none;}
@media screen and (max-width: 960px) {
    #popup_info { flex-direction: column; }
    #popup_info li:nth-of-type(1){padding: 40px 20px 40px;}
    #popup_info li:nth-of-type(2){padding: 40px 20px 40px;}
    #popup_info li:nth-of-type(3){padding: 40px 20px 0;}
    #popup_info .pop-note{width: 100%;}
    /* .popup_shop::before{
        content:'';
        background:url(../image/store_02.jpg)no-repeat center;
        background-size: cover;
        background-color: transparent;
    } */
}
.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;}
@media screen and (max-width: 960px) {
    .deco_flower{ width: 60%; top: 20%;}
    .deco_butterfly{ width: 60%; bottom: 0%;}
}
@media screen and (max-width: 640px) {
    .deco_flower{ width: 80%; top: 20%;}
    .deco_butterfly{ width: 80%; bottom: 0%;}
    .break-s{display: block;}
    #popup_info .pop-note{font-size: 10px;}
}
section.sale_area { 
    padding: 60px 30px; background-color: #fff;position: relative;z-index: 10; 
    display:flex; flex-direction: column; justify-content: center;align-items: center;
    overflow: hidden;
}
section.sale_area > div{ text-align: center; width:70%; margin: 0 30px; width: 100%;}
section.sale_area > div div{ width: 70%;margin: auto; }
section.sale_area a{ 
    background: #000; text-align: center; 
    margin: 20px 0; display: block; text-decoration: none; position: relative;overflow: hidden;}
section.sale_area a img{
    position: relative; z-index:0;opacity:1; width: 100%;
}
/* section.sale_area a:hover img{ animation: btn_bg_scale 0.5s ease forwards; transition: transform 0.5s ease,filter 1s ease; } */
section.sale_area a span{ position: absolute; z-index: 10; color: var(--white); filter: drop-shadow(0px 0px 20px #000); opacity: 0;}
.cp_btn_box{  }

@keyframes btn_bg_scale{ 
    from{transform: translate(-50%,-50%) scale(1); filter: blur(0px);}
    to{ transform: translate(-50%,-50%) scale(1.2); filter: blur(3px);}
 }
 .overseas_url{ color: #858ED1; }