/* ============================================================
   component.css — 部品（c-）
   ============================================================ */

/* --- ロゴ ------------------------------------------------ */
.c-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: opacity var(--dur) var(--ease);
}

.c-logo__mark { flex: none; }

/* 支給ロゴ（PNG・505×220）。ヘッダーは今のロゴの箱の高さに合わせ、フッターは少し大きく（2026-09-14） */
.c-logo__img {
  display: block;
  width: auto;
  /* ロゴは山の印が大きく文字が小さいので、ヘッダーの高さ（1920pxで146px）を変えない範囲で大きめに */
  height: clamp(3.5rem, 4.7vw, 5.625rem);
}
.c-logo__img--footer { height: clamp(3.75rem, 5.73vw, 6.875rem); }

.c-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.c-logo__name {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  letter-spacing: var(--ls-xs);
  transition: color var(--dur) var(--ease);
}

.c-logo__tagline {
  margin-block-start: var(--space-1);
  font-family: var(--font-en);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-62);
  transition: color var(--dur) var(--ease);
}

@media (min-width: 768px) {
  .c-logo__name { font-size: var(--fs-4xl); }
}

/* --- グローバルナビ -------------------------------------- */
.c-nav__link {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-block-end: var(--space-1);
  border-block-end: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.c-nav__link.is-current {
  border-block-end-color: var(--color-accent);
  color: var(--color-accent);
}

.c-nav__en {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-2xl);
}

.c-nav__ja {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-sm);
  color: var(--color-text-62);
}

.c-nav__link--cta {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-line-strong);
  border-block-end-width: 1px;
}

.c-nav__link--cta .c-nav__ja {
  color: var(--color-text-72);
  transition: color var(--dur) var(--ease);
}

/* スマホ：ナビはヘッダーの下に画面いっぱいの黒い面として重ね、開いたときにゆっくり現れる（2026-09-11）。
   ヘッダーは固定追従なので、ヘッダーの直下（100%）から画面の下端までを占める */
.c-nav {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  /* --admin-offset はWordPressの管理バーが出ているときだけ値が入る（layout.css）。無いときは0 */
  height: calc(100svh - 100% - var(--admin-offset, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--gutter) var(--space-10);
  background: var(--color-bg);
  border-block-start: 1px solid var(--color-line);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.75rem;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease), visibility 0s linear 0.55s;
}

.c-nav.is-open {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s, 0s, 0s;
}

/* 項目の並び（横並び）は閉じている間も保つ。開いたときだけにすると、閉じる途中で縦組みに戻って並びが崩れる（2026-09-11）。
   1240px以上は下の @media で元の縦組み・余白に戻す */
.c-nav .c-nav__link {
  flex-direction: row;
  gap: var(--space-3);
  padding-block: var(--space-2);
  opacity: 0;
  translate: 0 -0.375rem;
  transition: opacity 0.45s var(--ease), translate 0.45s var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.c-nav.is-open .c-nav__link { opacity: 1; translate: 0 0; }
/* 項目は上から順に少しずつ遅らせて現れる */
.c-nav.is-open .c-nav__link:nth-child(2) { transition-delay: 0.06s; }
.c-nav.is-open .c-nav__link:nth-child(3) { transition-delay: 0.12s; }
.c-nav.is-open .c-nav__link:nth-child(4) { transition-delay: 0.18s; }
.c-nav.is-open .c-nav__link:nth-child(5) { transition-delay: 0.24s; }
.c-nav.is-open .c-nav__link:nth-child(6) { transition-delay: 0.3s; }
.c-nav.is-open .c-nav__link:nth-child(7) { transition-delay: 0.36s; }
.c-nav.is-open .c-nav__link:nth-child(8) { transition-delay: 0.42s; }
.c-nav.is-open .c-nav__link:nth-child(9) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .c-nav, .c-nav .c-nav__link { transition: none; }
}

@media (min-width: 1240px) {
  .c-nav {
    position: static;
    height: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    /* 9項目（採用情報を足した 2026-10-26）が1240pxで収まるよう、狭い幅だけ間隔を詰める。1540px以上は24pxのまま */
    gap: clamp(var(--space-3), calc((100vw - 1240px) * 0.04 + var(--space-3)), var(--space-6));
    padding: 0;
    background: none;
    border-block-start: 0;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    translate: none;
    transition: none;
  }

  .c-nav .c-nav__link,
  .c-nav.is-open .c-nav__link {
    flex-direction: column;
    gap: var(--space-1);
    padding-block: 0 var(--space-1);
    opacity: 1;
    translate: none;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    transition-delay: 0s;
  }
  .c-nav .c-nav__link--cta,
  .c-nav.is-open .c-nav__link--cta { padding: var(--space-3) var(--space-5); }
}

@media (hover: hover) and (pointer: fine) {
  .c-nav__link:hover { color: var(--color-accent); }
  .c-nav__link--cta:hover { border-color: var(--color-accent); }
  .c-nav__link--cta:hover .c-nav__ja { color: var(--color-accent); }
  /* ロゴは支給の画像（2026-09-14 差し替え）。文字の色ではなく少し薄くする（2026-09-26） */
  .c-logo:hover { opacity: .7; }
  .c-burger:hover { border-color: var(--color-accent); }
}

