/* /brands/ 専用スタイル（共通 style.css には依存しない）
   配色は AETEL 正式ロゴ（#e71c49 → #ff3b66 のレッド＋ホワイト）に合わせ、
   落ち着いたダークネイビーを基調にレッドはアクセントのみに使う */
:root {
  --bg: #0d1420;
  --bg-2: #111c2b;
  --surface: #192535;
  --text: #f3f6fa;
  --sub: #b6c2d1;
  --muted: #8593a6;
  --line: rgba(182, 194, 209, .16);
  --red: #e71c49;
  /* 暗背景上の小さな文字・アイコン用（ロゴのレッドを明るくしたトーン。コントラスト4.5:1以上） */
  --accent: #f25c7a;
  --wrap: 1600px;
  --gutter: clamp(20px, 3.4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure, h1, h2, h3, p { margin: 0; }

.wrap { width: min(calc(100% - var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.nw { display: inline-block; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--text); color: var(--bg); border-radius: 6px; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--red); }

/* ---------- ロゴ＋社名（ヘッダー・フッター共通） ---------- */
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup-mark { width: 36px; height: 36px; }
.lockup-text strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; }
.lockup-text span { display: block; color: var(--sub); font-size: 11px; letter-spacing: .08em; line-height: 1.5; }

/* ---------- Header ---------- */
.bh {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 20, 32, .86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.bh.is-scrolled { border-bottom-color: var(--line); }
.bh-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.bh-nav { display: flex; gap: 32px; }
.bh-nav a {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease;
}
.bh-nav a:hover { color: var(--text); }

/* ---------- section heads ---------- */
.sec-head { margin-bottom: 40px; }
.sec-title {
  margin-top: 18px;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* ---------- 2. Brand wall（同寸グリッド） ---------- */
.wall { padding: clamp(48px, 5vw, 80px) 0 clamp(72px, 8vw, 128px); }
.wall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 48px) clamp(16px, 1.8vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile { display: block; color: var(--text); text-decoration: none; }
.tile-media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-2);
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover .tile-media img { transform: scale(1.035); }
.tile-meta { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.tile-logo { flex: none; width: 36px; height: 36px; border-radius: 9px; object-fit: contain; background: #fff; }
.tile-text { flex: 1; min-width: 0; }
.tile-name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  transition: color .2s ease;
}
.tile-cat { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.tile-num { flex: none; align-self: flex-start; color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile:hover .tile-name { color: var(--accent); }

/* ---------- 3. Brand details ---------- */
.detail { padding: clamp(24px, 3vw, 48px) 0 clamp(96px, 10vw, 160px); background: var(--bg-2); border-top: 1px solid var(--line); }
.bf {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: center;
  padding-top: clamp(72px, 8vw, 128px);
}
.bf--rev { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.bf--rev .bf-media { order: 2; }
.bf-media { position: relative; padding-bottom: 12%; }
.bf-screen {
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -48px rgba(0, 0, 0, .7);
}
.bf-screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.bf-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  overflow: hidden;
  border-radius: 8px;
  outline: 6px solid var(--bg-2);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
}
.bf--rev .bf-photo { right: auto; left: 0; }
.bf-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bf-num { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.bf-num span { margin-left: 12px; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.bf-name {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.25;
}
.bf-name img { flex: none; width: 48px; height: 48px; border-radius: 11px; object-fit: contain; background: #fff; }
.bf-desc { max-width: 30em; margin-top: 20px; color: var(--sub); font-size: 15px; line-height: 1.95; word-break: auto-phrase; text-wrap: pretty; }
.bf-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(243, 246, 250, .4);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.bf-link svg { width: 14px; height: 14px; color: var(--accent); transition: transform .2s ease; }
.bf-domain { color: var(--muted); font-size: 12px; font-weight: 500; }
.bf-link:hover { color: var(--accent); border-color: var(--accent); }
.bf-link:hover svg { transform: translate(2px, -2px); }

/* ---------- 4. Company ---------- */
.company { padding: clamp(80px, 9vw, 136px) 0; border-top: 1px solid var(--line); }
.company-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 6vw, 112px);
  align-items: start;
}
.company-title { display: flex; align-items: center; gap: 20px; margin-top: 24px; font-weight: 400; }
.company-title img { flex: none; width: 56px; height: 56px; }
.company-en { display: block; font-size: clamp(40px, 4vw, 60px); font-weight: 800; line-height: 1; letter-spacing: .04em; }
.company-ja { display: block; margin-top: 10px; color: var(--sub); font-size: 15px; font-weight: 500; letter-spacing: .24em; }
.company-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}
.company-more svg { width: 16px; height: 16px; color: var(--accent); transition: transform .2s ease; }
.company-more:hover { color: var(--accent); }
.company-more:hover svg { transform: translateX(3px); }
.company-list { margin: 0; border-top: 1px solid var(--line); }
.company-list > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.company-list dt { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.company-list dd { margin: 0; font-size: 15px; line-height: 1.8; }

/* ---------- 5. Footer ---------- */
.bfoot { padding: 48px 0 40px; background: var(--bg-2); border-top: 1px solid var(--line); }
.bfoot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.bfoot-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.bfoot-nav a { color: var(--sub); font-size: 13px; text-decoration: none; transition: color .2s ease; }
.bfoot-nav a:hover { color: var(--text); }
.bfoot-copy { width: 100%; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .04em; }

/* ---------- motion（JS有効時のみの控えめなフェードアップ） ---------- */
.js .fx { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .fx.is-in { opacity: 1; transform: none; }
.js .wall-grid > li.fx:nth-child(3n + 2) { transition-delay: .08s; }
.js .wall-grid > li.fx:nth-child(3n) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fx { opacity: 1; transform: none; transition: none; }
  .tile-media img, .bf-link svg, .company-more svg { transition: none; }
  .tile:hover .tile-media img { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .wall-grid > li.fx:nth-child(n) { transition-delay: 0s; }
  .js .wall-grid > li.fx:nth-child(2n) { transition-delay: .08s; }
  .bf, .bf--rev { grid-template-columns: 1fr; gap: 36px; }
  .bf--rev .bf-media { order: 0; }
  .bf--rev .bf-photo { right: 0; left: auto; }
  .company-inner { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 72px; }
  .bh-inner { height: 64px; }
  .bh-nav { gap: 18px; }
  .bh-nav a { font-size: 11px; letter-spacing: .12em; }
  .sec-head { margin-bottom: 32px; }
  .wall-grid { gap: 28px 12px; }
  .tile-media { border-radius: 8px; }
  .tile-meta { gap: 10px; margin-top: 12px; }
  .tile-logo { width: 28px; height: 28px; border-radius: 7px; }
  .tile-name { font-size: 15px; }
  .tile-cat { font-size: 9.5px; letter-spacing: .12em; }
  .tile-num { display: none; }
  .bf-photo { width: 34%; outline-width: 4px; }
  .bf-name { gap: 12px; }
  .bf-name img { width: 40px; height: 40px; border-radius: 9px; }
  .company-title img { width: 44px; height: 44px; }
  .company-list > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}