/* ==========================================================
   Mill Entertainment OFFICIAL SITE
   ブレークポイント：SP 〜767px / タブレット 768〜1023px / PC 1024px〜
   色は :root の変数を使い、直書きしない
   ========================================================== */

:root {
  --color-main:   #F47FB2; /* メイン：ピンク */
  --color-sub:    #1F2D5C; /* サブ：ネイビー（見出し・フッター） */
  --color-accent: #FCE4EF; /* アクセント：淡ピンク */
  --color-bg:     #FFFFFF;
  --color-bg-alt: #F7F7FA; /* スライド背景 */
  --color-text:   #333333;
  --color-muted:  #8A8FA3;

  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  --font-en:   "Montserrat", var(--font-base);

  --header-height: 64px;
  --radius: 14px;
  --shadow-soft: 0 6px 24px rgba(31, 45, 92, 0.08);
  --shadow-hover: 0 12px 32px rgba(244, 127, 178, 0.28);

  /* スライド：1枚の幅と、左右の画像との間隔 */
  --slide-w: 88%;
  /* スライドの縦横比（高さ ÷ 幅）。3:2 = 2/3。16:9 にするなら 9/16 */
  --slide-ratio: 2 / 3;
  --slide-gap: 12px;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; }
button { font-family: inherit; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(31, 45, 92, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.site-header__logo {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-sub);
}
.site-nav__list { display: flex; gap: 24px; }
.site-nav__list a {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-sub);
  transition: color 0.2s ease;
}
.site-nav__list a:hover { color: var(--color-main); }

/* ---------- トップ：スライド ---------- */
.hero {
  padding: 16px 0 20px;
  background: var(--color-bg-alt);
}
.hero__viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;          /* 縦スクロールはそのまま、横スワイプはスライド操作に使う */
  aspect-ratio: 3 / 2;           /* --slide-ratio を変えたらここも合わせる */
  /* 1枚の高さ = 幅 × --slide-ratio。左右の画像をのぞかせるため、ビューポートは1枚分の高さに合わせる */
  height: auto;
}
.hero__track { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--slide-w);
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-accent);
  /* --offset：表示中の画像を0として、右隣が1、左隣が-1（JSが設定） */
  transform: translateX(calc(-50% + var(--offset, 0) * (100% + var(--slide-gap))));
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.7s ease;
  opacity: 0.45;
  user-select: none;
}
.hero__slide.is-current { opacity: 1; }
.hero__slide.is-far { visibility: hidden; transition: none; }
.hero__slide a { display: block; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero__viewport.is-dragging .hero__slide { transition: none; }

/* JSが無効なときは1枚目だけを表示 */
.hero__viewport:not(.is-ready) .hero__slide:not(:first-child) { display: none; }
.hero__viewport:not(.is-ready) .hero__slide:first-child { opacity: 1; }

.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 45, 92, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero__arrow:hover { background: var(--color-main); }
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow--prev { left: calc((100% - var(--slide-w)) / 2 + 12px); }
.hero__arrow--next { right: calc((100% - var(--slide-w)) / 2 + 12px); }

.hero__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.hero__dot {
  width: 24px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #D5D7E0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.hero__dot.is-current { width: 36px; background: var(--color-main); }
/* 押しやすいように当たり判定を上下に広げる */
.hero__dot { position: relative; }
.hero__dot::before { content: ""; position: absolute; inset: -10px 0; }

/* ---------- セクション共通 ---------- */
.section { padding: 64px 0 80px; }
.section__inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.section__title {
  margin-bottom: 32px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--color-sub);
}
.section__title-ja {
  display: block;
  margin-top: 8px;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-main);
}
.section__empty { text-align: center; color: var(--color-muted); }

/* ---------- GROUP ---------- */
.group-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.group-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.group-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.group-card__photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent), #E6E9F5);
}
.group-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.group-card:hover .group-card__photo img { transform: scale(1.04); }
.group-card__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-sub);
}
.group-card__icon { flex-shrink: 0; width: 15px; height: 15px; color: var(--color-main); }

/* ---------- フッター ---------- */
.site-footer {
  padding: 40px 16px;
  background: var(--color-sub);
  color: #fff;
  text-align: center;
}
.site-footer__logo {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: 20px;
  font-size: 13px;
}
.site-footer__links a { opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; }
.site-footer__links a:hover { opacity: 1; color: var(--color-main); }
.site-footer__copy { margin-top: 20px; font-size: 12px; opacity: 0.7; }

/* ---------- タブレット 768px〜 ---------- */
@media (min-width: 768px) {
  :root { --slide-w: 76%; --slide-gap: 20px; }
  .hero { padding: 24px 0 28px; }
  .hero__viewport { aspect-ratio: auto; height: calc(76vw * var(--slide-ratio)); }
  .group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section__title { font-size: 40px; }
}

/* ---------- PC 1024px〜 ---------- */
@media (min-width: 1024px) {
  :root { --header-height: 72px; --slide-w: min(72%, 1100px); }
  .site-header__logo { font-size: 20px; }
  .hero__viewport { height: calc(min(72vw, 1100px) * var(--slide-ratio)); }
  .hero__arrow { width: 52px; height: 52px; margin-top: -26px; }
  .group-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  /* グループが1〜2組のときは中央に寄せる */
  .group-list:has(> li:only-child) { grid-template-columns: minmax(0, 380px); justify-content: center; }
  .group-list:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
  .section { padding: 88px 0 104px; }
}

/* ---------- SP 〜767px：スライドの高さ ---------- */
@media (max-width: 767px) {
  .hero__viewport { aspect-ratio: auto; height: calc(88vw * var(--slide-ratio)); }
  .hero__arrow { display: none; } /* スマホはスワイプで操作 */
}

/* 動きを減らす設定の端末では、切り替えアニメーションを無効にする */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide, .group-card, .group-card__photo img { transition: none; }
}