@charset "utf-8";
/*--基本--*/
:root{
	--font-size:16px;
	--max-width:1200px;
	--color: #292939;/*文字色*/
	--color-hover: #FF3F8A;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #fff;/*背景*/
  --spec-border: #ff899f;
  --btn-max-w:400px;/*ボタンの最大幅*/
  --border-radiue:100px;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #000;/*スライダー矢印*/
  --slider-page: #000;/*スライダーページネーション*/
  --bg_color: #1a1240;
  --star_color: #ffffff;
  --shooting_star_color: #d9b3ff;
}

html {
  background: var(--bg_color); 
  overscroll-behavior-y: none;
}

.swiper-slide a,
.swiper-slide .no_img,
.no_img,
a.no_img {
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ROTATE */
.cloudimage-360 {
  width: 480px !important; 
  cursor: grab;  
  position: absolute !important;
  left: 50%;
  transform: translateY(-50%);
  top: 50%;
}

.cloudimage-360 canvas {
  width: 100% !important;
  height: auto !important;
}

.cloudimage-360:active {
  cursor: grabbing;
}

.cloudimage-360-zoom-controls[data-position=bottom-right] {
    bottom: 30%!important;
    right: 0%!important;
}

.night_sky {
  position: fixed;
  z-index: 1;
  top: -10svh;
  left: 0;
  width: 100%;
  height: 120vh; 
  height: calc(100lvh + 20svh);
  background: radial-gradient(ellipse 90% 80% at 50% 105%, #7a5fc0 0%, #4a3390 35%, #241a4a 70%, var(--bg_color) 100%);
  background: radial-gradient(ellipse 90% 80% at 50% calc(10svh + 105svh), #7a5fc0 0%, #4a3390 35%, #241a4a 70%, var(--bg_color) 100%);
  overflow: hidden;
}

.cloud_haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.bg_star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--star_color);
  border-radius: 50%;
  opacity: 0.6;
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* 流れ星本体(角度・サイズ・尾の長さ・明るさはJSからCSS変数で個別に渡す) */
.shooting_star {
  --rot: -45deg;
  --tx: -120vmax;
  --ty: 120vmax;
  --size: 3px;
  --tail_len: 140px;
  --peak_opacity: 1;
  position: absolute;
  top: -10%;
  left: 0;
  width: var(--size);
  height: var(--size);
  background: var(--shooting_star_color);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px #d9b3ff) drop-shadow(0 0 14px #8a2be2);
  animation-name: fall_diagonally;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 光の尾 */
.shooting_star::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--tail_len);
  height: 2px;
  background: linear-gradient(to left, rgba(217, 179, 255, 0.9), rgba(138, 43, 226, 0));
  transform: translateY(-50%);
  transform-origin: right center;
}

@keyframes fall_diagonally {
  0% {
    transform: translate(0, 0) rotate(var(--rot));
    opacity: var(--peak_opacity);
  }
  70% {
    opacity: var(--peak_opacity);
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    opacity: 0;
  }
}

.btn .arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* ここから元の矢印CSS */
.arrow {
  position: relative;
  display: inline-block;
  width: 7.7px;
  height: 13.3px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 1px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}


/*------
 
------*/
body{position: relative;}
/*------
 hero
------*/
#hero{position: fixed; width: 100% ; height: 100vh; top: 0; left: 0; z-index: 2; }
#hero .name{position: absolute; left: 0; top: 50%; z-index: 1;color: #fff; font-weight: 700;font-size: 6.75vw; line-height: 1; transform: translateY(-50%); text-align: center; opacity: .8;}
#hero .img_area{position: relative; width: calc(87% - 420px); display: block;/* margin-top: 10px;  */top:0;z-index: 10; height: 100vh;height: 100vh;}
#hero .img_area_sp{display: none;}
#hero .text_area{position: absolute; left: 2%; bottom: 15em;z-index: 20;font-weight: 900;z-index: 100;}
#hero .text_area h1{line-height: 1.1;font-size: 5vw; margin-top: .2em;font-weight: 200;font-style: normal; text-shadow: 0 0 10px rgba(255, 255, 255),0 0 10px rgba(255, 255, 255);-webkit-text-stroke: 2px rgb(255, 255, 255);text-stroke: 2px rgb(255, 255, 255);paint-order: stroke;}
#hero .text_area h1.en{font-size: 4vw;}
#hero .text_area .small{font-size: .5em;}
#hero .text_area a.btn{margin-top: 1.5em;box-shadow: 0 0 10px #fff;}
#hero a.btn {position: absolute; bottom: 60px; left: 5%; max-width: 400px;padding: .6em 2.5em .6em 2em; width: 90%; font-weight: bold; }
.menu_area{position: absolute; bottom: 0; height: 100%;  flex-direction: column; padding-top: 20px; right: 20px;}
.menu_area .inner {flex-direction: column; justify-content: center; align-items: center;}
.menu_cnt_sp{display: none;}

.pc_sidemenu{width: 13%; height: 100vh; position: absolute; right: 0; top: 0; padding: 10px; font-weight: 600;z-index: 5;}
.pc_sidemenu ul{padding-left: 2.5em;}
.pc_sidemenu ul li{margin-top: .8em;word-break: break-all;}
.nav-link{position: relative;}
.nav-link:hover{text-decoration: none;}
.nav-link::before {content: "";margin-right: 0;/* opacity: 0; */transition: opacity 0.3s, margin-right 0.3s;}
.nav-link.active::before {content: "";background-image: url(../images/icon_nav.svg); background-repeat: no-repeat; background-size: contain; opacity: 1;position: absolute;top: -.2em;left: -2.3em;width: 12em; height: 1.8em; display: block;}


.bg_title {
  width: 80%;
  max-width: 956px;
  position: absolute;
  bottom: 20%;
  left: 10%;
}

@keyframes arrow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/*------
 SHARE
------*/
.language,
.share {
  --size: 54px;
  --gap: 54px;
  --item_size: 40px; 
  --count: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size) / 2);
  overflow: hidden;
  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);
  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 .share {--count: 2;}
