@charset "utf-8";

body {
  min-width: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(33, 88, 133, 0.32), rgba(0, 0, 0, 0) 42vw),
    #000;
}

body.is-loading,
body.is-assembling {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  z-index: 100;
}

.is-loading .page-loader {
  opacity: 1;
  visibility: visible;
}

.loader-spinner {
  width: clamp(58px, 8vw, 92px);
  height: clamp(58px, 8vw, 92px);
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #fff;
  border-right-color: #95a9ba;
  border-radius: 50%;
  animation: loader-spin 0.78s linear infinite;
  box-shadow: 0 0 34px rgba(149, 169, 186, 0.42);
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.fourth-page {
  position: relative;
  z-index: 5;
  padding: clamp(24px, 4vw, 54px) 0 clamp(60px, 8vw, 120px);
}

.msm_left,
.msm_right {
  pointer-events: none;
  opacity: 0.88;
  will-change: transform;
  transition: opacity 0.3s ease, transform 1.85s cubic-bezier(0.16, 1, 0.3, 1);
}

body:not(.arms-in) {
  --arm-left-entry: -125%;
  --arm-right-entry: 125%;
}

body.arms-in {
  --arm-left-entry: 0%;
  --arm-right-entry: 0%;
}

.msm_left {
  background-image: url(../image/msm_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: min(46vw, 760px);
  height: 1040px;
  position: fixed;
  top: -188px;
  left: -104px;
  z-index: 20;
  transform: translate3d(calc(var(--arm-left-entry, 0%) + var(--arm-left-x, 0px)), var(--arm-left-y, 0px), 0) rotate(var(--arm-left-rotate, 0deg)) scale(1.12);
  transform-origin: left top;
}

.msm_right {
  background-image: url(../image/msm_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: min(42vw, 680px);
  height: 1040px;
  position: fixed;
  top: -235px;
  right: -98px;
  z-index: 20;
  transform: translate3d(calc(var(--arm-right-entry, 0%) + var(--arm-right-x, 0px)), var(--arm-right-y, 0px), 0) rotate(var(--arm-right-rotate, 0deg)) scale(1.12);
  transform-origin: right top;
}

.fourth-hero {
  width: min(96vw, 1280px);
  margin: 0 auto;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.fourth-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 11%, rgba(0, 0, 0, 0) 89%, #000 100%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 8%);
  z-index: 2;
}

.fourth-hero-img {
  display: block;
  width: min(100%, 1180px);
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.58));
  transform: scale(1.04);
  transition: opacity 0.24s ease 0.18s, transform 0.7s cubic-bezier(0.2, 0.9, 0.1, 1) 0.18s;
}

.hero-grid {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 1180px);
  height: 100%;
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 1;
}

.hero-grid-tile {
  position: absolute;
  display: block;
  opacity: 0;
  transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-rotate)) scale(0.72);
  filter: brightness(1.32) contrast(1.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(149, 169, 186, 0.22);
  transition:
    opacity 0.22s ease var(--delay),
    transform 0.82s cubic-bezier(0.12, 1.12, 0.22, 1) var(--delay),
    filter 0.65s ease var(--delay),
    box-shadow 0.65s ease var(--delay);
}

.is-assembling .hero-grid-tile,
.hero-assembled .hero-grid-tile,
.page-ready .hero-grid-tile {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
  filter: brightness(1) contrast(1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 rgba(149, 169, 186, 0);
}

.is-assembling .fourth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 47%, rgba(149, 169, 186, 0.22) 54%, rgba(255, 255, 255, 0) 68%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: hero-flash 0.78s ease 1.05s both;
  z-index: 3;
}

.hero-assembled .fourth-hero-img,
.page-ready .fourth-hero-img {
  opacity: 1;
  transform: scale(1);
}

.hero-assembled .hero-grid,
.page-ready .hero-grid {
  opacity: 0;
  transition: opacity 0.22s ease 0.12s;
}

@keyframes hero-flash {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }

  22% {
    opacity: 0.9;
  }

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

.live-section {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 78px);
  width: min(92vw, 900px);
  margin: clamp(42px, 7vw, 90px) auto 0;
}

.live-section,
.event-section,
.home-link {
  opacity: 0;
}

