/* =====================================================
   HAYAMI TSUKASA OFFICIAL WEBSITE
   style.css
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

  --navy:
    #17243d;

  --navy2:
    #0d1728;

  --blue:
    #8ea4bd;

  --ash:
    #6b5f5f;

  --white:
    #f4f6f8;

  --soft-pink:
    #f7d7d1;

  --line:
    #d8e0ea;

  --panel:
    rgba(
      255,
      255,
      255,
      .92
    );

  --shadow:
    0 18px 45px
    rgba(
      13,
      23,
      40,
      .12
    );

  --header-height:
    74px;

  --viewport-height:
    100dvh;

  /*
   * HERO DAY 背景
   */
  --hero-day-bg:
    #f6f8fb;

  /*
   * HERO NIGHT 背景
   */
  --hero-night-bg:
    #101b2b;

}


/* =====================================================
   RESET
===================================================== */

*,
*::before,
*::after {

  box-sizing:
    border-box;

}


html {

  scroll-behavior:
    smooth;

  -webkit-text-size-adjust:
    100%;

}


body {

  margin:
    0;

  min-width:
    320px;

  color:
    var(--navy);

  background:
    #f6f8fb;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  line-height:
    1.6;

  overflow-x:
    hidden;

}


body.no-scroll {

  overflow:
    hidden;

}


