/* ============================================================
   v10 追加分（2026-09-07）
   これを外せば v9 の見た目に戻る。
   ・沿革の二本立て（グループ120年 ／ 通信事業23期）
   ・来店予約カード
   ============================================================ */

/* --- 沿革：二本立て --- */
.hist-two{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(30px,3.6vw,48px);
  align-items:start;
}
@media (max-width:900px){
  .hist-two{grid-template-columns:1fr;gap:clamp(34px,6vw,48px)}
}

.hist-col{min-width:0}

.hist-cap{
  padding-bottom:16px;
  border-bottom:1px solid rgba(16,43,78,.14);
  margin-bottom:6px;
}
.hist-cap .en{
  font-family:"Outfit",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.24em;color:var(--ink-60);
  display:block;margin-bottom:8px;
}
.hist-cap h3{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.16rem,1.05rem + .55vw,1.45rem);
  line-height:1.5;margin:0;
}
.hist-span{
  margin-top:8px;font-size:.92rem;color:var(--ink-60);
  font-feature-settings:"palt" 1;
}
.hist-span strong{
  font-family:"Outfit",sans-serif;font-weight:700;
  font-size:1.08em;color:var(--ink);letter-spacing:.02em;
}

/* 通信事業側を主役に */
.hist-col.is-ours .hist-cap{border-bottom-color:var(--brand)}
.hist-col.is-ours .hist-cap h3{color:var(--brand)}
.hist-col.is-ours .hist-span strong{color:var(--brand)}
.hist-col.is-ours .hist{border-left-color:rgba(235,85,5,.34)}
.hist-col.is-ours .hist li::before{background:var(--brand)}
.hist-col.is-ours .hist .d strong{color:var(--ink);font-weight:700}

/* グループ側は控えめに */
.hist-col:not(.is-ours) .hist .y{color:var(--ink-60)}

.hist-two .hist{max-width:none}
.hist-two .hist .d{max-width:46ch}

/* --- 来店予約カード --- */
.reserve-two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(26px,3vw,38px);
}
@media (max-width:760px){.reserve-two{grid-template-columns:1fr}}

.reserve-card{display:flex;flex-direction:column}
.reserve-card .en{
  font-family:"Outfit",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.22em;color:var(--brand);
  display:block;margin-bottom:10px;
}
.reserve-card h3{margin-bottom:10px}
.reserve-card p{flex:1}
.reserve-card .btn{margin-top:18px;align-self:flex-start}

.reserve-note.sub{
  margin-top:20px;font-size:.88rem;color:var(--ink-60);
}

/* 店舗カードのボタンが3つになるため折り返しを許可 */
.shop-act{flex-wrap:wrap}

/* --- 法人営業 4エリア --- */
.corp-areas .corp-area{text-align:left}
.corp-area .ph.face{
  aspect-ratio:1/1;border-radius:3px;overflow:hidden;margin:-34px -34px 20px;
  border-radius:3px 3px 0 0;
}
.corp-area .ph.face img{width:100%;height:100%;object-fit:cover;display:block}
.corp-area h3{
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  margin:4px 0 8px;
}
.corp-city{font-size:.88rem;color:var(--ink-60);line-height:1.8}
.corp-office-h{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.5;margin-bottom:14px;
}
.corp-office .btn-row{margin-top:22px}

/* --- ブログ --- */
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(20px,2.6vw,34px);
}
.blog-card{
  display:block;background:#fff;border:1px solid rgba(16,43,78,.12);border-radius:4px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s, border-color .34s;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(16,43,78,.11);border-color:var(--brand)}
.blog-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.blog-card .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.blog-card:hover .ph img{transform:scale(1.04)}
.blog-card .b{padding:clamp(18px,2vw,24px)}
.blog-card time{
  font-family:"Outfit",sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.08em;color:var(--brand);display:block;margin-bottom:8px;
}
.blog-card h3{
  font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.6;
  margin:0 0 10px;font-weight:700;
}
.blog-card p{font-size:.9rem;color:var(--ink-60);line-height:1.85;margin:0}

/* 記事本文 */
.blog-date{
  font-family:"Outfit",sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:.08em;color:var(--brand);display:block;margin:14px 0 6px;
}
.wrap.narrow{max-width:820px}
.blog-body p{margin-bottom:1.1em;line-height:2.05}
.blog-body p:last-child{margin-bottom:0}
.blog-figs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(30px,3.4vw,46px);
}
.blog-fig{margin:0;border-radius:3px;overflow:hidden;background:var(--cream-2)}
.blog-fig img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}

/* 事業案内内のブログ抜粋 */
.blog-peek{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(18px,2.2vw,28px);margin-top:34px;
}

