@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: #603115;
  --color-red: #902429;
  --color-red-pc: #812025;
  --color-red-text: #802740;
  --color-brown: #603115;
  --color-bg: #fffcf0;
  --color-green: #17381d;
  --color-tea: #b17477;
  --shadow-inner: inset 0 0 calc(100 * var(--rem)) rgb(143 71 0 / .15);

  --lp-font-ja: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --lp-font-en: "EB Garamond", "Zen Old Mincho", "Hiragino Mincho ProN", serif;

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

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

}

.lp_contents {
  position: relative;
  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;
  }

  & img {
    pointer-events: none;
  }

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

    &:hover,
    &:hover img {
      opacity: 1 !important;
    }
  }

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

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

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

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

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

.lp_contents {
  background: var(--color-red) url(../img/bg-pattern-sp.svg) 0 calc(-36 * var(--rem)) / calc(390 * var(--rem)) auto repeat-y;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  animation: kr-fade-in .8s ease-out both;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }

  @media (min-width: 769px) {
    background: var(--color-red-pc);
  }

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

.lp_contents {
  & .project-mv {
    position: relative;
    display: grid;
    place-items: center;
    min-height: max(calc(658 * var(--rem)), calc(100svh - var(--lp-top, 0px)));
    background: var(--color-bg);
    border: calc(10 * var(--rem)) solid var(--color-red);
  }

  & .project-mv__stage {
    position: relative;
    width: calc(349 * var(--rem));
    height: calc(601 * var(--rem));
    translate: calc(2 * var(--rem)) 0;
  }

  & :where(.project-mv__illust, .project-mv__title > span) {
    position: absolute;
    top: calc(var(--y) * var(--rem));
    left: calc(var(--x) * var(--rem));
    width: calc(var(--w) * var(--rem));
  }

  & .project-mv__line {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  & .project-mv__hop {
    position: absolute;
    inset: 0;
  }

  & .project-mv__ruler {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: calc(100svh - var(--lp-top, 0px));
    visibility: hidden;
    pointer-events: none;
  }

  & .project-mv.is-overflow .project-mv__scroll {
    display: none;
  }

  & .project-mv__scroll {
    position: absolute;
    bottom: calc(6 * var(--rem));
    left: calc(-1 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * var(--rem));
    width: calc(17 * var(--rem));
    color: var(--color-red-text);

    &::after {
      width: 1px;
      height: calc(22 * var(--rem));
      background: currentColor;
      animation: kr-scroll-line 2s ease-in-out infinite;
      content: "";
    }
  }

  & .project-mv__scroll-text {
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(11 * var(--rem));
    line-height: calc(17 / 11);
    white-space: nowrap;
    writing-mode: vertical-rl;
  }
}

html.js .lp_contents {
  & :where(.project-mv__illust, .project-mv__title > span) {
    opacity: 0;
    transition: opacity .9s var(--transition-timing);
  }

  & .project-mv.is-active :where(.project-mv__illust, .project-mv__title > span) {
    opacity: 1;
  }

  & .project-mv__illust--g1 {
    transition-delay: .2s;
  }

  & .project-mv__illust--g2 {
    transition-delay: .65s;
  }

  & .project-mv__illust--g3 {
    transition-delay: 1.1s;
  }

  & .project-mv__title > span {
    transition-duration: 1.2s;
    transition-delay: 1.7s;
  }

  & .project-mv__title > :is(.project-mv__name, .project-mv__sign, .project-mv__logo) {
    transition-delay: 2s;
  }

  & .project-mv.is-active .project-mv__hop {
    --hop: -2;
    animation: kr-bound 6s .5s ease infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

.lp_contents {
  & .project-intro {
    display: grid;
    justify-items: center;
    padding: calc(35 * var(--rem)) 0 calc(51 * var(--rem));
    background: var(--color-bg);
    box-shadow: var(--shadow-inner);
    color: var(--color-red-text);
    text-align: center;
  }

  & .project-intro__lead {
    display: grid;
    justify-items: center;
    width: calc(287 * var(--rem));
  }

  & .project-intro__title {
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(25 * var(--rem));
    line-height: 1;
    white-space: nowrap;
  }

  & .project-intro__text {
    margin-top: calc(15 * var(--rem));
    font-weight: 700;
    font-size: calc(13 * var(--rem));
    line-height: 2;
    white-space: nowrap;

    & p {
      line-height: 2;
    }
  }

  & .project-intro__more-inner {
    display: grid;
    gap: calc(10 * var(--rem));
    padding-top: calc(10 * var(--rem));
  }

  & .project-intro__button {
    position: relative;
    margin-top: calc(10 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
  }

  & .project-intro__button::after {
    position: absolute;
    inset: calc(-15 * var(--rem)) calc(-20 * var(--rem));
    content: "";
  }

  & .project-intro__button-label {
    letter-spacing: .05em;
  }

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

  & .project-intro.is-open {
    & .project-intro__button-label--open {
      display: none;
    }

    & .project-intro__button-label--close {
      display: inline;
    }
  }

  & .project-intro__schedule {
    display: grid;
    justify-items: center;
    margin-top: calc(15 * var(--rem));
  }

  & .project-intro__ornaments {
    display: flex;
    align-items: flex-start;
    gap: calc(16 * var(--rem));
    height: calc(56 * var(--rem));
  }

  & .project-intro__ornament--sheep {
    transform-origin: 56.7% 0;
    width: calc(40 * var(--rem));
  }

  & .project-intro__ornament--ball {
    transform-origin: 53.6% 0;
    width: calc(16 * var(--rem));
    margin-top: calc(16 * var(--rem));
  }

  & .project-intro__dates {
    display: grid;
    gap: calc(28 * var(--rem));
    margin-top: calc(27 * var(--rem));
    translate: calc(3 * var(--rem)) 0;
  }

  & .project-intro__date {
    position: relative;
    display: grid;
    width: calc(300 * var(--rem));

    &::before,
    &::after {
      position: absolute;
      inset: 0;
      border-radius: calc(5 * var(--rem));
      content: "";
    }

    &::before {
      translate: calc(3 * var(--rem)) calc(3 * var(--rem));
      background: rgb(255 255 255 / .7);
      box-shadow: calc(3 * var(--rem)) calc(3 * var(--rem)) calc(9 * var(--rem)) rgb(239 218 193 / .3);
    }

    &::after {
      border: calc(1 * var(--rem)) solid var(--color-red);
    }
  }

  & .project-intro__date--regular::before {
    box-shadow: 0 calc(4 * var(--rem)) calc(4 * var(--rem)) rgb(239 218 193 / .3);
  }

  & .project-intro__date-label {
    position: absolute;
    top: calc(-12 * var(--rem));
    left: 50%;
    z-index: var(--z-base);
    width: calc(var(--cut) * var(--rem));
    translate: -50% 0;
    background: linear-gradient(var(--color-bg), var(--color-bg)) 0 calc(11 * var(--rem)) / 100% calc(4 * var(--rem)) no-repeat;
    font-weight: 700;
    font-size: calc(14 * var(--rem));
    line-height: 1;
    text-align: center;
    white-space: nowrap;

    & span {
      font-family: var(--lp-font-en);
      letter-spacing: .05em;
    }

    & sup {
      font-size: calc(9 * var(--rem));
      letter-spacing: .05em;
    }
  }

  & .project-intro__date--pre .project-intro__date-label {
    --cut: 180;
  }

  & .project-intro__date--regular .project-intro__date-label {
    --cut: 90;
  }

  & .project-intro__date-body {
    position: relative;
    z-index: var(--z-base);
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    letter-spacing: calc(1 * var(--rem));
    white-space: nowrap;
  }

  & .project-intro__date--pre .project-intro__date-body {
    display: grid;
    align-content: start;
    height: calc(72 * var(--rem));
    padding: calc(20 * var(--rem)) calc(35 * var(--rem)) 0 calc(36 * var(--rem));
    text-align: left;
  }

  & .project-intro__date--regular .project-intro__date-body {
    height: calc(42 * var(--rem));
    padding: calc(20 * var(--rem)) 0 0 calc(1 * var(--rem));
    text-align: center;
  }

  & :where(.project-intro__date-from, .project-intro__date-text) {
    letter-spacing: calc(1 * var(--rem));
    text-box: trim-both cap alphabetic;
  }

  & .project-intro__date-text {
    display: block;
  }

  & .project-intro__date-to {
    margin-top: calc(19 * var(--rem));
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: calc(10 * var(--rem));

    &::before {
      width: calc(31 * var(--rem));
      height: calc(1 * var(--rem));
      background: var(--color-red-text);
      content: "";
    }
  }

  & .project-intro__date-day {
    font-size: calc(20 * var(--rem));
    letter-spacing: calc(1 * var(--rem));
  }

  & .project-intro__note {
    margin-top: calc(11 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: 1.3;
    white-space: nowrap;
    translate: calc(-2 * var(--rem)) 0;
  }
}

.lp_contents {
  & .project-items {
    position: relative;
    display: grid;
    justify-items: center;
    gap: calc(50 * var(--rem));
    padding-block: calc(50 * var(--rem));
  }

  & .project-item {
    position: relative;
    width: calc(370 * var(--rem));

    @media (min-width: 769px) {
      width: 100%;
    }
  }

  & .project-item__frame {
    position: relative;
    padding: calc(5 * var(--rem));
    background: var(--color-bg);
    box-shadow: var(--shadow-inner);

    &::before {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: url(../img/item-texture.png) center / 100% auto no-repeat;
      opacity: .7;
      content: "";
    }
  }

  & .project-item__inner {
    position: relative;
    z-index: var(--z-base);
    padding: calc(2 * var(--rem));
    border: calc(2 * var(--rem)) solid var(--color-red-text);
  }

  & .project-item__box {
    display: grid;
    justify-items: center;
    gap: calc(8 * var(--rem));
    padding: calc(16 * var(--rem)) calc(16 * var(--rem)) calc(36 * var(--rem));
    border: calc(1 * var(--rem)) solid var(--color-red-text);
  }

  & .project-item__brand {
    width: calc(318 * var(--rem));

    @media (min-width: 769px) {
      width: calc(345 * var(--rem));
      margin-inline: calc(-3.5 * var(--rem));
    }

    & img {
      width: auto;
      height: 100%;
    }
  }

  & .project-item__brand--right {
    display: flex;
    justify-content: flex-end;
  }

  & .project-item__brand--left {
    display: flex;
    justify-content: flex-start;
  }

  & .project-item__brand--ballchain {
    height: calc(49 * var(--rem));
  }

  & .project-item__brand--ets {
    height: calc(48 * var(--rem));
  }

  & .project-item__brand--text {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-item__brand--honey {
    height: calc(44 * var(--rem));
  }

  & .project-item__brand-honey {
    display: grid;
    justify-items: center;
    gap: calc(8 * var(--rem));
    width: calc(80 * var(--rem));

    & img {
      height: auto;
    }
  }

  & .project-item__brand-mark {
    width: calc(28 * var(--rem));
  }

  & .project-item__brand-text {
    width: calc(80 * var(--rem));
  }

  & .project-item__body {
    display: grid;
    justify-items: center;
    gap: calc(25 * var(--rem));
  }

  & .project-item__photo {
    position: relative;
  }

  & .project-item__photo--arch {
    width: calc(300 * var(--rem));
    height: calc(360 * var(--rem));

    & > img {
      height: 100%;
      object-fit: cover;
      object-position: bottom;
      border-radius: calc(150 * var(--rem)) calc(150 * var(--rem)) 0 0;
    }
  }

  & .project-item__photo--pieces {
    width: calc(var(--bw) * var(--rem));
    height: calc(var(--bh) * var(--rem));
  }

  & .project-item__photo--mini {
    margin-inline: calc(-10 * var(--rem));
  }

  & .project-item__photo-link {
    display: block;
  }

  & :where(.project-item__piece, .project-item__clip) {
    position: absolute;
    top: calc(var(--y) * var(--rem));
    left: calc(var(--x) * var(--rem));
    width: calc(var(--w) * var(--rem));
    height: calc(var(--h) * var(--rem));
  }

  & .project-item__piece {
    rotate: var(--r, 0deg);
  }

  & .project-item__clip {
    overflow: hidden;
  }

  & .project-item__piece--shadow {
    filter: drop-shadow(calc(4 * var(--rem)) calc(4 * var(--rem)) calc(5 * var(--rem)) rgb(0 0 0 / .1));
  }

  & .project-item__piece--shadow-box {
    filter: drop-shadow(calc(4 * var(--rem)) calc(4 * var(--rem)) calc(5 * var(--rem)) rgb(0 0 0 / .2));
  }

  & .project-item__piece--shadow-left {
    filter: drop-shadow(calc(-3 * var(--rem)) 0 calc(3 * var(--rem)) rgb(0 0 0 / .1));
  }

  & .project-item__piece--shadow-right {
    filter: drop-shadow(calc(3 * var(--rem)) 0 calc(3 * var(--rem)) rgb(0 0 0 / .1));
  }

  & .project-item__piece--shadow-soft {
    filter: drop-shadow(calc(3 * var(--rem)) calc(3 * var(--rem)) calc(5 * var(--rem)) rgb(0 0 0 / .1));
  }

  & .project-item__release {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(300 * var(--rem));
    padding-block: calc(5 * var(--rem));
    background: var(--color-tea);
    color: var(--color-bg);
    font-weight: 700;
    font-size: calc(14 * var(--rem));
    line-height: 1.3;
    letter-spacing: .1em;
    text-align: center;
    text-box: trim-both cap alphabetic;

    & span {
      font-family: var(--lp-font-en);
      letter-spacing: .1em;
    }
  }

  & .project-item__release-day {
    font-size: calc(18 * var(--rem));
  }

  & .project-item__info {
    display: grid;
    justify-items: center;
    color: var(--color-brown);
    text-align: center;
  }

  & .project-item__head {
    display: grid;
    justify-items: center;
  }

  & .project-item__credit {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    white-space: nowrap;
  }

  & .project-item__name {
    margin-top: calc(6 * var(--rem));
    font-weight: 700;
    font-size: calc(22 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-item__name-sub {
    display: block;
    font-size: calc(15 * var(--rem));
    letter-spacing: calc(1 * var(--rem));
  }

  & .project-item__price {
    margin-top: calc(10 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 600;
    font-size: calc(20 * var(--rem));
    line-height: 1.3;
    letter-spacing: calc(1 * var(--rem));
    white-space: nowrap;
    text-box: trim-both cap alphabetic;

    & span {
      font-family: var(--lp-font-ja);
      letter-spacing: calc(1 * var(--rem));
    }
  }

  & .project-item__price-pre,
  & .project-item__price-note {
    font-weight: 600;
    font-size: calc(14 * var(--rem));
  }

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

  & .project-item__variants {
    display: inline-grid;
    gap: calc(12 * var(--rem));
    min-width: calc(200 * var(--rem));
    max-width: calc(310 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .project-item__variant {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--rem));
  }

  & .project-item__variant--single {
    justify-content: center;
  }

  & .project-item__variant-label {
    font-weight: 700;
    font-size: calc(13 * var(--rem));
    line-height: 1.3;
    letter-spacing: 0;
    text-align: right;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  & .project-item__variants--small .project-item__variant-label {
    font-size: calc(10 * var(--rem));
  }

  & .project-item__variant-line {
    flex: 1 0 calc(15 * var(--rem));
    border-top: 1px dotted var(--color-brown);
  }

  & .project-item__detail {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: calc(80 * var(--rem));
    height: calc(28 * var(--rem));
    padding-right: calc(12 * var(--rem));
    background: var(--color-red);
    border-radius: calc(100 * var(--rem));
    color: #fff;
    font-family: var(--lp-font-en);
    font-weight: 600;
    font-size: calc(16 * var(--rem));
    line-height: 1;

    &::after {
      position: absolute;
      top: calc(12 * var(--rem));
      left: calc(60 * var(--rem));
      width: calc(5 * var(--rem));
      height: calc(5 * var(--rem));
      rotate: -45deg;
      background: url(../img/icon-arrow-detail.svg) 0 0 / 100% no-repeat;
      content: "";
    }
  }

  & .project-item__detail > span {
    letter-spacing: .05em;
  }

  & .project-item__desc {
    margin-top: calc(25 * var(--rem));
    font-weight: 600;
    font-size: calc(13 * var(--rem));
    line-height: 1.75;
    white-space: nowrap;
  }

  & .project-item__illust {
    position: absolute;
    top: calc(var(--y) * var(--rem));
    z-index: var(--z-base);
    width: calc(var(--w) * var(--rem));
    pointer-events: none;
  }

  & .project-item__illust--left {
    left: calc(var(--x) * var(--rem));
  }

  & .project-item__illust--right {
    right: calc(var(--rx) * var(--rem));
  }
}

html.js .lp_contents {
  & .project-item.is-active .project-item__illust img {
    animation: kr-bound 6s 1.5s ease infinite;
  }

  & .project-item--pouch.is-active .project-item__illust img {
    transform-origin: 58% 96%;
    animation: kr-sway 5s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  & .project-item--handcream.is-active .project-item__illust img {
    transform-origin: 48% 97%;
    animation: kr-sway 5s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  & .project-item.is-active .project-item__illust--still img {
    animation: none;
  }

  & .project-item.is-active .project-item__illust--tilt-right img {
    --tilt: 5deg;
    transform-origin: 49% 93%;
    animation: kr-tilt 4.2s 1.5s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  & .project-item.is-active .project-item__illust--tilt img {
    --tilt: -5deg;
    transform-origin: 50% 74%;
    animation: kr-tilt 4.2s 1.5s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  & .project-item--tea.is-active .project-item__illust img {
    transform-origin: 50% 97%;
    animation: kr-sway 3s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

@keyframes kr-scroll-line {
  0% {
    clip-path: inset(0 0 100% 0);
  }

  50% {
    clip-path: inset(0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes kr-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes kr-tilt {
  0%, 48%, 100% {
    rotate: 0deg;
  }

  24% {
    rotate: var(--tilt, -8deg);
  }
}

@keyframes kr-sway {
  0%, 100% {
    rotate: -1.5deg;
  }

  50% {
    rotate: 3deg;
  }
}

@keyframes kr-bound {
  0%, 50%, 56%, 62%, 100% {
    translate: 0 0;
  }

  53%, 59% {
    translate: 0 calc(var(--hop, -3) * var(--rem));
  }
}

.lp_contents {
  & .project-paws {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: var(--z-base);
    width: calc(390 * var(--rem));
    height: 100%;
    translate: -50% 0;
    pointer-events: none;
  }

  & .project-closing {
    position: relative;
  }

  & .project-paws__item {
    position: absolute;
    top: calc(var(--y) * var(--rem));
    left: calc(var(--x) * var(--rem));
    width: calc(var(--w) * var(--rem));
    height: calc(var(--h) * var(--rem));
  }

  & .project-paws__print {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(var(--clip));
  }
}

.lp_contents {
  & .project-item__photo--hanky-red {
    margin-top: calc(70 * var(--rem));
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .lp_contents {
    & .project-paws__print {
      opacity: 0;
    }

    & .project-paws__item.is-active .project-paws__print {
      animation: kr-paw-stamp .22s calc(.3s + var(--i) * .22s) ease-out both;
    }
  }
}

@keyframes kr-paw-stamp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lp_contents {
  & .project-cuts {
    position: relative;
    z-index: var(--z-base);
    height: calc(621 * var(--rem));
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  & .project-cuts.is-dragging {
    cursor: grabbing;
  }

  & .project-cuts__track {
    display: flex;
    gap: calc(30 * var(--rem));
    width: max-content;
    padding-left: calc(10 * var(--rem));
  }

  & .project-cuts__set {
    position: relative;
    flex: none;
    width: calc(1055 * var(--rem));
    height: calc(621 * var(--rem));
  }

  & :where(.project-cuts__photo, .project-cuts__deco) {
    position: absolute;
    top: calc(var(--y) * var(--rem));
    left: calc(var(--x) * var(--rem));
    width: calc(var(--w) * var(--rem));
  }

  & .project-cuts__photo {
    height: calc(var(--h) * var(--rem));
    overflow: hidden;
    border: 1px solid var(--color-bg);
    border-radius: calc(5 * var(--rem));

    & img {
      height: 100%;
      object-fit: cover;
      -webkit-user-drag: none;
    }
  }

  & .project-cuts__link {
    display: block;
    height: 100%;

    &:focus-visible {
      outline-offset: calc(-3 * var(--rem));
    }
  }
}

html:not(.js) .lp_contents .project-cuts {
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .project-mv__scroll::after {
    animation: none;
  }

  html.js .lp_contents {
    & :where(.project-mv__illust, .project-mv__title > span) {
      opacity: 1;
      translate: 0 0;
      transition: none;
    }

    & .project-item.is-active .project-item__illust img {
      animation: none;
    }
  }
}

html:not(.js) .lp_contents .project-intro__more {
  max-height: none;
}

.lp_contents {
  & .project-allitems {
    display: grid;
    justify-items: center;
    padding-block: calc(50 * var(--rem));
  }

  & .project-allitems__link {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    width: calc(300 * var(--rem));
    height: calc(64 * var(--rem));
    padding-top: calc(17 * var(--rem));
    background: var(--color-bg);
    border-radius: calc(100 * var(--rem));
    color: var(--color-red-text);

    &::before {
      position: absolute;
      inset: calc(2 * var(--rem));
      border: 1px solid var(--color-red);
      border-radius: calc(100 * var(--rem));
      content: "";
    }

    &::after {
      position: absolute;
      top: calc(29 * var(--rem));
      left: calc(281 * var(--rem));
      width: calc(6 * var(--rem));
      height: calc(6 * var(--rem));
      transform: rotate(-35.71deg) scaleY(.95) skewX(18.58deg);
      background: url(../img/icon-arrow-allitems.svg) 0 0 / 100% no-repeat;
      content: "";
    }
  }

  & .project-allitems__en {
    font-family: var(--lp-font-en);
    font-weight: 600;
    font-size: calc(24 * var(--rem));
    line-height: 1;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  & .project-allitems__ja {
    margin-top: calc(8 * var(--rem));
    font-weight: 600;
    font-size: calc(11 * var(--rem));
    line-height: 1;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  & .project-allitems__cat {
    position: absolute;
    top: calc(32 * var(--rem));
    left: 0;
    transform-origin: 50% 72%;
    width: calc(51 * var(--rem));
    animation: kr-tilt 4.2s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  & .project-profile {
    display: grid;
    justify-items: center;
    gap: calc(60 * var(--rem));
    padding-bottom: calc(60 * var(--rem));
    background: linear-gradient(to bottom, rgb(144 36 41 / 0), var(--color-red) 70%, var(--color-red));

    @media (min-width: 769px) {
      background: none;
    }
  }

  & .project-profile__card {
    display: flow-root;
    width: calc(370 * var(--rem));
    padding: calc(41 * var(--rem)) calc(25 * var(--rem)) calc(40 * var(--rem));
    background: var(--color-bg);
    box-shadow: var(--shadow-inner);
    color: var(--color-brown);
  }

  & .project-profile__photo {
    float: left;
    width: calc(100 * var(--rem));
    margin: 0 calc(15 * var(--rem)) calc(9 * var(--rem)) 0;
    border-radius: calc(10 * var(--rem));
  }

  & .project-profile__name {
    margin-top: calc(14 * var(--rem));
    font-size: 0;
    line-height: 0;

    & img {
      display: inline-block;
      width: calc(158 * var(--rem));
    }
  }

  & .project-profile__text {
    margin-top: calc(12 * var(--rem));
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-profile__books-title {
    clear: both;
    padding-top: calc(22 * var(--rem));
    padding-bottom: calc(10 * var(--rem));
    border-bottom: 1px solid rgb(96 49 21 / .5);
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: 1;
    white-space: nowrap;
  }

  & .project-profile__books {
    display: grid;
    gap: calc(8 * var(--rem));
    margin-top: calc(12 * var(--rem));
  }

  & .project-profile__book {
    display: grid;
    grid-template-columns: calc(48 * var(--rem)) auto;
    min-height: calc(27 * var(--rem));
    white-space: nowrap;

    &.project-profile__book--wrap {
      min-height: calc(49 * var(--rem));
    }
  }

  & .project-profile__year {
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    line-height: 1.5;
  }

  & .project-profile__book-title {
    font-size: calc(12 * var(--rem));
    line-height: 1.8;
    letter-spacing: .035em;
  }

  & .project-profile__book-name {
    font-weight: 900;
    font-size: calc(14 * var(--rem));
    letter-spacing: .03em;
  }

  & .project-profile__publisher {
    letter-spacing: .035em;
  }

  & .project-profile__logo {
    display: grid;
    justify-items: start;
    width: calc(203 * var(--rem));
  }

  & .project-profile__logo-name {
    width: calc(203 * var(--rem));
  }

  & .project-profile__logo-copy {
    width: calc(160 * var(--rem));
    margin: calc(32 * var(--rem)) 0 0 calc(22 * var(--rem));
  }

  & .project-fixed-allitems {
    position: fixed;
    right: calc(4 * var(--rem));
    bottom: calc(30 * var(--rem));
    z-index: var(--z-base);
    width: calc(94 * var(--rem));
    height: calc(91 * var(--rem));

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: calc(80 * var(--rem));
      height: calc(80 * var(--rem));
      background: var(--color-green);
      border-radius: 50%;
      content: "";
    }

    @media (min-width: 769px) {
      display: none;
    }
  }

  & .project-fixed-allitems__label {
    position: absolute;
    top: calc(20 * var(--rem));
    left: calc(41 * var(--rem));
    translate: -50% 0;
    color: #fff;
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(17 * var(--rem));
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  & .project-fixed-allitems__illust {
    position: absolute;
    top: calc(60 * var(--rem));
    left: calc(20 * var(--rem));
    width: calc(74 * var(--rem));
  }
}

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

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

    @media (min-width: 769px) {
      overflow: visible;
    }
  }

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

  & .project-rail-title {
    width: calc(243 * var(--rem-pc));
  }

  & .project-rail-nav {
    display: grid;
    gap: calc(50 * var(--rem-pc));
    width: calc(318 * var(--rem-pc));
  }

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

  & .project-rail-nav__link {
    display: flex;
    align-items: center;
    gap: calc(5 * var(--rem-pc));
    color: #fff;
    font-weight: 700;
    font-size: calc(18 * var(--rem-pc));
    line-height: 1.3;
    white-space: nowrap;
  }

  & .project-rail-nav__icon {
    flex: none;
    width: calc(24 * var(--rem-pc));
    transition: opacity .7s ease-out;
  }

  & .project-rail-nav__allitems {
    position: relative;
    display: grid;
    place-items: center;
    height: calc(64 * var(--rem-pc));
    background: var(--color-bg);
    border-radius: calc(100 * var(--rem-pc));
    color: var(--color-red-text);
    font-weight: 700;
    font-size: calc(22 * var(--rem-pc));
    line-height: 1.3;
    white-space: nowrap;

    &::before {
      position: absolute;
      inset: calc(2 * var(--rem-pc));
      border: 1px solid var(--color-red-text);
      border-radius: calc(100 * var(--rem-pc));
      content: "";
    }

    &::after {
      position: absolute;
      top: calc(28 * var(--rem-pc));
      left: calc(295 * var(--rem-pc));
      width: calc(8 * var(--rem-pc));
      height: calc(8 * var(--rem-pc));
      transform: rotate(-35.71deg) scaleY(.95) skewX(18.58deg);
      background: url(../img/icon-arrow-pc-allitems.svg) 0 0 / 100% no-repeat;
      content: "";
    }
  }

  & .project-rail-nav__cat {
    position: absolute;
    top: calc(24 * var(--rem-pc));
    left: calc(-10 * var(--rem-pc));
    transform-origin: 50% 72%;
    width: calc(65 * var(--rem-pc));
    animation: kr-tilt 4.2s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

html.js .lp_contents {
  & .project-rail-nav__link:not(.is-current) .project-rail-nav__icon {
    opacity: 0;
    transition: none;
  }

  @media (any-hover: hover) {
    & .project-rail-nav__link:hover .project-rail-nav__icon {
      opacity: 1;
      transition: opacity .7s ease-out;
    }

    & .project-rail-nav__list:has(.project-rail-nav__link:hover) .project-rail-nav__link:not(:hover) .project-rail-nav__icon {
      opacity: 0;
      transition: none;
    }
  }
}

#header .header_logo {
  height: auto;
}

header .header_logo a, #header .header_sso_logo a {
  display: block;
  width: 100%;
  height: 100%;
  mask-image: url(../../../../Contents/ImagesPkg/sso/logo.svg?250227);
  mask-position: center center;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../../../../Contents/ImagesPkg/sso/logo.svg?250227);
  -webkit-mask-position: center center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  background: #902429;
}

#header .header_logo a img, .header_sso_logo img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}

@media screen and (max-width: 768px) {
#header .header_logo a {
  display: grid;
  place-items: center;
}

#header .header_logo {
  height: calc(58 * (100vw / 390));
  padding: 0 !important;
}

#header .header_inner {
  background: #FFFCF0;
}
}

.header_wrap,
#header {
  background: #FFFCF0 !important;
}

.utility_cart .num {
  background: #902429;
}