/* ============================================================
   v11 追加分（2026-09-11）
   これを外せば v10 の見た目に戻る。
   ・グローバルナビ：Instagram を公式配色＋文字添え
   ・グローバルナビ：事業案内のロールオーバー2択
   ・私たちについて：取締役インタビュー
   ・法人営業：5名体制（北信2名）
   ============================================================ */

/* --- Instagram（公式配色のマーク＋Instagram の文字） --- */
.nav-ig{
  width:auto;height:auto;border:0;opacity:1;border-radius:0;margin-left:2px;
  align-self:stretch;flex-direction:column;justify-content:flex-end;align-items:center;gap:0;
  padding:6px 0;
  color:#fff;
}
.nav-ig::after{display:none}
.nav-ig .ig-mark{
  width:27px;height:27px;border-radius:8px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  box-shadow:0 2px 8px rgba(214,36,159,.28);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.nav-ig .ig-mark svg{display:block}
.nav-ig .ig-label{
  display:block;font-family:"Outfit",sans-serif;font-size:9px;letter-spacing:.16em;font-weight:500;
  line-height:inherit;opacity:.9;
}
.nav-ig:hover{background:transparent;color:inherit;border-color:transparent;transform:none;opacity:1}
.nav-ig:hover .ig-mark{transform:translateY(-2px);box-shadow:0 8px 18px rgba(214,36,159,.36)}
header.solid .nav-ig,body.lower .nav-ig{color:var(--ink)}
header:not(.solid) .nav-ig{color:#fff;text-shadow:0 1px 10px rgba(12,33,60,.55)}
header:not(.solid) .nav-ig .ig-label{opacity:1}

/* --- 事業案内：ロールオーバーで2択 --- */
.nav-has-sub{position:relative;display:flex;align-items:center}
.nav-has-sub > .nav-item{display:inline-flex;flex-direction:column;align-items:flex-start}
.nav-has-sub > .nav-item .en-sub{display:block}
.nav-sub{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%,8px);
  min-width:272px;padding:8px;margin-top:10px;
  background:#fff;border-radius:8px;
  box-shadow:0 18px 44px rgba(16,43,78,.18),0 2px 6px rgba(16,43,78,.08);
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s;
  z-index:60;
}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-sub::after{
  content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;
  background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px;
}
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub{
  opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s;
}
nav .nav-sub a{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:5px;
  color:var(--ink)!important;font-size:13.5px;font-weight:700;
  text-shadow:none;white-space:nowrap;
}
nav .nav-sub a::after{display:none}
nav .nav-sub a .ns-n{
  font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--brand);flex:none;
}
nav .nav-sub a .ns-t{display:flex;flex-direction:column;gap:2px}
nav .nav-sub a .ns-en{font-family:"Outfit",sans-serif;font-size:9px;letter-spacing:.16em;font-weight:400;color:var(--ink-60)}
nav .nav-sub a:hover{background:var(--cream-2);color:var(--brand)!important}
@media(max-width:1080px){.nav-has-sub{display:none}}

/* --- 私たちについて：取締役インタビュー --- */
.iv{margin-top:clamp(36px,4.5vw,64px)}
.iv-lead{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.9rem);line-height:1.6;letter-spacing:.02em;
  margin:0 0 10px;
}
.iv-sub{color:var(--ink-60);line-height:1.95;max-width:64ch;margin:0}
.iv-body{max-width:none;margin-top:clamp(28px,3.4vw,44px)}
.iv-body .iv-q,.iv-body .iv-a,.iv-body .iv-two{max-width:none}
/* アコーディオン（初期は閉） */
.iv-acc{margin-top:clamp(28px,3.4vw,44px)}
.iv-acc > summary{list-style:none;cursor:pointer;display:flex;justify-content:center}
.iv-acc > summary::-webkit-details-marker{display:none}
.iv-acc > summary .btn{pointer-events:none}
.iv-acc > summary .close-t{display:none}
.iv-acc[open] > summary .open-t{display:none}
.iv-acc[open] > summary .close-t{display:inline}
.iv-acc[open] > summary{margin-bottom:clamp(20px,2.6vw,32px)}
.iv-acc .iv-body{animation:ivIn .5s var(--ease) both}
@keyframes ivIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.iv-acc .iv-close{display:flex;justify-content:center;margin-top:clamp(26px,3vw,40px)}
/* インタビュー中の写真（3:2・全幅） */
.iv-fig{margin:clamp(30px,3.6vw,48px) 0 clamp(10px,1.4vw,18px);}
.iv-fig img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;display:block;border-radius:4px}
.iv-fig figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-60);letter-spacing:.02em}
/* 写真は全幅、テキストは読みやすい幅で中央に */
.iv-body .iv-q,.iv-body .iv-a,.iv-body .iv-two{max-width:none;margin-left:0;margin-right:0}
.iv-body .iv-a,.iv-body .iv-two{padding-left:46px}
.iv-body .iv-msg,.iv-body .iv-extra{max-width:none}
.iv-body .iv-msg p,.iv-body .iv-extra p,.iv-body .iv-a{max-width:none}
@media(max-width:640px){.iv-body .iv-a,.iv-body .iv-two{padding-left:0}}

