/*-----------
reset
-----------*/
* {margin: 0;padding: 0; box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

li{list-style: none;}
/*-----------
body
-----------*/
@font-face {
    font-family: "Akshar Alnum";
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/akshar.ttf) format("truetype");
    unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
    font-family: "Akshar Alnum";
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/akshar.ttf) format("truetype");
    unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
    font-family: "Akshar Alnum";
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/akshar.ttf) format("truetype");
    unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
    font-family: "Akshar Alnum";
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/akshar.ttf) format("truetype");
    unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
    font-family: "Akshar Alnum";
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/akshar.ttf) format("truetype");
    unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}

body{
    background: #FFECF8;
    color: var(--color);
    font-size: var(--font-size);
    width: 100%;
    line-height: 1.8;
    font-family: "Akshar Alnum", "Noto Sans JP", "hiragino-kaku-gothic-pron", "ヒラギノ角ゴシック", Arial, Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    overflow-x: hidden;
}
body.black{background: #000;}
img{height: auto;}

@media screen and (max-width: 768px){
	body{width: 100%;}
	img{width: 100%;}
}

.noto-sans-tc {
  font-family: "Akshar Alnum", "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*-----------
commone
-----------*/
a{color: var(--color-a);text-decoration: none;}
a:hover{text-decoration: underline;}
a:hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.flex{display: flex; align-items: flex-start; flex-wrap: wrap;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}

/*SP-on*/
.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 768px){
    .pc{display: none;}
    .sp{display: block;}
}
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 2s;
  &.fadein-left{
      transform: translate(-40px,0);
  }
  &.fadein-right{
      transform: translate(40px,0);
  }
  &.fadein-up{
      transform: translate(0,-40px);
  }
  &.fadein-bottom{
      transform: translate(0,40px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}
@keyframes floatInOut {
  0%   { opacity: 0; transform: scale(0.7) rotate(var(--rot)); }
  20%  { opacity: 1; transform: scale(1)   rotate(var(--rot)); }
  80%  { opacity: 1; transform: scale(1)   rotate(var(--rot)); }
  100% { opacity: 0; transform: scale(0.7) rotate(var(--rot)); }
}
/*-----------
ボタン
-----------*/
a.btn{
    position: relative;
    display: block;
    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%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
    transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s ease;
    color: #FFF;
    text-align: center;
    padding: 1.2em 1em;
    max-width: var(--btn-max-w);
    width: 100%;
    margin: 0 auto;
    text-decoration: none;
    border-radius: var(--border-radiue);
    font-weight: bold;
    z-index: 4;
    font-size: 110%;
    border: 4px solid #FFF;
    box-shadow: 0px 5px 5px 0px #d6d6d6;
}
a.btn::after {
    content: "";
    background: url(../images/commone/arrow_white.png) 0 50% no-repeat;
    background-size: 15px auto;
    position: absolute;
    top: 0;
    right: 4%;
    z-index: 2;
    width: 15px;
    height: 100%;
     transition: 0.3s ease-in-out;
}
a.btn:hover { 
    background-position: 100% 0%;
    filter: hue-rotate(5deg);
}
a.btn:hover::after { 
    right: 3%;
}

.sub_title {
    position: relative;
    font-size: 6.5em;
    color: #FFF;
    font-weight: 400;
    text-shadow: 0px 0px 10px rgba(253, 121, 187, 1);
    z-index: 10;
}

/*-----------
scroll
-----------*/
.window-scroll,.window-open{transform: translateY(100px); opacity: 0;}
.window-open.up,.window-scroll.up{animation: up01 1s ease forwards; transform: translateY(0); opacity: 1;}

@keyframes up01{
	0%{transform: translateY(100px); opacity: 0;}
}

/*-----------
Header
-----------*/
header {padding:1em;position: relative;z-index: 50; width: 100%; height: 5vw;}
header.absolute{position: absolute; top:0; left: 0; width: 100%; height: 5vw;  }
header .logo ul {
    display: flex;
    align-items: center;
}
header .logo ul li { margin: 0 1em 0 0; }
header .logo ul li img { width: auto; height: 40px; display: block;}

@media screen and (max-width: 1024px){
    header .logo ul li img { width: auto; height: 30px; }
}
@media screen and (max-width: 820px){
    header .logo ul li img { width: auto; height: 25px; }
}

/*-----------
MV
-----------*/

.mv {
  --c_white: #fff;
  --ease_out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease_inout: cubic-bezier(0.77, 0, 0.18, 1);
  position: relative;
  width: 100%;
  aspect-ratio: 2576 / 1450;
  overflow: hidden;
  container-type: inline-size;
}
.mv::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("../images/mv_right.jpg") right center / contain no-repeat,
    linear-gradient(160deg, #1f8fe8 0%, #7fb6f2 55%, #b9a6ec 100%);
}
.mv_bg_left {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 45% 0, 63.6% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(190, 160, 240, 0.25), rgba(245, 180, 220, 0.2)),
    url("../images/mv_left.jpg") -20% center / auto 100% no-repeat,
    linear-gradient(160deg, #c9a8ef 0%, #e8b4dc 60%, #f3c6de 100%);
}

.mv_diagonal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--c_white);
  stroke-width: 3;
  pointer-events: none;
}
.mv_diagonal path { vector-effect: non-scaling-stroke; }