img {

  max-width:
    100%;

  display:
    block;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


button,
input,
textarea,
select {

  font:
    inherit;

}


button {

  color:
    inherit;

}


/* =====================================================
   HEADER
===================================================== */

.site-header {

  position:
    fixed;

  z-index:
    1000;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    var(--header-height);

  border-bottom:
    1px solid
    rgba(
      23,
      36,
      61,
      .1
    );

  background:
    rgba(
      248,
      250,
      253,
      .94
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

}


.header-inner {

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding-left:
    clamp(
      24px,
      3vw,
      54px
    );

  padding-right:
    clamp(
      24px,
      3vw,
      54px
    );

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


/* =====================================================
   BRAND
===================================================== */

.brand {

  display:
    flex;

  flex-direction:
    column;

  flex-shrink:
    0;

}


.brand-jp {

  font-size:
    22px;

  font-weight:
    700;

  line-height:
    1.1;

}


.brand-en {

  margin-top:
    4px;

  font-size:
    8px;

  letter-spacing:
    .32em;

}


/* =====================================================
   NAVIGATION
===================================================== */

.main-nav {

  margin-left:
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    17px;

}


.main-nav a {

  position:
    relative;

  padding:
    9px 0;

  border-bottom:
    1px solid
    transparent;

  font-size:
    10px;

  letter-spacing:
    .08em;

  white-space:
    nowrap;

  transition:
    color .25s ease,
    border-color .25s ease;

}


.main-nav a:hover,
.main-nav a.current {

  color:
    var(--blue);

  border-bottom-color:
    var(--blue);

}


/* =====================================================
   THEME TOGGLE
===================================================== */

.theme-toggle {

  margin-left:
    22px;

  min-width:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    8px
    11px;

  border:
    1px solid
    rgba(
      23,
      36,
      61,
      .18
    );

  color:
    var(--navy);

  background:
    transparent;

  cursor:
    pointer;

  font-size:
    9px;

  letter-spacing:
    .13em;

}


.theme-icon {

  position:
    relative;

  width:
    15px;

  height:
    15px;

  display:
    inline-block;

  flex:
    0 0 auto;

}


/* DAY時は月 */

html[data-theme="day"]
.theme-icon {

  border-radius:
    50%;

  background:
    var(--navy);

}


html[data-theme="day"]
.theme-icon::after {

  position:
    absolute;

  top:
    -2px;

  left:
    5px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    #f8fafd;

  content:
    "";

}


/* NIGHT時 */

html[data-theme="night"]
.theme-icon {

  border-radius:
    50%;

  background:
    #eef4fa;

  box-shadow:
    0 0 0 2px
    rgba(
      238,
      244,
      250,
      .2
    );

}


html[data-theme="night"]
.theme-icon::after {

  display:
    none;

}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.menu-button {

  width:
    44px;

  height:
    44px;

  margin-left:
    8px;

  padding:
    10px;

  display:
    none;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

}


.menu-line {

  width:
    100%;

  height:
    2px;

  display:
    block;

  border-radius:
    99px;

  background:
    var(--navy);

  transition:
    transform .25s ease,
    opacity .25s ease;

}


.menu-button.is-open
.menu-line:nth-child(1) {

  transform:
    translateY(7px)
    rotate(45deg);

}


.menu-button.is-open
.menu-line:nth-child(2) {

  opacity:
    0;

}


.menu-button.is-open
.menu-line:nth-child(3) {

  transform:
    translateY(-7px)
    rotate(-45deg);

}


/* =====================================================
   HERO
===================================================== */

#home.hero {

  width:
    100%;

  min-height:
    var(--viewport-height);

  padding-top:
    var(--header-height);

  display:
    grid;

  grid-template-columns:
    minmax(0, 55%)
    minmax(0, 45%);

  overflow:
    hidden;

  background:
    var(--hero-day-bg);

}


/* HERO IMAGE SIDE */

#home .hero-visual {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  min-height:
    calc(
      var(--viewport-height) -
      var(--header-height)
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    var(--hero-day-bg);

}


/* HERO IMAGE */

#home .hero-main-image {

  position:
    relative;

  width:
    100%;

  height:
    100%;

  max-width:
    100%;

  max-height:
    calc(
      var(--viewport-height) -
      var(--header-height)
    );

  display:
    block;

  object-fit:
    contain;

  object-position:
    center center;

}


/* HERO TEXT SIDE */

#home .hero-content {

  width:
    100%;

  min-width:
    0;

  min-height:
    calc(
      var(--viewport-height) -
      var(--header-height)
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    clamp(
      35px,
      5vw,
      95px
    );

  overflow:
    visible;

  background:
    var(--hero-day-bg);

}


.label {

  margin:
    0
    0
    15px;

  font-size:
    11px;

  letter-spacing:
    .36em;

}


.hero h1 {

  margin:
    8px
    0
    0;

  font-size:
    clamp(
      50px,
      7vw,
      110px
    );

  line-height:
    1;

}


.hero h1 span {

  display:
    block;

  margin-top:
    18px;

  font-size:
    clamp(
      14px,
      2vw,
      28px
    );

  letter-spacing:
    .34em;

  font-weight:
    400;

}


.hero-copy {

  margin:
    38px
    0
    0;

  font-size:
    clamp(
      22px,
      2.5vw,
      38px
    );

  line-height:
    1.7;

}


.english-copy {

  margin-top:
    20px;

  font-size:
    11px;

  line-height:
    1.8;

  letter-spacing:
    .24em;

}


.hero-actions {

  margin-top:
    32px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

}


/* =====================================================
   BUTTON
===================================================== */

.button {

  display:
    inline-block;

  min-width:
    150px;

  padding:
    12px
    25px;

  border:
    1px solid
    var(--navy);

  text-align:
    center;

  color:
    inherit;

  background:
    transparent;

  cursor:
    pointer;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;

}


.button.primary,
.button:hover {

  color:
    #ffffff;

  background:
    var(--navy);

}


.button:hover {

  transform:
    translateY(-2px);

}


/* =====================================================
   COMMON SECTION
===================================================== */

.section {

  padding:
    clamp(
      70px,
      9vw,
      125px
    )
    0;

}


.section.alt {

  background:
    #eef3f8;

}


.section.dark {

  color:
    #ffffff;

  background:
    linear-gradient(
      rgba(
        12,
        22,
        40,
        .90
      ),
      rgba(
        12,
        22,
        40,
        .94
      )
    ),
    url(
      "../assets/images/common/night.webp"
    )
    center
    /
    cover
    no-repeat;

}


.container {

  width:
    min(
      1420px,
      92%
    );

  margin:
    auto;

}


.section-title {

  margin-bottom:
    40px;

  padding-bottom:
    14px;

  border-bottom:
    1px solid
    var(--line);

}


.section-title h2 {

  margin:
    0;

  font-size:
    clamp(
      35px,
      4vw,
      60px
    );

  letter-spacing:
    .06em;

}


.section-title span {

  font-size:
    11px;

  letter-spacing:
    .2em;

}


.section-title.light {

  border-color:
    rgba(
      255,
      255,
      255,
      .25
    );

}


.section-more {

  margin-top:
    35px;

  text-align:
    center;

}


/* =====================================================
   NEWS
===================================================== */

.news-list {

  border-top:
    1px solid
    var(--line);

}


.news-row {

  display:
    grid;

  grid-template-columns:
    120px
    100px
    1fr
    30px;

  gap:
    20px;

  align-items:
    center;

  padding:
    19px
    10px;

  border-bottom:
    1px solid
    var(--line);

  transition:
    padding .25s ease,
    background .25s ease;

}


.news-row:hover {

  padding-left:
    20px;

  background:
    #ffffff;

}


.news-row time {

  color:
    #758195;

  font-size:
    12px;

}


.news-category {

  padding:
    5px
    8px;

  text-align:
    center;

  color:
    #ffffff;

  background:
    var(--navy);

  font-size:
    9px;

  letter-spacing:
    .14em;

}


.news-row strong {

  font-size:
    14px;

  font-weight:
    500;

}


.news-arrow {

  text-align:
    right;

}


/* =====================================================
   HOME FEATURE
===================================================== */

.home-feature {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, .65fr);

  align-items:
    center;

  gap:
    clamp(
      30px,
      6vw,
      85px
    );

}


.home-feature-image img {

  width:
    100%;

  aspect-ratio:
    16 / 9;

  object-fit:
    cover;

  box-shadow:
    var(--shadow);

}


.home-category {

  display:
    inline-block;

  margin-bottom:
    12px;

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .28em;

}


.home-feature-copy h2,
.pickup-copy h2,
.home-sns h2 {

  margin:
    0
    0
    22px;

  font-size:
    clamp(
      34px,
      4vw,
      64px
    );

}


.home-feature-copy p,
.pickup-copy p,
.home-sns p {

  line-height:
    2;

}


.stream-date {

  margin:
    25px
    0;

  font-size:
    20px;

  letter-spacing:
    .18em;

}


/* =====================================================
   LATEST GALLERY
===================================================== */

