@charset "utf-8";

/* CSS Document */
* {
  margin: 0;
}

html {
  font-family: m-plus-rounded-1p, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

.bold {
  font-weight: 700;
}

a,
a img,
.container ul li {
  transition: all 0.6s;
}

ul {
  padding-inline-start: 0;
}

.remodal.product .container img {
  width: 100%;
}

/* ローディングアニメーション */
.start {
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.en .start {
  display: none !important;
}

.spinner-box {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-box .opening_logo {
  position: fixed;
  /*top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  display: none;
  z-index: 10000;
  animation: lights 2s 0.2s infinite;
}

.spinner-box .opening_logo {
  width: 100%;
  max-width: 460px;
}

@keyframes lights {
  0% {
    filter: drop-shadow(0 0 10px rgba(6, 255, 247, 0));
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(6, 255, 247, 0.4));
  }

  100% {
    filter: drop-shadow(0 0 10px rgba(6, 255, 247, 0));
  }
}

.pulse-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.pulse-bubble {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  display: none;
}

.pulse-bubble-1 {
  background-color: #65efff;
}

.pulse-bubble-2 {
  background-color: #00e5c6;
}

.pulse-bubble-3 {
  background-color: #ffff01;
}

.pulse-bubble-4 {
  background-color: #ff7ac5;
}

.pulse-bubble-5 {
  background-color: #b52bf0;
}

.pulse-bubble-6 {
  background-color: #0510f5;
}

.pulse-bubble-1,
.pulse-bubble-2,
.pulse-bubble-3,
.pulse-bubble-4,
.pulse-bubble-5,
.pulse-bubble-6 {
  animation: pulse 1s -1.5s infinite linear;
}

.pulse-bubble-2 {
  animation-delay: -0.2s;
}

.pulse-bubble-3 {
  animation-delay: -0.3s;
}

.pulse-bubble-4 {
  animation-delay: -0.4s;
}

.pulse-bubble-5 {
  animation-delay: -0.5s;
}

.pulse-bubble-6 {
  animation-delay: -0.6s;
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

#to_top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: url("../images/to_top_button.svg");
  background-size: contain;
  opacity: 0;
  z-index: 999;
  cursor: pointer;
}

#to_buy {
  position: fixed;
  bottom: 30px;
  left: -125px;
  text-align: center;
  z-index: 999;
}

.buy_icon {
  position: relative;
  width: 125px;
  height: 125px;
}

.buy_icon img {
  width: 100%;
}

.buy_icon::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 125px;
  height: 129px;
  background: url(../images/buy_icon_txt.png) no-repeat;
  background-size: contain;
  animation: click-here 5s linear infinite;
}

.buy_arrow {
  margin-top: 20px;
}

.name_noel {
  position: absolute;
  top: 14vw;
  left: 17vw;
  width: 17vw;
  max-width: 415px;
  z-index: 99;
}

.name_noel img,
.name_chloe img {
  width: 100%;
}

.name_chloe {
  position: absolute;
  top: 14vw;
  right: 14vw;
  width: 17vw;
  max-width: 413px;
  z-index: 99;
}

.att_txt {
  font-size: 1.094vw;
  font-weight: 500;
  margin-top: 3.49vw;
}

@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }

  .flex {
    display: flex;
  }

  .inner {
    max-width: 1600px;
    width: 90%;
    /* padding-left: 20px;
    padding-right: 20px; */
    margin: 0 auto;
    margin-top: 1vw;
    box-sizing: border-box;
  }

  .common_padding {
    padding-top: 50px;
    padding-bottom: 100px;
  }

  #to_top {
    width: 80px;
    height: 80px;
  }

  #main_visual_wrap {
    background: url("../images/main_back_circle.svg") no-repeat center bottom
        0vw / 54.5vw,
      url("../images/back_dots.png") no-repeat left -30% top -140% / 40%,
      url("../images/back_dots.png") no-repeat right -30% bottom 35% / 40%;
    padding-top: 11vw;
    padding-bottom: 10vw;
  }

  .first_section {
    background: url(../images/mv_bg_img.svg) no-repeat center top / cover;
  }

  header {
    position: absolute;
    top: 1vw;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    max-width: 75vw;
    display: flex;
    justify-content: center;
    z-index: 5;
  }

  header h1 img {
    width: 40vw;
    margin-right: 2vw;
    margin-left: auto;
  }

  .wireless_earphones {
    max-width: 36vw;
    width: 100%;
    margin-left: 0;
    margin-top: 3.5vw;
  }

  .wireless_earphones img {
    max-width: 100%;
  }

  #intro_section {
    z-index: 99;
    background: url("../images/back_dots.png") no-repeat left -15% bottom 50% / 40%;
    position: relative;
    color: #4b4b4b;
  }

  #intro_wrap {
    /* overflow: hidden; */
  }

  #top_heading_wrap {
    padding-top: 10px;
    position: relative;
    z-index: auto;
  }

  .bottom_circle {
    box-shadow: 0 10px 0 10px #b4eefa;
    background: #007cf6;
    border-bottom-left-radius: 150%;
    border-bottom-right-radius: 150%;
    height: 700px;
    margin-top: -500px;
    margin-left: -100px;
    margin-right: -100px;
    padding-left: 100px;
    padding-right: 100px;
  }

  .top_heading_inner {
    position: absolute;
    top: -6vw;
    left: 50%;
    transform: translate(-50%);
    z-index: 9;
  }

  .top_heading {
    width: 50%;
    margin: 0 auto;
  }

  .top_heading.en {
    width: 80%;
  }

  .top_heading img {
    width: 100%;
  }

  .heading_img img {
    max-width: 740px;
  }

  .intro.en {
    width: 80%;
    margin: 0 auto;
  }

  .intro p {
    margin: 0 auto;
    margin-top: 10px;
    width: 100%;
    font-size: 2.6vw;
    line-height: 1.3;
    font-weight: bold;
    font-family: heisei-maru-gothic-std, sans-serif;
    color: #40bdef !important;
    text-shadow: 3px 3px 0px #fff, -3px -3px 0px #fff, -3px 3px 0px #fff,
      3px -3px 0px #fff, 3px 0px 0px #fff, -3px -0px 0px #fff, 0px 3px 0px #fff,
      0px -3px 0px #fff;

    text-align: center;
  }

  .back_triangle_relative,
  .back_triangle_relative_2 {
    position: relative;
  }

  .back_triangle_pink,
  .back_triangle_yellow_left,
  .back_triangle_blue,
  .back_triangle_yellow_right {
    transform-origin: center center 0;
    position: absolute;
    z-index: -1;
  }

  .back_triangle_pink {
    top: 0;
    left: 0;
  }

  .back_triangle_yellow_left {
    bottom: 0;
    left: 5vw;
  }

  .back_triangle_blue {
    top: 0;
    right: 15vw;
  }

  .back_triangle_yellow_right {
    bottom: 0;
    right: 10vw;
  }

  .info {
    font-size: 1.56vw;
    color: #4b4b4b;
  }

  .info .flex {
    display: flex;
    align-items: center;
  }

  .info.back_triangle_relative {
    margin-top: 15vw;
  }

  .info .heading,
  .box_01,
  .box_02 {
    width: 49%;
  }

  .info .heading {
    margin: 0 auto;
  }

  .info p {
    width: 80%;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 2.1vw;
    line-height: 1.3;
    font-weight: bold;
    font-family: heisei-maru-gothic-std, sans-serif;
    color: #fff !important;
    text-shadow: 3px 3px 0px #40bdef, -3px -3px 0px #40bdef,
      -3px 3px 0px #40bdef, 3px -3px 0px #40bdef, 3px 0px 0px #40bdef,
      -3px -0px 0px #40bdef, 0px 3px 0px #40bdef, 0px -3px 0px #40bdef;
    z-index: 3;
  }

  .info .flex,
  ul.standard-feature,
  #noel-model_wrap .flex,
  #chloe-model_wrap .flex {
    justify-content: space-between;
  }

  #products {
    background: url("../images/back_dots.svg") no-repeat top 0% left -5% / 40%,
      url("../images/back_dots.svg") no-repeat center left -5% / 30%,
      url("../images/back_dots.svg") no-repeat center left -5% / 30%;
  }

  #noel-model_wrap {
    background: url("../images/back_dots.png") no-repeat top 110% left -10% / 40%,
      url("../images/back_dots.png") no-repeat top 0% right -20% / 30%,
      url(../images/noel-model_wrap_bg.svg) no-repeat top center / cover;
  }

  #chloe-model_wrap {
    background: url("../images/back_dots02.svg") no-repeat top -100% left -20% /
        40%,
      url("../images/back_dots02.svg") no-repeat top 50% right -50% / 50%,
      url(../images/chloe-model_wrap_bg.svg) no-repeat top center / cover;
  }

  #noel-model_wrap,
  #chloe-model_wrap {
    position: relative;
    padding-top: 1vw;
    padding-bottom: 1.615vw;
  }

  #noel-model_wrap .flex,
  #chloe-model_wrap .flex {
    align-items: center;
    flex-direction: row-reverse;
  }

  .box_01 {
    width: 43%;
  }

  .box_02 {
    width: 52%;
  }

  #chloe-model_wrap .chloe-model_wrap_en .box_02 h2 {
    margin-top: 2.083vw;
  }

  #noel-model_wrap .noel-model_wrap_en .box_02 h2 {
    margin-top: 1.042vw;
    position: relative;
    z-index: 1;
  }

  #noel-model_wrap .box_02 h2 img,
  #chloe-model_wrap .box_02 h2 img {
    width: 100%;
  }

  #noel-model_wrap .box_02 h2 img:first-of-type {
    width: 110%;
  }

  #noel-model_wrap .noel-model_wrap_en .box_02 h2 img:first-of-type {
    width: 130%;
  }

  #chloe-model_wrap .box_02 h2 img:first-of-type {
    width: 130%;
  }

  #chloe-model_wrap .chloe-model_wrap_en .box_02 h2 img:first-of-type {
    width: 133%;
  }

  #noel-model_wrap .box_02 h2 img:nth-of-type(2) {
    margin-top: -25px;
    margin-left: 20px;
    position: relative;
    z-index: -1;
    width: 105%;
  }

  #noel-model_wrap .noel-model_wrap_en .box_02 h2 img:nth-of-type(2) {
    margin-top: -4.948vw;
    margin-left: -5.208vw;
    position: relative;
    z-index: -1;
    width: 107%;
  }

  #chloe-model_wrap .box_02 h2 img:nth-of-type(2) {
    margin-top: -25px;
    margin-left: 50px;
    position: relative;
    z-index: -1;
    width: 115%;
  }

  #chloe-model_wrap .chloe-model_wrap_en .box_02 h2 img:nth-of-type(2) {
    margin-top: -4.687vw;
    margin-left: -3.646vw;
    position: relative;
    z-index: -1;
    width: 115%;
  }

  .article_line_noel,
  .article_line_chloe {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: skewY(-4deg);
    transform-origin: top left;
  }

  .article_line_noel {
    background: url("../images/back_voicesample_noel.svg") no-repeat top right /
        20%,
      url("../images/back_dots.svg") no-repeat top -20% left -5% / 30%,
      url("../images/back_dots.svg") no-repeat bottom right -5% / 30%, #46b0f2;
  }

  .article_line_chloe {
    background: url("../images/back_voicesample_gura.svg") no-repeat bottom left
        4% / 20%,
      url("../images/back_dots.svg") no-repeat bottom right -5% / 30%, #65efff;
  }

  .box_01 img,
  .heading img,
  .wireless_earphones img,
  .heading_img img,
  .we_noel img,
  .we_chloe img,
  .container .flex figure img,
  .function img {
    width: 100%;
  }

  .box_02 h2 + div.swiper-wrap,
  div.swiper-wrap + div {
    margin-top: 40px;
  }

  .noel-model_wrap_en .box_02 h2 + div.swiper-wrap {
    margin-top: 10px;
  }

  /* ボイスサンプル */
  .voice-sample {
    width: 90%;
  }

  .remodal.noel {
    background: url("../images/back_dots.png") no-repeat bottom -40% left -25% /
        40%,
      url("../images/back_dots.png") no-repeat top -190% right -15% / 40%,
      url("../images/back_dots.png") no-repeat bottom -100% right -25% / 40%,
      url(../images/noel-model_wrap_bg.svg) no-repeat top center / cover;
  }

  .remodal.chloe {
    background: url("../images/back_dots.png") no-repeat bottom -40% left -25% /
        40%,
      url("../images/back_dots.png") no-repeat top -190% right -15% / 40%,
      url("../images/back_dots.png") no-repeat bottom -100% right -25% / 40%,
      url(../images/chloe-model_wrap_bg.svg) no-repeat top center / cover;
  }

  .remodal .h3_back {
    padding: 20px 80px;
  }

  .remodal .h3_back h3 {
    width: 50%;
  }

  .container .flex figure {
    width: 52%;
  }

  .container .flex ul {
    width: 45%;
  }

  .container .flex {
    padding: 2.283vw 0 2.642vw 5.469vw;
  }

  .container ul li {
    font-size: 1.4vw;
    padding: 0.417vw 0 0.417vw calc(1.4em + 40px);
  }

  .remodal.noel li.key::after,
  .remodal.chloe li.key::after {
    left: 20px;
  }

  #gaming-mode {
    position: relative;
  }

  #gaming-mode .circle_group_02 {
    top: 0;
  }

  /* その他標準機能 */
  .standard-feature {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 0px;
  }

  li.function {
    width: 30%;
  }

  li.function .detail {
    font-size: 2rem;
  }

  /* 予約受付中 */
  #book_now_wrap .contents_area {
    padding: 80px 2.5% 130px;
  }

  #book_now_wrap .book_now_wrap_en {
    padding: 4.948vw 2.5% 130px;
  }

  .book_now h2 img {
    width: 90%;
    max-width: 65.26vw;
  }
  .book_now_wrap_en .book_now h2 img {
    width: 98%;
    max-width: 76.354vw;
  }

  .book_now p {
    background: #00cee6;
    /* border-radius: 500px; */
    line-height: 1;
    padding: 10px 0 10px;
    margin-top: 40px;
  }

  .book_now_wrap_en .book_now p {
    background: #00cee6;
    /* border-radius: 500px; */
    line-height: 1;
    padding: 10px 0 10px;
    margin-top: 4.748vw;
  }

  .book_now p span {
    color: #fff;
    font-weight: 800;
    font-size: 2.6vw;
    line-height: 1;
  }

  .book_now p.en span {
    font-size: 1.6vw;
  }

  .book_now + div {
    margin-top: 60px;
  }

  .book_now + .shop_list_area_en div {
    margin-top: 3.125vw;
  }

  /*#book_now_wrap .contents_area p {
    font-size: 3rem;
    margin: 40px 0;
  }*/

  #book_now_wrap h3 {
    font-size: 3vw;
  }

  #book_now_wrap .flex {
    justify-content: space-between;
  }

  #book_now_wrap .flex.flex_c {
    justify-content: center;
  }

  #book_now_wrap .flex .btn {
    width: 40%;
  }

  #book_now_wrap .flex span {
    width: 40%;
    font-size: 1.823vw;
    display: block;
    color: #646464;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
    margin-top: 1rem;
    text-align: center;
  }

  #book_now_wrap .flex span br {
    display: none;
  }

  .shop_list_area table img {
    width: 6vw;
  }

  table {
    width: 49.5%;
  }

  .shop_list_area_en table {
    width: 100%;
  }

  .shop_list_area_en table tr {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .shop_list_area_en table tr th {
    width: 20%;
  }

  .shop_list_area_en table tr th:nth-child(2),
  .shop_list_area_en table tr th:nth-child(3) {
    width: 18%;
  }

  .shop_list_area_en table tr td:first-child {
    width: 20%;
  }

  .shop_list_area_en table tr td:nth-child(2),
  .shop_list_area_en table tr td:nth-child(3) {
    width: 18%;
  }

  table tr.opa_0 {
    opacity: 0;
  }

  table tr:nth-child(odd) {
    background: #fff !important;
  }

  table tr:nth-child(even) {
    background: #cdccd33b;
  }

  table tr th {
    font-size: 1.458vw;
  }

  table tr th {
    font-size: 1.458vw;
    line-height: 1.758vw;
  }

  .shop_list_area_en table tr th {
    font-size: 1.458vw;
  }

  table tr th ruby {
    font-size: 1.1rem;
  }

  table tr td:first-child {
    width: 40%;
    font-size: 1.823vw;
    line-height: 2.2vw;
  }

  table tr td:nth-child(2),
  table tr td:nth-child(3) {
    width: 25%;
  }

  .last_table table {
    /* margin: 0 auto; */
  }

  .last_table span::after {
    left: -90px;
    width: 5.5vw;
    height: 5.5vw;
  }

  .last_table.en_table::after {
    left: 25%;
  }

  div + .last_table {
    margin-top: 80px;
  }
}

