/* ==========================================================================
   sub-page.css — 下層ページ共通スタイル
   対象: /company/ を皮切りに下層7ページ全て
   前提: base.css / layout.css / components.css が読み込み済みであること
   設計言語: 紙白・墨・朱・明朝・細罫線（C3 TOPと同一デザインシステム）
   ========================================================================== */

/* --------------------------------------------------------------------------
   C3 デザイントークン（c3-top.css と同値。全ページC3化後 base.css に統合予定）
   -------------------------------------------------------------------------- */
:root {
  --c3-bg:          #fafaf8;
  --c3-hover-bg:    #ededeb; /* --c3-bg + --c3-rule-faint(6%) の合成値 */
  --c3-ink:         #1a1a1a;
  --c3-vermilion:   #B3424A;
  --c3-rule:        rgba(26,26,26,.22);
  --c3-rule-light:  rgba(26,26,26,.12);
  --c3-rule-faint:  rgba(26,26,26,.06);
  --c3-text-muted:  rgba(26,26,26,.55);
  --c3-text-body:   rgba(26,26,26,.82);
  --c3-font-serif:  'Noto Serif JP', serif;
  --c3-font-en:     'Inter', sans-serif;
  --c3-container:   1200px;
  --c3-header-h:    64px;
  --c3-dark-bg:     #1a1a1a;
  --c3-dark-text:   #fafaf8;
  --c3-dark-rule:   rgba(250,250,248,.2);
  --c3-dark-body:   rgba(250,250,248,.85);
  --c3-chamfer:     polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
}

/* --------------------------------------------------------------------------
   ページ基盤
   -------------------------------------------------------------------------- */
.c3-page {
  background-color: var(--c3-bg);
  color: var(--c3-ink);
}

/* --------------------------------------------------------------------------
   下層ラッパー（c3-wrap と同構造。サブページ用クラス名）
   -------------------------------------------------------------------------- */
.sub-wrap {
  position: relative;
  max-width: var(--c3-container);
  margin: 0 auto;
  border-left:  1px solid var(--c3-rule);
  border-right: 1px solid var(--c3-rule);
}

/* 補助グリッド縦線（25%/50%/75%） */
.sub-col-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c3-rule-faint);
  pointer-events: none;
}
.sub-col-guide--25 { left: 25%; display: none; }
.sub-col-guide--50 { left: 50%; }
.sub-col-guide--75 { left: 75%; display: none; }

/* --------------------------------------------------------------------------
   ヘッダー（c3-top.css の .c3-header と共通 — ファイル分離で重複定義）
   -------------------------------------------------------------------------- */
.c3-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--c3-bg);
  border-bottom: 1px solid var(--c3-rule);
  height: var(--c3-header-h);
}
.c3-header__inner {
  max-width: var(--c3-container);
  margin: 0 auto;
  padding: 0 48px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.c3-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.c3-header__logo-img { height: 28px; width: auto; display: block; }

.c3-header__nav { display: none; }
.c3-header__nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}
.c3-header__nav-link {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--c3-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
  position: relative;
}
.c3-header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c3-vermilion);
  transition: width .3s ease;
}
.c3-header__nav-link:hover { color: var(--c3-vermilion); }
.c3-header__nav-link:hover::after { width: 100%; }

.c3-header__cta {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: .1em;
  white-space: nowrap;
  background: var(--c3-ink);
  color: var(--c3-bg);
  border-bottom: 2px solid var(--c3-vermilion);
  padding: 10px 20px;
  text-decoration: none;
  transition: opacity .25s ease;
  flex-shrink: 0;
  clip-path: var(--c3-chamfer);
}
.c3-header__cta:hover { opacity: .82; }

.c3-header__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px 12px;
  flex-shrink: 0;
}
.c3-header__hamburger-bar {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--c3-ink);
}

/* --------------------------------------------------------------------------
   ドロワー
   -------------------------------------------------------------------------- */
.c3-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.c3-drawer[aria-hidden="false"] { pointer-events: auto; }
.c3-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,.4);
  opacity: 0;
  transition: opacity .3s ease;
}
.c3-drawer[aria-hidden="false"] .c3-drawer__overlay { opacity: 1; }
.c3-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--c3-bg);
  border-left: 1px solid var(--c3-rule);
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  padding-top: var(--c3-header-h);
}
.c3-drawer[aria-hidden="false"] .c3-drawer__panel { transform: translateX(0); }