.latest-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    18px;

}


.latest-card {

  position:
    relative;

  overflow:
    hidden;

}


.latest-card img {

  width:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  transition:
    transform .45s ease;

}


.latest-card:hover img {

  transform:
    scale(1.04);

}


.latest-card-title {

  position:
    absolute;

  right:
    0;

  bottom:
    0;

  left:
    0;

  padding:
    50px
    18px
    18px;

  color:
    #ffffff;

  background:
    linear-gradient(
      transparent,
      rgba(
        10,
        20,
        38,
        .82
      )
    );

}


/* =====================================================
   PICKUP COSTUME
===================================================== */

.pickup-costume {

  overflow:
    hidden;

  background:
    linear-gradient(
      120deg,
      #e9eff5,
      #f9fafb
    );

}


.pickup-layout {

  display:
    grid;

  grid-template-columns:
    .75fr
    1.25fr;

  align-items:
    center;

  gap:
    clamp(
      30px,
      7vw,
      110px
    );

}


.pickup-image-wrap {

  position:
    relative;

  min-height:
    600px;

}


.pickup-image-wrap img {

  width:
    100%;

  height:
    650px;

  object-fit:
    contain;

}


/* =====================================================
   LATEST MOVIE
===================================================== */

.latest-movie-card {

  display:
    grid;

  grid-template-columns:
    1.3fr
    .7fr;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .18
    );

  background:
    rgba(
      255,
      255,
      255,
      .05
    );

}


.latest-movie-image {

  position:
    relative;

}


.latest-movie-image img {

  width:
    100%;

  height:
    100%;

  min-height:
    380px;

  object-fit:
    cover;

}


.big-play {

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    90px;

  height:
    90px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    #ffffff;

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    rgba(
      15,
      25,
      45,
      .4
    );

  transform:
    translate(
      -50%,
      -50%
    );

}


.latest-movie-info {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    clamp(
      30px,
      5vw,
      70px
    );

}


.latest-movie-info h3 {

  font-size:
    clamp(
      28px,
      3vw,
      50px
    );

}


/* =====================================================
   HOME SNS
===================================================== */

.home-sns {

  background:
    linear-gradient(
      135deg,
      #f9fbfd,
      #e6edf5
    );

}


.home-sns-inner {

  display:
    grid;

  grid-template-columns:
    .8fr
    1.2fr;

  gap:
    70px;

  align-items:
    center;

}


.home-sns-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap:
    12px;

}


.home-sns-button {

  padding:
    25px;

  border:
    1px solid
    var(--line);

  background:
    #ffffff;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.home-sns-button:hover {

  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow);

}


.home-sns-button strong {

  display:
    block;

  margin-bottom:
    6px;

  font-size:
    20px;

}


/* =====================================================
   PROFILE
===================================================== */

.profile-layout {

  display:
    grid;

  grid-template-columns:
    minmax(
      280px,
      420px
    )
    1fr;

  gap:
    clamp(
      30px,
      5vw,
      70px
    );

}


.profile-image {

  width:
    100%;

  aspect-ratio:
    3 / 4;

  object-fit:
    cover;

  box-shadow:
    var(--shadow);

}


.profile-table {

  width:
    100%;

  border-collapse:
    collapse;

  background:
    #ffffff;

}


.profile-table th,
.profile-table td {

  padding:
    13px
    15px;

  border-bottom:
    1px solid
    var(--line);

  text-align:
    left;

}


.profile-table th {

  width:
    150px;

  background:
    #e8eef6;

}


.profile-copy {

  margin-top:
    30px;

  font-size:
    17px;

  line-height:
    2;

}


/* =====================================================
   FILTERS
===================================================== */

.filters {

  margin-bottom:
    24px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

}


.filter {

  padding:
    9px
    18px;

  border:
    1px solid
    var(--line);

  color:
    inherit;

  background:
    #ffffff;

  cursor:
    pointer;

  transition:
    background .2s ease,
    color .2s ease;

}


.filter.active {

  color:
    #ffffff;

  background:
    var(--navy);

}


/* =====================================================
   CARDS
===================================================== */

.card-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        210px,
        1fr
      )
    );

  gap:
    18px;

}


.card {

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  background:
    #ffffff;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.card:hover {

  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow);

}


.card img {

  width:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

}


.card-content {

  padding:
    15px;

}


/* =====================================================
   EXPRESSION
===================================================== */

.expression-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        140px,
        1fr
      )
    );

  gap:
    12px;

}


.expression {

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  background:
    #ffffff;

  cursor:
    pointer;

}


.expression img {

  width:
    100%;

  aspect-ratio:
    1;

  object-fit:
    cover;

}


.expression span {

  display:
    block;

  padding:
    10px;

  text-align:
    center;

}


/* =====================================================
   GALLERY
===================================================== */

.gallery-grid {

  columns:
    4
    260px;

  column-gap:
    15px;

}


.gallery-item {

  position:
    relative;

  width:
    100%;

  display:
    block;

  margin-bottom:
    15px;

  padding:
    0;

  overflow:
    hidden;

  border:
    0;

  break-inside:
    avoid;

  color:
    inherit;

  background:
    transparent;

  cursor:
    pointer;

}


