/* ==========================================================================
   components.css — 再利用パーツ
   破れ紙エッジ / ノイズ / ヘッダー / ボタン / カード / カルーセル / フッター
   ========================================================================== */

/* --- 破れ紙エッジ ------------------------------------------------------- */
/* セクションの上端・下端に絶対配置し、隣接セクションの色で塗り潰す。
   HTML 側では <div class="tear tear--top" data-fill="light"> の形で使う。 */
.tear {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--tear-height);
  z-index: var(--z-tear);
  pointer-events: none;
  line-height: 0;
}

.tear--top {
  top: 0;
}

.tear--bottom {
  bottom: 0;
}

.tear svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 塗り色バリエーション。隣接するセクションの背景色を指定する。 */
.tear__fill--light {
  fill: var(--color-panel-light);
}
.tear__fill--dark {
  fill: var(--color-bg);
}
.tear__fill--deep {
  fill: var(--color-bg-deep);
}

/* --- 粒状ノイズ（紙/フィルムの質感） ------------------------------------- */
/* 画像を使わず repeating-gradient の干渉で微細なムラを作る。 */
.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      101deg,
      oklch(1 0 0 / 0.014) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      13deg,
      oklch(0 0 0 / 0.022) 0 1px,
      transparent 1px 4px
    );
}

.section--light.noise::after {
  background-image:
    repeating-linear-gradient(
      101deg,
      oklch(0 0 0 / 0.020) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      13deg,
      oklch(0 0 0 / 0.014) 0 1px,
      transparent 1px 4px
    );
}

/* --- ヘッダー ---------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-mid) var(--ease-out);
}

/* スクロール後に背景を敷く（nav.js が付与） */
.header.is-scrolled {
  background-color: var(--color-overlay);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}

/* ドロワーを開いている間はヘッダーを最前面に出し、
   ×ボタン（トグル）がドロワー背景に埋もれないようにする。 */
.header.is-nav-open {
  z-index: calc(var(--z-overlay) + 1);
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.header__brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  /* ロゴは円形。四隅が透明なPNGだが、差し替え時の崩れ防止に円形を保証する */
  border-radius: 50%;
  object-fit: contain;
}

.header__nav {
  display: none;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-md), 2.4vw, var(--space-lg));
}

.header__nav-link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}

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

/* アクティブは白統一のなかでアクセントRedのみで示す */
.header__nav-link[aria-current="page"] {
  color: var(--color-accent);
}

.header__nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
}

/* ハンバーガー */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: calc(var(--space-xs) * -1);
  z-index: var(--z-overlay);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--dur-mid) var(--ease-out);
}

.nav-toggle__bars::before {
  top: -7px;
}
.nav-toggle__bars::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* モバイルのドロワー */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  background-color: var(--color-bg-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out),
    visibility var(--dur-mid) var(--ease-out);
}

.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-drawer__list {
  display: grid;
  gap: var(--space-md);
  text-align: center;
}

.nav-drawer__link {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.nav-drawer__link[aria-current="page"] {
  color: var(--color-accent);
}

.nav-drawer__en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  color: var(--color-text-faint);
}

/* --- ボタン / リンク --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.9rem 1.9rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--weight-black);
  letter-spacing: 0.12em;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.btn--primary:hover {
  background-color: var(--color-accent-strong);
}

.btn--ghost {
  border-color: var(--color-line);
  color: var(--color-text);
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* VIEW MORE >>> — 参考サイトの矢印表現。絵文字は使わない。 */
.view-more {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-en);
  font-size: 0.8125rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.section--light .view-more {
  color: var(--color-text-on-light);
}

.view-more:hover {
  color: var(--color-accent);
}

.view-more__chevrons {
  letter-spacing: -0.05em;
  color: var(--color-accent);
  transition: transform var(--dur-mid) var(--ease-out);
}

.view-more:hover .view-more__chevrons {
  transform: translateX(5px);
}

/* 未実装リンクのプレースホルダー（死んだ href="#" を作らない） */
.link-placeholder {
  position: relative;
  cursor: not-allowed;
  color: var(--color-text-faint);
}

