@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 {
  --color-text: #383330;
  --color-white: #fff;
  --color-yellow: #fef898;
  --color-blue: #4ea5f2;
  --color-green: #acd32d;
  --color-green-light: #d6e99a;
  --color-green-present: #d5ed89;
  --color-grid-bg: #faf2cd;
  --color-grid-line: #f5eabc;
  --color-pink: #fe4db7;
  --color-pink-bg: #ffd1e3;
  --color-marker: #ffeea5;
  --color-line: #06c755;
  --color-gray-item: #f0f0f0;
  --color-gray-period: #f1f1f1;
  --color-gray-entry: #f7f7f7;
  --color-about-bg: #faf7e8;

  --font-base: "noto-sans-cjk-jp", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-display: "ultra", "Ultra", "Rockwell Extra Bold", "Hiragino Kaku Gothic ProN", serif;

  --transition-timing: cubic-bezier(.51, .21, .41, 1);
  --letter-spacing: .05em;

  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-star: cubic-bezier(.19, 1, .22, 1);
  --duration-fade: .8s;
  --duration-band: 7.7s;
  --duration-spin: 30s;
  --delay-star: 1.5s;

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

.lp_contents {
  position: relative;
  font-family: var(--font-base);
  font-size: calc(14 * var(--rem));
  color: var(--color-text);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: normal;
  }

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

  & :where(div, 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,
  & ol,
  & 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;
    font: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  & :where(a, button):focus-visible {
    outline: 2px solid var(--color-blue);
    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;
    }
  }

  & .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    letter-spacing: inherit;
    white-space: nowrap;
  }
}

.lp_contents {
  & .accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);
  }
}

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

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

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

.lp_contents {
  & .project-rail-logo {
    width: calc(337 * var(--rem-pc));
  }

  & .project-rail-logo__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

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

  & .project-rail-nav__item {
    font-family: var(--font-display);
    font-size: calc(22 * var(--rem-pc));
    line-height: 1.2727;
    letter-spacing: .05em;
    color: var(--color-white);
    white-space: nowrap;
  }

  & .project-rail-nav__link {
    position: relative;
    display: block;
    letter-spacing: .05em;

    &:focus-visible {
      outline-color: var(--color-white);
    }

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(-27 * var(--rem-pc));
      translate: 0 -50%;
      width: calc(14 * var(--rem-pc));
      height: calc(14 * var(--rem-pc));
      background: url(../../img/202611/rail-nav-star.svg) no-repeat center / contain;
      opacity: 0;
      transition: opacity .5s;
    }

    &.is-current::before {
      opacity: 1;
    }
  }

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