.c3-drawer__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
}
.c3-drawer__close span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--c3-ink);
  position: absolute;
  top: 50%;
  left: 50%;
}
.c3-drawer__close span:first-child  { transform: translate(-50%) rotate(45deg); }
.c3-drawer__close span:last-child   { transform: translate(-50%) rotate(-45deg); }

.c3-drawer__nav { padding: 8px 0; }
.c3-drawer__nav-list { list-style: none; }
.c3-drawer__nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--c3-rule-light);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--c3-ink);
  text-decoration: none;
}
.c3-drawer__nav-link::before {
  content: '';
  display: block;
  width: 14px;
  height: 1px;
  background: var(--c3-rule);
  flex-shrink: 0;
}
.c3-drawer__cta { padding: 24px; margin-top: auto; }
.c3-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: .1em;
  background: var(--c3-ink);
  color: var(--c3-bg);
  border-bottom: 2px solid var(--c3-vermilion);
  padding: 14px 24px;
  text-decoration: none;
  transition: opacity .25s ease;
  clip-path: var(--c3-chamfer);
}
.c3-btn--full { display: flex; width: 100%; }
.c3-btn--primary:hover { opacity: .82; }

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.c3-footer {
  position: relative;
  background: var(--c3-bg);
}
.c3-footer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--c3-rule-faint);
  pointer-events: none;
}
.c3-footer__inner {
  max-width: var(--c3-container);
  margin: 0 auto;
  padding: 56px 48px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  border-left:  1px solid var(--c3-rule);
  border-right: 1px solid var(--c3-rule);
}
.c3-footer__logo-img { height: 24px; width: auto; display: block; }
.c3-footer__nav-list {
  list-style: none;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.c3-footer__nav-link {
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(26,26,26,.7);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.c3-footer__nav-link:hover { color: var(--c3-ink); }

.c3-footer__rule {
  max-width: var(--c3-container);
  margin: 0 auto;
  height: 1px;
  background: var(--c3-rule-light);
  border-left:  1px solid var(--c3-rule);
  border-right: 1px solid var(--c3-rule);
}
.c3-footer__bottom {
  max-width: var(--c3-container);
  margin: 0 auto;
  padding: 20px 48px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-left:  1px solid var(--c3-rule);
  border-right: 1px solid var(--c3-rule);
}
.c3-footer__copyright {
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(26,26,26,.55);
}
.c3-footer__mark-wrap {
  position: relative;
  background: #1a1a1a;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--c3-container);
  margin: 0 auto;
  box-shadow: inset 1px 0 0 var(--c3-dark-rule), inset -1px 0 0 var(--c3-dark-rule);
}
.c3-footer__paths-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  contain: paint; /* SVGアニメの再描画をこの要素内に隔離（c3-top.css と同値） */
}
.c3-footer__paths-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c3-footer__mark-center {
  position: relative;
  z-index: 1;
  padding: 48px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c3-footer__mark-img {
  height: 72px;
  width: auto;
  display: block;
  opacity: .72;
}

/* --------------------------------------------------------------------------
   共通: セクション区切り線
   -------------------------------------------------------------------------- */
.sub-sec-rule {
  height: 1px;
  background: var(--c3-rule);
}

/* --------------------------------------------------------------------------
   共通: ラベル・見出し・アクセントライン
   -------------------------------------------------------------------------- */
.sub-label {
  margin: 0;
  font-family: var(--c3-font-en), 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c3-text-muted);
}
.sub-h2 {
  margin: 24px 0 0;
  font-family: var(--c3-font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.6;
  letter-spacing: .04em;
  word-break: keep-all;
}
.sub-accent-line {
  width: 32px;
  height: 2px;
  background: var(--c3-vermilion);
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   共通: 漢字印スタンプ
   -------------------------------------------------------------------------- */
.sub-stamp {
  width: 132px;
  height: 132px;
  border: 1px solid rgba(26,26,26,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sub-stamp__char {
  font-family: var(--c3-font-serif);
  font-size: 64px;
  font-weight: 500;
  color: var(--c3-vermilion);
  line-height: 1;
}
.sub-stamp__corner {
  position: absolute;
  width: 9px;
  height: 9px;
}
.sub-stamp__corner--tl {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--c3-ink);
  border-left: 1px solid var(--c3-ink);
}
.sub-stamp__corner--br {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--c3-ink);
  border-right: 1px solid var(--c3-ink);
}

/* --------------------------------------------------------------------------
   共通: FV動画矩形 左上 鉤括弧（PC限定）
   スタンプ --tl と完全同一様式（寸法・線幅・色・オフセット）
   スタンプ右下との対角構図でFV全体を括る
   -------------------------------------------------------------------------- */
.sub-fv-tl-corner {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--c3-ink);
  border-left: 1px solid var(--c3-ink);
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 767px) {
  .sub-fv-tl-corner { display: none; }
}

/* --------------------------------------------------------------------------
   共通: 黒帯 CTA
   -------------------------------------------------------------------------- */
.sub-cta {
  position: relative;
  overflow: hidden;
  background: var(--c3-dark-bg);
  color: var(--c3-dark-text);
  box-shadow: inset 1px 0 0 rgba(250,250,248,.25), inset -1px 0 0 rgba(250,250,248,.25);
}
.sub-cta__watermark {
  position: absolute;
  left: -0.12em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--c3-font-serif);
  font-weight: 600;
  font-size: clamp(170px, 32.3vw, 357px); /* TOPの .c3-cta__deco と同値 */
  line-height: 1;
  color: rgba(250,250,248,.04);
  pointer-events: none;
  user-select: none;
}
.sub-cta__inner {
  position: relative;
  padding: 104px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sub-cta__heading {
  margin: 0;
  font-family: var(--c3-font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.6;
  letter-spacing: .05em;
  word-break: keep-all;
}
.sub-cta__body {
  margin: 26px 0 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .04em;
  color: rgba(250,250,248,.85);
}
.sub-cta__btn {
  display: inline-block;
  margin-top: 48px;
  background: var(--c3-dark-text);
  color: var(--c3-dark-bg);
  font-size: 14px;
  letter-spacing: .12em;
  padding: 17px 48px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.sub-cta__btn:hover { opacity: .85; }

/* --------------------------------------------------------------------------
   [data-reveal] / [data-line] 初期状態（motion許可時のみ）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
  }
  h1[data-reveal],
  h3[data-reveal] {
    filter: blur(4px);
  }
  /* h2: 図面デコードアニメーション（JS が .c3-decoding を付与・span 制御） */
  h2[data-reveal].c3-decoding {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  [data-line] {
    transform: scaleX(0);
    transform-origin: left;
  }
  /* 罫線フラッシュ（sub-page.js が .sub-rule--flashed を付与） */
  .sub-rule--flashed {
    position: relative;
    overflow: hidden;
  }
  .sub-rule--flashed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(179,66,74,.55), transparent);
    animation: sub-rule-flash .75s cubic-bezier(.25,0,.25,1) forwards;
  }
  @keyframes sub-rule-flash {
    from { transform: translateX(-100%); }
    to   { transform: translateX(300%); }
  }
}

/* --------------------------------------------------------------------------
   フォーカス可視性（アクセシビリティ）
   -------------------------------------------------------------------------- */
.c3-header__nav-link:focus-visible,
.c3-header__cta:focus-visible,
.c3-header__hamburger:focus-visible,
.c3-drawer__close:focus-visible,
.c3-drawer__nav-link:focus-visible,
.sub-cta__btn:focus-visible {
  outline: 2px solid var(--c3-vermilion);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   レスポンシブ — PC（768px+）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .c3-header__nav { display: flex; }
  .c3-header__hamburger { display: none; }
  .sub-col-guide--25,
  .sub-col-guide--75 { display: block; }
}

/* --------------------------------------------------------------------------
   レスポンシブ — SP（767px以下）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c3-header__inner { padding: 0 20px; gap: 12px; }
  .c3-header__logo-img { height: 20px; }
  .c3-header__cta {
    font-size: 11px;
    padding: 6px 10px;
    min-height: 44px;
    margin-left: auto;
  }
  .c3-pc-text { display: none; }

  .c3-footer__inner  { padding: 40px 24px 16px; }
  .c3-footer__bottom { padding: 16px 24px 28px; flex-direction: column; align-items: flex-start; gap: 4px; }

  .sub-cta__inner { padding: 72px 24px; }
  .sub-cta__heading { text-align: center; font-size: 22px; word-break: normal; }
  .sub-stamp { width: 72px; height: 72px; margin-top: -8px; }
  .sub-stamp__char { font-size: 34px; }
}