/* =========================================================
   ssanet.jp リニューアル トップページ専用スタイル
   `_partials/top-*.php` と `index.php` からのみ読み込む。
   既存の style.css とは独立（下層ページには影響しない）。
   ========================================================= */
/* =========================================================
   SSA renewal design tokens  (カンプから目測で抽出 / 2026-08-28)
   ========================================================= */
:root{
  --navy-900:#0d2645;
  --ink:#0b2a52;
  --blue-700:#084b9e;
  --blue-600:#0b62c8;
  --blue-300:#8fc0f0;
  --teal-600:#2aa383;   /* ボタン・タグの地色（白文字を載せるので濃いまま） */

  /* --- アクセント5色 = 5つの入口アイコンの色。ページ全体でここから採る --- */
  --ac-blue:#0b62c8;    /* 01 ABOUT SSA（操作系の青と共通）*/
  --ac-green:#84cda2;   /* 02 PROJECT   */
  --ac-indigo:#899fe1;  /* 03 COMPANY   */
  --ac-cyan:#91cdda;    /* 04 CAREER    */
  --ac-orange:#f79c5f;  /* 05 JOIN US ＋ ヒーローの「IT」。ページ唯一の暖色 */
  --text:#22374d;
  --muted:#5e738a;
  --line:#e3ecf5;
  --bg:#ffffff;
  --bg-soft:#f6fafd;
  --bg-tint:#eff6fc;

  /* 見出しグラデーション。書き出しは濃い青のまま（前半の濃紺見出しから自然につなぐ）、
     着地はアクセント5色の 04 → 02 で下のセクションと色域をそろえる */
  --grad-brand:linear-gradient(100deg,var(--blue-600) 0%,var(--ac-cyan) 52%,var(--ac-green) 100%);

  --font-en:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --font-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  /* 英字見出しの長体率（A-4 = 92%）。Plus Jakarta Sans は幅軸を持たないため
     横方向の縮小で長体化する。ここ1か所で全体の度合いを調整できる。 */
  --cond-x:.92;
  /* 英字見出しの字間。長体で横に潰すぶん字間も詰まるので、ここで開けて補正する。
     大きい見出しほど詰めて見えるため、ヒーロー用と小見出し用を分けてある。 */
  --track-hero:.01em;
  --track-num:.02em;
  --track-label:.06em;

  /* 画像。モックでは data URI で埋め込んでいる（Artifact は外部ファイルを読めないため）。
     PHP へ移植するときは url(/assets/images/hero/hero-graphic.jpg) 等に置き換える。 */
  --img-hero:url("/assets/images/hero/hero-graphic5.jpg");
  --img-ssa:url("/assets/images/hero/ssa-graphic2.jpg");
  --img-about-hero:url("/assets/images/hero/about-hero.webp");
  --img-recruit-hero:url("/assets/images/hero/recruit-hero.webp");
  --img-members-hero:url("/assets/images/hero/members-hero.webp");
  --img-join-hero:url("/assets/images/hero/join-hero.webp");
  --img-contact-hero:url("/assets/images/hero/contact-hero.webp");
  --img-privacy-hero:url("/assets/images/hero/privacy-hero.webp");
  /* ⚠️ ファイル名だけ他と語順が逆（hero-news）。服部さんが置いたファイル名に合わせている */
  --img-news-hero:url("/assets/images/hero/hero-news.webp");
  --ic-01:url("/assets/icons/01-about-ssa.svg");
  --ic-02:url("/assets/icons/02-what-we-do.svg");
  --ic-03:url("/assets/icons/03-company.svg");
  --ic-04:url("/assets/icons/04-career.svg");
  --ic-05:url("/assets/icons/05-join-us.svg");

  /* 下層ページで使うアイコン（グラデーション線なのでマスクではなくそのまま出す）*/
  --ms-01:url("/assets/icons/ms-01-tsunagaru.svg");
  --ms-02:url("/assets/icons/ms-02-hirogaru.svg");
  --ms-03:url("/assets/icons/ms-03-mirai.svg");

  /* 静岡で働きたい方へ。mr-* は白地の線画からアルファだけ抜いたPNG（CSSの mask で色を当てる）*/
  --mr-01:url("/assets/icons/mr-01.png");
  --mr-02:url("/assets/icons/mr-02.png");
  --mr-03:url("/assets/icons/mr-03.png");
  --mr-04:url("/assets/icons/mr-04.png");
  --mr-05:url("/assets/icons/mr-05.png");
  --vc-01:url("/assets/images/recruit/01-developer.jpg");
  --vc-02:url("/assets/images/recruit/02-system-engineer.jpg");
  --vc-03:url("/assets/images/recruit/03-sales-planning.jpg");
  --vc-04:url("/assets/images/recruit/04-project-leader.jpg");

  --img-bn-work:url("/assets/images/banners/banner-work2.jpg");
  --img-bn-join:url("/assets/images/banners/banner-join.jpg");

  --img-mark:url("/assets/logos/ssa-mark.png");

  /* ヒーローグラフィック（5156×1024）の配置。
     基準はコンテンツ幅（--container）で、画面幅ではない。そのため画面をどれだけ広げても
     見出しと図形の位置関係は動かず、右側だけが画面外へ抜けていく。
       --hero-art-w … コンテンツ幅に対する画像の表示倍率
       --hero-art-l … コンテンツ左端から見た画像左端の位置（マイナス＝左へ送る）
     円をもっと右へ出したいときは --hero-art-l を 0 へ近づける。 */
  --hero-art-w:328%;
  --hero-art-l:-116.7%;  /* 当初の -138% から右へ約250px（1160px 幅換算）*/

  --container:1160px;
  --gut:40px;
  --r-card:14px;
  --r-pill:999px;
  --shadow-card:0 10px 30px rgba(11,42,82,.06);
  --shadow-lift:0 16px 40px rgba(11,42,82,.10);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important;}
}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-jp);
     font-size:15px;line-height:1.9;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px;border-radius:2px;}
