/* ===========================================================
   v8 追加分（v7 = v5-base.css + site.css の上に重ねる差分）
   ここだけを外せば v7 の見た目に戻せるよう、上書きは全てこのファイルに閉じる。
   =========================================================== */

/* -----------------------------------------------------------
   1. ヒーローの社名表示 ── v9 で取り下げ（2026-09-06 指示）
   コーポレートロゴが確定してから、ロゴ画像で再度入れる。
   復活させるときは v8 の assets/v8.css の同ブロック（.hero-mark 一式と
   .hero{padding-top:...}）を戻し、index.html の .hero-mark を復元する。
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   2. 「一次代理店とは？」への導線
   ブランド帯（クリーム〜黄の面）に置くため、文字色は帯の濃茶に合わせる。
   ----------------------------------------------------------- */
.q-link{
  display:inline-flex;align-items:center;gap:.5em;vertical-align:middle;
  margin-left:.7em;padding:.34em .95em .34em .55em;
  border:1px solid rgba(138,41,0,.34);border-radius:100px;
  background:rgba(255,255,255,.5);
  color:#8A2900;font-size:max(14px,.72em);font-weight:700;letter-spacing:.03em;
  white-space:nowrap;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.q-link__ic{
  flex:none;width:1.55em;height:1.55em;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;
  font-family:"Outfit";font-weight:600;font-size:.86em;line-height:1;
  transition:transform .45s var(--ease);
}
.q-link:hover,.q-link.is-hover{background:#fff;border-color:var(--brand);transform:translateY(-2px)}
.q-link:hover .q-link__ic,.q-link.is-hover .q-link__ic{transform:rotate(12deg) scale(1.08)}
@media(max-width:600px){
  .q-link{margin-left:0;margin-top:.85em;display:inline-flex}
}

/* -----------------------------------------------------------
   3. WADASHO IN NUMBERS ─ 4本柱
   ホールディングス側の数値は「さりげなく添える」ため sub として小さく置く。
   ----------------------------------------------------------- */
.n-cell .v b{white-space:nowrap}
.n-cell .sub{
  margin-top:10px;padding-top:10px;border-top:1px dashed rgba(90,28,0,.2);
  font-size:14.5px;line-height:1.7;color:rgba(58,26,10,.6);
}
.n-cell .sub b{font-family:"Outfit";font-weight:600;font-size:15.5px;color:var(--brand)}

/* -----------------------------------------------------------
   4. ONE TEAM, ONE STAGE の可読性
   写真の上に直接テキストが乗っていて読みづらかったため、
   帯の暗幕を強め、さらに文字ブロックの背後にだけ局所的なスクリムを敷く。
   ----------------------------------------------------------- */
.band::after{
  background:
    linear-gradient(to bottom,rgba(12,33,60,.42),rgba(12,33,60,.62)),
    radial-gradient(120% 78% at 50% 58%,rgba(12,33,60,.58) 0%,rgba(12,33,60,0) 72%);
}
.band .inner{
  max-width:min(92vw,1040px);
  padding:clamp(26px,3.4vw,52px) clamp(22px,3vw,58px);
  background:rgba(12,33,60,.34);
  backdrop-filter:blur(3px);
  border-radius:4px;
}
.band p{color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(12,33,60,.5)}
.band h2{text-shadow:0 2px 22px rgba(12,33,60,.55)}

/* -----------------------------------------------------------
   5. ボタン
   (a) 日本語ラベルを大きく
   (b) 静止時に矢印が円からはみ出して見切れていたのを、円の内側に収める
       ＝ 2本目の矢印の初期位置を円の外（overflow で隠れる位置）まで送る
   (c) .btn.dark のオレンジ→紺の混色が濁っていたため、紺→スカイの爽やかな面に
   ----------------------------------------------------------- */
.btn{font-size:clamp(16px,1rem + .35vw,19px);letter-spacing:.06em}
.btn .ic{width:clamp(40px,3vw,50px)}

/* 静止時：追従矢印は完全に円の外へ。見切れを解消し、ホバーで初めて動き出す */
.btn .ic i::before{transform:translate(calc(-50% - 44px),-50%)}
.btn .ic i::after{transform:translate(calc(-50% - 40px),-50%) rotate(45deg)}
.btn .ic::before,.btn .ic::after,
.btn .ic i::before,.btn .ic i::after{transition:transform .5s var(--ease),background .4s}
/* ホバー時のみアニメーション（1本目が右へ抜け、2本目が中央へ入る） */
.btn:hover .ic::before,.btn.is-hover .ic::before{transform:translate(calc(-50% + 32px),-50%)}
.btn:hover .ic::after,.btn.is-hover .ic::after{transform:translate(calc(-50% + 36px),-50%) rotate(45deg)}

.btn.dark::before{background:linear-gradient(102deg,#1B4F86 0%,#2E9FBF 100%)}
.btn.dark::after{background:linear-gradient(102deg,#2E9FBF 0%,#7FD3E6 100%)}
.btn.dark{box-shadow:0 6px 18px rgba(27,79,134,.26);color:#fff}
.btn.dark:hover,.btn.dark.is-hover{color:#0C213C;box-shadow:0 16px 34px rgba(46,159,191,.34)}
.btn.dark .ic{background:#fff}
.btn.dark .ic::before,.btn.dark .ic i::before{background:#1B4F86}
.btn.dark .ic::after,.btn.dark .ic i::after{border-color:#1B4F86}

/* -----------------------------------------------------------
   6・7. 私たちについて（企業理念＋会社概要・沿革を1ページに統合）
   ----------------------------------------------------------- */
/* 代表メッセージの肖像枠（写真支給までの当たり） */
.ph.portrait{
  aspect-ratio:4/5;display:grid;place-items:center;
  background:linear-gradient(160deg,#F2E7D6 0%,#E6D6BE 100%);
  border:1px solid rgba(90,28,0,.14);
}
.ph.portrait .en{font-family:"Outfit";font-size:12px;letter-spacing:.28em;color:rgba(90,28,0,.42)}
.msg-body{white-space:pre-line}
.msg-name{margin-top:22px;font-weight:700}

/* VALUE の写真帯 */
.v-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px);margin-top:36px}
.v-strip figure{overflow:hidden;border-radius:2px}
.v-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:700px){.v-strip{grid-template-columns:1fr;gap:12px}}

/* WHY NOW のイラスト枠（Instagram のタッチに合わせて後日差し替え） */
.ill-cards .card{display:flex;flex-direction:column}
.ill{
  aspect-ratio:16/10;display:grid;place-items:center;margin-bottom:20px;
  background:repeating-linear-gradient(135deg,rgba(235,85,5,.05) 0 10px,rgba(235,85,5,.09) 10px 20px);
  border:1px dashed rgba(235,85,5,.35);border-radius:3px;
}
.ill .en{font-family:"Outfit";font-size:11px;letter-spacing:.24em;color:rgba(138,41,0,.55)}

/* -----------------------------------------------------------
   8〜13. 事業案内まわり
   ----------------------------------------------------------- */
/* 写真の当たり枠（該当素材がまだ無い箇所。撮影後に <img> へ差し替える） */
.ph.slot{
  aspect-ratio:16/10;display:grid;place-items:center;
  background:linear-gradient(160deg,#F3E9DA 0%,#E7D9C3 100%);
  border-bottom:1px solid rgba(90,28,0,.12);
}
.ph.slot .en{font-family:"Outfit";font-size:11px;letter-spacing:.26em;color:rgba(90,28,0,.4)}

/* 採用導線の写真帯（小さくたくさん横一列） */
.face-rail{
  display:flex;gap:8px;overflow-x:auto;margin-top:clamp(26px,3vw,40px);padding-bottom:6px;
  scrollbar-width:thin;
}
.face-rail figure{flex:0 0 clamp(96px,9vw,136px)}
.face-rail img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}

/* KDDIブランドのロックアップ */
.lockup{
  margin-top:clamp(34px,4vw,56px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,3vw,52px);
}
.lockup figure{background:#fff;border:1px solid rgba(16,43,78,.12);border-radius:4px;padding:clamp(22px,2.6vw,40px);text-align:center}
.lockup img{margin-inline:auto;max-height:150px;width:auto;object-fit:contain}
.lockup figcaption{margin-top:16px;font-size:var(--fs-sm);color:var(--ink-60)}
.lk-arrow{display:grid;place-items:center}
.lk-arrow span{display:block;width:clamp(38px,5vw,74px);height:2px;background:var(--brand);position:relative}
.lk-arrow span::after{content:"";position:absolute;right:0;top:50%;width:11px;height:11px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:translate(1px,-50%) rotate(45deg)}
.lk-note{margin-top:20px;text-align:center;font-size:var(--fs-label);color:var(--ink-60)}
@media(max-width:860px){
  .lockup{grid-template-columns:1fr;gap:18px}
  .lk-arrow span{width:2px;height:44px;margin-inline:auto}
  .lk-arrow span::after{right:50%;top:auto;bottom:0;transform:translate(50%,1px) rotate(135deg)}
}

/* ブランド要素の一括オフ：<html class="brand-off"> を付けるだけで元に戻せる */
html.brand-off [data-brand]{display:none!important}

/* TOP の帯に置くブランドロゴ */
.biz-brand{margin-top:10px}
.biz-brand img{height:26px;width:auto}
.lk-name{display:block;font-size:clamp(1.05rem,1.9vw,1.6rem);font-weight:700;letter-spacing:.12em;color:var(--navy);line-height:1.6}
.lockup figcaption{max-width:26em;margin-inline:auto}
.sec .lk-note{max-width:none;margin-inline:0;font-size:var(--fs-sm)}

/* -----------------------------------------------------------
   20. ghost ボタンのホバーで文字が消える不具合
   v5-base の .btn.ghost::after（白いスウィープ）が、site.css の
   :hover{background:navy;color:#fff} より前面に来るため、
   白い面の上に白い文字が乗って消えていた。
   明るい面では面を紺に、暗い面（.shops / .sec.navy）では従来どおり白に。
   ----------------------------------------------------------- */
.btn.ghost::after{background:var(--navy)}
.btn.ghost:hover,.btn.ghost.is-hover{color:#fff;border-color:var(--navy)}
.btn.ghost:hover .ic,.btn.ghost.is-hover .ic{background:#fff}
.btn.ghost:hover .ic::before,.btn.ghost.is-hover .ic::before,
.btn.ghost:hover .ic i::before,.btn.ghost.is-hover .ic i::before{background:var(--navy)}
.btn.ghost:hover .ic::after,.btn.ghost.is-hover .ic::after,
.btn.ghost:hover .ic i::after,.btn.ghost.is-hover .ic i::after{border-color:var(--navy)}

.shops .btn.ghost::after,.sec.navy .btn.ghost::after{background:#fff}
.shops .btn.ghost:hover,.shops .btn.ghost.is-hover,
.sec.navy .btn.ghost:hover,.sec.navy .btn.ghost.is-hover{color:#8A2900;border-color:transparent}
.shops .btn.ghost:hover .ic,.sec.navy .btn.ghost:hover .ic{background:var(--brand)}
.shops .btn.ghost:hover .ic::before,.sec.navy .btn.ghost:hover .ic::before,
.shops .btn.ghost:hover .ic i::before,.sec.navy .btn.ghost:hover .ic i::before{background:#fff}
.shops .btn.ghost:hover .ic::after,.sec.navy .btn.ghost:hover .ic::after,
.shops .btn.ghost:hover .ic i::after,.sec.navy .btn.ghost:hover .ic i::after{border-color:#fff}

/* ホバー時のスウィープが明るすぎて白文字が沈んでいたため、彩度を上げて可読性を確保 */
.btn::after{background:linear-gradient(102deg,#FFB067 0%,#F2670F 55%,#D94A00 100%)}
.btn.light::after{background:linear-gradient(102deg,#FFC98F 0%,#FF9538 100%)}

/* -----------------------------------------------------------
   14〜19. 採用まわり
   ----------------------------------------------------------- */
.gain{list-style:none;display:grid;gap:16px}
.sec .gain li{position:relative;padding:20px 22px 20px 64px;background:var(--cream-2);border-left:2px solid var(--brand);font-size:var(--fs-sm);color:var(--ink-60);line-height:1.9}
.gain .n{position:absolute;left:22px;top:20px;font-family:"Outfit";font-weight:600;color:var(--brand)}
.gain b{display:block;color:var(--ink);font-size:var(--fs-base);margin-bottom:4px}
.sec p.declare{
  margin-top:clamp(30px,3.6vw,52px);padding:clamp(22px,2.6vw,34px) clamp(20px,3vw,44px);
  background:var(--navy);color:#fff;border-radius:3px;
  font-size:clamp(1.05rem,1rem + .5vw,1.4rem);font-weight:700;line-height:1.9;letter-spacing:.03em;
  max-width:none;
}
.stat .note{display:block;margin-top:10px;font-size:var(--fs-sm);color:var(--ink-60);line-height:1.7}
.card.ben .ill{aspect-ratio:16/9}
.card.ben .ben-lead{font-weight:700;color:var(--ink)}