.mv_frame {
  position: absolute;
  top: 67%;
  left: 2.5%;
  width: 18.8cqw;
  filter: drop-shadow(0 0 0.4cqw rgba(255, 140, 200, 0.35));
}
.mv_frame mask path {
  fill: none;
  stroke: #fff;
  stroke-width: 40;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.mv_title_block {
  position: absolute;
  top: 60%;
  left: 6.2%;
  width: 49%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mv_title_block img { display: block; height: auto; }
.mv_sub_title { width: 43.2cqw; }
.mv_main_title { width: 48.5cqw; margin-top: 1cqw; }
.mv_main_title img { width: 100%; margin: 0 auto; }
.mv_en_title { width: 31.6cqw; margin-top: 1cqw; }

#ZH .mv_title_block {
    left: 3.2%;
}

#ZH .mv_sub_title { width: 32cqw; }
#ZH .mv_main_title { width: 38cqw; }


.mv::before,
.mv_bg_left,
.mv_header_deco::before,
.mv_sub_title,
.mv_main_title,
.mv_en_title { opacity: 0; }
.mv_diagonal { clip-path: inset(0 0 100% 0); }
.mv_header_deco::after { transform: scaleY(0); }

.mv.is_loaded::before            { animation: bg_zoom_in 1.6s var(--ease_out) forwards; }
.mv.is_loaded .mv_bg_left        { animation: panel_slide_in 1.1s var(--ease_inout) 0.3s forwards; }
.mv.is_loaded .mv_diagonal       { animation: diagonal_reveal 1s var(--ease_out) 1.1s forwards; }
.mv.is_loaded .mv_frame mask path { animation: line_draw 1.3s var(--ease_inout) 1.3s forwards; }
.mv.is_loaded .mv_sub_title      { animation: fade_up 0.9s var(--ease_out) 1.7s forwards; }
.mv.is_loaded .mv_main_title     { animation: title_reveal 1.1s var(--ease_out) 1.9s forwards; }
.mv.is_loaded .mv_en_title       { animation: en_spread 1.2s var(--ease_out) 2.3s forwards; }
.mv.is_loaded .mv_header_deco::before { animation: fade_down 0.8s var(--ease_out) 2.5s forwards; }
.mv.is_loaded .mv_header_deco::after { animation: side_line_grow 0.9s var(--ease_out) 2.8s forwards; }

@keyframes bg_zoom_in {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes panel_slide_in {
  from { opacity: 1; clip-path: polygon(0 0, -18.6% 0, 0% 100%, 0 100%); }
  to   { opacity: 1; clip-path: polygon(0 0, 45% 0, 63.6% 100%, 0 100%); }
}
@keyframes diagonal_reveal { to { clip-path: inset(0); } }
@keyframes line_draw { to { stroke-dashoffset: 0; } }
@keyframes fade_up {
  from { opacity: 0; transform: translateY(1.2cqw); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes title_reveal {
  from { opacity: 0; filter: blur(0.6cqw); clip-path: inset(-30% 100% -30% -10%); }
  to   { opacity: 1; filter: blur(0); clip-path: inset(-30% -10% -30% -10%); }
}
@keyframes en_spread {
  from { opacity: 0; transform: scaleX(1.25); filter: blur(0.3cqw); }
  to   { opacity: 1; transform: scaleX(1); filter: blur(0); }
}
@keyframes fade_down {
  from { opacity: 0; transform: translateY(-1cqw); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes side_line_grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .mv *, .mv *::before, .mv *::after, .mv::before { animation: none !important; }
  .mv::before, .mv_bg_left, .mv_header_deco::before,
  .mv_sub_title, .mv_main_title, .mv_en_title { opacity: 1; }
  .mv_diagonal { clip-path: none; }
  .mv_header_deco::after { transform: none; }
  .mv_frame mask path { stroke-dashoffset: 0; }
}

/* SP用：メニューボタンまわりの装飾（PCでは非表示） */
.mv_sp_deco { display: none; }
@keyframes sp_stripe_reveal { to { clip-path: inset(0); } }
@keyframes sp_line_grow { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .mv .mv_sp_deco::before { clip-path: none; }
  .mv .mv_sp_deco::after { transform: none; }
}

#stickybar {
    position: fixed;
    bottom: 0;
    background: #ffffff40;
    width: 100%;
    z-index: 9999;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: 0.3s ease-in;
}
#stickybar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    margin: 15px auto;
    background: #83C4FF;
    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%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
    transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    box-sizing: border-box;
    padding: .5em 0;
    border: 3px solid #fff;
    min-height: 50px;
}
#stickybar a::after { 
    content: "";
    background: url(../images/commone/arrow_white.png) 0 50% no-repeat ;
    background-size: 12px auto;
    position: absolute;
    top: 0;
    right: 4%;
    width: 12px;
    height: 100%;
    z-index: 5;
    transition: 0.3s ease-in-out;
}
#stickybar a:hover::after { 
    right: 3%;
}
#stickybar a:hover { 
    background-position: 100% 0%;
    filter: hue-rotate(5deg);
}
#stickybar a span {
    font-weight: bold;
    letter-spacing: .1em;
    text-rendering: optimizeLegibility;
    line-height: 1em;
}
#stickybar a span.small { 
    font-size: 70%;
    line-height: 1em;
    margin-bottom: .3em
 }
