@charset "UTF-8";

/*all----------------------------*/
html {
  font-size: 62.5%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display:none;
}

body {
  -webkit-tap-highlight-color: transparent;
}

#Wrap {
  width: auto;
}

main {
  max-width: unset;
}

#footer {
  margin-top: 0;
}

#FooterWrap {
  position: relative;
  z-index: 4;
}

:root {
  --font_regular: "helvetica-neue-lt-pro", "hiragino-kaku-gothic-pron", sans-serif;
  --font_eng: "futura-pt", sans-serif;
  --color_regular: #8e756e;
  --color_01: #e8d2cd;
  --color_02: #f4dfcc;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  letter-spacing: .15em;
  font-feature-settings: "palt";
}

.LP_page {
  width: 100%;
  font-family: var(--font_regular);
  color: var(--color_regular);
  overflow-x: clip;
  opacity: 0;
  transition: opacity 1s;
}

.LP_page.active {
  opacity: 1;
}

.LP_page picture {
  display: block;
  font-size: 0;
}

.LP_page a {
  display: block;
  color: inherit;
}

.LP_page a:hover {
  opacity: 1 !important;
}

.LP_page img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.activePoint,
.activePoint2 {
  opacity: 0;
  translate: 0 calc(40 * (56rem / 750));
  transition: opacity 1s, translate 1s;
}

.activePoint.active,
.activePoint2.active {
  opacity: 1;
  translate: unset;
}

.popup {
  scale: 0;
}

.popup.active {
  animation: popup 0.8s ease-in-out forwards;
}

@keyframes popup {
  0% {
    scale: 0;
  }

  70% {
    scale: 1.05;
  }

  85% {
    scale: .95;
  }

  100% {
    scale: 1;
  }
}

/*----------------------------all*/

/*heading------------------------*/
.heading_area {
  position: relative;
  z-index: 1;
}

.mv_wrap {
  position: relative;
}

.mv_wrap .txt_wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: calc(40 * (56rem / 750));
  text-align: center;
}

.main_ttl {
  margin-bottom: calc(35 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(60 * (56rem / 750));
  font-weight: 400;
}

.main_ttl .logo_toone {
  display: block;
  width: calc(220 * (56rem / 750));
  margin: 0 auto calc(25 * (56rem / 750));
}

.main_lead {
  font-size: calc(24 * (56rem / 750));
  line-height: 1.6;
}
/*------------------------heading*/

/*lineup----------------------------*/
body.no_scroll {
  height: 100vh;
  overflow: hidden;
}

.lineup_area {
  padding-bottom: calc(90 * (56rem / 750));
  background: var(--color_02);
  overflow: clip;
}

.lineup_area .area_inner {
  position: relative;
  width: calc(750 * (56rem / 750));
  margin: 0 auto;
}

.lineup_img_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(480 * (56rem / 750));
  height: calc(480 * (56rem / 750));
  margin: calc(-100 * (56rem / 750)) 0 0 calc(-70 * (56rem / 750));
  border-radius: 50%;
  background: var(--color_01);
  border: solid var(--color_regular) calc(2 * (56rem / 750));
}

.lineup_img_wrap > P {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  rotate: 20deg;
  transition: opacity 1.2s, rotate 1.5s;
  transition-delay: .5s;
}

.lineup_img_wrap.active > P {
  opacity: 1;
  rotate: 0deg;
}

