@charset "UTF-8";

:root {
  --pw: 1440;
  --sw: 390;
  --artboard-pw: 500;
  --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: #383330;
  --color-key: #00c1e4;
  --color-special: #d91919;
  --color-current: #fe4db7;
  --color-band: #f9cb00;
  --color-line: #06c755;
  --color-card: #f1f1f1;
  --color-note: #5b5b5b;
  --color-disabled: #d9d9d9;
  --color-dash: #888;
  --color-marker: #ffeea5;
  --color-kit: #98cd87;
  --color-button-shadow: #fdde96;
  --color-bg-base: #fffae4;
  --color-bg-grid: #f9f3d4;
  --color-bg-special: #fff0ed;
  --color-bg-campaign: #f5f7f7;
  --color-bg-brand: #faf7e8;
  --color-bg-date: #e6f7fa;
  --color-bg-light: #f7f7f7;
  --color-bg-rail: #00d7fe;
  --color-bar-app: rgb(214 233 154 / .6);
  --color-bar-daily: rgb(255 197 197 / .6);
  --color-bar-sample: rgb(252 222 189 / .6);
  --color-bar-brand: rgb(238 208 242 / .6);
  --color-shadow-tab: rgb(0 0 0 / .1);

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

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --ease-star: cubic-bezier(0.19, 1, 0.22, 1);
  --letter-spacing: 0;
  --order: 0;
  --i: 0;
  --size-dash: 3;
  --size-dash-w: 1;
  --size-guide-stroke: .5px;
  --size-marker-pad: 0;
  --duration-marquee: 6s;
  --duration-button: .5s;
  --duration-fade-side: 1s;
  --duration-bound: 5s;
  --delay-star: 1.5s;
  --delay-tilt: 1s;
  --delay-bound: .15s;
  --delay-sequence: .15s;
  --delay-zoom-late: .5s;

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

.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  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;
  }

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :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;
  }

  & :where(a, button):focus-visible {
    outline: 2px solid var(--color-key);
    outline-offset: 2px;
  }
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

.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;
      background-color: #ddf9ff;
    }

    &.layout-columns--col-3 {
      @media (min-width: 769px) {
        grid-template-columns: 1fr calc(var(--artboard-pw) * var(--rem-pc)) 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);
    }
  }

  & .layout-primary {
    min-width: 0;
    overflow: hidden;
    background-color: var(--color-bg-base);

    @media (min-width: 769px) {
      box-shadow: unset;
    }
  }

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

  & .layout-columns * {
    font-feature-settings: normal;
    text-spacing-trim: space-all;
  }
}

.lp_contents {
  & .component-period {
    --size-unit: var(--rem);
    display: grid;
    justify-items: center;
  }

  & .component-period--rail {
    --size-unit: var(--rem-pc);
    margin-top: calc(47 * var(--rem-pc));
  }

  & .component-period--intro {
    margin-top: calc(45 * var(--rem));
  }

  & .component-period__main,
  & .component-period__shop {
    display: flex;
    align-items: baseline;
    justify-content: center;
    height: calc(40 * var(--size-unit));
    padding-top: calc(4 * var(--size-unit));
    white-space: nowrap;
  }

  & .component-period__main {
    rotate: 3deg;
    width: calc(349 * var(--size-unit));
  }

  & .component-period__shop {
    rotate: -2deg;
    width: calc(205 * var(--size-unit));
    padding-top: 0;
  }

  & .component-period--intro .component-period__shop {
    margin-top: calc(3 * var(--size-unit));
    padding-top: calc(3 * var(--size-unit));
  }

  & .component-period--rail .component-period__shop {
    margin-top: calc(4 * var(--size-unit));
    padding-top: calc(4 * var(--size-unit));
  }

  & .component-period--intro :is(.component-period__main, .component-period__shop) {
    background-color: var(--color-key);
    color: #fff;
  }

  & .component-period--rail :is(.component-period__main, .component-period__shop) {
        background-color: #04c1e4;
        color: #fff;
  }

  & .component-period__date {
    font-family: var(--lp-font-en);
    font-size: calc(25 * var(--size-unit));
    line-height: 1.28;
  }

  & .component-period__time {
    margin-left: calc(4 * var(--size-unit));
    font-family: var(--lp-font-en);
    font-size: calc(16 * var(--size-unit));
    line-height: 1.28;
  }

  & .component-period__week {
    display: grid;
    place-items: center;
    align-self: center;
    width: calc(20 * var(--size-unit));
    height: calc(20 * var(--size-unit));
    margin-top: calc(0 * var(--size-unit));
    margin-left: calc(3 * var(--size-unit));
    border-radius: 50%;
    font-size: calc(12 * var(--size-unit));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  & .component-period--intro .component-period__week {
    background-color: #fff;
    color: var(--color-key);
  }

  & .component-period--rail .component-period__week {
    background-color: #fff;
    color: var(--color-key);
  }

  & .component-period__dash {
    align-self: center;
    width: calc(20 * var(--size-unit));
    height: 1px;
    margin: calc(8 * var(--size-unit)) calc(7 * var(--size-unit)) 0 calc(2 * var(--size-unit));
    background-color: currentColor;
    font-size: 0;
  }

  & .component-period__shop-label {
    font-size: calc(15 * var(--size-unit));
    font-weight: 700;
    line-height: 1.533;
  }

  & .component-period__shop .component-period__date {
    margin-left: calc(3 * var(--size-unit));
  }

  & .component-period__shop .component-period__week {
    margin-top: 0;
    margin-left: calc(2 * var(--size-unit));
  }

  & .component-period__shop .component-period__week+.component-period__shop-label {
    margin-left: calc(3 * var(--size-unit));
  }

  & .component-button {
    width: calc(250 * var(--rem));
    margin-inline: auto;
    padding-bottom: calc(5 * var(--rem));
  }

  & .component-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(4 * var(--rem));
    height: calc(45 * var(--rem));
    border-radius: calc(30 * var(--rem));
    color: #fff;
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.533;
    --letter-spacing: .05em;
    letter-spacing: var(--letter-spacing);
    white-space: nowrap;
    box-shadow: 0 calc(5 * var(--rem)) 0 var(--color-button-depth);
    transition: opacity var(--duration-button) ease-in-out, translate var(--duration-button) ease-in-out, box-shadow var(--duration-button) ease-in-out;

    @media (any-hover: hover) {
      &:hover {
        translate: 0 calc(5 * var(--rem));
        box-shadow: 0 0 0 var(--color-button-depth);
        opacity: 1;
      }
    }
  }

  & .component-button--red .component-button__link {
    --color-button-depth: var(--color-button-shadow);
    background-color: var(--color-special);
  }

  & .component-button--dark .component-button__link {
    --color-button-depth: var(--color-key);
    background-color: var(--base-font-color);
  }

  & .component-button--line .component-button__link {
    --color-button-depth: var(--base-font-color);
    column-gap: calc(6 * var(--rem));
    background-color: var(--color-line);
  }

  & .component-button__icon {
    flex-shrink: 0;
  }

  & .component-button__icon--x {
    width: calc(19 * var(--rem));
  }

  & .component-button__icon--line {
    width: calc(30 * var(--rem));
  }

  & .component-detail {
    width: calc(150 * var(--rem));
    margin-left: auto;
  }

  & .component-detail__link {
    position: relative;
    display: grid;
    place-items: center;
    height: calc(30 * var(--rem));
    border-radius: calc(30 * var(--rem));
    background-color: var(--color-key);
    color: #fff;
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    --letter-spacing: .05em;
    white-space: nowrap;

    &::after {
      position: absolute;
      top: calc(10 * var(--rem));
      right: calc(17 * var(--rem));
      width: calc(6 * var(--rem));
      height: calc(6 * var(--rem));
      border-right: calc(2 * var(--rem)) solid currentColor;
      border-bottom: calc(2 * var(--rem)) solid currentColor;
      rotate: 45deg;
      content: "";
    }
  }

  & .component-guide {
    --size-guide-w: 8;
    --size-guide-h: 14;
    --size-guide-shift: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(10 * var(--rem));
    white-space: nowrap;

    &::before,
    &::after {
      width: calc(var(--size-guide-w) * var(--rem));
      height: calc(var(--size-guide-h) * var(--rem));
      translate: 0 calc(var(--size-guide-shift) * var(--rem));
      content: "";
    }

    &::before {
      background: linear-gradient(to top right, transparent calc(50% - var(--size-guide-stroke)), currentColor 0 calc(50% + var(--size-guide-stroke)), transparent 0);
    }

    &::after {
      background: linear-gradient(to bottom right, transparent calc(50% - var(--size-guide-stroke)), currentColor 0 calc(50% + var(--size-guide-stroke)), transparent 0);
    }
  }

  & .component-guide--special,
  & .component-guide--card {
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    --letter-spacing: .05em;
  }

  & .component-guide--campaign {
    --size-guide-w: 9;
    --size-guide-h: 16;
    --size-guide-shift: 4;
    --size-guide-stroke: .75px;
    column-gap: calc(11 * var(--rem));
    color: var(--color-key);
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
  }

  & .component-marker {
    display: inline-block;
    padding-inline: var(--size-marker-pad);
    background: linear-gradient(var(--color-marker), var(--color-marker)) no-repeat 0 calc(var(--size-marker-top) * var(--rem)) / 100% calc(13 * var(--rem));
  }

  & .component-marker--kit {
    --size-marker-top: 18;
    --size-marker-pad: calc(3 * var(--rem));
  }

  & .component-marker--present {
    --size-marker-top: 18;
    --size-marker-pad: calc(2 * var(--rem));
  }

  & .component-marker--coupon {
    --size-marker-top: 17;
    --size-marker-pad: calc(2 * var(--rem));
  }

  & .component-marker--line {
    --size-marker-top: 16;
    --size-marker-pad: calc(4 * var(--rem));
  }
}