#stickybar.visible { opacity: 1; }
#EN #stickybar a span { letter-spacing: normal; }
#mv a.btn{
    font-size: 120%;
    max-width: 540px;
}
/*-----------
#point
-----------*/
#point_wrap {
    background: #F6D1E8;
    background: linear-gradient(
    180deg,
    rgba(246, 209, 232, 1) 0%,
    rgba(219, 186, 220, 1) calc(100% - 200px),
    rgba(255, 236, 248, 1) 100%
    );
    position: relative;
}
#point_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(232, 168, 208, 1) 0%, rgba(190, 145, 196, 1) 100%);
  opacity: var(--scroll_progress, 0);
  pointer-events: none;
}
.catch {
    background: url(../images/lace.png) 0 0 / 100% auto no-repeat;
    aspect-ratio: 640 / 101;
    position: absolute;
    top: -2vw;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0 2%;
}
.catch img {
    width: 60%;
    height: auto;
}
.lead {
    width: 100%;
    margin-bottom: 80px;
}
.lead p {
    font-size: 120%;
    line-height: 2.5;
    font-weight: 600;
}
.point {
    position: relative;
    width: 92%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 0 80px 0;
}
.point .inner{
    display: flex;
    flex-wrap: wrap;
}
.point h2 {
    margin: 0 0 0 auto;

}

