/* ===== BMW CI2020 design language ===== */
:root{
  --white:#ffffff; --ink:#262626; --meta:#757575; --silver:#bbbbbb;
  --blue:#054263; --blue-focus:#03293d;
  --line:#e3e3e3; --line2:#efefef; --dark:#474747; --dark2:#161616;
  --paper:#ffffff;
  --sub:#757575; --rise:#054263;
  --maxw:1280px;
  --disp:"Noto Sans JP","Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --g-eng:#e6edf4; --g-eng-h:#b7cbdd;
  --g-sales:#f5e8e6; --g-sales-h:#e3c2bc;
  --g-mkt:#f6f1de; --g-mkt-h:#e6d9a6;
  --g-adm:#e7efe7; --g-adm-h:#bcd6bd;
  --g-mgmt:#ece8f0; --g-mgmt-h:#cdc0da;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--disp);color:var(--ink);background:var(--paper);line-height:1.3;font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-focus)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue-focus);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
h1,h2,h3,h4{line-height:1.3;font-weight:400;letter-spacing:0}
.sec{padding:80px 0;border-top:1px solid var(--line2)}
.sec h2{font-size:32px;font-weight:400;line-height:1.3;margin:0 0 32px;text-transform:none}
.sec .lead{color:var(--meta);max-width:680px;margin-bottom:40px;font-size:16px;line-height:1.5}
.mid{color:var(--meta);font-size:14px}
/* ===== header = dark, weight 900 nav ===== */
header{position:sticky;top:0;z-index:50;background:#fcfcfc;border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:32px;height:64px;max-width:100%;margin:0;padding:0 40px}
.logo{display:flex;align-items:center;flex-shrink:0;font-weight:900;font-size:20px;letter-spacing:.02em;color:#262626;text-decoration:none;white-space:nowrap;text-transform:uppercase}
.logo img{height:32px;width:auto;vertical-align:middle}
.logo .logo-mark{display:none}
.logo:hover{color:#262626}
.logo b{color:var(--blue)}
nav.g{margin-left:auto;display:flex;align-items:center;gap:28px}
nav.g>div{position:relative}
nav.g a.top{display:block;padding:20px 0;font-size:15px;font-weight:900;color:#262626;text-decoration:none;white-space:nowrap;text-transform:uppercase;letter-spacing:.01em;border-bottom:2px solid transparent}
nav.g a.top:hover{color:var(--blue);border-bottom-color:var(--blue)}
nav.g .dd{display:none;position:absolute;top:100%;left:0;background:#fcfcfc;padding:8px 0;box-shadow:0 4px 16px rgba(0,0,0,.1);border:1px solid var(--line);z-index:60}
nav.g div:hover .dd,nav.g div:focus-within .dd{display:block}
nav.g .dd a{display:block;padding:12px 20px;font-size:14px;font-weight:400;color:#262626;text-decoration:none;border-left:2px solid transparent;white-space:nowrap}
nav.g .dd a:hover{background:var(--line2);color:var(--blue);border-left-color:var(--blue)}
nav.g .dd a small{display:block;color:var(--meta);font-weight:400;font-size:12px;margin-top:2px}
.navbtns{display:flex;gap:8px;margin-left:24px;align-items:center;flex-shrink:0}
.navbtns .btn.o{color:var(--blue);border:1px solid var(--blue);background:none}
.navbtns .btn.o:hover{background:var(--blue);color:#fff}
.navbtns .btn{white-space:nowrap}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 28px;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;background:none;border:none;font-family:inherit;transition:background .15s,color .15s}
.btn:hover{text-decoration:none}
.btn.p{background:var(--blue);color:#fff}
.btn.p:hover{background:var(--blue-focus);color:#fff}
.btn.o{color:#fff;background:none;border:1px solid #fff}
.btn.o:hover{background:#fff;color:var(--dark)}
.btn.a{background:var(--blue);color:#fff}
.btn.a:hover{background:var(--blue-focus);color:#fff}
.btn.s{padding:10px 20px;font-size:15px}
/* 白背景セクションに置く.btn.o用。通常時は青文字/青枠、ホバーで元のbtn.oの見た目（塗り）にする */
.btn.o.light{color:var(--blue);border-color:var(--blue)}
.btn.o.light:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.micro{display:block;font-size:12px;font-weight:400;margin-top:10px;opacity:.85}
#mnav{display:none}
.mtgl{display:none}
/* ===== hero = full-bleed dark photography ===== */
.hero{position:relative;overflow:hidden;color:#fff;min-height:600px;display:flex;align-items:center;background:var(--dark)}
/* cover＋中央ぞろえ：左右の余白（レターボックス）を出さず full-bleed。
   ヒーロー高さは固定（600px/480px）のため、幅が広いほど cover で上下がクロップされる。
   多少の見切れは許容し（直下の gallery-strip で全員の写真全体を見せているため）、
   構図に依らず安定する中央クロップにしている。 */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
/* hero-2・hero-4・hero-5・hero-6 は中央クロップ（50%）だとギャラリー帯（ほぼ無クロップ）
   より頭上の余白が目立つ、または（hero-4/5は）目が見切れるため、頭上の余白を
   ほぼ消しつつ誰の顔も切れない位置（30%）にする。hero-1・hero-3は中央のままでよい。 */
.hero-bg[src*="hero-2"],.hero-bg[src*="hero-4"],.hero-bg[src*="hero-5"],.hero-bg[src*="hero-6"]{object-position:center 30%}
/* スマホ幅ではヒーローが縦長（幅<高さ相当）になり、cover は上下ではなく左右がクロップされる。
   hero-1・hero-4・hero-6 は顔が中央から大きく外れた位置にあり、左右クロップで顔が
   切れてしまうため、スマホ幅では顔の水平位置に合わせて object-position を個別に寄せる。 */
@media(max-width:860px){
  .hero-bg[src*="hero-1"]{object-position:22% center}
  .hero-bg[src*="hero-4"]{object-position:38% center}
  .hero-bg[src*="hero-6"]{object-position:68% center}
}
.hero-slides .hero-bg{opacity:0;animation:heroFade 18s infinite}
@keyframes heroFade{0%{opacity:0}2%{opacity:1}18%{opacity:1}22%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-slides .hero-bg{animation:none;opacity:0}.hero-slides .hero-bg.on{opacity:1}}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(71,71,71,.65) 0%,rgba(71,71,71,.45) 45%,rgba(30,30,30,.92) 100%)}
.hero .wrap{padding:64px 40px 72px;position:relative;z-index:2;width:100%}
.hero h1{font-size:72px;font-weight:300;letter-spacing:.01em;line-height:1.1;text-transform:uppercase}
.hero p.sub{margin:28px 0 40px;max-width:600px;color:#f0f0f0;font-size:19px;font-weight:300;line-height:1.5;min-height:calc(19px * 1.5 * 2)}
.hero-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-text-link{color:#fff;font-size:16px;font-weight:700;text-decoration:none;border-bottom:1px solid #fff;padding-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.hero-text-link:hover{color:var(--blue);border-bottom-color:var(--blue)}
.gallery-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--dark)}
.gallery-strip img{width:100%;height:140px;object-fit:cover;display:block;filter:saturate(.92)}
/* ギャラリー帯も hero-bg と同じ写真を使っており、高さを縮めるほど中央クロップでは
   顔の上側が切れやすい（hero-2・hero-4・hero-5・hero-6）。hero-bg と同じ位置（30%）に
   寄せることで、幅861px以上で高さを詰めても顔が切れないようにする。 */
.gallery-strip img[src*="hero-2"],.gallery-strip img[src*="hero-4"],.gallery-strip img[src*="hero-5"],.gallery-strip img[src*="hero-6"]{object-position:center 30%}
/* 幅861px以上（スマホ・タブレット幅は対象外）では、ヒーロー高さを「画面の高さから
   ヘッダー(65px)・ギャラリー帯(112px)・自己紹介ボックス(3行想定で141px+余白18px)を
   差し引いた残り」に一致させる。こうすることで、実際のビューポート高さがどんな値でも
   「30秒で自己紹介」が必ずファーストビューに収まり（画面が低いほどヒーローが自動的に
   縮む）、それより画面が高い分だけヒーローがそのまま大きくなる。336=65+112+141+18。 */
@media(min-width:861px){
  .hero{min-height:clamp(340px,calc(100vh - 336px),720px)}
  .hero .wrap{padding:clamp(32px,4.5vh,60px) 40px clamp(32px,4.5vh,60px)}
  .hero p.sub{min-height:0;margin:14px 0 22px}
  .gallery-strip img{height:112px}
}
.intro-box{padding:32px 40px;background:var(--dark);color:#fff;font-size:16px;line-height:1.6;font-weight:300}
.intro-box b{font-weight:700;color:#fff}
/* article card */
.acard{background:var(--white);text-decoration:none;color:var(--ink);display:block;border-bottom:1px solid var(--line)}
.acard:hover{text-decoration:none}
.acard:hover h3{color:var(--blue)}
.acard .thumb{width:100%;aspect-ratio:40/21;height:auto;object-fit:cover;background:var(--dark);display:block}
.acard .abody{padding:20px 0}
.acard h3{font-size:17px;font-weight:400;margin-bottom:8px;line-height:1.3}
/* work/engineer の「代表的なプロジェクト事例」：タグと社名の間を広げ、社名を大きく強調する */
#cases .acard h3{margin-top:14px;font-size:22px;font-weight:400}
/* Wantedly公式ウィジェット：widget.jsがiframeにインラインstyleでdata-width/data-heightのpx値を
   直接セットするため、!importantでの上書きが必須。狭幅では幅100%まで縮めて横はみ出しを防ぐ */
.wantedly-embed{text-align:center}
.wantedly-embed iframe[src*="platform.wantedly.com/company_feeds"]{width:100% !important;max-width:700px !important;height:660px !important}
/* office gallery = full-bleed grid */
.ogallery{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.ogallery img{width:100%;height:220px;object-fit:cover;display:block;filter:saturate(.92)}
@media(max-width:860px){.gallery-strip{grid-template-columns:repeat(3,1fr)}.ogallery{grid-template-columns:repeat(2,1fr)}}
/* 「読み物で知るEVERRISE」内の小ブロック（技術ブログ/DXブログ/Wantedly）の境目を明確にする */
.subsec{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.subsec:first-of-type{margin-top:0;padding-top:0;border-top:none}
/* grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
/* card = sharp, borderless, hairline divider */
.card{padding:28px 0;border-top:2px solid var(--ink);background:none;text-decoration:none;color:var(--ink);display:block}
.grid2 .card,.grid3 .card,.grid4 .card{border-top:2px solid var(--ink)}
a.card:hover h3{color:var(--blue)}
.card h3{font-size:20px;font-weight:400;margin-bottom:10px;line-height:1.3}
.card p{font-size:15px;color:var(--meta);line-height:1.5}
.card .tag{margin-bottom:12px}
.tag{display:inline-block;font-size:12px;font-weight:900;color:var(--blue);margin-right:14px;letter-spacing:.06em;text-transform:uppercase}
.tag.amb{color:var(--ink)}
.tag.grn{color:var(--ink)}
/* numbers = big light figures */
.numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.num{padding:32px 32px 32px 0;text-align:left;background:none;border-top:2px solid var(--ink)}
.num b{display:block;font-size:56px;color:var(--ink);line-height:1.05;font-weight:300;letter-spacing:0}
.num>span{font-size:14px;color:var(--meta);display:block;margin-top:8px;text-transform:uppercase;letter-spacing:.04em}
.pht{width:100%;height:240px;object-fit:cover;margin-bottom:16px;background:var(--dark)}
/* インタビュー・座談会本文の写真は一覧サムネ(.pht単体)より大きく見せる共通サイズ。
   幅861px以上では420pxで統一。スマホ幅では記事の横幅が420pxの想定(680px設計)より
   ずっと狭くなり、object-fit:cover で左右が強くクロップされてしまうため、
   高さを260pxまで詰めて元の写真比率に近づけ、人物が切れないようにする。 */
.pht-lg{height:420px}
@media(max-width:860px){.pht-lg{height:260px}}
.ph-alt{width:100%;height:240px;margin-bottom:16px;background:var(--dark);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:300;font-size:24px;letter-spacing:.1em;text-transform:uppercase}
/* tables = horizontal rules only */
table.t{width:100%;border-collapse:collapse;font-size:15px;background:none}
table.t th,table.t td{border:none;border-bottom:1px solid var(--line);padding:16px 16px 16px 0;text-align:left;vertical-align:top;line-height:1.4}
table.t th{width:220px;font-weight:700;color:var(--ink)}
/* セル内の項目を縦一列で並べるリスト */
table.t td ul.vlist{list-style:none;margin:0;padding:0}
table.t td ul.vlist li{line-height:1.6}
table.t td ul.vlist li + li{margin-top:6px}
table.t.c{text-align:center}
table.t.c th,table.t.c td{text-align:center;padding:16px 12px}
table.t.c th{width:auto;border-bottom:2px solid var(--ink)}
/* 1日の過ごし方（時刻/やること/詳細）：th に width:110px/260px の固定指定があり、
   合計だけでスマホの表示幅を超えるため、親の overflow-x:auto で横スクロールさせる。
   table.t{width:100%}のままだと無理に収まる幅までつぶれてしまうので、
   横スクロール時はスマホ幅でも内容基準の幅を保つ。 */
@media(max-width:860px){table.t.sched{width:auto;min-width:520px}}
/* grade matrix table (environment#eval) */
table.t.gradetbl{border-collapse:separate;border-spacing:3px}
table.t.gradetbl th,table.t.gradetbl td{border:none;border-radius:2px;padding:14px 10px}
table.t.gradetbl .c-empty{background:var(--line);color:var(--meta)}
table.t.gradetbl .c-eng{background:var(--g-eng)}
table.t.gradetbl .c-eng-h{background:var(--g-eng-h)}
table.t.gradetbl .c-sales{background:var(--g-sales)}
table.t.gradetbl .c-sales-h{background:var(--g-sales-h)}
table.t.gradetbl .c-mkt{background:var(--g-mkt)}
table.t.gradetbl .c-mkt-h{background:var(--g-mkt-h)}
table.t.gradetbl .c-adm{background:var(--g-adm)}
table.t.gradetbl .c-adm-h{background:var(--g-adm-h)}
table.t.gradetbl .c-mgmt{background:var(--g-mgmt)}
table.t.gradetbl .c-mgmt-h{background:var(--g-mgmt-h)}
/* スマホ幅では table.t{width:100%} により9列が無理に収まる幅までつぶれ、
   「管理職/専門職」などの折り返し場所がない語が1文字ずつ縦に折り返されてしまう。
   幅を内容基準に戻し、親の overflow-x:auto で実際に横スクロールさせる。
   あわせて余白・文字サイズを詰めて1画面に入る行数を増やす。 */
@media(max-width:860px){
  table.t.gradetbl{width:auto;min-width:700px}
  table.t.gradetbl th,table.t.gradetbl td{white-space:nowrap;padding:8px 8px;font-size:13px}
  /* 横スクロール中も「どの等級/区分の行か」が分かるよう、先頭2列（Lv./管理職区分）を
     左端に固定表示する。列1の幅を固定し、列2の固定位置(left)をその幅に合わせる。 */
  table.t.gradetbl th:nth-child(1),table.t.gradetbl td:nth-child(1){position:sticky;left:0;width:76px;background:var(--paper);z-index:2;box-shadow:8px 0 0 var(--paper)}
  table.t.gradetbl th:nth-child(2),table.t.gradetbl td:nth-child(2){position:sticky;left:76px;background:var(--paper);z-index:2;box-shadow:2px 0 4px -2px rgba(0,0,0,.25)}
}
/* breadcrumbs / toc */
.crumbs{font-size:13px;color:var(--meta);padding:20px 0;text-transform:uppercase;letter-spacing:.04em}
.crumbs a{color:var(--meta)}
.crumbs a:hover{color:var(--blue)}
.toc{padding:28px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin:24px 0}
.toc b{font-size:13px;font-weight:900;display:block;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.toc ol{margin:0 0 0 20px;font-size:15px}
.toc li{margin-bottom:6px}
/* cta = dark showroom band */
.ctab{padding:64px 40px;margin:0;background:var(--dark);color:#fff;text-align:center}
/* CTAブロックの上下余白。前が .sec の場合はその padding:80px が効くため付けない */
.rel + .ctab{margin-top:80px}
.ctab:last-child{margin-bottom:80px}
.ctab h2{font-size:38px;font-weight:300;margin-bottom:12px;color:#fff;text-transform:uppercase;line-height:1.15}
.ctab p.l{color:var(--silver);font-size:16px;margin-bottom:32px;font-weight:300}
.ctab .row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center}
.ctab .btn.o{border-color:#fff;color:#fff}
.ctab .btn.o:hover{background:#fff;color:var(--dark)}
.ctab .pre{margin-top:28px;font-size:14px;color:var(--silver)}
.ctab .pre a{color:#fff;border-bottom:1px solid var(--silver)}
/* quote = light 300 large */
.quote{border-left:2px solid var(--blue);padding:6px 0 6px 24px;margin:28px 0;font-size:26px;font-weight:300;line-height:1.3}
/* honest = dark block */
.honest{background:var(--dark);color:#fff;padding:28px 32px;margin:28px 0}
.honest h3{color:#fff;font-size:20px;font-weight:400;margin-bottom:12px}
.honest p{color:#e8e8e8}
/* weakness list = borderless, big light numeral + top rule (BMW) */
.weaklist{margin-top:8px}
.weakitem{display:grid;grid-template-columns:96px 1fr;gap:32px;padding:32px 0;border-top:2px solid var(--ink);align-items:center}
.weakitem:last-child{border-bottom:2px solid var(--ink)}
.weakitem .wn{font-size:56px;font-weight:300;line-height:1;color:var(--blue);letter-spacing:0}
.weakitem .wb h3{font-size:22px;font-weight:700;margin-bottom:12px;line-height:1.4}
.weakitem .wb p{font-size:16px;line-height:1.7;color:var(--ink)}
.weakitem .wb p + p{margin-top:8px}
details.faq div p + p{margin-top:12px}
@media(max-width:640px){.weakitem{grid-template-columns:1fr;gap:8px;align-items:start}.weakitem .wn{font-size:44px}}
/* fit / unfit = top rule */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.vs .col{padding-top:20px;border-top:3px solid var(--ink)}
.vs .col.fit{border-top-color:var(--blue)} .vs .col.fit h4{color:var(--blue)}
.vs .col.unfit{border-top-color:var(--ink)} .vs .col.unfit h4{color:var(--ink)}
.vs h4{font-size:18px;font-weight:700;margin-bottom:12px;text-transform:uppercase;letter-spacing:.02em}
.vs ul{margin-left:20px;font-size:15px;line-height:1.6}
.vs li{margin-bottom:6px}
/* steps = numbered, sharp */
.steps{counter-reset:s;display:block}
.step{padding:28px 0 28px 64px;position:relative;border-top:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:28px;width:40px;height:40px;color:#fff;background:var(--blue);font-weight:300;font-size:22px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:19px;font-weight:400}
.step .meta{font-size:14px;color:var(--meta);margin:4px 0 8px}
.step p{font-size:15px;line-height:1.6}
.step p + p{margin-top:8px}
/* faq = sharp accordion */
details.faq{border-bottom:1px solid var(--line);background:none}
details.faq:first-of-type{border-top:2px solid var(--ink)}
details.faq summary{padding:20px 0;font-weight:700;cursor:pointer;font-size:17px}
details.faq summary:hover{color:var(--blue)}
details.faq div{padding:0 0 20px;font-size:15px;color:var(--meta);line-height:1.6}
/* forms = sharp fields */
form .f{margin-bottom:28px}
form label.fl{display:block;font-weight:700;font-size:13px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
form label.fl .req{color:var(--blue);font-size:12px;margin-left:8px}
form input[type=text],form input[type=email],form textarea{width:100%;padding:16px;font-size:16px;border:1px solid var(--silver);background:var(--white);font-family:inherit}
form input[type=text]:focus,form input[type=email]:focus,form textarea:focus{border-color:var(--blue-focus);outline:1px solid var(--blue-focus)}
form input.err,form textarea.err{border-color:var(--ink);border-width:2px}
.errmsg{color:var(--ink);font-size:13px;margin-top:6px;display:none;font-weight:700}
.radios{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--line)}
.radios label{padding:16px 24px 16px 0;cursor:pointer;font-size:15px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line)}
.radios input{width:18px;height:18px;accent-color:var(--blue)}
.radios label:has(input:checked){font-weight:700;color:var(--blue)}
button[disabled]{opacity:.35;cursor:not-allowed}
.confirm{padding:28px 32px;background:var(--dark);color:#fff}
.confirm b{color:#fff}
.mailprev{border-left:2px solid var(--blue);padding:8px 0 8px 24px;font-size:15px;white-space:pre-wrap;margin-top:16px;color:var(--meta);line-height:1.6}
/* news = horizontal rules */
.news li{display:flex;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px}
.news li:first-child{border-top:2px solid var(--ink)}
.news time{color:var(--meta);white-space:nowrap;font-size:14px}
/* org chart */
.org{display:grid;gap:10px;justify-items:center}
.org .box{border:1px solid var(--blue);color:var(--blue);padding:10px 24px;font-weight:700;font-size:15px;background:#fff;text-transform:uppercase;letter-spacing:.02em}
.org .row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.org .box.s{border-color:var(--silver);color:var(--ink);font-weight:400}
.org .v{width:1px;height:18px;background:var(--silver)}
/* footer = dark */
footer{background:#054263;color:var(--silver);margin-top:0;font-size:14px;border-top:none}
footer .wrap{padding:56px 40px 32px}
footer h4{color:#fff;font-size:13px;font-weight:900;margin-bottom:16px;letter-spacing:.06em;text-transform:uppercase}
footer a{color:var(--silver);text-decoration:none}
footer a:hover{color:#fff;text-decoration:none}
footer ul{list-style:none}
footer li{margin-bottom:10px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:40px}
.fnote{border-top:1px solid #333;padding-top:24px;color:#888;font-size:13px}
/* article meta */
.artmeta{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding:16px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);font-size:13px;color:var(--meta);margin:20px 0 36px;text-transform:uppercase;letter-spacing:.03em}
.artmeta b{color:var(--ink);font-weight:700}
.readmeta{font-size:13px;color:var(--meta);display:flex;gap:16px;align-items:center;margin-top:10px;text-transform:uppercase;letter-spacing:.03em}
.readmeta span{white-space:nowrap}
/* 他社比較 */
.cmp{margin:36px 0}
.cmp .h{color:#fff;background:var(--dark);padding:18px 32px;font-weight:400;font-size:20px;text-transform:uppercase;letter-spacing:.02em}
.cmp .b{padding:0}
.cmp .b .ax{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px 32px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:15px;line-height:1.5}
.cmp .b .ax b{color:var(--blue);font-weight:700}
/* journey */
.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:24px 0}
.journey .jstage{padding-top:20px;border-top:3px solid var(--blue)}
.journey .jstage .ph{font-size:12px;font-weight:900;color:var(--blue);letter-spacing:.06em;text-transform:uppercase}
.journey .jstage h4{margin:8px 0 14px;font-size:19px;font-weight:400}
.journey .jstage a{display:block;font-size:15px;margin-bottom:8px}
@media(max-width:720px){.journey{grid-template-columns:1fr}}
/* インタビュー（Q&A形式） */
.ivsec{display:grid;grid-template-columns:96px 1fr;gap:32px;padding:48px 0;border-top:2px solid var(--ink)}
.ivsec:last-child{border-bottom:2px solid var(--ink)}
.ivsec .n{font-size:56px;font-weight:300;line-height:1;color:var(--blue);letter-spacing:0}
.iv{max-width:760px}
.iv h3{font-size:26px;font-weight:400;line-height:1.4;margin-bottom:28px}
.iv p.q{font-size:16px;font-weight:700;line-height:1.6;color:var(--ink);border-left:2px solid var(--blue);padding-left:20px;margin:40px 0 16px}
.iv p.q:first-of-type{margin-top:0}
.iv p{font-size:16px;line-height:1.9;color:var(--ink)}
.iv p + p{margin-top:14px}
@media(max-width:640px){.ivsec{grid-template-columns:1fr;gap:10px;padding:36px 0}.ivsec .n{font-size:44px}}
/* misc */
.notice{padding:16px 0 16px 24px;border-left:2px solid var(--silver);font-size:14px;color:var(--meta);margin:24px 0;line-height:1.6}
.skim{padding:20px 32px;background:var(--dark);color:#fff;font-size:16px;margin-bottom:24px;font-weight:300;line-height:1.6}
.skim b{color:#fff;font-weight:700}
ul.disc{margin:12px 0 12px 22px;font-size:15px;line-height:1.6}
ol.disc{margin:12px 0 12px 22px;font-size:15px;line-height:1.6}
ul.disc li,ol.disc li{margin-bottom:8px}
.rel{border-top:2px solid var(--ink);margin-top:48px;padding-top:28px}
.rel h3{font-size:18px;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:.02em}
@media(max-width:1080px){.wrap,.hrow,.hero .wrap,.ctab,.intro-box,.footer .wrap{padding-left:24px;padding-right:24px}}
/* ヘッダー：グローバルナビが入りきらない幅では詰める → ハンバーガーへ */
@media(max-width:1280px){
  .hrow{gap:16px}
  nav.g{gap:16px}
  nav.g a.top{font-size:14px}
  .navbtns{margin-left:12px}
  .navbtns .btn.s{padding:10px 14px}
}
@media(max-width:1140px){
  nav.g{display:none;position:fixed;inset:64px 0 0 0;background:#fcfcfc;flex-direction:column;align-items:stretch;padding:0;overflow:auto;gap:0}
  nav.g>div{display:block;border-bottom:1px solid var(--line)}
  nav.g a.top{padding:18px 20px;border-bottom:none;font-size:15px}
  nav.g .dd{display:block;position:static;box-shadow:none;border:none;background:var(--line2);padding:0 0 8px}
  #mnav:checked ~ nav.g{display:flex}
  .mtgl{display:flex;align-items:center;margin-left:auto;font-size:14px;font-weight:900;padding:8px 16px;cursor:pointer;background:none;color:#262626;border:1px solid #262626;text-transform:uppercase;white-space:nowrap}
  .navbtns{margin-left:12px}
  .navbtns .micro{display:none}
  .navbtns .btn.o{display:none}
}
@media(max-width:860px){
  .grid2,.grid3,.grid4,.vs,.fgrid,.numgrid{grid-template-columns:1fr;gap:0}
  .hero h1{font-size:38px}
  .hero{min-height:0}
  .hero .wrap{padding-bottom:40px}
  .hero p.sub{min-height:0;margin:14px 0 22px}
  .num{border-top:1px solid var(--line)}
  .num:first-child{border-top:2px solid var(--ink)}
  header .hrow{padding:0 20px}
}
/* 狭幅ではロゴをファビコンのシンボルマークに差し替える */
@media(max-width:640px){
  .logo .logo-full{display:none}
  .logo .logo-mark{display:block}
}
@media(max-width:560px){
  table.t th{width:120px}
  .cmp .b .ax{grid-template-columns:1fr;gap:6px;padding:20px}
  .hero h1{font-size:32px}
}