.lp_contents {
  & .project-rail-title {
    width: calc(350 * var(--rem-pc));
    margin-left: calc(-7 * var(--rem-pc));
  }

  & .project-rail-title__head {
    position: relative;
    width: calc(256 * var(--rem-pc));
    margin-inline: auto;
  }

  & .project-rail-title__logo {
    display: block;
    width: 100%;
    height: auto;
    color: #04c1e4;
  }

  & .project-rail-title__star {
    position: absolute;
    top: calc(var(--size-top) * var(--rem-pc));
    left: calc(var(--size-left) * var(--rem-pc));
    width: calc(var(--size-width) * var(--rem-pc));
  }

  & .project-rail-title__star--01 {
    --size-top: -16;
    --size-left: -39;
    --size-width: 41;
    --size-from-x: 146;
    --size-from-y: 79;
  }

  & .project-rail-title__star--02 {
    --size-top: 4;
    --size-left: 7;
    --size-width: 27;
    --size-from-x: 107;
    --size-from-y: 67;
  }

  & .project-rail-title__star--03 {
    --size-top: 31;
    --size-left: -46;
    --size-width: 36;
    --size-from-x: 156;
    --size-from-y: 34;
  }

  & .project-rail-title__star--04 {
    --size-top: 101;
    --size-left: 261;
    --size-width: 53;
    --size-from-x: -160;
    --size-from-y: -43;
  }

  & .project-rail-title__star--05 {
    --size-top: 128;
    --size-left: 230;
    --size-width: 24;
    --size-from-x: -114;
    --size-from-y: -57;
  }

  & .project-rail-title__star--06 {
    --size-top: 148;
    --size-left: 251;
    --size-width: 33;
    --size-from-x: -139;
    --size-from-y: -81;
  }

  & .project-rail-nav {
    padding-left: calc(18 * var(--rem-pc));
  }

  & .project-rail-nav__list {
    display: grid;
    justify-items: center;
    row-gap: calc(29 * var(--rem-pc));
  }

  & .project-rail-nav__link {
    position: relative;
    display: block;
    color: #04c1e4;
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem-pc));
    line-height: 1.28;
    --letter-spacing: .05em;
    white-space: nowrap;

    &:focus-visible {
      outline-color: #fff;
    }

    &.is-current::before {
      position: absolute;
      top: calc(5 * var(--rem-pc));
      left: calc(-29 * var(--rem-pc));
      width: calc(19 * var(--rem-pc));
      height: calc(19 * var(--rem-pc));
      background: url(../../img/202611/main/deco-rail-star07.png?20261109) no-repeat 0 0 / 100% 100%;
      content: "";
    }
  }

  & .project-rail-nav__item:last-child .project-rail-nav__link {
    --letter-spacing: 0;
  }
}

