@charset "UTF-8";
/* ============================================================
   splight tracker LP — site.css
   明るい全面改修版（2026-08-31 / REDESIGN_SPEC v2 準拠）
   ・全面ライト。ダークはフッターのみ
   ・見出し=控えめサイズ x W700-900 x letter-spacing .06-.12em
   ・本文=W400 / 15px / line-height 2.0
   ・セクション余白 96-128px
   ・コントラスト: オレンジ/緑の塗りに白文字は使わない（文字は #12160F 系）
     小サイズの緑文字は #4A8C0C / 小サイズの橙文字は #9A6B00
     本文グレーは #666 まで（#999 系は本文に使わない）
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* --- 画像（?v= はキャッシュバスター。差し替え時に日付を更新） --- */
  --img-ver:"260831";

  /* --- 色 --- */
  --ink:#333333;              /* 基本文字 */
  --ink-strong:#12160F;       /* 見出し・カラー塗りの上の文字 */
  --sub:#555555;
  --sub2:#666666;             /* 本文グレーの下限 */
  --green:#7ED321;            /* 塗り・図解 */
  --green-ink:#5AA80F;        /* 白地の緑（大きめの図形要素のみ・文字には使わない） */
  --green-ink-strong:#3F7A0A; /* 白地の緑文字（小サイズ）。#4A8C0C は白地4.16:1 / #F6F8F4上3.89:1 で
                                 AA(4.5)未達だったため実測にもとづき1段暗くした
                                 （#3F7A0A = 白地5.25:1 / #F6F8F4上4.91:1）。
                                 アイコン線・図解の罫線など「文字でない緑」は #4A8C0C を継続使用（3:1基準を満たす） */
  --green-soft:#F3F9EA;
  --green-line:#D2E5B2;
  --orange:#F5A623;           /* 塗り・図解 */
  --orange-ink:#9A6B00;       /* 白地の橙文字（#F5A623 は白地で 1.9:1 のため文字色には使わない） */
  --orange-soft:#FCF7EE;
  --orange-line:#E7D9BE;
  --dark:#0E1210;             /* フッターのみ */
  --dark2:#171D19;
  --line:#E6EAE4;
  --line2:#D6DCD2;            /* SIM カード・図解の罫線 */
  --bg:#FFFFFF;
  --bg-soft:#F6F8F4;

  /* --- 寸法 --- */
  --radius-btn:4px;   /* ピル型はAIっぽさの典型。ベタ塗り＋角丸控えめ＋アイコン（onca記事準拠） */
  --radius-pill:4px;  /* タグ・ラベル類も同様に矩形寄りへ */
  --radius-card:16px;
  --sec-pad:clamp(76px,9vw,128px);
  --header-h:68px;
  --wrap:1160px;
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink); background:var(--bg);
  font-size:15px; font-weight:400; line-height:2.0;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;               /* hidden は position:sticky/fixed を壊すため clip */
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
sup{font-size:.7em;}

.container{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px);}
.sec{padding:var(--sec-pad) 0;}
.soft{background:var(--bg-soft);}

/* --- フォーカスリング（キーボード操作時のみ可視） --- */
:focus-visible{outline:3px solid var(--green-ink-strong); outline-offset:2px; border-radius:4px;}

/* --- skip link --- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:#fff; color:var(--ink-strong); font-weight:700; font-size:14px;
  border:2px solid var(--green-ink-strong); border-radius:8px; padding:10px 18px;
}
.skip:focus{left:16px; top:16px;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   TYPOGRAPHY — 見出し
   ============================================================ */
.eyebrow{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.24em;
  color:var(--green-ink-strong); line-height:1.8; margin-bottom:12px;
}
.sec-head{margin-bottom:clamp(36px,4vw,56px); max-width:820px;}
.sec-head h2{
  font-size:clamp(24px,3.2vw,38px); font-weight:900; line-height:1.6;
  letter-spacing:.08em; color:var(--ink-strong);
}
.sec-head .lead{margin-top:20px; font-size:15px; color:var(--sub); line-height:2.0;}
.brand-word{color:var(--green-ink-strong);}   /* 見出し中の製品名だけブランド緑に（白地 5.25:1） */
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}

h3{font-size:18px; font-weight:700; letter-spacing:.06em; line-height:1.7; color:var(--ink-strong);}
.sub-head{
  font-size:clamp(17px,2vw,21px); font-weight:800; letter-spacing:.08em;
  color:var(--ink-strong); margin-bottom:20px; padding-left:16px; position:relative;
}
.sub-head::before{
  content:""; position:absolute; left:0; top:.35em; width:6px; height:1.05em;
  background:var(--green); border-radius:3px;
}
.note-s{font-size:12.5px; color:var(--sub2); line-height:1.9; text-wrap:pretty;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  border-radius:var(--radius-btn); font-weight:700;
  padding:16px 34px; font-size:14.5px; letter-spacing:.06em; cursor:pointer;
  border:2px solid transparent; text-align:center;
  transition:border-color .5s ease;
  font-family:inherit; min-height:48px;
  /* 色レイヤー(::before)を文字と矢印の下に敷くための土台 */
  position:relative; overflow:hidden; isolation:isolate; background:#fff;
}
/* 色レイヤー。scaleX で左右方向に伸縮させる（transform-origin の付け替えで進行方向を作る） */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transition:transform .5s ease;
}
/* CTAには方向を示すアイコンを付ける（記事: アイコンを用いたボタンにする） */
.btn-orange::after, .btn-green::after, .btn-outline::after{
  content:""; width:16px; height:8px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M0 4h13M9.5 .8 13.2 4 9.5 7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M0 4h13M9.5 .8 13.2 4 9.5 7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/></svg>") no-repeat center/contain;
  transition:transform .2s ease;
}
.btn-orange:hover::after, .btn-green:hover::after, .btn-outline:hover::after{transform:translateX(4px);}