img{display:block;max-width:100%;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
.container{width:min(var(--container),calc(100% - var(--gut)*2));margin-inline:auto;}

/* ---------- 共通パーツ ---------- */
.eyebrow{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.16em;
         color:var(--blue-600);text-transform:uppercase;}
.lead{color:var(--muted);font-size:14.5px;line-height:2;}
.link-arrow{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700;
            color:var(--blue-600);padding-bottom:8px;border-bottom:1px solid var(--blue-600);
            transition:.25s;}
.link-arrow span{font-family:var(--font-en);}
.link-arrow:hover{color:var(--blue-700);border-color:var(--blue-700);gap:18px;}
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 30px;border-radius:var(--r-pill);
     font-size:14px;font-weight:700;color:#fff;background:var(--blue-600);transition:.25s;}
.btn:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.btn--teal{background:var(--teal-600);}
.btn--teal:hover{background:#1f8b6f;}
.btn__ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
         background:rgba(255,255,255,.22);font-size:11px;}
.section{padding:96px 0;}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
             backdrop-filter:blur(10px);}
.site-header__inner{height:82px;display:flex;align-items:center;gap:36px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand__mark{width:46px;height:32px;flex:none;
             background:var(--img-mark) left center/contain no-repeat;}
.brand__txt strong{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.4;}
.brand__txt small{display:block;font-family:var(--font-en);font-size:9.5px;font-weight:600;
                  letter-spacing:.08em;color:var(--muted);line-height:1.4;}
.gnav{display:flex;align-items:center;gap:26px;margin-left:auto;}
.gnav a{position:relative;font-size:13.5px;font-weight:700;color:var(--ink);padding:6px 0;
        white-space:nowrap;}
.gnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
               background:var(--blue-600);transition:right .25s;}
.gnav a:hover::after,.gnav a[aria-current]::after{right:0;}
/* 組合員専用はSMSへの外部リンク（SSOの入口）だが、見た目は他のナビと揃える */
/* ハンバーガーはPCでは出さない。ナビが入りきらない幅でのみ切り替わる。
   見た目は既存 style.css のものを踏襲（枠なしの3本線＋「メニュー」）。 */
.menu-btn{display:none;flex-direction:column;align-items:center;gap:4px;
          margin-left:auto;padding:4px;border:0;background:transparent;
          color:var(--ink);font-weight:800;cursor:pointer;}
.menu-btn i{display:block;width:28px;height:3px;background:var(--ink);border-radius:999px;}
.menu-btn em{font-style:normal;font-size:10px;letter-spacing:.04em;}

/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:hidden;}
.hero__inner{position:relative;z-index:2;padding:74px 0 0;}
.hero h1{font-family:var(--font-en);font-size:clamp(46px,6.4vw,88px);
         font-weight:800;line-height:1.02;letter-spacing:var(--track-hero);color:var(--ink);
         transform:scaleX(var(--cond-x));transform-origin:left center;}
.hero h1 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;
            background-clip:text;color:transparent;}