#main_visuals {
  position: relative;
}

.wireless_earphones {
  position: relative;
  z-index: 4;
}

.mainchara {
  text-align: center;
  position: relative;
  z-index: 3;
  width: 38.479vw;
  margin: 0 23.646vw;
}

.first_section_en .mainchara {
  text-align: center;
  position: relative;
  z-index: 3;
  width: 38.479vw;
  margin: 0 25.677vw;
}

.mainchara img {
  /* max-width: 969px; 
  max-width: 50vw;*/
  width: 100%;
  padding-top: 0.521vw;
  opacity: 0;
}

.first_section_en .mainchara img {
  /* max-width: 969px; 
  max-width: 50vw;*/
  width: 100%;
  padding-top: 0;
  opacity: 0;
}

.heading_img,
h4.heading,
h2 {
  text-align: center;
}

.intro .heading_img + p {
  margin-top: 20px;
}

.we_noel,
.we_chloe {
  position: absolute;
  bottom: -6vw;
  z-index: 2;
  width: 22.4vw;
  height: 22.4vw;
  transition: 0.4s;
}

.we_noel:hover,
.we_chloe:hover {
  transform: scale(1.1);
}

.we_noel {
  left: 0vw;
}

.we_chloe {
  right: 0vw;
}

.intro {
  color: #4b4b4b;
}

