@charset "UTF-8";

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,p,ol,ul{margin:0;padding:0}
html{font-size:16px}
body{min-width:320px;color:#e0e9d5;background:#07110f;font-family:"Noto Sans JP",sans-serif;font-weight:400;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ol,ul{list-style-position:inside}
button{padding:0;border:0;font:inherit}

#wrapper{position:relative;isolation:isolate;min-height:100vh;overflow:hidden}
#wrapper::before{content: "";position:fixed;z-index:-1;inset:0;background:url("../images/bg_sp.jpg") center top / cover no-repeat;}

.kv{position:relative;min-height:clamp(300px,107vw,800px);color:#fff}
.kv__inner{position:absolute;top:56%;left:50%;width:calc(100% - 40px);display:grid;grid-template-columns:max-content;justify-content:center;text-align:center;transform:translate(-50%,-50%);}
.kv__logo{width:185px;margin:0 auto 30px}
.kv__sub{margin-bottom:15px;font-size:clamp(20px,4vw,30px);letter-spacing:.1em;justify-self: start;text-align: left;margin-left: 1.7em;}
.kv__title{font-size: clamp(60px, 7vw, 99px);font-weight:500;line-height:1.2;letter-spacing:.04em}
.kv__date{margin-top:15px;font-size:clamp(17px, 2.2vw, 30px);letter-spacing:.2em}
.kv__logo,.kv__title,.kv__date {justify-self: center;}
.kv__sub,.kv__title,.kv__date {text-shadow: 0 3px 3px rgba(16, 16, 16, 0.4);}
.main{width:calc(100% - 36px);max-width:1100px;margin:0 auto;padding:66px 0 70px}

.content-box{position:relative;z-index:0;padding:18px;border:none;background:rgba(17,17,17,.8);box-shadow:none;}
.content-box::before{content:"";position:absolute;z-index:-1;inset:-8px;border:7px solid rgba(255,255,255,.35);outline:1px solid #c2c2c2;box-shadow: inset 0 0 10px rgba(255, 255, 255, .3), 0 0 2px rgba(255, 255, 255, .3);pointer-events:none;}
.content-box+.content-box{margin-top:70px}
.product__image img{width:100%;aspect-ratio:1/1;object-fit:cover}
.product__details{margin-top:20px}
.product__title{font-size:20px;font-weight:500;line-height:1.5;letter-spacing:.04em}
.product__meta{margin-top:5px;font-size:14px;line-height:1.75;letter-spacing:.025em}
.button{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:45px;margin-top:14px;padding:8px 38px;color:#111;background:#e0e9d5;font-size:13px;font-weight:500;line-height:1.4;text-align:center;transition:opacity .25s ease;opacity: 0.8;}
.button img{position:absolute;top:50%;right:13px;width:13px;transform:translateY(-50%)}
.button:hover{opacity:.75}
.track-list{margin-top:30px}
.track-list h3{margin-bottom:12px;font-size:22px;font-weight:500;line-height:1.35;letter-spacing:.06em}
.disc-label{display:inline-block;padding:3px 12px;border: 1px solid #e0e9d5;font-size:15px;letter-spacing:0.02rem;margin-bottom: 4px;}
.disc-label--bluray{margin-top:22px}
.movie-title{margin:7px 0 10px;font-size:14px;line-height:1.55;letter-spacing: .04em;}
.track-list ol,.track-list ul{list-style:none;counter-reset:track}
.track-list li{position:relative;min-height:31px;padding:12px 4px 12px 27px;border-top: 1px solid rgba(224, 233, 213, .5);font-size:14px;line-height:1.35;letter-spacing:.04em}
.track-list li:last-child {border-bottom: 1px solid rgba(224, 233, 213, 0.5);}
.track-list ol li{counter-increment:track;}
.track-list ol li::before{position:absolute;left:0;content:counter(track) "."}
.track-list ul li::before{position:absolute;left:4px;content:"・"}
.cd {margin-bottom: 14px;}

.benefits-title{margin-bottom:24px;font-size:22px;font-weight:500;line-height:1.35;letter-spacing:.06em;text-align:center;}
.benefits-title::after{display:none;}
.benefits-list{display:grid;grid-template-columns:1fr;gap:0;list-style:none;}
.benefits-list li{display:flex;flex-direction:column;gap:5px;padding:16px 0;border-bottom:1px solid rgba(224,233,213,.35);font-size:14px;line-height:1.75;letter-spacing:.025em;}
.benefits-list li:first-child{border-top:1px solid rgba(224,233,213,.35);}
.benefits-store::before{content:"・";margin-right:.5em;color:#e0e9d5;font-size:.7em;vertical-align:.1em;}
.benefits-store{font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.04em;}
.benefits-notes{margin-top:30px;}
.benefits-notes p{padding-left:1em;font-size:11px;line-height:1.75;text-indent:-1em;}
.benefits-notes p+p{margin-top:6px;}

.tieup-box{padding-top:22px}
.tieup-title{font-family:"Helvetica LT Pro","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:28px;font-weight:700;line-height:1.2;letter-spacing:.075em;text-align:center}
.tieup-title::after{display:block;width:32px;height:1px;margin:10px auto 13px;background:rgba(224,233,213,.65);content:""}
.tieup-copy{font-size:11px;line-height:1.7;text-align:center}
.tieup-visual{width:100%;margin-top:14px}
.movie{position: relative;width:100%;aspect-ratio:16/9;margin-top:20px;background:#5b5b5b;}
.movie iframe {position: absolute;inset: 0;display: block;width: 100%;height: 100%;border: 0;}
.tieup-button{margin-top:20px;font-size:12px}
.copy{font-size:11px;line-height:1.5;text-align: center;margin: 40px auto 0;display: block;}
.footer{padding:0 20px 27px;text-align:center}
.footer small{font-size:11px;line-height:1.5}

@media screen and (min-width:768px){
  #wrapper::before{background-image:url("../images/bg_pc.jpg")}
  .kv{min-height:clamp(560px,54.6vw,786px)}
  .kv__logo{width:260px;margin-bottom:55px}
  .kv__sub{margin-bottom:30px;font-size:30px}
  .kv__date{margin-top:30px;font-size:25px}
  .kv__inner{top:47%;}
  .main{padding:0 0 96px}

  .content-box{padding:70px;}
  .content-box::before{inset:-20px;border-width:20px;outline:1px solid #c2c2c2;box-shadow:inset 0 0 16px rgba(255,255,255,.3),0 0 4px rgba(255,255,255,.3);}
  .content-box+.content-box{margin-top:100px}
  .product{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:95px;align-items:center}
  .product__details{margin-top:0}
  .product__details .button {max-width: 430px;}
  .product__title{font-size:32px}
  .product__meta{margin-top:12px;font-size:18px;line-height:1.8}
  .button{min-height:70px;margin-top:28px;font-size:17px}
  .button img{right:18px;width:15px}
  .track-list{margin-top:52px}
  .track-list h3{margin-bottom:12px;font-size:36px}
  .disc-label{padding: 3px 16px 5px 16px;font-size:22px;letter-spacing: 0.05em;}
  .disc-label--bluray{margin-top:43px}
  .cd {margin-bottom: 18px;}

  .benefits-title{margin-bottom:36px;font-size:36px;}
  .benefits-list li{padding:20px 0;font-size:18px;}
  .benefits-store{font-size:18px;}
  .benefits-notes{margin-top:42px;}
  .benefits-notes p{font-size:13px;}

  .movie-title{margin:12px 0 16px;font-size:18px}
  .track-list li{min-height:42px;padding:16px 5px 16px 34px;font-size:18px}
  .track-list ul li::before{left:5px}
  .tieup-box{padding:62px 125px 58px}
  .tieup-title{font-size:48px}
  .tieup-title::after{width:52px;margin:18px auto 18px}
  .tieup-copy{font-size:18px;line-height:1.65}
  .tieup-visual{width:620px;margin:38px auto 0}
  .movie{max-width:890px;margin:57px auto 0}
  .tieup-button{width:600px;min-height:70px;margin:55px auto 0;font-size:17px}
  .footer{padding-bottom:36px}
  .footer small{font-size:12px}
  .copy {margin: 55px auto 0;font-size: 12px;}
}

@media screen and (min-width:768px) and (max-width:1040px){
  .main{width:calc(100% - 80px)}
  .content-box{padding-right:48px;padding-left:48px}
  .product{grid-template-columns:minmax(260px,40%) minmax(0,1fr);gap:55px}
  .tieup-box{padding-right:70px;padding-left:70px}
}

/* ========================================
   animation
======================================== */
#wrapper::before {
  transform: scale(1);
  transform-origin: center center;
  animation: bgBreath 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes bgBreath {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.03);
  }
}

/* ---------- KV ---------- */

.kv {
  overflow: hidden;
}

.kv__inner {
  z-index: 2;
}

.kv::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(
    circle,
    rgba(224, 233, 213, 0.35) 0%,
    rgba(224, 233, 213, 0.12) 30%,
    transparent 68%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.3);
}

.kv.is-loaded::after {
  animation: kvLight 1.8s ease-out 0.35s forwards;
}

.js .kv__logo {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.js .kv__sub {
  opacity: 0;
  transform: translateX(-25px);
}

.js .kv__title {
  opacity: 0;
  letter-spacing: 0.18em;
  filter: blur(10px);
  transform: scale(1.12);
}

.js .kv__date {
  opacity: 0;
  transform: translateY(18px);
}

.kv.is-loaded .kv__logo {
  animation: logoReveal 1.1s ease 0.1s forwards;
}

.kv.is-loaded .kv__sub {
  animation: subReveal 0.8s ease 0.45s forwards;
}

.kv.is-loaded .kv__title {
  animation: titleImpact 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

.kv.is-loaded .kv__date {
  animation: dateReveal 0.8s ease 1.15s forwards;
}

/* ---------- keyframes ---------- */

@keyframes logoReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

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

@keyframes subReveal {
  0% {
    opacity: 0;
    transform: translateX(-25px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes titleImpact {
  0% {
    opacity: 0;
    letter-spacing: 0.18em;
    filter: blur(10px);
    transform: scale(1.12);
    text-shadow:
      0 0 0 rgba(224, 233, 213, 0),
      0 3px 3px rgba(16, 16, 16, 0.4);
  }

  55% {
    opacity: 1;
    filter: blur(0);
    text-shadow:
      0 0 28px rgba(224, 233, 213, 0.85),
      0 3px 3px rgba(16, 16, 16, 0.4);
  }

  100% {
    opacity: 1;
    letter-spacing: 0.04em;
    filter: blur(0);
    transform: scale(1);
    text-shadow:
      0 0 8px rgba(224, 233, 213, 0.25),
      0 3px 3px rgba(16, 16, 16, 0.4);
  }
}

@keyframes dateReveal {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kvLight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* ---------- コンテンツ ---------- */

.js .content-box {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

.js .content-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .content-box.is-visible::before {
  animation: frameGlow 1.2s ease 0.2s both;
}

@keyframes frameGlow {
  0% {
    opacity: 0;
    filter: brightness(1);
  }

  45% {
    opacity: 1;
    filter: brightness(1.5);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

/* ---------- ボタン ---------- */

.button {
  position: relative;
  overflow: hidden;
}

.button::before {
  position: absolute;
  top: -60%;
  left: -40%;
  width: 20%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.75),
    transparent
  );
  content: "";
  pointer-events: none;
  transform: rotate(25deg);
  transition: left 0.65s ease;
}

.button:hover::before {
  left: 125%;
}

.button span,
.button img {
  position: relative;
  z-index: 1;
}

.button img {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 13px;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.button:hover img {
  transform: translate(6px, -50%);
}


/* 動きを減らす設定を使用している端末への対応 */
@media (prefers-reduced-motion: reduce) {
  #wrapper::before {
    animation: none;
    transform: none;
  }

  .js .kv__logo,
  .js .kv__sub,
  .js .kv__title,
  .js .kv__date,
  .js .content-box {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }

  .button::before {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .button img {
    right: 18px;
    width: 14px;
  }
}