.iv-q{
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
  font-weight:700;line-height:1.8;margin:clamp(30px,3.6vw,46px) 0 14px;
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid rgba(16,43,78,.12);
}
.iv-q:first-child{border-top:0;padding-top:0;margin-top:0}
.iv-q .q{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.08em;
  color:var(--brand);line-height:1.8;
}
.iv-a{margin:0 0 14px 46px;line-height:2}
.iv-a + .iv-a{margin-top:0}
.iv-a strong{color:var(--ink)}
.iv-two{margin:6px 0 18px 46px;padding:0;list-style:none;display:grid;gap:10px}
.iv-two li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:14px 18px;background:var(--cream-2);border-radius:4px;line-height:1.9;
}
.iv-two li b{
  font-family:"Shippori Mincho",serif;font-weight:600;color:var(--brand);
  font-size:1.05rem;letter-spacing:.06em;
}
.iv-msg{
  margin:clamp(30px,3.6vw,46px) 0 0;padding:clamp(22px,2.8vw,34px) clamp(22px,3vw,40px);
  background:var(--navy);color:#fff;border-radius:6px;
}
.iv-msg .en{display:block;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.24em;color:var(--lemon);margin-bottom:12px}
.iv-msg p{margin:0;line-height:2;color:rgba(255,255,255,.92)}
.iv-msg p + p{margin-top:10px}
.iv-extra{
  margin:clamp(26px,3vw,40px) 0 0;padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);
  border:1px dashed rgba(16,43,78,.24);border-radius:6px;
}
.iv-extra .en{display:block;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.24em;color:var(--brand);margin-bottom:8px}
.iv-extra h3{font-size:1.02rem;margin:0 0 10px;line-height:1.7}
.iv-extra p{margin:0;line-height:1.95;color:var(--ink-60)}
.iv-extra p + p{margin-top:8px}
@media(max-width:640px){
  .iv-q{grid-template-columns:28px 1fr;gap:8px}
  .iv-a,.iv-two{margin-left:0}
}
.ph.portrait.has-photo{display:block;background:none;border:0;overflow:hidden;border-radius:3px}
.ph.portrait.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.iv-gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(26px,3vw,40px);
}
.iv-gallery figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--cream-2)}
.iv-gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){.iv-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- 採用TOP：取締役からのメッセージ（導線） --- */
.dir-teaser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(24px,4vw,56px);align-items:center}
.dir-teaser .ph{aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--cream-2)}
.dir-teaser .ph img{width:100%;height:100%;object-fit:cover;display:block}
.dir-teaser blockquote{
  margin:0 0 18px;font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.2rem,1rem + 1vw,1.8rem);line-height:1.7;letter-spacing:.02em;
}
.dir-teaser .who{font-size:.92rem;color:var(--ink-60);margin:0 0 22px}
@media(max-width:760px){.dir-teaser{grid-template-columns:1fr}.dir-teaser .ph{max-width:360px}}

/* --- 法人営業：5名体制 --- */
.corp-areas.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){.corp-areas.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.corp-areas.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.corp-areas.five{grid-template-columns:1fr}}
.corp-area .corp-tel{white-space:nowrap;font-size:clamp(.92rem,.8rem + .4vw,1.05rem);font-family:"Outfit",sans-serif;letter-spacing:.01em}
.corp-area .corp-tel a{color:var(--ink);font-weight:700}

/* --- 一日の流れ：休憩の注記 --- */
.day-note{margin-top:18px;font-size:.9rem;color:var(--ink-60)}

/* --- ブログ：中村部長がメイン --- */
.blog-main-note{margin-top:14px;font-size:.9rem;color:var(--ink-60)}