.second_section {
  background: url(../images/second_bg_img.svg) no-repeat center center / cover;
}

.heading_wrap {
  padding: 70px 0;
  background: url("../images/back_dots02.svg") no-repeat center left -10% / 45%,
    linear-gradient(10deg, #ffa5c9 0%, #ffa5c9 50%, #fbbcd5 50%, #fbbcd5 100%);
  border-bottom: 1vw solid #b4eefa;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}

.heading_wrap img {
  width: 25%;
}

.heading_wrap h2 {
  color: #fff;
  font-size: 2.86vw;
  margin-top: 5px;
}

/* swiper */
.swiper-wrap {
  border-radius: 50px;
  background: rgba(255, 255, 255, 1);
}

@media screen and (min-width: 768px) {
  #noel-model_wrap .swiper-wrap {
    box-shadow: 20px 20px 0px rgba(74, 85, 97, 0.9);
  }

  #chloe-model_wrap .swiper-wrap {
    box-shadow: 20px 20px 0px rgba(139, 5, 4, 0.9);
  }
}

.swiper-slide {
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.swiper-slide img {
  display: inline;
  width: auto;
  max-width: 90%;
  max-height: 100%;
  align-self: center;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

.swiper-button-next,
.swiper-button-prev {
  width: 3.385vw !important;
  height: 3.385vw !important;
}

.swiper-button-next {
  background: url("../images/slider_button.svg") no-repeat center center / cover;
  transition: 0.1s;
}

.swiper-button-next:hover {
  background: url("../images/slider_button_hover.svg") no-repeat center center /
    cover;
}

.swiper-button-prev {
  background: url("../images/slider_button.svg") no-repeat center center / cover;
  transform: scale(-1, 1);
  /* 左右反転 */
  transition: 0.1s;
}

.swiper-button-prev:hover {
  background: url("../images/slider_button_hover.svg") no-repeat center center /
    cover;
}

.swiper-button-next.chloe,
.swiper-button-prev.chloe {
  background-image: url("../images/slider_button_chloe.svg");
}

.swiper-button-next.chloe:hover,
.swiper-button-prev.chloe:hover {
  background-image: url("../images/slider_button_chloe_hover.svg");
}

#noel-model_wrap .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background: #fff;
  border: 3px solid #89939d;
  opacity: 1;
}

#noel-model_wrap .swiper-pagination-bullet-active {
  background: #89939d;
}