.lineup_area h2 {
  display: grid;
  place-items: center;
  width: calc(340 * (56rem / 750));
  height: calc(282 * (56rem / 750));
  margin: 0 0 0 auto;
  padding: 0 0 calc(10 * (56rem / 750)) calc(5 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(64 * (56rem / 750));
  font-weight: 400;
  text-align: right;
}

.lineup_area h2 .for_space {
  display: inline-block;
  width: calc(20 * (56rem / 750));
}

.txt_campaign {
  position: relative;
  width: calc(380 * (56rem / 750));
  margin: 0 0 calc(20 * (56rem / 750)) auto;
  padding: calc(22 * (56rem / 750)) 0 calc(70 * (56rem / 750)) calc(55 * (56rem / 750));
  font-size: calc(22 * (56rem / 750));
  line-height: 1.75;
}

.txt_campaign::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/shape_speech2.svg) top left / calc(382 * (56rem / 750)) calc(227 * (56rem / 750)) no-repeat;
  content: "";
  pointer-events: none;
}

.lineup_list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: calc(40 * (56rem / 750)) calc(20 * (56rem / 750));
  padding: 0  calc(25 * (56rem / 750));
}

.lineup_list li:nth-of-type(1) { grid-area: 1 / 2 / 2 / 4; }
.lineup_list li:nth-of-type(2) { grid-area: 1 / 4 / 2 / 6; }
.lineup_list li:nth-of-type(3) { grid-area: 2 / 1 / 3 / 3; }
.lineup_list li:nth-of-type(4) { grid-area: 2 / 3 / 3 / 5; }
.lineup_list li:nth-of-type(5) { grid-area: 2 / 5 / 3 / 7; }
.lineup_list li:nth-of-type(6) { grid-area: 3 / 1 / 4 / 3; }
.lineup_list li:nth-of-type(7) { grid-area: 3 / 3 / 4 / 5; }
.lineup_list li:nth-of-type(8) { grid-area: 3 / 5 / 4 / 7; }

.lineup_list li {
  position: relative;
  padding-top: calc(12 * (56rem / 750));
  border-radius: calc(20 * (56rem / 750));
  border: solid var(--color_regular) calc(2 * (56rem / 750));
  background: var(--color_01);
}

.lineup_list li .lineup_num {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  margin: calc(16 * (56rem / 750)) 0 0 calc(20 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(46 * (56rem / 750));
  white-space: nowrap;
}

.lineup_list li .img_wrap {
  position: relative;
  width: calc(200 * (56rem / 750));
  margin: 0 auto calc(8 * (56rem / 750));
}

.lineup_list li .img_wrap figure:nth-of-type(1) {
  animation: switch1 10s 2s infinite;
}

.lineup_list li .img_wrap figure:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: switch2 10s 2s linear infinite;
}

@keyframes switch1 {
  0%, 40%, 100%{
    opacity: 1;
  }
  50%, 90% {
    opacity: 0;
  }
}

@keyframes switch2 {
  0%, 40%, 100% {
    opacity: 0;
  }
  50%, 90% {
    opacity: 1;
  }
}

.lineup_list li h4 {
  display: grid;
  place-items: center;
  min-height: calc(76 * (56rem / 750));
  padding: calc(10 * (56rem / 750)) 0;
  border-top: solid var(--color_regular) calc(2 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(20 * (56rem / 750));
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.lineup_area .notes {
  margin-top: calc(53 * (56rem / 750));
  font-size: calc(20 * (56rem / 750));
  line-height: 1.75;
  text-align: center;
}
/*----------------------------lineup*/

/*product------------------------*/
.product_list {
  padding-top: calc(100 * (56rem / 750));
  background: var(--color_01);
}

.product_list > p {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(640 * (56rem / 750));
  height: calc(83 * (56rem / 750));
  margin: 0 auto calc(70 * (56rem / 750));
  padding-left: calc(8 * (56rem / 750));
  font-size: calc(22 * (56rem / 750));
}

.product_list > p::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  height: calc(112 * (56rem / 750));
  background: url(../img/shape_speech.svg) center center / 100% auto no-repeat;
  content: "";
}

.each_set {
  padding-bottom: calc(60 * (56rem / 750));
}

.each_set:nth-of-type(n+2) {
  padding-top: calc(100 * (56rem / 750))
}

.each_set:nth-last-of-type(1) {
  padding-bottom: calc(70 * (56rem / 750))
}

.each_set .sec_inner {
  width: calc(750 * (56rem / 750));
  margin: 0 auto;
}

.each_set:nth-of-type(odd) {
  background: var(--color_01);
}

.each_set:nth-of-type(even) {
  background: var(--color_02);
}

.set_wrap {
  width: calc(600 * (56rem / 750));
  margin: 0 auto calc(40 * (56rem / 750));
  border-radius: calc(30 * (56rem / 750));
  border: solid var(--color_regular) calc(2 * (56rem / 750));
}

.each_set:nth-of-type(odd) .set_wrap {
  background: var(--color_02);
}

.each_set:nth-of-type(even) .set_wrap {
  background: var(--color_01);
}

.set_wrap a {
  padding: calc(50 * (56rem / 750)) 0 calc(58 * (56rem / 750));
}

.each_set .set_catch_wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(50 * (56rem / 750));
  padding-left: calc(100 * (56rem / 750));
}