/* --- 塗りボタン: 通常は色レイヤーが全面。hover で左→右に消え、白地＋色の枠線が残る --- */
.btn-orange{color:var(--ink-strong); border-color:var(--orange);}   /* 橙塗りに白文字は使わない */
.btn-green{color:var(--ink-strong); border-color:var(--green);}     /* 緑塗りに白文字は使わない */
.btn-orange::before{background:var(--orange); transform:scaleX(1); transform-origin:right;}
.btn-green::before{background:var(--green); transform:scaleX(1); transform-origin:right;}
.btn-orange:hover::before, .btn-green:hover::before{transform:scaleX(0); transform-origin:right;}

/* --- 枠線ボタン: 通常は白地。hover で色レイヤーが左→右に塗られる --- */
.btn-outline{color:var(--ink-strong); border-color:var(--line2);}
.btn-outline::before{background:var(--green); transform:scaleX(0); transform-origin:right;}
.btn-outline:hover{border-color:var(--green);}
.btn-outline:hover::before{transform:scaleX(1); transform-origin:left;}

@media (prefers-reduced-motion: reduce){
  .btn, .btn::before{transition:none;}
}

/* ============================================================
   未確定プレースホルダ用のスタイル（現在は本文で未使用）
   ============================================================ */
.todo{
  display:inline-block; background:#FFF4E0; color:#8A5F00;
  border:1px dashed #D9AE55; border-radius:6px; padding:1px 8px;
  font-size:.85em; font-weight:700; white-space:nowrap; line-height:1.7;
}
.todo-block{
  background:#FFFBF2; border:1px dashed #D9AE55; border-radius:12px;
  padding:20px 24px; color:#6E5210; font-size:13.5px; line-height:2;
}
.todo-block .t{font-weight:700; margin-bottom:4px; display:block; color:#5A430C;}
.todo-block ul{margin:0;}
.todo-block li{padding-left:16px; position:relative;}
.todo-block li::before{content:"—"; position:absolute; left:0;}

/* ============================================================
   MOTION
   ============================================================ */
.rv{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1);}
.rv.in{opacity:1; transform:none;}
/* スライドイン（左右から） — 特徴ブロックの図版/本文、用途カード等に付与 */
.rv.rv-l{transform:translateX(-46px);}
.rv.rv-r{transform:translateX(46px);}
.rv.rv-l.in, .rv.rv-r.in{transform:none;}
/* 表示前の要素を横の余白（24px）より大きくずらすと画面の右端を越えるため、余白が狭い 1240px 以下は小さくずらす */
@media (max-width:1240px){
  .rv.rv-l{transform:translateX(-22px);}
  .rv.rv-r{transform:translateX(22px);}
}
/* --- FEATURE 02 の図解アニメーション（太陽が東→西・パネルが±35°で追従） --- */
/* 太陽軌道 M60,210 Q330,10 600,210 上の点を12秒周期でトレース。
   パネルは同じ位相で -35°（朝＝東向き）→ +35°（夕＝西向き）へ回転する */
.f2-sun{animation:f2sun 12s linear infinite;}
@keyframes f2sun{
  0%   {transform:translate(60px,210px);}
  8.3% {transform:translate(105px,177px);}
  16.7%{transform:translate(150px,150px);}
  25%  {transform:translate(195px,128px);}
  33.3%{transform:translate(240px,113px);}
  41.7%{transform:translate(285px,105px);}
  50%  {transform:translate(330px,110px);}
  58.3%{transform:translate(375px,105px);}
  66.7%{transform:translate(420px,113px);}
  75%  {transform:translate(465px,128px);}
  83.3%{transform:translate(510px,150px);}
  91.7%{transform:translate(555px,177px);}
  100% {transform:translate(600px,210px);}
}
.f2-panel{transform-origin:330px 236px; animation:f2panel 12s linear infinite;}
@keyframes f2panel{
  0%   {transform:rotate(-35deg);}
  50%  {transform:rotate(0deg);}
  100% {transform:rotate(35deg);}
}
/* 画面外では止めて負荷を抑える */
.feature-fig:not(.in) .f2-sun, .feature-fig:not(.in) .f2-panel{animation-play-state:paused;}

/* --- 実機動画セクション --- */
.movie-frame{margin:0; border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--line); background:#0E1210;}
.movie-frame video{display:block; width:100%; height:auto; aspect-ratio:960 / 424; object-fit:cover;}
.movie-frame figcaption{
  background:#fff; border-top:1px solid var(--line);
  padding:12px 18px; font-size:12.5px; color:var(--sub2);
}

