/* ============================================================
   MOS TOP Page (B案 / TopFinalB)
   assets/css/app.css — プレーンCSS（フレームワーク不使用）
   仕様: design_handoff_top_page_b/design/TopFinalB.dc.html
   ============================================================ */

/* ---------- design tokens (mos-ui: tokens-and-components.css より) ---------- */

:root,
[data-theme="light"] {
  --mos-bg: #ffffff;
  --mos-ink: #0d0d0d;
  --mos-bg-invert: #000000;
  --mos-ink-invert: #ffffff;
  --mos-line: #e6e6e6;
  --mos-muted: #7a7a7a;
  --mos-accent: #ed6112;
}

:root {
  --mos-font-display: "Archivo", "Noto Sans JP", sans-serif;
  --mos-font-body: "Noto Sans JP", sans-serif;
  --mos-font-mono: "Space Mono", monospace;
  --mos-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mos-accent-hover: #ff7a2e;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* スティッキーヘッダーの高さ分、アンカー位置を下げる */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--mos-bg);
  color: var(--mos-ink);
  font-family: var(--mos-font-body);
}

img {
  display: block;
}

/* セクションは横幅100%、コンテンツのみ max-width で中央寄せ */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 2rem;
}

.section-title {
  font-family: var(--mos-font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- ページローディング画面 ----------
   ヒーロー動画の再生準備が整うまで全画面で表示し、
   poster静止画→動画の切り替わりが見えないようにする（app.jsが閉じる） */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  transition: opacity 0.5s ease;
}

.page-loader img {
  width: clamp(56px, 8vw, 76px);
  height: auto;
  animation: loader-pulse 1.4s ease-in-out infinite;
}

@keyframes loader-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.92);
  }
}

.page-loader--hide {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader img {
    animation: none;
  }
}

/* ---------- sticky header ---------- */

.header-sticky {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--mos-bg);
}

.site-header {
  border-bottom: 1px solid var(--mos-line);
}

.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.05rem;
  gap: 1.5rem;
}

.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo img {
  height: 34px;
  width: auto;
}

.hdr-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hdr-link:hover {
  color: var(--mos-accent);
}

.hdr-desktop {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.header-nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--mos-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  align-items: center;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mos-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--mos-accent);
  color: #fff;
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--mos-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.lang-sep {
  opacity: 0.35;
}

.util {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-decoration: none;
  opacity: 0.45;
  padding: 0.15rem 0.1rem;
  line-height: 1;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.util:hover {
  opacity: 0.8;
}

.util[data-on="true"] {
  opacity: 1;
  color: var(--mos-accent);
}

/* モバイル専用ユーティリティ（お問い合わせ・言語切替・ハンバーガー）
   ≤820pxで常時表示。タップ領域は44px角を確保 */
.hdr-mobile {
  display: none;
  align-items: center;
  gap: 0.1rem;
}

.hdr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: color 0.2s ease;
}

.hdr-icon-btn:hover {
  color: var(--mos-accent);
}

.lang-menu {
  position: relative;
}

.lang-menu-pop {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 76px;
  background: var(--mos-bg);
  border: 1px solid var(--mos-line);
}

/* display:flex がUAの [hidden] { display:none } を上書きしないように明示 */
.lang-menu-pop[hidden] {
  display: none;
}

.lang-menu-item {
  font-family: var(--mos-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.lang-menu-item + .lang-menu-item {
  border-top: 1px solid var(--mos-line);
}

.lang-menu-item[data-on="true"] {
  color: var(--mos-accent);
  opacity: 1;
}

.hdr-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
}

.hdr-mobile-menu {
  border-bottom: 1px solid var(--mos-line);
  padding-block: 1.25rem 1.75rem;
  background: var(--mos-bg);
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--mos-font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn-contact--mobile {
  font-size: 0.75rem;
  padding: 0.7rem 1.2rem;
  margin-top: 1.25rem;
}

@media (max-width: 820px) {
  .hdr-desktop {
    display: none;
  }

  .hdr-mobile {
    display: flex;
  }
}

/* ---------- hero (MV) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* poster画像内の顔の位置（上部・やや右寄り）に合わせ、見切れを防ぐ */
  object-position: 55% 20%;
}

/* 背景動画はカットが切り替わるため中央基準で表示する */
video.hero-image {
  object-position: center;
}

/* テキストのある下部のみ暗くし、顔のある中〜上部は明るさを保つ */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.48) 30%, rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.02) 100%);
}

