@charset "UTF-8";
/* reset:start */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-feature-settings: "palt";
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  appearance: none;
  border: none;
  background-color: transparent;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none;
}

.news__more, .lineup__link, .lineup__howto-title, .lineup__buy-link, .nav__logo, .nav__insta-follow, .nav__insta-link, .nav__store, .nav__menu, .nav__head-close, .nav__link, .cont__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.news__more > *, .lineup__link > *, .lineup__howto-title > *, .lineup__buy-link > *, .nav__logo > *, .nav__insta-follow > *, .nav__insta-link > *, .nav__store > *, .nav__menu > *, .nav__head-close > *, .nav__link > *, .cont__center > * {
  min-height: 0%;
}

.lineup__contents, .cont__container {
  box-sizing: content-box !important;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  .lineup__contents, .cont__container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 375px) {
  .lineup__contents, .cont__container {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
}

.cont__concept, .cont__lineup, .cont__insta, .cont__news {
  padding-top: 150px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .cont__concept, .cont__lineup, .cont__insta, .cont__news {
    padding-top: 18.6666666667vw;
    padding-bottom: 16vw;
  }
}

.footer__logo, .news__more-link, .lineup__link, .lineup__buy-link, .mv__thumb img, .mv__pause, .nav__logo, .nav__insta-link, .nav__store {
  color: inherit;
}
@media screen and (min-width: 769px) {
  .footer__logo, .news__more-link, .lineup__link, .lineup__buy-link, .mv__thumb img, .mv__pause, .nav__logo, .nav__insta-link, .nav__store {
    transition: opacity 0.3s;
    cursor: pointer;
  }
  .footer__logo:hover, .news__more-link:hover, .lineup__link:hover, .lineup__buy-link:hover, .mv__thumb img:hover, .mv__pause:hover, .nav__logo:hover, .nav__insta-link:hover, .nav__store:hover {
    opacity: 0.7;
  }
}

/* common:start */
[v-cloak] {
  display: none;
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none !important;
  }
}

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

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

.cont {
  position: relative;
}
.cont__nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100px;
  background-color: #ebd6bc;
}
@media screen and (max-width: 1280px) {
  .cont__nav {
    height: 70px;
  }
}
@media screen and (max-width: 768px) {
  .cont__nav {
    position: fixed;
    order: 2;
    height: 60px;
  }
}
.cont__main {
  display: flex;
  flex-direction: column;
}
.cont__mv {
  background-color: #ebd6bc;
}
@media screen and (max-width: 768px) {
  .cont__mv {
    order: 1;
  }
}
.cont__concept {
  background-color: #e0b394;
}
@media screen and (max-width: 768px) {
  .cont__concept {
    order: 3;
  }
}
.cont__lineup {
  background-color: #f9f4e9;
}
@media screen and (max-width: 768px) {
  .cont__lineup {
    order: 4;
  }
}
.cont__insta {
  background-color: #eddfd4;
}
@media screen and (max-width: 768px) {
  .cont__insta {
    order: 5;
  }
}
.cont__news {
  background-color: #e2bab4;
}
@media screen and (max-width: 768px) {
  .cont__news {
    order: 6;
  }
}
.cont__footer {
  background-color: #e2bab4;
}

/* common:end */
.js-accordion__trigger {
  position: relative;
  cursor: pointer;
}
.js-accordion__target {
  overflow: hidden;
}
.js-accordion__target-enter-active {
  transition: all 0.5s ease-in-out;
}
.js-accordion__target-leave-active {
  transition: all 0.5s ease-in-out;
}
.js-accordion__target-enter, .js-accordion__target-leave-to {
  opacity: 0;
}

/* js-fade:start */
:root {
  --fade-translate-x: 0px;
  --fade-translate-y: 0px;
  --fade-duration: 500ms;
}

/* 表示方向 */
.up {
  --fade-translate-y: 50px;
}

.down {
  --fade-translate-y: -50px;
}

.fromLeft {
  --fade-translate-x: -50px;
}

.fromRight {
  --fade-translate-x: 50px;
}

.jsScroll {
  opacity: 0;
  transition-duration: 750ms;
  transition-property: opacity, transform;
  transition-delay: 0ms;
  transform: translate(var(--fade-translate-x), var(--fade-translate-y));
  transition-timing-function: ease-in-out;
}