#chloe-model_wrap .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background: #fff;
  border: 3px solid #c90d40;
  opacity: 1;
}

#chloe-model_wrap .swiper-pagination-bullet-active {
  background: #c90d40;
}

#noel-model_wrap
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet,
#chloe-model_wrap
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 6px;
}

/* モーダル画面 */
.remodal {
  border-radius: 35px;
  overflow: hidden;
  padding: 0 !important;
  box-sizing: border-box;
}

.remodal-close {
  z-index: 999;
}

.remodal.noel,
.remodal.chloe {
  box-sizing: border-box;
}

.remodal.noel {
  box-shadow: 0 0 0 10px #6c737b;
}

.remodal.chloe {
  box-shadow: 0 0 0 10px #ab0e0c;
}

.remodal .h3_back {
  padding: 20px 80px;
  border-bottom: 10px solid #b4eefa;
  background: linear-gradient(to top, #007cf6, #00cee6);
  transform: skewY(-10deg);
}

.container .flex {
  align-items: flex-start;
  box-sizing: border-box;
  flex-direction: row-reverse;
}

.container .voice_title {
  width: 45.781vw;
  margin-top: 0.521vw;
  margin-left: 6.771vw;
  margin-bottom: -2.083vw;
}

.container .voice_title img {
  width: 100%;
}

.container ul li {
  box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  border-radius: 40px;
  border: solid 3px #fff;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.3));
  list-style: none;
  position: relative;
  text-align: left;
}

.noel .container ul li {
  color: #6c747c;
}

.chloe .container ul li {
  color: #ab0e0c;
}

.noel .container ul li:hover {
  border-color: #6c747c;
}

.chloe .container ul li:hover {
  border-color: #cf4c4a;
}

.container ul li + li {
  margin-top: 20px;
}

.remodal.noel li.key::after,
.remodal.chloe li.key::after {
  content: "";
  display: inline-block;
  top: calc(50% - 20px);
  left: 10px;
  position: absolute;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}

.remodal.noel li.key::after {
  background: url("../images/voice_sample_button_noel.svg") no-repeat center
    center / cover;
}

.remodal.chloe li.key::after {
  background: url("../images/voice_sample_button_chloe.svg") no-repeat center
    center / cover;
}

/* その他標準機能 */

.heading_wrap img {
  margin: 0 auto;
}

li.function {
  list-style: none;
  color: #89939d;
  font-size: 1.82vw;
  text-shadow: 3px 3px 0px #fff, -3px -3px 0px #fff, -3px 3px 0px #fff,
    3px -3px 0px #fff, 3px 0px 0px #fff, -3px 0px 0px #fff, 0px 3px 0px #fff,
    0px -3px 0px #fff;
  font-family: m-plus-rounded-1p, sans-serif;
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
}

li.function .detail {
  display: block;
  font-size: 1.04vw;
  margin: 10px 0;
  font-weight: 800;
}

#book_now_wrap {
  padding: 5% 0% 4%;
  text-align: center;
}