.point .visual {
    display: block;
    position: sticky;
    top: 2%;
    width: 40%;
    margin-right: 4%;
    flex: 0 0 40%;
    align-self: flex-start;
    z-index: 2;
    aspect-ratio: 9 / 16;
}
.point .visual img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.box_wrap {
    flex: 1;
    padding-top: calc(14vw + 80px);
}
.point .box{ line-height: 1; margin-top: -5em; }
.point .box a{display: block; }

.point .img_wrap{
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start ;
}
.point dl {
    width: 64%;
    position: relative;
    margin-bottom: 80px;
}
.point dl:nth-of-type(1) {margin-left: 0;}
.point dl:nth-of-type(2) {margin: 0 auto 80px auto;}
.point dl:nth-of-type(3) {margin-bottom: 140px;margin-left: auto;}
.point dt{
    margin-bottom: 20px;
}
.point dt img {
    display: block;
    width: 100%;
    height: auto;
}
.point dt a{
    display: block;
    width: 100%;
    overflow: hidden;
}
.point dd {
    flex: 1;
    line-height: 1.8;
}
.point.mio .point_text .catch {
    right: inherit;
    left: 2%;
}

.shine {
  transition: filter 0.3s;
}
.shine:hover {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
}


.sparkle_area {
  position: relative;
}
.sparkle_area > .sparkle_layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sparkle_area > :not(.sparkle_layer) {
  /*position: relative;
  z-index: 1;*/
}

  .sparkle_star {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #fff;
    box-shadow: 
    0 0 calc(var(--size) * 1.5) rgba(255, 255, 255, 0.7),
    0 0 calc(var(--size) * 4) rgba(255, 255, 255, 0.35),
    0 0 calc(var(--size) * 8) rgba(255, 255, 255, 0.15);;
    opacity: 0.2;
    animation: sparkle_core var(--dur) ease-in-out var(--delay) infinite;
  }

  .sparkle_star::before,
  .sparkle_star::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) * 7);
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
    transform: translate(-50%, -50%) scaleX(0);
    animation: sparkle_ray var(--dur) ease-in-out var(--delay) infinite;
    filter: blur(0.6px);
  }
  .sparkle_star::after {
    --rot: 90deg;
  }

  @keyframes sparkle_core {
    0%, 35%  { opacity: 0.2; transform: scale(0.7); }
    50%      { opacity: 1;   transform: scale(1.15); }
    65%,100% { opacity: 0.2; transform: scale(0.7); }
  }

  @keyframes sparkle_ray {
    0%, 38%  { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(0); }
    50%      { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(1); }
    62%,100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(0); }
  }

  /* 動きを減らす設定の人には、ほのかな明滅だけにする */
  @media (prefers-reduced-motion: reduce) {
    .sparkle_star { animation-duration: calc(var(--dur) * 2); }
    .sparkle_star::before,
    .sparkle_star::after { display: none; }
  }

#changeimg_pc {
  position: absolute;
  width: 100%;
  height: 100%;
}

#changeimg_pc .frame {
  position: relative; 
  width: 100%;
  height: 100%;
}
#changeimg_pc .frame img {
  position: absolute; 
  inset: 0;
  right: 0;
  left: auto;
  width: auto;
  height: calc(100% - 20px);
  opacity: 0;
  transition: opacity 0.5s ease;
  min-height: 700px;
}
#changeimg_pc .changeimg_toggle:not(:checked) ~ .frame .pic1,
#changeimg_pc .changeimg_toggle:checked ~ .frame .pic2 {opacity: 1;}
#changeimg_pc label {
    position: absolute;
    bottom: calc(50% - 100px);
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/change.png) 50% 50% no-repeat #FD79BB;
    background-size: 80% auto;
    width: 100px;
    height: 100px;
    z-index: 100;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    transition: transform 0.5s ease, background-color 0.5s ease;
    will-change: transform;
    cursor: pointer;
    text-align: center;
}
#changeimg_pc label:hover {
    background-color: #333333;
    transform: rotate(45deg);
}
#changeimg_pc label span {
  color: #FFF;
  display: inline-block; 
  transition: transform 0.5s ease;
}
#changeimg_pc label:hover span {
  transform: rotate(-45deg);
}
#changeimg_pc .changeimg_toggle {
    position: fixed;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}