.each_set .set_catch_wrap::before {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: calc(48 * (56rem / 750));
  height: calc(48 * (56rem / 750));
  margin: calc(-2 * (56rem / 750)) 0 0 calc(5 * (56rem / 750));
  border-radius: calc(10 * (56rem / 750));
  border: solid var(--color_regular) calc(2 * (56rem / 750));
  box-sizing: border-box;
  content: "";
}

.each_set .set_catch_wrap .pathFrame {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: calc(42 * (56rem / 750));
  margin: calc(-3 * (56rem / 750)) 0 0 calc(18 * (56rem / 750));
}

.pathFrame path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  stroke-width: calc(1 * (60rem / 390));
  fill: none;
  stroke: var(--color_regular);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.6;
  translate: -12.255px -7.255px;
}

.each_set .set_catch_wrap.active .pathFrame path {
  animation: line-stroke .4s .8s linear forwards;
}

@keyframes line-stroke {
  0% {
    stroke-dashoffset: 60;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.each_set .set_catch {
  font-size: calc(24 * (56rem / 750));
  line-height: 1.75;
}

.each_set .set_img {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-32 * (56rem / 750));
}

.each_set .set_img img {
  filter: drop-shadow(calc(8 * (56rem / 750)) calc(6 * (56rem / 750)) calc(1 * (56rem / 750)) rgba(0, 0, 0, .1));
}

.each_set .set_img img:nth-of-type(n+2) {
  position: absolute;
  top: 0;
  left: 0;
}

.each_set .set_img::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.each_set:nth-of-type(1) .set_img::before {
  background: url(../img/set_001_bg.png) center center / cover no-repeat;
}

.each_set:nth-of-type(2) .set_img::before {
  background: url(../img/set_002_bg.png) center center / cover no-repeat;
}

.each_set:nth-of-type(3) .set_img::before {
  background: url(../img/set_003_bg.png) center center / cover no-repeat;
}

.each_set .set_price {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: calc(85 * (56rem / 750)) 0 0 calc(8 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(48 * (56rem / 750));
}

.each_set .set_price .txt_S {
  font-size: calc(40 * (56rem / 750));
  vertical-align: .05em;
}

.each_set .set_price .txt_SS {
  font-size: calc(34 * (56rem / 750));
  vertical-align: .1em;
}

.each_set .set_price .txt_total {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(160 * (56rem / 750));
  margin-left: calc(-55 * (56rem / 750));
}

.each_set .set_price .txt_total.active {
  animation-delay: .3s;
}

.btn_cartIn {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 0 0  calc(-66 * (56rem / 750)) calc(245 * (56rem / 750));
}

.btn_cartIn a {
  display: grid;
  place-items: center;
  width: calc(432 * (56rem / 750));
  height: calc(66 * (56rem / 750));
  border-radius: calc(20 * (56rem / 750));
  background: var(--color_regular);
  font-family: var(--font_eng);
  font-size: calc(32 * (56rem / 750));
  font-weight: 500;
}

.each_set:nth-of-type(odd) .btn_cartIn a {
  color: var(--color_01);
}

.each_set:nth-of-type(even) .btn_cartIn a {
  color: var(--color_02);
}

.btn_cartIn a span {
  position: relative;
  padding-right: calc(60 * (56rem / 750));
}

.btn_cartIn a span::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(48 * (56rem / 750));
  height: calc(35 * (56rem / 750));
  mask-image: url(../img/shape_cart.svg);
  mask-position: center center;
  mask-size: cover;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../img/shape_cart.svg);
  -webkit-mask-position: center center;
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  content: "";
}

