/* Noto Serif JP */
@font-face {
    font-family: "noto-serif-jp";
    src: url('../fonts/NotoSerifJP-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: "noto-serif-jp";
    src: url('../fonts/NotoSerifJP-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: "noto-serif-jp";
    src: url('../fonts/NotoSerifJP-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: "noto-serif-jp";
    src: url('../fonts/NotoSerifJP-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: auto;
}
/* Noto Serif - En */
@font-face {
    font-family: "noto-sans-en";
    src: url('../fonts/NotoSansDisplay-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: "noto-sans-en";
    src: url('../fonts/NotoSansDisplay-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: auto;
}
@font-face {
    font-family: "noto-serif-en";
    src: url('../fonts/NotoSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: "noto-serif-en";
    src: url('../fonts/NotoSerif-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: auto;
}
 
 html { scrollbar-gutter: stable; }
 body{background-color: #345356;}
    * { margin: 0; padding: 0; box-sizing: border-box;}
    *::before, *::after { box-sizing: border-box;}
    img { display: block;}
    ul,li { list-style: none;}
    a{ text-decoration: none; color: inherit;}
    :root{
        --fc-vw: 100vw;
        --fc-rem:calc(var(--fc-vw) * 1 / 168);
        --ft-noto-serif: "noto-serif", serif;
        --ft-noto-sans: "noto-sans", sans-serif;
    }
    
    
    @media (max-width: 1024px) {
            :root {
                 --fc-rem:calc(var(--fc-vw) / 100);
             }
     }
    @media (max-width: 640px) {
        :root {
             --fc-rem:calc(var(--fc-vw) / 60);
         }
     }
    @media (max-width: 460px) {
        :root {
             --fc-rem:calc(var(--fc-vw) / 50);
         }
     }

    /* @media (max-width: 1440px) {
         :root{
             --fc-rem: calc(var(--fc-vw) * 1 / 168);
         }
     } */

    /* .loader-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #345356; z-index: 9999; display: none; align-items: center; justify-content: center; color: #fff;} */

    .loader_title_box{
        display: flex; flex-direction: row; justify-content: center; align-items: center;
        gap: calc(var(--fc-rem) * 2.35); overflow: hidden;
    }
    .animate-text{
        font-family: "norman-variable", sans-serif;
        font-weight: 400;
        font-size:  calc(var(--fc-rem) * 10);
        font-style: normal;
        display: block; position: relative;
        opacity: 0;
    }
    .loader-text{ text-align:center;}
    .mask_01{aspect-ratio:502 / 119; height:  calc(var(--fc-rem) * 10); }
    .mask_02{aspect-ratio:382 / 119; height:  calc(var(--fc-rem) * 10);}
    .animate-text img{height: 100%; width: auto; object-fit: contain; position: absolute;}
    
    @media (max-width: 640px) {
        .loader_title_box{flex-direction: column;  gap: 0 }
    }
/* 進度條 wrapper */
.loader-progress-wrapper {
    width: 40%;
    max-width: 300px;
    height: 2px;
    background: #284749;
    margin: 20px auto 0;
    border-radius: 2px;
    overflow: hidden;
}

/* 進度條本體 */
.loader-progress-bar {
    width: 0%;
    height: 100%;
    background: #c1b092;
    border-radius: 1px;
}
   

       .out_container{ width: 100%; background-color: #345356; display: flex; position: relative;}
       .kv_section {
            display: flex;
            width: calc(100vw * 0.45);
            height: 100vh;
            position: fixed; left: 0;top: 0;
            overflow: hidden;
        }
        .kv_section .kv_title_wrap {
            position: absolute; 
            /* top: 50%; left: 50%;
            transform: translate(-50%, -50%); */
            width: 100%;
        }

        .kv_section .kv_title_wrap::before {
            content:'';
            position: absolute; top: 0; left: 0;
            width: 100%;
            aspect-ratio: 373 / 118;
            background: url(../image/kv_cloude_top.svg)no-repeat;background-position: center;background-size: 100% auto;
        }
        .kv_section .kv_title_wrap::after {
            content:'';
            position: absolute; bottom: 0; left: 0;
            width: 100%;
            aspect-ratio: 373 / 122;
            background: url(../image/kv_cloude_bottom.svg)no-repeat;background-position: center;background-size: 100% auto;
        }
        .kv_section > div {
            width: 50%;
            height: 100%;
            position: absolute;
        }
        .kv_section > div:nth-child(1) {
            width: calc(50% + 10px);
            height: 85vh;
            left: 0; top: 0;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        }
        .kv_section > div:nth-child(2) {
            width: calc(50% + 10px);
            right: 0; top: 0;
        }
        .kv_title_wrap > div{width: 100%; position: relative;z-index: 1; filter: drop-shadow(0px 0px 20px #345356) drop-shadow(0px 0px 20px #345356);}
        .kv_section::after{ 
            content: ''; width: 100%; height: 50vh; 
            background: url(../image/kv_deco_front.svg); background-repeat: no-repeat;
            background-size: 100% auto;background-position: center bottom;
            position: absolute; bottom: 0; left: 0; transform: translateY(10%); z-index: 100;}


        .fv_section img{ width: 100%;}
        main {
            width:calc(100vw * 0.35);
            position: relative;
            transform: translateX(calc(100vw * 0.45));
            filter: drop-shadow(0px 4px 10px #00000049);
            background: #345356; z-index: 1;
        }
        .title_white{ 
            font-family: "norman-variable", sans-serif;
            font-weight: 400;
            font-style: normal;
            text-align: center;
            color: #fff;
            font-size: calc(var(--fc-rem) * 6);
        }
        .title_sub{ 
            font-family: "norman-variable", sans-serif;
            font-weight: 400;
            font-style: normal;
            line-height: 2;
            text-align: center;
            color: #c1b092;
            font-size: calc(var(--fc-rem) * 4);
        }
        .title_sub p{line-height: 1.5;}
        .title_sub_small{ 
            font-family: "noto-serif-jp", serif;
            font-weight: 500;
            font-style: normal;
            line-height: 2;
            text-align: center;
            color: #c1b092;
            font-size: calc(var(--fc-rem) * 1.85);
        }
        .info_detial_item{
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 300;
            font-style: normal;
            font-size: 0.8rem;
            margin-bottom: 15px;
        }
       
       /* @media (max-width: 1440px) {
            :root{
                --fc-rem: calc(var(--fc-vw) * 1 / 168);
            }
            .title_sub{  font-size: calc(var(--fc-rem) * 1.3);}
        } */
       @media (max-width: 1024px) {
            .kv_section {display: none;}
            main { left: 0%; width: calc(calc(100vw / 3) * 2); transform: unset;}
        }
       @media (max-width: 640px) {
            main { left: 50%; width:100%; max-width: 460px; transform: translateX(-50%);}
        }


        /* About section========================= */
        .about_section{padding: 0 ; margin-bottom: 60px; position: relative;}
        .about_section > div{ position: relative; width: 100%;padding: 0 calc((var(--fc-rem) ) * 4); }
        .about_section > div::before{ 
            content: ''; position: absolute; width: 100%;height: 100%; top: 0; left: 0; z-index: -1;
            background: url(../image/deco_about_top.svg)no-repeat; background-size: 100% auto; background-position: center 20%;}
        .about_section::before{ 
            content: ''; width: 100%; height: 100%; 
            position: absolute;top: 0; left: 0;z-index: 10;
        background:url(../image/deco_glitch.svg)no-repeat; background-size: contain; background-position: center;}
        .about_section::after{ 
            content: ''; width: 100%; height: 100%; 
            position: absolute;top: 0; left: 0;z-index: -1;
            background:url(../image/deco_about_bottom.svg)no-repeat; background-size: 100% auto; background-position:left bottom;}
        /* .about_section_inner > div::before{ 
            content: ''; position: absolute; width: 100%;height: 100%; top: 0; left: 0; z-index: -1;
            background: url(../image/deco_about_top.svg)no-repeat; background-size: 100% auto; background-position: center 20%;} */
        /* .about_section_inner::before{
            position: relative; 
            content: ''; display: block; width: 100%; 
            aspect-ratio: 165 / 46;
            background: url(../image/bg_shelter_top.svg) no-repeat; background-size: 100% auto; background-position:  center bottom;
            transform: translateY(1px)
        }
        .about_section_inner::after{
            position: relative; 
            content: ''; display: block; width: 100%; 
            aspect-ratio: 165 / 46;
            background: url(../image/bg_shelter_btm.svg) no-repeat; background-size: 100% auto; background-position:  center top;} */
        .about_section_inner article{
            position: relative;
            padding: 0px calc((var(--fc-rem) ) * 4);
            /* font-family: "noto-serif", serif;
            font-weight: 500;
            font-size: 1.5rem; */
            background: url(../image/bg_shelter_middle.svg);
            background-repeat:repeat-y; background-size: 100% auto; background-position: center;
            text-align: center;
        }
        .about_section_inner article p{
            margin-bottom: calc((var(--fc-rem) ) * 3);
            font-family:  "noto-serif-jp", sans-serif;
            font-style: normal;
            font-weight: 600;
            font-size: calc((var(--fc-rem) ) * 2.25);
            line-height: 1.5;
            color: #345356;
            /* font-variation-settings: "CAPH" 100; */
        }
        .about_section_inner article p:last-of-type{margin-bottom: 0px;}

        .shelter{width: 100%; line-height: 0; position: relative;}
        .shelter.shelter_top{transform: translateY(1px); background:url(../image/bg_shelter_top.svg) ; background-size: 100% auto; background-repeat:no-repeat; background-position: center top;}
        .shelter.shelter_bottom{ transform: translateY(-1px);background:url(../image/bg_shelter_btm.svg) ; background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom;}
        .shelter img{width: 100%; height: auto; visibility: hidden;}
        @media (max-width: 640px) {
            .about_section{padding: 0; margin-bottom:  calc((var(--fc-rem) ) * 3);}
            .about_section_inner article p{ font-size: calc((var(--fc-rem) ) * 1.8); }
        }
        @media (max-width: 480px) {
            .about_section_inner article p{ font-size: calc((var(--fc-rem) ) * 2.25); }
        }
       
        

        /* intro section ============================= */
        .intro_section{padding:30px  calc((var(--fc-rem) ) * 4); position: relative;}
        .intro_section h3{padding:0px  calc((var(--fc-rem) ) * 5); margin-bottom: 30px; text-align: center;}
        .intro_section p{
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 400;
            font-style: normal;
            font-size: calc(var(--fc-rem) * 1.4);
            color: #c1b092;
            text-align: center;
            margin-bottom: 10px; }
        .intro_tng_section{ padding: 30px calc((var(--fc-rem) ) * 4); position: relative;}
        .intro_tng_section::after{ 
            content:''; width: 100%; height: 5px; 
            background: url(../image/deco_dots.svg) no-repeat; background-size: auto 100%; background-position: center center; position: absolute; 
            bottom: 0; left:50%;transform: translateX(-50%);
        }
        .intro_tng_section p{
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 500;
            font-style: normal;
            font-size: calc((var(--fc-rem) ) * 1.4);
            color: #c1b092;
            text-align: center;
            margin-bottom: 10px; 
            line-height: 1.75;
        }
        .intro_tng_section .title_sub{
            margin-bottom: 30px; 
            font-size: calc(var(--fc-rem) * 4);
        }
        .intro_tng_section .title_sub span{ 
            padding-bottom: 7px;border-bottom: 2px solid #32dfe3;
         }
       @media (max-width: 1024px) {
            .intro_tng_section p{
                font-size: calc((var(--fc-rem) ) * 1.3);
            }
        }
        @media (min-width: 640px) and (max-width: 461px) {
            .intro_tng_section p{
                font-size: calc((var(--fc-rem) ) * 1.3);
            }
        }
       @media (max-width: 460px) {
            .intro_section h3{padding:0px  calc((var(--fc-rem) ) * 4); margin-bottom: calc((var(--fc-rem) ) * 4); }
            .intro_tng_section p{
                font-size: calc((var(--fc-rem) ) * 1.3);
            }

        .intro_tng_section .title_sub{
            margin-bottom: 30px; 
            font-size: calc(var(--fc-rem) * 3.5);
        }
        }

        /* Raden section ============================= */
        .raden_section{ padding: 30px calc((var(--fc-rem) ) * 4); position: relative;}
        .raden_section_inner{ display: flex; flex-direction: row; justify-content: space-between; gap: 20px;}
        .raden_section_inner > div{width:calc(100% / 3);}
        .raden_section_inner > article{width:calc(calc(100% / 3) * 2);}
        .raden_section_inner > article p{
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 500;
            font-style: normal;
            font-size:  calc((var(--fc-rem) ) * 1.2);
            color: #c1b092;line-height: 1.75;margin-bottom: 15px;}
        .raden_section h4{
            display: flex; flex-direction: row; justify-content:flex-start; align-items: flex-end; gap: 10px; margin-bottom: 30px;
            position: relative; 
        }
        .raden_section h4::after{ content: ''; width: calc((var(--fc-rem) ) * 31); height:2px; background: #32dfe3; position: absolute; bottom: -12px; left:0%; }
        .raden_section h4::before{ 
            content: ''; width: calc((var(--fc-rem) ) * 5.25);
            aspect-ratio: 1 / 1; 
            background: url(../image/logo_raden.svg) no-repeat; background-size: 100% auto; position: absolute; 
            top:calc((var(--fc-rem) ) * -5.25); left:0%;

         }
        .raden_section h4 p{margin-bottom: 0; line-height: 1.2;}
        .raden_section .name_en{ font-family: "norman-variable", sans-serif;
            font-weight: 400;
            font-style: normal;
            text-align: center;
            color: #c1b092;
            font-size:calc((var(--fc-rem) ) * 3.5);}
        .raden_section .name_jp{
            font-size:calc((var(--fc-rem) ) * 1.5);
            font-family: "noto-serif-jp", serif;
            font-weight: 500;}
       .raden_section::after{ 
            content:''; width: 100%; height: 5px; 
            background: url(../image/deco_dots.svg) no-repeat; background-size: auto 100%; background-position: center center; position: absolute; 
            bottom: 0; left:50%;transform: translateX(-50%);
        }
        .raden_section_inner > div img{transform: scale(1.25) translateY(3%);}
@media screen and (max-width: 1024px) {
        .raden_section_inner > div img{transform: scale(1)  translateY(0%);}
        .raden_section_inner > article p{
            font-size:  calc((var(--fc-rem) ) * 1.3);}

}

@media screen and (max-width: 640px) {
  .raden_section_inner{flex-direction: column;gap: 10px;}
        .raden_section_inner > div{width:100%;text-align: center;}
        .raden_section_inner > article{width:100%;}
        .raden_section_inner > div img{ width: 70%; position: relative; left: 50%; transform:scale(1)  translateY(0%) translateX(-50%);}
        .raden_section .name_jp{font-size:calc((var(--fc-rem) ) * 2);}
        .raden_section h4::after{ content: ''; width: calc((var(--fc-rem) ) * 32.5 + 10px);  }
        .raden_section_inner > article p{font-size:  calc((var(--fc-rem) ) * 1.3); }
}

/* header menu ============================= */

header {
  width: calc(100vw - 690px);
  height: 100%;
  min-height: 640px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.header-menu {
  display: none;
  position: fixed;
  top: calc((var(--fc-rem) ) * 1) ;
  right: calc((var(--fc-rem) ) * 1);
  z-index: 500;
  width: 32px;
  height: 32px;
  background-color: #345356;
  /* border-left: 1px solid #c1b092;
  border-bottom: 1px solid #c1b092; */
  border: 1px solid #c1b092;
  cursor: pointer;
  transition: 0.3s ease;
  /* opacity: 0;
  visibility: hidden; */
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
}
@media screen and (max-width: 640px) {
  .header-menu { display: block;}
  #header-menu.is-hidden { opacity: 0;}
}
@media screen and (max-width: 480px) {
  .header-menu { 
    width:calc((var(--fc-rem) ) * 4) ;
    height:calc((var(--fc-rem) ) * 4) ;
  }
}
#header-menu.start {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 640px) {
  #header-menu.start.is-hidden { opacity: 0; }
}
#header-menu.end {transition: 0.3s ease;}
#header-menu a {
  display: block;
  position: absolute;
  width: 18px;
  height: 50%;
  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: #c1b092;
  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: 50%; transform: translateY(-50%);}
#header-menu a span.fr:nth-child(3) { bottom: 0;}
#header-menu.is-active a span:nth-of-type(1) { transform: translateY(7px) rotate(-405deg);}
#header-menu.is-active a span:nth-of-type(2) { opacity: 0; transform: translateX(7px);}
#header-menu.is-active a span:nth-of-type(3) { transform:translateX(0px) translateY(-7px) rotate(405deg);}
@media screen and (max-width: 640px) {
  #gnavi.is-hidden { opacity: 0;}
  #gnavi.is-active { opacity: 1;}
}
/* NAV============================= */
    /* nav.start { opacity: 1; visibility: visible;}
    nav.end { transition: 0.3s ease;  opacity: 1; } */
    .nav_container{
        display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: fixed; top: 0; right: 0; width: calc(100vw * 0.2);
        background: url(../image/nav_bg_L.svg)no-repeat; background-size: 110% auto; background-position: right bottom;z-index: 0;
     }
     .nav_container.is-active{pointer-events: all;}
    nav {position: relative; }
    nav ul{position: relative;padding: calc((var(--fc-rem) ) * 2.75) 0;}
    nav li {  text-align: center; margin-bottom: 15px;}
    nav li a{ 
            font-family: "norman-variable", sans-serif;
            /* font-variation-settings: "wght" 400; */
            font-weight: 400;
            font-style: normal;
            text-align: center;
            color: #beb093;
            font-size: calc((var(--fc-rem) ) * 2.75);
        }
        nav li a:hover{ color: #fff; transition: all 0.3s;}
        nav::before{ 
            content: '';width: 100%; height: 100px;
            background: url(../image/nav_deco_top.svg)no-repeat; background-size: 80% auto;background-position:top center; 
            position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        }
        nav::after{ 
            content: '';width: 100%; height: 100px;
            background: url(../image/nav_deco_bottom.svg)no-repeat; background-size: 80% auto;background-position:bottom center; 
            position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none;
        }
        nav ul::before{
            width: 50%; height: 100%; border: 1px solid #beb093; content: ''; position: absolute; 
            top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
            border-radius: 50%; z-index: -1; background: #345356;
        }
        .lang_container{margin-bottom: 30px; padding: 30px 20px 0 20px;}
        .lang_container ul{display: flex; justify-content: center; gap: 10px;}
        /* .lang_container ul li:nth-last-of-type(1){margin-left: 10px;} */
        .lang_container ul li a{ position: relative; display: block; line-height: 0;}
        .lang_container ul img{width:calc((var(--fc-rem) ) * 6);}
        .lang_container ul img.lang_light{width:100%; position: absolute;top: 0; left: 0; opacity: 0; transition: all 0.3s;}
        /* .lang_container ul li a:hover img.lang_light,.lang_container ul li a:focus img.lang_light{ opacity: 1;transition: all 0.3s;} */
        .lang_container ul li a:focus img.lang_light {  opacity: 1; transition: all 0.3s;}
        @media (hover: hover) {
            .lang_container ul li a:hover img.lang_light { opacity: 1;  transition: all 0.3s; }
        }
        .nav_copyright{padding: 0 20px 20px 20px; text-align: center;}
        .nav_copyright img{width: 80%; margin: auto;}
       @media (max-width: 1024px) {
            .nav_container{
                width:calc(100vw / 3); 
                justify-content: center;
            }
           .nav_copyright{margin-top: 60px;}
            nav li a{  font-size: calc((var(--fc-rem) ) * 3); }
        }
       @media (max-width: 640px) {
            .nav_container{
                width:100vw; height: 100vh; height: 100dvh;
                justify-content: center;
                align-items: center;
                background: #345356;
                position: fixed;top: 0; left: 0; opacity: 0.2;
                opacity: 0;
                pointer-events: none;z-index: 10;
            }
            nav{width: 80vw;}
            .nav_copyright{width: 60vw;}
            nav li a{  font-size: calc((var(--fc-rem) ) * 2.5); }
        nav ul::before{ width: 40%; content: '';  }
        }
       @media (max-width: 480px) {
            nav li a{  font-size: calc(calc(100vh / 100) * 3.5); }
            nav ul{position: relative;padding: calc(calc(100vh / 100) * 4) 0;}
            nav ul::before{ width: 50%; content: '';  }
            nav::before{content: ''; transform:  translate(-50%,-20%);}
        nav::after{ 
            content: '';transform:  translate(-50%,20%); 
        }
        }
/* Hero Panels---------------------------- */
    .hero{height: 90%;
	    /* background: #fff; */
	    overflow: hidden;
	    box-sizing: border-box;
	    position: relative;
	    z-index: 1;
        padding-right: 30px;
    }
    .hero-panels { height: 100%;position: relative; }
    .hero-panels-sp{ display: none; }

@media screen and (max-width: 812px) {
	.hero-panels:before {
		content: "";
		display: block;
		padding-top: 114.6666667%;
	}
}
@media screen and (max-width: 650px) {
	.hero {height:100vh;}
	.hero-panels { display: none;}
	.hero-panels-sp{ 
		height: 100%;
		position: relative;
		display: block;
		overflow: hidden;
	 }
	 .hero-panels-sp img{ position: absolute; bottom: 5%; width: 100%;height: 100%; object-fit: cover; }
}
/* @media screen and (max-width: 500px) {
	.hero-panels {
		height: 90%;
	}
} */
@media screen and (max-width: 375px) {
	.hero {height: 100%;}
}
/* Hero Panel Background
---------------------------- */
.hero-panel-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.hero-panel-bg div {
	width:  0%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	opacity: 1;
	/* transform-origin: center; */
	/* transform: scaleY(0); */
	transition: opacity 0.6s, height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	background-size:auto 100%; background-repeat: no-repeat;
    
}
.hero-panel-bg div:nth-child(1) {
	background:url(../image/kv_paint_01.webp);
    right:calc(calc(100% / 3) * 2);
	background-size:10vw auto; background-repeat: no-repeat; background-position: center;
}
.hero-panel-bg div:nth-child(2) {
	background:url(../image/kv_paint_02.webp);
    right:calc(100% / 3);
	background-size:10vw auto; background-repeat: no-repeat; background-position: center;
}
.hero-panel-bg div:nth-child(3) {
	background: url(../image/kv_paint_03.webp);
    right: 0;
	background-size:10vw auto; background-repeat: no-repeat; background-position: center;   
}
/* Loaded */
.loaded .hero-panel-bg div {
	/* width: 0; */
	height: 100%;
	opacity: 1;
	animation: growHeight 1s forwards;
}
.loaded .hero-panel-bg div:nth-child(1) { transition-delay: 0s; animation-delay: 0s;}
.loaded .hero-panel-bg div:nth-child(2) { transition-delay: 0.2s; animation-delay: 0.1s;}
.loaded .hero-panel-bg div:nth-child(3) { transition-delay: 0.4s; animation-delay: 0.2s;}
@keyframes growHeight {
	from {
		width: calc(0% / 3);
		filter: blur(1.5rem);
		/* transform-origin: center left; */
	}
	to {
		width:calc(calc(calc(100% / 3)) - 10px);   
		filter: blur(0);
		/* transform-origin: center left; */
	}
}

/* Hero Panel
---------------------------- */
.hero-panel {
	position: absolute;
	top: 0;
	left: 10px;
	right: 0;
	bottom: 0;
}
.hero-panel div {
	width: 0;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.3s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	filter: blur(2rem);
}
.hero-panel div:nth-child(1) {left:0;}
.hero-panel div:nth-child(2) {left:calc(calc(100% / 3) + 3px);}
.hero-panel div:nth-child(3) {left:calc(calc(100% / 3) * 2 + 6px);}

/* Panel Visible */
.hero-panel-visible div {
	width:calc(33.3333% - 5px)  ; 
	opacity: 1;
	filter: blur(0);
}
.hero-panel-visible div:nth-child(1) { transition-delay: 0s; }
.hero-panel-visible div:nth-child(2) { transition-delay: 0.1s; }
.hero-panel-visible div:nth-child(3) { transition-delay: 0.2s; }

/* Hero Panel Image
---------------------------- */
.hero-panel div:before {
	content: "";
	display: block;
	width: 0%;
	height: 100%;
	background-repeat: no-repeat !important;
	background-position: top center;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	-webkit-transform: translate3d(-12%, 0, 0);
	transform: translate3d(-12%, 0, 0);
	transition: all 0.5s;
    background-repeat: no-repeat;
}

/* .hero-panel-01{position: relative;} */


/* Panel Visible */
.hero-panel-visible div:before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
    background-repeat: no-repeat;
    width: 100%;
}
.hero-panel-visible div:nth-child(1):before { transition-delay: 0s; }
.hero-panel-visible div:nth-child(2):before { transition-delay: 0.2s; }
.hero-panel-visible div:nth-child(3):before { transition-delay: 0.4s; }

/* Each */
.hero-panel-02 div:nth-child(1):before {
	background: url(../image/kv_raden_01_L.webp),#345356;
	background-size:auto 115vh;
    background-position:right center;
}
.hero-panel-02 div:nth-child(2):before {
	background: url(../image/kv_raden_02_L.webp),#345356;
	background-size:auto 115vh;
    background-position:center;
}
.hero-panel-02 div:nth-child(3):before {
	background: url(../image/kv_raden_03_L.webp),#345356;
	background-size:auto 115vh;
    background-position:center;
}
/* ====================== */
.hero-panel-01 div:nth-child(1):before {
	background-image: url(../image/kv_work_01_L.webp);
	background-size:auto 115vh;
    background-position:center;
}
.hero-panel-01 div:nth-child(2):before {
	background-image: url(../image/kv_work_02_L.webp);
	background-size:auto 115vh;
    background-position:center;
}
.hero-panel-01 div:nth-child(3):before {
	background-image: url(../image/kv_work_03_L.webp);
	background-size:auto 115vh;
    background-position:center;
}

@media screen and (max-width: 812px) {
	.hero-panel-01 div:nth-child(1):before {
        background-image: url(../image/kv_paint_01.webp);
	    background-size:100% 100%;
        background-position:center;
	}
	.hero-panel-01 div:nth-child(2):before {
        background-image: url(../image/kv_paint_01.webp);
	    background-size:100% 100%;
        background-position:center;
	}
	.hero-panel-01 div:nth-child(3):before {
        background-image: url(../image/kv_paint_01.webp);
	    background-size:100% 100%;
        background-position:center;
	}

/* ====================== */
	.hero-panel-02 div:nth-child(1):before {
        background-image: url(../image/kv_rd_01.webp);
	    background-size:100% 100%;
        background-position:center;
	}
	.hero-panel-02 div:nth-child(2):before {
        background-image: url(../image/kv_rd_02.webp);
	    background-size:100% 100%;
        background-position:center;
	}
	.hero-panel-02 div:nth-child(3):before {
        background-image: url(../image/kv_rd_03.webp);
	    background-size:100% 100%;
        background-position:center;
	}
}

     /* COLLECTION============================= */
       .collect_section{padding-top: calc((var(--fc-rem) ) * 4); position: relative;}
       .collect_section::after{
            content:''; width: 100%; height: 5px; 
            background: url(../image/deco_dots.svg) no-repeat; background-size: auto 100%; background-position: center center; position: absolute; 
            bottom: 0; left:50%;transform: translate(-50% ,0) ;
       }
        .accordion_container {
          margin: 0 auto;
          padding: 20px 30px;
          width: 100%;
        }
        .accordion .accordion-item {
          padding: 0px 20px 0px;
          position: relative; 
          width: 100%;
          margin-bottom: calc((var(--fc-rem) ) * 6) ;
        }
        .accordion .accordion-content p.works_description{ 
            color: #c1b092; 
            /* font-family: "noto-sans", sans-serif; */
            font-family: "noto-serif-en", serif;
            font-weight: 400;
            font-style: normal;
            font-size: calc((var(--fc-rem) ) * 1) ;
            text-align: center;
        }
        .accordion .accordion-content .italic{ 
            color: #c1b092; 
            font-family: "noto-serif-en", sans-serif;
            font-style: italic;
        }
        .accordion .accordion-content .main_article .italic{ 
            color: #c1b092; 
            font-family: "noto-serif-jp", serif;
            font-style: italic;
        }
        .works_wrap{ padding: 0 10px; }
        .main_article{ padding: 0 20px; }
        .raden_frame{position: relative; padding: 0 20px;}
        .raden_frame > div{ padding: 10px 20px 10px;background: url(../image/frame_raden_middle.svg) ;background-repeat: repeat-y; background-size: 100% auto; background-position:center center; }
         .accordion .accordion-content .raden_frame > div p{ 
            text-align: center; 
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 300;
            font-style: normal;
            font-size:calc((var(--fc-rem) ) * 1.1) ;
            line-height: 1.75;
            color: #fff; }
         .raden_frame > div p:first-of-type{ margin-top: 0px; }
         .raden_frame > div p:last-of-type{ margin-bottom: 0px; }
        .raden_frame::before{
            content: '';
            display: block;
            width: 100%;
            aspect-ratio:44 / 7;
            background: url(../image/frame_raden_top.svg) no-repeat; background-size: 100% auto; background-position:center bottom;
            position: relative; opacity: 1; pointer-events: none;
        }
        .raden_frame::after{
            content: '';
            display: block;
            width: 100%;
            aspect-ratio:44 / 7;
            background: url(../image/frame_raden_btm.svg) no-repeat; background-size: 100% auto; background-position:center top;
            position: relative; opacity: 1; pointer-events: none;
        }
        .accordion .accordion-content .raden_frame .italic{ color: #fff; font-family: "noto-serif", serif; font-style: italic;}
        .portrait_wrap {background: url(../image/bg_mt_content.svg) no-repeat; background-size: 100% auto; background-position:center bottom;}
        .portrait_wrap > div{ padding:0 30px 0px; background: url(../image/bg_cloud_content.svg) no-repeat; background-size: 100% auto; background-position:center center;}
        .portrait_wrap img{ width: 100%;}
        .accordion .accordion-content .main_article p{
            color: #c1b092; 
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 500;
            font-style: normal;
            font-size: calc((var(--fc-rem) ) * 1.2);
            text-align: center;
        }
        .lineup_section .accordion .accordion-item{ padding: 0px 20px 0px; margin-bottom: 0;}


        @media screen and (max-width: 640px) {
            .lineup_section .accordion .accordion-item{ padding: 0px 0px 0px;}
        }
        @media screen and (max-width: 480px) {
         .accordion .accordion-content .raden_frame > div p{font-size:calc((var(--fc-rem) ) * 1.07) ; }
        }
        .accordion-item-inner{padding: 0px 0px 0px; border-left: 1px solid #beb093;  border-right: 1px solid #beb093;}
        .lineup_section .accordion-item-inner{
            padding: calc((var(--fc-rem) ) * 4); 
            padding-bottom: 0; 
            border-left: unset;  border-right: unset;
        }
        .accordion .accordion-item::before {
          content: '';
          position: relative;
          display: block;
          width:calc(100% - 30px) ;
          width: 100%; 
          aspect-ratio: 57 / 11;
          z-index: -1;
          background: url(../image/deco_collect_top.svg) no-repeat; background-size: 100% auto; background-position: top center;
        }
        .accordion .accordion-item::after {
          content: '';
          position: relative;
          display: block;
          /* bottom: 0%;
          left: 50%;
          transform: translateX(-50%); */
          width: 100%; 
          aspect-ratio: 57 / 11;
          z-index: -1;
          background: url(../image/deco_collect_bottom.svg) no-repeat; background-size: 100% auto; background-position: bottom center;
        }
        .lineup_section .accordion .accordion-item::before, .lineup_section .accordion .accordion-item::after{  display: none;}
        .accordion button {
          position: relative;
          display: block;
          text-align: left;
          width: 100%;
          padding: 0em 0 0;
          color: #7288a2;
          font-size: 1.15rem;
          font-weight: 400;
          border: none;
          background: none;
          outline: none;
          text-align: center;
        }
        .collect_section .accordion button {
            transform: translateY(40%);
        }

        .accordion button:hover, .accordion button:focus {
          cursor: pointer;
          color: #03b5d2;
        }
        .accordion button:hover::after, .accordion button:focus::after {
          cursor: pointer;
          color: #03b5d2;
          border: 1px solid #03b5d2;
        }
        .accordion button .accordion-title {
          padding: 0;
        }
        .accordion button img{ width: calc((var(--fc-rem) ) * 15); }
        .accordion button .icon {
          display: inline-block;
          position: absolute;
          top: 18px;
          right: 0;
          width: 22px;
          height: 22px;
          border: 1px solid;
          border-radius: 22px;
        }
        .accordion button .icon::before {
          display: block;
          position: absolute;
          content: "";
          top: 9px;
          left: 5px;
          width: 10px;
          height: 2px;
          background: currentColor;
        }
        .accordion button .icon::after {
          display: block;
          position: absolute;
          content: "";
          top: 5px;
          left: 9px;
          width: 2px;
          height: 10px;
          background: currentColor;
        }
        .accordion button[aria-expanded=true] { color: #03b5d2;}
        .accordion button[aria-expanded=true] .icon::after { width: 0; }
        .accordion button[aria-expanded=true] a::after { width: 0; }
        /* .accordion-item[expand_outer=true] .accordion-content {
          opacity: 1;
          max-height: 9em;
          transition: all 200ms ease;
          position: relative;
          overflow: hidden; 
          transition: all 0.4s ease;
        } */
        .accordion .accordion-content {
          /* opacity: 0;
          max-height: 0; */
          overflow: hidden;
          transition: opacity 200ms ease, max-height 200ms ease;
          will-change: opacity, max-height;
          position: relative; 
        }
        .display_wrap{ 
            position: absolute; top: 0; left: 0; width: 100%; opacity: 0; animation: all 1s ease; animation-delay: 2s;
        }
        .accordion-item[expand_outer="true"]  .display_wrap{  position: relative;  animation: boxIn 2s ease forwards; animation-delay: 0.4s;}
        .accordion button span{position: relative; display: inline-block;}
        .accordion button span a{ display:flex;}
        .accordion button span::before{
            content: '';
            width: 100%;
            height: 100%;
            background: url(../image/btn_close_dark.svg) no-repeat; background-size: 100% auto; background-position: center;
            position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.3s ease; pointer-events: none;
        }
        .accordion-item[expand_outer="true"] button span::before{ opacity: 1; }
        @keyframes boxIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
          }
        .accordion-cover {
          opacity: 1;
          transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease;
          max-height: 500px; /* 給一個足夠大的預估高度 */
        }
        .accordion-cover img{width: 100%;}
        .collect_section .accordion-cover img{transform: scale(1.1);}

        /* 1. Cover 的淡出與不佔位 */
        .accordion-cover {
            opacity: 1;
            max-height: 1000px; /* 給一個足夠大的值 */
            transition: opacity 0.3s ease, max-height 0.5s ease, visibility 0.3s;
        }
        
        .accordion-item[expand_outer="true"] .accordion-cover:not(.cover_hold) {
            animation: coverOut 0.5s linear forwards;
            max-height: 0;
            pointer-events: none; /* 防止隱藏後還能被點擊 */
            margin: 0;
        }
        
        /* 2. Content 的動態高度動畫 (關鍵) */
        .accordion-content-wrapper {
            display: grid;
            grid-template-rows: 0fr; /* 初始高度為 0 */
            transition: grid-template-rows 0.5s ease;
            overflow: hidden;
        }
        
        .accordion-item[expand_outer="true"] .accordion-content-wrapper {
            grid-template-rows: 1fr; /* 展開為內容的真實高度 */
        }
        
        .accordion-content {
            min-height: 0; /* 必須設定，否則 grid 1fr 效果會失效 */
        }
   
        .lineup_section .accordion-item-inner{ 
            background:url(../image/special_frame_middle.svg) ,#fff;
            background-repeat: repeat-y; background-size: 100% auto; background-position: center;
        }

        /* .accordion-item[expand_outer=true] .accordion-cover img{ display: none; } */
        .accordion-item[expand_outer="true"] .accordion-cover:not(.cover_hold) {
          animation: coverOut 0.5s linear forwards;
          max-height: 0;
          margin: 0;
          pointer-events: none; /* 防止隱藏後還能被點擊 */
          /* visibility: hidden; */
        }
         @keyframes coverOut {
            0% { opacity: 1; }
            100% { opacity: 0; }
          }
        .accordion .accordion-content p {
          font-size: calc((var(--fc-rem) ) * 1);
          font-weight: 500;
          margin: 2em 0;
        }
        .accordion-item .works-name{ 
            text-align: center;
            color: #c1b092;
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 700;
            font-style: normal;
            margin-bottom: calc((var(--fc-rem) ) * 3.5);
        }
        .accordion-item .works-name h3{ font-size: calc((var(--fc-rem) ) * 2.25);margin-bottom: 5px; padding: 0 calc((var(--fc-rem) ) * 3.5);}
        .accordion-item .works-name p{ font-size:calc((var(--fc-rem) ) * 1.25); font-weight: 500;}


        @media screen and (max-width: 650px) {
            .accordion_container {
              padding: 20px 30px;
            }
            .accordion .accordion-item {
              padding: 0px;
            }
            .accordion-item .works-name h3{ padding: 0 20px;}
        }

        /* lineup =================*/
        .lineup_section .accordion_container{ padding: 0 30px 0px; }
        .lineup_section .accordion-item-inner{ 
            padding: calc((var(--fc-rem) ) * 4); 
            padding-bottom: calc((var(--fc-rem) ) * 5); 
        }
        
        .lineup_section .accordion .accordion-content p {
            font-size: calc((var(--fc-rem) ) * 1.35);
        }
        .lineup_section .accordion button {
          position: relative;
          display: block;
          padding: 0;
          transform: translateY(-50%);
        }

        .btn_wrap{display: flex; justify-content: end;align-items: center;margin-bottom: 20px; padding-right: 5px;}
        .btn_wrap a{
            display: flex; position: relative; background-color: #345356; 
            color: #c1b092; border: 2px solid #c1b092; padding: 2px 30px 2px 20px; border-radius: 50px;
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 500;
            font-style: normal;
            font-size: 1rem;
            transition: all 0.3s ease;
        } 
        .btn_wrap a::before{
            content: '';display: block; position: absolute; right: 0%; top: 25%; 
            transform: translateX(20%);
            width: 20%;aspect-ratio: 1 / 1;
            background: url(../image/btn_deco_finger_light.svg)no-repeat; 
            background-size: 100% auto;background-position: center;
            opacity: 1;
            transition: all 0.3s ease;
        }
        .btn_wrap a::after{
            content: '';display: block; position: absolute; right: 0%; top: 25%; 
            transform: translateX(20%);
            width: 20%;aspect-ratio: 1 / 1;
            background: url(../image/btn_deco_finger_dark.svg)no-repeat; 
            background-size: 100% auto;background-position: center;
            opacity: 0;
            transition: all 0.3s ease;
        }
        .btn_wrap a:hover{
            background-color: #c1b092; 
            color: #345356; border: 2px solid #345356;
            transition: all 0.3s ease;
        }
        .btn_wrap a:hover::after{ opacity: 1; }

        /* STREAM========================= */
        .stream_section{padding:calc((var(--fc-rem)) * 4);}
        .stream_section > div{padding: 0px 20px;}
        .pr_wrap{ display: flex; flex-direction: row;justify-content: center; align-items: center; gap:calc((var(--fc-rem)) * 2);}
        .pr_icon {width: calc((var(--fc-rem)) * 10);}
        .pr_icon img{ display:block ;width: 100%;}
        .pr_info p{
            white-space:nowrap; text-align: left;color: #c1b092;
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 500;
            font-style: normal;
        }
        .pr_info p.pr_time{font-size: calc((var(--fc-rem)) * 3);}
        .pr_info p.pr_time span{ font-size: calc((var(--fc-rem)) * 1.5);font-weight: 500;}
        .pr_info p.pr_time_sub{font-size: calc((var(--fc-rem)) * 1.75);font-weight: 400; }

        @media screen and (max-width: 640px) {
           .stream_section > div{padding:0px;}
        }


        /* SPECIAL========================= */
        .special_section > div > div{ padding: 0px calc((var(--fc-rem)) * 4);  }
        .special_section p{  
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 400;  font-style: normal;font-size:calc((var(--fc-rem) ) * 1.25); text-align: center; color: #fff; 
        }
        .special_item{padding-top: calc((var(--fc-rem)) * 4);margin-bottom: calc((var(--fc-rem)) * 4) ; position: relative;}
        .special_item:first-of-type{padding-top: calc((var(--fc-rem)) * 2);}
        .special_item::after{
            content:''; width: 100%; height: 5px; 
            background: url(../image/deco_dots.svg) no-repeat; background-size: auto 100%; background-position: center center; position: absolute; 
            bottom: 0; left:50%;transform: translate(-50% , calc((var(--fc-rem)) * 4 + 2px) );}
        .special_item:last-of-type::after{ content:''; display: none;}


        /* ========================= */
         .accordion .slick-slide{padding: 5px;}
         .accordion button.slick-prev{position: absolute; left: -10px; top: 50%; transform: translateY(-50%); z-index: 10; width: 10px; color: transparent;}
         .accordion button.slick-next{position: absolute; right: 0px; top: 50%; transform: translateY(-50%); z-index: 10; width: 10px; color: transparent;}
         .slick-next:before{content:'▶';color: #9fa0a0; font-size: 20px; font-family: "noto-serif-jp", serif !important;}
         .slick-prev:before{content:'◀';color: #9fa0a0; font-size: 20px; font-family: "noto-serif-jp", serif !important;}
         .slick-dots li {margin: 0px;}
         .slick-dots li button:before{font-size: 30px; font-family: "noto-serif-jp", serif; font-weight: 600;}
         .slick-dots li.slick-active button:before { opacity: 1; color: #345356;}
        /* attention========================= */
        .atteneion_section{padding: 20px calc((var(--fc-rem)) * 4);}
        .atteneion_section li{
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
        font-weight: 400;  font-style: normal;font-size: calc((var(--fc-rem) ) * 1.25); color: #c1b092; padding-bottom:calc((var(--fc-rem)) * 1.25);}
        .atteneion_section h4{ text-align: left; font-size: calc((var(--fc-rem)) * 2.75);}

        /* Offical Site========================= */
        .offical_section{padding: 0 50px; margin-bottom:calc((var(--fc-rem)) * 5);}
         .offical_section_inner{
            position: relative;
            margin-top: calc((var(--fc-rem)) * 4) 0 ;}
        /* .offical_section_inner::before{
            position: relative; 
            content: ''; display: block; width: 100%; 
            aspect-ratio: 165 / 46;
            background: url(../image/bg_shelter_top.svg) no-repeat; background-size: 100% auto; background-position:  center bottom;
            transform: translateY(1px);
        }
        .offical_section_inner::after{
            position: relative; 
            content: ''; display: block; width: 100%; 
            aspect-ratio: 165 / 46;
            background: url(../image/bg_shelter_btm.svg) no-repeat; background-size: 100% auto; background-position:  center top;
            transform: translateY(-1px);
        } */
        .offical_section_inner article{
            position: relative;
            padding: 15px 40px;
            /* font-family: "noto-serif", serif; */
            font-family: "noto-serif-jp", serif;
            font-weight: 500;
            font-style: normal;
            font-size: 0.8rem;
            color: #345356;
            background: url(../image/bg_shelter_middle.svg);
            background-repeat:repeat-y; background-size: 100% auto; background-position: center;
        }
        .offical_section_inner article::before{
            position: absolute; top: 0; left: 0; right: 0;
            content: ''; display: block; width: 100%; 
            aspect-ratio: 165 / 28;
            background: url(../image/deco_shelter_top.svg) no-repeat; background-size: 100% 100%; background-position: top center;
            transform: translateY(-100%);
        }
        .offical_section_inner article::after{
            position: absolute; bottom: 0; left: 0; right: 0;
            content: ''; display: block; width: 100%; 
            aspect-ratio: 165 / 28;
            background: url(../image/deco_shelter_btm.svg) no-repeat; background-size: 100% 100%; background-position: top center;
            transform: translateY(100%);z-index: 10; pointer-events: none;
        }
        .offical_section_inner article ul{
            padding: 20px 30px 0;
            text-align: center;
        }
        .offical_section article > div{ display: flex; justify-content: center; gap: 20px; padding: 0 20px; }
        .offical_section article > div a{ display: block; line-height: 0; position: relative;}
        .offical_section article > div a:first-of-type::before,.offical_section article > div a:last-of-type::before{ 
            opacity: 0; transition: all 0.3s ease;pointer-events: none;content: ''; 
         }
        .offical_section article > div a:first-of-type:hover::before{ 
            content: ''; width: 100%; aspect-ratio: 1 / 1; position: absolute; top: 0; left: 0;
            background: url(../image/btn_store_jp_dark.svg) no-repeat; background-size: 100% auto; background-position: center;
            opacity: 1; transition: all 0.3s ease;
         }
        .offical_section article > div a:last-of-type:hover::before{ 
            content: ''; width: 100%; aspect-ratio: 1 / 1; position: absolute; top: 0; left: 0;
            background: url(../image/btn_store_en_dark.svg) no-repeat; background-size: 100% auto; background-position: center;
            opacity: 1; transition: all 0.3s ease;
         }

           .offical_section_inner article ul li{ font-size:calc((var(--fc-rem)) * 1.35) ;margin-bottom: 10px; font-weight: 500;}
           .offical_section_inner article ul li:last-of-type{ margin-bottom: 0px;}
        @media screen and (max-width: 1200px) {
            .offical_section_inner article{padding: 15px 30px;}
           .offical_section article > div{ padding: 0 0px;gap: 15px; }
           .offical_section_inner article ul{ padding: 20px 0px 0;}
        }
        @media screen and (max-width: 1024px) {
            .offical_section_inner article{padding: 20px 60px;}
           .offical_section article > div{ padding: 0 30px;gap: 20px; }
           .offical_section_inner article ul{ padding: 20px 30px 0;}
        }
        @media screen and (max-width: 812px) {
            .offical_section_inner article{padding: 20px 40px;}
           .offical_section article > div{ padding: 0 0px;gap: 20px; }
           .offical_section_inner article ul{ padding: 20px 0px 0;}
        }
        @media screen and (max-width: 460px) {
            .offical_section{padding: 0 30px;}
            .offical_section_inner article{padding: 15px 30px;}
           .offical_section article > div{ padding: 0 0px;gap: 15px; }
           .offical_section_inner article ul{ padding: 20px 0px 0;}
        }


        /* SNS=================================== */
        .sns_share{ 
            padding: 0px 60px 30px; 
            padding-top: calc((var(--fc-rem)) * 8);
            position: relative;
        }
        .icon_sns { text-align: center; margin-bottom: 20px; display: flex;flex-direction: row; 
            justify-content: center; align-items: center; gap: calc((var(--fc-rem)) * 1.5) ; }
        .icon_sns a{ 
            font-size: calc((var(--fc-rem)) * 3); transition: all 0.3s; 
            color: #c1b092;
        }
        .icon_sns a:hover{
            color: #2cbbaa; opacity: 0.7; transition: all 0.3s;  
        }
        /* .icon_sns a:nth-last-of-type(2){ margin-right:18px;} */
        .support{ width: calc((var(--fc-rem)) * 24); margin: auto; margin-bottom: 10px;}
        .sns_share .copyright{ margin-bottom: 5px; width: 100%; display: none;}
        @media screen and (max-width: 640px) {
        .sns_share .copyright{ margin-bottom: 5px; width: 100%; display: block; }
        .sns_share .copyright img{ width:calc((var(--fc-rem)) * 24) ; margin: auto;}
        }
        /* .sp_intro{padding: 30px calc((var(--fc-rem)) * 4); padding-top: calc((var(--fc-rem)) * 8);} */
         /* 提示框基本樣式 */
        .copy-toast {
            visibility: hidden;
            min-width: 200px;
            background-color: #000000d4;
            font-family: var(--ft-noto-sans);
            color: #c1b092;
            text-align: center;
            border-radius: 8px;
            padding: 12px;
            position: fixed;
            z-index: 99;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s, bottom 0.3s;
        }
        
        /* 顯示時的狀態 */
        .copy-toast.show {
            visibility: visible;
            opacity: 1;
            bottom: 50px;
        }
        
        /* 增加鼠標手勢 */
        .email-copy-wrapper {
            display: inline-block;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .email-copy-wrapper:active {
            transform: scale(0.9); /* 點擊時縮小一點點的視覺回饋 */
        }


        /* SP intro=================================== */
        .sp_intro{padding: 0px calc((var(--fc-rem)) * 4); padding-top:calc((var(--fc-rem)) * 3);}
        .sp_intro article { margin-top: calc((var(--fc-rem) ) * 3);  position: relative; padding-bottom: calc((var(--fc-rem)) * 8);}
        .sp_intro article ::before{
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff;
        }
        .sp_intro article p{ 
            font-family:"noto-serif-jp", serif;
            font-weight: 500; font-style: normal;
            font-size:calc((var(--fc-rem) ) * 1.3); text-align: center; color: #fff; 
            line-height: 1.75;
            margin-bottom: 20px; letter-spacing:calc((var(--fc-rem)) * 0.15);
        }
        .sp_intro article p:last-of-type{ margin-bottom: 0px;}
        .deco_lines{position: relative;}
        .deco_lines::before, .deco_lines::after{
            content: ''; position: absolute; top: 50%; transform: translateY(calc(-50% - 1px) ) rotate(45deg); left: 0;
            width:calc((var(--fc-rem)) * 1.1); height: calc((var(--fc-rem)) * 1.1); background: #fff;
        }
        .deco_lines::after{
            content: ''; left: unset; right: 0; 
        }
         .sp_intro article ::after{
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%;  height: calc((var(--fc-rem)) * 1.5); 
            background: url(../image/deco_diamond_triple.svg)no-repeat; background-size: auto 100%; background-position: center;
            transform: translateY(calc(50% - 1px) ) ;
        }