@charset "utf-8";
/*--基本--*/
:root{
	--font-size:16px;
	--max-width:1200px;
	--color: #612F3A;
	--color-hover: red;
    --lang-active: red;
	--background: #fff;
    --spec-border: #000;
    --btn-color:#fff;
    --btn-color-hover:#D54493;
    --btn-max-w:550px;
    --border-radiue:100px;
}

@media screen and (max-width: 1600px){
	:root{
        --font-size:14px;
    }
}

@media screen and (max-width: 1200px){
	:root{
        --font-size:12px;
    }
}

/*-----------
header
-----------*/
header {
  --header_h: clamp(34px, 2.6vw, 70px);
  --header_tab: rgba(0, 0, 0, 0.7);
  --header_slant: calc(var(--header_h) * 0.25);
  --header_pink: #FD79BB;
  z-index: 200;
}
 
/* 言語切り替え */
header .language {
  position: relative;
  isolation: isolate;
  align-items: center;
  flex-wrap: nowrap;
  height: var(--header_h);
  margin-left: auto;
  padding: 0 1vw;
  color: #fff;
}
/* 半透明の黒タブ（平行四辺形） */
header .language::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header_tab);
  clip-path: polygon(0 0, calc(100% - var(--header_slant)) 0, 100% 100%, var(--header_slant) 100%);
}
header .language li {
  display: flex;
  align-items: center;
  height: 100%;
}
header .language li a {
  display: block;
  margin: 0 .4em;
  padding: .5em 1em;
  color: #fff;
}
/* JP | EN | ZH の区切り線 */
header .language li:nth-of-type(n+3)::before {
  content: "";
  width: max(1px, 0.06vw);
  height: calc(var(--header_h) * 0.55);
  background: rgba(255, 255, 255, 0.7);
}
header .language li.active a,
header .language li a:hover {
  color: var(--header_pink);
  text-decoration: none;
}
 
/* 「Language」ラベル */
header .language li:first-of-type {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 1vw;
  white-space: nowrap;
  font-weight: 500;
}
/* ストライプ＋横線 */
header .language li:first-of-type::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 16.9vw;
  height: 0.57vw;
  margin-right: 1.1vw;
  transform: translateY(-50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 11' fill='white'%3E%3Cpath d='M20.5 11L7.4 0H0l13.1 11zM34.5 11L21.3 0h-7.4L27 11zM48.4 11L35.3 0h-7.4L41 11zM62.3 11L49.2 0h-7.4l13.1 11zM76.3 11L63.1 0h-7.4l13.1 11zM90.2 11L77.1 0h-7.4l13.1 11zM104.1 11L91 0h-7.4l13.1 11zM118.1 11L105 0h-7.4l13.1 11zM132 11L118.9 0h-7.4l13.1 11z'/%3E%3C/svg%3E") left center / 6.8vw auto no-repeat,
    linear-gradient(#fff, #fff) right center / 9.7vw max(1px, 0.12vw) no-repeat;
}
 
/* 予約・購入 */
.preorder_btn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--header_h); 
  margin: 0 0 0 .5em;
  padding: 0 2em;
  border: 2px solid #fff;
  border-radius: 100px;
    background: linear-gradient(
        90deg,
        rgba(253, 121, 187, 1) 0%,
        rgba(255, 159, 223, 1) 25%,
        rgba(210, 164, 213, 1) 50%,
        rgba(255, 159, 223, 1) 75%,
        rgba(253, 121, 187, 1) 100%
    ) 0% 0% / 200% 100%;
  line-height: 1;
  color: #fff;
  transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;
  font-weight: bold;
}
.preorder_btn:hover {
  background-position: 100% 0%;
  filter: hue-rotate(15deg);
  text-decoration: none;
}
 
