@charset "UTF-8";

:root {
  --pw: 1440;
  --sw: 390;
  --artboard-pw: 390;
  --artboard-sw: 390;
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

@media (min-width: 1441px) {
  :root {
    --variable: 1px;
  }
}

.p-feature {
  --base-font-color: #212121;
  --color-accent: #d96d14;

  --color-orange: #d96d14;
  --color-blue: #315696;
  --color-yellow: #e4c10e;
  --color-beige: #d8c8b4;
  --color-red: #e6282d;
  --color-sale: #ff8185;
  --color-campaign: #eb9f75;
  --color-green: #539a35;
  --color-pink: #fc8083;
  --color-bg-eat: #ffdfb8;
  --color-bg-sleep: #a1b4d4;
  --color-bg-glow: #f8edad;
  --color-bg-mv: #f5f0ea;

  --lp-font-ja: "Noto Sans JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: Jost, "Noto Sans JP", Verdana, Helvetica, Arial, sans-serif;
  --lp-font-num: Inter, "Noto Sans JP", Verdana, Helvetica, Arial, sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .05em;

  --z-base: 1;
  --z-sticky: 10;
  --z-modal-overlay: 1000;
  --z-modal: 1010;
}

.lp_contents {
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    rgba(216, 200, 180, 0.15) 0 2px,
    transparent 2px 21px
  );

  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #212121);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: "palt";
  }

  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

#footer,
footer,
#FooterWrap {
  position: relative;
  z-index: 2;
}

#FooterWrap{
  margin-top: calc(-22 * var(--rem)) !important;
}

#share{
  bottom: calc(90 * var(--rem)) !important;
}

.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }
}

.lp_contents {
  & .layout-columns {
    @media (min-width: 769px) {
      display: grid;
    }

    &.layout-columns--col-2 {
      @media (min-width: 769px) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }

  & .layout-rail {
    display: none;

    @media (min-width: 769px) {
      position: sticky;
      top: 0;
      z-index: var(--z-sticky);
      display: grid;
      place-items: center;
      height: 100dvh;
      padding-top: var(--header-height, 0px);
      overflow: hidden;
      background: var(--color-bg-mv);
    }
  }

  & .layout-columns--col-2 {
    @media (min-width: 1441px) {
      width: 100%;
      margin-inline: auto;
    }
  }

  & .layout-rail--left {
    @media (min-width: 1441px) {
      overflow: visible;
    }
  }

  & .layout-primary {
    min-width: 0;
  }

  & .layout-inner {
    display: flow-root;
    width: calc(var(--artboard-sw) * var(--rem));
    margin-inline: auto;

    @media (min-width: 769px) {
      margin: auto;
    }
  }
}

.lp_contents {
  & .rail__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    @media (min-width: 1441px) {
      right: auto;
      left: calc((100vw - 1440 * var(--rem-pc)) / -2);
      width: calc(750 * var(--rem-pc) + (100vw - 1440 * var(--rem-pc)) / 2);
    }
  }

  & .rail__inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem-pc));
  }

  & .rail__mv {
    width: calc(390 * var(--rem-pc));
  }

  & .rail__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem-pc));
  }

  & .rail__nav-title {
    font-size: calc(18 * var(--rem-pc));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #000;
  }

  & .rail__campaign {
    white-space: nowrap;
    position: absolute;
    bottom: calc(20 * var(--rem-pc));
    left: calc(20 * var(--rem-pc));
    z-index: var(--z-base);
    display: grid;
    place-items: center;
    width: calc(70 * var(--rem-pc));
    height: calc(70 * var(--rem-pc));
    border-radius: 50%;
    background: var(--color-campaign);
    font-family: var(--lp-font-num);
    font-size: calc(10 * var(--rem-pc));
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-align: center;
  }
}

