/* ===== トップページ固有 ===== */

/* ---- ファーストビュー：写真3枚のクロスフェード＋左からの暗がりにコピー ----
   白い箱を写真の中央に置く形はやめた（人物の表情と手元を塞ぐうえ、既製テーマに見える）。
   ベールは全面ではなく左からの片流れなので、右側の写真は濁らない。 */
/* ヘッダー分を引く。引かないと 92vh + ヘッダー高 になり、下端のコピーが画面外に落ちる */
.fv{position:relative; margin-top:var(--hdr-h); min-height:calc(96vh - var(--hdr-h));
    display:flex; align-items:flex-end; overflow:hidden; background:#0A0C10}
.fv-bg{position:absolute; inset:0}
.fv-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 40%;
  opacity:0; transition:opacity 1.8s ease;
}
/* 表示中の1枚だけ、ゆっくり寄っていく（Ken Burns） */
.fv-bg img.is-on{opacity:1; animation:fvzoom 9s linear forwards}
@keyframes fvzoom{from{transform:scale(1.005)} to{transform:scale(1.085)}}
/* 左から流れる暗がり。右へ行くほど透明になるので写真の主題は残る */
.fv-bg::after{
  content:""; position:absolute; inset:0; z-index:3;   /* 写真(1〜2)より上 */
  background:
    linear-gradient(90deg,rgba(6,8,12,.86) 0%,rgba(6,8,12,.62) 34%,rgba(6,8,12,.2) 62%,rgba(6,8,12,0) 82%),
    linear-gradient(180deg,rgba(6,8,12,.35) 0%,rgba(6,8,12,0) 26%);
}
.fv .inner{position:relative; z-index:5; width:100%; display:flex; justify-content:flex-start;
  padding-bottom:clamp(64px,9vw,132px)}
.fv-panel{background:none; width:100%; max-width:min(56vw,720px); text-align:left; padding:0}
.fv-eyebrow{font-family:var(--en); font-size:12px; letter-spacing:.24em; color:rgba(255,255,255,.66)}
.fv h1{font-family:var(--sans); font-weight:700; font-size:clamp(27px,4.4vw,56px);
  line-height:1.42; letter-spacing:.01em; margin-top:clamp(14px,2vw,22px); color:#fff}
.fv h1 .ln{display:block; overflow:hidden}
/* 見出しは下からせり上がる。伏せた状態から始めて、読み込み後に .is-in で解除 */
.fv h1 .ln > span{display:block; transform:translateY(105%); transition:transform 1.05s cubic-bezier(.16,.8,.24,1) .25s}
.fv.is-in h1 .ln > span{transform:none}
.fv-lead{margin-top:clamp(18px,2.4vw,28px); font-size:clamp(13px,1.05vw,14.5px);
  line-height:2.15; color:rgba(255,255,255,.86);
  opacity:0; transform:translateY(14px); transition:opacity .9s ease .75s, transform .9s ease .75s}
.fv.is-in .fv-lead{opacity:1; transform:none}
.fv-eyebrow{opacity:0; transition:opacity .8s ease .1s}
.fv.is-in .fv-eyebrow{opacity:1}
/* 下端のスクロール表示。線が上下に流れ続ける */
.fv-scroll{
  position:absolute; right:clamp(18px,2.6vw,40px); bottom:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--en); font-size:10.5px; letter-spacing:.24em; color:rgba(255,255,255,.7);
  writing-mode:vertical-rl; padding-bottom:64px;
}
.fv-scroll i{position:absolute; left:50%; bottom:0; width:1px; height:52px; background:rgba(255,255,255,.28); overflow:hidden}
.fv-scroll i::after{content:""; position:absolute; inset:0; background:var(--lux); animation:fvscroll 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes fvscroll{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ---- お知らせ ---- */
.news-list{border-top:1px solid var(--rule)}
.news-item{display:grid; grid-template-columns:120px 108px 1fr; gap:0 20px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--rule); transition:padding-left .34s}
.news-item:hover{padding-left:10px}
.news-date{font-family:var(--num); font-weight:600; font-size:13.5px; letter-spacing:.1em; color:var(--gray)}
.news-cat{font-size:11.5px; letter-spacing:.1em; border:1px solid var(--rule); padding:3px 0; text-align:center; color:var(--gray)}
.news-ttl{font-size:14.5px; line-height:1.85}

/* ---- 企業情報：グループの系譜図（このページの主役） ---- */
.lineage{--lngap:clamp(16px,2.4vw,30px); margin-top:8px}
.ln-parent{border:1px solid var(--rule); padding:22px 26px; text-align:center; background:var(--wash)}
.ln-parent .cap{font-family:var(--en); font-size:11px; letter-spacing:.2em; color:var(--gray)}
.ln-parent .nm{font-family:var(--sans); font-weight:700; font-size:clamp(15px,1.6vw,19px); margin-top:6px}
.ln-parent .sub{font-size:11.5px; color:var(--gray); letter-spacing:.06em; margin-top:2px}

.ln-branch{height:74px; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--lngap)}
.ln-branch .v1{position:absolute; left:50%; top:0; width:1px; height:37px; background:var(--rule)}
.ln-branch .leg{position:relative}
.ln-branch .leg::after{content:""; position:absolute; left:50%; top:37px; bottom:0; width:1px; background:var(--rule)}
.ln-branch .leg::before{content:""; position:absolute; top:37px; height:1px; background:var(--rule)}
.ln-branch .leg-l::before{left:50%; right:calc(var(--lngap) / -2)}
.ln-branch .leg-r::before{right:50%; left:calc(var(--lngap) / -2)}