/* --- ハンバーガー ---------------------------------------- */
.c-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-line-strong);
  background: none;
  margin-inline-start: auto;
}

.c-burger__bar {
  display: block;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* 開いたら×。ボタンの1番目の子は読み上げ用の隠しラベルなので、棒は2〜4番目（2026-09-11 修正） */
.c-burger[aria-expanded="true"] .c-burger__bar:nth-child(2) { transform: translateY(5px) rotate(45deg); }
.c-burger[aria-expanded="true"] .c-burger__bar:nth-child(3) { opacity: 0; }
.c-burger[aria-expanded="true"] .c-burger__bar:nth-child(4) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 1240px) {
  .c-burger { display: none; }
}

/* --- セクションのラベル（PHILOSOPHY など） --------------- */
.c-label {
  font-family: var(--font-en);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
}

.c-label--dark { color: var(--color-accent-deep); }

/* --- 見出し ---------------------------------------------- */
.c-heading {
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
}

.c-heading--sm { font-size: var(--fs-h2-sm); }

.c-rule {
  display: block;
  width: 2.875rem;
  height: 2px;
  background: var(--color-accent);
}

/* 特大英字。文字の中に背景の写真を透かす */
.c-display {
  font-family: var(--font-en);
  font-stretch: 115.5%;
  font-style: italic;
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: 0.82;
  letter-spacing: -0.02em;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .82) 12%, rgb(255 255 255 / .18) 62%, rgb(0 0 0 / .25) 100%),
    url("../images/index/philosophy-bg.webp") center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.c-display__text { display: inline-block; }

/* 「WORKS」「BUILD WITH CARE.」は支給のSVG（2026-09-11 園田さん指示）。
   見出しの箱の高さは文字のときと同じにして、下の配置を動かさない。
   カンプ実測（1920px）：WORKS 文字は上端1383・高さ116／BUILD WITH CARE. は幅1400・上端3076 */
.c-display--img {
  display: flex;
  align-items: flex-start;
  /* 文字のときの箱：高さ195px・幅981px（1920px）。同じ大きさを保って補足文とカードの位置を動かさない */
  height: calc(var(--fs-display) * 0.722);
  min-width: 51.1vw;
  background: none;
  color: inherit;
}
.c-display__img {
  display: block;
  width: auto;
  /* カンプ実測（暗い部分まで含めて）：文字は上端1382・下端1547（高さ165px）・左0〜1010。下端がカードの上端に接する（2026-09-11） */
  height: clamp(3.5rem, 8.6vw, 10.3125rem);
  margin-block-start: clamp(0.125rem, 0.42vw, 0.5rem);
  margin-inline-start: clamp(0.25rem, 0.9vw, 1.125rem);
}
.c-display--cta.c-display--img { height: var(--fs-cta); min-width: 0; }
.c-display__img--cta {
  width: min(72.9vw, calc(100vw - 2 * var(--gutter)));
  height: auto;
  margin-block-start: clamp(0.125rem, 0.26vw, 0.3125rem);
  margin-inline-start: 0;
}

.c-display--cta {
  font-size: var(--fs-cta);
  /* 斜体は右にはみ出す。その分を戻さないとボタンが下の行へ落ちる */
  margin-inline-end: -0.378em;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  background: linear-gradient(180deg, var(--color-shine-from) 25%, var(--color-shine-to-alt) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- リンクとボタン -------------------------------------- */
.c-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-xl);
}

/* カンプはどのページも「線」ではなく矢じりの付いた矢印。
   実測（works 1920px）：軸1759-1806・矢じり6px幅×10px高、線の太さ1px（2026-09-08） */
.c-arrow-link__line {
  position: relative;
  display: block;
  width: clamp(1.5rem, 2.7vw, 3.25rem);
  height: 1px;
  background: currentColor;
  transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.c-arrow-link__line::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  width: clamp(0.3125rem, 0.417vw, 0.5rem);
  height: clamp(0.3125rem, 0.417vw, 0.5rem);
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: translate(0, -50%) rotate(45deg);
}

.c-arrow-link__arrow {
  flex: none;
  color: var(--color-accent);
  transition: transform var(--dur) var(--ease);
}

.c-btn {
  display: block;
  padding: 2.125rem 3.25rem;
  border: 1px solid var(--color-line-strong);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.c-btn__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.46vw, 1.75rem);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-xl);
}

.c-btn__note {
  display: block;
  margin-block-start: var(--space-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-lg);
  color: var(--color-text-62);
}

.c-btn--accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-9);
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-sm);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.c-btn--accent svg {
  flex: none;
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .c-arrow-link:hover { color: var(--color-accent); }
  .c-arrow-link:hover .c-arrow-link__line { width: 4.5rem; }
  .c-arrow-link:hover .c-arrow-link__arrow { transform: translateX(var(--space-2)); }
  .c-btn--line:hover .c-arrow-link__line { transform: translateX(var(--space-2)); }
  .c-btn:hover { border-color: var(--color-accent); background: var(--color-accent-wash); }
  .c-btn--accent:hover { color: var(--color-text); }
  .c-btn--accent:hover svg { transform: translateX(var(--space-2)); }
}

/* ロゴのマークだけブランド色を当てる（SVGに色を直書きしない） */
.c-logo__mark { color: var(--color-logo); }