.lp_contents {
  & .mood-list {
    display: flex;
    justify-content: center;
    gap: calc(9 * var(--rem));
  }

  & .rail__nav .mood-list {
    gap: calc(9 * var(--rem-pc));
  }

  & .mood-btn {
    position: relative;
    display: block;
    width: calc(104 * var(--rem));
    height: calc(80 * var(--rem));
    border-radius: calc(12 * var(--rem));
  }

  & .rail__nav .mood-btn {
    width: calc(104 * var(--rem-pc));
    height: calc(80 * var(--rem-pc));
    border-radius: calc(12 * var(--rem-pc));
  }

  & .mood-btn--eat {
    background: var(--color-orange);
  }

  & .mood-btn--sleep {
    background: var(--color-blue);
  }

  & .mood-btn--glow {
    background: var(--color-yellow);
  }

  & .mood-btn__label {
    position: absolute;
    top: calc(12 * var(--rem));
    left: 50%;
    translate: -50% 0;
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 2;
    color: #fff;
    white-space: nowrap;
  }

  & .rail__nav .mood-btn__label {
    top: calc(12 * var(--rem-pc));
    font-size: calc(16 * var(--rem-pc));
  }

  & .mood-btn__icon {
    position: absolute;
    top: calc(44 * var(--rem));
    left: calc(40 * var(--rem));
    width: calc(24 * var(--rem));
  }

  & .rail__nav .mood-btn__icon {
    top: calc(44 * var(--rem-pc));
    left: calc(40 * var(--rem-pc));
    width: calc(24 * var(--rem-pc));
  }
}

.lp_contents {
  & .mv {
    width: calc(390 * var(--rem));
  }
}

.lp_contents {
  & .lead {
    margin-top: calc(38 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * var(--rem));
    text-align: center;
    white-space: nowrap;

    @media (min-width: 769px) {
      margin-top: calc(53 * var(--rem));
    }
  }

  & .lead__text {
    font-size: calc(15 * var(--rem));
    font-weight: 500;
    line-height: 2;
    color: #000;
  }

  & .lead__catch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(2 * var(--rem));
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 2;
  }

  & .lead__catch-eat {
    color: var(--color-orange);
  }

  & .lead__catch-sleep {
    color: var(--color-blue);
  }

  & .lead__catch-glow {
    color: var(--color-yellow);
  }
}