.each_set:nth-of-type(odd) .btn_cartIn a span::before {
  background: var(--color_01);
}

.each_set:nth-of-type(even) .btn_cartIn a span::before {
  background: var(--color_02);
}

.charm_wrap {
  display: flex;
  align-items: flex-end;
  gap: calc(40 * (56rem / 750));
}

.charm_img {
  position: relative;
  z-index: 1;
  width: calc(355 * (56rem / 750));
}

.charm_img img {
  filter: drop-shadow(calc(8 * (56rem / 750)) calc(6 * (56rem / 750)) calc(1 * (56rem / 750)) rgba(0, 0, 0, .1));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    translate: 0 0;
  }

  50% {
     translate: 0 calc(-15 * (56rem / 750));
  }
}

.charm_img::before,
.charm_img::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: calc(280 * (56rem / 750));
  height: calc(260 * (56rem / 750));
  mask-position: center center;
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  content: "";
}

.charm_img::before {
  mask-image: url(../img/shape_01.svg);
  -webkit-mask-image: url(../img/shape_01.svg);
}

.each_set:nth-of-type(odd) .charm_img::before {
  background: var(--color_02);
}

.each_set:nth-of-type(even) .charm_img::before {
  background: var(--color_01);
}

.charm_img::after {
  mask-image: url(../img/shape_02.svg);
  -webkit-mask-image: url(../img/shape_02.svg);
  background: var(--color_regular);
}

.charm_lead {
  padding-bottom: calc(38 * (56rem / 750));
  font-size: calc(22 * (56rem / 750));
  line-height: 1.75;
}