.lp_contents {
  & .project-mv {
    display: flow-root;
    padding-bottom: calc(50 * var(--rem));
    background-color: var(--color-yellow);
  }

  & .project-mv__title {
    width: calc(304 * var(--rem));
    margin: calc(30 * var(--rem)) 0 0 calc(40 * var(--rem));
  }

  & .project-mv__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  & .project-mv__copy {
    margin-top: calc(10 * var(--rem));
    font-size: calc(22 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  & .project-mv__copy_note {
    text-align: center;
    margin-top: calc(10 * var(--rem));
    font-size: calc(12 * var(--rem));
  }


  & .project-mv__badges {
    display: flex;
    justify-content: center;
    gap: calc(2 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .project-mv__badge {
    width: calc(160 * var(--rem));
  }

  & .project-mv__note {
    margin-top: calc(15 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  & .project-mv__brand {
    width: calc(150 * var(--rem));
    margin: calc(28 * var(--rem)) auto 0;
  }

  & .project-mv__period {
    display: flex;
    align-items: flex-start;
    width: calc(350 * var(--rem));
    height: calc(45 * var(--rem));
    margin: calc(46 * var(--rem)) auto 0;
    padding-left: calc(17 * var(--rem));
    background-color: var(--color-text);
    color: var(--color-white);
    white-space: nowrap;
    letter-spacing: 0;
  }

  & .project-mv__date {
    margin-top: calc(7 * var(--rem));
    font-family: var(--font-display);
    font-size: calc(25 * var(--rem));
    line-height: 1.28;
    letter-spacing: 0;
  }

  & .project-mv__week {
    display: grid;
    place-items: center;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    margin: calc(14 * var(--rem)) 0 0 calc(2 * var(--rem));
    border-radius: 50%;
    background-color: var(--color-white);
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-mv__time {
    margin: calc(16 * var(--rem)) 0 0 calc(4 * var(--rem));
    font-family: var(--font-display);
    font-size: calc(16 * var(--rem));
    line-height: 1.3125;
    letter-spacing: 0;
  }

  & .project-mv__time--end {
    margin-top: calc(14 * var(--rem));
  }

  & .project-mv__dash {
    width: calc(20 * var(--rem));
    height: 1px;
    margin: calc(26 * var(--rem)) 0 0 calc(3 * var(--rem));
    background-color: var(--color-white);
    letter-spacing: 0;
  }

  & .project-mv__date--end {
    margin-left: calc(5 * var(--rem));
  }
}

.lp_contents {
  & .project-calendar {
    display: flow-root;
    padding-bottom: calc(60 * var(--rem));
    background-color: var(--color-grid-bg);
    background-image: linear-gradient(var(--color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    background-size: calc(20 * var(--rem)) calc(20 * var(--rem));
  }

  & .project-calendar__inner {
    position: relative;
    display: flow-root;
  }

  & .project-calendar__circle {
    position: absolute;
    top: calc(25 * var(--rem));
    left: calc(238 * var(--rem));
    width: calc(139 * var(--rem));
    pointer-events: none;
  }

  & .project-calendar__title {
    position: relative;
    z-index: var(--z-base);
    width: calc(300 * var(--rem));
    height: calc(50 * var(--rem));
    margin: calc(64 * var(--rem)) auto 0;
    padding-top: calc(11 * var(--rem));
    border-radius: calc(15 * var(--rem)) calc(15 * var(--rem)) 0 0;
    background-color: var(--color-text);
    font-family: var(--font-display);
    font-size: calc(22 * var(--rem));
    line-height: 1.2727;
    letter-spacing: 0;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
  }

  & .project-calendar__card {
    position: relative;
    z-index: var(--z-base);
    width: calc(350 * var(--rem));
    margin: calc(-1 * var(--rem)) auto 0;
    padding: calc(31 * var(--rem)) 0 calc(30 * var(--rem));
    border-radius: calc(15 * var(--rem));
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-text);
  }

  & .project-calendar__year {
    position: absolute;
    top: calc(17 * var(--rem));
    left: calc(236 * var(--rem));
    display: grid;
    place-items: center;
    rotate: 10deg;
    width: calc(94 * var(--rem));
    height: calc(43 * var(--rem));
    border-radius: 50%;
    background-color: var(--color-green-light);
    box-shadow: inset 0 0 0 1px var(--color-text);
    font-family: var(--font-display);
    font-size: calc(22 * var(--rem));
    line-height: 1.2727;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .project-calendar__start {
    display: grid;
    place-items: center;
    width: calc(310 * var(--rem));
    height: calc(45 * var(--rem));
    margin: calc(9 * var(--rem)) auto 0;
    border-radius: calc(10 * var(--rem));
    background-color: var(--color-blue);
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-white);
    white-space: nowrap;
  }

  & .project-calendar__start--open {
    margin-top: calc(10 * var(--rem));
    background-color: var(--color-pink);
  }

  & .project-calendar__list {
    display: grid;
    row-gap: calc(10 * var(--rem));
    width: calc(310 * var(--rem));
    margin: calc(10 * var(--rem)) auto 0;
  }

  & .project-calendar__list--1111 {
    margin-top: calc(9 * var(--rem));
  }

  & .project-calendar__more {
    visibility: hidden;
    transition: max-height .4s var(--transition-timing), visibility 0s .4s;
  }

  & .project-calendar__card.is-open .project-calendar__more {
    visibility: visible;
    transition: max-height .4s var(--transition-timing), visibility 0s;
  }

  & .project-calendar__more-inner {
    position: relative;
    padding-top: calc(15 * var(--rem));
  }

  & .section-event--bear {
    position: relative;
  }

  & .project-calendar__bear {
    position: absolute;
    top: calc(17 * var(--rem));
    right: calc(22 * var(--rem));
    width: calc(52 * var(--rem));
    pointer-events: none;
  }

  & .project-calendar__toggle {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: calc(140 * var(--rem));
    height: calc(35 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
    border-radius: calc(30 * var(--rem));
    background-color: var(--color-pink-bg);
    box-shadow: inset 0 0 0 1px var(--color-text);
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 2.2;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-calendar__toggle-label {
    grid-column: 2;
  }

  & .project-calendar__toggle-label--close {
    display: none;
  }

  & .project-calendar__toggle-icon {
    grid-column: 3;
    justify-self: end;
    width: calc(11 * var(--rem));
    height: calc(11 * var(--rem));
    margin-right: calc(10 * var(--rem));
  }

  & .project-calendar__card.is-open {
    & .project-calendar__toggle {
      margin-top: calc(15 * var(--rem));
    }

    & .project-calendar__toggle-label--more,
    & .project-calendar__toggle-bar {
      display: none;
    }

    & .project-calendar__toggle-label--close {
      display: block;
    }
  }

  & .project-calendar__bird {
    position: absolute;
    bottom: calc(-53 * var(--rem));
    left: calc(-4 * var(--rem));
    width: calc(129 * var(--rem));
    pointer-events: none;
  }
}

.lp_contents {
  & .section-date {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-left: calc(35 * var(--rem));
    letter-spacing: 0;
  }

  & .section-date--more {
    margin-left: calc(36 * var(--rem));
  }

  & .project-calendar__list + .section-date {
    margin-top: calc(15 * var(--rem));
  }

  & .section-date--start {
    margin-left: calc(37 * var(--rem));
  }

  & .section-date__day {
    position: relative;
    z-index: var(--z-base);
    font-family: var(--font-display);
    font-size: calc(30 * var(--rem));
    line-height: 1.2667;
    letter-spacing: 0;
  }

  & .section-date__week {
    position: relative;
    z-index: var(--z-base);
    display: grid;
    place-items: center;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    margin: calc(10 * var(--rem)) 0 0 calc(4 * var(--rem));
    border-radius: 50%;
    background-color: var(--color-text);
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-white);
    white-space: nowrap;
  }

  & .section-date__week--medium {
    font-weight: 500;
  }

  & .section-date__time {
    position: relative;
    z-index: var(--z-base);
    margin: calc(12 * var(--rem)) 0 0 calc(17 * var(--rem));
    font-family: var(--font-display);
    font-size: calc(18 * var(--rem));
    line-height: 1.2778;
    letter-spacing: 0;
  }

  & .section-date__underline {
    position: absolute;
    top: calc(18 * var(--rem));
    left: calc(-5 * var(--rem));
    width: calc(97 * var(--rem));
    height: calc(19 * var(--rem));
    overflow: visible;
  }

  & .section-date__underline--1111 {
    width: calc(108 * var(--rem));
  }

  & .section-date__underline--1116 {
    width: calc(112 * var(--rem));
  }

  & .section-date__underline--1119 {
    width: calc(114 * var(--rem));
  }
}

.lp_contents {
  & .section-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(45 * var(--rem));
    padding: calc(10 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: var(--color-gray-item);
  }

  & .section-event--lines3 {
    padding-block: calc(9 * var(--rem));
  }

  & .section-event--wide,
  & .section-event--short {
    min-height: 0;
  }

  & .section-event--store {
    display: block;
    min-height: 0;
    padding: 0;
    background: none;
  }

  & .section-event__tag {
    width: calc(87 * var(--rem));
    height: calc(24 * var(--rem));
    margin-left: calc(10 * var(--rem));
    padding-top: calc(6 * var(--rem));
    border-radius: calc(10 * var(--rem)) calc(10 * var(--rem)) 0 0;
    background-color: var(--color-yellow);
    box-shadow: inset 0 0 0 1px var(--color-text);
    font-size: calc(11 * var(--rem));
    font-weight: 700;
    line-height: 1.1818;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }

  & .section-event__body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: calc(-1 * var(--rem));
    padding: calc(10 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: var(--color-gray-item);
  }

  & .section-event__text {
    font-size: calc(13 * var(--rem));
    font-weight: 700;
    line-height: 1.5385;
    white-space: nowrap;
  }

  & .section-event__text--large {
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
  }
}

.lp_contents {
  & .component-check {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: calc(47 * var(--rem)) auto;
    align-items: start;
    width: calc(70 * var(--rem));
    height: calc(24 * var(--rem));
    padding: calc(3 * var(--rem)) 0 0 calc(10 * var(--rem));
    border-radius: calc(35 * var(--rem));
    background-color: var(--color-text);
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-white);
    white-space: nowrap;
    transition: color .3s, background-color .3s, box-shadow .3s;

    &::after {
      content: "";
      position: absolute;
      inset: calc(-10 * var(--rem));
    }

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        background-color: var(--color-white);
        box-shadow: inset 0 0 0 1px var(--color-text);
        color: var(--color-text);
      }
    }
  }

  & .component-check__icon {
    width: calc(7 * var(--rem));
    height: calc(5 * var(--rem));
    margin-top: calc(7 * var(--rem));
  }

  & .component-check--link .component-check__icon {
    width: calc(5 * var(--rem));
    height: calc(7 * var(--rem));
    margin: calc(6 * var(--rem)) 0 0 calc(1 * var(--rem));
  }
}

.lp_contents {
  & .component-band {
    position: relative;
    z-index: var(--z-base);
    height: calc(45 * var(--rem));
    background-color: var(--color-green);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: calc(-221 * var(--rem));
      width: calc(100% + 462 * var(--rem));
      height: 100%;
      background: url(../../img/202611/band-marquee.svg) repeat-x 0 0 / calc(231 * var(--rem)) 100%;
      animation: band-scroll var(--duration-band) linear infinite;
    }
  }

  & .component-band__koala {
    position: absolute;
    top: calc(-40 * var(--rem));
    left: calc(146 * var(--rem));
    width: calc(87 * var(--rem));
    pointer-events: none;
    animation: character-sway 2s linear infinite;
  }
}

@keyframes band-scroll {
  to {
    translate: calc(-231 * var(--rem)) 0;
  }
}

.lp_contents {
  & .project-present {
    position: relative;
    display: flow-root;
    padding-bottom: calc(59 * var(--rem));
    background-color: var(--color-green-present);
  }

  & .project-present__stars {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: calc(390 * var(--rem));
    height: auto;
    overflow: visible;
  }

  & .project-present__inner {
    position: relative;
    display: flow-root;
  }

  & .project-present__label {
    width: calc(161 * var(--rem));
    height: calc(40 * var(--rem));
    margin: calc(60 * var(--rem)) 0 0 calc(20 * var(--rem));
    padding-top: calc(9 * var(--rem));
    border-radius: calc(15 * var(--rem)) calc(15 * var(--rem)) 0 0;
    background-color: var(--color-text);
    font-family: var(--font-display);
    font-size: calc(18 * var(--rem));
    line-height: 1.2778;
    letter-spacing: 0;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
  }

  & .project-present__card {
    position: relative;
    width: calc(349 * var(--rem));
    margin-left: calc(21 * var(--rem));
    padding: calc(30 * var(--rem)) 0;
    border-radius: 0 calc(15 * var(--rem)) calc(15 * var(--rem));
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-text);
  }

  & .project-present__dolphin {
    position: absolute;
    top: calc(-46 * var(--rem));
    left: calc(256 * var(--rem));
    width: calc(63 * var(--rem));
    pointer-events: none;
    animation: character-hop 2s linear .3s infinite;
  }

  & .project-present__title {
    font-size: calc(22 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }

  & .project-present__entry {
    width: calc(310 * var(--rem));
    margin: calc(25 * var(--rem)) 0 0 calc(19 * var(--rem));
    padding: calc(20 * var(--rem)) 0;
    border-radius: calc(5 * var(--rem));
    background-color: var(--color-gray-entry);
  }

  & .project-present__entry-title {
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.7143;
    letter-spacing: 0;
    text-align: center;
  }

  & .project-present__steps {
    display: grid;
    row-gap: calc(15 * var(--rem));
    margin: calc(8 * var(--rem)) calc(15 * var(--rem)) 0;
  }

  & .project-present__step {
    display: grid;
    grid-template-columns: calc(20 * var(--rem)) auto;
    column-gap: calc(10 * var(--rem));
    align-items: start;
    letter-spacing: 0;
  }

  & .project-present__step-number {
    display: grid;
    place-items: center;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    margin-top: calc(1 * var(--rem));
    border-radius: 50%;
    background-color: var(--color-green);
    font-size: calc(13 * var(--rem));
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-white);
    white-space: nowrap;
  }

  & .project-present__step-text {
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
  }

  & .project-present__step--link {
    & .project-present__step-number {
      margin-top: calc(2 * var(--rem));
    }

    & .project-present__step-text {
      line-height: 1.7143;
    }
  }

  & .project-present__step-link {
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: underline;
  }

  & .project-present__step-icon {
    position: relative;
    top: calc(2 * var(--rem));
    display: inline-block;
    width: calc(12 * var(--rem));
    margin-left: calc(7 * var(--rem));
  }

  & .project-present__note {
    margin-top: calc(12 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    line-height: 1.6364;
    text-align: center;
    white-space: nowrap;
  }

  & .project-present__note-number {
    font-size: calc(12 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
  }
}

.lp_contents {
  & .section-period {
    display: flex;
    align-items: flex-start;
    width: calc(224 * var(--rem));
    height: calc(35 * var(--rem));
    margin-top: calc(20 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background-color: var(--color-gray-period);
    white-space: nowrap;
    letter-spacing: 0;
  }

  & .section-period--present {
    margin: calc(25 * var(--rem)) 0 0 calc(61 * var(--rem));
    padding-left: calc(23 * var(--rem));
  }

  & .section-period--campaign01 {
    margin-inline: auto;
    padding-left: calc(25 * var(--rem));
  }

  & .section-period--campaign02 {
    margin: calc(18 * var(--rem)) 0 0 calc(63 * var(--rem));
    padding-left: calc(27 * var(--rem));
  }

  & .section-period--campaign03 {
    margin: calc(18 * var(--rem)) 0 0 calc(63 * var(--rem));
    padding-left: calc(28 * var(--rem));
  }

  & .section-period__date {
    margin-top: calc(4 * var(--rem));
    font-family: var(--font-display);
    font-size: calc(22 * var(--rem));
    line-height: 1.2727;
    letter-spacing: 0;
  }

  & .section-period__week {
    display: grid;
    place-items: center;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    margin: calc(8 * var(--rem)) 0 0 calc(4 * var(--rem));
    border-radius: 50%;
    background-color: var(--color-text);
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-white);
    white-space: nowrap;
  }

  & .section-period--campaign01 .section-period__week {
    margin-left: calc(2 * var(--rem));
  }

  & .section-period__dash {
    width: calc(20 * var(--rem));
    height: 1px;
    margin: calc(21 * var(--rem)) calc(4 * var(--rem)) 0;
    background-color: var(--color-text);
    letter-spacing: 0;
  }

  & .section-period__time {
    margin: calc(10 * var(--rem)) 0 0 calc(4 * var(--rem));
    font-family: var(--font-display);
    font-size: calc(16 * var(--rem));
    line-height: 1.3125;
    letter-spacing: 0;
  }

  & .section-period__until {
    margin-top: calc(9 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.lp_contents {
  & .component-marker {
    display: inline-block;
    letter-spacing: 0;
    background: linear-gradient(var(--color-marker), var(--color-marker)) no-repeat left 0 bottom var(--marker-bottom) / 100% calc(13 * var(--rem));
  }

  & .component-marker--present {
    --marker-bottom: calc(1 * var(--rem));
  }

  & .component-marker--campaign01,
  & .component-marker--campaign02 {
    --marker-bottom: calc(5 * var(--rem));
  }

  & .component-marker--campaign03 {
    --marker-bottom: calc(2 * var(--rem));
  }
}

.lp_contents {
  & .component-lead {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: calc(10 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;

    &::before,
    &::after {
      content: "";
      width: calc(8 * var(--rem));
      height: calc(14 * var(--rem));
    }

    &::before {
      background: linear-gradient(to top right, transparent calc(50% - .5px), var(--color-text) calc(50% - .5px), var(--color-text) calc(50% + .5px), transparent calc(50% + .5px));
    }

    &::after {
      background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--color-text) calc(50% - .5px), var(--color-text) calc(50% + .5px), transparent calc(50% + .5px));
    }
  }

  & .component-lead--present {
    margin-top: calc(30 * var(--rem));
  }

  & .component-lead--diagnosis {
    margin-top: calc(20 * var(--rem));
  }

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

.lp_contents {
  & .component-button {
    width: calc(250 * var(--rem));
    margin: calc(10 * var(--rem)) auto 0;
  }

  & .component-button__link {
    --shadow-color: var(--color-green);
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(45 * var(--rem));
    border-radius: calc(30 * var(--rem));
    background-color: var(--color-text);
    box-shadow: 0 calc(5 * var(--rem)) 0 var(--shadow-color);
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-white);
    white-space: nowrap;
    transition: translate .5s, box-shadow .5s;
  }

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

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

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

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

  & .component-button--diagnosis {
    margin: calc(8 * var(--rem)) auto 0;
  }

  & .component-button--campaign01 {
    margin-top: calc(26 * var(--rem));

    & .component-button__link {
      --shadow-color: var(--color-pink);
    }
  }

  & .component-button--line {
    margin-top: calc(8 * var(--rem));

    & .component-button__link {
      --shadow-color: var(--color-text);
      background-color: var(--color-line);
    }
  }

  & .component-button--about {
    margin-top: calc(40 * var(--rem));
    margin-bottom: calc(40 * var(--rem));

    & .component-button__link {
      --shadow-color: var(--color-blue);
    }
  }
}

.lp_contents {
  & .project-diagnosis {
    display: flow-root;
    padding-bottom: calc(65 * var(--rem));
    background-color: var(--color-grid-bg);
    background-image: linear-gradient(var(--color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    background-size: calc(20 * var(--rem)) calc(20 * var(--rem));
  }

  & .project-diagnosis__inner {
    display: flow-root;
  }

  & .project-diagnosis__ttl {
    font-size: calc(22 * var(--rem));
    font-weight: 700;
    margin: calc(60 * var(--rem)) auto 0;
    text-align: center;
  }

  & .project-diagnosis__image {
    position: relative;
    width: calc(310 * var(--rem));
    margin: calc(15 * var(--rem)) auto calc(25 * var(--rem));
  }

  & .project-diagnosis__squirrel {
    position: absolute;
    right: calc(-20 * var(--rem));
    bottom: calc(-12 * var(--rem));
    width: calc(66 * var(--rem));
    pointer-events: none;
    animation: character-hop 2s linear .3s infinite;
  }
}

.lp_contents {
  & .project-campaign {
    position: relative;
    display: flow-root;
    padding-bottom: calc(60 * var(--rem));
    background: var(--color-pink-bg) url(../../img/202611/campaign-bg.jpg) repeat 0 0 / calc(200 * var(--rem));
  }

  & .project-campaign__stars {
    position: absolute;
    pointer-events: none;
    top: calc(30 * var(--rem));
    left: 0;
    width: calc(390 * var(--rem));
    height: auto;
    overflow: visible;
  }

  & .project-campaign__title {
    position: relative;
    margin-top: calc(60 * var(--rem));
    font-family: var(--font-display);
    font-size: calc(40 * var(--rem));
    line-height: 1.275;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }

  & .project-campaign__title-ja {
    display: block;
    margin-top: calc(-1 * var(--rem));
    font-family: var(--font-base);
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
  }

  & .project-campaign__dog {
    position: absolute;
    top: calc(117 * var(--rem));
    left: calc(-5 * var(--rem));
    z-index: calc(var(--z-base) + 1);
    width: calc(86 * var(--rem));
    pointer-events: none;
    animation: character-sway 2s linear infinite;
  }
}

.lp_contents {
  & .section-campaign {
    position: relative;
    z-index: var(--z-base);
    width: calc(350 * var(--rem));
    margin: calc(25 * var(--rem)) auto 0;
    padding: calc(26 * var(--rem)) 0 calc(39 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-text);
    text-align: center;
  }

  & .section-campaign--02 {
    width: calc(349 * var(--rem));
    margin: calc(20 * var(--rem)) 0 0 calc(21 * var(--rem));
    padding-bottom: calc(35 * var(--rem));
  }

  & .section-campaign--03 {
    width: calc(349 * var(--rem));
    margin: calc(20 * var(--rem)) 0 0 calc(20 * var(--rem));
    padding: calc(25 * var(--rem)) 0 calc(41 * var(--rem));
  }

  & .section-campaign__label {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(4 * var(--rem));
    font-family: var(--font-display);
    color: var(--color-pink);
    white-space: nowrap;
    letter-spacing: 0;
  }

  & .section-campaign__label-text {
    margin-top: calc(11 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.2857;
    letter-spacing: 0;
  }

  & .section-campaign__number {
    font-size: calc(25 * var(--rem));
    line-height: 1.28;
    letter-spacing: 0;
  }

  & .section-campaign__title {
    margin-top: calc(12 * var(--rem));
    font-size: calc(22 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .section-campaign__text {
    margin-top: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.7143;
    letter-spacing: 0;
    white-space: nowrap;
  }

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

  & .section-campaign__text--03,
  & .section-campaign__text--03b {
    margin-top: calc(15 * var(--rem));
  }

  & .section-campaign__text--04 {
    width: calc(300 * var(--rem));
    background: #F1F1F1;
    padding: calc(15 * var(--rem)) 0;
    margin: calc(20 * var(--rem)) auto 0;
    border-radius: calc(10 * var(--rem));
    font-size: calc(13 * var(--rem));
  }

  & .section-campaign__catch {
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .section-campaign__catch--03 {
    margin-top: calc(2 * var(--rem));
    line-height: 1.7222;
    color: var(--color-line);
  }

  & .section-campaign__accent {
    letter-spacing: 0;
    color: var(--color-pink);
  }

  & .section-campaign__accent-number {
    font-size: calc(25 * var(--rem));
    line-height: 1.72;
    letter-spacing: 0;
  }

  & .section-campaign__catch--02 .section-campaign__accent-number {
    font-size: calc(22 * var(--rem));
    line-height: 1.6818;
  }

  & .section-campaign__note {
    margin-top: calc(12 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    line-height: 1.5455;
    white-space: nowrap;
  }

  & .section-campaign__mission {
    width: calc(87 * var(--rem));
    padding: calc(0 * var(--rem)) 0 calc(5 * var(--rem));
    margin: calc(0 * var(--rem)) auto 0;
  }

  & .section-campaign__notes {
    margin: calc(12 * var(--rem)) 0 0 calc(19 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    line-height: 1.5455;
    text-align: left;
    white-space: nowrap;
  }

  & .section-campaign__app {
    display: grid;
    grid-template-columns: calc(75 * var(--rem)) auto;
    column-gap: calc(9 * var(--rem));
    align-items: start;
    margin: calc(20 * var(--rem)) 0 0 calc(19 * var(--rem));
    text-align: left;
  }

  & .section-campaign__app-icon {
    margin-top: calc(6 * var(--rem));
  }

  & .section-campaign__app-title {
    font-size: calc(13 * var(--rem));
    font-weight: 700;
    line-height: 1.6923;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .section-campaign__app-text {
    margin-top: calc(2 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .section-campaign__app-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: calc(5 * var(--rem));
    margin-top: calc(8 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    text-decoration: underline;
    white-space: nowrap;
  }

  & .section-campaign__app-arrow {
    width: calc(6 * var(--rem));
    height: calc(11 * var(--rem));
  }

  & .section-campaign__message {
    margin-top: calc(15 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.6875;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-shop {
    padding: calc(10 * var(--rem)) 0 calc(5 * var(--rem));
    background-color: var(--color-white);

    & img {
      aspect-ratio: 390 / 305;
      object-fit: cover;
    }
  }

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

  & .project-about__title {
    font-family: var(--font-display);
    font-size: calc(22 * var(--rem));
    line-height: 1.2727;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .project-about__subtitle {
    margin-top: calc(5 * var(--rem));
    font-size: calc(17 * var(--rem));
    font-weight: 700;
    line-height: 1.5294;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .project-about__text {
    margin-top: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.7143;
    letter-spacing: 0;
    white-space: nowrap;
  }

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

  & .project-about__link {
    display: inline-flex;
    align-items: center;
    gap: calc(5 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.7143;
    letter-spacing: 0;
    color: var(--color-blue);
    text-decoration: underline;
    white-space: nowrap;
  }

  & .project-about__link-arrow {
    width: calc(7 * var(--rem));
    height: calc(12 * var(--rem));
  }

  & .project-about__brand {
    width: calc(180 * var(--rem));
    margin: calc(54 * var(--rem)) auto 0;
  }
}

.lp_contents {
  & .project-mv__star,
  & .project-rail-logo__star,
  & .project-campaign__star,
  & .project-present__star,
  & .project-mv__star > path,
  & .project-rail-logo__star > path,
  & .project-campaign__star > path {
    transform-box: fill-box;
    transform-origin: center;
  }

  & .project-calendar__circle {
    animation: spin var(--duration-spin) linear infinite;
  }

  & .project-present__star--blink {
    animation: star-blink 2s ease-in-out infinite;
  }

  & .project-present__star--03 {
    animation-delay: .4s;
  }

  & .project-present__star--04 {
    animation-delay: .8s;
  }

  & .project-present__star--10 {
    animation-delay: 1.2s;
  }

  & .project-present__star--12 {
    animation-delay: 1.6s;
  }

  & .ani-logo.is-active {
    & .project-mv__star > path,
    & .project-rail-logo__star > path {
      animation: star-twinkle 3s steps(2, end) infinite;
    }

    & .project-mv__char,
    & .project-rail-logo__char {
      animation: char-bound 5s ease-in-out var(--delay-char, 0s);
    }
  }

  & .ani-stars.is-active .project-campaign__star > path {
    animation: star-twinkle 3s steps(2, end) infinite;
  }

  & :is(.project-mv__char, .project-rail-logo__char) {
    &:nth-child(2) { --delay-char: .15s; }
    &:nth-child(3) { --delay-char: .3s; }
    &:nth-child(4) { --delay-char: .45s; }
    &:nth-child(5) { --delay-char: .6s; }
    &:nth-child(6) { --delay-char: .75s; }
    &:nth-child(7) { --delay-char: .9s; }
    &:nth-child(8) { --delay-char: 1.05s; }
    &:nth-child(9) { --delay-char: 1.2s; }
    &:nth-child(10) { --delay-char: 1.35s; }
    &:nth-child(11) { --delay-char: 1.5s; }
    &:nth-child(12) { --delay-char: 1.65s; }
    &:nth-child(13) { --delay-char: 1.8s; }
    &:nth-child(14) { --delay-char: 1.95s; }
  }

  & .project-calendar__bird {
    animation: character-shake .4s step-end .1s infinite;
  }
}

html.js .lp_contents {
  & .ani-fadeup {
    opacity: 0;
    translate: 0 calc(40 * var(--rem));
    transition: opacity var(--duration-fade) var(--ease-out), translate var(--duration-fade) var(--ease-out);

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

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

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

  & .project-mv__badge--point {
    transition-delay: .5s;
  }

  & .ani-logo {
    opacity: 0;
    scale: .8;
    transition: opacity var(--duration-fade) var(--ease-out), scale var(--duration-fade) var(--ease-out);

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

  & .ani-logo,
  & .ani-stars {
    & :is(.project-mv__star, .project-rail-logo__star, .project-campaign__star) {
      translate: var(--star-from, 0 0);
      scale: 0;
      rotate: -360deg;
      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);
    }

    &.is-active :is(.project-mv__star, .project-rail-logo__star, .project-campaign__star) {
      translate: 0 0;
      rotate: 0deg;
      scale: 1;
    }
  }

  & :is(.project-mv__stars--top, .project-rail-logo__stars--top) {
    --star-from: 100px 100px;
  }

  & :is(.project-mv__stars--bottom, .project-rail-logo__stars--bottom) {
    --star-from: -100px -100px;
  }

  & :is(.project-campaign__star--01, .project-campaign__star--02, .project-campaign__star--03) {
    --star-from: 100px 0;
  }

  & :is(.project-campaign__star--04, .project-campaign__star--05, .project-campaign__star--06) {
    --star-from: -100px 0;
  }

  & .ani-tilt {
    rotate: 0deg;
    transition: rotate .1s ease-out 1s;

    &.is-active {
      rotate: -2deg;
    }
  }

  & .ani-underline .section-date__underline path,
  & .section-date--more .section-date__underline path,
  & .section-date--start .section-date__underline path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .8s ease-out .3s;
  }

  & .ani-underline.is-active .section-date__underline path,
  & .project-calendar__card.is-open .section-date__underline path {
    stroke-dashoffset: 0;
  }

  & .project-calendar__card.is-open .section-date__underline path {
    transition-delay: .4s;
  }

  & .ani-walk {
    translate: 0 0;
    transition: translate 10s ease .75s;

    &.is-active {
      translate: calc(239 * var(--rem)) 0;
    }
  }

  & .ani-slidein {
    opacity: 0;
    translate: calc(23 * var(--rem)) 0;
    transition: opacity 1s, translate 1s;

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

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

@keyframes star-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .2;
  }
}

@keyframes star-twinkle {
  0%,
  100% {
    transform: scale(1) rotate(10deg);
  }

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

@keyframes char-bound {
  0%,
  12%,
  25%,
  100% {
    translate: 0 0;
  }

  20% {
    translate: 0 -6px;
  }
}

@keyframes character-hop {
  0%,
  20%,
  40%,
  100% {
    transform: translateY(0);
  }

  10%,
  30% {
    transform: translateY(calc(-5 * var(--rem)));
  }
}

@keyframes character-sway {
  0%,
  20%,
  40%,
  100% {
    transform: rotate(0deg);
  }

  10%,
  30% {
    transform: rotate(-2deg);
  }
}

@keyframes character-shake {
  0%,
  100% {
    rotate: -1deg;
  }

  50% {
    rotate: 1deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents {
    & .component-band::before,
    & .component-band__koala,
    & .project-calendar__circle,
    & .project-calendar__bird,
    & .project-present__dolphin,
    & .project-present__star--blink,
    & .project-diagnosis__squirrel,
    & .project-campaign__dog,
    & .ani-logo.is-active :is(.project-mv__star, .project-rail-logo__star) > path,
    & .ani-logo.is-active :is(.project-mv__char, .project-rail-logo__char),
    & .ani-stars.is-active .project-campaign__star > path {
      animation: none;
    }
  }

  html.js .lp_contents {
    & :is(.ani-fadeup, .ani-zoom, .ani-logo, .ani-slidein),
    & :is(.ani-logo, .ani-stars) :is(.project-mv__star, .project-rail-logo__star, .project-campaign__star) {
      opacity: 1;
      translate: none;
      rotate: none;
      scale: none;
      transition: none;
    }

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

    & .ani-walk,
    & .ani-walk.is-active {
      translate: none;
      transition: none;
    }

    & :is(.ani-underline, .section-date--more, .section-date--start) .section-date__underline path,
    & .project-calendar__card.is-open .section-date__underline path {
      stroke-dashoffset: 0;
      transition: none;
    }
  }
}