.shots img{animation:appFloat 7s ease-in-out infinite alternate;}
.shots img:nth-child(2){animation-delay:1.4s;}
@keyframes appFloat{from{transform:translateY(0);} to{transform:translateY(-8px);}}
.pcard,.scard,.ucard,.doc-card,.case-card,.stat{transition:border-color .25s ease, box-shadow .25s ease;}
.pcard:hover,.scard:hover,.ucard:hover,.doc-card:hover,.case-card:hover{
  border-color:var(--green-line); box-shadow:0 10px 26px rgba(20,40,10,.07);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .shots img, .f2-sun, .f2-panel{animation:none !important;}
  .f2-sun{transform:translate(330px,110px);}   /* 静止時は正午の位置 */
  .f2-panel{transform:rotate(0deg);}
  .rv{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ============================================================
   HEADER（ライト・sticky）
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  /* backdrop-filter は position:fixed の子孫の包含ブロックを作るため、
     ヘッダー本体は透明にして、白＋ぼかしは ::before に持たせる。
     こうすると .gnav.open の inset:60px 0 0 0 が画面基準になる */
  background:transparent;
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.site-header.scrolled{box-shadow:0 6px 22px rgba(20,40,10,.07);}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--header-h);}
.brand{display:flex; align-items:center; gap:11px; min-height:44px;}   /* touch-target */
.brand img.mark{width:28px; height:28px;}
.brand img.logo{height:28px; width:auto;}
.brand .tr{
  font-weight:700; letter-spacing:.14em; color:var(--ink-strong); font-size:15px; line-height:1;
  border-left:1px solid var(--line2); padding-left:11px;
}
.gnav{display:flex; align-items:center; gap:26px; font-size:13.5px; font-weight:500;}
.gnav a{position:relative; color:var(--sub); padding:6px 0; letter-spacing:.06em; transition:color .2s;}
.gnav a:hover{color:var(--ink-strong);}
.gnav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.gnav a:not(.btn):hover::after{transform:scaleX(1);}
/* .gnav a{color:var(--sub)} が .btn-orange より詳細度が高く、橙ボタン上で #555（3.68:1）に
   なってしまうため、ここで明示的に上書きする（橙塗り＋濃色文字＝9.7:1） */
.gnav a.btn{color:var(--ink-strong); padding:11px 24px; font-size:13px; box-shadow:0 6px 16px rgba(245,166,35,.22);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:10px; min-height:44px; min-width:44px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink-strong); margin:5px 0; border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   HERO（写真主役・左テキスト／右写真フルブリード）
   ============================================================ */
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; background:var(--bg);
  /* 写真を画面右端まで伸ばさず、本文と同じコンテナ幅(1160)の中に収める */
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
}
.hero-copy{
  padding-block:clamp(56px,7vw,104px);
  padding-inline-start:0;
  padding-inline-end:clamp(24px,4vw,64px);
}
.hero h1{
  font-size:clamp(30px,4.4vw,50px); font-weight:900; line-height:1.5;
  letter-spacing:.09em; color:var(--ink-strong);
}
.hero-lead{margin-top:26px; font-size:15px; color:var(--sub); line-height:2.0; max-width:34em;}
.hero-note{margin-top:14px; font-size:12.5px; color:var(--sub2); line-height:1.9; max-width:38em;}
.hero-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-sub{display:none;}   /* スマホ専用の短いサブコピー */
.hero-top,.hero-bottom{display:contents;}   /* PCでは枠を透過。スマホで縦配置に使う */
.hero-media{height:100%; min-height:100%; position:relative;}
.hero-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:1536 / 730;}

/* ============================================================
   BLOCK 3 — 悩み共感
   ============================================================ */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.pcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:32px 28px;}
.pcard .ic{
  width:46px; height:46px; border-radius:12px; background:var(--green-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pcard h3{margin-bottom:12px;}
.pcard p{font-size:14px; color:var(--sub); line-height:2.0;}
.problem-close{
  margin-top:clamp(32px,4vw,48px); text-align:center;
  font-size:clamp(17px,2.2vw,22px); font-weight:800; letter-spacing:.08em;
  line-height:1.9; color:var(--ink-strong);
}

/* ============================================================
   BLOCK 4 — 解決宣言
   ============================================================ */
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center;}
.about-media img{border-radius:var(--radius-card); width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;}
.catch{
  font-size:clamp(21px,2.9vw,32px); font-weight:900; letter-spacing:.08em;
  line-height:1.7; color:var(--ink-strong); margin-bottom:22px;
}
.about-body p{font-size:15px; color:var(--sub); line-height:2.05;}
.facts{margin-top:28px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.facts li{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; font-size:13px; font-weight:600; color:var(--ink-strong);
  line-height:1.75; letter-spacing:.03em;
}

/* ============================================================
   BLOCK 5 — SIM（ライト再スキン）
   ============================================================ */
.sim-card{
  background:#fff; border:1px solid var(--line2); border-radius:var(--radius-card);
  padding:26px 26px 18px; box-shadow:0 12px 34px rgba(20,40,10,.05);
}
.sim-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.sim-head .t{font-size:14.5px; font-weight:700; color:var(--ink-strong); letter-spacing:.06em;}
.sim-head .clock{font-size:13px; color:var(--green-ink-strong); font-weight:700; font-variant-numeric:tabular-nums;}
.sim-svg{width:100%; height:auto; display:block;}
.sim-ctrl{display:flex; align-items:center; gap:14px; margin-top:12px;}
/* --- touch-target: 指で触る部分は高さ44pxを目安にする（見た目は変えず、触れる範囲だけ広げる） --- */
.sim-ctrl input[type=range]{flex:1; accent-color:var(--green-ink-strong); min-height:44px;}
.sim-ctrl .play{
  background:#fff; border:1.5px solid var(--green-ink-strong); color:var(--green-ink-strong);
  border-radius:var(--radius-pill); padding:8px 20px; font-size:12.5px; font-weight:700; cursor:pointer;
  font-family:inherit; min-height:44px;
}
.sim-ctrl .play:hover{background:var(--green-soft);}
.sim-read{
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
  margin-top:12px; font-size:12.5px; color:var(--sub); font-variant-numeric:tabular-nums;
}
.sim-read b{color:var(--ink-strong);}
.sim-foot{margin-top:14px; font-size:11.5px; color:var(--sub2); line-height:1.9; text-align:left;}
.sim-cta{margin-top:28px; text-align:center;}

/* ============================================================
   BLOCK 6 — 特徴4本（左右交互）
   ============================================================ */
.features{margin-top:8px;}
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,68px);
  align-items:center; padding:clamp(38px,4.5vw,60px) 0;
}
.feature + .feature{border-top:1px solid var(--line);}
/* grid子はmin-width:autoのため、中身（横スワイプの.shots等）のmin-content幅で
   親を突き破る。min-width:0で列幅内に収める（2026-09-15 375px横あふれ修正） */