.gallery-item img {

  width:
    100%;

  transition:
    transform .4s ease;

}


.gallery-item:hover img {

  transform:
    scale(1.03);

}


.gallery-caption {

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  padding:
    40px
    18px
    17px;

  color:
    #ffffff;

  text-align:
    left;

  background:
    linear-gradient(
      transparent,
      rgba(
        9,
        18,
        34,
        .82
      )
    );

  opacity:
    0;

  transform:
    translateY(10px);

  transition:
    opacity .3s ease,
    transform .3s ease;

}


.gallery-item:hover
.gallery-caption {

  opacity:
    1;

  transform:
    none;

}


/* =====================================================
   STREAM
===================================================== */

.stream-layout {

  display:
    grid;

  grid-template-columns:
    1.4fr
    .6fr;

  gap:
    40px;

  align-items:
    center;

}


.stream-visual img {

  width:
    100%;

  box-shadow:
    0 20px 60px
    rgba(
      0,
      0,
      0,
      .25
    );

}


.live-badge {

  display:
    inline-block;

  padding:
    7px
    12px;

  color:
    #ffffff;

  background:
    #d5364e;

  font-size:
    12px;

}


.schedule-row {

  display:
    grid;

  grid-template-columns:
    60px
    70px
    1fr;

  gap:
    15px;

  padding:
    14px
    0;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .18
    );

}


.youtube-live-area {

  margin-top:
    60px;

}


.stream-subtitle {

  margin-bottom:
    15px;

  color:
    #a7bbd1;

  font-size:
    9px;

  letter-spacing:
    .28em;

}


.youtube-live-frame {

  width:
    100%;

  aspect-ratio:
    16 / 9;

  background:
    #050a12;

}


.youtube-live-frame iframe {

  width:
    100%;

  height:
    100%;

  border:
    0;

}


/* =====================================================
   MOVIE
===================================================== */

.movie-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap:
    20px;

}


.movie-card {

  display:
    block;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  background:
    #ffffff;

}


.movie-image {

  position:
    relative;

}


.movie-image img {

  width:
    100%;

  aspect-ratio:
    16 / 9;

  object-fit:
    cover;

}


.play-button {

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    65px;

  height:
    65px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    #ffffff;

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    rgba(
      10,
      20,
      40,
      .45
    );

  transform:
    translate(
      -50%,
      -50%
    );

}


.movie-info {

  padding:
    17px;

}


/* =====================================================
   GOODS
===================================================== */

.goods-grid img {

  aspect-ratio:
    1;

  object-fit:
    contain;

  padding:
    15px;

  background:
    #f8fafc;

}


/* =====================================================
   SNS
===================================================== */

.sns-section {

  background:
    #ffffff;

}


.sns-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    15px;

}


.sns-card {

  padding:
    30px
    20px;

  border:
    1px solid
    var(--line);

  text-align:
    center;

  background:
    #ffffff;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.sns-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow);

}


.sns-card strong {

  display:
    block;

  margin-bottom:
    8px;

  font-size:
    22px;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

  padding:
    50px
    0;

  color:
    #ffffff;

  background:
    var(--navy2);

}