/* 「IT」は情報技術の意。代名詞の it と読まれないよう色で立てる */
.hero__it{color:var(--ac-orange);}
.hero__lead{margin-top:34px;font-size:16px;font-weight:500;line-height:2;color:var(--text);}
.hero__cta{margin-top:38px;}
/* ヒーローグラフィックは見出し・統計（z-index:2）の後ろに敷く */
/* 外枠はコンテンツと同じ幅・同じ中央寄せ。これが位置の基準になる */
.hero__art{position:absolute;top:0;bottom:0;left:0;right:0;margin-inline:auto;
           width:min(var(--container),calc(100% - var(--gut)*2));
           z-index:0;pointer-events:none;}
/* 画像本体は外枠より大きく、左へずらして置く。右へはみ出したぶんは .hero の overflow で切る */
.hero__art span{position:absolute;top:50%;transform:translateY(-50%);
                left:var(--hero-art-l);width:var(--hero-art-w);aspect-ratio:5156/1024;
                background:var(--img-hero) center/100% 100% no-repeat;}
/* 画面右下に residing するセクション送り。押すたびに次のセクションへ、
   最下部まで来たらラベルが TOP に変わり、押すと先頭へ戻る */
.hero__scroll{position:fixed;right:18px;bottom:70px;z-index:40;display:flex;flex-direction:column;
              align-items:center;gap:14px;font-family:var(--font-en);font-size:10px;font-weight:700;
              letter-spacing:.22em;color:var(--muted);writing-mode:vertical-rl;
              cursor:pointer;transition:color .25s;}
.hero__scroll:hover{color:var(--blue-600);}
.hero__scroll::after{content:"";width:1px;height:74px;background:var(--blue-300);
                     transform-origin:top center;animation:scrollHint 2.2s ease-in-out infinite;}
/* 最下部では線を下から上へ伸ばし、「戻る」方向を示す */
.hero__scroll.is-top::after{transform-origin:bottom center;}
.hero__scroll.is-top{color:var(--blue-600);}
@keyframes scrollHint{
  0%   {transform:scaleY(0);opacity:0;}
  25%  {opacity:1;}
  70%  {transform:scaleY(1);opacity:1;}
  100% {transform:scaleY(1);opacity:0;}
}

.hero-stats{position:relative;z-index:2;display:flex;gap:0;margin-top:68px;padding-bottom:44px;}
.hero-stats li{padding:0 54px;border-left:1px solid var(--line);}
.hero-stats li:first-child{padding-left:0;border-left:0;}
.hero-stats b{display:block;font-family:var(--font-en);font-size:42px;font-weight:800;
              line-height:1.1;color:var(--ac-blue);letter-spacing:var(--track-num);
              transform:scaleX(var(--cond-x));transform-origin:left center;}
.hero-stats .is-teal{color:var(--ac-green);font-size:32px;padding-top:8px;}
.hero-stats em{display:block;font-family:var(--font-en);font-size:11px;font-weight:700;
               letter-spacing:.14em;color:var(--muted);font-style:normal;margin-top:6px;}
.hero-stats span{display:block;font-size:12px;color:var(--muted);margin-top:6px;}

/* ---------- OUR COMPANIES ---------- */
.companies{background:var(--bg-soft);padding:56px 0;scroll-margin-top:82px;}
.companies__inner{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:44px;}
.companies__head h2{font-size:20px;font-weight:700;line-height:1.6;color:var(--ink);margin:12px 0 16px;}
/* ロゴ帯。同じ並びを2つ並べたトラックを -50% ずらして、切れ目なくループさせる。
   gap ではなく margin-right で間隔を作る（gap だと -50% がロゴ1周分と一致しない）。 */