/* シェア（ガラス風・クリックでぷるんと下に伸びる） */
.fabs {
  --size: var(--header_h);
  --gap: var(--size);
  --item_size: calc(var(--size) * 0.74);
  --count: 3;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--size);
  height: var(--size);
  margin-left: 0.6vw;
  transform-origin: top center;
  transition: height 0.7s linear(0, 0.3 8%, 0.8 18%, 1.04 30%, 1.06 37%, 1.01 50%, 0.995 65%, 1);
}
#EN .fabs {
    --count: 2;
}
.fabs.is_open { height: calc(var(--size) + var(--gap) * var(--count) + 12px); }

.fabs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--size) / 2);
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    inset -2px -3px 1px -1px rgba(255, 255, 255, 0.75),
    inset 2px 2px 1px -1px rgba(255, 255, 255, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.25);
}
 
/* シェアボタン本体 */
.fabs .fab.share {
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  padding: calc(var(--size) * 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fabs .fab.share img { display: block; width: 100%; height: auto; }
 
/* SNSボタン（開いたときに順番に飛び出す） */
.fabs .fab:not(.share) {
  --i: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--item_size);
  height: var(--item_size);
  margin: calc((var(--gap) - var(--item_size)) / 2) 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px) scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.fabs .fab:nth-child(3) { --i: 1; }
.fabs .fab:nth-child(4) { --i: 2; }
.fabs .fab:not(.share):hover { background: rgba(255, 255, 255, 0.26); }
.fabs .fab:not(.share) img { width: 100%; height: auto; }
 
.fabs.is_open .fab:not(.share) {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.3s ease,
    transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1),
    visibility 0s,
    background 0.2s;
  transition-delay: calc(0.08s + var(--i) * 0.06s), calc(0.08s + var(--i) * 0.06s), calc(0.08s + var(--i) * 0.06s), 0s;
}
 
/* 開閉時のぷるぷる */
.is_jelly { animation: jelly 0.65s both; }
@keyframes jelly {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(0.95, 1.05); }
  55%  { transform: scale(1.03, 0.97); }
  80%  { transform: scale(0.99, 1.01); }
  100% { transform: scale(1, 1); }
}
.is_stretch { animation: stretch 0.7s both; }
@keyframes stretch {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(0.96, 1); }
  55%  { transform: scale(1.02, 1); }
  80%  { transform: scale(0.995, 1); }
  100% { transform: scale(1, 1); }
}
 
/* シェアボタンの下の縦線 */
.fab.share::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.7vw);
  left: 50%;
  width: max(1px, 0.12vw);
  height: 17.5vw;
  background: #fff;
  transform: translateX(-50%);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.2s;
}
/* メニューを開いている間は縦線を隠す */
.fabs.is_open .fab.share::after { opacity: 0; }
 
.menu_sp { display: none; }
 
/*-----------
header アニメーション（MVの読み込みに連動）
-----------*/
body:has(.mv:not(.is_loaded)) header .language li:first-of-type::before { clip-path: inset(0 100% 0 0); }
body:has(.mv:not(.is_loaded)) .fab.share::after { transform: translateX(-50%) scaleY(0); }
 
body:has(.mv.is_loaded) header .language li:first-of-type::before {
  animation: stripe_reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.4s both;
}
body:has(.mv.is_loaded) .fab.share::after {
  animation: share_line_grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.8s both;
}
 
@keyframes stripe_reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }
}
@keyframes share_line_grow {
  from { transform: translateX(-50%) scaleY(0); }
  to   { transform: translateX(-50%) scaleY(1); }
}
 