.footer-inner {

  width:
    min(
      1420px,
      92%
    );

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


/* =====================================================
   REVEAL
===================================================== */

.reveal {

  opacity:
    0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.visible {

  opacity:
    1;

  transform:
    none;

}


/* =====================================================
   IMAGE MODAL
===================================================== */

.modal {

  position:
    fixed;

  z-index:
    3000;

  inset:
    0;

  display:
    none;

  justify-content:
    center;

  align-items:
    center;

  padding:
    30px;

  background:
    rgba(
      5,
      10,
      20,
      .92
    );

}


.modal.open {

  display:
    flex;

}


.modal img {

  max-width:
    92vw;

  max-height:
    90vh;

  object-fit:
    contain;

}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.modal-close,
.youtube-close,
.viewer-close {

  position:
    absolute;

  z-index:
    30;

  top:
    20px;

  right:
    25px;

  width:
    42px;

  height:
    42px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

}


.modal-close::before,
.modal-close::after,
.youtube-close::before,
.youtube-close::after,
.viewer-close::before,
.viewer-close::after {

  position:
    absolute;

  top:
    20px;

  left:
    7px;

  width:
    28px;

  height:
    2px;

  background:
    #ffffff;

  content:
    "";

}


.modal-close::before,
.youtube-close::before,
.viewer-close::before {

  transform:
    rotate(45deg);

}


.modal-close::after,
.youtube-close::after,
.viewer-close::after {

  transform:
    rotate(-45deg);

}


/* =====================================================
   YOUTUBE MODAL
===================================================== */

.youtube-modal {

  position:
    fixed;

  z-index:
    3100;

  inset:
    0;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    30px;

  background:
    rgba(
      5,
      10,
      20,
      .94
    );

}


.youtube-modal.open {

  display:
    flex;

}


.youtube-frame {

  width:
    min(
      1200px,
      92vw
    );

  aspect-ratio:
    16 / 9;

}


.youtube-frame iframe {

  width:
    100%;

  height:
    100%;

  border:
    0;

}


/* =====================================================
   FULLSCREEN GALLERY
===================================================== */

.gallery-viewer {

  position:
    fixed;

  z-index:
    3200;

  inset:
    0;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    60px
    90px;

  color:
    #ffffff;

  background:
    rgba(
      7,
      14,
      27,
      .97
    );

}


.gallery-viewer.open {

  display:
    flex;

}


.viewer-content {

  width:
    min(
      1400px,
      100%
    );

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(280px, .6fr);

  align-items:
    center;

  gap:
    50px;

}


.viewer-content img {

  width:
    100%;

  max-height:
    82vh;

  object-fit:
    contain;

}


.viewer-caption span {

  color:
    #93a9c0;

  font-size:
    9px;

  letter-spacing:
    .3em;

}


.viewer-caption h2 {

  margin:
    10px
    0
    20px;

  font-size:
    clamp(
      35px,
      4vw,
      65px
    );

}


.viewer-caption p {

  margin-bottom:
    30px;

  line-height:
    2;

}


/* =====================================================
   GALLERY ARROWS
===================================================== */

.viewer-nav {

  position:
    absolute;

  z-index:
    20;

  top:
    50%;

  width:
    56px;

  height:
    76px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );

  color:
    #ffffff;

  background:
    rgba(
      10,
      20,
      35,
      .45
    );

  cursor:
    pointer;

  transform:
    translateY(-50%);

  transition:
    background .2s ease;

}


.viewer-nav:hover {

  background:
    rgba(
      255,
      255,
      255,
      .12
    );

}


.viewer-prev {

  left:
    18px;

}


.viewer-next {

  right:
    18px;

}


.viewer-nav::before {

  width:
    17px;

  height:
    17px;

  display:
    block;

  border-top:
    2px solid
    currentColor;

  border-right:
    2px solid
    currentColor;

  content:
    "";

}


.viewer-prev::before {

  transform:
    rotate(-135deg);

}


.viewer-next::before {

  transform:
    rotate(45deg);

}


/* =====================================================
   SITE LOADER
===================================================== */

.site-loader {

  position:
    fixed;

  z-index:
    5000;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  color:
    #ffffff;

  background:
    #101c31;

  transition:
    opacity .8s ease,
    visibility .8s ease;

}


.site-loader.loaded {

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

}


.loader-inner {

  width:
    min(
      380px,
      80vw
    );

  text-align:
    center;

}


.loader-logo {

  display:
    flex;

  justify-content:
    center;

  margin-bottom:
    25px;

}


.loader-triangle {

  width:
    70px;

  height:
    62px;

  display:
    block;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #8ea4bd
    );

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      0 100%
    );

}


.loader-name {

  font-size:
    29px;

  letter-spacing:
    .12em;

}


.loader-en {

  margin-top:
    8px;

  color:
    #aabbd0;

  font-size:
    9px;

  letter-spacing:
    .4em;

}


.loader-line {

  position:
    relative;

  width:
    100%;

  height:
    1px;

  margin:
    30px
    0
    18px;

  overflow:
    hidden;

  background:
    rgba(
      255,
      255,
      255,
      .15
    );

}


.loader-line span {

  position:
    absolute;

  top:
    0;

  left:
    -40%;

  width:
    40%;

  height:
    100%;

  background:
    #ffffff;

  animation:
    loaderLine
    1.5s
    ease-in-out
    infinite;

}


.loader-inner p {

  color:
    #91a5bd;

  font-size:
    9px;

  letter-spacing:
    .35em;

}


@keyframes loaderLine {

  from {

    left:
      -40%;

  }


  to {

    left:
      100%;

  }

}


/* =====================================================
   PAGE TRANSITION
===================================================== */

.page-transition {

  position:
    fixed;

  z-index:
    4500;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  background:
    #101c31;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .42s ease,
    visibility .42s ease;

}


.page-transition.active {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    all;

}


.transition-mark {

  width:
    68px;

  height:
    60px;

  display:
    block;

  background:
    #ffffff;

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      0 100%
    );

}


/* =====================================================
   BACK TO TOP
===================================================== */

.back-to-top {

  position:
    fixed;

  z-index:
    900;

  right:
    28px;

  bottom:
    28px;

  width:
    58px;

  height:
    58px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  border:
    1px solid
    rgba(
      23,
      36,
      61,
      .25
    );

  color:
    #ffffff;

  background:
    rgba(
      23,
      36,
      61,
      .9
    );

  cursor:
    pointer;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(15px);

  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease,
    background .3s ease;

}


.back-to-top.visible {

  opacity:
    1;

  visibility:
    visible;

  transform:
    none;

}


.back-to-top:hover {

  background:
    #17243d;

}


.top-arrow {

  width:
    11px;

  height:
    11px;

  margin-bottom:
    5px;

  border-top:
    2px solid
    #ffffff;

  border-left:
    2px solid
    #ffffff;

  transform:
    rotate(45deg);

}


/* =====================================================
   NEWS ARCHIVE
===================================================== */

.archive-main {

  min-height:
    100vh;

  padding:
    150px
    0
    100px;

}


.archive-header {

  margin-bottom:
    70px;

}


.archive-header > span {

  color:
    var(--blue);

  font-size:
    10px;

  letter-spacing:
    .3em;

}


.archive-header h1 {

  margin:
    5px
    0;

  font-size:
    clamp(
      60px,
      10vw,
      130px
    );

  line-height:
    1;

}