.language {
  margin-bottom: 1em;
}
.language.is_open,
.share.is_open {
  height: calc(var(--size) + var(--gap) * var(--count) + 12px);
}

.language > .icon,
.share > .icon {
  flex: none;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  padding: calc((var(--size) - 22px) / 2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share > .icon {
  margin-right: 2px;
}

.language > ul,
.share > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.language li,
.share li {
  --i: 0;
  height: var(--gap);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden; 
  transform: translateY(-16px) scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
.language li:nth-child(2), .share li:nth-child(2) { --i: 1; }
.language li:nth-child(3), .share li:nth-child(3) { --i: 2; }
.language li:nth-child(4), .share li:nth-child(4) { --i: 3; }

.language.is_open li,
.share.is_open li {
  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;
  transition-delay: calc(0.08s + var(--i) * 0.06s);
}

.language li a,
.share li a {
  width: var(--item_size);
  height: var(--item_size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
  font-size: 90%;
  line-height: 1;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.language li a:hover,
.share li a:hover { background: rgba(255, 255, 255, 0.26); }

.language li.active a {
  background: #fff;
  color: #1a1440;
}

.share picture { display: block; line-height: 0; }
.share li img { width: 24px; height: 24px; }

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

@media (prefers-reduced-motion: reduce) {
  .is_jelly, .is_stretch { animation: none; }
  .language, .share, .language li, .share li { transition-duration: 0.01s !important; }
}

/*header*/
header{position: absolute}
header p{max-width: 180px;width: 35%;}
header .logo{gap: 10px; margin-top: .5em; align-items: center;}

/*------
 main
------*/
main{max-width: 420px; width: 100%;position: relative; z-index: 4; margin-left: calc(87% - 420px);box-shadow: 0 0 10px #00000026; border-radius: 500px 500px 0 0; overflow: hidden; margin-top: 20px;}
main p{margin-top: 1.5em;}
main h2{font-size: 2.5em; font-weight: 400;font-style: normal; line-height: 1.4; text-align:  center;}
main h2.ttl{line-height: 1.8;}
main h2.ttl span {margin-right: .2em;}
main h2.ttl img{width:auto; height: 22px;}
main .inner p:first-of-type{margin-top: 0;}
main .inner .bg{padding: 2em 10% 0;}
#main_wrap {background: #ffffffbb; margin: 0 auto;}

/*------
 top
------*/
#top {
   aspect-ratio: 9 / 20;
  /*height: 100vh;*/
  /*min-height: 768px;*/
  overflow: hidden;
  position: relative;
  margin-bottom: 2.5em;
}
h1 {
  width: 40%;
  max-width: 400px;
  position: absolute;
  left: 5%;
  bottom: 150px;
  z-index: 2;
}
h1 img {
  width: 100%;
  height: auto;
}
img.catch {
  display: block;
  width: 94%;
  height: auto;
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  margin: auto;
}
/*------
 lead
------*/
#lead{
  margin: 60px auto;
  position: relative;
}
#lead .inner{max-width: 1200px; width: 90%; margin: 0 auto;}
#lead p{margin-top: 2.5em; text-align: center;line-height: 2.3; font-size: 92%; font-weight: 600;}
#lead img.line {
  display: block;
  width: 94%;
  height: auto;
  position: absolute;
  bottom: inherit;
  top: -125px;
  left: 0;
  right: 0;
  margin: auto;
}

/*------
 highlights
------*/
#highlights .inner{position: relative;padding: 0 35px;}
#highlights .inner .box{margin-top: 3em;}
#highlights .inner .box figure img {border-radius: 10%;overflow: hidden;}
#highlights .inner .box:first-of-type{margin-top: 1.5;}
#highlights .inner .box p{font-weight: 500; font-size: .9em;}


/*------
 products
------*/
#products {margin-top: 2.5em;}
#products h3{text-align: center; font-size: 1.2em; font-weight: 800; margin-top: 2em;}
#products h3 + p{text-align: center; margin: 0; font-weight: 800; font-size: 1.5em;}
.preorder_bonus a.btn ,
#products a.btn{width: 88%; margin-top: 1em; font-weight: bold;}
#products a.btn.en{font-size: .8em}
#products .inner{padding: 0 35px;}
#products p.shipping {font-size: .9em;padding: 0 35px; text-align: center;}

.online{margin-top: 3em;padding: 0 35px;}
.online h4{font-size: .95em;font-weight: 800;}
.online p{font-size: .9em;  margin-top: 1em; }
main .online p:first-of-type{margin-top: 1em;}

.online hr{border: 2px solid #333;border-width: 1px 0 0 0; margin: 2em 0;}
.online a.btn {width: 100% !important; color: #fff; background-image: linear-gradient(90deg, #292939, #72729f); padding: 1em 2em 1em 1em; margin-top: 2em !important; border: none; border-radius: 10px; background-size: 200% 100%; background-position: 0% 50%; transition: background-position 0.6s ease;}
.online a:hover.btn { color: #fff; background-position: 100% 50%;}
.online a .arrow::before,
.online a .arrow::after { background-color: #fff;}

/*スライダー*/
.swiper .swiper-slide {border-radius: 500px 500px 0 0; overflow: hidden; border: 3px solid #FFF;}
.swiper .swiper-slide a{display: block; line-height: 0;}
.swiper_wrap{padding: 3em 0 0 0; position: relative;}
.swiper-pagination{position: relative!important; margin-top: 40px; z-index: 5;}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  border-radius: 1000px !important;
  height: 7px !important;
  opacity: 1 !important;
  vertical-align: middle; /* 星と丸の高さの中心を揃える */
}
.swiper-pagination-bullet {
  background: #fff !important;
  width: 7px !important;
}
.swiper-pagination .swiper-pagination-bullet-active {
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background: url(../images/star.svg) center / contain no-repeat !important;
  animation: star_pop 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}
@keyframes star_pop {
  0%   { transform: scale(0.3) rotate(-45deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .swiper-pagination .swiper-pagination-bullet-active { animation: none; }
}

.swiper_wrap img.line {
  display: block;
  width: 94%;
  height: auto;
  position: absolute;
  bottom: 31px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

/*------
 bonus
------*/
.preorder_bonus {
    margin-top: 3em;
}
.preorder_bonus .inner {
    padding: 0 35px;
}
.preorder_bonus h3{font-size: .95em;margin-top: 1em !important;font-weight: 800; text-align: center;}
.preorder_bonus p{font-size: .9em;  margin-top: 1em !important; text-align: center; }

.preorder_bonus figure img {border-radius: 10%;overflow: hidden;}

/*------
 specifications
------*/
#specifications{padding:50px 0 0 0;}
#specifications h2{ }
#specifications h3:first-of-type{margin-top: 0;}
#specifications h3 {margin-top: 1em; font-size: 1em;}
#specifications .inner { padding: 2em 20px; background: #ffffffca; width: calc(100% - 75px); margin: 0 auto;  border-radius: 10px; text-align: center;}
#specifications p{text-align: center; margin-top: 0; font-size: .9em;}

/*------
 gscollection
------*/
.gs_collection {
    margin-top: 3em;
    margin-bottom: 3em;
}
.gs_collection .inner {
    padding: 0 35px;
}
.gs_collection h3{font-size: .95em;margin-top: 1em !important;font-weight: 800; text-align: center;}
.gs_collection p{font-size: .9em;  margin-top: 1em !important; text-align: center; }

.gs_collection figure img { display: block; max-width: 200px;width: 40%; margin: 0 auto;}

/*------
 footer
------*/
footer{background: none; border: none; padding: 0 0 2em 0;}
footer p{text-align: center;font-size: .5em;}
footer .copyright span img{vertical-align: middle; margin-left: .4em; width: 38px;}
footer ul.logo { justify-content: center; align-items: end;gap: 10px; margin: 2em 0;}
footer ul.logo li {max-width: 180px;width: 35%;}
footer ul.logo li img { width: 100%; height: auto; display: block; }

@media screen and (max-width: 1600px){
  .cloudimage-360 {
    left: calc(100% - 520px);
  }
}
@media screen and (max-width: 1200px){
.cloudimage-360 canvas {
    width: 90% !important;
    height: auto !important;
}
.cloudimage-360 {
    left: 0;
    right: 0;
    margin: auto;
}
  #hero .img_area{width: calc(100% - 560px);}
  main{margin-left: calc(100% - 560px);}
  .btn_hero{bottom: -10vw;}
  .btn_hero a.btn{width: 12vw; height: 12vw;font-size: 1vw;}
  .bg_title { left: 2%; bottom: 15%;}
}

@media screen and (max-width: 1024px){
  #hero{ }
  main{margin-left: calc(100% - 520px);}
  #hero .img_area { width: calc(100% - 520px);}
  #hero .text_area{left: auto; bottom: 2%; right: 2em;}
  #hero .text_area h1{font-size: 7vw; text-shadow: 0 0 10px #fff;}
  #changeimg_pc { left: 0;}
  .bg_title { width: 96%; }
  #changeimg_pc label { width: 10vw; height: 10vw;}
}

@media screen and (max-width: 960px){
  #changeimg_pc .frame img {left: 0%;}
  .cloudimage-360 {
      right: inherit;
  }
    .cloudimage-360 canvas {
        width: 80% !important;
    }
}

@media screen and (max-width: 820px){
  #hero .img_area{ width: (100% - 80px);}
  #hero .text_area{ right: 1em;}
}


@media screen and (max-width: 768px){

  
  h1 { width: 90%;position: relative; bottom: inherit; left: inherit; margin: 0 auto;}
  #specifications h2 { font-size: 160%;}
  #specifications .inner { padding: 2em 5%;}

  .cloudimage-360 {
    aspect-ratio: 2 / 4;
    position: relative !important;
    width: 90% !important;
    left: 0;
    right: 0;
    top: 50px;
    margin: auto;
    transform: none;
  }
  .cloudimage-360 canvas {
      width: 100% !important;
  }

  a.btn{width: 90%; margin-top: 1em; font-size: 4vw; font-weight: 500;}
  

  #hero a.btn {
  position: relative;
  bottom: 0;
  left: 0;
  }
  #top {
    background: url(../images/main_sp.jpg) 50% 0 no-repeat;
    background-size: cover;
  }
  #top figure img {display: none;}


  /*------
  header
  ------*/
  header.absolute{width: calc(100% - 10px);left:5px; top: 0; z-index: 999; padding: 15px 1em; }
  header p{width: auto; line-height: 1;}
  header p a{display: block; line-height: 0;}
  header p img{height: 30px; width: auto;}
  header .logo{margin-top: 0;}

  /*------
  hero
  ------*/
  #hero{position: relative; width: 100%; background: none; margin-bottom: 50px;height: auto;}
  #hero .img_area{width: 100%; margin-top: 0; position: relative; padding: 0; height: auto;}
  #hero .img_area_sp{display: block; position: relative; padding-bottom: 80px;}
  #hero .img_area_sp .top_flower{position: absolute; bottom: -18%; left: 0;width: 100%;}

  #hero .text_area{position: relative; margin-top: 17%;bottom: auto; left: auto;right: auto;}
  #hero .text_area h1{text-align: center;font-size: 17vw; line-height: 1.2;}
  #hero .text_area h1.en{font-size: 12vw;}

  .night_sky {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto; 
    background: radial-gradient(ellipse 90% 96svh at 50% 105svh, #7a5fc0 0%, #4a3390 35%, #241a4a 70%, var(--bg_color) 100%);
  }

  img.catch { bottom: 19.05vw; } 
  #lead { margin: 14.29vw auto 60px; }
  #lead img.line { top: -29.76vw; } 

  .swiper_wrap img.line { bottom: calc(69px - 9vw); }  

  .name{display: none;}

  .btn_nav {
    --size: 46px;
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: 16px;
    z-index: 100;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    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 10px 30px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .btn_nav span,
  .btn_nav span::before,
  .btn_nav span::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
  }
  .btn_nav span { position: relative; transition: background 0.2s; }
  .btn_nav span::before,
  .btn_nav span::after {
    content: "";
    position: absolute;
    left: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
  }
  .btn_nav span::before { transform: translateY(-6px); }
  .btn_nav span::after  { transform: translateY(6px); }
  .btn_nav.is_open span { background: transparent; }
  .btn_nav.is_open span::before { transform: rotate(45deg); }
  .btn_nav.is_open span::after  { transform: rotate(-45deg); }

  /* メニュー（ドロワー） */
  .menu_area {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: rgba(20, 16, 48, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
  }
  .menu_area.is_open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }
  .menu_area .inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  }
  .menu_area.is_open .inner { transform: none; }

  /* 言語・シェアは横長の丸に。開閉なしで常に中身を表示 */
  .language,
  .share {
    --size: 56px;
    --gap: 52px;
    --item_size: 40px;
    flex-direction: row;
    width: auto;
    height: var(--size);
    padding-right: 8px;
    transition: none;
  }
  .language { margin-bottom: 0; }
  .language.is_open,
  .share.is_open { height: var(--size); }

  .language > .icon,
  .share > .icon {
    display: block; /* .pc で非表示にされるのを防ぐ */
    cursor: default;
    padding: calc((var(--size) - 22px) / 2);
  }
  .language > ul,
  .share > ul { flex-direction: row; }

  .language li,
  .share li {
    width: var(--gap);
    height: var(--size);
    transform: translateX(-12px) scale(0.8);
  }
  .menu_area.is_open li {
    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;
    transition-delay: calc(0.15s + var(--i) * 0.06s);
  }
  .menu_area.is_open .share li {
    transition-delay: calc(0.3s + var(--i) * 0.06s);
  }

  #hero{z-index: 10;}

  .menu_cnt_sp{display: block;}
  /*.btn_nav{position:absolute; top: 10px; right: 2%; display: flex;  width: 40px; height: 40px; border-radius: 100px;margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center; z-index: 1005;background: #E01A6E;}
  .btn_nav:hover{cursor: pointer;}
  .btn_nav span{width: 80%; height: 3px; background:#fff; display: flex; position: relative; align-items: center; border-radius: 1000px;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 3px;background:#fff;position: absolute;transition: all 0.2s linear;border-radius: 1000px;}
  .btn_nav span::before{top: -8px;}
  .btn_nav span::after{bottom: -8px;}
  .btn_nav.active{background: #fff;}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: all 0.2s linear; background: #E01A6E;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: #E01A6E;}
  .btn_nav.active span{background: #ffffff00;}

  .btn_hero{position: fixed;opacity: 0; bottom: 10px; right: 15px;}
  .btn_hero.show{opacity: 1;transition: all 0.2s linear;}
  .btn_hero a.btn{width: 120px; height: 120px;flex-direction: column;font-size: .45em;}
  .btn_hero a.btn .line{font-size: 1.8em;}
  .btn_hero a.btn br{display: none;}
  .btn_hero .click{padding: 0 .7em;width: auto;top: -1.5vw;}
  .btn_hero .click::after{left: 6vw;}
  .btn_hero .click .outfit{font-size: 1em;}
  .btn_hero .arrow{width: 2em;bottom: -1em;right: -.5em;}:*/

  /*------
  main
  ------*/
  main{width: 100%;max-width:100%; margin-left: 0; border: none;box-shadow: none;}

  /*------
  read
  ------*/
  #read{width: 100%;padding:0;}

  #highlights .inner .box:first-of-type{margin-top: 1em;}
  #movie .inner{margin-top: 1em;}
  #offshot .inner{margin-top: 1em;}
  #voice .lead{margin-top: 1em;}
  #howto .inner{margin-top: 1em;}
  .swiper_wrap{padding-top: 1.5em;}
  #products a.btn.en{font-size: 3vw}

  /*------
  footer
  ------*/
}