/* 謙信グループ HP theme.css(design.md の値)。黒基調の初期案 */
:root {
  --color-bg: #1A1A1A;
  --color-bg-alt: #232323;
  --color-surface: #2C2C2C;
  --color-surface-hover: #3A3A3A;
  --color-line: #4A4A4A;
  --color-text: #FFFFFF;
  --color-text-sub: #B8B8B8;
  --color-accent: #D8BD86; /* ロゴの金(スクショから平均 #DDC38B)に合わせた */
  --color-header: rgba(26, 26, 26, .92);
  --color-giant: rgba(255, 255, 255, .06);
  --stripe: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 6px);
  --overlay: rgba(0, 0, 0, .55);
  --photo-filter: grayscale(.35) brightness(.85);

  /* 2026-10-01 先方の要望で高級感のある書体へ: 見出し=Shippori Mincho、英字=Cinzel、本文=Zen Kaku Gothic New */
  --font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-head: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-en: "Cinzel", "Shippori Mincho", serif;
  --fw-head: 700;
  --fw-display: 700;
  --fw-en: 700;
  --ls-head: .1em;

  --fs-display: clamp(34px, 8.4vw, 64px);
  --fs-giant: clamp(56px, 14vw, 160px);
  --fs-page: clamp(28px, 6.4vw, 44px);
  --fs-h1: clamp(16px, 3.6vw, 20px);
  --fs-h2: clamp(22px, 4.6vw, 30px);
  --fs-label: 12px;
  --fs-h3: clamp(17px, 3.8vw, 20px);
  --fs-number: clamp(30px, 8vw, 54px);
  --fs-body: 15px;
  --fs-small: 12px;

  --width-content: 1040px;
  --space-page: 20px;
  --space-section: clamp(72px, 12vw, 140px);
  --space-block: clamp(32px, 6vw, 56px);
  --space-grid: clamp(12px, 2vw, 24px);
  --header-h: 56px;
  --radius: 4px;
}
@media (min-width: 1024px) {
  :root { --fs-body: 16px; --space-page: 40px; --header-h: 64px; }
}

/* ---------- トップ: メインビジュアル(写真4枚のずらし配置) ---------- */
.mv { position: relative; overflow: hidden; padding: calc(var(--header-h) + 24px) 0 56px; background: var(--stripe), var(--color-bg); }
.mv__photos { position: relative; height: 92vw; max-height: 520px; margin-inline: var(--space-page); }
.mv__photo { position: absolute; overflow: hidden; border-radius: var(--radius); }
.mv__photo img { width: 100%; height: 100%; object-fit: cover; }
.mv__photo--1 { left: 0; top: 0; width: 58%; aspect-ratio: 4 / 3; }
.mv__photo--2 { right: 0; top: 12%; width: 36%; aspect-ratio: 4 / 5; }
.mv__photo--3 { left: 8%; bottom: 4%; width: 44%; aspect-ratio: 3 / 2; }
.mv__photo--4 { right: 6%; bottom: 0; width: 38%; aspect-ratio: 1; }
.mv__copy { position: relative; z-index: 1; margin-top: -40px; }
.mv__title { font-family: var(--font-head); font-size: var(--fs-display); font-weight: var(--fw-display); line-height: 1.4; letter-spacing: .14em; word-break: keep-all; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); }
.mv__title small { display: block; margin-top: 20px; font-size: 15px; font-weight: 700; letter-spacing: .4em; color: var(--color-accent); text-shadow: none; }
.mv__sub { word-break: keep-all; margin-top: 12px; font-size: 12px; color: var(--color-text-sub); letter-spacing: .1em; }
.mv .giant { left: -2vw; top: calc(var(--header-h) + 8px); }
.js .mv__photo { opacity: 0; transform: translateY(16px); animation: mv-in .8s ease-out forwards; }
.js .mv__photo--2 { animation-delay: .15s; }
.js .mv__photo--3 { animation-delay: .3s; }
.js .mv__photo--4 { animation-delay: .45s; }
@keyframes mv-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .mv__photo { animation: none; opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .mv { min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: 80px; }
  .mv__photos { position: absolute; right: var(--space-page); top: calc(var(--header-h) + 32px); bottom: 48px; width: 58%; height: auto; max-height: none; margin: 0; }
  .mv__copy { margin-top: 0; }
  .mv .giant { top: calc(var(--header-h) + 24px); left: 2vw; }
}

/* ---------- トップ: 理念 ---------- */
.philo { position: relative; overflow: hidden; text-align: center; }
.philo .giant { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.philo__text { margin-top: var(--space-block); display: grid; gap: 4px; word-break: keep-all; }
.philo .btn-row { display: flex; justify-content: center; }

/* ---------- 書体の調整(黒と金に合う落ち着いた見せ方)---------- */
body { letter-spacing: .05em; line-height: 2; }
.label { letter-spacing: .32em; }
.page-head__en, .footer__contact, .giant, .side-en span { font-weight: 400; letter-spacing: .12em; }
.page-head__title { color: var(--color-accent); }
.philo-word { letter-spacing: .24em; }
.number__value { font-weight: 400; }
.cta__tel { letter-spacing: .1em; }
.card__en, .step::before, .drawer a small { letter-spacing: .22em; }
.btn { letter-spacing: .1em; }

/* ---------- ビジョン ---------- */
.vision { background: var(--stripe), var(--color-bg); border-block: 1px solid var(--color-line); text-align: center; }
.vision__body { max-width: 44em; margin-inline: auto; line-height: 2.2; }
.vision__body p + p { margin-top: 1.8em; }
.vision__lead { color: var(--color-text-sub); }
.vision__key { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 6vw, 40px); line-height: 1.8; letter-spacing: .14em; white-space: nowrap; color: var(--color-accent); margin-block: 32px; }
.vision__body .vision__key { margin-block: 40px; }
.vision--teaser .btn-row { display: flex; justify-content: center; }