.news-archive {

  border-top:
    1px solid
    var(--line);

}


.archive-news-item {

  display:
    grid;

  grid-template-columns:
    280px
    1fr;

  gap:
    40px;

  padding:
    30px
    0;

  border-bottom:
    1px solid
    var(--line);

  transition:
    transform .25s ease;

}


.archive-news-item:hover {

  transform:
    translateX(8px);

}


.archive-news-image img {

  width:
    100%;

  aspect-ratio:
    16 / 9;

  object-fit:
    cover;

}


.archive-news-copy {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.archive-news-meta {

  display:
    flex;

  gap:
    15px;

  color:
    #7f8fa3;

  font-size:
    10px;

  letter-spacing:
    .15em;

}


.archive-news-copy h2 {

  margin:
    12px
    0
    20px;

  font-size:
    clamp(
      21px,
      3vw,
      38px
    );

}


.archive-arrow {

  color:
    var(--blue);

  font-size:
    10px;

  letter-spacing:
    .2em;

}


.header-back {

  margin-left:
    auto;

}


/* =====================================================
   ERROR PAGE
===================================================== */

.error-page {

  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    30px;

  text-align:
    center;

  color:
    #ffffff;

  background:
    linear-gradient(
      rgba(
        15,
        27,
        48,
        .72
      ),
      rgba(
        15,
        27,
        48,
        .88
      )
    ),
    url(
      "../assets/images/common/night.webp"
    )
    center
    /
    cover
    no-repeat;

}


.error-page h1 {

  margin:
    0;

  font-size:
    clamp(
      100px,
      20vw,
      240px
    );

  opacity:
    .3;

}


/* =====================================================
   NIGHT THEME
===================================================== */

html[data-theme="night"] body {

  color:
    #dfe8f2;

  background:
    #0e1726;

}


html[data-theme="night"]
.site-header {

  background:
    rgba(
      13,
      23,
      40,
      .92
    );

  border-color:
    rgba(
      255,
      255,
      255,
      .08
    );

}


html[data-theme="night"]
.brand,

html[data-theme="night"]
.main-nav,

html[data-theme="night"]
.theme-toggle {

  color:
    #eef4fa;

}


html[data-theme="night"]
.menu-line {

  background:
    #eef4fa;

}


/*
 * HERO全体の背景をNIGHTで統一
 */
html[data-theme="night"]
#home.hero,

html[data-theme="night"]
#home .hero-visual,

html[data-theme="night"]
#home .hero-content {

  background:
    var(--hero-night-bg);

}


html[data-theme="night"]
.section {

  background:
    #111d30;

}


html[data-theme="night"]
.section.alt {

  background:
    #0c1625;

}


html[data-theme="night"]
.home-sns {

  background:
    linear-gradient(
      135deg,
      #101c2f,
      #17253a
    );

}


html[data-theme="night"]
.news-row:hover {

  background:
    #18263a;

}


html[data-theme="night"]
.card,

html[data-theme="night"]
.expression,

html[data-theme="night"]
.movie-card,

html[data-theme="night"]
.sns-card,

html[data-theme="night"]
.home-sns-button,

html[data-theme="night"]
.profile-table {

  color:
    #e7eef6;

  background:
    #18263a;

  border-color:
    #2b3b50;

}


html[data-theme="night"]
.profile-table th {

  background:
    #22334a;

}


html[data-theme="night"]
.filter {

  color:
    #d9e3ee;

  background:
    #18263a;

  border-color:
    #34455a;

}


html[data-theme="night"]
.filter.active {

  color:
    #17243d;

  background:
    #dce7f2;

}


html[data-theme="night"]
.button {

  color:
    #e7eef6;

  border-color:
    #8ea4bd;

}


html[data-theme="night"]
.button.primary,
html[data-theme="night"]
.button:hover {

  color:
    #17243d;

  background:
    #dce7f2;

}


/* =====================================================
   MEDIUM DESKTOP
===================================================== */

@media (
  max-width:
  1350px
) {

  #home.hero {

    grid-template-columns:
      minmax(0, 56%)
      minmax(0, 44%);

  }


  #home .hero-content {

    padding:
      clamp(
        28px,
        4vw,
        60px
      );

  }


  .main-nav {

    gap:
      11px;

  }


  .main-nav a {

    font-size:
      9px;

  }

}


/* =====================================================
   TABLET / MOBILE NAV
===================================================== */