.link-placeholder::after {
  content: "準備中";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  translate: -50% 0;
  padding: 0.25em 0.7em;
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  white-space: nowrap;
  background-color: var(--color-bg-raise);
  color: var(--color-text);
  border: 1px solid var(--color-line);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.link-placeholder:hover::after {
  opacity: 1;
}

/* --- プレースホルダー画像枠 -------------------------------------------- */
/* 本番画像に差し替えるまでの仮の面。<img> に置換する箇所。
   写真が入るまでの間も密度が出るよう、ドキュメンタリー番組の
   サムネ（人影シルエット＋テロップ帯）を模した見た目にしている。 */
.ph {
  position: relative;
  display: grid;
  place-items: end start;
  overflow: hidden;
  background-color: var(--color-bg-raise);
  background-image:
    /* 人影のシルエット（頭＋肩） */
    radial-gradient(
      circle at 50% 34%,
      oklch(0.30 0.010 260) 0 13%,
      transparent 13.5%
    ),
    radial-gradient(
      ellipse 34% 30% at 50% 82%,
      oklch(0.30 0.010 260) 0 60%,
      transparent 61%
    ),
    /* 中央から広がる光 */
    radial-gradient(
      ellipse 78% 70% at 50% 45%,
      oklch(0.34 0.030 40 / 0.55) 0%,
      transparent 72%
    ),
    /* 走査線 */
    repeating-linear-gradient(
      0deg,
      oklch(0 0 0 / 0.13) 0 2px,
      transparent 2px 5px
    ),
    linear-gradient(
      168deg,
      oklch(0.26 0.010 260) 0%,
      oklch(0.14 0.006 260) 100%
    );
  /* 写真が未登録のときに背景へ溶けないよう、この枠だけは残す */
  border: 1px solid var(--color-line);
  color: var(--color-text);
}

/* 下部のテロップ帯（参考サイトの赤テロップ相当） */
.ph__label {
  position: relative;
  width: 100%;
  padding: 0.5em 0.75em;
  background-color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text);
  box-shadow: 0 -1px 0 oklch(0 0 0 / 0.4);
}

/* 円形プレースホルダーはテロップ帯を出さず中央寄せにする */
.ph--circle {
  place-items: center;
  border-radius: 50%;
}

.ph--circle .ph__label {
  width: auto;
  text-align: center;
  background-color: oklch(0 0 0 / 0.55);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
}

.ph--16x9 {
  aspect-ratio: 16 / 9;
}
.ph--4x5 {
  aspect-ratio: 4 / 5;
}
.ph--1x1 {
  aspect-ratio: 1 / 1;
}
.ph--3x2 {
  aspect-ratio: 3 / 2;
}

/* 管理画面で実写真を当てた枠。
   プレースホルダー（.ph）と同じ場所・同じ比率に収まるようにする。
   比率は .ph--16x9 などを併用して指定するため、ここでは持たない。 */
/* 管理画面で実写真を当てた枠。
   高さは比率クラス（.ph--16x9 等）の aspect-ratio に決めさせる。

   【注意】ここに height を書いてはいけない。
   height を指定すると aspect-ratio より優先され、
   親の高さに引き伸ばされて比率が崩れる（＝画像が切れる）。 */
.ph-img {
  display: block;
  width: 100%;
  object-fit: cover;
  background-color: var(--color-bg-raise);
}

/* --- カルーセル -------------------------------------------------------- */
.carousel {
  position: relative;
}

/* 横スクロールは必ずこの内側に閉じ込める */
.carousel__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: var(--space-2xs);
  /* ガター分を食い込ませて画面端まで流す */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* padding-inline を無視してスナップすると先頭カードが画面端に
     貼り付くため、スナップ位置もガター分ずらす。 */
  scroll-padding-inline: var(--gutter);
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.section--light .carousel__btn {
  border-color: var(--color-line-light);
  color: var(--color-text-on-light);
}

.carousel__btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.carousel__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel__btn svg {
  width: 20px;
  height: 20px;
}

/* --- 動画カード -------------------------------------------------------- */
.video-card {
  display: flex;
  flex-direction: column;
  width: min(78vw, 340px);
  background-color: var(--color-bg-raise);
  transition: background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}

.video-card:hover {
  background-color: var(--color-bg-hover);
  transform: translateY(-4px);
}

.video-card__thumb {
  position: relative;
}

/* 実サムネイル（PHP経由でYouTubeから取得した画像）。
   プレースホルダー(.ph)と同じ比率・振る舞いに揃える。 */
.video-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-bg-raise);
}

.video-card__badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.7em;
  background-color: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-wide);
}

.video-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-text);
}

.video-card__body {
  padding: var(--space-md);
}

.video-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
}

