@charset "utf-8";

/* カラー管理
---------------------------------------------------------------------------*/
:root {
  --bg-color: linear-gradient(0deg,rgb(203, 173, 228) 10%, rgb(246, 159, 192) 30%, rgb(203, 173, 228) 84%, rgba(11, 9, 8) 100%);
  --text-color: #707070;
  --link-color: #f98b6d;
  --header-color: rgba(255, 255, 255, .9);
  --menu-bar-color: #c8ace0;
  --close-btn: #c8ace0; /* ハンバーガーメニューの閉じるボタン */
  --logo-filter: invert(28%) sepia(1%) saturate(2777%) hue-rotate(1deg) brightness(102%) contrast(81%);
  --logo-f-filter: invert(86%) sepia(1%) saturate(0%) hue-rotate(97deg) brightness(98%) contrast(98%);
  --shop-menu-filter: invert(42%) sepia(2%) saturate(15%) hue-rotate(359deg) brightness(102%) contrast(81%);
  --kv-bottom-grad: linear-gradient(0deg,rgba(11, 9, 8, 1) 1%, rgba(11, 9, 8, 0) 100%);
  --video-frame-color: invert(20%) sepia(7%) saturate(312%) hue-rotate(329deg) brightness(93%) contrast(96%);
  /* LINE UP */
  --lineup-bg-color: #222; /* 背景 */
  --lineup-bullet: #444; /* カルーセルのドット */
  --lineup-bullet-active: #FFF; /* ドットアクティブ */
  --shop-btn-filter: invert(43%) sepia(18%) saturate(1472%) hue-rotate(229deg) brightness(88%) contrast(88%); /* ショップアイコン */
  --shop-btn-bg: #FFF; /* ボタンの背景色 */
  --shop-btn-shadow: #8358a8; /* ボタンのドロップシャドウ */
}


/* ワンデイTOP
---------------------------------------------------------------------------*/
.page-slug-test_oneday260604 header {
  background-color: var(--header-color);
}
.page-slug-test_oneday260604 .logo img {
  filter: var(--logo-filter);
}
.page-slug-test_oneday260604 .menu_h a:hover,
.page-slug-test_oneday260604 .menu_h li:nth-of-type(2) a {
  border-bottom-color: var(--menu-bar-color);
}
.page-slug-test_oneday260604 .menu_h a {
  color: var(--text-color);
}
.page-slug-test_oneday260604 .menu_h .online button {
  color: var(--text-color);
  border-color: #CCCCCC;
}
.page-slug-test_oneday260604 .menu_h .online button::before {
  filter: var(--shop-menu-filter);
}
.page-slug-test_oneday260604 .kv::before {
  background: var(--kv-bottom-grad);
}
.page-slug-test_oneday260604 main {
  background: var(--bg-color);
}
.page-slug-test_oneday260604 main::before {
  background: var(--kv-bottom-grad);
}
.page-slug-test_oneday260604 .lineup {
  background-color: var(--lineup-bg-color);
}
.page-slug-test_oneday260604 .lineup_gallery .swiper-pagination-bullet {
  background-color: var(--lineup-bullet);
}
.page-slug-test_oneday260604 .lineup_gallery .swiper-pagination-bullet-active {
  background-color: var(--lineup-bullet-active);
}
.page-slug-test_oneday260604 .lineup .online button {
  background-color: var(--shop-btn-bg);
  box-shadow: 0px 5px 0px var(--shop-btn-shadow);
  color: var(--shop-btn-shadow);
}
.page-slug-test_oneday260604 .lineup .online button::before {
  filter: var(--shop-btn-filter);
}
.page-slug-test_oneday260604 #menuModal .close {
  background-color: var(--close-btn);
}

/*============ UPDATE =============*/
.page-slug-test_oneday260604 .update {
  max-width: 1200px;
  margin-top: -240px;
  text-align: center;
  font-family: "Noto Serif JP", serif;
}
.page-slug-test_oneday260604 .update h2 {
  color: #FFF;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.3;
  margin-block: 1.0em 0.6em;
  text-shadow: 0px 0px 20px rgba(60, 60, 60, 1), 0px 0px 10px rgba(60, 60, 60, 1);
  letter-spacing: 0.07em;
}
.page-slug-test_oneday260604 .update h3 {
  color: #FFF;
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 1.3;
  margin-block: 1.0em 0.6em;
  text-shadow: 0px 0px 20px rgba(60, 60, 60, 1), 0px 0px 10px rgba(60, 60, 60, 1);
}
.page-slug-test_oneday260604 .update h4 {
  color: #FFF;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  margin-block: 1.3em 0.6em;
  text-shadow: 0px 0px 20px rgba(60, 60, 60, 1), 0px 0px 10px rgba(60, 60, 60, 1);
}
.page-slug-test_oneday260604 .update h4 br {
  display: none;
}
.page-slug-test_oneday260604 .update p {
  margin-inline: auto;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0px 0px 20px rgba(60, 60, 60, 1), 0px 0px 10px rgba(60, 60, 60, 1);
}

.page-slug-test_oneday260604 .new .inner img {
  width: 100%;
}

/*============ VIDEO =============*/
.video_container {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  margin-bottom: 70px;
  width: fit-content;
  padding: 5.6vh 6vw;
  text-align: center;
}
.video_container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/video_frame.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--video-frame-color);
}
.video_container video {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 9/16;
}

@media screen and (max-width: 900px) {
  .kv::before {
      height: 16%;
  }
  .new {
    margin-top: -10vw;
  }
  .page-slug-test_oneday260604 .update + .new {
    margin-top: 0;
  }
  .page-slug-test_oneday260604 .update {
    margin-top: -8vh;
  }
  .page-slug-test_oneday260604 .update h2 {
    font-size: 3.0rem;
    letter-spacing: 0.05em;
    margin-top: 0;
  }
  .page-slug-test_oneday260604 .update h3 {
    font-size: 1.8rem;
  }
  .page-slug-test_oneday260604 .update h4 {
    font-size: 1.6rem;
  }
  .page-slug-test_oneday260604 .update p {
    font-size: 1.2rem;
  }
  .page-slug-test_oneday260604 .update h4 br {
    display: block;
  }
  .video_container {
    margin-bottom: 40px;
  }
}

@media screen and (max-width:576px) {
  .video_container {
    margin-bottom: 20px;
    margin-inline: 5px;
  }
}