@media (
  max-width:
  900px
) {

  .menu-button {

    display:
      flex;

  }


  .theme-toggle {

    margin-left:
      auto;

  }


  .main-nav {

    position:
      fixed;

    z-index:
      999;

    top:
      var(--header-height);

    left:
      0;

    right:
      0;

    margin-left:
      0;

    display:
      none;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      18px;

    padding:
      30px;

    border-top:
      1px solid
      rgba(
        23,
        36,
        61,
        .08
      );

    background:
      rgba(
        248,
        250,
        253,
        .99
      );

    box-shadow:
      0 18px 35px
      rgba(
        13,
        23,
        40,
        .12
      );

  }


  .main-nav.open {

    display:
      flex;

  }


  html[data-theme="night"]
  .main-nav {

    background:
      rgba(
        13,
        23,
        40,
        .99
      );

  }


  .home-feature,
  .pickup-layout,
  .latest-movie-card,
  .home-sns-inner,
  .profile-layout,
  .stream-layout {

    grid-template-columns:
      1fr;

  }


  .latest-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .movie-grid {

    grid-template-columns:
      1fr;

  }


  .sns-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .gallery-grid {

    columns:
      2
      160px;

  }


  .footer-inner {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .viewer-content {

    grid-template-columns:
      1fr;

    gap:
      25px;

  }


  .viewer-content img {

    max-height:
      55vh;

  }


  .archive-news-item {

    grid-template-columns:
      1fr;

  }

}


/* =====================================================
   TABLET PORTRAIT
===================================================== */

@media
  (max-width: 1200px)
  and
  (orientation: portrait) {

  #home.hero {

    min-height:
      auto;

    display:
      flex;

    flex-direction:
      column;

    overflow:
      visible;

    background:
      var(--hero-day-bg);

  }


  #home .hero-visual {

    width:
      100%;

    min-height:
      0;

    height:
      auto;

    display:
      block;

    overflow:
      hidden;

    background:
      var(--hero-day-bg);

  }


  #home .hero-main-image {

    position:
      relative;

    width:
      100%;

    height:
      auto;

    max-width:
      100%;

    max-height:
      none;

    object-fit:
      contain;

    object-position:
      center;

    margin:
      0;

  }


  #home .hero-content {

    width:
      100%;

    min-height:
      auto;

    padding:
      42px
      7%
      55px;

    background:
      var(--hero-day-bg);

  }


  html[data-theme="night"]
  #home.hero,

  html[data-theme="night"]
  #home .hero-visual,

  html[data-theme="night"]
  #home .hero-content {

    background:
      var(--hero-night-bg);

  }

}


/* =====================================================
   SMARTPHONE
===================================================== */

@media (
  max-width:
  600px
) {

  .header-inner {

    padding-left:
      18px;

    padding-right:
      14px;

  }


  .brand-jp {

    font-size:
      18px;

  }


  .brand-en {

    font-size:
      7px;

  }


  .theme-toggle {

    min-width:
      72px;

    padding:
      7px
      8px;

  }


  #home.hero {

    width:
      100%;

    min-height:
      auto;

    display:
      flex;

    flex-direction:
      column;

    overflow:
      visible;

    background:
      var(--hero-day-bg);

  }


  #home .hero-visual {

    width:
      100%;

    height:
      auto;

    min-height:
      0;

    display:
      block;

    overflow:
      visible;

    background:
      var(--hero-day-bg);

  }


  #home .hero-main-image {

    position:
      relative;

    inset:
      auto;

    width:
      100%;

    height:
      auto;

    max-width:
      100%;

    max-height:
      none;

    object-fit:
      contain;

    object-position:
      center;

    margin:
      0 auto;

  }


  #home .hero-content {

    width:
      100%;

    height:
      auto;

    min-height:
      0;

    padding:
      30px
      6%
      44px;

    overflow:
      visible;

    background:
      var(--hero-day-bg);

  }


  html[data-theme="night"]
  #home.hero,

  html[data-theme="night"]
  #home .hero-visual,

  html[data-theme="night"]
  #home .hero-content {

    background:
      var(--hero-night-bg);

  }


  #home .label {

    margin-bottom:
      8px;

    font-size:
      8px;

  }


  #home .hero h1 {

    font-size:
      clamp(
        34px,
        11vw,
        54px
      );

    line-height:
      1.05;

  }


  #home .hero h1 span {

    margin-top:
      8px;

    font-size:
      10px;

  }


  #home .hero-copy {

    margin-top:
      16px;

    font-size:
      18px;

  }


  #home .english-copy {

    margin-top:
      10px;

    font-size:
      8px;

  }


  #home .hero-actions {

    margin-top:
      16px;

  }


  #home .hero-actions .button {

    min-width:
      120px;

    padding:
      9px
      16px;

    font-size:
      11px;

  }


  .latest-grid,
  .home-sns-grid,
  .sns-grid {

    grid-template-columns:
      1fr;

  }


  .gallery-grid {

    columns:
      1;

  }


  .gallery-caption {

    opacity:
      1;

    transform:
      none;

  }


  .gallery-viewer {

    padding:
      70px
      24px;

  }


  .viewer-nav {

    width:
      42px;

    height:
      62px;

  }


  .viewer-prev {

    left:
      5px;

  }


  .viewer-next {

    right:
      5px;

  }


  .news-row {

    grid-template-columns:
      80px
      1fr
      20px;

    gap:
      10px;

  }


  .news-category {

    display:
      none;

  }


  .back-to-top {

    right:
      15px;

    bottom:
      15px;

    width:
      50px;

    height:
      50px;

  }


  .profile-table th {

    width:
      110px;

  }

}


/* =====================================================
   iPHONE 16 / 16 PRO
===================================================== */

@media
  (min-width: 390px)
  and
  (max-width: 450px)
  and
  (orientation: portrait) {

  #home .hero-main-image {

    width:
      100%;

    height:
      auto;

    object-fit:
      contain;

    object-position:
      center;

  }


  #home .hero-content {

    padding:
      28px
      24px
      42px;

  }

}