#book_now_wrap .contents_area {
  background: #fff;
  border-radius: 30px;
  margin: 0 auto;
  box-sizing: border-box;
}

#book_now_wrap h3 {
  font-size: 4rem;
  margin-bottom: 25px;
}

#book_now_wrap .contents_area p {
  line-height: 1.6;
  background: #acabb2;
  padding-right: 20px;
  padding-left: 20px;
  color: #fff;
}

.head-border {
  position: relative;
  display: inline-block;
  padding: 0 35px;
}

.head-border:before,
.head-border:after {
  content: "";
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #8ad1f7;
}

.head-border:before {
  left: 0;
}

.head-border:after {
  right: 0;
}

#book_now_wrap h3,
table tr th {
  color: #89939d;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* table 矢印 */
table tr th svg {
  position: absolute;
  bottom: -5px;
  width: 1.5em;
  height: 1.5em;
  left: calc(50% - 0.75em);
  z-index: 10;
}

table tr td:first-child {
  font-weight: 700;
}

table tr td {
  color: #89939d;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

table tr th {
  padding-bottom: 45px;
  position: relative;
  font-weight: 800;
}

.shop_list_area_en table tr th {
  padding-bottom: 1.823vw;
  position: relative;
  font-weight: 800;
}

table tr td a img:hover {
  transform: scale(1);
  opacity: 0.7;
}

div + .last_table {
  margin-top: 80px;
}

.last_table {
  position: relative;
}

.last_table span::after {
  content: url("../images/icon_plane.svg");
  position: absolute;
  top: 10px;
  z-index: 10;
}

.footer_wrap {
  font-size: 1.6rem;
  line-height: 1.8;
  padding: 20px;
  text-align: center;
  background: #fff;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1);
}

.footer_wrap img {
  max-width: 140px;
}

/* ボイスサンプル */
.voice_list {
  z-index: 9;
}

.voice-sample {
  display: block;
  box-sizing: border-box;
  margin: 0 0 0 auto;
  position: relative;
  filter: drop-shadow(10px 10px 0px #fff);
  transition: all 0.4s;
}

.sample_txt {
  position: absolute;
  width: 19.792vw;
  height: 3.125vw;
  top: 38%;
  left: 5%;
  z-index: 10;
}

.sample_txt2 {
  position: absolute;
  width: 4.167vw;
  height: 4.688vw;
  top: 31%;
  right: 12%;
  z-index: 10;
}

/*波形の設定*/
.sample_txt:hover::before {
  content: "";
  position: absolute;
  left: 45%;
  top: 0;
  border: 1px solid #fff;
  width: 3.125vw;
  height: 3.125vw;
  border-radius: 50%;
  opacity: 1;
  animation: 1s circleanime2 infinite;
}

.sample_txt2:hover::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 20%;
  border: 1px solid #fff;
  width: 3.125vw;
  height: 3.125vw;
  border-radius: 50%;
  opacity: 1;
  animation: 1s circleanime2 infinite;
}

/*波形が広がるアニメーション*/
@keyframes circleanime2 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.voice-sample img {
  position: relative;
  top: 0;
  left: 0;
  transition: all 0.4s;
}

.voice-sample:hover {
  /*filter: drop-shadow(10px 10px 0px #fff) brightness(1.2);*/
  filter: drop-shadow(0px 0px 0px #fff);
}

.voice-sample:hover img {
  top: 10px;
  left: 10px;
}

.button_text {
  width: 77%;
}

.voice-sample::before,
.voice-sample::after {
  content: "";
  position: absolute;
}

/* .voice-sample::before {
  background: url("../images/click-arrow.svg") no-repeat;
  background-position: center;
  width: 6%;
  height: 100%;
  top: 50%;
  right: 6vw;
  transform: translateY(-50%);
} */
.voice-sample::after {
  animation: click-here 5s linear infinite;
  background: url("../images/click-here.svg") no-repeat center center / cover;
  background-position: center;
  width: 35%;
  height: calc(100% - 35px);
  top: 18px;
  right: 5px;
  transition: all 0.4s;
}

.voice-sample:hover::after {
  top: 1.458vw;
  right: -0.26vw;
}

@keyframes click-here {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.m0a {
  margin: 0 auto;
}

.w_50 {
  width: 50%;
}

.alignC {
  text-align: center;
}

.banner_list {
  list-style: none;
  width: 60%;
  margin: 6% auto 0px;
  display: grid;
  gap: 30px 0;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
}

.banner_list li:nth-of-type(2n) {
  margin-right: 15px;
}

.banner_list li:nth-of-type(2n + 1) {
  margin-left: 15px;
}

.banner_list li:first-of-type {
  grid-area: 1 / 1 / 2 / 4;
  margin-left: 0;
}

.banner_list li:first-of-type img {
  width: calc(50% - 30px);
}

.banner_list img {
  transition: 0.4s;
  width: 100%;
}

.banner_list img:hover {
  filter: brightness(0.5);
}

.language {
  position: fixed;
  right: 2%;
  top: 2%;
  z-index: 999;
  width: 4.0625vw;
  height: 4.6875vw;
  transition: 0.1s;
}

.language::before {
  content: "";
  background: url(../images/language_border.svg) no-repeat center center / cover;
  width: 4.0625vw;
  height: 4.6875vw;
  position: fixed;
  right: 2%;
  top: 2%;
  transition: 0.1s;
  z-index: 9;
  pointer-events: none;
}

.language:hover::before {
  transform: rotate(-35deg);
  top: 2.5%;
}

.language span,
.language a {
  font-size: 1.35vw;
  /* font-weight: bold; */
  color: #fff;
  text-decoration: none;
  font-family: "Fredoka One", sans-serif;
  display: block;
  text-align: center;
  line-height: 4.6875vw;
  margin-left: 1vw;
  transition: 0.1s;
  z-index: 9999;
}

.language span {
  display: block;
}

.language a {
  display: none;
}

.language:hover span {
  display: none;
}

.language:hover a {
  display: block;
}

/* lightbox */
.lb-dataContainer {
  z-index: 99;
  position: absolute;
  top: -5%;
  left: 49%;
  transform: translateX(-50%);
  width: 100%;
  padding-top: 58px !important;
}

.lb-data .lb-close {
  background: url(../images/close_btn_noel.png) top right no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
  width: 86px !important;
  height: 86px !important;
}

.lb-data .lb-closeContainer.chloe .lb-close {
  background: url(../images/close_btn_chloe.png) top right no-repeat !important;
  background-size: cover !important;
}

.lb-outerContainer {
  border-radius: 50px !important;
}

.lightbox .lb-image {
  border: none !important;
}

.lb-nav a.lb-next,
.lb-nav a.lb-prev {
  background-size: 65px !important;
}

.btn {
  margin-top: 0rem;
}

.btn a {
  display: block;
  text-decoration: none;
  max-width: 540px;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border: 5px solid #acabb2;
  color: #6c747c;
  border-radius: 500px;
  font-size: 1.832vw;
  font-weight: bold;
  padding: 15px 0 15px;
  transition: 0.4s;
}

.btn a:hover {
  background-color: #acabb2;
  border: 5px solid #fff;
  color: #fff;
}

.table_blank {
  background: #fff !important;
}

.table_blank td {
  pointer-events: none;
  opacity: 0;
}

.back_blue span {
  display: block;
  font-size: 1.5vw;
  display: block;
  color: #646464;
  text-align: center;
  padding: 40px 0;
  box-sizing: border-box;
  font-weight: bold;
  margin-top: 4rem;
  background: #c6e3ff75;
}

/* 販売終了 */
/* 販売終了 */
/* 販売終了 */
.close_reserve {
  position: relative;
  background: #fff !important;
}

.back_blue.close_reserve {
  background: #eee !important;
}

.close_reserve.btn {
  background: none !important;
}

.close_reserve td:last-child a::before {
  content: "販売終了";
  position: absolute;
  width: 100%;
  /* top: 2.5vw;
  right: 1.6vw; */
  top: -3.8vw;
  right: -1px;
  color: #aaa;
  font-size: 1.4vw;
  background-color: #fff;
  border: 3px solid #b5b5b5;
  z-index: 99;
  font-family: heisei-maru-gothic-std, sans-serif;
  padding: 0.6vw 4.5vw 0.3vw;
}

.start_reserve td:last-child a::before {
  content: none;
}

.close_reserve.en td:last-child a::before {
  content: "SOLD OUT";
  white-space: nowrap;
}

.close_reserve a,
.close_reserve_item a,
.close_reserve_item02 a {
  pointer-events: none;
  position: relative;
}

.close_reserve.btn a {
  background-color: #b5b5b5;
}

.close_reserve.btn a::before {
  content: none;
}

.close_reserve img,
.close_reserve_item img {
  filter: grayscale(100%);
}

table tr.close_reserve td {
  color: #aaa;
}

table tr.close_reserve td:nth-child(3) img,
.close_reserve_item02 img {
  filter: grayscale(100%) brightness(2.3);
}

.close_reserve_item a::before,
.close_reserve_item02 a::before {
  content: "販売終了";
  position: absolute;
  width: 100%;
  top: -3.8vw;
  right: -1vw;
  color: #aaa;
  font-size: 1.4vw;
  background-color: #fff;
  border: 3px solid #b5b5b5;
  z-index: 99;
  font-family: heisei-maru-gothic-std, sans-serif;
  padding: 0.6vw 1vw 0.3vw;
}

@media screen and (max-width: 767px) {
  .close_reserve td:last-child a::before {
    font-size: 4vw;
    /* top: 7vw; */
    /* right: 10vw; */
    top: -11vw;
    right: 6vw;
    border: 2px solid #b5b5b5;
    padding: 7px 20px 5px;
  }

  .close_reserve.en td:last-child a::before {
    width: 122%;
    right: 23px;
    padding: 7px 12px 5px;
  }

  .close_reserve_item a::before,
  .close_reserve_item02 a::before {
    font-size: 4vw;
    top: -11vw;
    right: -3vw;
    border: 2px solid #b5b5b5;
    padding: 7px 10px 5px;
  }
}