.feature-fig,.feature-body{min-width:0;}
.feature-fig figure{min-width:0; max-width:100%;}
.shots{max-width:100%;}
.feature:nth-child(odd) .feature-fig{order:2;}
.feature-fig figure{margin:0;}
.feature-fig svg{width:100%; height:auto; display:block;}
.feature-fig .frame{
  background:#fff; border:1px solid var(--line2); border-radius:var(--radius-card); padding:20px;
}
.feature-fig img{border-radius:var(--radius-card); width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;}
.feature-fig figcaption{margin-top:10px; font-size:12px; color:var(--sub2); line-height:1.8;}
.fnum{
  display:inline-block; font-size:12px; font-weight:900; letter-spacing:.22em;
  color:var(--green-ink-strong); margin-bottom:12px;
}
.feature-body h3{
  font-size:clamp(19px,2.5vw,27px); font-weight:900; letter-spacing:.07em;
  line-height:1.7; margin-bottom:18px;
}
.feature-body p{font-size:15px; color:var(--sub); line-height:2.05;}
.feature-body .todo-block,.feature-body .note-s{margin-top:20px;}
.shots{display:flex; gap:20px; justify-content:center; align-items:flex-start;}
.shots img{
  width:48%; max-width:280px; border-radius:22px; border:1px solid var(--line2);
  box-shadow:0 16px 38px rgba(20,40,10,.14); aspect-ratio:440 / 956; object-fit:contain;
  background:#fff; cursor:zoom-in;
}
.shots img:hover{border-color:var(--green-line);}
/* 拡大できることを伝えるヒント（PCは hover、モバイルは常時） */
.shots-hint{
  display:block; text-align:center; margin-top:12px;
  font-size:12px; color:var(--sub2); letter-spacing:.04em;
}

/* --- 全画面ビューア（タップ／クリックで開く） --- */
.shotview{
  position:fixed; inset:0; z-index:400; display:none;
  background:#0A0E0A;   /* 透かすと下のページの文字が説明文と重なって読みにくいので、透過なしにする */
  align-items:center; justify-content:center;
  padding:24px 16px; overscroll-behavior:contain;
}
.shotview[data-open="1"]{display:flex;}
.shotview img{
  max-width:min(440px, 92vw); max-height:86vh; width:auto; height:auto;
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.5); background:#fff;
}
.shotview .close{
  position:absolute; top:14px; right:14px; min-width:48px; min-height:48px;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1);
  color:#fff; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer;
  font-family:inherit;
}
.shotview .close:hover{background:rgba(255,255,255,.2);}
.shotview .cap{
  position:absolute; left:0; right:0; bottom:20px; text-align:center;
  color:rgba(255,255,255,.92); font-size:12.5px; line-height:1.8; padding:0 24px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ============================================================
   BLOCK 7 — 用途3カード（リンク無効）
   ============================================================ */
.uc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.ucard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card);
  overflow:hidden; display:flex; flex-direction:column;
}
.ucard img{width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;}
.ucard .bd{padding:26px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.ucard .tag{
  display:inline-block; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.14em;
  background:var(--green); color:var(--ink-strong); border-radius:var(--radius-pill); padding:3px 14px;
}
.ucard h3{font-size:17px;}
.ucard p{font-size:13.5px; color:var(--sub); line-height:2.0; flex:1;}
.soon{
  display:inline-block; align-self:flex-start; margin-top:4px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--sub2);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-pill); padding:5px 14px;
}

/* スワイプ案内は既定で非表示。760px以下のメディアクエリ側で display:block にする
   （同じ詳細度のため、既定ルールはメディアクエリより前に置く必要がある） */
.uc-hint{display:none;}

/* ============================================================
   BLOCK 8 — 安心して使い続けられる
   ============================================================ */