.lp_contents {
  & .project-intro {
    display: flow-root;
    padding-bottom: calc(30 * var(--rem));
    background:
      linear-gradient(to right, var(--color-bg-grid) calc(1 * var(--rem)), transparent 0) 0 0 / calc(20 * var(--rem)) calc(20 * var(--rem)),
      linear-gradient(var(--color-bg-grid) calc(1 * var(--rem)), transparent 0) 0 0 / calc(20 * var(--rem)) calc(20 * var(--rem)),
      var(--color-bg-base);
    text-align: center;
  }

  & .project-intro__head {
    position: relative;
    margin-top: calc(60 * var(--rem));
  }

  & .project-intro__title {
    color: var(--color-key);
    font-size: calc(28 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    --letter-spacing: .05em;
  }

  & .project-intro__title-note {
    margin-top: calc(6 * var(--rem));
    color: var(--color-note);
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    line-height: 1.545;
    --letter-spacing: .05em;
  }

  & .project-intro__star {
    position: absolute;
    top: calc(var(--size-top) * var(--rem));
    left: calc(var(--size-left) * var(--rem));
    width: calc(var(--size-width) * var(--rem));
  }

  & .project-intro__star--01 {
    --size-top: -9;
    --size-left: 58;
    --size-width: 25;
    --size-from-x: 124;
    --size-from-y: 39;
  }

  & .project-intro__star--02 {
    --size-top: -1;
    --size-left: 18;
    --size-width: 38;
    --size-from-x: 158;
    --size-from-y: 24;
  }

  & .project-intro__star--03 {
    --size-top: 37;
    --size-left: 31;
    --size-width: 22;
    --size-from-x: 153;
    --size-from-y: -6;
  }

  & .project-intro__star--04 {
    --size-top: 54;
    --size-left: 346;
    --size-width: 25;
    --size-from-x: -163;
    --size-from-y: -25;
  }

  & .project-intro__star--05 {
    --size-top: 83;
    --size-left: 352;
    --size-width: 28;
    --size-from-x: -171;
    --size-from-y: -55;
  }

  & .project-intro__star--06 {
    --size-top: 103;
    --size-left: 329;
    --size-width: 20;
    --size-from-x: -144;
    --size-from-y: -71;
  }

  & .project-intro__lead {
    margin-top: calc(30 * var(--rem));
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 2;
    --letter-spacing: .05em;
  }

  & .project-intro__logo {
    width: calc(200 * var(--rem));
    margin: calc(55 * var(--rem)) auto 0;
  }

  & .project-intro__catch {
    margin-top: calc(34 * var(--rem));
    font-size: calc(25 * var(--rem));
    font-weight: 700;
    line-height: 1.52;
    --letter-spacing: .05em;
  }

  & .project-intro__button {
    width: calc(160 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
  }

  & .project-intro__button-link {
    position: relative;
    display: grid;
    place-items: center;
    height: calc(30 * var(--rem));
    border-radius: calc(35 * var(--rem));
    background-color: var(--base-font-color);
    color: #fff;
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    --letter-spacing: .05em;

    &::after {
      position: absolute;
      top: calc(12 * var(--rem));
      right: calc(16 * var(--rem));
      width: calc(6 * var(--rem));
      height: calc(6 * var(--rem));
      border-top: calc(2 * var(--rem)) solid currentColor;
      border-right: calc(2 * var(--rem)) solid currentColor;
      rotate: 45deg;
      content: "";
    }
  }

  & .project-intro__note {
    margin-top: calc(20 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    line-height: 1.727;
    --letter-spacing: .05em;
  }

  & .project-intro__badges {
    display: flex;
    justify-content: center;
    column-gap: calc(11 * var(--rem));
    margin-top: calc(30 * var(--rem));
  }

  & .project-intro__badge {
    position: relative;
    width: calc(160 * var(--rem));
    height: calc(160 * var(--rem));
    background: url(../../img/202611/main/intro-badge.svg) no-repeat calc(6 * var(--rem)) calc(6 * var(--rem)) / calc(148 * var(--rem)) auto;
    color: #fff;
    font-family: var(--lp-font-en);
    line-height: 1.28;
    text-align: left;
    white-space: nowrap;
  }

  & .project-intro__badge>span {
    position: absolute;
    top: calc(var(--size-top) * var(--rem));
    left: calc(var(--size-left) * var(--rem));
    font-size: calc(var(--size-font) * var(--rem));
  }

  & .project-intro__badge--off .project-intro__badge-rate {
    --size-top: 29;
    --size-left: 30;
    --size-font: 52;
  }

  & .project-intro__badge--off .project-intro__badge-unit {
    --size-top: 44;
    --size-left: 96;
    --size-font: 38;
  }

  & .project-intro__badge--off .project-intro__badge-mark {
    --size-top: 38;
    --size-left: 118;
    --size-font: 12;
  }

  & .project-intro__badge-word {
    --size-top: 82;
    --size-left: 35;
    --size-font: 38;
  }

  & .project-intro__badge-max {
    --size-top: 20;
    --size-left: 55;
    --size-font: 18;
  }

  & .project-intro__badge--point .project-intro__badge-rate {
    --size-top: 31;
    --size-left: 25;
    --size-font: 52;
  }

  & .project-intro__badge--point .project-intro__badge-unit {
    --size-top: 46;
    --size-left: 99;
    --size-font: 38;
  }

  & .project-intro__badge--point .project-intro__badge-mark {
    --size-top: 38;
    --size-left: 115;
    --size-font: 12;
  }

  & .project-intro__badge .project-intro__badge-label {
    --size-top: 90;
    --size-left: 40;
    --size-font: 20;
    width: calc(80 * var(--rem));
    font-family: var(--lp-font-ja);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-intro__footnote {
    margin-top: calc(15 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    line-height: 1.727;
    --letter-spacing: .05em;
  }
}

.lp_contents {
  & .project-calendar__head {
    position: relative;
    display: flow-root;
    background:
      linear-gradient(to right, var(--color-bg-grid) calc(1 * var(--rem)), transparent 0) 0 calc(2 * var(--rem)) / calc(20 * var(--rem)) calc(20 * var(--rem)),
      linear-gradient(var(--color-bg-grid) calc(1 * var(--rem)), transparent 0) 0 calc(2 * var(--rem)) / calc(20 * var(--rem)) calc(20 * var(--rem)),
      var(--color-bg-base);
  }

  & .project-calendar__balloon {
    width: calc(226 * var(--rem));
    height: calc(106 * var(--rem));
    margin: calc(21 * var(--rem)) 0 0 calc(30 * var(--rem));
    padding: calc(26 * var(--rem)) calc(30 * var(--rem)) 0 calc(10 * var(--rem));
    background: url(../../img/202611/main/calendar-balloon.svg) no-repeat 0 0 / 100% 100%;
    font-size: calc(13 * var(--rem));
    font-weight: 700;
    line-height: 1.769;
    --letter-spacing: .05em;
    text-align: center;
    white-space: nowrap;
  }

  & .project-calendar__character {
    position: absolute;
    top: calc(23 * var(--rem));
    left: calc(219 * var(--rem));
    width: calc(171 * var(--rem));
  }

  & .project-calendar__star {
    position: absolute;
    top: calc(var(--size-top) * var(--rem));
    left: calc(var(--size-left) * var(--rem));
    width: calc(var(--size-width) * var(--rem));
  }

  & .project-calendar__star--01 {
    --size-top: -23;
    --size-left: 21;
    --size-width: 50;
    --size-from-x: 42;
    --size-from-y: 88;
  }

  & .project-calendar__star--02 {
    --size-top: -18;
    --size-left: 91;
    --size-width: 27;
    --size-from-x: -16;
    --size-from-y: 94;
  }

  & .project-calendar__star--03 {
    --size-top: 1;
    --size-left: 134;
    --size-width: 25;
    --size-from-x: -58;
    --size-from-y: 76;
  }

  & .project-calendar__star--04 {
    --size-top: 91;
    --size-left: -7;
    --size-width: 39;
    --size-from-x: 76;
    --size-from-y: -20;
  }

  & .project-calendar__label {
    position: relative;
    width: calc(224 * var(--rem));
    height: calc(45 * var(--rem));
    margin-top: calc(21 * var(--rem));
    padding: calc(12 * var(--rem)) 0 0 calc(20 * var(--rem));
    border-top-right-radius: calc(20 * var(--rem));
    background-color: var(--base-font-color);
    box-shadow: 0 calc(-4 * var(--rem)) calc(10 * var(--rem)) var(--color-shadow-tab);
    color: #fff;
    font-family: var(--lp-font-en);
    font-size: calc(16 * var(--rem));
    font-weight: 400;
    line-height: 1.28;
    --letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-calendar__body {
    position: relative;
    display: flow-root;
    background-color: #fff;
  }

  & .project-calendar__month {
    display: flex;
    align-items: flex-start;
    margin-top: calc(5 * var(--rem));
    padding-inline: calc(20 * var(--rem)) calc(22 * var(--rem));
    color: var(--color-key);
    font-family: var(--lp-font-en);
    line-height: 1.28;
  }

  & .project-calendar__month-num {
    font-size: calc(70 * var(--rem));
  }

  & .project-calendar__month-unit {
    margin: calc(44 * var(--rem)) 0 0 calc(4 * var(--rem));
    font-family: var(--lp-font-ja);
    font-size: calc(25 * var(--rem));
    font-weight: 700;
    line-height: 1.04;
  }

  & .project-calendar__month-en {
    margin: calc(51 * var(--rem)) 0 0 calc(15 * var(--rem));
    font-size: calc(20 * var(--rem));
  }

  & .project-calendar__year {
    margin: calc(57 * var(--rem)) 0 0 auto;
    font-size: calc(14 * var(--rem));
  }

  & .project-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, calc(50 * var(--rem)));
    justify-items: center;
    width: calc(350 * var(--rem));
    margin: calc(6 * var(--rem)) auto 0;
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    line-height: 1.28;
    white-space: nowrap;
  }

  & .project-calendar__grid {
    width: calc(350 * var(--rem));
    margin: calc(13 * var(--rem)) auto 0;
  }

  & .project-calendar__week {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, calc(50 * var(--rem)));
    grid-template-rows: calc(38 * var(--rem)) repeat(3, calc(21 * var(--rem))) calc(7 * var(--rem));
    row-gap: calc(3 * var(--rem));
  }

  & .project-calendar__week--1 {
    z-index: var(--z-base);
    grid-template-rows: calc(38 * var(--rem)) calc(59 * var(--rem));
  }

  & .project-calendar__week--3 {
    margin-top: calc(5 * var(--rem));
  }

  & .project-calendar__period {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--color-bg-base);
  }

  & .project-calendar__period--2 {
    left: calc(150 * var(--rem));
    width: calc(200 * var(--rem));
  }

  & .project-calendar__period--3 {
    left: 0;
    width: calc(150 * var(--rem));
  }

  & .project-calendar__date {
    position: relative;
    display: grid;
    place-items: center;
    grid-row: 1;
    justify-self: center;
    width: calc(30 * var(--rem));
    height: calc(30 * var(--rem));
    margin-top: calc(5 * var(--rem));
    border-radius: 50%;
    color: var(--color-key);
    font-family: var(--lp-font-en);
    font-size: calc(16 * var(--rem));
    line-height: 1;
    letter-spacing: 0;
    z-index: 0;

    &:is(button)::before {
      position: absolute;
      inset: 0;
      content: "";
      background-color: #ddf9ff;
      z-index: -1;
      width: calc(30 * var(--rem));
      height: calc(30 * var(--rem));
      border-radius: 50%;
      animation: box 3.5s ease-in-out infinite;
    }

    & .project-calendar__date::before {
      display: grid;
      place-items: center;
      grid-row: 1;
      justify-self: center;
      width: calc(30 * var(--rem));
      height: calc(30 * var(--rem));
      border-radius: 50%;
      margin-top: calc(5 * var(--rem));
      border-radius: 50%;
      position: absolute;
      inset: calc(-5 * var(--rem)) calc(-10 * var(--rem)) calc(-3 * var(--rem));
      content: "";
      background-color: #d8f9ff;
      z-index: -1;
      animation: box 1.8s ease-in-out infinite;
    }
    
    &.is-disabled {
      color: var(--color-disabled);
      background: unset;
    }

    &.is-current {
      position: relative;
      background-color: var(--color-current);
      color: #fff;
      z-index: 2;
    }

    &.is-current::before {
      background-color: #d8f9ff00;
    }

    &._black {
      color: var(--base-font-color);
      background: unset;
    }
  }

  & .project-calendar__event {
    text-align: center;
    white-space: nowrap;
  }

  & .project-calendar__event--kit {
    display: flex;
    align-items: center;
    column-gap: calc(5 * var(--rem));
    grid-area: 2 / 3 / 3 / 8;
    align-self: start;
    margin: calc(-2 * var(--rem)) 0 0 calc(23 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 700;
    line-height: 1.2;
    --letter-spacing: .05em;

    &::before {
      flex-shrink: 0;
      width: calc(5 * var(--rem));
      height: calc(5 * var(--rem));
      border-radius: 50%;
      background-color: var(--color-kit);
      content: "";
    }
  }

  & .project-calendar__event--start {
    position: absolute;
    top: calc(53 * var(--rem));
    left: calc(166 * var(--rem));
    width: calc(129 * var(--rem));
    height: calc(54 * var(--rem));
    padding-top: calc(14 * var(--rem));
    background: url(../../img/202611/main/calendar-balloon-pink.svg) no-repeat 0 0 / 100% 100%;
    color: #fff;
    font-weight: 700;
    --letter-spacing: .05em;
  }

  & .project-calendar__event-title {
    display: block;
    font-size: calc(10 * var(--rem));
    line-height: 1.3;
  }

  & .project-calendar__event-note {
    display: block;
    margin-top: calc(2 * var(--rem));
    font-size: calc(8 * var(--rem));
    font-weight: 500;
    line-height: 1.25;
  }

  & .floating {
    animation: floatY 1.8s ease-in-out infinite alternate;
  }

  & .project-calendar__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(5 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 700;
    line-height: 1.3;
    --letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-calendar__bar--app {
    grid-area: 2 / 1 / 3 / 4;
    column-gap: calc(3 * var(--rem));
    margin-right: calc(5 * var(--rem));
    border-radius: calc(5 * var(--rem));
    background-color: var(--color-bar-app);
  }

  & .project-calendar__bar--daily {
    grid-area: 2 / 4 / 3 / 8;
    margin-left: calc(6 * var(--rem));
    border-radius: calc(5 * var(--rem)) 0 0 calc(5 * var(--rem));
    background-color: var(--color-bar-daily);
  }

  & .project-calendar__bar--sample {
    grid-area: 3 / 5 / 4 / 8;
    margin-inline: calc(5 * var(--rem));
    border-radius: calc(5 * var(--rem));
    background-color: var(--color-bar-sample);
  }

  & .project-calendar__bar--brand {
    grid-area: 4 / 6 / 5 / 8;
    margin-left: calc(4 * var(--rem));
    border-radius: calc(5 * var(--rem)) 0 0 calc(5 * var(--rem));
    background-color: var(--color-bar-brand);
  }

  & .project-calendar__bar--daily-end {
    grid-area: 2 / 1 / 3 / 4;
    border-radius: 0 calc(5 * var(--rem)) calc(5 * var(--rem)) 0;
    background-color: var(--color-bar-daily);
  }

  & .project-calendar__bar--brand-end {
    grid-area: 4 / 1 / 5 / 2;
    margin-right: calc(5 * var(--rem));
    border-radius: 0 calc(5 * var(--rem)) calc(5 * var(--rem)) 0;
    background-color: var(--color-bar-brand);
  }

  & .project-calendar__bar-icon {
    flex-shrink: 0;
    width: calc(14 * var(--rem));
  }

  & .project-calendar__bar--app .project-calendar__bar-icon {
    width: calc(15 * var(--rem));
  }

  & .project-calendar__bar--sample .project-calendar__bar-icon {
    width: calc(12 * var(--rem));
  }

  & .project-calendar__bar-sale {
    position: absolute;
    top: calc(-4 * var(--rem));
    left: calc(-20 * var(--rem));
    width: calc(29 * var(--rem));
  }

  & .project-calendar__moon {
    position: relative;
    grid-area: 3 / 2 / 6 / 3;
    margin-top: calc(5 * var(--rem));
    font-weight: 700;
    white-space: nowrap;
  }

  & .project-calendar__moon-label {
    display: block;
    margin-left: calc(15 * var(--rem));
    font-size: calc(10 * var(--rem));
    line-height: 1.3;
    --letter-spacing: .05em;
  }

  & .project-calendar__moon-icon {
    position: absolute;
    top: calc(3 * var(--rem));
    left: calc(42 * var(--rem));
    width: calc(20 * var(--rem));
  }

  & .project-calendar__moon-point {
    display: block;
    margin-top: calc(1 * var(--rem));
    font-size: calc(10 * var(--rem));
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-calendar__moon-num {
    font-size: calc(12 * var(--rem));
  }

  & .project-calendar__days {
    margin-top: calc(30 * var(--rem));
    padding-top: calc(var(--size-dash-w) * var(--rem));
    background: repeating-linear-gradient(to right, var(--color-dash) 0 calc(var(--size-dash) * var(--rem)), transparent 0 calc(var(--size-dash) * 2 * var(--rem))) calc(20 * var(--rem)) 0 / calc(350 * var(--rem)) calc(var(--size-dash-w) * var(--rem)) no-repeat;
  }

  & .project-calendar__days:not(:has(> .project-day:not([hidden]))) {
    margin-top: calc(60 * var(--rem));
    padding-top: 0;
    background: none;
  }

  & .project-day {
    display: flow-root;
    padding-bottom: calc(60 * var(--rem));

    &[hidden] {
      display: none;
    }
  }

  & .project-day__title {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    column-gap: calc(5 * var(--rem));
    margin-top: calc(29 * var(--rem));
    color: var(--color-key);
    font-family: var(--lp-font-en);
    font-weight: 400;
    line-height: 1.28;
  }

  & .project-day__date {
    font-size: calc(40 * var(--rem));
  }

  & .project-day__week {
    display: grid;
    place-items: center;
    height: calc(18 * var(--rem));
    margin-top: calc(22 * var(--rem));
    padding-inline: calc(5 * var(--rem));
    border-radius: calc(30 * var(--rem));
    background-color: var(--color-key);
    color: #fff;
    font-size: calc(11 * var(--rem));
    line-height: 1;
  }

  & .project-day__time {
    position: relative;
    width: calc(82 * var(--rem));
    height: calc(24 * var(--rem));
    margin: calc(15 * var(--rem)) 0 0 calc(20 * var(--rem));
    padding: calc(3 * var(--rem)) 0 0 calc(19 * var(--rem));
    border-radius: calc(40 * var(--rem));
    background-color: var(--base-font-color);
    color: #fff;
    font-family: var(--lp-font-en);
    font-size: calc(14 * var(--rem));
    line-height: 1.28;

    &::before {
      position: absolute;
      top: calc(10 * var(--rem));
      left: calc(8 * var(--rem));
      width: calc(5 * var(--rem));
      height: calc(5 * var(--rem));
      border-radius: 50%;
      background-color: #fff;
      content: "";
    }
  }

  & .project-day__card {
    position: relative;
    display: flow-root;
    width: calc(350 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
    padding-bottom: calc(25 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background-color: var(--color-card);
  }

  & .project-day__title+.project-day__card,
  & .project-day__time+.project-day__card {
    margin-top: calc(10 * var(--rem));
  }

  & .project-day__card--app {
    padding-bottom: calc(19 * var(--rem));
    background-color: var(--color-bg-light);
  }

  & .project-day__card--app:has(.project-day__detail) {
    padding-bottom: calc(25 * var(--rem));
  }

  & .project-day__card--sample {
    background-color: var(--color-bg-light);
  }

  & :is(.project-day__card, .project-day__border) + .project-day__card:has(> .project-day__limited) {
    margin-top: calc(40 * var(--rem));
  }

  & .project-day__limited {
    position: absolute;
    top: calc(-25 * var(--rem));
    left: calc(285 * var(--rem));
    width: calc(50 * var(--rem));
    height: calc(50 * var(--rem));
    padding-top: calc(8 * var(--rem));
    border: 1px solid var(--base-font-color);
    border-radius: 50%;
    background-color: var(--color-bg-base);
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-day__limited-sub {
    font-size: calc(13 * var(--rem));
    --letter-spacing: .05em;
  }

  & .project-day__card-head {
    display: flex;
    align-items: center;
    column-gap: calc(10 * var(--rem));
    margin-top: calc(23 * var(--rem));
    padding-left: calc(19 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.38;
    --letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-day__card-icon {
    flex-shrink: 0;
    width: calc(25 * var(--rem));
  }

  & .project-day__detail {
    margin: calc(14 * var(--rem)) calc(20 * var(--rem)) 0 auto;
  }

  & .project-day__sample-image {
    width: calc(250 * var(--rem));
    margin: calc(14 * var(--rem)) auto 0;
  }

  & :is(.project-day__sample-text, .project-day__sample-note) {
    margin-inline: calc(20 * var(--rem));
    font-weight: 500;
    white-space: normal;
  }

  & .project-day__sample-text {
    margin-top: calc(15 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.715;
  }

  & .project-day__sample-note {
    margin-top: calc(10 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: 1.727;
  }

  & .project-day__border {
    width: calc(350 * var(--rem));
    height: calc(var(--size-dash-w) * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
    border: 0;
    background: repeating-linear-gradient(to right, var(--color-dash) 0 calc(var(--size-dash) * var(--rem)), transparent 0 calc(var(--size-dash) * 2 * var(--rem)));
  }
}

.lp_contents {
  & .project-marquee {
    height: calc(45 * var(--rem));
    overflow: hidden;
    background-color: var(--color-band);
  }

  & .project-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    translate: calc(16 * var(--rem)) 0;
    animation: project-marquee var(--duration-marquee) linear infinite;
  }

  & .project-marquee__text {
    color: #fff;
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    line-height: 1.28;
    --letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-marquee__star {
    width: calc(20 * var(--rem));
    margin-inline: calc(10 * var(--rem));
  }
}

@keyframes project-marquee {
  from {
    translate: calc(16 * var(--rem) - 25%) 0;
  }

  to {
    translate: calc(16 * var(--rem) - 50%) 0;
  }
}

  
@keyframes floatY {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-5px); /* 上に10px移動 */
  }
}

@keyframes box {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.9);
  }
}

.lp_contents {
  & .project-special {
    display: flow-root;
    padding-bottom: calc(60 * var(--rem));
    background-color: var(--color-bg-special);
  }

  & .project-special__title {
    margin-top: calc(60 * var(--rem));
    color: var(--color-special);
    font-size: calc(25 * var(--rem));
    font-weight: 700;
    line-height: 1.52;
    --letter-spacing: .05em;
    text-align: center;
  }

  & .project-special__item--01 {
    margin-top: calc(18 * var(--rem));
  }

  & .project-special__item--02,
  & .project-special__item--03 {
    margin-top: calc(30 * var(--rem));
  }

  & .project-special__head {
    position: relative;
    z-index: var(--z-base);
    height: calc(96 * var(--rem));
    background: radial-gradient(calc(75 * var(--rem)) calc(55 * var(--rem)) at 50% calc(102 * var(--rem)), #fff 99%, transparent 100%) no-repeat;
  }

  & .project-special__heading-image {
    position: absolute;
    top: calc(26 * var(--rem));
    left: calc(117 * var(--rem));
    width: calc(161 * var(--rem));
  }

  & .project-special__number {
    position: absolute;
    top: calc(56 * var(--rem));
    left: 0;
    width: 100%;
    color: var(--color-special);
    font-family: var(--lp-font-en);
    font-size: calc(40 * var(--rem));
    line-height: 1.28;
    text-align: center;
    white-space: nowrap;
  }

  & .project-special__star {
    position: absolute;
    top: calc(var(--size-top) * var(--rem));
    left: calc(var(--size-left) * var(--rem));
    width: calc(var(--size-width) * var(--rem));
  }

  & .project-special__star--01 {
    --size-top: 21;
    --size-left: 45;
    --size-width: 44;
    --size-from-x: 129;
    --size-from-y: 0;
  }

  & .project-special__star--02 {
    --size-top: 12;
    --size-left: 89;
    --size-width: 36;
    --size-from-x: 89;
    --size-from-y: 13;
  }

  & .project-special__star--03 {
    --size-top: 0;
    --size-left: 272;
    --size-width: 38;
    --size-from-x: -95;
    --size-from-y: 24;
  }

  & .project-special__star--04 {
    --size-top: 38;
    --size-left: 304;
    --size-width: 44;
    --size-from-x: -130;
    --size-from-y: -17;
  }

  & .project-special__star--05 {
    --size-top: 60;
    --size-left: 80;
    --size-width: 27;
    --size-from-x: 103;
    --size-from-y: -30;
  }

  & .project-special__star--06 {
    --size-top: 37;
    --size-left: 281;
    --size-width: 24;
    --size-from-x: -97;
    --size-from-y: -6;
  }

  & .project-special__card {
    position: relative;
    display: flow-root;
    width: calc(350 * var(--rem));
    margin-inline: auto;
    padding-bottom: calc(30 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background-color: #fff;
    text-align: center;
  }

  & .project-special__card--01 {
    padding-bottom: calc(32 * var(--rem));
  }

  & .project-special__text {
    margin-top: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.715;
  }

  & .project-special__text--heading {
    color: var(--color-special);
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.688;
    --letter-spacing: .05em;
  }

  & .project-special__text--price {
    color: var(--color-special);
  }

  & .project-special__name {
    margin-top: calc(10 * var(--rem));
    color: var(--color-special);
    font-size: calc(22 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
  }

  & .project-special__image {
    width: calc(310 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
  }

  & .project-special__image--02 {
    margin-top: calc(29 * var(--rem));
  }

  & .project-special__image--kit {
    margin-top: calc(12 * var(--rem));

    & img {
      aspect-ratio: 310 / 234;
    }
  }

  & .project-special__youtube {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(6 * var(--rem));
    margin-top: calc(10 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    --letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-special__youtube-icon {
    flex-shrink: 0;
    width: calc(21 * var(--rem));
  }

  & .project-special__image--03 img {
    aspect-ratio: 16 / 9;
  }

  & .project-special__guide {
    margin-top: calc(20 * var(--rem));
    color: var(--color-special);
  }

  & .project-special__button {
    margin-top: calc(8 * var(--rem));
  }

  & .project-special__button--kit {
    margin-top: calc(20 * var(--rem));
  }

  & .project-special__border {
    width: calc(310 * var(--rem));
    height: calc(var(--size-dash-w) * var(--rem));
    margin: calc(30 * var(--rem)) auto 0;
    border: 0;
    background: repeating-linear-gradient(to right, var(--color-dash) 0 calc(var(--size-dash) * var(--rem)), transparent 0 calc(var(--size-dash) * 2 * var(--rem)));
  }

  & .project-special__character {
    position: absolute;
  }

  & .project-special__character--01 {
    bottom: calc(-60 * var(--rem));
    left: calc(272 * var(--rem));
    width: calc(99 * var(--rem));
  }

  & .project-special__character--02 {
    bottom: calc(-55 * var(--rem));
    left: calc(-20 * var(--rem));
    width: calc(80 * var(--rem));
  }
}

.lp_contents {
  & .project-campaign {
    display: flow-root;
    padding-bottom: calc(60 * var(--rem));
    background: url(../../img/202611/main/campaign-bg.jpg) no-repeat center top / 100% auto, var(--color-bg-campaign);
    text-align: center;
  }

  & .project-campaign__title {
    margin-top: calc(60 * var(--rem));
    color: var(--color-key);
    font-family: var(--lp-font-en);
    font-size: calc(40 * var(--rem));
    font-weight: 400;
    line-height: 1.28;
  }

  & .project-campaign__title-sub {
    margin-top: calc(-1 * var(--rem));
    color: var(--color-key);
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
  }

  & .project-campaign__guide {
    margin-top: calc(27 * var(--rem));
  }

  & .project-campaign__card {
    --color-campaign: var(--color-key);
    display: flow-root;
    width: calc(349 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
    padding-bottom: calc(30 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--color-campaign);
  }

  & .project-campaign__card--01 {
    margin-top: calc(10 * var(--rem));
  }

  & .project-campaign__card--03 {
    --color-campaign: var(--color-key);
  }

  & .project-campaign__label {
    display: flex;
    align-items: baseline;
    justify-content: center;
    column-gap: calc(4 * var(--rem));
    margin-top: calc(25 * var(--rem));
    color: var(--color-campaign);
    font-family: var(--lp-font-en);
    line-height: 1.28;
  }

  & .project-campaign__card--02 .project-campaign__label {
    margin-top: calc(26 * var(--rem));
  }

  & .project-campaign__label-en {
    font-size: calc(14 * var(--rem));
  }

  & .project-campaign__label-num {
    font-size: calc(25 * var(--rem));
  }

  & .project-campaign__name {
    margin-top: calc(12 * var(--rem));
    font-size: calc(22 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
  }

  & .project-campaign__date {
    display: flex;
    align-items: baseline;
    justify-content: center;
    column-gap: calc(4 * var(--rem));
    width: calc(224 * var(--rem));
    height: calc(35 * var(--rem));
    margin: calc(18 * var(--rem)) auto 0;
    padding-top: calc(4 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background-color: var(--color-bg-date);
    white-space: nowrap;
  }

  & .project-campaign__date--01 {
    margin-top: calc(19 * var(--rem));
  }

  & .project-campaign__date--02 {
    width: calc(309 * var(--rem));
  }

  & .project-campaign__date-day {
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    line-height: 1.28;
  }

  & .project-campaign__date-time {
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    line-height: 1.28;
  }

  & .project-campaign__date--03 .project-campaign__date-time {
    font-size: calc(16 * var(--rem));
  }

  & .project-campaign__date-week {
    display: grid;
    place-items: center;
    align-self: center;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    margin-top: calc(-1 * var(--rem));
    border-radius: 50%;
    background-color: var(--base-font-color);
    color: #fff;
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  & .project-campaign__date-dash {
    align-self: center;
    width: calc(20 * var(--rem));
    height: 1px;
    margin-top: calc(1 * var(--rem));
    background-color: var(--base-font-color);
    font-size: 0;
  }

  & .project-campaign__date--02 .project-campaign__date-dash {
    width: calc(15 * var(--rem));
  }

  & .project-campaign__date-until {
    margin-left: calc(-4 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
  }

  & .project-campaign__text {
    margin-top: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.715;
  }

  & .project-campaign__text--x {
    line-height: 1.5;
    --letter-spacing: .05em;
  }

  & .project-campaign__text--line,
  & .project-campaign__text--line-sub {
    margin-top: calc(15 * var(--rem));
  }

  & .project-campaign__emphasis {
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 1.722;
  }

  & .project-campaign__emphasis--line {
    margin-top: calc(2 * var(--rem));
    color: var(--color-line);
  }

  & .project-campaign__text--02 {
    margin: calc(20 * var(--rem)) auto 0;
    font-size: calc(14 * var(--rem));
  }

  & .project-campaign__howto {
    display: flow-root;
    width: calc(310 * var(--rem));
    margin: calc(24 * var(--rem)) auto 0;
    padding-bottom: calc(20 * var(--rem));
    border-radius: calc(5 * var(--rem));
    background-color: var(--color-bg-light);
    text-align: left;
  }

  & .project-campaign__howto-title {
    margin-top: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.715;
    text-align: center;
  }

  & .project-campaign__steps {
    counter-reset: project-campaign-step;
  }

  & .project-campaign__step {
    position: relative;
    margin-top: calc(15 * var(--rem));
    padding-left: calc(45 * var(--rem));
    padding-right: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.715;
    counter-increment: project-campaign-step;
    white-space: pre-wrap;

    &::before {
      position: absolute;
      top: calc(3 * var(--rem));
      left: calc(20 * var(--rem));
      width: calc(20 * var(--rem));
      height: calc(20 * var(--rem));
      border-radius: 50%;
      background-color: var(--color-key);
      color: #fff;
      font-size: calc(13 * var(--rem));
      line-height: 1.54;
      text-align: center;
      white-space: nowrap;
      content: counter(project-campaign-step);
    }
  }

  & .project-campaign__step--01 {
    margin-top: calc(8 * var(--rem));
  }

  & .project-campaign__guide--x {
    margin-top: calc(20 * var(--rem));
  }

  & .project-campaign__guide--line {
    margin-top: calc(25 * var(--rem));
  }

  & .project-campaign__button {
    margin-top: calc(8 * var(--rem));
  }

  & .project-campaign__message {
    margin-top: calc(15 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.688;
  }

  & .project-campaign__app {
    display: flex;
    align-items: flex-start;
    column-gap: calc(9 * var(--rem));
    margin: calc(20 * var(--rem)) 0 0 calc(30 * var(--rem));
    text-align: left;
  }

  & .project-campaign__app-icon {
    flex-shrink: 0;
    width: calc(75 * var(--rem));
    margin-top: calc(6 * var(--rem));
  }

  & .project-campaign__app-title {
    font-size: calc(13 * var(--rem));
    font-weight: 700;
    line-height: 1.692;
  }

  & .project-campaign__app-text {
    margin-top: calc(2 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
  }

  & .project-campaign__app-link {
    margin-top: calc(8 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
  }

  & .project-campaign__app-anchor {
    position: relative;
    text-decoration: underline;
    text-underline-offset: calc(3 * var(--rem));

    &::after {
      position: absolute;
      top: calc(7 * var(--rem));
      right: calc(-11 * var(--rem));
      width: calc(6 * var(--rem));
      height: calc(6 * var(--rem));
      border-top: calc(2 * var(--rem)) solid currentColor;
      border-right: calc(2 * var(--rem)) solid currentColor;
      rotate: 45deg;
      content: "";
    }
  }
}

.lp_contents {
  & .project-shop {
    background-color: #fff;
  }

  & .project-brand {
    display: flow-root;
    padding-bottom: calc(40 * var(--rem));
    background-color: var(--color-bg-brand);
    text-align: center;
  }

  & .project-brand__button {
    margin-top: calc(45 * var(--rem));
  }

  & .project-brand__title {
    margin-top: calc(45 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    font-weight: 400;
    line-height: 1.273;
  }

  & .project-brand__title-sub {
    margin-top: calc(5 * var(--rem));
    font-size: calc(17 * var(--rem));
    font-weight: 700;
    line-height: 1.53;
  }

  & .project-brand__text {
    margin-top: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.715;

    & p+p {
      margin-top: calc(24 * var(--rem));
    }
  }

  & .project-brand__links {
    display: grid;
    justify-items: end;
    row-gap: calc(5 * var(--rem));
    margin-top: calc(25 * var(--rem));
    padding-right: calc(53 * var(--rem));
  }

  & .project-brand__anchor {
    position: relative;
    display: block;
    color: var(--color-key);
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.715;
    text-decoration: underline;
    text-underline-offset: calc(3 * var(--rem));

    &::after {
      position: absolute;
      top: calc(9 * var(--rem));
      right: calc(-10 * var(--rem));
      width: calc(7 * var(--rem));
      height: calc(7 * var(--rem));
      border-top: calc(2 * var(--rem)) solid currentColor;
      border-right: calc(2 * var(--rem)) solid currentColor;
      rotate: 45deg;
      content: "";
    }
  }

  & .project-brand__logo {
    width: calc(160 * var(--rem));
    margin: calc(40 * var(--rem)) auto 0;
  }
}

.lp_contents {
  & .ani-inview {
    translate: 0 calc(40 * var(--rem, 1px));
    transition: opacity .8s var(--transition-timing), translate .8s var(--transition-timing);

    &.is-active {
      translate: 0 0;
    }
  }

  & .ani-zoom {
    transition: opacity .5s, scale .5s;
  }

  & .ani-fade-right {
    transition: opacity var(--duration-fade-side), translate var(--duration-fade-side);
  }

  & .project-intro__badge--point {
    transition-delay: var(--delay-zoom-late);
  }

  & .ani-sequence__item {
    transition: opacity .5s calc(var(--order) * var(--delay-sequence)), scale .5s calc(var(--order) * var(--delay-sequence));
  }

  & .project-calendar__event--kit {
    --order: 0;
  }

  & .project-calendar__bar--app {
    --order: 1;
  }

  & .project-calendar__bar--daily {
    --order: 2;
  }

  & .project-calendar__bar--sample {
    --order: 3;
  }

  & .project-calendar__bar--brand {
    --order: 4;
  }

  & .project-calendar__bar--daily-end,
  & .project-calendar__bar--brand-end {
    --order: 5;
  }

  & .project-calendar__moon {
    --order: 6;
  }

  & .ani-stars__item {
    transition: translate 1.6s var(--ease-star) var(--delay-star), rotate 1.6s var(--ease-star) var(--delay-star), scale 1.6s var(--ease-star) var(--delay-star);
  }

  & .ani-stars.is-active .ani-stars__image {
    animation: ani-twinkle 3s steps(2, end) infinite;
  }

  & .ani-tilt :is(.component-period__main, .component-period__shop) {
    transition: rotate .5s var(--transition-timing) var(--delay-tilt);
  }

  & .ani-bound__char {
    display: inline-block;
  }

  & .is-active .ani-bound__char {
    animation: ani-bound var(--duration-bound) ease-in-out calc(var(--i) * var(--delay-bound));
  }

  & .project-intro__catch {
    --size-bound: calc(-6 * var(--rem));
  }

  & .project-rail-title__name {
    --size-bound: -6px;
  }
}

html.js .lp_contents {
  & .ani-inview {
    opacity: 0;

    &.is-active {
      opacity: 1;
    }
  }

  & .ani-zoom {
    opacity: 0;
    scale: .6;

    &.is-active {
      opacity: 1;
      scale: 1;
    }
  }

  & .ani-fade-right {
    opacity: 0;
    translate: calc(-30 * var(--rem)) 0;

    &.is-active {
      opacity: 1;
      translate: 0 0;
    }
  }

  & .ani-sequence__item {
    opacity: 0;
    scale: .6;
  }

  & .ani-sequence.is-active .ani-sequence__item {
    opacity: 1;
    scale: 1;
  }

  & .ani-stars__item {
    translate: calc(var(--size-from-x) * var(--rem)) calc(var(--size-from-y) * var(--rem));
    rotate: -360deg;
    scale: 0;
  }

  & .project-rail-title__star {
    translate: calc(var(--size-from-x) * var(--rem-pc)) calc(var(--size-from-y) * var(--rem-pc));
  }

  & .ani-stars.is-active .ani-stars__item {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }

  /* & .ani-tilt :is(.component-period__main, .component-period__shop) {
    rotate: 0deg;
  } */

  & .ani-tilt.is-active .component-period__main {
    rotate: 3deg;
  }

  & .ani-tilt.is-active .component-period__shop {
    rotate: -2deg;
  }
}

@keyframes ani-twinkle {

  0%,
  100% {
    transform: scale(1) rotate(10deg);
  }

  50% {
    transform: scale(1.15) rotate(-10deg);
  }
}

@keyframes ani-bound {

  0%,
  12%,
  25%,
  100% {
    translate: 0 0;
  }

  20% {
    translate: 0 var(--size-bound);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .lp_contents {
    & :is(.ani-inview, .ani-zoom, .ani-fade-right, .ani-sequence__item, .ani-stars__item) {
      opacity: 1;
      translate: 0 0;
      rotate: 0deg;
      scale: 1;
      transition: none;
    }

    & .ani-tilt .component-period__main {
      rotate: 3deg;
      transition: none;
    }

    & .ani-tilt .component-period__shop {
      rotate: -2deg;
      transition: none;
    }

    & :is(.ani-stars__image, .ani-bound__char, .project-marquee__track) {
      animation: none;
    }
  }
}