.lp_contents {
  & .mood {
    margin-top: calc(50 * var(--rem));
    padding-inline: calc(30 * var(--rem));
  }

  & .mood__dots {
    width: calc(330 * var(--rem));
  }

  & .mood__body {
    margin-top: calc(50 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
  }

  & .mood__title {
    font-size: calc(24 * var(--rem));
    font-weight: 700;
    line-height: 2;
    text-align: center;
    color: #000;
    white-space: nowrap;
  }
}

.lp_contents {
  & .sec {
    position: relative;
    border-radius: calc(85 * var(--rem)) calc(85 * var(--rem)) 0 0;
  }

  & .sec--eat {
    margin-top: calc(50 * var(--rem));
    padding-bottom: calc(145 * var(--rem));
    background: var(--color-bg-eat);
    --sec-accent: var(--color-orange);
  }

  & .sec--sleep {
    margin-top: calc(-85 * var(--rem));
    padding-bottom: calc(145 * var(--rem));
    background: var(--color-bg-sleep);
    --sec-accent: var(--color-blue);
  }

  & .sec--glow {
    margin-top: calc(-85 * var(--rem));
    padding-bottom: calc(145 * var(--rem));
    background: var(--color-bg-glow);
    --sec-accent: var(--color-yellow);
  }

  & .sec--campaign {
    margin-top: calc(-85 * var(--rem));
    padding-bottom: calc(40 * var(--rem));
    background: var(--color-campaign);
    --sec-accent: var(--color-campaign);
  }
}

.lp_contents {
  & .sec-head {
    position: relative;
    z-index: var(--z-base);
    padding-top: calc(40 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    text-align: center;
  }

  & .sec-head__catch {
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  & .sec-head__en {
    font-family: var(--lp-font-num);
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--sec-accent);
    white-space: nowrap;
  }

  & .sec--sleep .sec-head__en,
  & .sec--glow .sec-head__en {
    line-height: 1.5;
  }

  & .sec-head__title {
    font-size: calc(40 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--sec-accent);
    white-space: nowrap;

    -webkit-text-stroke: calc(6 * var(--rem)) #fff;
    paint-order: stroke fill;
  }

  & .sec-head__illust {
    width: calc(140 * var(--rem));
  }

  & .sec-head__deco {
    position: absolute;
    top: calc(111 * var(--rem));
    left: calc(278 * var(--rem));
    width: calc(34 * var(--rem));
  }
}

.lp_contents {
  & .brand {
    height: calc(95 * var(--rem));
    background: var(--sec-accent);
    color: #fff;
  }

  & .sec-head__deco + .brand {
    margin-top: calc(-15 * var(--rem));
  }

  & .sec--sleep .sec-head__deco + .brand {
    margin-top: calc(-10 * var(--rem));
  }

  & .sec--glow .sec-head__deco + .brand {
    margin-top: calc(-18 * var(--rem));
  }

  & .brand--follow {
    margin-top: calc(60 * var(--rem));
  }

  & .brand--eat-belta {
    margin-top: calc(62 * var(--rem));
  }

  & .brand__sub {
    padding-top: calc(16 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 2;
    text-align: center;
    white-space: nowrap;
  }

  & .brand__name {
    margin-top: calc(-7 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(24 * var(--rem));
    font-weight: 700;
    line-height: 2;
    text-align: center;
    white-space: nowrap;
  }

  & .brand-desc {
    margin-top: calc(20 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .slider-block {
    position: relative;
    margin-top: calc(20 * var(--rem));
  }

  & .slider-block--eat-aopapaiya-1 {
    margin-top: calc(21 * var(--rem));
  }

  & .slider-block--eat-aopapaiya-2 {
    margin-top: calc(35 * var(--rem));
  }

  & .slider-block--sleep-belta {
    margin-top: calc(26 * var(--rem));
  }

  & .slider-note {
    margin: auto;
  }

  & .slider-note__inner {
    width: calc(290 * var(--rem));
    margin-inline: auto;
    padding: calc(19 * var(--rem)) calc(9 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--rem));
    border: 1px solid #FC8083;
    border-radius: calc(12 * var(--rem));
    background-color: #fff;
  }
  & .sec--eat{
    & .slider-note__inner {
      background: repeating-linear-gradient(
        135deg,
        rgba(136, 136, 136, 0.05) 0,
        rgba(136, 136, 136, 0.05) 1px,
        transparent 1px,
        transparent 7px
      ),
      #fff;
    }
  }
  & .sec--sleep{
    & .slider-note__inner {
      background: repeating-linear-gradient(
        135deg,
        rgba(216, 200, 180, 0.15) 0,
        rgba(216, 200, 180, 0.15) 1px,
        transparent 1px,
        transparent 7px
      ),
      #fff;
    }
  }
  & .sec--glow{
    & .slider-note__inner {
      background: repeating-linear-gradient(
        135deg,
        rgba(136, 136, 136, 0.05) 0,
        rgba(136, 136, 136, 0.05) 1px,
        transparent 1px,
        transparent 7px
      ),
      #fff;
    }
  }

  & .slider-note__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(2 * var(--rem));
    width: calc(270 * var(--rem));
    text-align: center;
  }

  & .slider-note__title {
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 2;
    color: var(--color-red);
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
  }

  & .slider-note__text {
    font-size: calc(13 * var(--rem));
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.12em;
    color: #000;
    white-space: nowrap;
  }

  & .slider {
    padding-inline: calc(30 * var(--rem));
    overflow: hidden;
  }

  & .slider-note + .slider {
    margin-top: calc(10 * var(--rem));
  }

  & .slider-area {
    position: relative;
  }

  & .slider-block--eat-aopapaiya-1 .slider-note + .slider-area {
    margin-top: calc(30 * var(--rem));
  }

  & .slider-note + .slider-area {
    margin-top: calc(20 * var(--rem));
  }

  & .slider .swiper-wrapper {
    align-items: flex-start;
  }

  & .slider .swiper-slide {
    width: calc(330 * var(--rem));
    height: auto;
  }

  & .slider__prev,
  & .slider__next {
    position: absolute;
    top: 45%;
    z-index: var(--z-base);
    width: calc(51 * var(--rem));
  }

  & .slider__prev {
    left: calc(5 * var(--rem));
    rotate: 90deg;
    scale: -1 1;
  }

  & .slider__next {
    left: calc(335 * var(--rem));
    rotate: -90deg;
  }

  & .slider__prev.swiper-button-disabled,
  & .slider__next.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
  }
}

.lp_contents {
  & .note {
    font-size: calc(8 * var(--rem));
    line-height: 1.5;
  }

  & .card {
    display: block;
    padding: calc(30 * var(--rem)) calc(40 * var(--rem)) 0;
    border-radius: calc(12 * var(--rem));
    background: #fff;
    filter: drop-shadow(1px 1px 1px rgb(0 0 0 / .15));
  }

  & .card:hover{
    opacity: 1;
  }

  & .card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--rem));
    width: calc(250 * var(--rem));
  }

  & .card__img {
    width: calc(250 * var(--rem));
  }

  & .card__body {
    display: flex;
    flex-direction: column;
    gap: calc(11 * var(--rem));
    width: 100%;
  }

  & .card__lead {
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1;
  }

  & .card__tag {
    width: fit-content;
    padding: calc(2 * var(--rem)) calc(4 * var(--rem)) calc(3 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    border: 1px solid #ccc;
    color: #666;
  }

  & .card__name {
    font-size: calc(15 * var(--rem));
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
  }

  & .slider-block--eat-aopapaiya-1 .swiper-slide:nth-of-type(1) .card__name{
    letter-spacing: var(--letter-spacing);
  }

  & .card__name--multi {
    line-height: 1.4;
  }

  & .card__price {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--rem));
    line-height: 1;
  }

  & .card__price-num {
    font-family: var(--lp-font-num);
    font-size: calc(18 * var(--rem));
    font-weight: 500;
  }

  & .card__price-tax {
    font-size: calc(10 * var(--rem));
    font-weight: 500;
  }

  & .card--sale .card__point {
    padding-block: calc(12 * var(--rem));
  }

  & .card__point {
    padding: calc(8 * var(--rem));
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--rem));
    border: 1px solid var(--color-beige);
    border-radius: calc(4 * var(--rem));
  }

  & .card__point-row {
    display: flex;
    align-items: flex-end;
    gap: calc(8 * var(--rem));
  }

  & .slider-block--eat-aopapaiya-1 .swiper-slide:nth-of-type(1) .card__point-row{
    gap: calc(2 * var(--rem));
  }

  & .card__point-col {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--rem));
  }

  & .card__point-label {
    padding: calc(2 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  & .card__point-label--up {
    font-family: var(--lp-font-num);
    color: var(--color-red);
  }

  & .card__point-value {
    font-family: var(--lp-font-num);
    font-size: calc(18 * var(--rem));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  & .card__point-value--up {
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    color: var(--color-red);
  }

  & .card__point-arrow {
    font-size: calc(10 * var(--rem));
    line-height: 2;
    white-space: nowrap;
  }

  & .card__point-note {
    font-size: calc(10 * var(--rem));
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
  }

  & .card__desc {
    padding: calc(8 * var(--rem));
    border: 1px solid var(--color-beige);
    border-radius: calc(4 * var(--rem));
    font-size: calc(13 * var(--rem));
    font-weight: 400;
    line-height: 1.7;
  }

  & .card__foot {
    display: flex;
    justify-content: flex-end;
    width: calc(330 * var(--rem));
    margin-top: calc(10 * var(--rem));
    margin-inline: calc(-40 * var(--rem));
  }

  & .card__btn {
    padding: calc(6 * var(--rem)) calc(26 * var(--rem));
    border-radius: calc(20 * var(--rem)) 0 calc(12 * var(--rem)) 0;
    background: var(--color-green);
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 2;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    transition: all 0.5s;
  }

  & .card:hover .card__btn{
    background: #EB9F75;
  }

  & .card__badge {
    position: absolute;
    top: calc(-10 * var(--rem));
    left: calc(-20 * var(--rem));
    width: calc(70 * var(--rem));
    height: calc(70 * var(--rem));
    border-radius: 50%;
    background: var(--color-sale);
    background: var(--sec-accent);
    color: #fff;
    line-height: 1;
  }

  & .card__badge > span {
    position: absolute;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .card__badge-yaku {
    top: calc(18 * var(--rem));
    left: calc(11 * var(--rem));
    translate: -50% 0;
    font-size: calc(12 * var(--rem));
    font-weight: 500;
  }

  & .card__badge-off {
    top: calc(41 * var(--rem));
    left: calc(19 * var(--rem));
    font-family: var(--lp-font-num);
    font-size: calc(17 * var(--rem));
    font-weight: 500;
  }

  & .card--sale .card__inner {
    position: relative;
  }

  & .card__badge-num {
    top: calc(13 * var(--rem));
    left: calc(15 * var(--rem));
    font-family: var(--lp-font-num);
    font-size: calc(30 * var(--rem));
    font-weight: 500;
  }

  & .card__badge-percent {
    top: calc(25 * var(--rem));
    left: calc(52 * var(--rem));
    font-family: var(--lp-font-num);
    font-size: calc(16 * var(--rem));
    font-weight: 500;
  }

  & .card__sale-unit {
    width: fit-content;
    padding: calc(2 * var(--rem));
    display: inline-block;
    background: var(--color-beige);
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  & .card__sale-before {
    font-family: var(--lp-font-num);
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  & .card__sale-before-tax {
    font-family: var(--lp-font-ja);
    font-size: calc(10 * var(--rem));
    font-weight: 500;
  }

  & .card__sale-label {
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    line-height: 1;
    color: var(--color-red);
  }

  & .card__sale-price {
    font-family: var(--lp-font-num);
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--color-red);
    white-space: nowrap;
  }

  & .card__sale-tax {
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    line-height: 1;
    color: var(--color-red);
  }

  & .type-balloon {
    position: absolute;
    left: calc(250 * var(--rem));
    z-index: var(--z-base);
    width: calc(99 * var(--rem));
  }

  & .type-balloon--eat-aopapaiya-1 {
    top: calc(-20 * var(--rem));
  }

  & .type-balloon--eat-aopapaiya-2 {
    top: calc(-20 * var(--rem));
  }

  & .type-balloon__text {
    white-space: nowrap;
    position: absolute;
    top: calc(14 * var(--rem));
    left: calc(25 * var(--rem));
    width: calc(50 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }

  & .type-balloon__lg {
    font-size: calc(18 * var(--rem));
  }

  & .card__balloon {
    position: absolute;
    top: calc(10 * var(--rem));
    left: calc(210 * var(--rem));
    width: calc(99 * var(--rem));
  }

  & .card__balloon-text {
    position: absolute;
    top: calc(24 * var(--rem));
    left: 50%;
    translate: -50% 0;
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .link-btn {
    position: relative;
    margin-top: calc(40 * var(--rem));
    display: block;
    width: calc(330 * var(--rem));
    height: calc(70 * var(--rem));
    margin-inline: calc(30 * var(--rem));
    border-radius: calc(12 * var(--rem));
  }

  & .link-btn--sleep {
    background: var(--color-blue);
  }

  & .link-btn--glow {
    background: var(--color-yellow);
  }

  & .link-btn--all {
    background: var(--color-red);
  }

  & .link-btn + .link-btn {
    margin-top: calc(10 * var(--rem));
  }

  & .link-btn__label {
    position: absolute;
    top: calc(19 * var(--rem));
    left: 50%;
    translate: -50% 0;
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }

  & .link-btn--all .link-btn__label {
    font-family: var(--lp-font-num);
  }

  & .link-btn__icon {
    position: absolute;
    top: calc(23 * var(--rem));
    left: calc(286 * var(--rem));
    width: calc(24 * var(--rem));
    rotate: -90deg;
  }
}

.lp_contents {
  & .camp {
    position: relative;
    padding-top: calc(60 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
  }

  & .camp__star {
    position: absolute;
    top: calc(-9 * var(--rem));
    left: calc(298 * var(--rem));
    width: calc(76 * var(--rem));
  }

  & .camp__date {
    font-family: var(--lp-font-num);
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  & .camp__title {
    position: relative;
    margin-top: calc(10 * var(--rem));
    width: calc(323 * var(--rem));
    height: calc(36 * var(--rem));
  }

  & .camp__title-bg {
    width: calc(322 * var(--rem));
  }

  & .camp__title-text {
    position: absolute;
    top: calc(6 * var(--rem));
    left: 50%;
    translate: -50% 0;
    font-family: var(--lp-font-num);
    font-size: calc(26 * var(--rem));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  & .camp__note {
    margin-bottom: calc(10 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: nowrap;
  }

  & .camp__balloon {
    position: absolute;
    top: calc(195 * var(--rem));
    left: calc(228 * var(--rem));
    width: calc(133 * var(--rem));
  }

  & .camp__balloon-img {
    width: calc(118 * var(--rem));
    margin-left: calc(16 * var(--rem));
  }

  & .camp__balloon-text {
    position: absolute;
    top: calc(11 * var(--rem));
    left: calc(74 * var(--rem));
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: calc(102 * var(--rem));
    height: calc(22 * var(--rem));
    rotate: -5deg;
    font-size: calc(13 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--base-font-color);
    text-align: center;
    white-space: nowrap;
  }

  & .camp__store {
    margin-top: calc(20 * var(--rem));
    font-family: var(--lp-font-num);
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  & .camp__store--shop {
    font-size: calc(20 * var(--rem));
  }

  & .camp-block {
    margin-top: calc(20 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    text-align: center;
  }

  & .camp-block__title {
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  & .camp-block__date {
    font-family: var(--lp-font-num);
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  & .camp-list {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--rem));
  }

  & .camp-list__item {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem));
    width: calc(310 * var(--rem));
    line-height: 1;
    white-space: nowrap;
  }

  & .camp-list__item--wrap {
    align-items: flex-start;
    white-space: normal;
  }

  & .camp-list__num {
    font-family: var(--lp-font-num);
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    color: var(--color-campaign);
/*    -webkit-text-stroke: 1px #fff;*/
/*    paint-order: stroke fill;*/
    text-shadow:
     1px 0 #fff,
    -1px 0 #fff,
     0 1px #fff,
     0 -1px #fff;
  }

  & .camp-list__text {
    font-size: calc(18 * var(--rem));
    font-weight: 400;
  }

  & .camp-list__item--wrap .camp-list__text {
    width: calc(265 * var(--rem));
    line-height: 1.2;
    text-align: left;
  }

  & .camp-block__text {
    white-space: nowrap;
    width: calc(310 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 400;
    line-height: 1;
  }

  & .camp-block__annotation {
    white-space: nowrap;
    width: calc(310 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 400;
    line-height: 2;
  }

  & .camp-block__check {
    font-size: calc(10 * var(--rem));
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }

  & .camp-btn {
    position: relative;
    display: block;
    width: calc(270 * var(--rem));
    height: calc(70 * var(--rem));
    border: 1px solid #fff;
    border-radius: calc(12 * var(--rem));
    background: #fff;
    color: var(--color-campaign);
  }

  & .camp-btn__en {
    position: absolute;
    top: calc(13 * var(--rem));
    left: 50%;
    translate: -50% 0;
    font-family: var(--lp-font-num);
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  & .camp-btn__ja {
    position: absolute;
    top: calc(36 * var(--rem));
    left: 50%;
    translate: -50% 0;
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  & .camp-btn__icon {
    position: absolute;
    top: calc(22 * var(--rem));
    left: calc(235 * var(--rem));
    width: calc(24 * var(--rem));
    rotate: -90deg;
  }

  & .camp__dots {
    width: calc(330 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .camp-novelty {
    margin-top: calc(20 * var(--rem));
    padding: calc(20 * var(--rem)) calc(10 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    width: calc(330 * var(--rem));
    border: 1px solid #fff;
    border-radius: calc(12 * var(--rem));
    text-align: center;
  }

  & .camp-novelty__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    line-height: 1;
  }

  & .camp-novelty__sub {
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    white-space: nowrap;
  }

  & .camp-novelty__title {
    font-size: calc(24 * var(--rem));
    font-weight: 700;
  }

  & .camp-novelty__lead {
    width: calc(310 * var(--rem));
    font-size: calc(15 * var(--rem));
    font-weight: 400;
    line-height: 2;
    white-space: nowrap;
  }

  & .camp-novelty__images {
    display: flex;
    background: #fff;
  }

  & .camp-novelty__images img {
    width: calc(100 * var(--rem));
  }

  & .camp-novelty__foot {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--rem));
  }

  & .camp-novelty__items {
    white-space: nowrap;
    width: calc(310 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 400;
    line-height: 1.8;
  }

  & .camp-novelty__annotation {
    white-space: nowrap;
    width: calc(310 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 400;
    line-height: 1.8;
  }
}

.lp_contents {
  & .fixed-nav {
    position: fixed;
    bottom: calc(10 * var(--rem));
    left: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: calc(13 * var(--rem));
    width: 100%;
    padding-left: calc(12 * var(--rem));
  }

  & .fixed-nav__campaign {
    white-space: nowrap;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: calc(66 * var(--rem));
    height: calc(66 * var(--rem));
    border-radius: 50%;
    background: var(--color-campaign);
    font-family: var(--lp-font-num);
    font-size: calc(10 * var(--rem));
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
  }

  & .fixed-nav__list {
    display: flex;
    flex-grow: 1;
    height: calc(60 * var(--rem));
    border-radius: calc(12 * var(--rem)) 0 0 calc(12 * var(--rem));
    overflow: hidden;
  }

  & .fixed-nav__list li {
    flex: 1;
  }

  & .fixed-nav__btn {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }

  & .fixed-nav__btn--eat {
    background: var(--color-orange);
  }

  & .fixed-nav__btn--sleep {
    background: var(--color-blue);
  }

  & .fixed-nav__btn--glow {
    background: var(--color-yellow);
  }
}

.lp_contents {
  & .bottom {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(170 * var(--rem));
    padding: calc(20 * var(--rem)) calc(31 * var(--rem));
  }

  & .bottom__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & .bottom__illust {
    position: relative;
    z-index: var(--z-base);
  }

  & .bottom__illust--1 {
    width: calc(118 * var(--rem));
  }

  & .bottom__illust--2 {
    width: calc(99 * var(--rem));
  }

  & .bottom__illust--3 {
    width: calc(112 * var(--rem));
  }
}