.sup-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.scard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:30px 26px;}
.scard .ic{
  width:46px; height:46px; border-radius:12px; background:var(--green-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.scard h3{margin-bottom:10px;}
.scard p{font-size:13.5px; color:var(--sub); line-height:2.0;}
.app-block{
  margin-top:clamp(36px,4vw,56px); background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(28px,3.5vw,44px);
}
.app-block h3{margin-bottom:8px; font-size:clamp(18px,2.2vw,23px); font-weight:900; letter-spacing:.07em;}
.app-block > p{font-size:14.5px; color:var(--sub);}
.app-feats{margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:0 34px;}
.app-feats li{
  position:relative; padding:12px 0 12px 32px; font-size:14px; color:var(--sub);
  border-bottom:1px solid var(--line); line-height:1.9;
}
.app-feats li::before{
  content:""; position:absolute; left:4px; top:20px; width:13px; height:7px;
  border-left:2.5px solid var(--green-ink-strong); border-bottom:2.5px solid var(--green-ink-strong);
  transform:rotate(-45deg);
}
.app-feats li b{color:var(--ink-strong); font-weight:700;}
.app-demo{margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;}
.app-demo .note-s{margin:0; flex:1 1 100%;}

/* ============================================================
   BLOCK 9 — データと資料
   ============================================================ */
.data-part + .data-part{margin-top:clamp(48px,5.5vw,80px);}
.chart-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:clamp(22px,3vw,30px);}
.chart-box .canvas svg{display:block; width:100%; height:auto;}
.legend{display:flex; gap:22px; margin-top:16px; font-size:13px; color:var(--sub); flex-wrap:wrap;}
.legend i{display:inline-block; width:22px; height:4px; border-radius:2px; margin-right:7px; vertical-align:middle;}

.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.spec{width:100%; border-collapse:collapse; font-size:14px; background:#fff; min-width:520px;}
table.spec th,table.spec td{border:1px solid var(--line); padding:13px 18px; text-align:left; line-height:1.9;}
table.spec th{width:34%; background:var(--bg-soft); font-weight:600; color:var(--sub); white-space:nowrap;}

.stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:28px;}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:24px; text-align:center;}
.stat .num{font-size:38px; font-weight:900; color:var(--green-ink-strong); line-height:1.2; font-variant-numeric:tabular-nums;}
.stat .lb{font-size:13px; color:var(--sub); margin-top:6px; line-height:1.9;}

.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.case-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; display:flex; flex-direction:column;}
.case-card .ph{
  height:150px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center;
  color:var(--sub2); font-size:12.5px; border-bottom:1px solid var(--line); gap:8px;
}
.case-card .bd{padding:18px 20px 20px;}
.case-card .tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--ink-strong); background:var(--green); border-radius:var(--radius-pill); padding:2px 12px; margin-bottom:8px;
}
.case-card h3{font-size:15px; margin-bottom:4px;}
.case-card p{font-size:12.5px; color:var(--sub2);}

.doc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.doc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card);
  padding:24px 22px 20px; display:flex; flex-direction:column; gap:10px;
}
.doc-card .dic{width:40px; height:40px; border-radius:10px; background:var(--green-soft); display:flex; align-items:center; justify-content:center;}
.doc-card h3{font-size:15px;}
.doc-card p{font-size:12.5px; color:var(--sub2); line-height:1.9; flex:1;}
.doc-btn{
  display:inline-block; border-radius:var(--radius-pill); border:1.5px solid var(--line2);
  color:var(--sub2); font-size:12.5px; font-weight:700; padding:9px 18px;
  text-align:center; background:var(--bg-soft); cursor:default;
}

/* ============================================================
   BLOCK 10 — 導入の流れ ＋ 問い合わせ
   ============================================================ */
.flow{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; counter-reset:step;}
.flow .st{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 14px 16px; text-align:center;}
.flow .st::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; font-weight:900; color:var(--green-ink-strong); font-size:12.5px;
  letter-spacing:.14em; margin-bottom:8px;
}
.flow .st h4{font-size:14px; font-weight:700; margin-bottom:6px; color:var(--ink-strong); line-height:1.7;}
.flow .st p{font-size:11.5px; color:var(--sub2); line-height:1.8;}

.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:center;}
.contact-info .big{font-size:clamp(18px,2.3vw,24px); font-weight:900; letter-spacing:.07em; line-height:1.8; color:var(--ink-strong); margin-bottom:20px;}
.contact-info p{font-size:14px; color:var(--sub); margin-bottom:16px; line-height:2.05;}
.contact-info a{color:var(--green-ink-strong); font-weight:700; text-decoration:underline;}
/* touch-target: 電話・メールのリンクは指で押す想定（それぞれ独立した行にあるので高さを広げても文章は崩れない） */
.contact-info p a[href^="tel:"],.contact-info p a[href^="mailto:"]{display:inline-flex; align-items:center; min-height:44px;}