#changeimg_pc .changeimg_toggle:focus-visible ~ .btn {
    outline: 3px solid #FD79BB;
    outline-offset: 4px;
}
.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);
  }
}

@media screen and (max-width: 1024px){
    .point .visual {
        width: 50%;
        flex: 0 0 50%;
        margin-right: 4%;
    }
    .point .box {
        margin-top: 0;
    }
    .lead {
        margin-bottom: 40px;
    }
    .lead p {
    font-size: 110%;
    line-height: 2;
    }
    .point dl {
        flex-direction: column !important;
        width: 100%;
    }
    .point dd {
        width: 100%;
        margin: 20px 0 0 0;
    }
    .point .visual img {
        object-position: 75% 0;
    }
    .point.mio .visual img {
        object-position: 50% 0;
    }
}
/*-----------
Product
-----------*/
.product_title {
    background: url(../images/lace.png) 0 0 / 100% auto no-repeat;
    aspect-ratio: 640 / 101;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 2%;
}
#product{
    margin-top: -70px;
    width: 100%;
    position: relative;
}
#product .dotline {
  top: 0;
  bottom: inherit;
}
#product h2 { margin: 0 auto; text-align: center;}
#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}
.product_wrap {
    padding: 0 0 100px 0;
    position: relative;
}
/*-----------
Preorder
-----------*/
.preorder_wrap {
    padding: 80px 0 150px 0;
    background: url(../images/check_bk.png) 0 0 repeat;
    background-size: 80px auto;
}
.preorder {
    background: #FFF;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    margin-top: -70px;
    padding:  70px 50px 50px;
    text-align: center;
    box-shadow: 0px 0px 30px 0px rgba(253, 121, 187, 0.6);
}
.preorder h2 { margin: 0 auto 1em auto;}
.preorder h3{font-size:160%; font-weight: 900; margin: 40px 0 0 0;}
.preorder p.date{text-align: center; font-size: 200%; font-weight: 900; margin: 0 0 40px 0;}
.preorder .btn{margin-top: 1rem;}
.shipping {
    margin: 40px auto 0 auto;
    font-size: 120%;
}
/*-----------
Slider
-----------*/
.swiper_wrap {
    position: relative;
    padding-bottom: 40px;
    text-align: center;
}

.swiper-horizontal {padding-bottom: 5px !important;}
.swiper-slide { 
    height: auto !important;
    overflow: hidden;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
  }
.swiper-slide:hover img { transform:scale(1.05); }
.swiper-pagination{position: relative!important; bottom: 0!important; margin-top: 1em;}
.swiper-pagination-bullet{background: #fff!important; opacity: 1!important;width: 13px!important; height: 10px!important; border-radius: 100px!important; border: 1px solid #FD79BB;}
.swiper-pagination-bullet-active{width: 22px!important; background: #FD79BB!important;}
.swiper-button-prev,
.swiper-button-next {
    display: block !important;
    width: 66px !important;
    height: 66px !important;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 ;
    border-radius: 66px;
    border: 3px solid #FFF;
}
.swiper-button-prev {background: url(../images/commone/arrow_white_left.png) 50% 50% no-repeat #372D2D;}
.swiper-button-next {background: url(../images/commone/arrow_white_right.png) 50% 50% no-repeat #372D2D;}
.annotation {
    display: inline-block;
    position: relative;
    background: #FFF;
    margin: 1em auto 0 auto;
    padding: .5em 1em;
    text-align: center;
    border-radius: 100px;
    z-index: 4;
}
.swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8) !important;
    transform-origin: center bottom;
    align-self: flex-end;
}
.swiper-slide-active,
.swiper-slide-duplicate-active  {
    transform: scale(1) !important;
    transform-origin: center bottom;
}
.swiper-wrapper {
    align-items: flex-end;
}
/*-----------
online
-----------*/
#online { 
    width: 100%;
    text-align: left;
    margin-top: 40px;
}
#online h3:first-of-type{margin-top: 0;}
#online h3{font-size: 1.4em; margin-top: 1em; font-size: 130%; font-weight: bold; }
#online p{margin-top: 1em;}
#online a.btn {
    margin: 2em auto auto auto;
    background: #372D2D;
    padding: .6em 1em;
    max-width: 400px;
    border: none;
    box-shadow: none;
    transition: 0.3s ease-in-out;
}
#online a.btn:hover {
    background: #806868;
}