.charm_lead .txt_L {
  display: block;
  margin-bottom: calc(10 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(38 * (56rem / 750));
}
/*------------------------product*/

/*footer-------------------------*/
.footer_wrap {
  padding-top: calc(100 * (56rem / 750));
  background: var(--color_02);
}

.slider_outiside {
  position: relative;
  width: calc(750 * (56rem / 750));
  margin: 0 auto calc(100 * (56rem / 750));
  padding-left: calc(50 * (56rem / 750));
}

.slider_outiside > p {
  position: absolute;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: calc(190 * (56rem / 750));
  height: calc(190 * (56rem / 750));
  margin: 0 0 calc(-64 * (56rem / 750)) calc(-10 * (56rem / 750));
  padding-left: calc(10 * (56rem / 750));
  border: solid var(--color_regular) calc(2 * (56rem / 750));
  border-radius: 50%;
  background: var(--color_01);
  font-family: var(--font_eng);
  font-size: calc(44 * (56rem / 750));
  font-weight: 500;
  text-align: center;
  pointer-events: none;
}

.slider_outiside > p .date {
  padding-right: calc(12 * (56rem / 750));
  letter-spacing: .1em;
}

.slider_outiside > p::before {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(250 * (56rem / 750));
  height: calc(250 * (56rem / 750));
  background: url(../img/txt_miniaturecharm.svg) center center / cover no-repeat;
  content: "";
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

.slider_wrap .slick-track {
  display: flex;
}

.slider_wrap figure {
  width: calc(540 * (56rem / 750));
  margin-right: calc(30 * (56rem / 750));
}

.btn_allItems {
  width: fit-content;
  margin: 0 auto;
}

.btn_allItems a {
  display: grid;
  place-items: center;
  width: calc(560 * (56rem / 750));
  height: calc(120 * (56rem / 750));
  border-radius: calc(30 * (56rem / 750));
  background: var(--color_regular);
}

.btn_allItems a p {
  padding-top: calc(5 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(44 * (56rem / 750));
  font-weight: 500;
  letter-spacing: .18em;
  text-align: center;
  color: var(--color_02);
}

.btn_allItems a p span {
  display: block;
  margin-bottom: calc(8 * (56rem / 750));
  font-family: var(--font_regular);
  font-size: calc(22 * (56rem / 750));
  font-weight: 400;
  letter-spacing: .18em;
}

.schedule_area {
  margin-top: calc(100 * (56rem / 750));
  padding: calc(93 * (56rem / 750)) 0 calc(100 * (56rem / 750));
  background: var(--color_01);
  text-align: center;
}

.schedule_area h3 {
  margin-bottom: calc(60 * (56rem / 750));
  font-family: var(--font_eng);
  font-size: calc(56 * (56rem / 750));
  font-weight: 400;
}

.schedule_area > p {
  margin-bottom: calc(35 * (56rem / 750));
  font-size: calc(28 * (56rem / 750));
  font-weight: 700;
}

.schedule_area dt {
  font-family: var(--font_eng);
  font-size: calc(24 * (56rem / 750));
  font-weight: 500;
}

.schedule_area dt:nth-of-type(n+2) {
  margin-top: calc(48 * (56rem / 750));
}

.schedule_area dd {
  margin-top: calc(22 * (56rem / 750));
  font-size: calc(22 * (56rem / 750));
  letter-spacing: .1em;
}

.schedule_area .btn_allItems {
  margin-top: calc(97 * (56rem / 750));
}

.schedule_area .btn_allItems a p {
  color: var(--color_01);
}
/*-------------------------footer*/

/*shareボタン、shareテキスト---------------------------*/
@media screen and  (max-width:768px) {
#share {
  z-index: 10 !important;
  transition: translate .3s;
}


.share-txt {
  display: none;
}

.only_pc {
  display: none;
}

}
/*---------------------------shareボタン、shareテキスト*/

/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .only_sp {
    display: none;
  }

  .LP_page {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mv_pc {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url(../img/bg_pc.jpg) center center / cover no-repeat;
    transition-delay: .4s;
  }

  .mv_pc a {
    height: 100%;
  }

  .mv_pc .txt_wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 3.6rem;
    text-align: center;
  }

  .main_ttl {
    margin-bottom: 3rem;
    font-size: 5.2rem;
  }

  .main_ttl .logo_toone {
    width: 19rem;
    margin: 0 auto 2rem;
  }

  .main_lead {
    font-size: 2rem;
    line-height: 1.75;
  }

  .LP_page_inner {
    width: 100%;
    min-height: 100vh;
    height: fit-content;
    overflow: clip;
  }

  .txt_campaign {
    width: calc(412 * (56rem / 750));
    margin-right: calc(-30 * (56rem / 750));
  }

  .txt_campaign.active {
    animation-delay: .5s;
  }

  .txt_campaign::before {
    background: url(../img/shape_speech3.svg) top left / 100% calc(227 * (56rem / 750)) no-repeat;
    content: "";
    pointer-events: none;
  }

  .slider_outiside {
    padding-right: calc(20 * (56rem / 750));
  }

  .lineup_img_wrap,
  .lineup_list li,
  .lineup_list li h4,
  .set_wrap,
  .each_set .set_catch_wrap::before,
  .slider_outiside > p {
    border-width: .2rem;
  }
}
/*------------------------------------------------------PC*/


/*レスポンシブ対応-------------------------------*/
@media screen and (max-width: 1600px) and (min-width: 769px) {
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 560));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/