/* --- 採用：新卒／中途の二段構え --- */
.entry-two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);align-items:start;
}
@media (max-width:900px){.entry-two{grid-template-columns:1fr}}

.entry-lane{display:flex;flex-direction:column}
.entry-lane .lane-en{
  font-family:"Outfit",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.22em;display:block;margin-bottom:10px;
}
.entry-lane.is-new{border-color:var(--brand);border-width:2px}
.entry-lane.is-new .lane-en{color:var(--brand)}
.entry-lane.is-mid .lane-en{color:var(--ink-60)}
.lane-h{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.4rem,1.2rem + .9vw,1.95rem);line-height:1.4;margin:0 0 14px;
}
.lane-lead{color:var(--ink-60);line-height:1.95}

.lane-facts{list-style:none;margin:22px 0 4px;padding:0;
  border-top:1px solid rgba(16,43,78,.12)}
.lane-facts li{
  display:flex;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(16,43,78,.12);
  font-size:.93rem;line-height:1.75;
}
.lane-facts li span{
  flex:0 0 6.5em;font-weight:700;font-size:.82rem;color:var(--ink-60);
  letter-spacing:.04em;
}

.lane-block{margin-top:clamp(22px,2.4vw,30px)}
.lane-block h3{
  font-size:clamp(1rem,.96rem + .3vw,1.14rem);font-weight:700;
  margin:0 0 8px;padding-left:13px;position:relative;
}
.lane-block h3::before{
  content:"";position:absolute;left:0;top:.42em;
  width:4px;height:1em;border-radius:2px;background:var(--brand);
}
.entry-lane.is-mid .lane-block h3::before{background:var(--navy)}
.lane-block p{font-size:.93rem;color:var(--ink-60);line-height:1.9;margin:0}
.lane-block .btn-row{margin-top:14px}

.lane-tel a{
  font-family:"Outfit",sans-serif;font-weight:700;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  color:var(--brand);letter-spacing:.03em;text-decoration:none;
}
.lane-tel{margin-top:6px !important}

.btn.is-disabled{
  opacity:.45;pointer-events:none;
  background:transparent;color:var(--ink-60);
  border:1px solid rgba(16,43,78,.28);
}

.form-note{
  margin-top:22px;font-size:.88rem;color:var(--ink-60);
  padding:14px 16px;background:rgba(16,43,78,.045);border-radius:3px;
}
.note-s{display:block;margin-top:6px;font-size:.85rem;color:var(--ink-60)}
.stat .note-s{font-size:.72rem;margin-top:2px}
.stat .v .note-s{display:none}

/* ============================================================
   901px 前後の横あふれ修正（v9から潜在していた不具合）
   .g4 / .g3 が repeat(N,1fr) だと、セルの最小幅がコンテンツ幅に
   引きずられてグリッド全体が広がる。minmax(0,1fr) で頭打ちにする。
   あわせて、数字が最も窮屈になる 901〜1150px の帯だけ字面を落とす。
   ============================================================ */
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){
  .grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
}
.grid > *{min-width:0}

.stat{min-width:0}
.stat .k{overflow-wrap:anywhere}
.stat .v{flex-wrap:wrap}

@media (min-width:901px) and (max-width:1150px){
  .stat .v{font-size:clamp(2.4rem,1.1rem + 3.2vw,3.4rem)}
  .stat .k{letter-spacing:.08em}
  .stat{padding-inline:8px}
}

/* フリーコールのラベルが「フリーコ／ール」と割れるのを防ぐ */
.shop-card .free{white-space:nowrap}

/* --- 出典表記 --- */
.src-note{
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:22px;border-top:1px solid rgba(16,43,78,.14);
}
.src-label{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.22em;color:var(--ink-60);display:block;margin-bottom:12px;
}
.src-note ul{list-style:none;margin:0;padding:0}
.src-note li{margin-bottom:12px;font-size:.9rem;line-height:1.8}
.src-note li:last-child{margin-bottom:0}
.src-note a{color:var(--brand);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(235,85,5,.3)}
.src-note a:hover{border-bottom-color:var(--brand)}
.src-meta{display:block;font-size:.83rem;color:var(--ink-60);margin-top:3px;line-height:1.75}
.article-link a{color:var(--brand);font-weight:700}

/* --- 法人営業：拠点カード --- */
.office-card{margin-bottom:clamp(18px,2vw,24px)}
.office-card:last-child{margin-bottom:0}
.office-en{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.22em;color:var(--brand);display:block;margin-bottom:8px;
}
.office-card h4{
  font-size:clamp(1.02rem,.96rem + .35vw,1.18rem);font-weight:700;
  margin:0 0 14px;line-height:1.5;
}
.office-card .tbl{margin:0}
.office-card .tel{
  font-family:"Outfit",sans-serif;font-weight:700;
  color:var(--brand);text-decoration:none;letter-spacing:.02em;
}
.corp-office .office-card{
  background:#fff;border:1px solid rgba(16,43,78,.12);
  border-radius:4px;padding:clamp(20px,2.4vw,28px);
}