/*-----------
footer
-----------*/
#footer_wrap {
	--slant: 22vw;
	--bottom_band: calc(var(--slant) + 120px);
    --follow_bar: 55px;
	position: relative;
	overflow: hidden;
    clip-path: inset(1px 0 0 0);
	color: #fff;
	isolation: isolate;
}
 
#footer_wrap::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	background: url("../images/footer_bg.jpg") center / cover no-repeat;
}
 
/* ---------- 上の斜めオーバーレイ（白〜ピンクのグラデ） ---------- */
.specifications {
	position: relative;
	padding: 100px 20px 40px;
}
 
.specifications::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: calc(var(--slant) + 2.5vw);
	background: linear-gradient(to bottom,
		rgba(255, 238, 247, 1) 0%,
		rgba(250, 230, 242, 0.85) 45%,
		rgba(230, 205, 225, 0.55) 100%);
	clip-path: polygon(0 0, 100% 0, 100% 2.5vw, 0 100%);
	pointer-events: none;
}
 
/* ---------- 見出し ---------- */
.specifications h2 {
	text-align: center;
}

/* ---------- スペック表 ---------- */
.specifications_inner {
    font-size: 110%;
    padding: 100px 0;
	display: grid;
	grid-template-columns: 200px 1fr;
	max-width: 960px;
	margin: 0 auto;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-shadow: 0 0 8px rgba(80, 20, 70, 0.35);
}
.specifications_inner h3,
.specifications_inner p {
	margin: 0;
	padding: 12px 0;
}
.specifications_inner h3 {
	font-weight: 700;
}
.specifications_inner p {
	padding-left: 54px;
	border-left: 1px solid rgba(255, 255, 255, 0.55);
}
 
/* ---------- フッター（下の明るい斜めオーバーレイ） ---------- */
#footer_wrap footer {
	position: relative;
	text-align: center;
    padding: 40px 20px calc(36px + var(--follow_bar));
}
 
#footer_wrap footer::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: var(--bottom_band);
	background: linear-gradient(to bottom,
		rgba(215, 190, 230, 0.55) 0%,
		rgba(200, 170, 225, 0.9) 100%);
	/* 左(0, slant)→右上(100%, 0) の斜辺 */
	clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
 
#footer_wrap footer::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: var(--bottom_band);
	background: url("../images/footer_bg_layer.png") center bottom / cover no-repeat;
	clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
 
.logo_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
}
 
.logo_wrap a {
	display: block;
	width: 232px;
	transition: opacity 0.3s;
}
 
.logo_wrap a:hover {
	opacity: 0.7;
}
 
.logo_wrap a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
 
.logo_wrap img {
	display: block;
	height: auto;
}
 
.copyright_wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
 