.hero-content {
  position: relative;
  padding-block: clamp(3.25rem, 8vw, 5rem) clamp(2.5rem, 7vw, 4rem);
  color: #fff;
  /* 明るい背景に重なっても読めるよう、軽いシャドウで文字を補強 */
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* ロゴ・キッカー・タグラインのまとまり。
   width: min-content により最も幅の広い置換要素（=ロゴ画像）が基準幅になり、
   上下のテキストはロゴ幅の中で折り返す（ロゴから飛び出さない） */
.hero-lockup {
  width: min-content;
}

.hero-kicker {
  font-family: var(--mos-font-mono);
  font-size: clamp(0.95rem, 3vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.55;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  /* 明るい背景部分でも読めるようにタイトな暗色ハロを重ねる */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.45);
}

.hero-logo {
  margin: 0 0 0.9rem;
  line-height: 0;
}

.hero-logo img {
  height: clamp(76px, 15vw, 148px);
  width: auto;
}

.hero-tagline {
  font-family: var(--mos-font-display);
  font-weight: 800;
  /* ロゴ幅（高さ×3.15）に収まる上限: フォントサイズ ≒ ロゴ高さ×0.3 */
  font-size: clamp(1.4rem, 4.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-stretch: 125%;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

/* スマホ: ヘッダー + MVでちょうど100vh（1画面）になる高さにする。
   svh対応ブラウザではアドレスバーの伸縮を除いた実表示高さを使う */
@media (max-width: 820px) {
  .hero {
    min-height: calc(100vh - var(--mos-header-height, 64px));
    min-height: calc(100svh - var(--mos-header-height, 64px));
  }
}

/* ---------- live ---------- */

.live {
  background: var(--mos-bg);
  color: var(--mos-ink);
  padding-block: clamp(3rem, 7vw, 4.25rem) clamp(3.25rem, 7.5vw, 4.5rem);
  text-align: center;
  border-bottom: 1px solid var(--mos-line);
}

.live-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--mos-font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mos-accent);
  margin-bottom: 1.1rem;
}

.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mos-accent);
}

.live-title {
  font-family: var(--mos-font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 8.5vw, 3.6rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  font-stretch: 125%;
}

.live-cities {
  font-family: var(--mos-font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 4vw, 1.7rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 34ch;
  margin: 0 auto;
}

.live-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-family: var(--mos-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mos-line);
}

/* ---------- about ---------- */

.about {
  position: relative;
  overflow: hidden;
}

/* 背景はショートハンドの center/cover 指定がモバイルで不安定なため
   ロングハンドで明示する */
.about-bg {
  position: relative;
  min-height: 560px;
  background-color: #0d0d0d;
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.45) 100%),
    url("../images/about_mos.jpg");
  /* 顔の位置（画像の上部15〜38%）が見えるよう、幅ごとに縦位置を調整する。
     画面が広いほど画像が拡大され縦のトリミング量が増えるため、
     広い幅では上寄り・狭い幅では中央寄りにする */
  background-position: 50% 20%;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

@media (max-width: 1600px) {
  .about-bg {
    background-position: 50% 26%;
  }
}

@media (max-width: 1300px) {
  .about-bg {
    background-position: 50% 38%;
  }
}

@media (max-width: 1050px) {
  .about-bg {
    background-position: 50% 50%;
  }
}

/* スマホは横長画像だと顔が見切れるため、縦長のSP用画像に差し替える。
   実績アコーディオンの開閉でセクション高が変わっても背景の見た目が
   一切変わらないよう、常に「画像を等倍（幅100%）で上部に固定し、
   下端を黒(#0d0d0d)へ溶け込ませる」1つの描画に統一する。
   画像より下の領域は background-color の黒
   （133.4vw = SP画像のアスペクト比 1411/1058 での画像の高さ） */