.page-ready .live-section,
.page-ready .event-section,
.page-ready .home-link {
  opacity: 1;
}

.live-card {
  width: min(42vw, 330px);
  text-align: center;
}

.live-day {
  min-height: 3em;
  margin-bottom: 18px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  color: #d9e7f2;
}

.live-qr {
  width: min(62%, 216px);
  min-width: 148px;
  padding: 12px;
  background: #fff;
}

.live-button,
.home-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 24px;
  padding: 13px 26px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.live-button:hover,
.home-link a:hover {
  background: #fff;
  color: #000;
}

.event-section {
  width: min(90vw, 980px);
  margin: clamp(70px, 10vw, 150px) auto 0;
}

.section_ttl {
  text-align: center;
}

.section_ttl h1 {
  position: relative;
  margin-bottom: 22px;
  font-size: clamp(30px, 4.8vw, 58px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
}

.section_ttl h1::before {
  content: "";
  display: inline-block;
  width: min(70vw, 452px);
  height: auto;
  aspect-ratio: 452 / 62;
  background-image: url(../image/top/ttl/kasumi_outline.png);
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.68;
  z-index: -1;
}

.section_ttl h1::after {
  content: "";
  display: inline-block;
  width: min(94vw, 1174px);
  height: auto;
  aspect-ratio: 1174 / 318;
  background-image: url(../image/top/ttl/ttlbg_outline.png);
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  z-index: -2;
}

.event-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(88vw, 720px);
  margin: 0 auto clamp(34px, 5vw, 60px);
  color: #95a9ba;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: center;
}

.event-subtitle span:first-child {
  font-size: clamp(20px, 2.7vw, 30px);
}

.event-subtitle span:last-child {
  font-size: clamp(15px, 1.9vw, 21px);
  color: rgba(217, 231, 242, 0.88);
}

.event-body {
  width: min(100%, 850px);
  margin: 0 auto;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 2;
}

.event-body p + p {
  margin-top: 22px;
}

.lead {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
}

.schedule-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(28px, 4vw, 44px) 0;
}

.schedule-item {
  min-height: 170px;
  padding: 28px 24px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  text-align: center;
}

.schedule-item time {
  display: block;
  margin-bottom: 16px;
  color: #d9e7f2;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900;
}

.schedule-item p {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 700;
  line-height: 1.6;
}

.home-link {
  margin-top: clamp(60px, 8vw, 110px);
  text-align: center;
}

.home-link a {
  min-width: min(78vw, 320px);
}

@media screen and (max-width: 1200px) {
  .msm_left {
    top: -118px;
  }

  .msm_right {
    top: -150px;
  }
}

@media screen and (max-width: 1040px) {
  .msm_left {
    top: -58px;
  }

  .msm_right {
    top: -76px;
  }
}

@media screen and (max-width: 900px) {
  .msm_left {
    width: 440px;
    height: 760px;
    top: 0;
    left: -230px;
  }

  .msm_right {
    width: 440px;
    height: 760px;
    top: 190px;
    right: -226px;
    transform: translate3d(calc(var(--arm-right-entry, 0%) + var(--arm-right-x, 0px)), var(--arm-right-y, 0px), 0) rotate(calc(11deg + var(--arm-right-rotate, 0deg))) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.arms-in) {
    --arm-left-entry: 0%;
    --arm-right-entry: 0%;
  }

  .msm_left {
    transform: scale(1.12);
  }

  .msm_right {
    transform: scale(1.12);
  }
}

@media screen and (max-width: 680px) {
  .fourth-page {
    padding-top: 18px;
  }

  .msm_left {
    left: -330px;
  }

  .msm_right {
    top: 0px;
    right: -430px;
  }

  .fourth-hero {
    width: 100vw;
  }

  .live-section,
  .schedule-list {
    grid-template-columns: 1fr;
  }

  .live-section {
    display: grid;
    width: min(88vw, 360px);
    gap: 42px;
  }

  .live-card {
    width: 100%;
  }

  .live-day {
    min-height: 0;
  }

  .live-qr {
    width: min(64vw, 216px);
  }

  .event-body {
    line-height: 1.9;
  }

  .schedule-item {
    min-height: 0;
  }
}