.form-wrap{background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:clamp(24px,3.5vw,40px);}
form .row{margin-bottom:18px;}
form label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--sub);}
form label .req{color:#C1121F; font-size:11px; margin-left:6px; font-weight:700;}
form ::placeholder{color:var(--sub2); opacity:1;}
form input[type=text],form input[type=email],form input[type=tel],form select,form textarea{
  width:100%; border:1.5px solid var(--line2); border-radius:10px; padding:12px 14px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink); min-height:44px;
}
form input:focus,form select:focus,form textarea:focus{outline:3px solid var(--green-ink-strong); outline-offset:1px; border-color:transparent;}
form [aria-invalid="true"]{border-color:#C1121F; background:#FFF7F7;}
form textarea{min-height:120px; resize:vertical;}
.form-consent{font-size:13px; color:var(--sub); display:flex; gap:10px; align-items:flex-start;}
.form-consent input{width:20px; height:20px; margin-top:6px; flex:0 0 auto; accent-color:var(--green-ink-strong);}
.form-consent label{margin:0; font-weight:400; color:var(--sub); line-height:1.9;}
.form-consent a{color:var(--green-ink-strong); text-decoration:underline; font-weight:600;}
.form-errors{margin-bottom:18px;}
.form-errors:empty{display:none;}
.form-errors .box{
  background:#FFF3F3; border:1.5px solid #E9A9A9; border-radius:10px; padding:14px 18px;
  font-size:13.5px; color:#8A1216; line-height:1.9;
}
.form-errors .box b{display:block; margin-bottom:4px;}
.form-errors li{padding-left:16px; position:relative;}
.form-errors li::before{content:"・"; position:absolute; left:0;}
.form-msg{margin-top:16px; font-size:13.5px; font-weight:700; line-height:1.9; display:none;}
.form-msg.ok{color:var(--green-ink-strong); display:block;}
.form-msg.ng{color:#8A1216; display:block;}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
.sec-more{margin-top:clamp(32px,4vw,48px); text-align:center;}
.uc-more{align-self:flex-start; padding-block:10px; min-height:44px; display:inline-flex; align-items:center; font-size:13.5px; font-weight:700; color:var(--green-ink-strong); text-decoration:underline; text-underline-offset:4px;}
.uc-more::after{content:" →";}
.contact-cta .cta-title{font-family:var(--font-head); font-size:clamp(17px,2vw,20px); font-weight:700; letter-spacing:.04em; line-height:1.6; color:var(--ink-strong); margin-bottom:14px;}
.contact-cta p{font-size:14px; color:var(--sub); line-height:2; margin-bottom:10px;}
.contact-cta .cta-list{list-style:none; margin:0 0 26px; padding:0;}
.contact-cta .cta-list li{position:relative; padding-left:16px; font-size:14px; line-height:1.9; color:var(--ink); margin-bottom:10px;}
/* 日本語は文字の間どこでも改行できるため、狭い幅でカタカナ語が「リパワリン／グ）」のように割れる。句読点・括弧の位置で折り、入りきらない時だけ文字単位で折る */
.contact-info .big,.contact-cta p,.contact-cta .cta-list li,.app-block .note-s,.feature-body .note-s{word-break:keep-all; overflow-wrap:anywhere;}
.nw{white-space:nowrap;}
.contact-cta .cta-list li::before{content:"・"; position:absolute; left:0;}
.contact-cta .btn{width:100%;}
.contact-cta .note-s{font-size:12.5px; color:var(--sub2); margin:14px 0 0;}
.contact-cta a:not(.btn){color:var(--green-ink-strong); text-decoration:underline; font-weight:600;}

/* ============================================================
   FOOTER（ダークはここだけ）
   ============================================================ */
footer{background:var(--dark2); color:rgba(255,255,255,.72); padding:52px 0 32px; font-size:13px;}
.foot-inner{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:26px;}
.foot-co{max-width:460px;}
.foot-addr{font-size:13px; line-height:2.1; color:rgba(255,255,255,.75);}
.foot-addr b{color:#fff; font-weight:700; letter-spacing:.04em;}
.foot-addr a{color:rgba(255,255,255,.88); text-decoration:none;}
/* touch-target: 電話・メールは指で押す想定。行間を変えずに触れる範囲だけ広げる */
@media (max-width:760px){
  .foot-addr a,.foot-links a{display:inline-flex; align-items:center; min-height:44px;}
}
.foot-addr a:hover{color:#fff; text-decoration:underline;}
.foot-links{display:flex; gap:22px; flex-wrap:wrap;}
.foot-links a{color:rgba(255,255,255,.82);}
.foot-links a:hover{color:#fff; text-decoration:underline;}
.copyright{margin-top:26px; font-size:11.5px; color:rgba(255,255,255,.62); text-align:center;}
footer :focus-visible{outline-color:var(--green);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .gnav{gap:18px; font-size:12.5px;}
  .doc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:0; border-bottom:1px solid var(--line);}
  .hero-copy{padding-inline:24px; padding-block:clamp(40px,7vw,64px) clamp(44px,7vw,72px);}
  .hero-media{order:-1;}
  .hero-media img{aspect-ratio:1536 / 730; max-height:52vh;}
  .problem-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .feature{grid-template-columns:1fr; gap:28px;}
  .feature .feature-fig{order:-1 !important;}
  .uc-grid{grid-template-columns:1fr;}
  .sup-grid{grid-template-columns:1fr;}
  .app-feats{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .flow{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  :root{--header-h:60px;}
  /* --- モバイル密度調整: 縦に伸びすぎるのを抑え、初見でキャッチが見えるようにする --- */
  .sec{padding-block:56px !important;}   /* .hero には効かせない（ヒーローの位置計算が56pxずれるため） */
  .sec-head{margin-bottom:26px;}
  .sec-head h2{font-size:23px; line-height:1.55; letter-spacing:.04em;}
  .sec-head .lead{margin-top:14px; font-size:14.5px; line-height:1.9;}
  .eyebrow{font-size:11px; letter-spacing:.18em; margin-bottom:8px;}
  h3{font-size:16.5px; line-height:1.6; letter-spacing:.03em;}
  p{line-height:1.9;}
  .pcard{padding:22px 20px;}
  .scard{padding:22px 20px;}
  .stat{padding:18px;}
  .doc-card{padding:18px 18px 16px;}
  .todo-block{padding:16px 18px; font-size:13px; line-height:1.9;}
  .feature{gap:20px;}
  .feature + .feature{margin-top:44px;}
  .note-s{font-size:12px; line-height:1.8;}

  .gnav{display:none;}
  .gnav.open{
    display:flex; position:fixed; inset:60px 0 0 0; background:#fff;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:22px 24px 32px; gap:6px; overflow:auto; font-size:15px;
    border-top:1px solid var(--line);
  }
  .gnav.open a{padding:14px 4px; border-bottom:1px solid var(--line);}
  .gnav.open .btn{margin-top:14px; border-bottom:none;}
  .nav-toggle{display:block;}
  /* --- スマホのヒーロー: 写真と文字を分けず、写真の上に文字を乗せる一体型 ---
     写真(600px)の空の部分に見出し、下端を白へ溶かしてCTAを乗せる。
     リード文と注記は写真の外（白地）に落とし、写真の上に長文を置かない */
  .hero{
    position:relative; display:block; background:#fff; isolation:isolate;
    /* 写真(1024x1200・実機)を上寄せで置く。幅440px以下はほぼ全体が入り、それより広いと下の地面を切る。幅に連動 */
    --hero-h:min(118vw, 520px);
  }
  .hero-media{
    position:absolute; top:0; left:0; right:0; height:var(--hero-h); min-height:0;
    order:initial; z-index:0;
  }
  .hero-media img{
    width:100%; height:100%; max-height:none; aspect-ratio:auto;
    object-fit:cover; object-position:center 0%;   /* 上寄せ＝空を残して見出しを空の上に置く */
  }
  /* 芝の部分だけを白へ溶かす。パネルは残す */
  .hero-media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 72%,
      rgba(255,255,255,.82) 84%, #FFFFFF 93%, #FFFFFF 100%);
  }
  .hero-copy{
    position:relative; z-index:1; display:block;
    /* 見出しは空の中（写真高さの22%位置）から */
    padding:calc(var(--hero-h) * .03) 24px 30px !important;
  }
  /* 上枠: 見出し群。写真高さの80%（3%→83%）を確保し、CTAを常に写真の83%以降＝芝の白い部分に置く */
  .hero-top{
    display:flex; flex-direction:column; align-items:flex-start;
    min-height:calc(var(--hero-h) * .80);
  }
  .hero-bottom{display:flex; flex-direction:column;}
  .hero-copy .eyebrow{
    margin-bottom:14px;
    font-size:10px; letter-spacing:.14em; line-height:1.6;
    background:rgba(255,255,255,.9); border-radius:4px; padding:5px 10px;
  }
  .hero-copy h1{
    font-size:34px !important; line-height:1.4 !important; letter-spacing:.04em !important;
    text-shadow:0 0 8px rgba(255,255,255,.55), 0 1px 0 rgba(255,255,255,.5);
  }
  /* サブコピーは白地（CTAの直上）に置く。写真の上には見出しだけ */
  .hero-sub{
    order:0; display:block; margin:0 0 14px;
    font-size:14px; font-weight:700; letter-spacing:.04em; line-height:1.8; color:var(--ink-strong);
  }
  .hero-cta{order:1; margin-top:0; gap:10px;}
  .hero-cta .btn{width:100%;}
  .hero-lead{order:2; margin-top:28px; font-size:14px; line-height:1.9; max-width:none;}
  .hero-note{order:3; margin-top:12px; max-width:none;}
  .facts{grid-template-columns:1fr;}
  .sim-card{padding:18px 14px 14px;}
  /* アプリ画面は横並びだと1枚170pxで文字が読めないため、
     1枚ずつ大きく見せる横スワイプに変更する（1枚あたり画面幅の78%） */
  .shots{
    gap:14px; justify-content:flex-start;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:-20px; padding:4px 20px 10px;
  }
  .shots::-webkit-scrollbar{display:none;}
  .shots img{
    flex:0 0 78%; width:auto; max-width:320px; scroll-snap-align:center;
    /* スライダー内は個別のリビールを止める（横スクロールと干渉するため） */
    opacity:1 !important; transform:none !important;
  }
  .stat-row{grid-template-columns:repeat(2,1fr); gap:10px;}
  .stat{padding:14px 8px;}
  .doc-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .btn{padding:15px 26px; font-size:14px;}

  /* --- 用途3カード: 横スワイプのスライダー（縦の長さを1/3以下に圧縮） --- */
  .uc-grid{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:-20px; padding:4px 20px 14px;
  }
  .uc-grid::-webkit-scrollbar{display:none;}
  .uc-grid .ucard{
    flex:0 0 82%; scroll-snap-align:center; margin:0;
    /* スライダー内は個別のスライドインを止める（横スクロールと干渉するため） */
    opacity:1 !important; transform:none !important;
  }
  .uc-grid .ucard img{aspect-ratio:16 / 10;}
  .uc-hint{
    display:block; font-size:12px; color:var(--sub2); margin-top:2px;
    text-align:right; letter-spacing:.04em;
  }

  /* 特徴・実績・工程の圧縮 */
  .feature-fig > figure > img{aspect-ratio:16 / 10 !important;}   /* .shots img（440/956）は対象外 */
  .about-media img{aspect-ratio:16 / 10;}
  .case-card .ph{height:120px;}
  .flow{grid-template-columns:repeat(2,1fr); gap:10px;}
  .flow .st{padding:14px 10px 12px;}
  .table-scroll{margin-inline:-20px; padding-inline:20px;}
}

/* ============================================================
   TYPOGRAPHY 案A「産業機器」（2026-09-10 オーナー選定）
   見出し=Zen Kaku Gothic New W900 / 本文=BIZ UDPGothic / 数字・小見出し=IBM Plex Mono
   AIっぽさの主因だった「太ゴシック×広い字間」をやめ、字間は 0〜.02em に詰める
   ============================================================ */
:root{
  --font-head:'Zen Kaku Gothic New',"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-body:'BIZ UDPGothic',"BIZ UDPゴシック","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
/* --- 見出し --- */
h1,h2,h3,h4,
.hero h1,.sec-head h2,.sub-head,.catch,.problem-close,
.feature-body h3,.app-block h3,.contact-info .big,
.pcard h3,.scard h3,.ucard h3,.case-card h3,.doc-card h3,.flow .st h4{
  font-family:var(--font-head);
}
.hero h1{font-weight:900; letter-spacing:.01em; line-height:1.4;}
.sec-head h2{font-weight:900; letter-spacing:.01em; line-height:1.5;}
.catch{font-weight:900; letter-spacing:.015em;}
.feature-body h3{font-weight:900; letter-spacing:.015em;}
.app-block h3{font-weight:900; letter-spacing:.015em;}
.contact-info .big{font-weight:900; letter-spacing:.015em;}
.problem-close{font-weight:900; letter-spacing:.015em;}
h3,.sub-head,.pcard h3,.scard h3,.ucard h3,.case-card h3,.doc-card h3{font-weight:700; letter-spacing:.02em;}
.flow .st h4{font-weight:700; letter-spacing:.01em;}
.hero-sub{font-family:var(--font-head); font-weight:700; letter-spacing:.02em;}
.brand .tr{font-family:var(--font-head); font-weight:700; letter-spacing:.06em;}

/* --- グラフ3枚を縦に並べるための最小追加（既存トークンのみ使用） --- */
.chart-box + .chart-box{margin-top:22px;}
.chart-box h4{
  font-family:var(--font-head); font-size:15px; font-weight:900; letter-spacing:.02em;
  color:var(--ink-strong); line-height:1.7; margin-bottom:6px;
}
.chart-box .fig-lead{font-size:13.5px; color:var(--sub); line-height:1.95; margin-bottom:18px;}
/* SIM の CTA は問い合わせ欄のボタンへ直接飛ばすため、ヘッダー分の余白を確保する */
#contactCta{scroll-margin-top:calc(var(--header-h) + 16px);}
/* 「splight trackerとは」は本文が短いため、節の上下の余白を詰める（2026-09-16 オーナー指示） */
#about.sec{padding-block:clamp(48px,5vw,72px);}
@media (max-width:760px){
  #about.sec{padding-block:40px !important;}   /* スマホ共通の 56px 指定より優先させる */
}
@media (max-width:760px){
  .hero-copy h1{letter-spacing:.01em !important; line-height:1.38 !important;}
}
/* --- 数字・小見出し（等幅） --- */
.eyebrow,.fnum,.stat .num,.sim-head .clock,.flow .st::before,.card-head .k{
  font-family:var(--font-mono);
}
.eyebrow{font-weight:600; letter-spacing:.12em; font-size:11px;}
.fnum{font-weight:600; letter-spacing:.14em;}
.stat .num{font-weight:600; letter-spacing:-.01em;}
.flow .st::before{font-weight:600; letter-spacing:.1em;}
.hero-copy .eyebrow{letter-spacing:.1em;}
/* --- ボタン・ナビ --- */
.btn{font-family:var(--font-body); font-weight:700; letter-spacing:.03em;}
.gnav{font-family:var(--font-body); font-weight:700; letter-spacing:.03em;}
.ucard .tag,.case-card .tag,.soon{font-family:var(--font-mono); font-weight:600; letter-spacing:.08em;}
/* --- 上部メニュー（タブレット幅）: トップは項目が6つあり、幅761〜800で「特/徴」のように折り返していた（2026-09-17）
   折り返さない指定に加え、幅761〜860だけ文字と間隔を少し詰める。ボタンの高さは48px（指で押せる44px以上） --- */
.gnav a{white-space:nowrap;}
@media (min-width:761px) and (max-width:860px){
  .gnav{gap:14px; font-size:12px;}
  .gnav a.btn{padding:10px 16px; font-size:12px;}
}