@media (max-width: 820px) {
  .about-bg {
    background-image:
      linear-gradient(0deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 32%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.45) 100%),
      url("../images/about_mos_sp.jpg");
    background-position: center top;
    background-size: 100% 133.4vw, 100% 133.4vw, 100% 133.4vw;
  }
}

.about-inner {
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  max-width: 900px;
  width: 100%;
}

.about-kicker {
  font-family: var(--mos-font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: var(--mos-accent);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.about-title {
  font-family: var(--mos-font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 6.5vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 20ch;
  font-stretch: 125%;
}

.about-lead {
  font-family: var(--mos-font-body);
  line-height: 1.9;
  opacity: 0.85;
  margin: 0 0 0.75rem;
}

.about-sub {
  font-family: var(--mos-font-body);
  line-height: 1.9;
  opacity: 0.65;
  margin: 0 0 2.5rem;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.stat {
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  padding-top: 1.4rem;
}

.stat-value {
  font-family: var(--mos-font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--mos-accent);
  font-stretch: 125%;
}

.stat-desc {
  font-family: var(--mos-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  opacity: 0.8;
  margin-top: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .about-stats {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .stat {
    padding-top: 1.1rem;
  }

  .stat-desc {
    margin-top: 0.6rem;
  }
}

/* ---- about: 経歴アコーディオン（details/summary、JS不要） ---- */

.about-more {
  margin-top: 2.5rem;
  border-top: 2px solid rgba(255, 255, 255, 0.35);
}

.about-more-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mos-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  user-select: none;
  transition: color 0.2s ease;
}

/* Safari のデフォルト三角マーカーを消す */
.about-more-summary::-webkit-details-marker {
  display: none;
}

.about-more-summary:hover {
  color: var(--mos-accent);
}

.about-more-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--mos-accent);
  transition: transform 0.25s ease;
}

.about-more[open] .about-more-icon {
  transform: rotate(45deg);
}

.about-more-body {
  padding: 0.4rem 0 1.4rem;
}

.about-more-highlight {
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  margin: 0 0 1.8rem;
}

.about-more-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem 2.5rem;
}

.about-more-heading {
  font-family: var(--mos-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mos-accent);
  margin: 0 0 0.7rem;
}

.about-more-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.about-more-list li {
  font-family: var(--mos-font-body);
  font-size: 0.82rem;
  line-height: 1.65;
  opacity: 0.85;
  position: relative;
  padding-left: 0.9em;
}

.about-more-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--mos-accent);
}

@media (max-width: 820px) {
  .about-more {
    margin-top: 2rem;
  }

  .about-more-groups {
    grid-template-columns: 1fr;
  }
}

/* ---------- member ---------- */

.member {
  padding-block: clamp(3rem, 7vw, 4.5rem) clamp(3.25rem, 8vw, 5rem);
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 820px) {
  .member-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem;
  }
}

/* MemberCard (mos-ui 原本CSS) */

.mos-member-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mos-member-card__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin: 0 0 0.875rem;
}

.mos-member-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--mos-ease-out);
}

.mos-member-card:hover .mos-member-card__photo img,
.mos-member-card:focus-visible .mos-member-card__photo img {
  transform: scale(1.04);
}

/* 写真とサインの間に敷く薄い黒グラデーション（サインの可読性向上用） */
.mos-member-card__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* メンバー写真の右下に重ねるサイン画像 */
.mos-member-card__photo .mos-member-card__sign {
  position: absolute;
  right: 4%;
  bottom: 3%;
  width: 63%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  /* グラデーションより手前に置く */
  z-index: 1;
  /* 元画像は黒インクのため白に反転し（写真が暗めのため）、
     明るい部分でも読めるよう薄い影を落とす */
  filter: invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
  /* ホバー時のズームはサインには適用しない */
  transform: none !important;
}

.mos-member-card__name {
  font-family: var(--mos-font-display);
  font-size: 1.375rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.02em;
  line-height: 1.2;
  display: inline-block;
  position: relative;
  margin: 0;
}

.mos-member-card__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: var(--mos-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--mos-ease-out);
}

.mos-member-card:hover .mos-member-card__name::after,
.mos-member-card:focus-visible .mos-member-card__name::after {
  transform: scaleX(1);
}