/* エリア担当の携帯番号 */
.corp-tel{
  margin-top:8px;font-family:"Outfit",sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:.02em;color:var(--brand);
}

/* --- KDDI Biz Edge --- */
.bizedge{
  margin-top:clamp(30px,3.4vw,44px);
  background:var(--navy);color:#fff;border-radius:4px;
  padding:clamp(26px,3.2vw,44px);
}
.bizedge-en{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.24em;color:#F7DE8A;display:block;margin-bottom:12px;
}
.bizedge h3{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);
  line-height:1.5;margin:0 0 14px;color:#fff;
}
.bizedge p{color:rgba(255,255,255,.78);line-height:1.95;max-width:62ch;margin:0}
.bizedge .btn-row{margin-top:22px}
.bizedge .btn.ghost{
  color:#fff;border-color:rgba(255,255,255,.44);background:transparent;
}
.bizedge .btn.ghost:hover{
  background:#fff;color:var(--navy);border-color:#fff;
}

/* 拠点カードが2枚あるので、左カラムは上揃えにする */
.split.corp-office{align-items:start}

/* ============================================================
   仮置き（ご支給待ち）の可視化
   クライアント確認用。body.notes-off で消える。
   ============================================================ */
.tbd{
  background:rgba(235,85,5,.14);
  box-shadow:0 0 0 2px rgba(235,85,5,.14);
  border-radius:2px;
  color:inherit;
}
body.notes-off .tbd{background:transparent;box-shadow:none}

.notes-btn{
  position:fixed;right:14px;bottom:14px;z-index:60;
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:9px 15px;border-radius:999px;cursor:pointer;
  background:var(--navy);color:#fff;border:0;
  box-shadow:0 6px 20px rgba(16,43,78,.28);
}
.notes-btn:hover{background:var(--brand)}
body.has-fixed-cta .notes-btn{bottom:auto;top:14px;right:14px}
@media print{.notes-btn{display:none}}

/* ============================================================
   公式Instagram（グローバルナビのアイコン／フッターのテキストリンク）
   ============================================================ */
.nav-ig{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-left:6px;border-radius:50%;
  color:inherit;border:1.4px solid currentColor;opacity:.72;
  transition:opacity .3s var(--ease),background .3s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.nav-ig:hover{
  opacity:1;transform:translateY(-2px);
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.nav-ig svg{display:block}
@media(max-width:1080px){ .nav-ig{display:none} }

/* ============================================================
   KDDI Biz Edge ボタン：ホバーで文字が消える不具合の修正
   v8.css の .btn.ghost::after（濃紺のスウィープ）が、
   紺地では「濃紺の面に濃紺の文字」になってしまうため、
   .bizedge の中だけスウィープを白に戻す（.sec.navy と同じ扱い）。
   ============================================================ */
.bizedge .btn.ghost::after{background:#fff}
.bizedge .btn.ghost:hover,.bizedge .btn.ghost.is-hover{
  color:var(--navy);border-color:#fff;background:transparent;
}

/* ============================================================
   取締役メッセージ（代表メッセージの直下・写真とテキストを左右反転）
   ============================================================ */
.msg-second{padding-top:0}
@media(min-width:901px){
  .split.msg-rev{grid-template-columns:.85fr 1.15fr}
}
@media(max-width:900px){
  /* スマホでは文章 → 写真の順に読ませる */
  .split.msg-rev{display:flex;flex-direction:column-reverse}
  .msg-second{padding-top:clamp(30px,4vw,44px)}
}

/* ============================================================
   ブログ：中村部長のコラムコーナー（枠のみ・記事はご支給待ち）
   ============================================================ */
.column-lead{max-width:60ch;margin-bottom:clamp(24px,3vw,38px)}
.column-lead h2{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);
  line-height:1.5;margin:0 0 12px;
}
.column-lead p{color:var(--ink-60);line-height:1.95;margin:0}
.column-grid{margin-bottom:clamp(10px,1.5vw,18px)}
/* 仮置きカードはリンクではないので、ホバーで動かさない */
.blog-card.is-tbd{cursor:default;border-style:dashed}
.blog-card.is-tbd:hover{transform:none;box-shadow:none;border-color:rgba(16,43,78,.16)}
.blog-card.is-tbd .ph.slot{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(-45deg,var(--cream-2) 0 10px,rgba(16,43,78,.045) 10px 20px);
}
.blog-card.is-tbd .ph.slot .en{
  font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.28em;color:rgba(16,43,78,.4);
}