@media (prefers-reduced-motion: reduce) {
  .is_jelly, .is_stretch { animation: none; }
  .fabs, .fabs .fab { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  body:has(.mv) header .language li:first-of-type::before { animation: none; clip-path: none; }
  body:has(.mv) .fab.share::after { animation: none; transform: translateX(-50%); }
}
 
/*-----------
共通
-----------*/
.cnt {
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 768px){
    /*カスタム*/
    header.flex{padding-right: 1%;}

  .btn_nav {
    position: fixed;
    top: 14px;
    right: 2%;
    z-index: 10002;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
      inset -2px -3px 1px -1px rgba(255, 255, 255, 0.75),
      inset 2px 2px 1px -1px rgba(255, 255, 255, 0.25),
      0 6px 18px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 押したときにぷにっと縮んで戻る */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
  }
  .btn_nav:active {
    transform: scale(0.9);
    transition-duration: 0.1s;
  }
  .btn_nav.active { background: rgba(255, 255, 255, 0.42); }
 
  /* 三本線（白） */
  .btn_nav span,
  .btn_nav span::before,
  .btn_nav span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
  }
  .btn_nav span {
    position: relative;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    transition: background 0.2s;
  }
  .btn_nav span::before,
  .btn_nav span::after {
    content: "";
    position: absolute;
    left: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.2s;
  }
  .btn_nav span::before { top: -6px; }
  .btn_nav span::after { top: 6px; }
 
  /* 開いたとき：×印 */
  .btn_nav.active span { background: transparent; }
  .btn_nav.active span::before { top: 0; transform: rotate(-45deg); }
  .btn_nav.active span::after { top: 0; transform: rotate(45deg); }
 
  @media (prefers-reduced-motion: reduce) {
    .btn_nav,
    .btn_nav span::before,
    .btn_nav span::after { transition: none; }
  }

    body.menu-open #stickybar {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.menu-open #stickybar {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .menu_sp .language_sp{
        margin-top: 50px;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .preorder_btn { display: none; }
    .language,.fabs{display: none;}

    .menu_backdrop{
        position: fixed;
        inset: 0;
        background: rgba(30, 20, 25, 0.55);
        backdrop-filter: blur(2px);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .menu_backdrop.active{
        opacity: 1;
        visibility: visible;
    }
  .menu_sp{
      background: #ffecf882;
      backdrop-filter: blur(8px);
      background-size: 60px auto;
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 0;
      top: auto;
      z-index: 10001;
      border-radius: 28px 28px 0 0;
      box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
      padding: 8px 24px calc(50px + env(safe-area-inset-bottom, 0px));
      max-height: 45vh;
      transform: translateY(calc(100% + 40px));
      visibility: hidden;
      pointer-events: none;
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.4s;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .menu_sp.active{
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }
    .menu_grabber{
        width: 40px;
        height: 4px;
        background: #e3d9d2;
        border-radius: 100px;
        margin: 14px auto 30px;
    }

    /* 言語切替：丸ピル */
    .menu_sp .language_sp{
        margin-top: 0;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .menu_sp .language_sp li{ padding: 0; border: none; line-height: 1; }
    .menu_sp .language_sp li:first-child{
        width: 100%;
        margin-bottom: .8em;
        letter-spacing: .12em;
        color: #612F3A;
        text-align: center;
    }
    .menu_sp .language_sp li a{
        display: block;
        padding: 12px 22px;
        border-radius: 100px;
        font-weight: 700;
        background: #F7F2EC;
        color: #612F3A;
    }
    .menu_sp .language_sp li.active a{
        color: #FD79BB;
        background: #000000a3;
    }

    .menu_sp .menu_cta{
        margin: 30px auto 0 auto;
        max-width: 100%;
        font-size: 100%;
    }

    .menu_sp .fabs_sp{
        margin-top: 22px;
        justify-content: center;
        gap: 18px;
    }
    .menu_sp .fabs_sp p{
        width: 100%;
        text-align: center;
        letter-spacing: .12em;
        color: #612F3A;
    }
    .menu_sp .fabs_sp a{ width: 42px; margin: 0; }
    .menu_sp .fabs_sp .fab{ opacity: 1; margin: 0; }

    @media (prefers-reduced-motion: reduce) {
        .menu_sp,
        .menu_backdrop,
        body.menu-open header {
            transition: none !important;
        }
    }
}