.mos-member-card__part {
  font-family: var(--mos-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--mos-muted);
  margin: 0;
}

/* MemberCard: このページ専用オーバーライド
   （写真 2:3・上寄せ、ホバーのズームと名前下線アニメは無効） */

.member .mos-member-card__photo {
  aspect-ratio: 2 / 3;
}

.member .mos-member-card__photo img {
  object-position: top center;
}

.member .mos-member-card:hover .mos-member-card__photo img,
.member .mos-member-card:focus-visible .mos-member-card__photo img {
  transform: none;
}

.member .mos-member-card__name::after {
  display: none;
}

.mos-sns {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.7rem;
}

.mos-sns a {
  display: inline-flex;
  color: currentColor;
  opacity: 0.75;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.mos-sns a:hover {
  color: var(--mos-accent);
  opacity: 1;
}

.mos-sns svg {
  display: block;
}

/* ---------- music ---------- */

.music {
  background: var(--mos-bg-invert);
  color: var(--mos-ink-invert);
  padding-block: clamp(3rem, 7vw, 4.5rem) clamp(3.25rem, 8vw, 5rem);
}

.music .section-head {
  margin-bottom: 1.75rem;
}

.mtab-bar {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  margin-bottom: 1.5rem;
}

.mtab {
  font-family: var(--mos-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 0 0.6rem;
  border: none;
  border-bottom: 2px solid transparent;
  opacity: 0.55;
  color: inherit;
  background: none;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.mtab[data-on="true"] {
  color: var(--mos-accent);
  opacity: 1;
  border-bottom-color: var(--mos-accent);
}

.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

/* RELEASESは4列（≤820pxでは通常のメディアクエリで2列/1列に戻る） */
.yt-grid--rel {
  grid-template-columns: repeat(4, 1fr);
}

.yt-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.yt-thumb {
  aspect-ratio: 16 / 9;
  background-color: #000;
  background-position: center;
  background-size: cover;
  margin-bottom: 0.75rem;
}

.yt-card-title {
  font-family: var(--mos-font-display);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.yt-card:hover .yt-card-title {
  color: var(--mos-accent);
}

.yt-channel-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.yt-channel-btn,
.media-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mos-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  background: none;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  padding: 0.85rem 1.5rem;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.yt-channel-btn:hover,
.media-more-btn:hover {
  background: var(--mos-accent);
  border-color: var(--mos-accent);
  color: #fff;
}

/* display:inline-flex がUAの [hidden] { display:none } を上書きしないように明示。
   MOREボタンはモバイルで未展開のときだけ表示される */
.media-more-btn[hidden] {
  display: none;
}

.rel-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.rel-jacket {
  aspect-ratio: 1;
  background-color: #000;
  background-position: center;
  background-size: cover;
  margin-bottom: 0.75rem;
}

.rel-card:hover .yt-card-title {
  color: var(--mos-accent);
}

.rel-card-date {
  font-family: var(--mos-font-mono);
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.35rem;
}

/* モバイル(≤820px): 7件目以降を隠し、MOREボタンで全件展開する */
.media-scroll--collapsed .yt-grid > :nth-child(n + 7) {
  display: none;
}

.media-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* デスクトップ: 7件以上あるタブはJSが6件分の高さに制限し、縦スクロールにする */
.media-scroll--active {
  overflow-y: auto;
  padding-right: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mos-accent) #000000;
}

.media-scroll--active::-webkit-scrollbar {
  width: 10px;
}

.media-scroll--active::-webkit-scrollbar-track {
  background: #000000;
}

.media-scroll--active::-webkit-scrollbar-thumb {
  background: var(--mos-accent);
  border: 2px solid #000000;
}

.media-scroll--active::-webkit-scrollbar-thumb:hover {
  background: var(--mos-accent-hover);
}

@media (max-width: 820px) {
  .yt-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem;
  }
}

@media (max-width: 560px) {
  .yt-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ---------- follow ---------- */

.follow {
  padding-block: clamp(3rem, 7vw, 4.5rem) clamp(3.25rem, 8vw, 5rem);
}

.follow-head {
  margin-bottom: 2rem;
}

.follow-sub {
  font-family: var(--mos-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mos-muted);
  margin-top: 0.6rem;
}

.follow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--mos-line);
}

.follow-cell {
  text-decoration: none;
  color: var(--mos-ink);
  padding: 1.6rem 0.5rem 1.4rem;
  text-align: center;
  border-right: 1px solid var(--mos-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.2s ease, background 0.2s ease;
}

.follow-cell--last {
  border-right: none;
}

.follow-cell:hover {
  background: var(--mos-accent);
  color: #fff;
}

.follow-id {
  font-family: var(--mos-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.follow-cell:hover .follow-id {
  opacity: 1;
}

.follow-cell .line-txt {
  fill: var(--mos-bg);
}

.follow-cell:hover .line-txt {
  fill: var(--mos-accent);
}

/* モバイルでは5等分の横並びをやめ、横区切りの縦積みリストにする */
@media (max-width: 820px) {
  .follow-grid {
    grid-template-columns: 1fr;
  }

  .follow-cell {
    flex-direction: row;
    justify-content: center;
    padding: 1.1rem 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--mos-line);
  }

  .follow-cell--last {
    border-bottom: none;
  }
}

/* ---------- CTA: contact / goods ---------- */

.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cta-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  padding: 2.75rem 2.5rem;
  text-decoration: none;
  color: #fff;
}

.cta-tile--contact,
.cta-tile--goods {
  background-color: #0d0d0d;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cta-tile--contact {
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.35) 100%),
    url("../images/bg_contact.jpg");
  /* 4人の顔が見え、左下のテキストと重ならない位置（PC/スマホ共通で検証済み） */
  background-position: center, 30% 55%;
}

