/* ============================================================
   v12 追加分（2026-09-17）
   これを外せば v11 の見た目に戻る。
   ・TOP ヒーロー：縦向き（スマホ）で文字が人物の顔にかからない
   ・私たちについて：取締役→代表者ご紹介の順、代表は動画待ち
   ・法人営業：市町村＋「／他」／長野エリア地図（ホバーで担当エリアが色づく）
   ・現場の声（STAFF VOICE）：タブ＋中村営業部長インタビュー
   ・数字で見る：5カード（外国籍スタッフ在籍率）
   ・フォーム：mailto
   ============================================================ */

/* --- TOP ヒーロー：縦向きでは写真の焦点を上に寄せ、文字は下 1/2 に収める --- */
@media (orientation: portrait) and (max-width: 820px){
  /* 人物（顔）は画面の上 1/3 に置く。--sp-pos の X はそのまま、Y だけ上へ */
  .hero-bg img{object-position:var(--sp-x,50%) 18%}
  /* 顔の帯（上 45%）は暗くしない。文字の背面（下 55%）だけ暗くして可読性を確保 */
  .hero-bg::after{
    background:linear-gradient(to bottom,rgba(12,33,60,.10) 0%,rgba(12,33,60,.10) 38%,rgba(12,33,60,.72) 62%,rgba(12,33,60,.86) 100%);
  }
  .hero-inner{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .hero h1{font-size:clamp(2.1rem,10.5vw,2.9rem);line-height:1.22;margin-bottom:12px}
  .hero-sub{font-size:14.5px;line-height:1.85}
  .hero-sub br.pc{display:none}
  .hero-tagline .jp{font-size:14px}
}
/* さらに背の低い縦画面（iPhone SE 等）では本文を1段落に */
@media (orientation: portrait) and (max-height: 700px){
  .hero-sub{font-size:13.5px;line-height:1.75}
  .hero-inner{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}

/* --- 私たちについて：代表者ご紹介（動画待ち） --- */
.pres-note{margin-top:14px;font-size:.86rem;line-height:1.8}
.pres-movie{margin-top:clamp(30px,3.6vw,48px)}

/* --- 法人営業：見出しの右に地図 --- */
.corp-head{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.corp-map{position:relative;max-width:460px;margin-inline:auto;width:100%}
.corp-map img{display:block;width:100%;height:auto}
.corp-map .map-area{
  position:absolute;inset:0;opacity:0;
  transition:opacity .35s var(--ease);pointer-events:none;
}
.corp-map .map-area.is-on{opacity:1}
.corp-map .map-hint{
  margin:10px 0 0;text-align:center;font-size:.78rem;color:var(--ink-60);letter-spacing:.02em;
}
@media(max-width:900px){
  .corp-head{grid-template-columns:1fr}
  .corp-map{max-width:360px}
  .corp-map .map-hint{display:none}
}
/* カード側：ホバー／フォーカスで軽く持ち上げる（地図の色と連動） */
.corp-area{cursor:default;outline:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.corp-area.is-on{transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(16,43,78,.35)}
.corp-area:focus-visible{box-shadow:0 0 0 3px rgba(16,43,78,.25)}
/* 市町村＋「／他」（小さく） */
.corp-area .corp-city{margin:0 0 6px}
.corp-city .etc{font-size:.72em;color:var(--ink-60);opacity:.8;margin-left:1px;letter-spacing:.04em}
/* ホバー中のエリア名にエリア色の下線 */
.corp-area[data-area="north"].is-on .num{color:#1d8c98}
.corp-area[data-area="east"].is-on .num{color:#b57708}
.corp-area[data-area="central"].is-on .num{color:#2a9a3d}
.corp-area[data-area="south"].is-on .num{color:#d81a5c}

/* --- 現場の声（STAFF VOICE） --- */
.voice .tabs{margin-bottom:clamp(30px,3.6vw,48px)}
.voice .tabs button{font-size:clamp(.95rem,.9rem + .3vw,1.05rem)}
.iv-h{
  display:flex;align-items:baseline;gap:14px;
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.12rem,1rem + .7vw,1.5rem);line-height:1.6;letter-spacing:.02em;
  margin:clamp(36px,4.4vw,60px) 0 6px;padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid rgba(16,43,78,.12);
}
.iv-h:first-child{margin-top:0;padding-top:0;border-top:0}
.iv-h .n{
  font-family:"Outfit",sans-serif;font-weight:600;font-size:.8em;letter-spacing:.14em;
  color:var(--brand);flex:none;
}
.iv-h + .iv-q{border-top:0;padding-top:0;margin-top:18px}
.iv-extra-q{display:block;font-weight:700;color:var(--ink);margin-bottom:6px}
@media(min-width:900px){
  .iv-body .iv-h{max-width:min(100%,46em);margin-left:auto;margin-right:auto}
}
.voice .tabpanel .column-lead:first-child{margin-top:0}

/* --- 数字で見る：5カード --- */
.grid.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.grid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.grid.g5{grid-template-columns:minmax(0,1fr)}}

/* --- ショップ：来店予約カードのみ（スマホ教室は削除） --- */
.reserve-two.one{grid-template-columns:minmax(0,1fr);max-width:720px}

/* --- フォーム：mailto --- */
.mail-note{margin-top:8px}
.mailform.is-test::before{
  content:"検証モード：送信先はテストアドレスに差し替わります（本番公開前に build.py の MAIL_TEST_TO を空にする）";
  display:block;margin-bottom:18px;padding:10px 14px;border-radius:4px;
  background:#fff4d6;color:#7a4b00;font-size:.84rem;line-height:1.7;
}
/* 市町村は「／」の後でだけ折り返す（「千曲市」が「千曲／市」と割れないように） */
.corp-city .nb{white-space:nowrap}
/* 市町村行は両端揃えの対象外（v11 の main p{justify} を打ち消す。nowrap の span が均等に広がっていた） */
.corp-area .corp-city{text-align:start}
/* 2026-09-17 ryoさん指示：グレー地図のコントラストが強く、ホバー着色の変化が分かりにくい → ベース（1色）だけトーンを落とす */
.corp-map .map-base{opacity:.42;filter:contrast(.85)}

/* ---------- ショップ一覧：長野県ラインマップ（2026-09-23 追記・PCのみ） ----------
   見出し（あなたの街の、相談役として。＋公式リンク）の右側に県地図＋エリア別の店名リンク。
   店名に hover/focus → その店舗の点が赤く光る。クリック → 店舗カード（#shop-slug）へ。
   地図は gen_shop_map.py が作る data/nagano_map.json を build.py がインライン展開。 */
.shop-card{scroll-margin-top:120px}
.shop-map{display:none}
@media (min-width:1101px){
  .shop-top{
    display:grid;grid-template-columns:auto auto;justify-content:center;align-items:end;column-gap:clamp(32px,4.4vw,96px);
    padding-left:var(--gutter);
    background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);
    padding-right:calc(var(--gutter) + 56px);  /* 右端固定の「来店予約」タブを避ける */
  }
  .shop-top-l{width:min(34vw,500px)}
  .shop-top-l .page-head h1{font-size:clamp(2.2rem,1rem + 2vw,3.3rem)}
  .shop-top-l .wrap{padding-left:0;padding-right:0;width:auto;max-width:none}
  .shop-top .page-head{background:none;border-bottom:0;padding-bottom:0}
  .shop-top .brand-row{padding-bottom:clamp(40px,5vw,72px)}
  .shop-top .page-head h1{font-size:clamp(2.4rem,1.2rem + 2.2vw,3.6rem)}
  .shop-map{
    display:grid;grid-template-columns:auto auto;align-items:center;gap:clamp(20px,2.4vw,40px);
    justify-self:start;padding:calc(96px + 70px) 0 clamp(40px,5vw,72px);
  }
  .sm-svg{display:block;height:clamp(420px,min(60vh,40vw),580px);width:auto;overflow:visible}
  .sm-fill{fill:transparent;transition:fill .3s}
  .sm-fill.is-on{fill:rgba(224,38,43,.06)}
  .sm-inner{fill:none;stroke:rgba(16,43,78,.16);stroke-width:.6;stroke-linejoin:round}
  .sm-border{fill:none;stroke:rgba(16,43,78,.5);stroke-width:1;stroke-dasharray:3 3;stroke-linejoin:round}
  .sm-outer{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round}
  .sm-alab{text-anchor:middle;font-family:"Shippori Mincho",serif;font-size:26px;font-weight:600;fill:rgba(16,43,78,.34);letter-spacing:.08em;pointer-events:none}
  .sm-dot{cursor:pointer}
  .sm-pt{fill:rgba(16,43,78,.42);stroke:#fff;stroke-width:1.6;transition:fill .2s,r .2s}
  .sm-ring{fill:rgba(224,38,43,.18);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .25s,transform .35s var(--ease)}
  .sm-lb{font-size:15px;font-weight:700;fill:#E0262B;text-anchor:middle;opacity:0;paint-order:stroke;stroke:#FDF8F1;stroke-width:4px;transition:opacity .2s;pointer-events:none}
  .sm-dot.is-on .sm-pt{fill:#E0262B;r:7.5}
  .sm-dot.is-on .sm-ring{opacity:1;transform:scale(1);animation:smPulse 1.6s ease-out infinite}
  .sm-dot.is-on .sm-lb{opacity:1}
  .sm-dots.has-on .sm-dot:not(.is-on) .sm-pt{fill:rgba(16,43,78,.22)}
  @keyframes smPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
  .sm-links{display:grid;grid-template-columns:repeat(2,auto);gap:24px clamp(16px,1.8vw,28px);min-width:0}
  .sm-area{font-family:"Shippori Mincho",serif;font-weight:600;font-size:1.02rem;margin:0 0 6px;padding-bottom:5px;border-bottom:1px solid rgba(16,43,78,.18);display:flex;align-items:baseline;gap:8px}
  .sm-area .en{font-family:"Outfit",sans-serif;font-size:10px;letter-spacing:.2em;color:var(--ink-60);font-weight:600}
  .sm-links ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .sm-links a{display:inline-flex;align-items:center;gap:8px;font-size:15px;line-height:1.6;color:var(--ink);text-decoration:none;padding:1px 0;transition:color .2s}
  .sm-links a::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(16,43,78,.3);transition:background .2s,transform .2s}
  .sm-links a:hover,.sm-links a:focus-visible,.sm-links a.is-on{color:#E0262B}
  .sm-links a:hover::before,.sm-links a:focus-visible::before,.sm-links a.is-on::before{background:#E0262B;transform:scale(1.3)}
}
/* 地図リンクから飛んだ先の店舗カードを一瞬赤枠で示す */
.shop-card.is-target{box-shadow:0 0 0 3px #E0262B;transition:box-shadow .4s}

/* ============================================================
   2026-09-23 追記
   ============================================================ */

/* ---------- サイト内テキストリンク（inlink.py が付与する a.ilink） ----------
   ふだんは本文と同じ色＋ごく薄い下線（リンクだと気づける程度）。
   ホバーで左から細い線がすっと引かれ、文字がブランド色へ。 */
a.ilink{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--brand),var(--brand)),linear-gradient(rgba(16,43,78,.28),rgba(16,43,78,.28));
  background-size:0 1px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;
  padding-bottom:1px;transition:background-size .5s var(--ease),color .3s;
}
a.ilink:hover,a.ilink:focus-visible{color:var(--brand);background-size:100% 1px,100% 1px}
.relnav{margin:clamp(28px,4vw,48px) 0 0;font-size:var(--fs-sm);line-height:2;color:var(--ink-60)}
.relnav .en{font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.24em;font-weight:600;margin-right:14px;color:var(--brand)}
.relnav i{font-style:normal;margin:0 .5em;opacity:.4}

/* ---------- 採用ページ共通のフローティングメニュー ---------- */
.fixed-cta.v12{grid-template-columns:repeat(4,1fr)}
.fixed-cta .fc-k{display:none}
.fixed-cta a.mynavi{background:#fff;color:var(--navy)}
@media (max-width:999px){
  .fixed-cta.v12 a{font-size:.82rem;padding:12px 4px}
  .fixed-cta.v12 .en{font-size:9px;letter-spacing:.04em}
}
@media (min-width:1000px){
  .fixed-cta.v12{width:250px;grid-template-columns:1fr;border-radius:8px}
  .fixed-cta .fc-k{display:block;margin:0;padding:10px 16px 8px;font-family:"Outfit",sans-serif;font-size:10px;letter-spacing:.26em;color:rgba(255,255,255,.6)}
  .fixed-cta.v12 a{text-align:left;padding:12px 18px;transition:background .25s}
  .fixed-cta.v12 a:hover{background:var(--navy-2)}
  .fixed-cta.v12 a.primary:hover{background:#d14a04}
  .fixed-cta.v12 a.mynavi{border-top:0}
  .fixed-cta.v12 a.mynavi:hover{background:#eef3f8}
  .fixed-cta.v12 .en{letter-spacing:.06em}
}

/* ---------- 採用情報トップ：新卒エントリーの案内 ---------- */
.grad-entry{padding:clamp(28px,4vw,52px) 0 0}
.ge-box{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(24px,3vw,48px);align-items:center;
  background:var(--navy);color:#fff;border-radius:10px;padding:clamp(24px,3.4vw,48px);
}
.ge-badge{display:inline-block;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.24em;font-weight:700;background:var(--brand);padding:5px 12px;border-radius:99px}
.ge-head h2{font-family:"Shippori Mincho",serif;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);line-height:1.45;margin:16px 0 12px;color:#fff}
.ge-head p{color:rgba(255,255,255,.82);margin:0;font-size:var(--fs-sm);line-height:1.9}
.ge-head b{color:#fff}
.ge-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ge-btn{position:relative;display:block;border-radius:8px;padding:22px 22px 24px;font-weight:700;font-size:1.05rem;line-height:1.55;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.ge-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.ge-btn.mynavi{background:#fff;color:var(--navy)}
.ge-btn.site{background:var(--brand);color:#fff}
.ge-k{display:block;font-family:"Outfit",sans-serif;font-size:10px;letter-spacing:.24em;opacity:.7;margin-bottom:8px}
.ge-ar{position:absolute;right:18px;bottom:18px;font-size:1.2rem}
.ge-sub{grid-column:1/-1;margin:0;font-size:.95rem;color:rgba(255,255,255,.75)}
.ge-sub a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.ge-box{grid-template-columns:1fr}.ge-actions{grid-template-columns:1fr}}

/* ---------- TOP：OUR BELIEF 下の新卒募集バナー ---------- */
.grad-banner{
  position:relative;display:block;margin-top:clamp(28px,3vw,40px);padding:22px 26px 24px;border-radius:10px;
  background:var(--banner);color:var(--navy);text-decoration:none;box-shadow:0 10px 26px rgba(90,28,0,.1);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.grad-banner:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(90,28,0,.16)}
.gb-k{display:block;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.24em;font-weight:700;color:var(--brand)}
.gb-t{display:block;font-family:"Shippori Mincho",serif;font-weight:600;font-size:clamp(1.2rem,1rem + .8vw,1.6rem);margin:6px 0 4px}
.gb-s{display:block;font-size:.95rem;color:var(--ink-60)}
.gb-go{display:inline-block;margin-top:12px;font-weight:700;font-size:.95rem;color:#fff;background:var(--brand);padding:7px 16px;border-radius:99px}
.gb-mynavi{margin:12px 0 0;font-size:.95rem}
.gb-mynavi a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(16,43,78,.35)}
.gb-mynavi a:hover{color:var(--brand)}

/* 採用情報トップ：PCは見出しの右に新卒エントリー案内（最初の画面で見える位置） */
@media (min-width:1101px){
  .recruit-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:end;
    background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);border-bottom:1px solid rgba(16,43,78,.08);
    padding-right:calc(var(--gutter) + 56px)}
  .recruit-top .page-head{background:none;border-bottom:0}
  .recruit-top .page-head h1{font-size:clamp(2.2rem,1rem + 2.2vw,3.5rem)}
  .recruit-top .grad-entry{padding:0 0 clamp(40px,6vw,88px)}
  .recruit-top .grad-entry .wrap{padding:0;width:auto;max-width:none}
  .recruit-top .ge-box{grid-template-columns:1fr}
}
@media (min-width:1101px){
  .recruit-top .grad-entry{padding-top:calc(96px + 40px)}
  .recruit-top .ge-box{padding:clamp(22px,2.4vw,34px);gap:18px}
  .recruit-top .ge-head h2{font-size:clamp(1.4rem,.9rem + 1.1vw,1.9rem);margin:12px 0 8px}
  .recruit-top .ge-btn{padding:16px 18px 18px;font-size:1rem}
}
.page-head h1 .h1-long{display:block;font-size:clamp(1.9rem,1.2rem + 2vw,3.1rem);line-height:1.4}
@media (max-width:999px){.fixed-cta.v12 .en{display:none}.fixed-cta.v12 a{padding:15px 2px;font-size:.8rem;white-space:nowrap;letter-spacing:0}}

/* ============================================================
   2026-09-24 スマホ調整（Notion「和田正サイトv12」追記分）
   基準幅：iPhone SE 375／iPhone 13〜16 390〜393／Pro Max・Plus 428〜440／Android 360〜412
   ============================================================ */

/* --- TOP ヒーロー（縦向き）：写真は画面の上 58% だけに置き、文字はその下の紺地に。
       顔と文字が物理的に重ならない（写真の下端だけグラデで紺へ溶かす） --- */
@media (orientation: portrait) and (max-width: 820px){
  /* 写真ブロック（上）→ 文字ブロック（下）の縦積み。写真の下端 10svh だけ文字が重なる（グラデ部分） */
  .hero{background:var(--navy-3);display:block;min-height:100svh}
  .hero-bg{position:relative;inset:auto;height:54svh}
  .hero-inner{position:relative;margin-top:-9svh;padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))}
  .hero-bg img{object-position:var(--sp-x,50%) 22%}
  .hero-bg::after{
    background:linear-gradient(to bottom,rgba(12,33,60,.05) 0%,rgba(12,33,60,.05) 62%,rgba(12,33,60,.8) 88%,#0C213C 100%);
  }
  .hero-sub{font-size:14px;line-height:1.75}
  .hero h1{font-size:clamp(2rem,9.6vw,2.7rem)}
}

/* --- 固定高さで本文が切れていた帯（TOP「ONE TEAM, ONE STAGE」） --- */
@media (max-width: 820px){
  .band{height:auto;min-height:clamp(300px,46vw,620px);padding:clamp(56px,14vw,88px) 0}
  .band p{line-height:1.85}
}

/* --- スマホの本文：行末までしっかり使う＋行間を少し詰める ---
   PC向けの「文節で改行（auto-phrase）」「text-wrap:pretty」は、狭い幅だと行末が大きく空き、
   文章が左に寄って見える（Safari は pretty で特に顕著）。本文だけ通常の折り返しに戻す。見出しはそのまま。 */
@media (max-width: 820px){
  main p, main li, main dd, main td, .page-head .lead, .lede{
    word-break:normal;line-break:strict;text-wrap:wrap;overflow-wrap:anywhere;
  }
  main p, main li, main dd, .page-head .lead{line-height:1.8}
  main p, .page-head .lead{letter-spacing:.03em}
  .iv-a, .iv-a p, .iv-body p, .iv-lead, .msg p{line-height:1.8}
  .page-head .lead{max-width:none}
  .page-head h1 .h1-long{font-size:clamp(1.55rem,7.4vw,2.2rem)}
}

/* --- ショップ一覧の地図：スマホ（縦）でも使えるように ---
   地図を全幅で置き、下に「エリア → 店名」のボタン。店名をタップ → 地図の点が赤く光ってから店舗カードへ。
   地図の点・エリアをタップしても同様にジャンプ。 */
@media (max-width:1100px){
  .shop-map{display:block;padding:0 var(--gutter) clamp(36px,8vw,56px);background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 100%)}
  .sm-svg{display:block;width:min(100%,360px);height:auto;margin:0 auto;overflow:visible}
  .sm-fill{fill:transparent;transition:fill .3s}
  .sm-fill.is-on{fill:rgba(224,38,43,.08)}
  .sm-inner{fill:none;stroke:rgba(16,43,78,.16);stroke-width:.6}
  .sm-border{fill:none;stroke:rgba(16,43,78,.5);stroke-width:1.2;stroke-dasharray:3 3}
  .sm-outer{fill:none;stroke:var(--navy);stroke-width:2}
  .sm-alab{text-anchor:middle;font-family:"Shippori Mincho",serif;font-size:30px;font-weight:600;fill:rgba(16,43,78,.34)}
  .sm-pt{fill:rgba(16,43,78,.45);stroke:#fff;stroke-width:2}
  .sm-ring{fill:rgba(224,38,43,.2);opacity:0}
  .sm-lb{font-size:22px;font-weight:700;fill:#E0262B;text-anchor:middle;opacity:0;paint-order:stroke;stroke:#FDF8F1;stroke-width:5px}
  .sm-dot.is-on .sm-pt{fill:#E0262B;r:9}
  .sm-dot.is-on .sm-ring{opacity:1}
  .sm-dot.is-on .sm-lb{opacity:1}
  .sm-links{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:18px}
  .sm-area{font-family:"Shippori Mincho",serif;font-weight:600;font-size:1rem;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid rgba(16,43,78,.2);display:flex;gap:6px;align-items:baseline}
  .sm-area .en{font-family:"Outfit",sans-serif;font-size:9px;letter-spacing:.16em;color:var(--ink-60)}
  .sm-links ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .sm-links a{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid rgba(16,43,78,.16);border-radius:6px;background:#fff;color:var(--ink);font-size:.95rem;font-weight:600;text-decoration:none}
  .sm-links a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:rgba(16,43,78,.3)}
  .sm-links a.is-on{border-color:#E0262B;color:#E0262B}
  .sm-links a.is-on::before{background:#E0262B}
  .shop-card{scroll-margin-top:90px}
}
@media (max-width:1100px){ .shop-top{display:block} }

/* --- 法人営業の地図：タップで確実に切り替わる／エリアをタップで担当者へ --- */
.corp-map{cursor:pointer}
.corp-area.is-on{box-shadow:0 0 0 2px var(--brand)}
.drawer a.drawer-sub{font-size:.92rem;padding-left:1.4em;opacity:.8;border-top:0}.drawer a.drawer-sub::before{content:"— ";opacity:.5}
@media (orientation: portrait) and (max-width: 820px){.hero-dots{top:auto;bottom:auto;left:auto;right:var(--gutter);top:88px}}

/* 2026-09-24 PC：地図から店舗へ（クリック範囲を広げ、エリアに乗せると店名を表示） */
.sm-hit{fill:transparent}
.sm-side{display:grid;gap:18px}
.sm-hint{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-60)}
@media (min-width:1101px){
  .sm-fill.is-hover{fill:rgba(16,43,78,.05)}
  .sm-dot.is-area .sm-pt{fill:var(--navy)}
  .sm-dot.is-area .sm-lb{opacity:1;fill:var(--navy)}
  .sm-dot:hover .sm-lb{opacity:1}
  .sm-dot.is-on .sm-lb{fill:#E0262B}
}
@media (max-width:1100px){.sm-hint{text-align:center;margin-top:14px}}
.sm-hit{cursor:pointer}

/* 2026-09-24 TOP「BUSINESS／BRAND／AREA」：スマホは3列だと1列が狭く「auショッ/プ・」「長野県全/域」と
   不格好に折れる → 1列の行組（左に見出し・右に内容）にし、語のまとまり（.nb）の途中では折らない */
@media (max-width:600px){
  .biz-facts{grid-template-columns:1fr}
  .biz-facts > div{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:center;column-gap:12px;padding:16px 18px}
  .biz-facts .k{margin:0}
  .biz-facts .v{margin:0;font-size:1rem;line-height:1.6}
  .biz-facts .v .nb{white-space:nowrap;overflow-wrap:normal}
  .biz-facts .biz-brand{margin:0}
  .biz-facts .biz-brand .brand-links{flex-wrap:nowrap;gap:14px}
  .biz-facts .biz-brand .brand-links img{max-height:20px}
}
.nb{display:inline-block}
.biz-facts .v .nb{white-space:nowrap}

/* 2026-09-24 私たちについて：見出しエリア
   PC：見出し（左）と本文（右）の2カラムにし、右半分の空きと下の余白を詰める */
@media (min-width:1000px){
  .page-head.ph-split{padding-bottom:clamp(48px,5vw,80px)}
  .page-head.ph-split .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,120px);align-items:end}
  .page-head.ph-split .crumb,.page-head.ph-split .en-label{grid-column:1/-1}
  .page-head.ph-split h1{grid-column:1}
  .page-head.ph-split .lead{grid-column:2;margin:0 0 .4em;max-width:30em}
  .page-head.ph-split + .sec{padding-top:clamp(56px,6vw,88px)}
}
@media (min-width:1000px){.page-head.ph-split .lead .lp{display:inline-block}}