/* --- ブログ記事：写真を大きく、本文を広く（2026-09-11 ryoさん指示） --- */
.blog-article .wrap.narrow{max-width:var(--maxw)}
.blog-body{max-width:none}
.blog-body p{max-width:none;font-size:clamp(1rem,.95rem + .3vw,1.12rem);line-height:2.1}
.blog-figs{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.blog-figs .blog-fig:first-child{grid-column:1/-1}
.blog-figs .blog-fig:first-child img{aspect-ratio:16/9}
.blog-fig img{aspect-ratio:3/2}
@media(max-width:640px){.blog-figs{grid-template-columns:1fr}}

/* ===== v11.1（2026-09-16）ヒーロー写真の差し替え＋縦向き対応 ===== */
/* 縦向きでは各 img の --sp-pos（index.html の style 属性）で人物に焦点を寄せる */
@media (orientation: portrait){
  .hero-bg img{object-position:var(--sp-pos,50% 40%)}
}
/* ===== v11.1 ショップのエリア表（スマホで「北信エリ／ア」と折れていた） ===== */
@media (max-width:640px){
  .sh-areas div{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 16px;white-space:nowrap}
  .sh-areas div .en{letter-spacing:.14em}
}
/* ===== v11.1 本文の行末揃え（サイト全体） =====
   日本語は禁則で行末が揃わず、枠の右側だけ空いて「左に寄って見える」。
   本文段落は両端揃えにして左右のインクを枠に対して対称にする。見出し・ヒーロー・英字は対象外。 */
main p, .sec p, .iv-a, .iv-two li, .iv-msg p, .iv-extra p, .article p, .article li,
.bizedge p, .hist .d, .ft-addr{
  text-align:justify;
}
/* 大きめのリード文（強制改行入り・字が大きい）は字間が開いて見えるので対象外 */
.hero p, .hero-sub, .hero-tagline, .lead, .biz-lead, .column-lead, .iv-lead, .iv-sub,
[style*="text-align:center"] p, .stat .note, .map-ph p{text-align:start}
.stat .note,.map-ph p,[style*="text-align:center"] p{text-align:center}

/* ===== v11.1 取締役インタビュー：PCでは本文を読みやすい幅で中央に（写真は全幅のまま） ===== */
@media(min-width:900px){
  .iv-body .iv-q,.iv-body .iv-a,.iv-body .iv-two,.iv-body .iv-msg,.iv-body .iv-extra,.iv-body .iv-close{
    max-width:min(100%,46em);margin-left:auto;margin-right:auto;
  }
  .iv-body .iv-a,.iv-body .iv-two{padding-left:46px}
}

/* ===== v11.1 TOP ムービー（band と numbers の間） ===== */
.movie{background:var(--cream)}
.movie .h2{margin-bottom:clamp(26px,3.2vw,44px)}
.movie-frame{
  max-width:1280px;margin-inline:auto;aspect-ratio:16/9;
  border-radius:6px;overflow:hidden;background:var(--navy);
  box-shadow:0 24px 60px -24px rgba(16,43,78,.45);
}
.movie-frame video{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:640px){
  .movie .wrap{padding-inline:0}
  .movie .label,.movie .h2{padding-inline:var(--gutter)}
  .movie-frame{border-radius:0}
}

/* ===== v11.1 WHY NOW の3カードにイラスト（当たり枠 .ill を実画像に） ===== */
.ill.has-img{background:#fff;border:1px solid rgba(16,43,78,.08);display:block;overflow:hidden;border-radius:3px}
.ill.has-img img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}

/* ===== v11.1 公式サイトへのブランドリンク（KDDI / au / UQ mobile） ===== */
.brand-links{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px}
.brand-links a{display:inline-flex;align-items:center;transition:opacity .3s}
.brand-links a:hover{opacity:.72}
.brand-links img{display:block;height:auto!important;width:auto!important;max-width:100%;object-fit:contain}
.biz-brand.biz-brand{margin-top:10px}
.biz-brand .brand-links{gap:8px 16px}
.biz-brand .brand-links img{max-height:24px}
.ft-brand{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.ft-brand .brand-links{gap:6px 14px;padding:5px 10px;border-radius:3px;background:rgba(255,255,255,.92)}
.ft-brand .brand-links img{max-height:16px}
.brand-row{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding-top:clamp(18px,2.4vw,30px);padding-bottom:clamp(6px,1.2vw,14px)}
.brand-row-k{font-size:11px;letter-spacing:.24em;color:var(--ink-60)}
.brand-row .brand-links img{max-height:26px}
@media(max-width:640px){
  .ft-brand{align-items:flex-start;flex-direction:column;gap:8px}
}

/* v11.1 制度と福利厚生のイラスト 01〜13 は img/recruit/ben-NN.jpg（16:9・枠比率と同じ） */
/* v11.1 ブランドロゴの微調整：TOP biz の内側 div が .biz-facts div のセル装飾（白地・padding）を継いでいたので打ち消す／
   フッターの白チップ内でロゴを垂直中央に（li の行ボックスぶん上に寄っていた） */
.biz-facts .biz-brand{background:none;padding:0;box-shadow:none}
.brand-links li{display:flex;align-items:center;line-height:0;margin:0;padding:0}
.brand-links a{line-height:0}
.ft-brand .brand-links{align-items:center;padding:7px 12px;line-height:0}