/* スマホ専用：2カラム・スクロール吸着・登場演出 */
.scene-nav {
  display: none;
}
@media (max-width: 700px) {
  html {
    scroll-snap-type: y;
    scroll-padding-top: 62px;
  }
  .header {
    height: 62px;
    padding-inline: 6%;
  }
  .brand img {
    width: 96px;
  }
  .hero,
  .cast-card,
  .schedule,
  .follow-section,
  .more {
    scroll-snap-align: start;
  }
  .hero {
    min-height: calc(-62px + 100svh);
    padding: 20px 8% 24px 6%;
    gap: 16px;
    align-content: center;
  }
  .hero-copy .eyebrow {
    font-size: 7px;
    margin-bottom: 9px;
  }
  .hero h1 {
    font-size: clamp(17px, 5.1vw, 23px);
    margin-bottom: 10px;
  }
  .hero-english {
    font-size: clamp(24px, 7.5vw, 36px);
  }
  .hero-copy .intro {
    margin: 10px 0px 0px;
    font-size: 12px;
  }
  .hero-copy > .pill {
    display: none;
  }
  .hero-art:has(.portrait-slider) {
    padding: 0px 9px 0px 0px;
  }
  .photo-grid.portrait-slider {
    height: clamp(260px, -318px + 100svh, 560px);
    aspect-ratio: auto;
    border-radius: 75px 16px;
    box-shadow: 8px 8px 0 var(--slide-color);
  }
  .portrait-slider .hero-portrait span {
    font-size: 19px;
    bottom: 20px;
    left: 17px;
  }
  .slider-controls {
    margin-top: 15px;
  }
  .hero-art:has(.portrait-slider) .art-caption {
    margin-top: 3px;
    font-size: 7px;
  }
  .ticker {
    padding: 10px 0px;
  }
  .ticker span {
    font-size: 14px;
  }
  .members {
    padding: 0px 8% 42px 6%;
    scroll-snap-align: start;
  }
  .members > .section-heading {
    margin: 0px;
    padding: 42px 0px 24px;
  }
  .members > .section-heading h2 {
    font-size: 27px;
  }
  .members > .section-heading > p {
    margin-top: 12px;
  }
  .member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 30px 14px;
  }
  .cast-card {
    position: relative;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
    min-height: 0px;
    padding: 0px 5px 0px 0px;
    display: block;
    overflow: visible;
    scroll-snap-align: none;
    scroll-margin-top: 80px;
  }
  .card-photo {
    width: 100%;
    transform-origin: 50% 80%;
    height: auto;
    aspect-ratio: 0.74 / 1;
    border-radius: 36px 9px 9px;
    box-shadow: 4px 4px 0 var(--accent);
  }
  .cast-card:nth-child(2n) .card-photo {
    border-radius: 9px 36px 9px 9px;
  }
  .card-photo img {
    width: 100%;
    height: 112%;
    object-position: center 35%;
    transform: translateY(var(--image-depth, -5%));
    transition: none;
    position: absolute;
    inset: 0px;
  }
  .cast-card:hover .card-photo img {
    transform: translateY(var(--image-depth, -5%));
  }
  .photo-tag {
    font-size: 6px;
    right: 7px;
    bottom: 10px;
  }
  .card-info {
    padding: 17px 0px 0px;
  }
  .roman {
    font-size: 7px;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }
  .card-info h3 {
    font-size: clamp(15px, 4.5vw, 21px);
    margin-bottom: 11px;
  }
  .card-actions {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 9px;
  }
  .card-actions a {
    border-radius: 30px;
    padding: 11px 10px;
    font-size: 10px;
  }
  .card-actions a:last-child {
    background: var(--paper);
  }
  .schedule {
    padding: 35px 8% 45px 6%;
  }
  .schedule .section-heading {
    margin-bottom: 22px;
  }
  .schedule h2 {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .schedule-panel iframe {
    height: 65svh;
    min-height: 400px;
  }
  .follow-section {
    min-height: calc(-62px + 100svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 55px 8%;
  }
  .follow-section h2 {
    font-size: clamp(34px, 10vw, 48px);
  }
  .follow-star {
    top: 18%;
  }
  .more {
    padding: 55px 8% 55px 6%;
  }
  .scene-nav {
    display: flex;
    position: fixed;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 35;
    flex-direction: column;
    padding: 5px 0px;
    background: rgba(246, 244, 236, 0.85);
    border: 1px solid rgba(216, 217, 206, 0.5);
    border-radius: 22px;
    backdrop-filter: blur(10px);
  }
  .scene-nav a {
    display: grid;
    place-items: center;
    width: 26px;
    height: 36px;
  }
  .scene-nav a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 8px;
    background: rgb(137, 141, 129);
    transition: height 0.25s, background 0.25s;
  }
  .scene-nav a[aria-current="true"]::before {
    height: 18px;
    background: var(--pink);
  }
  .mobile-scenes .cast-card.reveal {
    opacity: 1;
    transform: none;
  }
  .mobile-scenes .cast-card .card-photo {
    transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.25, 1);
    transform: translateY(12px) rotate(-1deg) scale(0.98);
  }
  .mobile-scenes .cast-card:nth-child(2n) .card-photo {
    transform: translateY(12px) rotate(1deg) scale(0.98);
  }
  .mobile-scenes .cast-card.scene-entered .card-photo {
    transform: none;
  }
  .mobile-scenes .cast-card .card-info {
    opacity: 0.35;
    transform: translateY(18px);
    transition: opacity 0.6s 0.1s, transform 0.6s 0.1s;
  }
  .mobile-scenes .cast-card.scene-entered .card-info {
    opacity: 1;
    transform: translateY(0px);
  }
  .mobile-scenes .hero-copy {
    transform: translateY(var(--copy-depth, 0px));
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  .mobile-scenes .cast-card .card-photo,
  .mobile-scenes .cast-card:nth-child(2n) .card-photo,
  .mobile-scenes .cast-card .card-info,
  .mobile-scenes .hero-copy {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .card-photo img,
  .cast-card:hover .card-photo img {
    transform: translateY(-5%);
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .mobile-scenes .cast-card .card-photo,
  .mobile-scenes .cast-card:nth-child(2n) .card-photo {
    transform: none;
  }
}

/* Keep the X button legible when touch browsers retain a hover state. */
@media (max-width: 700px) {
  .card-actions a:last-child:hover {
    background: var(--ink);
    color: white;
  }
}