/* PC: 少し拡大して顔をテキストから離す
   （拡大率130%がタイルを覆えるのはこの幅以上。狭い幅・スマホはcoverのまま） */
@media (min-width: 1051px) {
  .cta-tile--contact {
    background-size: auto, 130%;
  }
}

.cta-tile--goods {
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.35) 100%),
    url("../images/img_mos_officialonlineshop.jpg");
}

/* スマホ: 横長バナーがcoverだと左右が欠けるため、全体をcontainで表示する。
   バナーの余白は純白のため background-color: #fff と地続きに見える */
@media (max-width: 820px) {
  .cta-tile--goods {
    background-color: #ffffff;
    /* 1層目=グラデーション(全面) / 2層目=バナー画像(contain) */
    background-size: auto, contain;
  }
}

.cta-kicker {
  font-family: var(--mos-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mos-accent);
  margin-bottom: 0.2rem;
}

.cta-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cta-title {
  font-family: var(--mos-font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-stretch: 125%;
}

.cta-arrow {
  display: inline-flex;
  transition: transform 0.25s ease;
}

.cta-tile:hover .cta-arrow {
  transform: translateX(4px);
}

.cta-desc {
  font-family: var(--mos-font-body);
  font-size: 0.92rem;
  line-height: 1.8;
  opacity: 0.85;
  margin: 0.2rem 0 0;
  max-width: 34ch;
}

@media (max-width: 820px) {
  .cta {
    grid-template-columns: 1fr;
  }

  .cta-tile {
    min-height: 320px;
    padding: 2.25rem clamp(1.25rem, 5vw, 2.5rem);
  }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--mos-bg-invert);
  color: var(--mos-ink-invert);
  padding-block: clamp(3rem, 6vw, 4rem) 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.footer-logo-link {
  display: inline-block;
}

.footer-brand img {
  height: 36px;
  width: auto;
  margin-bottom: 0.75rem;
}

.footer-tag {
  font-family: var(--mos-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.footer-heading {
  font-family: var(--mos-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--mos-font-mono);
  font-size: 0.8rem;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
}

.footer-links--accent a {
  color: var(--mos-accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  font-family: var(--mos-font-mono);
  font-size: 0.7rem;
  opacity: 0.6;
}

.footer-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-lang a {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-lang a:hover {
  opacity: 1;
  color: var(--mos-accent);
}

.footer-lang a[data-on="true"] {
  opacity: 1;
  color: var(--mos-accent);
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .mos-member-card__photo img,
  .mos-member-card__name::after,
  .yt-arrow,
  .cta-arrow {
    transition: none;
  }
}