.companies__marquee{overflow:hidden;min-width:0; /* グリッド列に収めるため */
                    -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
                            mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.companies__track{display:flex;width:max-content;background:var(--bg-soft);
                  animation:logoMarquee 70s linear infinite;}
.companies__track:hover{animation-play-state:paused;}
@keyframes logoMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.companies__logos{display:flex;align-items:center;}
.companies__logos li{flex:0 0 auto;margin-right:56px;}
.companies__logos li a{display:grid;place-items:center;transition:opacity .25s;}
.companies__logos li a:hover{opacity:.6;}
/* ロゴ画像に焼き込まれた白地を、乗算で下の帯色になじませる */
.companies__logos img{max-width:180px;max-height:48px;width:auto;object-fit:contain;
                      mix-blend-mode:multiply;}

/* ---------- ABOUT ---------- */
/* カンプの実測比（テキスト31% : 余白8% : グラフィック61%）に合わせた列取り。
   コンテナ 1160px で グラフィックは約709px、高さ約283px になる。 */
.about__inner{display:grid;grid-template-columns:.51fr 1fr;align-items:center;gap:90px;}
.about h2{font-size:32px;font-weight:700;line-height:1.55;color:var(--ink);margin:14px 0 22px;}
.about .lead{margin-bottom:30px;}
.about__art{position:relative;}
.about__art-img{display:block;width:100%;aspect-ratio:1500/600;
                background:var(--img-ssa) center/contain no-repeat;
                /* 絵の地色が #fdfdfd で、ページの白との差がグレーの箱に見える。
                   再圧縮で画質を落とさないよう、下層ヒーローと同じく描画時に 255 まで持ち上げる */
                filter:brightness(1.008);}

/* ---------- 5つの入口 ---------- */
.gateways{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.gateways__list{display:grid;grid-template-columns:repeat(5,1fr);}
/* 右パディングを広く取り、矢印より右側に三角の居場所をつくる */
.gateway{--gw-tint:#e6eefa;
         position:relative;overflow:hidden;padding:32px 52px 26px 24px;
         border-left:1px solid var(--line);display:block;transition:background .3s;}
/* 番号・三角ともに、そのセルのアイコン色を基準にそろえる
   --gw-ink  … 番号の色（アイコンと同じ）
   --gw-tint … 三角の色（アイコンの淡色版・明度をL≒95%に統一） */
.gw-blue    {--gw-ink:var(--ac-blue);  --gw-tint:#e4edfa;--gw-icon:var(--ic-01);}
.gw-teal    {--gw-ink:var(--ac-green); --gw-tint:#e9f5ee;--gw-icon:var(--ic-02);}
.gw-navy    {--gw-ink:var(--ac-indigo);--gw-tint:#eaedf9;--gw-icon:var(--ic-03);}
.gw-tealdeep{--gw-ink:var(--ac-cyan);  --gw-tint:#e9f4f8;--gw-icon:var(--ic-04);}
.gw-orange  {--gw-ink:var(--ac-orange);--gw-tint:#fdeee4;--gw-icon:var(--ic-05);}
.gateway:first-child{border-left:0;}
/* 通常は矢印の外側に細く立つ。ホバーで大きく広がり、矢印の下へ回り込む */
.gateway::before{content:"";position:absolute;right:0;bottom:0;width:20%;height:78%;
                 background:var(--gw-tint);clip-path:polygon(100% 0,100% 100%,0 100%);
                 transition:width .38s ease,height .38s ease;}
.gateway:hover::before{width:64%;height:100%;}
/* 番号とアイコンは離さず、すぐ隣に置く */
.gateway__top{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.gateway__num{color:var(--gw-ink);font-family:var(--font-en);font-size:32px;font-weight:800;
              line-height:1;letter-spacing:var(--track-num);
              transform:scaleX(var(--cond-x));transform-origin:left center;}
/* アイコンは単色なのでマスクとして扱い、色は --gw-ink から流し込む。
   これで番号・アイコン・三角が常に同じ色で動く */
.gateway__ic{width:34px;height:34px;flex:none;background:var(--gw-ink);
             -webkit-mask:var(--gw-icon) center/contain no-repeat;
                     mask:var(--gw-icon) center/contain no-repeat;}
.gateway__en{position:relative;display:block;font-family:var(--font-en);font-size:15px;font-weight:800;
             letter-spacing:var(--track-label);color:var(--ink);
             transform:scaleX(var(--cond-x));transform-origin:left center;}
/* 日本語ラベルと矢印は同じ行。矢印は右端へ寄せる */
.gateway__foot{position:relative;display:flex;align-items:center;justify-content:space-between;
               gap:10px;margin-top:0;}
.gateway__jp{font-size:12.5px;color:var(--muted);line-height:1.6;}
.gateway__go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
             border:1px solid var(--line);color:var(--blue-600);font-size:11px;
             background:#fff;transition:.25s;}
.gateway:hover .gateway__go{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}

/* ---------- NEWS ---------- */
.news__inner{display:grid;grid-template-columns:290px 1fr;gap:44px;}
.news__head h2{font-size:26px;font-weight:700;color:var(--ink);margin:10px 0 18px;}
.news__list li{border-top:1px solid var(--line);}
.news__list li:last-child{border-bottom:1px solid var(--line);}
.news__list a{display:grid;grid-template-columns:96px 84px 1fr auto;align-items:center;gap:20px;
              padding:22px 6px;transition:.25s;}
.news__list a:hover{background:var(--bg-soft);}
.news__date{font-family:var(--font-en);font-size:13px;font-weight:600;color:var(--muted);}
.tag{display:grid;place-items:center;height:24px;border-radius:4px;font-size:11px;font-weight:700;color:#fff;}
.tag--info{background:var(--blue-600);} .tag--seminar{background:var(--teal-600);}
/* レポートは暖色。ページ唯一のアクセントなので、活動の記録として目に留まる */
.tag--report{background:var(--ac-orange);}
.news__more{margin-top:20px;}
.news__empty{padding:34px 0;font-size:14px;color:var(--muted);}
.news__ttl{font-size:14.5px;font-weight:500;color:var(--text);}
.news__list a:hover .news__ttl{color:var(--blue-600);}
.news__go{color:var(--blue-600);font-size:14px;}

/* ---------- バナー2枚 ---------- */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.banner{position:relative;overflow:hidden;border-radius:var(--r-card);display:grid;
        grid-template-columns:1fr 218px;min-height:236px;transition:.3s;}
.banner:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.banner--work{background:linear-gradient(120deg,#eef5fd 0%,#e4eefb 100%);}
.banner--work .banner__photo{background-image:var(--img-bn-work);}
.banner--join{background:linear-gradient(120deg,#edf7f2 0%,#e2f2ea 100%);}
.banner--join .banner__photo{background-image:var(--img-bn-join);background-position:center 42%;}
.banner__body{padding:34px 30px;display:flex;flex-direction:column;align-items:flex-start;}
.banner__label{font-size:12px;font-weight:700;color:var(--blue-600);}
.banner--join .banner__label{color:var(--teal-600);}
.banner__body h3{font-size:22px;font-weight:700;line-height:1.55;color:var(--ink);margin:10px 0 12px;}
.banner__body p{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:auto;padding-bottom:0;}
.banners-section{padding-top:0;}
/* 写真の左辺を弧で抜く。at 100% 50% ＝ 右端中心の楕円で切るので、左側だけが湾曲する。
   素材が届いたら中に <img> を入れて object-fit:cover にすれば、そのまま同じ形で収まる。 */
.banner__photo{position:relative;overflow:hidden;
               background:center 30%/cover no-repeat;
               clip-path:ellipse(100% 100% at 100% 50%);
               font-size:11px;color:#8fa2b4;text-align:center;line-height:1.7;}
.banner__photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}

/* ---------- フッター ---------- */
.site-footer{border-top:1px solid var(--line);padding:64px 0 0;}
/* ブランド＋所在地 / リンク3列 / CONTACT の5カラム */
.site-footer__inner{display:grid;grid-template-columns:1fr auto auto auto auto;
                    gap:44px;align-items:start;}
.footer-brand-col{display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
.footer-address{font-size:12px;font-style:normal;color:var(--muted);line-height:1.9;}
.footer-nav{display:grid;gap:14px;font-size:13px;align-content:start;}
.footer-nav a:hover{color:var(--blue-600);}

.footer-contact{display:flex;align-items:center;gap:16px;}
.footer-contact__ic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
                    border:1px solid var(--line);color:var(--blue-600);flex:none;transition:.25s;}
.footer-contact__ic svg{width:24px;height:24px;}
.footer-contact:hover .footer-contact__ic{background:var(--blue-600);border-color:var(--blue-600);
                                          color:#fff;}
.footer-contact__body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.footer-contact__ttl{font-family:var(--font-en);font-size:16px;font-weight:800;letter-spacing:.08em;
                     color:var(--ink);line-height:1.3;}
.footer-contact__lead{font-size:12px;color:var(--muted);line-height:1.6;}
.footer-contact__arrow{font-family:var(--font-en);font-size:14px;color:var(--blue-600);
                       line-height:1;margin-top:2px;transition:transform .25s;}
.footer-contact:hover .footer-contact__arrow{transform:translateX(5px);}
.copyright{margin:52px 0 0;background:var(--navy-900);color:rgba(255,255,255,.72);
           text-align:center;font-size:11.5px;padding:16px 0;letter-spacing:.02em;}

@media (max-width:1000px){
  :root{--gut:24px;}
  .section{padding:64px 0;}
  /* ナビ6項目が入りきらない幅から、ハンバーガーに切り替える */
  .gnav{display:none;}
  .menu-btn{display:inline-flex;}
  .hero__art{opacity:.55;}
  .hero__scroll{display:none;}
  /* 統計3つは折り返さず、必ず横並びを保つ */
  .hero-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;}
  .hero-stats li{padding:0 26px;}
  .companies__inner,.about__inner,.news__inner{grid-template-columns:1fr;gap:28px;}
  /* 幅が取れるので、見出しは折り返さず1行で見せる */
  .companies__head h2{font-size:18px;}
  .companies__head h2 br{display:none;}
  .companies__logos li{margin-right:40px;}
  .companies__logos img{max-width:130px;max-height:34px;}
  .gateways__list{grid-template-columns:repeat(2,1fr);}
  .gateway{border-top:1px solid var(--line);}
  .banners{grid-template-columns:1fr;}
  .site-footer__inner{grid-template-columns:repeat(3,1fr);gap:34px;}
  .footer-brand-col{grid-column:1 / -1;}
  .footer-contact{grid-column:1 / -1;}
}
/* --- スマホ --- */
@media (max-width:700px){
  /* ヒーローが縦に伸びるぶん、グラフィックも拡大して上寄せにする。
     デスクトップと同じく基準はコンテンツ幅なので、構図の比率は保たれる。 */
  :root{--hero-art-w:640%;--hero-art-l:-350%;}
  .hero__art span{top:6%;transform:none;}
  .hero__inner{padding-top:44px;}
  .hero__lead{margin-top:26px;font-size:15px;}
  .hero__cta{margin-top:30px;}

  /* 3列を維持したまま、文字だけ収まるサイズへ落とす */
  .hero-stats{grid-template-columns:repeat(3,1fr);margin-top:54px;padding-bottom:48px;}
  .hero-stats li{padding:0 12px;}
  /* 320px 幅でも SHIZUOKA が列からはみ出さないよう、画面幅に追従させる */
  .hero-stats b{font-size:clamp(20px,6.2vw,28px);}
  .hero-stats .is-teal{font-size:clamp(11.5px,3.5vw,16px);padding-top:7px;}
  .hero-stats em{font-size:9px;letter-spacing:.06em;margin-top:5px;}
  .hero-stats span{font-size:10.5px;margin-top:4px;}
}
@media (max-width:600px){
  .gateways__list{grid-template-columns:1fr;}
  /* 縦積みになるので、弧は左辺から上辺へ回す（下端中心の楕円で切る） */
  .banner{grid-template-columns:1fr;}
  .banner__photo{min-height:170px;clip-path:ellipse(100% 100% at 50% 100%);}
  .banner__body{padding-bottom:26px;}
  .news__list a{grid-template-columns:1fr;gap:8px;}
  .tag{width:74px;}
  .site-footer__inner{grid-template-columns:1fr 1fr;}
}

/* ---------- ドロワーメニュー（1000px 以下でのみ開く） ----------
   既存 style.css のモバイルメニューをそのまま踏襲。色だけ新パレットに読み替えている。 */
body.nav-open{overflow:hidden;}
.mobile-nav{position:fixed;inset:0;z-index:300;visibility:hidden;
            transition:visibility 0s linear .26s;}
.mobile-nav.open{visibility:visible;transition:visibility 0s;}
.mobile-nav__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);
                      opacity:0;transition:opacity .26s ease;}
.mobile-nav.open .mobile-nav__backdrop{opacity:1;}
.mobile-nav__panel{position:absolute;top:0;right:0;height:100%;width:min(80vw,320px);
                   background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.18);
                   padding:60px 0 24px;overflow-y:auto;
                   transform:translateX(100%);transition:transform .26s ease;}
.mobile-nav.open .mobile-nav__panel{transform:translateX(0);}
.mobile-nav__close{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;
                   background:transparent;color:var(--ink);font-size:30px;line-height:1;
                   cursor:pointer;}
.mobile-nav__links{display:flex;flex-direction:column;}
.mobile-nav__links a{padding:15px 24px;color:var(--text);font-weight:700;
                     border-bottom:1px solid var(--line);}
.mobile-nav__links a:active,
.mobile-nav__links a:hover{background:var(--bg-soft);}
.mobile-nav__login{color:var(--blue-600);}
.mobile-nav__login::after{content:" 97";font-size:.9em;}

/* PC ではナビを直接並べるのでドロワーは出さない */
@media (min-width:1001px){
  .mobile-nav{display:none !important;}
}