.video-card__views {
  color: var(--color-accent-2);
}

.video-card__title {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* --- メンバーカード ---------------------------------------------------- */
.member-card {
  width: min(42vw, 240px);
  background-color: var(--color-bg-deep);
  padding: var(--space-sm);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.member-card:hover {
  background-color: var(--color-bg-raise);
}

.member-card__name {
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
}

/*
 * 個別ページを持つメンバーだけ氏名がリンクになる。
 * カード全面を覆う手法は使わない（同じカード内にある
 * 出演回サムネの YouTube リンクを潰してしまうため）。
 */
.member-card__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

.member-card__link:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/*
 * 写真も同じ個別ページへのリンクにする。
 * 氏名リンクと行き先が同じなので、キーボード操作と読み上げでは
 * 二重に拾われないよう除外している（tabindex="-1" / aria-hidden）。
 */
.member-card__thumb-link {
  display: block;
  overflow: hidden;
}

.member-card__thumb-link .ph,
.member-card__thumb-link .ph-img {
  transition: transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.member-card__thumb-link:hover .ph,
.member-card__thumb-link:hover .ph-img {
  transform: scale(1.04);
  opacity: 0.88;
}

/* 写真にホバーしたら氏名も連動して赤くする（同じ行き先だと示す） */
.member-card:has(.member-card__thumb-link:hover) .member-card__link {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.member-card__role {
  margin-top: var(--space-2xs);
  font-size: var(--fs-label);
  font-family: var(--font-en);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* 出演エピソードのサムネ列。
   管理画面で動画を紐づけたメンバーにだけ出る（未設定なら要素ごと無い）。 */
.member-card__eps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  list-style: none;
}

.member-card__ep {
  /* 3列に収める。gap のぶんを引いて横幅を合わせる */
  flex: 0 0 calc((100% - var(--space-2xs) * 2) / 3);
}

.member-card__ep a {
  display: block;
  border-radius: 3px;
  overflow: hidden;
  outline-offset: 2px;
}

.member-card__ep img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-bg-raise);
  transition: opacity var(--dur-fast, 0.18s) ease;
}

.member-card__ep a:hover img {
  opacity: 0.72;
}

/* --- フッター ---------------------------------------------------------- */
.footer {
  position: relative;
  background-color: var(--color-bg-deep);
  padding-top: calc(var(--space-section) * 0.8);
  padding-bottom: var(--space-xl);
  overflow: hidden;
}

.footer__inner {
  display: grid;
  gap: var(--space-2xl);
}

.footer__nav-list {
  display: grid;
  gap: var(--space-sm);
}

.footer__nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}

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

.footer__nav-ja {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-faint);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--color-line);
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-wide);
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.footer__social-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.footer__company {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--color-text-faint);
}

.footer__company dt {
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.footer__mark {
  position: absolute;
  right: calc(var(--gutter) * -0.5);
  bottom: calc(var(--space-lg) * -1);
  width: clamp(180px, 42vw, 340px);
  height: auto;
  /* 以前は線画SVGだったので0.09。赤ベタの円になり面積が重くなったため下げている */
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
}

/* --- 埋め込みフォーム（HubSpot） ---------------------------------------- */
/* 注意: このフォームは inline DOM ではなく <iframe class="hs-form-iframe">
   として描画されるため、入力欄・ラベル・送信ボタンの見た目はここでは変えられない
   （CSSはiframeの境界を越えない）。
   フォーム内部の配色は assets/js/hubspot-theme.js が
   iframe内へ <style> を注入して当てている。
   ここで指定できるのは iframe を包む枠の側だけ。 */
.form-embed {
  max-width: 34rem;
  margin-top: var(--space-xl);
}

/* HubSpotのiframeは幅をインライン属性で持つため念のため揃える */
.form-embed .hs-form-iframe {
  width: 100%;
  border: 0;
}

.form-embed__fallback {
  padding: var(--space-md);
  background-color: var(--color-bg-raise);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.form-embed__fallback a {
  color: var(--color-accent);
  text-decoration: underline;
}


/* --- ブレークポイント --------------------------------------------------- */
@media (min-width: 640px) {
  .member-card {
    width: 220px;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .header__nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  /* 参考サイトに合わせ、3枚を大きく見せて4枚目を見切れさせる
     （横スクロールできることを画面上で示す）。 */
  .video-card {
    width: calc((100vw - var(--gutter) * 2 - var(--space-md) * 2) / 3.25);
  }
}