.jsScrollIn {
  opacity: 1;
  transform: translate(0, 0);
}

.jsFvHide {
  opacity: 0;
  transition-duration: 1.5s;
  transition-property: opacity, transform;
  transition-delay: 0s;
  transition-timing-function: ease-out;
}
.jsFvHide.jsFvShow {
  opacity: 1;
}

.fade-enter-active {
  transition: opacity 1s;
}
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* js-fade:end */
.movie-area {
  margin: auto;
  max-width: 100%;
}
.movie-area__container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.movie-area iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.js-modal {
  position: relative;
  z-index: 10000;
}
.js-modal__bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 9001;
}
.js-modal__bg-enter-active {
  transition: all 0.2s ease-in-out;
}
.js-modal__bg-leave-active {
  transition: all 0.2s ease-in-out;
}
.js-modal__bg-enter, .js-modal__bg-leave-to {
  opacity: 0;
}
.js-modal__target {
  position: fixed;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100svh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9002;
  overflow: hidden;
}
.js-modal__target-enter-active {
  transition: all 0.3s ease-in-out;
}
.js-modal__target-leave-active {
  transition: all 0.3s ease-in-out;
}
.js-modal__target-enter, .js-modal__target-leave-to {
  opacity: 0;
}

/* nav:start */
.nav__container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.nav__logo {
  width: 260px;
  margin-right: auto;
  margin-left: 20px;
}
@media screen and (max-width: 1280px) {
  .nav__logo {
    width: 160px;
    min-width: 100px;
  }
}
@media screen and (max-width: 768px) {
  .nav__logo {
    width: 130px;
    min-width: auto;
    height: 100%;
    margin-right: auto;
    margin-left: 10px;
  }
}
@media screen and (max-width: 375px) {
  .nav__logo {
    width: 34.6666666667vw;
  }
}
.nav__insta-follow {
  width: 65px;
  margin-left: 40px;
  height: 100%;
}
@media screen and (max-width: 1920px) {
  .nav__insta-follow {
    width: 3.3854166667vw;
    margin-left: 2.0833333333vw;
  }
}
@media screen and (max-width: 1280px) {
  .nav__insta-follow {
    margin-left: 1.5625vw;
    min-width: 20px;
  }
}
@media screen and (max-width: 768px) {
  .nav__insta-follow {
    margin-left: 10px;
    min-width: auto;
    width: 36px;
  }
}
@media screen and (max-width: 375px) {
  .nav__insta-follow {
    width: 9.6vw;
  }
}
.nav__insta-link {
  width: 78px;
  margin-right: 20px;
}
@media screen and (max-width: 1920px) {
  .nav__insta-link {
    width: 4.0625vw;
    min-width: 20px;
    margin-right: 1.0416666667vw;
  }
}
@media screen and (max-width: 768px) {
  .nav__insta-link {
    margin-right: 0;
    width: 60px;
    height: 100%;
    background-color: #decebd;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 0 5px rgba(188, 188, 188, 0.3);
  }
}
@media screen and (max-width: 768px) {
  .nav__insta-icon {
    width: 30px;
  }
}
.nav__store {
  flex-direction: row;
  height: 100%;
  padding-left: 40px;
  padding-right: 40px;
  background-color: #e2bab4;
  box-shadow: 0px 0px 10px rgba(185, 153, 149, 0.3);
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: bold;
}
@media screen and (max-width: 1920px) {
  .nav__store {
    padding-left: 2.0833333333vw;
    padding-right: 2.0833333333vw;
  }
}
@media screen and (max-width: 1280px) {
  .nav__store {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .nav__store {
    width: 60px;
    padding: 0;
    border-radius: 0 0 15px 15px;
    box-shadow: 0px 0px 5px rgba(185, 153, 149, 0.3);
  }
}
.nav__store-icon {
  width: 40px;
  margin-right: 20px;
}
@media screen and (max-width: 1920px) {
  .nav__store-icon {
    width: 2.0833333333vw;
    min-width: 20px;
    margin-right: 1.0416666667vw;
  }
}
@media screen and (max-width: 768px) {
  .nav__store-icon {
    width: 32px;
  }
}
.nav__store-icon .cart {
  stroke: #ffffff;
}
.nav__store-icon .circle {
  fill: #ffffff;
}
.nav__store-text span {
  display: inline-block;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .nav__menu {
    width: 60px;
    height: 100%;
    background-color: #ebd6bc;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 0 5px rgba(161, 145, 124, 0.3);
  }
}
.nav__menu-icon {
  width: 35px;
}
.nav__contents {
  height: 100%;
  margin-left: 40px;
}
@media screen and (max-width: 1280px) {
  .nav__contents {
    margin-left: 20px;
  }
}
@media screen and (max-width: 768px) {
  .nav__contents {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: #ebd6bc;
    width: 100%;
    height: auto;
    margin-left: 0;
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 768px) {
  .nav__bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.nav__head {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.nav__head-logo {
  width: 130px;
  max-width: 50%;
  margin-left: 30px;
}
.nav__head-close {
  width: 60px;
  height: 60px;
}
.nav__head-icon {
  width: 35px;
}
.nav__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .nav__list {
    flex-direction: column;
  }
}
.nav__link {
  height: 100%;
  padding-left: 44px;
  padding-right: 44px;
  color: #867055;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (max-width: 1920px) {
  .nav__link {
    padding-left: 2.2916666667vw;
    padding-right: 2.2916666667vw;
  }
}
@media screen and (max-width: 1280px) {
  .nav__link {
    font-size: 1.8rem;
    padding-left: 1.5625vw;
    padding-right: 1.5625vw;
  }
}
@media screen and (max-width: 990px) {
  .nav__link {
    font-size: 1.6rem;
    padding-left: 1.0101010101vw;
    padding-right: 1.0101010101vw;
  }
}
@media screen and (max-width: 768px) {
  .nav__link {
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: 0.1em;
  }
}
.nav__link span {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.nav__link span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #867055;
  content: "";
  opacity: 0;
  transition: opacity 0.3s;
}
@media screen and (min-width: 769px) {
  .nav__link:hover span::after {
    opacity: 1;
  }
}
.nav-enter-active {
  transition: all 0.5s ease-in-out;
}
.nav-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.nav-enter {
  opacity: 0;
}
.nav-leave-to {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .nav__contents-enter-active {
    transition: all 0.5s ease-in-out;
  }
}
@media screen and (max-width: 768px) {
  .nav__contents-leave-active {
    transition: all 0.5s ease-in-out;
  }
}
.nav__contents-enter {
  transform: translateY(-100px);
  opacity: 0;
}
.nav__contents-leave-to {
  transform: translateY(-100px);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .nav__bg-enter-active {
    transition: opacity 0.3s ease-in-out;
    transition-delay: 0.3s;
  }
}
@media screen and (max-width: 768px) {
  .nav__bg-leave-active {
    transition: opacity 0.3s ease-in-out;
  }
}
.nav__bg-enter {
  opacity: 0;
}
.nav__bg-leave-to {
  opacity: 0;
}

/* nav:end */
/**
 * animation flip-right
 */
@keyframes flip-right {
  0% {
    transform: rotateY(60deg) translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}
/**
 * animation fade-in
 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.jsFvShow .mv__swiper {
  animation: fade-in 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation-delay: 0.2s;
}
.jsFvShow .mv__thumb {
  animation: fade-in 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation-delay: 0.2s;
}
.jsFvShow .mv__thumb.fvDelay1 {
  animation-delay: 0.4s;
}
.jsFvShow .mv__thumb.fvDelay2 {
  animation-delay: 0.6s;
}
.jsFvShow .mv__thumb.fvDelay3 {
  animation-delay: 0.8s;
}
.jsFvShow .mv__thumb.fvDelay4 {
  animation-delay: 1s;
}
.jsFvShow .mv__image {
  animation: flip-right 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation-delay: 0.5s;
}
.jsFvShow .mv__image.fvDelay1 {
  animation-delay: 0.7s;
}
.jsFvShow .mv__image.fvDelay2 {
  animation-delay: 0.9s;
}
.jsFvShow .mv__image.fvDelay3 {
  animation-delay: 1.1s;
}
.jsFvShow .mv__title--01 {
  animation: fade-in 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
@media screen and (min-width: 769px) {
  .jsFvShow .mv__title--01 {
    animation-delay: 1.5s;
  }
}
@media screen and (max-width: 768px) {
  .jsFvShow .mv__title--01 {
    animation-delay: 1.5s;
  }
}
.jsFvShow .mv__title--02 {
  animation: fade-in 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
@media screen and (min-width: 769px) {
  .jsFvShow .mv__title--02 {
    animation-delay: 3s;
  }
}
@media screen and (max-width: 768px) {
  .jsFvShow .mv__title--02 {
    animation-delay: 2.5s;
  }
}
.jsFvShow .mv__ctrl {
  animation: fade-in 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation-delay: 3s;
}

/* mv:start */
.mv__container {
  position: relative;
  z-index: 1;
}
.mv__title--01, .mv__title--02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}
.mv__slides {
  width: 100%;
  position: relative;
  z-index: 1;
}
.mv__thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}
.mv__thumb {
  width: 20%;
}
.mv__ctrl {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 2;
  width: 100%;
  padding-left: 46px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.mv__ctrl .swiper-pagination {
  position: relative;
  margin-right: 10px;
}
.mv__ctrl .swiper-pagination-bullet {
  width: 8px;
  background-color: transparent;
  border: 2px solid #ffffff;
  opacity: 1;
  margin-right: 10px;
}
.mv__ctrl .swiper-pagination-bullet-active {
  background-color: #ffffff;
}
.mv__pause {
  width: 26px;
}
.mv__images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.mv__image {
  width: 25.0666666667%;
}
.mv__image.mvImageSide {
  width: 24.9333333333%;
}
.mv__image.mvImageLarge {
  width: 50%;
}

.mv__image, .mv__slide, .mv__ctrl, .mv__thumb {
  opacity: 0;
}
.mv__title--01, .mv__title--02 {
  opacity: 0;
}

/* mv:end */
/* concept:start */
.concept__title {
  width: 489.5px;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .concept__title {
    width: 74.4vw;
  }
}
.concept__contents-point {
  width: 390px;
  max-width: 100%;
  margin: 60px auto 0;
}
@media screen and (max-width: 768px) {
  .concept__contents-point {
    width: 67.2vw;
    margin: 10.6666666667vw auto 0;
  }
}
.concept__contents-text {
  width: 447px;
  max-width: 100%;
  margin: 50px auto 0;
}
@media screen and (max-width: 768px) {
  .concept__contents-text {
    width: 73.8666666667vw;
    margin: 9.3333333333vw auto 0;
  }
}
.concept__movie {
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  width: 680px;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .concept__movie {
    margin: 11.2676056338% auto 0;
    width: 100%;
  }
}

/* concept:end */
.lineup__link-text--vio, .lineup__link-text--waki, .lineup__link-text--ude, .lineup__link-text--senaka, .lineup__link-text {
  text-align: center;
  margin-top: 10px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 990px) {
  .lineup__link-text--vio, .lineup__link-text--waki, .lineup__link-text--ude, .lineup__link-text--senaka, .lineup__link-text {
    font-size: 2.0202020202vw;
  }
}
@media screen and (max-width: 768px) {
  .lineup__link-text--vio, .lineup__link-text--waki, .lineup__link-text--ude, .lineup__link-text--senaka, .lineup__link-text {
    margin-top: 10px;
    font-size: 1.5rem;
    line-height: 1.2;
    position: relative;
    padding-right: 15px;
  }
}
.lineup__link-text--vio::after, .lineup__link-text--waki::after, .lineup__link-text--ude::after, .lineup__link-text--senaka::after, .lineup__link-text::after {
  content: "";
  background-size: 100%;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: block;
  margin-left: 5px;
}
@media screen and (max-width: 768px) {
  .lineup__link-text--vio::after, .lineup__link-text--waki::after, .lineup__link-text--ude::after, .lineup__link-text--senaka::after, .lineup__link-text::after {
    width: 15px;
    height: 15px;
    margin-left: 0;
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}

.lineup__point--06, .lineup__point--05, .lineup__point--04, .lineup__point--03, .lineup__point--02, .lineup__point {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .lineup__point--06, .lineup__point--05, .lineup__point--04, .lineup__point--03, .lineup__point--02, .lineup__point {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
  }
}
@media screen and (max-width: 768px) {
  .lineup__point--06, .lineup__point--05, .lineup__point--04, .lineup__point--03, .lineup__point--02, .lineup__point {
    order: 1;
  }
}

:root {
  --color-bg: red;
  --color-howto-bg: red;
  --color-text-title: red;
  --color-text-normal: red;
  --color-icon-plus: red;
  --color-modal-bg: red;
  --color-modal-close-bg: red;
  --color-modal-close-icon: red;
}

.body {
  --color-bg: #eed6d2;
  --color-howto-bg: #f7f2f0;
  --color-text-title: #c68284;
  --color-text-normal: #331e1e;
  --color-icon-plus: #ca8d8e;
  --color-modal-bg: #f7f2f0;
  --color-modal-close-bg: #e8d3ce;
  --color-modal-close-icon: #c68284;
}

.senaka {
  --color-bg: #e2ddd3;
  --color-howto-bg: #f9f4e9;
  --color-text-title: #9e8f73;
  --color-text-normal: #333028;
  --color-icon-plus: #a09582;
  --color-modal-bg: #f9f4e9;
  --color-modal-close-bg: #ded4be;
  --color-modal-close-icon: #a09582;
}

.ude {
  --color-bg: #ebe2d7;
  --color-howto-bg: #faf1e8;
  --color-text-title: #a68a6d;
  --color-text-normal: #332415;
  --color-icon-plus: #b7a18a;
  --color-modal-bg: #faf1e8;
  --color-modal-close-bg: #eaddcf;
  --color-modal-close-icon: #a68a6d;
}

.waki {
  --color-bg: #f2e4d3;
  --color-howto-bg: #fcf3ea;
  --color-text-title: #b79871;
  --color-text-normal: #33291e;
  --color-icon-plus: #b79871;
  --color-modal-bg: #fcf3ea;
  --color-modal-close-bg: #ead8c4;
  --color-modal-close-icon: #b79871;
}

.vio {
  --color-bg: #EDDFD4;
  --color-howto-bg: #FAF1E8;
  --color-text-title: #c28377;
  --color-text-normal: #33211e;
  --color-icon-plus: #c9948a;
  --color-modal-bg: #fff8f7;
  --color-modal-close-bg: #e8d2cf;
  --color-modal-close-icon: #c28377;
}

.bi-hada {
  --color-bg: #eddbd8;
  --color-howto-bg: #fff8f7;
  --color-text-title: #c28377;
  --color-text-normal: #33211e;
  --color-icon-plus: #c9948a;
  --color-modal-bg: #fff8f7;
  --color-modal-close-bg: #e8d2cf;
  --color-modal-close-icon: #c28377;
}

/* lineup:start */
.lineup__title {
  width: 180px;
}
@media screen and (max-width: 768px) {
  .lineup__title {
    width: 121px;
  }
}
.lineup__links {
  width: 100%;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(max-content, 156px));
  gap: 30px;
  margin-top: 8.4210526316%;
}
@media screen and (max-width: 768px) {
  .lineup__links {
    margin-top: 40px;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }
}
.lineup__link {
  width: 100%;
}
.lineup__link-text {
  color: #c68284;
}
.lineup__link-text::after {
  background-image: url(../png/lineup_arrow_body.png);
}
.lineup__link-text--senaka {
  color: #9e8f73;
}
.lineup__link-text--senaka::after {
  background-image: url(../png/lineup_arrow_senaka.png);
}
.lineup__link-text--ude {
  color: #a68a6d;
}
.lineup__link-text--ude::after {
  background-image: url(../png/lineup_arrow_ude.png);
}
.lineup__link-text--waki {
  color: #b79871;
}
.lineup__link-text--waki::after {
  background-image: url(../png/lineup_arrow_waki.png);
}
.lineup__link-text--vio {
  color: #c28377;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .lineup__link-text--vio {
    padding-right: 5px;
  }
}
.lineup__link-text--vio::after {
  background-image: url(../png/lineup_arrow_vio.png);
}
@media screen and (max-width: 768px) {
  .lineup__link-text--vio::after {
    right: -15px;
  }
}
.lineup__contents {
  padding-top: 15px;
}
@media screen and (max-width: 768px) {
  .lineup__contents {
    padding-left: 2.6666666667%;
    padding-right: 2.6666666667%;
    padding-top: 20px;
  }
}
@media screen and (max-width: 375px) {
  .lineup__contents {
    padding-left: 2.6666666667vw;
    padding-right: 2.6666666667vw;
  }
}
.lineup__contents > li {
  padding-top: 30px;
  padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .lineup__contents > li {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.lineup__contents > li:last-child {
  padding-bottom: 0;
}
.lineup__cont {
  padding: 6.3157894737% 4.2105263158%;
  background-color: var(--color-bg);
  border-radius: 50px;
  color: var(--color-text-normal);
  font-size: 1.6rem;
  line-height: 2;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .lineup__cont {
    padding: 0 2.8169014085%;
    padding-bottom: 11.2676056338%;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    line-height: 1.7857142857;
  }
}
.lineup__name {
  color: var(--color-text-title);
  font-size: 3.2rem;
  line-height: 1;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .lineup__name {
    font-size: 2.3rem;
    order: 2;
  }
}
.lineup__top-text {
  text-align: center;
  margin-top: 20px;
  order: 3;
}
@media screen and (max-width: 768px) {
  .lineup__top-text {
    text-align: left;
    padding: 0 10px;
  }
}
.lineup__caution {
  display: inline-block;
  font-size: 0.875em;
  line-height: 1.5;
}
.lineup__caution.pt10 {
  padding-top: 10px;
}
@media screen and (max-width: 768px) {
  .lineup__caution {
    font-size: 0.857em;
  }
}
@media screen and (min-width: 769px) {
  .lineup__point {
    background-image: url(../png/lineup_bg_body.png);
  }
}
@media screen and (min-width: 769px) {
  .lineup__point--02 {
    background-image: url(../png/lineup_bg_senaka.png);
  }
}
@media screen and (min-width: 769px) {
  .lineup__point--03 {
    background-image: url(../png/lineup_bg_ude.png);
  }
}
@media screen and (min-width: 769px) {
  .lineup__point--04 {
    background-image: url(../png/lineup_bg_waki.png);
  }
}
@media screen and (min-width: 769px) {
  .lineup__point--05 {
    background-image: url(../png/lineup_bg_vio.png);
  }
}
@media screen and (min-width: 769px) {
  .lineup__point--06 {
    background-image: url(../png/lineup_bg_bi-hada.png);
  }
}
.lineup__point-center {
  width: 28.7356321839%;
}
@media screen and (max-width: 768px) {
  .lineup__point-center {
    position: relative;
    width: 100%;
  }
}
.lineup__point-product {
  position: relative;
  z-index: 1;
}
.lineup__point-texts {
  width: 35.632183908%;
  padding-top: 2.2988505747%;
}
@media screen and (max-width: 768px) {
  .lineup__point-texts {
    width: 100%;
    padding: 7.4626865672% 5.9701492537% 4.4776119403%;
    display: flex;
    flex-direction: column;
  }
}
.lineup__point-title {
  margin-left: -1em;
  margin-right: -1em;
  color: var(--color-text-title);
  font-size: 2.6rem;
  line-height: 1.5384615385;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 990px) {
  .lineup__point-title {
    font-size: 2.6262626263vw;
  }
}
@media screen and (max-width: 768px) {
  .lineup__point-title {
    order: 2;
    margin: 0;
    margin-top: 10px;
    font-size: 1.8rem;
    text-align: left;
  }
}
.lineup__point-title-caution {
  font-size: 0.6em;
}
.lineup__point-image {
  padding: 12px 0 10px;
}
@media screen and (max-width: 768px) {
  .lineup__point-image {
    padding: 0;
    order: 1;
  }
}
.lineup__point-text {
  padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .lineup__point-text {
    order: 3;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.7857142857;
    color: var(--color-text-normal);
    padding-bottom: 0;
  }
}
.lineup__point-text-caution {
  font-size: 0.6em;
}
.lineup__plus {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 10.447761194%;
  cursor: pointer;
}
.lineup__plus svg {
  position: relative;
  z-index: 999;
}
.lineup__plus svg .base {
  fill: var(--color-icon-plus);
}
.lineup__plus svg .plus {
  fill: #fff;
}
.lineup__plus.body01 {
  top: 19.9372056515%;
  left: 33.2835820896%;
}
.lineup__plus.body02 {
  top: 65.6200941915%;
  left: 54.776119403%;
}
.lineup__plus.senaka01 {
  top: 15.9763313609%;
  left: 34.0298507463%;
}
.lineup__plus.senaka02 {
  top: 42.4556213018%;
  left: 50.8955223881%;
}
.lineup__plus.ude01 {
  top: 13.4615384615%;
  left: 31.3432835821%;
}
.lineup__plus.ude02 {
  top: 40.9340659341%;
  left: 65.5223880597%;
}
.lineup__plus.waki01 {
  top: 14.0957446809%;
  left: 32.8358208955%;
}
.lineup__plus.waki02 {
  top: 17.8191489362%;
  left: 55.5223880597%;
}
.lineup__plus.vio01 {
  top: 8.547008547%;
  left: 35.0746268657%;
}
.lineup__plus.vio02 {
  top: 35.8974358974%;
  left: 55.0746268657%;
}
.lineup__plus.bi-hada01 {
  top: 8.547008547%;
  left: 35.0746268657%;
}
.lineup__plus.bi-hada02 {
  top: 35.8974358974%;
  left: 47.0746268657%;
}
.lineup__plus-decoration {
  position: relative;
  width: 9.3333333333vw;
  height: 9.3333333333vw;
  border-radius: 50%;
  transition: 0.3s;
  display: block;
}
.lineup__plus-decoration::before, .lineup__plus-decoration::after {
  content: "";
  position: absolute;
  left: -2vw;
  top: -2vw;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  border-radius: 50%;
  animation: decoration 3s linear infinite;
}
.lineup__plus-decoration::before {
  animation-delay: 1.5s;
}
@keyframes decoration {
  0% {
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(0.68);
    opacity: 1;
  }
  100% {
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
    opacity: 0;
  }
}
.lineup__howto {
  padding-top: 3.4482758621%;
  padding-bottom: 3.4482758621%;
  background-color: var(--color-howto-bg);
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .lineup__howto {
    order: 4;
    margin-top: 15px;
    padding: 8.9552238806% 0 7.4626865672%;
    border-radius: 10px;
  }
}
.lineup__howto-title {
  flex-direction: row;
  color: var(--color-text-title);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 768px) {
  .lineup__howto-title {
    font-size: 2rem;
  }
}
.lineup__howto-title::before, .lineup__howto-title::after {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--color-text-title);
  content: "";
}
@media screen and (max-width: 768px) {
  .lineup__howto-title::before, .lineup__howto-title::after {
    width: 20px;
  }
}
.lineup__howto-title::before {
  transform: rotate(60deg);
  margin-right: 0.25em;
}
.lineup__howto-title::after {
  transform: rotate(-60deg);
  margin-left: 0.25em;
}
.lineup__howto-contents {
  display: grid;
  margin-top: 1.724137931%;
}
@media screen and (max-width: 768px) {
  .lineup__howto-contents {
    margin-top: 5.9701492537%;
  }
}
@media screen and (min-width: 769px) {
  .lineup__howto-contents {
    column-gap: 30px;
    align-items: center;
  }
  .body .lineup__howto-contents {
    grid-template-columns: 1fr 330px;
  }
  .senaka .lineup__howto-contents {
    grid-template-columns: 1fr 346px;
  }
  .ude .lineup__howto-contents {
    grid-template-columns: 1fr 234px;
  }
  .waki .lineup__howto-contents {
    grid-template-columns: 1fr 282px;
  }
  .vio .lineup__howto-contents {
    grid-template-columns: 1fr 362px;
  }
  .bi-hada .lineup__howto-contents {
    grid-template-columns: 1fr 331px;
  }
}
.lineup__howto-text {
  padding-left: 3.4482758621%;
}
@media screen and (max-width: 768px) {
  .lineup__howto-text {
    padding: 3.7313432836% 5.9701492537% 0;
  }
}
@media screen and (max-width: 768px) {
  .lineup__howto-image {
    width: 100%;
    grid-area: 1 / 1 / 2 / 2;
  }
}
.lineup__buy-link {
  flex-direction: row;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  width: 450px;
  height: 70px;
  border: 2px solid blue;
  border-color: var(--color-text-title);
  background-color: #ffffff;
  border-radius: 10px;
  color: var(--color-text-title);
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .lineup__buy-link {
    order: 5;
    margin-top: 40px;
    width: 300px;
    max-width: 100%;
    height: 50px;
    border-radius: 5px;
    font-size: 1.8rem;
  }
}
.lineup__buy-icon {
  width: 35px;
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .lineup__buy-icon {
    width: 28px;
  }
}
.lineup__buy-icon svg .cart {
  stroke: var(--color-text-title);
}
.lineup__buy-icon svg .circle {
  fill: var(--color-text-title);
}
.lineup__modal {
  width: 89.3333333333vw;
  border-radius: 10px;
  background-color: var(--color-modal-bg);
  position: relative;
  overflow: hidden;
}
.lineup__modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
}
.lineup__modal-close::before {
  display: block;
  width: 100px;
  height: 55px;
  background-color: var(--color-modal-close-bg);
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -20%) rotate(40deg);
  content: "";
}
.lineup__modal-close svg {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 12px;
  cursor: pointer;
}
.lineup__modal-close svg .line {
  fill: var(--color-modal-close-icon);
}

/* lineup:end */
/* news:start */
.news__container {
  background-color: #fff;
}
.news__title {
  width: 126px;
}
@media screen and (max-width: 768px) {
  .news__title {
    width: 84.5px;
  }
}
.news__cont {
  margin-top: 80px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .news__cont {
    margin-top: 40px;
  }
}
.news__list {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .news__list {
    margin-bottom: 20px;
  }
}
.news__list > li:not(:first-child) {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .news__list > li:not(:first-child) {
    margin-top: 20px;
  }
}
.news__item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 30px 40px;
  position: relative;
  transition: background-color 0.3s, background-image 0.3s;
  background-image: url(../png/news_arrow_bg_01.png);
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-position: bottom -6px right -12px;
}
@media screen and (max-width: 768px) {
  .news__item {
    align-items: flex-start;
    border-radius: 10px;
    padding: 20px 25px 20px 20px;
    background-size: 28px;
    background-position: bottom -5px right -6px;
  }
}
.news__item:hover {
  background-color: #fbe6e3;
  background-image: url(../png/news_arrow_bg_02.png);
}
.news__item::after {
  content: "";
  background-image: url(../png/news_arrow.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 33px;
  height: 10px;
  position: absolute;
  right: 13px;
  bottom: 18px;
}
@media screen and (max-width: 768px) {
  .news__item::after {
    background-image: url(../png/news_arrow-2.png);
    width: 20px;
    height: 6px;
    right: 9px;
    bottom: 9px;
  }
}
.news__image {
  width: 180px;
  margin-right: 30px;
}
@media screen and (max-width: 768px) {
  .news__image {
    max-width: 110px;
    width: 37.9310344828%;
    margin-right: 10px;
  }
}
.news__text {
  flex: 1;
  margin-top: -8px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  color: #b96e63;
}
@media screen and (max-width: 768px) {
  .news__text {
    margin-top: -6px;
    font-size: 1.4rem;
    line-height: 1.7857142857;
  }
}
.news__date {
  margin-top: 3px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  color: #b96e63;
}
@media screen and (max-width: 768px) {
  .news__date {
    font-size: 1.2rem;
    margin-bottom: 5px;
  }
}
.news__more {
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .news__more {
    margin-top: 40px;
  }
}
.news__more-link {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  display: flex;
  justify-content: center;
  margin-left: 45px;
}
@media screen and (max-width: 768px) {
  .news__more-link {
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    margin-left: 30px;
  }
}
.news__more-link::after {
  content: "";
  background-image: url(../png/news_icon_plus.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  .news__more-link::after {
    width: 22px;
    height: 22px;
    margin-left: 10px;
  }
}

/* news:end */
/* footer:start */
.footer {
  padding: 20px 0;
}
@media screen and (max-width: 768px) {
  .footer {
    padding: 20px 10px 15px;
  }
}
.footer__container {
  display: flex;
  align-items: center;
  padding-left: 10px;
}
@media screen and (max-width: 768px) {
  .footer__container {
    display: block;
    padding-left: 0;
  }
}
.footer__logo {
  display: block;
  max-width: 61px;
  margin-right: 18px;
}
@media screen and (max-width: 768px) {
  .footer__logo {
    max-width: 42px;
  }
}
.footer__copy {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .footer__copy {
    line-height: 1.8333333333;
    letter-spacing: 0.029em;
    margin-top: 15px;
  }
}

/* footer:end */