@charset "UTF-8";

/* =====================================================
   INFO MV
===================================================== */

:root{
  /* ★VIP質感（暗くしない／元画像を活かす） */
  --mv-filter: brightness(1) contrast(1.02) saturate(1.02);

  /* ★限りなく透明に近いハイライト幕 */
  --mv-highlight: rgba(255,255,255,.06);
}

.info-mv{
  position:relative;
  height:420px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#000;
}

@media (max-width:768px){
  .info-mv{ height:300px; }
}

.info-mv__media{
  position:absolute;
  inset:0;
}

.info-mv__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  /* ★VIPと同じ質感へ統一（暗くしない） */
  filter: var(--mv-filter);

  transform: translateZ(0) scale(1.01);
  will-change: transform, filter;
}

/* ★“ほぼ透明”ハイライト幕（濁らず、艶だけ足す） */
.info-mv__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    var(--mv-highlight),
    rgba(255,255,255,0)
  );
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events:none;
}

.info-mv__inner{
  position:relative;
  z-index:1;
  text-align:center;
  padding:0 20px;
}

.info-mv__title{
  margin:0;
  font-family: var(--font-en,"Cinzel",serif);
  letter-spacing:.32em;
  font-weight:500;
  font-size: clamp(22px, 3vw, 34px);
  color:#fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* =====================================================
   REVEAL (MV + HEAD + LIST 共通)
===================================================== */

.info-archive .reveal-item,
.info-mv .reveal-item{
  opacity:0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 1.4s cubic-bezier(.16,1,.30,1),
    transform 1.4s cubic-bezier(.16,1,.30,1),
    filter 1.4s cubic-bezier(.16,1,.30,1);
}

.js-reveal.is-inview .reveal-item{
  opacity:1;
  transform:none;
  filter:none;
}

/* =====================================================
   LIST
===================================================== */

.info-archive{
  background:#fff;
}

.info-archive__head{
  margin-bottom:34px;
}

.info-archive__list{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid rgba(0,0,0,.18);
}

.info-archive__item{
  border-bottom:1px solid rgba(0,0,0,.18);
}

.info-row{
  display:grid;
  grid-template-columns:120px 1fr 18px;
  gap:28px;
  align-items:center;
  padding:22px 0;
  text-decoration:none;
  color:rgba(0,0,0,.88);
  transition:.3s ease;
}

.info-row:hover{ opacity:.72; }

.info-row__date{
  font-family:var(--font-en);
  font-size:13px;
  letter-spacing:.10em;
  color:rgba(0,0,0,.70);
}

.info-row__title{
  font-size:15px;
  line-height:1.9;
}

.info-row__arrow{
  text-align:right;
  font-size:18px;
  color:rgba(0,0,0,.45);
}

/* =====================================================
   PAGINATION
===================================================== */

.info-archive__pagination{
  margin-top:28px;
}

.info-archive__pagination ul{
  list-style:none;
  display:flex;
  gap:10px;
  padding:0;
  margin:0;
  justify-content:center;
}

.info-archive__pagination a,
.info-archive__pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  font-family:var(--font-en);
  letter-spacing:.12em;
  font-size:12px;
  border:1px solid rgba(0,0,0,.18);
  color:rgba(0,0,0,.72);
  text-decoration:none;
  transition:.3s ease;
}

.info-archive__pagination a:hover{
  opacity:.7;
}

.info-archive__pagination .current{
  border-color:rgba(0,0,0,.45);
  color:rgba(0,0,0,.95);
}

/* =====================================================
   Responsive
===================================================== */

@media (max-width:768px){
  .info-row{
    grid-template-columns:96px 1fr 16px;
    gap:18px;
    padding:18px 0;
  }
  .info-row__title{ font-size:14px; }
}

/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce){
  .reveal-item{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}