.copyright {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/*-----------
responsive
-----------*/
@media screen and (max-width: 768px){
    body {
        background-size: 200% auto;
        background-repeat: repeat;
    }
    .sub_title {
        font-size: 3.5em;
    }
    /*-----------
    Header
    -----------*/
    header {padding: 0;}
	header .logo .logo_gsc img,
    header .logo .logo_gscollection img { height: 32px !important; }
    header .logo ul { padding-bottom: 1em; margin-top: 14px; margin-left: 10%; }

    header .right_wrap.flex{position: absolute; z-index: 100; width: 100%; left: 0; top: -200px; height: 200px; background: rgba(255,255,255,0.8); flex-direction: column; margin: 0; justify-content: center; align-items: center;transition: all 0.2s linear;}
    header .right_wrap.flex.active{top:0;transition: all 0.2s linear;}

    header .social { display: none; }
    header .right_wrap .language,
    header .right_wrap .social{width: 100%;justify-content: center; flex-wrap: wrap; font-size:1.2em; }
    header .language li.text,
    header .social li.text{width: 100%; text-align: center; margin-top: 1em; margin-bottom: 1em;}
    header .social li.text{margin-top: 2em;}
    header .language li{padding: 0 1em;}
    header .language li:first-of-type{border: none;}

    header .menu_btn{width: 30px; height: 30px; display: block;position: relative; z-index: 200;}
    header .menu_btn:hover{cursor: pointer;}
    header .menu_btn span{position: absolute; background: #000; width: 100%; height: 2px; display: block; right: 0; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::after,
    header .menu_btn span::before{content: ""; position: absolute; right: 0; height: 2px; background: #000; display: block;}
    header .menu_btn span::after{width: 100%; top: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::before{width: 100%; bottom: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    
    header .menu_btn.active span::after{transform: rotate(45deg);width: 30px; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span::before{transform: rotate(-45deg); width: 30px; bottom: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span{background:transparent;-webkit-transition: .2s ease;transition: .2s ease;}
    /*-----------
    MV
    -----------*/
    .mv { aspect-ratio: 750 / 1200; }
    /* 全身の画像だけを使う（顔アップは非表示）。下部はタイトル用に少し暗く */
    .mv::before {
        background:
        linear-gradient(180deg, rgba(120, 80, 170, 0) 45%, rgba(120, 80, 170, 0.55) 100%),
        url("../images/mv_right_sp.jpg") center top / cover no-repeat,
        linear-gradient(180deg, #2f9bf0 0%, #7fb6f2 30%, #b9a6ec 100%);
    }
    .mv_bg_left,
    .mv_diagonal { display: none; }
    
    .mv_frame {
        top: 78%;
        left: 3%;
        width: 35cqw;
    }
    .mv_title_block {
        top: 71.5%;
        left: 7%;
        width: 86%;
    }
    #ZH .mv_title_block {
        top: 68%;
        left: 7%;
    }
    .mv_sub_title { width: 70cqw !important; }
    .mv_main_title { width: 82cqw !important; margin-top: 2.4cqw; }
    .mv_en_title { width: 60cqw; margin-top: 2.6cqw; }
    
    /* メニューボタンまわりの装飾（ボタン：上から14px・右から2%・40px角） */
    .mv_sp_deco { display: block; }
    .mv_sp_deco::before,
    .mv_sp_deco::after {
        content: "";
        position: absolute;
    }
    /* ボタンの左：ストライプ＋横線 */
    .mv_sp_deco::before {
        top: calc(14px + 20px - 3px);
        right: calc(2% + 40px + 10px);
        width: 150px;
        height: 6px;
        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 / 62px auto no-repeat,
        linear-gradient(#fff, #fff) right center / 82px 1px no-repeat;
    }
    /* ボタンの下：縦線（ボタンの中央に揃える） */
    .mv_sp_deco::after {
        top: calc(14px + 40px + 8px);
        right: calc(2% + 20px);
        width: 1px;
        height: 32cqw;
        background: #fff;
        transform-origin: top;
    }
    .mv_sp_deco::before { clip-path: inset(0 100% 0 0); }
    .mv_sp_deco::after { transform: scaleY(0); }
    .mv.is_loaded .mv_sp_deco::before { animation: sp_stripe_reveal 0.9s var(--ease_out) 1.4s forwards; }
    .mv.is_loaded .mv_sp_deco::after { animation: sp_line_grow 0.9s var(--ease_out) 1.8s forwards; }

    #stickybar {
        height: auto;
        padding: 1em 0;
    }
    #stickybar a {
        width: 86%;
        font-size: 110%;
        max-width: inherit;
        height: auto;
        margin: 0 auto;
        padding: .8em 0;
    }
    .catch {
        background: url(../images/lace.png) 0 0 / auto 100% no-repeat;
        aspect-ratio: unset;
        position: absolute;
        height: 28vw;
        top: -4vw;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 2%;
    }
    .catch img {
        width: 94%;
        height: auto;
    }
    #changeimg_pc label {
        bottom: calc(60% - 70px);
        left: inherit;
        right: 0;
        width: 70px;
        height: 70px;
    }
    #changeimg_pc .frame img {
    min-height: inherit;
    }
    /*-----------
    #point
    -----------*/
    .point {
        width: 100%;
        padding: 30vw 0 40px 0;
    }
    .point h2 { margin: 0 auto 40px auto;}
    .point .inner {
        flex-direction: column;
    }
    .point .visual {
        width: 92%;
        margin: 0 auto;
        position:relative;
        order: -1;
    }
    .box_wrap {
        width: 92%;
        order: 2;
        padding-top: 40px;
        margin: 0 auto;
    }
    .point .img_wrap {
        align-items: center;
        margin: 0 auto;
    }
    .point dl {
        width: 100%;
        margin-bottom: 40px !important;
    }
    .lead {
        margin-bottom: 40px;
    }
    .lead p br {
        display: none;
    }
    .point .box {margin-top: 0;}
    
    /*-----------
    product
    -----------*/
    #product {
        padding: 40px 0;
        position: relative;
        height: auto;
        min-height: auto;
    }
    .product_title {
        background: url(../images/lace.png) 0 0 / auto 100% no-repeat;
        aspect-ratio: unset;
        width: 100%;
        height: 28vw;
        margin-bottom: 40px;
    }
    .product_wrap {padding-bottom: 5em;}

    .preorder_wrap {
        padding: 30px 0 60px 0;
        background-size: 40px auto;
    }
    .specifications{ padding: 20px 4% 0 4%; }
    .specifications_inner {padding: 40px 0 20px 0;grid-template-columns: 9em 1fr;}
    .specifications h3 {font-size: 105%; text-align: right; padding-right: 2em;}
    .specifications dl {width: 100%; margin: 0 auto;}
    .specifications dl::after {background: none;}
    .specifications dt{float: none;width: 100%; padding: 0 0 .5em; margin-top: 2em; text-align: center;}
    .specifications dt:first-of-type{margin-top: 1em;}
    .specifications dd{width: 100%; margin-left: 0; padding: 0; border: none; text-align: center;}
    #EN .specifications dt span { font-size: 100%; }
    #bottom_section {padding: 5em 0;}
    .specifications_inner p {padding-left: 2em;}
    /*-----------
    preorder_fixd
    -----------*/
    .preorder {
        width: 90%;
        margin: -10vw auto 0 auto;
        padding: 45px 4% 40px 4%;
    }
    .preorder h3 {
        margin: 1em auto;
        font-size: 120%;
    }
    .preorder h3,
    .preorder p.date {
        width: 100%;
    }
    .preorder p.date {
        margin: 0 0 30px 0;
    }
    #EN .preorder p.date {
        font-size: 140%;
    }
    #EN .specifications dt span {width: auto;}
    #EN .specifications dd {margin-left: 0;}
    /*-----------
    footer
    -----------*/
    #footer_wrap {

    }
    footer {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        padding-bottom: 6em;
    }
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    .logo_wrap a img {
        width: auto;
        height: 40px;
    }
    .logo_wrap a {width: auto;}
    /*-----------
    Online
    -----------*/
    #online {
        width: 90%;
        margin: 40px auto 0 auto;
        padding: 0;
    }
    #online a.btn {
        margin: 40px auto 0 auto;
        padding: 1em;
    }
    .online_wrap {padding: 5em 4% 0 4%;}
    #online h3 { font-size: 1.3em; }

    .logo_wrap{margin: 0 auto 3em auto;}
    .copyright{text-align: center;}
    .copyright_wrap { display: block; }
    .copyright span img { width: 3.5em; }

}