/* =====================================================
   VERY SMALL SMARTPHONE
===================================================== */

@media (
  max-width:
  400px
) {

  .theme-text {

    display:
      none;

  }


  .theme-toggle {

    min-width:
      42px;

    width:
      42px;

    padding:
      8px;

  }

}


/* =====================================================
   LANDSCAPE TABLET / PHONE
===================================================== */

@media
  (orientation: landscape)
  and
  (max-height: 700px) {

  #home.hero {

    min-height:
      var(--viewport-height);

    display:
      grid;

    grid-template-columns:
      minmax(0, 52%)
      minmax(0, 48%);

    overflow:
      hidden;

    background:
      var(--hero-day-bg);

  }


  #home .hero-visual {

    height:
      calc(
        var(--viewport-height) -
        var(--header-height)
      );

    min-height:
      0;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    background:
      var(--hero-day-bg);

  }


  #home .hero-main-image {

    width:
      100%;

    height:
      100%;

    max-height:
      100%;

    object-fit:
      contain;

    object-position:
      center;

  }


  #home .hero-content {

    min-height:
      calc(
        var(--viewport-height) -
        var(--header-height)
      );

    padding:
      20px
      5%;

    background:
      var(--hero-day-bg);

  }


  html[data-theme="night"]
  #home.hero,

  html[data-theme="night"]
  #home .hero-visual,

  html[data-theme="night"]
  #home .hero-content {

    background:
      var(--hero-night-bg);

  }


  #home .hero h1 {

    font-size:
      clamp(
        30px,
        6vw,
        48px
      );

  }


  #home .hero-copy {

    margin-top:
      8px;

    font-size:
      16px;

  }


  #home .english-copy {

    display:
      none;

  }


  #home .hero-actions {

    margin-top:
      8px;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {

  html {

    scroll-behavior:
      auto;

  }


  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* =====================================================
   STORY
===================================================== */

.story-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    25px;

}


.story-card {

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  background:
    #ffffff;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.story-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow);

}


.story-card-image {

  overflow:
    hidden;

}


.story-card-image img {

  width:
    100%;

  aspect-ratio:
    16 / 10;

  object-fit:
    cover;

  transition:
    transform .5s ease;

}


.story-card:hover
.story-card-image img {

  transform:
    scale(1.03);

}


.story-card-copy {

  padding:
    clamp(
      22px,
      4vw,
      40px
    );

}


.story-card-meta {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #7b8da2;

  font-size:
    9px;

  letter-spacing:
    .16em;

}


.story-card-copy h2 {

  margin:
    12px 0 4px;

  font-size:
    clamp(
      25px,
      3vw,
      40px
    );

}


.story-en {

  margin:
    0 0 20px;

  color:
    #8ba0b8;

  font-size:
    9px;

  letter-spacing:
    .2em;

}


.story-card-copy > p:last-child {

  line-height:
    1.9;

}


/* =====================================================
   STORY DETAIL
===================================================== */

.story-detail-page {

  padding-top:
    var(--header-height);

}


.story-detail {

  min-height:
    calc(
      100vh -
      var(--header-height)
    );

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(400px, .9fr);

}


.story-detail-visual {

  min-height:
    calc(
      100vh -
      var(--header-height)
    );

  background:
    #edf2f7;

}


.story-detail-visual img {

  position:
    sticky;

  top:
    var(--header-height);

  width:
    100%;

  height:
    calc(
      100vh -
      var(--header-height)
    );

  object-fit:
    cover;

}


.story-detail-content {

  display:
    flex;

  align-items:
    center;

  padding:
    clamp(
      50px,
      7vw,
      110px
    );

  background:
    #f7f9fc;

}


.story-detail-inner {

  width:
    min(
      650px,
      100%
    );

  margin:
    auto;

}


.story-detail-meta {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #7b8ca1;

  font-size:
    10px;

}


.story-detail-content h1 {

  margin:
    10px 0;

  font-size:
    clamp(
      40px,
      5vw,
      75px
    );

  line-height:
    1.2;

}


.story-detail-en {

  margin:
    0 0 45px;

  color:
    #849ab3;

  font-size:
    10px;

  letter-spacing:
    .25em;

}


.story-body {

  font-size:
    16px;

  line-height:
    2.3;

}


.story-body p {

  margin:
    0 0 28px;

}


.story-detail-actions {

  margin-top:
    55px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}


/* NIGHT */

html[data-theme="night"]
.story-card {

  color:
    #e5edf5;

  border-color:
    #2b3b50;

  background:
    #17263a;

}


html[data-theme="night"]
.story-detail-content {

  background:
    #101b2b;

}


html[data-theme="night"]
.story-detail-visual {

  background:
    #0d1726;

}


/* RESPONSIVE */

@media (
  max-width: 900px
) {

  .story-grid {

    grid-template-columns:
      1fr;

  }


  .story-detail {

    grid-template-columns:
      1fr;

  }


  .story-detail-visual {

    min-height:
      0;

  }


  .story-detail-visual img {

    position:
      static;

    height:
      auto;

    max-height:
      none;

    object-fit:
      contain;

  }


  .story-detail-content {

    padding:
      45px 7% 70px;

  }

}