/* Google Fonts */
@import url(https://fonts.googleapis.com);
@import url(https://fonts.gstatic.com);
@import url(https://fonts.googleapis.com/css2?family=Italiana&display=swap);
/* @import url(https://fonts.googleapis.com/css2?family=Italiana&family=Noto+Sans+Serif+JP:wght@100..900&display=swap); */
@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;700&display=swap');

/* ===== 全面禁用原生滾動／捲軸（視覺上不顯示捲軸）===== */
html, body { 
  height: 100%; 
  overflow: hidden !important; 
  overscroll-behavior: none; 
  /* overflow: auto !important;
  overscroll-behavior: none; */
}
body{ background-color: #000;position: relative;}
* { -ms-overflow-style: none; scrollbar-width: none; box-sizing: border-box;}
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
ul,li{ list-style: none; margin: 0;}
.font-compress{font-family:"span-compressed", serif;font-weight: 400;font-style: normal;}
img{display: block;}
/* .fixed-bg{
  width: 100vw;height: 100dvh; position: fixed;top: 0;left: 0;
  background-image: url(../image/main_bg.jpg) ;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center ;
  mix-blend-mode: normal;
} */

:root {
    --fs-sub-title: 5vh;
    --fs-text: 2vh;
    --fs-small-text: 1.5vh;
    --fs-section-main: 20vh;
    --fs-section-sub: 10vh;
    --margin: 20px;
}

/* ===== Loading Page ===== */
#Loader {
  position: fixed; inset: 0; background: #000; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding: 0 30px;
}
.load_wrap{ width: 340px; }
#Loader .logo { width: 100%; margin-bottom: 16px;  }
#Loader .loading { font-size: 20px; letter-spacing:.1em; margin-top: 16px; opacity:.9; font-family:"span-compressed", serif;font-weight: 400;font-style: normal; animation: load-start 0.5s forwards ease;}
#Loader .bar { flex-shrink: 0; width: 100%; height: 4px; background: rgba(255,255,255,.15);  overflow:hidden; }
#Loader .bar > span { display:block; height:100%; width:0; overflow: hidden; position: relative;}
#Loader .bar > span::after {
    content: '';position: absolute; top:0; left:0; width:100%; height:100%;
    background:linear-gradient(to right, #ab2e2c 0%,#9b3fb0 25%,#fcf372 50%,#52a372 75%);
 }
 .loading{ display: flex;justify-content: center; align-items: center;margin-left: 40px;}
.dot_flow{position: relative; margin-left: 10px;}
.dotcolor{
    display: inline-block;
    transform: translateY(0px);
    animation: colors 1.3s ease-in-out infinite;
    animation-delay: 0.3s;margin-right: 0px;
}
.logo-gs{width:100%; text-align: center;}
.logo-gs img {width: 18%; margin: auto;margin-bottom: 20px;}
.dotcolor:nth-of-type(2) { animation-delay: -1.1s;} 
.dotcolor:nth-of-type(3) { animation-delay: -0.9s; }

@keyframes load-start{ 
    0%{opacity: 0;}
    100%{ opacity: 1;}
 }
@keyframes colors {
  0%,100% { transform: initial; opacity: 0;}
  50% { transform: translateY(-10px); opacity: 1;}
}

/* 鎖住整頁滾動（含觸控與 overscroll） */
.no-scroll, .no-scroll body {
  overflow: hidden !important;
  /* overscroll-behavior: none !important;
  touch-action: none !important; */
}
/* Lenis 的包裹也一起鎖掉 */
.lenis-wrapper {  position: relative; }
.lenis-content { position: relative; z-index: 1;}
.inner_bg{ width: 100%;height: 100%; position: fixed; top: 0; left: 0; }
.inner_bg_img{object-fit: cover;object-position: center; width: 100%; height: 100%;}
/* .inner_bg{ width: 100%;height: 100%; position: fixed; top: 0; left: 0; z-index: -1;}
.inner_bg img{object-fit: cover; object-position: center; width: 100%; height: 100%;}
.inner_02{object-fit: cover; object-position: center; width: 100vw; height: 100vh; z-index: -1; position: absolute;top: 0 ;left: 0;} */

/* 沒原生 inert 的保險（避免聚焦/點擊） */
[inert] { pointer-events: none !important; user-select: none !important; }

/* ===== Intro 影片層（在 Loader 下方，但初始就可見）===== */
#IntroVideo {
  top: 0; 
  left: 0;
  width: 100vw; 
  height: 100vh;
  position: fixed; 
  inset: 0;
  z-index: 9999;
  display: grid; place-items: center;
  background: #000;
  opacity: 1; visibility: visible;
}
#Loader { z-index: 10000; }

.introVideo_player {
  /* width: min(100vw, 1200px); */
  width: 100vw;
  height:100%;
  object-fit: cover;
  object-position: center;
  position: relative;top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.introVideo_ui {
  position: fixed; inset: 0;
  display: grid; align-content: end; justify-items: center;
  padding: 24px; gap: 12px;
  pointer-events: none;
}
.introVideo_ui button {
  pointer-events: auto;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: var(--fs-text);
}
@media (max-width:1199px){
  .introVideo_player {
    width: 100vw;
    height: auto;
  }
.introVideo_ui button {font: 600 14px/1;/*600 14px/1*/}
}
@media (max-width:1024px){
  .introVideo_player { height: auto; }
}
@media (max-width:1023px){
  .introVideo_player { height: 100%;}
}

/* ===== Lenis 容器 ===== */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* 如果有需要阻止特定區塊的原生滾動（例如內部可拖拽區），才加 data-lenis-prevent */
[data-lenis-prevent] { overscroll-behavior: contain; }
.lenis-wrapper {
  position: fixed; inset: 0;
  overflow: hidden !important; 
  height: 100%;
  min-height: 100vh; 
}

/* <768 直向：每區塊滿版高度 */
.section {
  min-height: 100vh; height: 100vh; position: relative;
  flex-shrink: 0;
}

/* ≥768 橫向：橫向排列，每屏一視口寬 */
@media (min-width:1200px){
  .lenis-content { display:flex; height:100vh; }
  .section { width: fit-content;  height:100vh; min-height:100vh; }
  .lenis-wrapper { touch-action: pan-x; }
}
@media (max-width:1199px){
  .section { width: 100vw;  height:auto; min-height:unset;}
  .lenis-content{margin-top: 44px; height: auto; width: 100vw;}
  .lenis-wrapper { touch-action: pan-y; }
}

/* ===== NAV ===== */
.nav_bar{
    position: fixed; z-index: 30; left: 0px; top: 0px;height: 100vh;
    background:#000; 
    display: flex;flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 200;
}
.menu_trigger { 
  width: 44px; height: 44px; border-radius:10px; cursor:pointer;position: relative;
}
.menu_trigger::before{width: 27px; height: 27px; content: ''; position: absolute; top: 50%; left: 50%; 
  transform: translate(-50%,-50%);
  border-radius: 40px;border: 1px solid #fff; 
  pointer-events: none; }
.nav_inner{
  width: 40px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 6px;
}
.nav_inner img{
  width: 100%;
  height: auto;
  display: block;
}
.nav_inner::after{
  content: '';
  position: absolute;
  top: 0; right: -4px;
  width: 5px;
  height: 100%;
  background: url(../image/bg_sliver.png);
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.logo_glowshade{padding: 0 4px;}

.nav_icon_wrap{
  display: flex; flex-direction: column; align-items: center; justify-content: center; 
  height: 100%;justify-content: space-between;padding-top: 15px; border-top: 1px solid #fff;
}

.menu_trigger img{ display: none;}
@media (max-width:1199px){
  .nav_bar{
    position: fixed;  height: 44px; width: 100vw;
    background:#000; 
    display: flex;flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .nav_inner{
    width: 100%;
    height: 44px;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content:space-between;
    padding: 5px 10px;
  }
  .nav_inner img{ width: auto; height: 100%;display: block;}
  .logo_glowshade{display: none;}
  .menu_trigger{ 
    width: 36px; height: 36px; cursor:pointer;
    /* background: url(../image/logo_gs_s.svg)no-repeat; 
    background-position: center; background-size: auto 85%; */
  }
  .menu_trigger + div,.nav_icon_wrap + div{ height: 100%;}
  .nav_icon_wrap{
    display: flex; flex-direction: row; align-items: center; 
    height: 100%; width: 100%;justify-content: space-between;padding-top:unset; border-top: unset; padding-top: 0px;
  }
  .logo_straight_box {height: 100%;}
  .nav_inner::after{display: none;}
}

/* ===== 簡易 Menu ===== */
.menu {
  position: fixed; z-index: 25; inset: 0 0 0 auto; width:280px; height: 100%;
  left: 44px;
  background: rgba(0,0,0,.92); color:#fff; transform: translateX(-120%);
  transition: transform .28s ease; padding: 72px 20px 20px;
}
.menu.open { transform: translateX(0); }
.menu a { color:#fff; text-decoration:none; display:block; padding:10px 0;font-size: 1.75rem; }
.menu_backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; z-index: 20; transition: opacity .2s ease;
}
.menu_backdrop.show { opacity: 1; pointer-events: auto; }
.lang_wrap{display: flex;flex-direction: row;align-items: center;margin-top: 40px;}
.option_wrap a{position: relative; overflow: hidden;  text-align: left; margin-bottom: 0px; transition: all 0.3s ease;}


.lang_wrap a{ width: 50px; height: 30px; position: relative;border: 1px solid #fff;text-align: center;position: relative;overflow: hidden;
}
.lang_wrap a:hover{ background-color: rgba(255, 255, 255,0.3); transition: all .3s;}
.lang_wrap a:first-of-type{margin-right:-1px;border-top-left-radius: 50px; border-bottom-left-radius: 50px;}
.lang_wrap a:last-of-type{border-top-right-radius: 50px; border-bottom-right-radius: 50px;}
.lang_wrap span{font-size: 1.25rem; }
.swip_box{ 
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: all .3s ease; transform: translateY(3.3333%);
}
.lang_wrap a:hover .lang_box{ transform: translateY(-30%);}
.option_wrap a:hover {  opacity: 0.5;}
@media (max-width:1199px){
  .menu {left: 0; width: 100%;display: flex; flex-direction: column; justify-content: center; align-items: center;}
  .option_wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center;width: 100%; }
  .option_wrap a{margin-bottom: 0px; width: 500px; }
  .menu a {  text-align: center;}
}


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

#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: 14px;
  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: #fff;
  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);
}


h3.section_title{ font-size: 7vh; padding-top: 20px; color: #fff; position: relative; margin: 0; text-align: left;}
.section_title::after{ content: '';width: 100%; height: 1px;position: absolute; left: 0;bottom: 0; background: #fff; }

@media (max-width:1199px){
  h3.section_title{font-size: 3rem;}
}
@media (max-width:480px){
  h3.section_title{ font-size: 2.85rem; padding-bottom: 10px; line-height: 1;}
}
@media (max-width:400px){
.load_wrap{ width: 100%; }
}
/* =====. KV. ===== */

section.kv{position: relative; width: 100vw;
   /* display: grid; justify-content: center; */
}
section.kv .container{ position: relative; width: 100%; height: 100%;}
/* .kv_wrap{ position: absolute;width: 100%; height: 100%; top: 0; left: 0;} */
.plx-wrap{
  position: absolute;width: 100%; height: 100%; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  will-change: transform, filter;
  pointer-events: none; 
}
/* @media (max-width:960px){
  .plx-wrap{
     left: 75% !important ;
  }
} */
.kv img{display: block; line-height: 0;}
.kv_hero {
  /* position: absolute; */
  width: 100%;
  height: 100vh;
  object-fit:contain;
  object-position: center top; 
  z-index: -1;
  transition: all 0.3s;
  margin: auto;
}

 .kv_here_shadow{
   position: absolute;
   width: 100vw;
   height: 100vh;
   top: 0%;
   left: 0%;
   z-index: 0;;
 }
 .kv_title_inner{
  position: absolute;
  width: 80vw;
  bottom:5%;
  left:50%;
  transform: translateX(-50%);
  z-index: 5;
  filter: drop-shadow(0px 0px 20px rgba(255, 255, 255,0.75)) drop-shadow(0px 0px 5px rgba(255, 255, 255,0.1));
 }
.kv_title {width: 100%;}
.kv img.kv_title_logo{width: 40%;margin: auto;display: none;}
.kv_glow {
  /* display: inline-block; */
  position: absolute;
  width: 100vw;
  height: 100%;
  object-fit:contain;
  object-position: left top;
  bottom:0%;
   left:50%; 
   transform: translateX(-50%); 
  z-index: 0;
  mix-blend-mode: difference;
  /* mask-image: url(../image/kv_hero_shadow.png); */
}
.glows{mix-blend-mode: hard-light;}
.kv_copywrite{
  width: 20vh;
  position: absolute;
  left: calc(49px + 1%);
  top: 1%;z-index: 11;
}
.glow_s_left{
  position: relative;
  width: 100%;height: 100%; left: -10%; object-fit: cover; object-position: center; bottom: 0;
  z-index: 1;mix-blend-mode: difference;}
.kv_glow_right_wrap{z-index: 10;}
.kv_glow_right{
  position: relative;
  width: 100%;height: 100%; left: 30%; object-fit: contain; object-position:right center; bottom: 0;
  transform: scale(0.8);
  z-index: 1;mix-blend-mode: difference;
}

.scroll_hint {
  position: absolute;left: 0%; top: 0%; transform:unset !important;
  display: flex;flex-direction: column;justify-content: center; align-items: center;
}
.scroll_hint img { width: 60%;margin: auto; }
.arrow_wrap{ 
  position: absolute;right: 4%;
  width: 8vh; height: 8vh; border: 1px solid #fff; border-radius: 90px; 
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;}
.scroll_hint p{ color: #fff; font-size: 0.5rem; margin: 0;}

.kv_wrap:last-of-type{  display: none;}
.kv_title_wrap{z-index: 10;}

.kv_crossover{width: 30vh;position: absolute;top: 5%;right: 5%;z-index: 20;}

@media (max-width:1199px){
  section.kv{ height:calc(100vh - 44px); min-height: unset;}
  .about_section article {width: 100%;}
  .kv img.kv_hero {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .kv_hero.opened{ opacity: 0 ; transition: all 0.3s;}
  .kv_title_inner { width: 80vw;}
  .kv img.kv_here_shadow{ display: none;}
  .scroll_hint{display: none;}
  .kv_copywrite{left: 30px;}

  .kv_wrap:last-of-type{  display: block; width: 100vw; height: 50%; position: absolute; bottom: 0; left: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}
  .kv_glow_right{ 
  transform: scale(2);right: 60%;object-position: right center;
  transform-origin: right center;
}   
}

@media (max-width:1024px){
.kv_copywrite{
  width: 50%;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 0%;
}
.kv_crossover{display: none !important;}
  .kv_title_inner { bottom:10%; filter: unset; }
.kv img.kv_title_logo{display: block;width: 30%;}
}
@media (max-width:1023px){
.kv_glow{bottom: 15%;}
  .kv_title_inner { width: 80vw;}
}

@media (max-width:640px){
  .kv_title_inner { width: calc(100vw - 60px); }
  .kv img.kv_hero{object-fit: unset; width: 100%;height: auto;}
  .kv img.kv_here_shadow{ display: none;}
  .kv_glow_right{ 
  transform: scale(1.5);right: 60%;object-position: right center;
  transform-origin: right center;
  }   
}
@media (max-width:480px){
  .kv_title_inner { width: calc(100vw - 40px);bottom:20%;  }
  .kv_copywrite{top: 3%; width: 50%;}
  .kv img.kv_title_logo{width: 40%;}

}

/* ===== ABOUT ===== */
.about_section::after{position: absolute; top: 0; right: 0; content: ''; width: 20%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); pointer-events: none; z-index: 0;}
.about_section::before{position: absolute; top: 0; left: 0; content: ''; width: 40%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 0;} 
picture{line-height: 0;}
.intro{height: 100vh;}
.about_section{  width: auto; display: grid; place-items:start center; overflow: hidden;}
.about_section .container{display: flex; flex-direction: row; justify-self: flex-start; align-items:flex-start; z-index: 20;}
.about_section h3, .about_section p,.about_section h4{ color: #fff; position: relative; margin: 0;}
.about_section .container article{ padding: 0 60px; }
.about_section .inner_title{font-size: 2.75rem; margin-top: 0; }
.title_wrap_about{ margin-bottom: 8vh; position: relative;}
.title_wrap_about span{ font-family: "Noto serif JP", serif; font-weight: 300; }
.title_glow{ white-space: nowrap;}
.title_glow img{ width: 42vh; display: block;}
.deco_star_gray{ width: 20vh; position: absolute; top: -1.85vh; left: 2vh;}
.about_section .title_wrap_about::after{ content: '';width: 100%; height: 0.3vh;position:absolute; left: 0;bottom: -10px; 
      background: url(../image/bg_sliver.png);
      background-repeat: no-repeat;
      background-size: cover;
      pointer-events: none;}
.title_wrap_about p{ 
  margin-bottom: 10px; margin-top: 0; font-size:calc(var(--fs-sub-title) * 0.85);
  font-family:"span-compressed", serif;
  font-weight: 300;}
.about_section .title_wrap_about p{ font-size:calc(var(--fs-sub-title) * 0.75);
  font-family:"Noto Serif JP", serif;font-weight: 500;}
.about_section article{flex-shrink: 0;}
.about_section article:nth-last-of-type(1){}
.article_wrap{background-color: hsla(12, 4%, 23%, 0.7); padding: 6vh 4vh; margin-top: 7vh; position: relative;}
.about_section .article_wrap::before{
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 60%; height: 60%;
  background: url(../image/deco_dot_top.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
  pointer-events: none;
  z-index: 0;
}
.about_section .article_wrap::after{
  content: '';
  position: absolute;
  bottom: 10px; right: 10px;
  width: 60%; height: 60%;
  background: url(../image/deco_dot_bottom.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  pointer-events: none;z-index: 0;
}
.about_section .liver_wrap{ margin-top: 7vh; }
.text_wrap_about{ padding-left: 20px; border-left:1px solid #fff;}
.text_wrap_about p{ font-size: var(--fs-text); font-family: "Noto serif JP", serif; font-weight: 400;margin-bottom: 15px; line-height: 1.75;}
.about_section ul{padding-left: 0;}

/* ===== LIVER ===== */
.liver_wrap  { 
  display: grid;
  grid-template-columns: repeat(2, auto); /* 一排兩個 */
  justify-content: center; /* 讓 grid 內容置中（可選） */
  gap:4vh 20px;} 
.liver_wrap li{ padding-right: 30px;margin-bottom: 0px; }
.liver_wrap img{ width: auto; height: 22vh; object-fit: cover;
  /* height: 20vh; max-height: 165px;  */
}
/* ===== Shu ===== */
.liver_cover{ margin-bottom: 10px; line-height: 0; position: relative; filter: drop-shadow(0px 0px 10px rgb(160, 54, 186,0.35));}
.liver_cover::before{ 
  content: ''; width: 50%; height: 20px; position: absolute; right: -20px;bottom: -6px; 
  background: url(../image/liver_cover_deco_shu.webp) no-repeat; background-position: right bottom; background-size: contain;
}
.liver_cover::after{ content: ''; width: 100%; height: 100%; position: absolute; right: -6px;top: 6px; background: #a036ba;z-index: -1;}
/* ===== Vox ===== */
.liver_cover[data-cover="vox"]{ filter: drop-shadow(0px 0px 10px rgba(255, 138, 138,0.35));}
.liver_cover[data-cover="vox"]::before{ content: ''; background: url(../image/liver_cover_deco_vox.webp) no-repeat; background-position: right bottom; background-size: contain;}
.liver_cover[data-cover="vox"]::after{ content: ''; width: 100%; height: 100%; background: #a33838;}
/* ===== Sonny ===== */
.liver_cover[data-cover="sonny"]{ filter: drop-shadow(0px 0px 10px rgba(255, 251, 120,0.35));}
.liver_cover[data-cover="sonny"]::before{ content: ''; background: url(../image/liver_cover_deco_sonny.webp) no-repeat; background-position: right bottom; background-size: contain;}
.liver_cover[data-cover="sonny"]::after{ content: ''; width: 100%; height: 100%; background: #998911;}

/* ===== Ren ===== */
.liver_cover[data-cover="ren"]{ filter: drop-shadow(0px 0px 10px rgba(178, 255, 156, 0.35));}
.liver_cover[data-cover="ren"]::before{ content: ''; background: url(../image/liver_cover_deco_ren.webp) no-repeat; background-position: right bottom; background-size: contain;}
.liver_cover[data-cover="ren"]::after{ content: ''; width: 100%; height: 100%; background: #388754;}


.liver_name { margin-bottom: 7px; }
.liver_name h4{font-size: var(--fs-sub-title);line-height: 1.3;}
.liver_name p{ font-family:"Noto Serif TC", serif; font-weight: 200;font-size: var(--fs-text); line-height: 1.3;}
.liver_site_wrap{ display: flex; flex-direction: row;justify-content: flex-start; align-items: center;}
.liver_site_wrap a{  
  width:2.95vh; height:2.95vh;  background: #fff;
  margin-right: calc(var(--fs-text) * 0.55);border-radius: calc(var(--fs-text) * 0.25) ; text-decoration: none; color: #000;
  display: grid;place-items: center;
  text-align:center;transition:all 0.3s;
}
.liver_site_wrap a i{font-size: var(--fs-text);}
.liver_site_wrap a.liver_yt{ color: #ce2424;}
.liver_site_wrap a:hover{ background: rgba(255, 255, 255,0.5); color: #fff; transition:all 0.3s;}
@media (max-width:1199px){
  .about_section .container{flex-direction: column; justify-self: center; align-items:flex-start;}
  .about_section{ height: auto;min-height: unset; }
  .about_section .article_wrap, .about_section .liver_wrap{margin-bottom: 60px; margin-top: 40px;}
  .about_section article:nth-last-of-type(1){width:600px;}
  /* .pd_objs {width: 60%;} */

  .liver_wrap  { gap:20px;} 
  .title_glow img{ width: auto; max-width: 300px; }
  .liver_wrap img{  height: auto; max-height: unset; width: 100%;}
  .about_section::before{top: 0; left: 0; content: ''; 
     width: 100%; height:40vh;
     background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);} 
     .about_section::after{display: none;}
  .text_wrap_about p{font-size: 0.75rem;}
  .liver_wrap  { gap: 40px;} 
  .liver_wrap li{ padding-right: 0px;margin-bottom: 0px; }
  .liver_name h4{font-size: 2rem;}
  .liver_name p{ font-size: 14px; }
  .liver_site_wrap a{ width:24px; height:24px;  margin-right: 10px;border-radius:5px; }
  .liver_site_wrap a i{font-size: 1.125rem;}
  .title_wrap_about p{font-size: 1.55rem;}
  .about_section .title_wrap_about p{ font-size:calc(1.55rem * 0.85);}
  .deco_star_gray{ width: 150px; top:-3%; left: 30px;}

  .about_section .title_wrap_about::after{ content: ''; height: 2px; pointer-events: none;}
  .article_wrap{padding: 40px 30px;}
  .title_wrap_about{ margin-bottom: 40px;}
}

@media (max-width:640px){
  .about_section article,.about_section article:nth-last-of-type(1){width: 100%;}
  /* .about_section .liver_wrap{margin-right: -30px;} */
  .about_section .inner_title {font-size:calc(7vw + 5px);margin-bottom: 3px;}
  /* .title_glow{left:calc(7vw + 5px); white-space: nowrap;} */
  .title_wrap_about p{font-size: 1.75rem;}
  .about_section::after{position: absolute; top: 0; right: 0; content: ''; 
     width: 100%; height:20vh;
     background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: -1;opacity: 0;
    }
}
@media (max-width:480px){
  .about_section .container article { padding: 0 30px;}
  .title_wrap_about p{font-size: 1.35rem;}
  .about_section .title_wrap_about p{ font-size:calc(1.35rem * 0.85);}
  .deco_star_gray{ width: 120px; top:-2.3%; left: 30px;}
}

@media (max-width:400px){
  .liver_wrap  { grid-template-columns: 1fr; /* 全部變直排 */ gap: 0;} 
  .liver_wrap li { width: 100%;padding-right: 0px; margin-bottom: 40px;}
  .about_section .liver_wrap{margin-right: 0px;}
  .liver_cover::before{  content: ''; width: 50%; height: 22px; position: absolute; right: -20px;bottom: 0px;  background-size: 100% 100%;}
  .liver_cover::after{display: none;}
  .liver_name h4{ font-size: 2.4rem; line-height: 1.2;}
  .liver_name{margin-bottom: 15px;}
}
@media (max-width:360px){
  .article_wrap {padding: 30px 20px;}
  .about_section .title_wrap_about p{ font-size:4.5vw;}
}

/* ===== PRODUCT ===== */
  .pd_section{ height: 100vh; width: auto;  position: relative; left: 0; top: 0; }
  .pd_section_outter{height: 100vh; width: auto;  position: relative; left: 0; top: 0; display: flex;flex-direction: row; z-index: 1;}

    .pd_section::after{
      content: '';
      position: absolute;
      top: 0; right: 0%;
      width:30%;
      height: 100%;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
      z-index: 0;
    }
    .pd_section.ren_section::after{ display: none;}
    .parent-sticky{ position: sticky; left: 0;top: 0;  z-index: 10; height: 100%; padding-left: 15vh; width: fit-content;display:block; pointer-events: none; }
    .no-sticky .parent-sticky{position: absolute;}
    .parent-sticky h3+div{height: calc(100% - calc(7.3vh + 20px)); display: flex; justify-content: center; align-items: center;}
    .parent-sticky-wrap{width: 40%;height: 100%; position: absolute;top: 0; left: 0; pointer-events: none; z-index: 1;}
    .parent-sticky.release { padding-right: 500px; }
    .parent-sticky::after{
      content: '';
      position: absolute;
      top: 0; left: 0%;
      /* transform: translateX(-50%); */
      width:120%;
      height: 100%;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
      /* background: url(../image/liver_shu_shadow.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center; */
      z-index: -1;
    }

    .parent-sticky .section_title::after {
      content: '';
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cd9ec7;
    }
    .parent-sticky .section_title::before {
      content: '';
      width: 150%;
      height: 1px;
      position: absolute;
      right: -150%;
      bottom: 0;
      background:linear-gradient(90deg, #cd9ec7 0%, #cd9ec7 50%, rgb(205, 158, 199,0) 100%); 
    }
    .child-content{
      z-index: 0; position: relative; left: 0;top: 0;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items:flex-end;
    }
    
    .title_color{color: #cd9ec7;}

    .vox_section .parent-sticky .section_title::after { content: ''; background: #cf1b1b;}
    .vox_section .parent-sticky .section_title::before {content: '';background:linear-gradient(90deg, #cf1b1b 0%, #cf1b1b 50%, #cf1b1b00 100%);  }
    .vox_section .title_color{color: #cf1b1b;}

    .sonny_section .parent-sticky .section_title::after { content: ''; background: #dccb3b;}
    .sonny_section .parent-sticky .section_title::before {content: '';background:linear-gradient(90deg, #dccb3b 0%, #dccb3b 50%, #dccb3b00 100%);  }
    .sonny_section .title_color{color: #dccb3b;}

    .ren_section .parent-sticky .section_title::after { content: ''; background: #338e7c;}
    .ren_section .parent-sticky .section_title::before {content: '';background:linear-gradient(90deg, #338e7c 0%, #338e7c 50%, #338e7c00 100%);  }
    .ren_section .title_color{color: #338e7c;}

    .intro{height: 100vh;}
    .liver_body{position: relative;pointer-events: none; }
    .liver_body picture{ height: 100%; }
    .liver{position: relative; height: 100%; z-index: 10;}
    .liver_frame{ position: absolute; width: 90%; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0;filter: drop-shadow(0px 0px 20px rgba(166, 6, 204,0.45));
    }
    .ren_section .liver_frame{ filter: drop-shadow(0px 0px 20px rgba(24, 209, 187,0.45));}
    .sonny_section .liver_frame{ filter: drop-shadow(0px 0px 20px rgba(220, 203, 59,0.45));}
    .vox_section .liver_frame{ filter: drop-shadow(0px 0px 20px rgba(207, 27, 27,0.45));}
    .order_wrap{position: absolute; left: calc(100% + 85px); bottom:calc(50% + 16vh) ;transform:translateY(-50%);}
    .liver_order{height: 10vh; 
      /* left: calc(100% + 85px); bottom:calc(50% + 16vh) ;transform:translateY(-50%);  */
      z-index: 1; pointer-events: none;}
    .liver_body .text_shu{position: absolute;bottom: 10%; left: -7%; width: 60%; z-index: 20;}
    .liver_body .text_vox{position: absolute;bottom: 10%; left: -7%; width: 60%; z-index: 20;}
    .liver_body .text_sonny{position: absolute;bottom: 10%; left: -7%; width: 60%; z-index: 20;}
    .liver_body .text_ren{position: absolute;bottom: 10%; right: -7%; width: 60%; z-index: 20;}

    .vox_section .liver_body .liver{ transform: translateX(10%);}
    
    .child-content .liver{height: calc(100% - calc(7.3vh + 20px));}
    .product_detial{ display: flex;flex-direction: row; justify-content: flex-start;align-items: center; margin-top: 60px; padding-left: 0;}
    .product_detial_box{display: flex; flex-direction: column;justify-content: center; margin-right: 30px;}
    .product_detial_title{
      display: flex;flex-direction: row;justify-content: space-between;align-items: flex-end;background: #7a338c;
      width: 100%;flex-grow: 0;padding: 8px 0px 12px 0px;
    }
    .product_detial li:nth-of-type(2) picture{ padding: 0 20px;}

    .vox_section .product_detial_title{background: #892828;}
    .sonny_section .product_detial_title{background: #897d29;}
    .ren_section .product_detial_title{background: #338e7c;}

    .product_detial_content{ flex-grow: 6;  line-height: 0;position: relative;}
    .product_detial_title p{margin: 0;padding: 0px 2.75vh;color: #fff;}
    .pd_name{  font-family:"Noto serif JP", serif; font-weight: 400; font-size: calc(var(--fs-text) * 0.65);margin: 0;line-height: 0.75;letter-spacing: 3px;}
    .pd_name_en{  font-size:calc(var(--fs-section-sub) * 0.35) ; margin-bottom: 0;}
    /* .pd_name.font-compress{ font-family:"span-compressed", serif;font-weight: 400;font-style: normal;font-size: 1.75rem; } */
    .product_detial_title .price_num { font-size:calc(var(--fs-section-sub) * 0.45)  ;}
    .pd_price{ font-size:var(--fs-text); line-height: 0.75; }
    .pd_bg{background: #000; position: relative;}
    .pd_bg::before{ 
      content: '';position: absolute;width: 100%;height: 100%; top: 0;left: 0; z-index: 0;opacity: 0.6;
      background:linear-gradient(180deg, #000 0%,#000 70%, #9b3fb0 100%); 
    }
    .pd_bg img{width:auto; height: 50vh;visibility: hidden; }
    .pd_objs {position: absolute; width: 60%; pointer-events: none;}


    .vox_section .pd_bg::before{ background:linear-gradient(180deg, #000 0%,#000 70%, #cf1b1b 100%); }
    .sonny_section .pd_bg::before{ background:linear-gradient(180deg, #000 0%,#000 70%, #dccb3b 100%); }
    .ren_section .pd_bg::before{ background:linear-gradient(180deg, #000 0%,#000 70%, #338e7c 100%); }
    

    .pd_info { position: absolute; color: #fff; top: 50%; right: 5%; transform: translateY(-50%); z-index: 10;}
     .pd_info p{ margin: 0; font-size:1.75vh; font-family:"Noto serif JP", serif; font-weight: 500; line-height: 2; text-align: right;}
    .box_cover{ width: 100%; top: 50%; left:43%; transform: translate(-50%,-50%) scale(1.22); }
    .palette{ bottom: -5%; right: -5%; width: 70%;}
    .palette_cover{top: 50%; left: 50%;transform: translate(-50%,-50%); width: 80%; }
    .tint{ bottom: 8%; right: -5%; width: 60%;}
    .pd_set{left: 2%; bottom: -3%;width: 66%;}

    .vox_section .pd_set,.ren_section .pd_set{ bottom: -8%;}
     .sonny_section .pd_set{bottom: -5%;}

    .shu_section .box_cover,
    .shu_section .palette_cover, .shu_section .palette, .shu_section .tint
    { filter: drop-shadow(0px 0px 20px rgb(155, 63, 176,0.4));}
    .vox_section .box_cover,
   .vox_section .palette_cover, .vox_section .palette,.vox_section .tint
    { filter: drop-shadow(0px 0px 20px rgba(207, 27, 27,0.4));}

    .sonny_section .box_cover,
    .sonny_section .palette_cover, .sonny_section .palette, .sonny_section .tint
    { filter: drop-shadow(0px 0px 20px rgba(220, 203, 59,0.4));}

     .ren_section .box_cover,
    .ren_section .palette_cover, .ren_section .palette,.ren_section .tint
    { filter: drop-shadow(0px 0px 20px rgb(51, 142, 124,0.4));}

    .btn_pd_detail{ 
      display: inline-block; text-decoration: none; 
      padding: 6px 12px;background: #000;text-align: center;color: #fff;border-radius: 50px;border: 1px solid #fff;
      font-size: 1.85vh; position: absolute;top: 7%; right:20px;z-index: 20; transition: all 0.3s;
      pointer-events: all; cursor: pointer; line-height: 1;
      font-family:"Noto sans JP", sans-serif; 
    }
    .btn_pd_detail.btn_pd_right{ left: unset;right: 5%; }
    .ri-arrow-right-s-line{ background: #fff;border-radius: 50px;color: #000;transition: all 0.3s;}
    .btn_pd_detail:hover{background: #fff; color: #000; transition: all 0.3s;}
    .btn_pd_detail:hover .ri-arrow-right-s-line{ background: #000;border-radius: 50px;color: #fff;transition: all 0.3s;}
    .horizontal-section{ position: relative; display: flex;flex-direction: column; align-items: flex-start;}
    .sticky-space{visibility: hidden; display: block; height: 100%; padding-left: 15vh; margin-right: 85px;}

    .liver_copywrite{ 
      position: absolute; left:15%; bottom:8%; transform: translateX(-50%); 
      padding: 10px 20px; background: #000;
      z-index: 10; pointer-events: none;}
    .liver_copywrite p{ 
      font-family:"Noto serif JP", serif; 
      font-weight: 600; color: #9b3fb0; white-space: nowrap;position: relative;z-index: 10;
      font-size: 1.25rem;margin: 0;
    }
    .liver_copywrite::before{
      content: '';position: absolute;top:5px; left:5px;width:100%;height: 100%;pointer-events: none;
      background: linear-gradient(90deg, rgba(0,0,0,1) 0%,#9b3fb0 50%  , #ffbde0 100% 100%); z-index: -2;}
    .liver_copywrite::after{
      content: '';position: absolute;top: 0px; left: 0px;width:100%;height: 100%;pointer-events: none;background:#000; z-index:0;}

  .product_detial_section{margin-bottom: 7.3vh;}
@media (max-width:1600px){
  .parent-sticky-wrap {width: 50%;}

}
@media (max-width:1400px){
  .parent-sticky-wrap {width: 60%;}
}

@media (max-width:1199px){
  .pd_section{height: auto; width: 100vw;} 
  .pd_section_outter{height: auto; width: 100vw; display: flex;flex-direction: column;} 
  .pd_section::after{display: none;}
  .child-content{align-items: center; flex-direction: column; padding: 0 60px;}
  .parent-sticky-wrap{position: relative;width: 100%;height: auto;}
  .parent-sticky{ position: relative;margin: auto;
    width: 600px;
    padding: 0 60px;
    display: block;}
  .no-sticky .parent-sticky{ position: relative;}
  .parent-sticky::after{ display: none; }
  .liver{height: auto;width: 100%; }
  .liver_frame{width: 80%;}
  .liver_order{position: relative; height: auto; width: 100%; left:unset; top:unset; margin: auto; margin-top: 30px; transform: unset;}
  .sticky-space{display: none;}
  .order_wrap{background: #7a338c; padding: 20px; position: relative;left: unset; bottom:unset ;transform:unset; }
    .vox_section .order_wrap{ background: #892828; }
     .sonny_section .order_wrap{ background: #897d29; }
     .ren_section .order_wrap{ background: #338e7c; }
  .order_wrap img{margin-top: 0;}
  .liver_body .text_shu{bottom: 15%;}
  .liver_body .text_vox{bottom: 15%;}
  .liver_body .text_sonny{bottom: 15%;}
  .liver_body .text_ren{bottom: 15%;}


  .product_detial_section{width: 100%;margin-bottom: unset;}
  .product_detial{ flex-direction: column; justify-content:center;align-items: center; padding: 20px 0px; max-width: 480px; margin: auto;}
  .product_detial_box { width: 100%; margin-right: 0; margin-bottom: 20px;}
  .pd_bg {width: 100%;}
  .pd_bg img{width: auto; height: 100%; position: absolute; top: 0;left: 0;}
  .pd_objs {position: relative; transform: unset;}

  .product_detial_title p{padding: 0px 20px;}
  .pd_info { position: relative; top: unset; right: unset; transform: unset;margin-bottom: 30px;}
  .pd_info p{text-align: center; font-size: 13px;}
  .pd_name{  font-size: 0.65rem ;}
  .pd_name_en{  font-size:1.7rem ; }
  .product_detial_title .price_num { font-size:2.3rem; }
  .pd_price{ line-height: 0.75; }
 
  .btn_pd_detail,.btn_pd_detail.btn_pd_right {position: relative;left: unset; bottom: unset;right: unset; width: auto;
    padding: 8px 16px;
      font-size: 1.25rem; 
  }

  .product_detial_content{ width: 100%;position: relative; display: flex;flex-direction: column; align-items: center;  padding: 60px; background:#000;}
  .product_detial_content::before{ 
    content: ''; position: absolute; width: 100%; height: 100%; top: 0;left: 0; z-index: 0;opacity: 0.6;
    background:linear-gradient(180deg, #771fa600 0%, rgba(119, 31, 166,0.4) 70%, #cd9ec7 100%);
    mix-blend-mode: hard-light;
   }
  .vox_section .product_detial_content::before{  content: ''; background:linear-gradient(180deg, #000 0%, rgba(207, 27, 27,0.4) 70%, #cf1b1b 100%);}
  .sonny_section .product_detial_content::before{  content: ''; background:linear-gradient(180deg, #000 0%, rgba(220, 203, 59,0.4) 70%, #dccb3b 100%);}
  .ren_section .product_detial_content::before{  content: ''; background:linear-gradient(180deg, #000 0%, rgba(53, 182, 164,0.4) 70%, #35b6a4 100%);}

  .pd_objs.pd_objs_main{top:unset; left: unset;width: 100%; margin-bottom: 30px;}
  .pd_objs.pd_objs_none{display: none;}
  .liver_copywrite{ left: unset; right: 0; transform: unset; bottom: 10%;}
  .parent-sticky .section_title::before {display: none; }

}
@media (max-width:640px){
     .parent-sticky{  width: 100%; }
     .product_detial{max-width: unset;width: 100%;}
     .product_detial_content{ padding: 60px 30px; }
     .pd_objs.pd_objs_main{margin-bottom: 30px;}
    .liver_copywrite{  bottom:20%;}
     .liver_copywrite p{font-size:1rem;}
     
}
@media (max-width:480px){
    .parent-sticky{ padding: 0 30px;}
    .child-content{padding:0 30px;}
    .liver{height: auto;width: 100%; }
    .liver_copywrite{  bottom:20%; right: -10px;}
    .liver_copywrite p{font-size: 3.5vw;}
    .liver_frame{width: 90%;}
    .pd_name_en{  font-size: 1.8rem; }
    .product_detial_title .price_num { font-size:2rem;}

    .liver_body .text_shu{bottom: 15%; left: 50%; transform: translateX(-50%); width: 80%;}
    .liver_body .text_vox{bottom: 15%;left: 0%; transform: translateX(-10px); width: 80%;}
    .liver_body .text_sonny{bottom: 15%;left: -5%;  width: 80%;}
    .liver_body .text_ren{bottom: 15%;right: -5%;  width: 80%;}
}

@media (max-width:400px){
    .product_detial_title p {padding: 0 10px; white-space: nowrap; }
    .product_detial_title .price_num { font-size:2.2rem;}
    .pd_name_en{  font-size: 1.5rem; }
    .product_detial_title p.pd_price{ padding-left: 0;}
    .liver_frame{width: 90%;}
    .liver_copywrite p{font-size: 4.25vw;}
    .pd_name {font-size: 10px; letter-spacing: 1px;}
}
@media (max-width:380px){
     .product_detial_title p.pd_price{ padding-left: 0;}
     .liver_frame{width: 90%;}
     .liver_body .text_vox{bottom: 15%;left: 0%; transform: translateX(20px); width: 80%;}
}


/* ===== SPECIAL Set ===== */

      /*.stream{height: 100vh; }
    .attention{height: 100vh; } */
    
    .set_section {
      position: relative;
      overflow: hidden;
      padding-left: 22vh;
      margin-right: 15vh;
      /* width: 100vw;
      height: 100vh; */
    }
     .set_section  .container{height: 100%;}
    .bg_glow {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      object-fit: cover;
    }
    #special_list{
      width: 50%;
      height: 100%;
      padding-left: 0;
      top: -5%;
    }
    #special_list .slick_item{ padding: 10px;}
    /* 讓 slick 的 track 用 flex 排，避免高度怪掉 */
    .slick-track {display: flex !important;}
    
    /* 每張 slide 高度自動撐開 */
    .slick-slide {height: auto !important;}
    
    /* 你的主圖 slick：圖片一定要撐滿寬度 */
    #special_list .slick_item picture,
    #special_list .slick_item img {width: 100%;height: auto;display: block;}
    
    /* 其他兩個輪播也順便保險一下 */
    #special_info img,
    #bg_set_list img {width: 100%;height: auto;display: block;}

    .special_info{
      width:50%; height: 100%;
      margin-right:60px ; margin-top: 0; padding: 0 0px 30px;margin-left: -30px;}
    .special_info .btn_pd_detail{ position: absolute; width: auto;  left: 50%; top: unset; transform: translateX(-50%); bottom: 22%; }
    .special_wrap{position: relative;height: 100%;}
    .special_wrap_inner{
      display: flex; flex-direction: row; justify-content: flex-start; align-items: center;  
      position: absolute;padding: 0 40px 60px 0px; left: 50%; top: 50%; transform: translate(-50%,-50%);width: 100%; height: 100%;
    }
    .set_section .title_color{color: #fff;}
    .special_set{height: 100%;width: auto;display: block;  opacity: 0;}
    .special_info .slick-slide{padding: 30px; position: relative;}
    .slick-slide img{width: 100%; height: 100%; object-fit: contain;}
    .dots{display: flex;position: relative; justify-content: center; padding-left: 0;}
    .dots li{list-style: none;padding: 5px;}
    .slick-slider button{ color: #ffffff00; position: relative; background: #00000000;border: unset;}
    .dots button::after{content: ''; background: rgba(255, 255, 255,0.4);position: absolute; left: 50%;top: 50%;transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; }
    .slick-active button::after{content: ''; background: rgba(255, 255, 255,1);}
    .slick-prev,.slick-next{position: absolute !important;  top: 50%;transform: translateY(-50%);left: -30px;}
    .slick-next{right: 0px;left: unset;}
    .slick-next::before, .slick-prev::before{
      content:'';
      display: block;
      width: 30px;
      height: 30px;
      color: #ffffff00;
      background: url(../image/arrow-prev.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 10;
    }
    .slick-next::before{
      content:'';
      background: url(../image/arrow-next.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .bg_set_list{position: absolute;width: 100%;height: auto; bottom: 7%;left: 0;z-index:0;padding-left: 0;}
    .bg_set_list .slick-track{height: auto; }
    .slick-slide img.set_bg{width: 100%;height: 100%;object-fit: cover;object-position: bottom center; }

    /* 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;
}

.slick_ren .panel-head-image,.slick-active.slick_ren .panel-head-image{
  	-webkit-transform: translate3d(0, 4vh, 0);
  transform: translate3d(0, 4vh, 0);}
/* .panel_shu{filter: drop-shadow(0px 0px 25px rgba(160, 54, 186,0.75));}
.panel_vox{filter: drop-shadow(0px 0px 25px rgba(239, 60, 60,0.75));}
.panel_sonny{filter: drop-shadow(0px 0px 25px rgb(255, 240, 59,0.75));}
.panel_ren{filter: drop-shadow(0px 0px 25px rgb(74, 211, 175,0.75));} */

@media (max-width:1199px){
  .set_section {margin-left: 0;margin-right: 0;padding-left: 0;}
  .set_section .container{ margin: auto; max-width: 820px; padding-top: 60px;}
  .s5 h3.section_title{ max-width: 480px; margin: auto;}
  .special_wrap_inner{
      display: flex;  justify-content:center; align-items: center;  
      position: relative;padding: 0; margin-top: 30px; left:unset; top: unset; transform: unset;width: 100%; height: auto;
      /* display: flex; flex-direction: column-reverse; justify-content:center; align-items: center;  
      position: relative;padding: 0; left:unset; top: unset; transform: unset;width: 100%; height: auto; */
    }
    .special_wrap{margin-top: 0px;}
    .special_set{display: none;}
    #special_list{width: 100%; position: relative;right: 0;}
    .special_info{
      width: 40%;height: auto; margin-right: 0; margin-left: 0; padding-bottom: 0; 
      position: absolute;left: 60px;top: 0%; transform: translateY(0%);
    }
    .special_info .btn_pd_detail{ bottom: 18%; font-size: 0.65rem;}
    .special_info .slick-slide{padding: 0px;}
    #special_list{padding-right:60px ;padding-left: 60px;}
    .slick-prev,.slick-next{left: 30px;}
    .slick-next{right: 30px;left: unset;}
    .set_bg{display: none;}
    .bg_set_list{ max-width: 600px; transform: scaleY(-1) translateX(-50%);left: 50%; bottom: unset; top: -30px;}
    .special_list .dots{bottom: -10%;z-index: 10;}
    .slick_ren .panel-head-image,.slick-active.slick_ren .panel-head-image{
  	-webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);}
}
@media (max-width:640px){
    .set_section .container{ width: 100%;}
  .special_wrap_inner{margin-top: 40px;
      display: flex; flex-direction: column-reverse; justify-content:center; align-items: center;  }
    .special_info{
      width: 100%;height: auto; 
      position: relative;left: 0px;top:0; transform:unset;
    }
    .special_info .btn_pd_detail{ bottom: 20%; font-size: 0.75rem;}
    .special_info .slick-slide{padding: 20px;}
    .set_section .section_title {margin: 0 60px;}
    .slick-prev,.slick-next{left: 30px;}
    .slick-next{right: 30px;left: unset;}
    .bg_set_list{ top: -40px;}
    .s5 h3.section_title{ width: calc(100% - 120px); }
    #special_info .slick-dots li button::before {
      content: '';
      background: rgba(255, 255, 255, 0.4);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    #special_info .slick-dots li.slick-active button::before {
        content: '';
        background: rgba(255, 255, 255, 1);
    }
}
@media (max-width:500px){
    .set_section .section_title {margin: 0 30px;}
    #special_list{padding-right:30px ;padding-left: 30px;}
}

@media (max-width:480px){
    .special_info .slick-slide{padding: 10px;}
    .special_info .btn_pd_detail{ bottom: 20%; font-size: 2.5vw;}
    .s5 h3.section_title{ width: calc(100% - 60px); }
}

@media (max-width:400px){
    .special_info .btn_pd_detail{ bottom: 20%; font-size: 2.25vw;}
}
/* ===== PR ===== */
/* .stream_section{overflow: hidden;} */
.stream_wrap{display: flex;flex-direction: row;justify-content: center;align-items: center; padding: 10vh;}
.stream_left,.stream_right{ width: 90vh;  flex-shrink: 0;}
.stream_section .container,.stream_wrap { height: 100%;}
.stream_wrap *{color: #fff;}
.pr_time_wrap{ text-align: center;  }
.pr_time_wrap p{ font-size: var(--fs-text); }
.stream_left,.stream_right{padding: 60px; position: relative;}
/* .stream_right{width: auto;} */
.stream_left *{ font-family: 'Noto Serif JP',serif; }
.stream_wrap .section_title_wrap {display: flex; flex-direction: row;justify-content: space-between; align-items:center;margin-bottom: 7px;}
.stream_text{margin-top: 20px;}
.stream_text h4,.stream_text p{ margin: 0;}
.stream_text h4.live_title,.stream_text p.strem_time{font-size: var(--fs-sub-title); line-height: 1;}
.stream_text p.strem_time span{font-size:calc(var(--fs-sub-title) * 0.55) ; }
.stream_text p:not(.font-compress){ font-family: 'Noto Serif JP',serif; font-size: var(--fs-text); }
.stream_section .section_title_wrap p{ font-size: var(--fs-text); padding: 6px 8px; background: red; margin: 0;font-family: 'Noto Serif JP',serif;font-weight: 500; }
.stream_section .section_title_wrap .font-compress{ font-size:var(--fs-sub-title); margin: 0; line-height: 1;position: relative; display: inline-block;}
.stream_section .section_title_wrap .font-compress::after{ content: ''; width: 12px;height: 12px; background: red; border-radius: 30px; 
  position: absolute;top: 50%; right: -25px; transform: translateY(-50%);
}
.stream_info span{position: relative;}
.stream_info span::after{ content: ''; width: 100%; height: 3px; background: url(../image/bg_rainbow.webp)no-repeat;background-size: 100% 100%; position: absolute; left: 0; bottom: -5px;}
/* .stream_left::before{ 
  content: ''; 
  width: 100%;height:calc(100vh - 120px); background: url(../image/deco_frame.svg)no-repeat; background-position: center;
  position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); z-index: -1;
  mix-blend-mode: plus-lighter; opacity: 0.2;
} */
.frame{ 
  width: auto;height:calc(100vh - 120px); z-index: 0;
  position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
  mix-blend-mode: soft-light;opacity: 1;  
}
.no-sticky .frame{  mix-blend-mode: unset; opacity: 0.25;  backdrop-filter: brightness(1.1) contrast(1.1); }
.yt_wrap{position: relative;margin-bottom: 10px; filter: drop-shadow(10px 10px #000);}
.yt_box {
    position: relative;
    width: 100%;
    /* 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_box::before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0,0.5), #00000000);;
    pointer-events: none;
} */
.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;
}
.yt_player{position: absolute;width:90px; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.yt_cover {overflow: hidden; display: block;}
.yt_cover img{transition: all 0.5s;}
.yt_cover:hover img{transform: scale(1.05);  transition: all 0.5s;}
/* .yt_box:hover .yt_cover img{transform: scale(1.2); transition: all 0.5s;} */
.yt-guard {
  position: absolute; inset: 0;
  top: 0; left: 0;
  pointer-events: auto; 
  background: transparent;
  width: 100%; height: 100%;
} 
.yt-unlock{border: unset !important; background: transparent !important;z-index: 10; pointer-events: none;}
.yt-unlock.is-hidden { display: none; }
.break_s,.break_xs{display: none; }
@media (max-width:1199px){
  .stream_section .container,.stream_wrap {height: auto;}
  .stream_wrap{display: flex;flex-direction: column;justify-content: center;align-items: center; padding: 0px 60px;}
  .stream_left,.stream_right{width: 600px}
  .pr_time_wrap{ width: 480px; position: absolute;z-index: 10;top: 50%; left: 50%; transform: translate(-50%,-50%);}
  .frame{  position: relative; width: calc(100% - 30px); top: unset; left: unset; transform: unset; height: auto; margin: auto;}

  .stream_text h4.live_title,.stream_text p.strem_time{font-size: 2.5rem; line-height: 1;}
.stream_text p.strem_time span{font-size:calc(2.5rem * 0.55) ; }
  .stream_section .section_title_wrap .font-compress{ font-size: 2.5rem; margin: 0; line-height: 1;position: relative; display: inline-block;}
  .stream_section .section_title_wrap p{ font-size: 1rem; padding: 6px 8px; background: red; margin: 0;font-family: 'Noto Serif JP',serif;font-weight: 500; }
  .stream_text p:not(.font-compress){ font-size: 15px; }
}

@media (max-width:1024px){
   .frame{  mix-blend-mode: unset; opacity: 0.25;  backdrop-filter: brightness(1.1) contrast(1.1); }
}
@media (max-width:768px){
  .stream_left,.stream_right{width: 100%}
}
@media (max-width:640px){
  .stream_left,.stream_right{padding: 60px 0 30px;}
  .frame{ width: 100%; max-height: unset;}
  .pr_time_wrap{ width:100%;}
}
@media (max-width:550px){
   .break_L{ display: none; }
   .stream_wrap .section_title_wrap{align-items: self-end;}
   .stream_section .section_title_wrap p{margin-bottom:6px;}
   .stream_section .section_title_wrap .font-compress::after{display: none;}
   .stream_point{position: relative;}
   .stream_point::after{position: absolute;content: ''; width: 12px;height: 12px; background: red; border-radius: 30px; 
  position: absolute;top: 50%; right: -25px; transform: translateY(-50%); }
}

@media (max-width:480px){
  .stream_wrap{padding: 0px 30px;}
  .stream_text p.strem_time{font-size: 8.75vw; line-height: 1.3;}
.stream_text p.strem_time span{font-size:calc(8.75vw * 0.55) ; }
  .stream_text h4.live_title{font-size: 8.75vw; }
  .stream_wrap .section_title_wrap {align-items: flex-end;}
  /* .stream_section .section_title_wrap p::before{ 
    content: ''; display: block;width: 12px; height: 12px; background: #fff; border-radius: 30px; margin-right: 6px;} */
  
}
@media (max-width:420px){
  .break_s{ display: block; }
}
@media (max-width:360px){
  .break_xs{ display: block; }
}

/* ===== ATTENTION ===== */

.attention_section .container,.atten_wrap {height: 100%;}
.atten_wrap{display: flex;flex-direction: row;justify-content: center;align-items: center; padding: 8vh;}
.atten_wrap *{color: #fff; text-align: justify;}
.atten_left,.atten_right{padding: 60px; position: relative; flex-shrink: 0;}
.atten_left{width: 100vh;}
.atten_right{width: auto;}
.atten_left .article_wrap{margin-top: 30px;}
.atten_left .article_wrap *{ font-family: 'Noto Serif JP',serif; }
.attention_section .title_wrap_about{margin-bottom: 15px;}
.pr_time_wrap h4{font-size:calc(var(--fs-sub-title) * 0.85) ;margin-bottom: 15px;  font-weight: 500;} /* 1.75em */
.highlight_red{ color: red;}
.section_title_sub{font-family: 'Noto Serif JP',serif; font-weight: 500; font-size: 1rem; }
.attention_section .title_wrap_about p{ font-family: 'Noto Serif JP',serif; font-weight: 500; font-size: calc( var(--fs-sub-title) * 0.75);  }
.attention_section .text_wrap_about li{text-indent: calc( var(--fs-small-text) * -1);padding-left: 1em;font-size: var(--fs-small-text); font-family: "Noto Serif JP", serif; font-weight: 300; margin-bottom: 10px;}

.attention_section .article_wrap::before{
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 60%; height: 60%;
  background: url(../image/deco_dot_top.svg);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;z-index: 0;
}
.attention_section .article_wrap::after{
  content: '';
  position: absolute;
  bottom: 10px; right: 10px;
  width: 60%; height: 60%;
  background: url(../image/deco_dot_bottom.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  pointer-events: none;z-index:0;
}
@media (max-width:1199px){
  .atten_wrap{flex-direction: column; padding: 0 60px 60px;}
  .atten_left{width: 600px;}
  .attention_section .text_wrap_about li{text-indent:-1em;padding-left: 1em;font-size: 0.65rem; font-family: "Noto Serif JP", serif; font-weight: 300; margin-bottom: 10px; line-height: 1.75;}
  .attention_section .title_wrap_about p{ font-size: 1.5rem;}
  .pr_time_wrap h4{font-size:1.75rem;}
  .pr_time_wrap p{font-size: 1rem;}
}

@media (max-width:640px){
  .attention_section .title_wrap_about p{ font-size: 1.5rem;}
  .atten_left, .atten_right{padding: 60px 0; width: 100%;}
  .text_wrap_about{padding-left: 0; border-left: unset;}
}

@media (max-width:480px){
  .atten_wrap{padding: 0 30px 60px 30px;}
}


/* SNS=================================== */

.icon_wrap{ display: flex; flex-direction: row;justify-content: space-between; align-items: center; margin-bottom: 30px;}
.sns_share{  padding: 30px 60px 30px;  position: relative;}
.icon_sns { text-align: center; display: flex;flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap;}
.icon_sns a{
    background: linear-gradient(to left, #fff, #fff);
    background: -webkit-linear-gradient(to left, #fff, #fff);
    background-clip: text;
    -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
    color: #fff;
    margin-right: var(--fs-text); 
    font-size:calc(var(--fs-text) * 2) ; transition: all 0.3s; 
    text-decoration: none !important;
}
.icon_sns a:first-of-type:hover{ 
   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:nth-of-type(2):hover{ 
    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; transition: all 0.3s; 
}
.icon_sns a:nth-of-type(3):hover{ 
  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; transition: all 0.3s; 
}
.icon_sns a:last-of-type:hover{ 
    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; transition: all 0.3s; 
}
.support{ margin: auto; margin-right: 30px;}
.support img{ width: 20vh; }
.copyright{  font-size:calc(var(--fs-small-text) * 1.5) ; text-align: center;}
@media (max-width:1199px){
  .support img{ width: 150px; max-width: 150px; }
  .copyright{  font-size: 1rem;}
  .icon_sns a{font-size: 33px;margin-right: 10px;  }
}
@media (max-width:640px){
  .icon_wrap{  flex-direction: column;justify-content: center; align-items: center; margin-bottom: 30px;}
  .support{ margin-right: unset;margin: auto; margin-bottom: 10px;}
  .icon_sns a:last-of-type{ margin-right: 0px; }
}