.ln-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--lngap)}
.ln-card{border:1px solid var(--rule); padding:clamp(26px,3.4vw,40px) clamp(22px,2.6vw,32px); display:flex; flex-direction:column; min-height:100%; transition:border-color .34s,transform .34s}
.ln-card:hover{border-color:var(--ink); transform:translateY(-4px)}
.ln-card .role{font-family:var(--en); font-size:11px; letter-spacing:.2em; color:var(--gray)}
.ln-card .jp{font-family:var(--sans); font-weight:700; font-size:clamp(19px,2.4vw,27px); margin-top:10px; letter-spacing:.04em}
.ln-card .co{font-size:13px; color:var(--gray); margin-top:8px; letter-spacing:.04em}
/* 各社のロゴはカードの右上へ。社名テキストは読み上げと検索のために残す */
.ln-parent,.ln-card{position:relative}
.ln-logo{position:absolute; top:clamp(16px,2vw,24px); right:clamp(16px,2vw,24px); margin:0}
.ln-logo img{display:block; width:auto; height:clamp(19px,2.1vw,26px)}
.ln-parent .ln-logo{top:50%; translate:0 -50%}
.ln-card .txt{font-size:13.5px; line-height:2.0; margin-top:18px; color:#333}
.ln-card .go{margin-top:auto; padding-top:24px}
/* 自社だけが黄色。ページ内で唯一の「面としての黄色」 */
.ln-card.is-self{background:var(--lux); border-color:var(--lux)}
.ln-card.is-self:hover{border-color:var(--ink)}
.ln-card.is-self .role,.ln-card.is-self .co{color:#5C5320}
.ln-card.is-self .txt{color:#2A2712}

/* ---- 事業紹介 ---- */
/* リユース事業そのものの説明。出張買取カードの前に置く導入文 */
.biz-lead{margin-bottom:clamp(34px,4.4vw,56px)}
.biz-lead h3{font-size:clamp(19px,2.2vw,27px); line-height:1.85; letter-spacing:.03em}
.biz-lead p{font-size:14px; line-height:2.15; color:#333; margin-top:22px; max-width:40em}
.biz{display:grid; grid-template-columns:1.12fr .88fr; align-items:stretch; border:1px solid var(--rule)}
.biz-body{padding:clamp(34px,4.6vw,64px)}
.biz-body .num{font-family:var(--en); font-size:12px; letter-spacing:.2em; color:var(--gray)}
.biz-body h3{font-size:clamp(20px,2.3vw,28px); margin-top:12px; line-height:1.7; letter-spacing:.03em}
.biz-body p{font-size:14px; line-height:2.1; color:#333; margin-top:20px}
.biz-body .go{margin-top:34px; font-size:13px; letter-spacing:.1em; border-bottom:1px solid var(--ink); padding-bottom:6px}
.biz-visual{min-height:300px}

/* ---- 拠点 ---- */
.bases{margin-top:clamp(44px,6vw,72px)}
/* 5拠点ちょうど1行に収める。余りセルに色が残らないよう罫線はセル側に持たせる */
.bases-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:20px}
.base{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:20px 16px 22px}
.base .n{font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.03em}
.base .n em{font-style:normal; font-size:10.5px; color:var(--gray); margin-left:5px}
.base .a{font-size:11.5px; line-height:1.8; color:var(--gray); margin-top:8px}

/* ---- 採用バナー ---- */
.rec{border:1px solid var(--rule); padding:clamp(30px,4vw,52px) clamp(24px,4vw,56px); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; transition:background .34s,color .34s}
/* ホバーはブランドイエロー。黒文字のまま乗せるのでコントラストは落ちない */
.rec:hover{background:var(--lux); color:var(--ink); border-color:var(--lux)}
.rec .l .en{font-family:var(--en); font-size:12px; letter-spacing:.2em; color:var(--gray)}
.rec:hover .l .en{color:#5C5320}
.rec .l h3{font-size:clamp(19px,2.3vw,26px); margin-top:8px}
.rec .l p{font-size:13px; color:var(--gray); margin-top:8px}
.rec:hover .l p{color:#5C5320}
.rec .r{font-size:13px; letter-spacing:.1em; display:inline-flex; align-items:center; gap:12px}
.rec .r i{width:30px; height:1px; background:currentColor}

@media (max-width:900px){
  .fv{min-height:0; height:auto; padding:clamp(64px,16vw,120px) 0 clamp(56px,14vw,110px)}
  .fv-bg img{object-position:56% 42%}
  /* 縦組みになるので左からの片流れは効かない。全体を落として白文字を通す
     （以前ここは白いベールだった。白文字にした今は文字が消える） */
  .fv-bg::after{background:linear-gradient(180deg,rgba(6,8,12,.5) 0%,rgba(6,8,12,.64) 58%,rgba(6,8,12,.78) 100%)}
  .fv .inner{padding-bottom:0}
  .fv-panel{max-width:100%}
  .fv-scroll{display:none}
  /* 3列目に 1fr を置かないと grid-column:1/-1 が2列ぶん（212px）で止まる */
  .news-item{grid-template-columns:auto auto 1fr; gap:7px 12px}
  .news-cat{order:1; padding:3px 12px}   /* カテゴリを先、日付を後に */
  .news-date{order:2}
  .news-ttl{grid-column:1 / -1}
  /* 親カードは1行なので、右端に絶対配置すると社名と重なる。通常フローに戻す */
  .ln-parent .ln-logo{position:static; translate:none; margin-top:14px}
  .ln-parent .ln-logo img{margin-inline:auto}
  .ln-row{grid-template-columns:1fr}
  .ln-branch{height:44px; grid-template-columns:1fr}
  .ln-branch .leg{display:none}
  .ln-branch .v1{height:100%}
  .biz{grid-template-columns:1fr}
  .biz-visual{min-height:200px; order:-1}
}

/* 見出しの下に事業を並べる（会社概要の「出張買取事業／コールセンター事業」に対応） */
.biz-list{margin-top:15px; font-size:12.5px; color:var(--gray); line-height:2.1; letter-spacing:.06em}