/*
Theme Name: EXIST Custom
Theme URI: https://exist-custom.com/
Author: EXIST（株式会社グラッド）
Description: 愛知県津島市の作業車カスタム専門店 EXIST の公式テーマ。コンプリートカー・EXIST NEOパーツ・ブログを管理画面から更新できます。
Version: 3.29.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: exist-custom
*/

/* EXIST NEO サイト共通スタイル（黒 × オレンジ・スマホ優先） */
:root{
  --ink:#141719; --ink2:#5B6670; --line:#D9DDD8; --paper:#F4F3EF; --white:#FFFFFF;
  --orange:#F26B1D; --orange-ink:#1A0C03; --orange-soft:#FDE8DA;
  --steel:#5B6670; --powder:#1F2326; --dark:#0F1214;
  --line-green:#06C755;
  --max:1120px; --radius:12px;
  --font-display:"Barlow Condensed","Noto Sans JP",system-ui,sans-serif;
  --font-body:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:target,[id]{scroll-margin-top:96px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.8}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(28px,6vw,44px);font-weight:900}
h2{font-size:clamp(24px,4.5vw,34px);font-weight:800}
h3{font-size:clamp(18px,3.4vw,22px);font-weight:700}
p{margin:0 0 1em}
ul,ol{padding-left:1.3em;margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sec{padding:56px 0}
.sec.alt{background:var(--paper)}
.sec.dark{background:var(--dark);color:var(--paper)}
.sec.dark h2,.sec.dark h3{color:var(--white)}
.eyebrow{font-family:var(--font-display);font-size:13px;letter-spacing:.18em;color:var(--orange);font-weight:700;text-transform:uppercase;margin-bottom:6px}
.lead{font-size:17px;color:var(--ink2);max-width:66ch}
.sec.dark .lead{color:#C9CFD2}
.center{text-align:center}
.center .lead{margin:0 auto 1em}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:10px;font-weight:700;font-family:var(--font-body);border:0;cursor:pointer;text-decoration:none!important;line-height:1.2;font-size:15px;transition:transform .08s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--orange);color:var(--white)}
.btn.line{background:var(--line-green);color:var(--white)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.sec.dark .btn.ghost{color:var(--white);border-color:var(--white)}
.btn.block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ヘッダー */
.hdr{position:sticky;top:0;z-index:50;background:rgba(15,18,20,.96);color:var(--white);backdrop-filter:blur(6px)}
.hdr .in{max-width:var(--max);margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none!important}
.logo .mark{width:40px;height:40px;border-radius:8px;background:var(--ink);display:grid;place-items:center;border:1px solid #2C3236}
.logo .mark svg{width:40px;height:40px}
.logo .mark img{width:40px;height:40px;border-radius:7px;display:block;object-fit:cover}
.logo .t{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:.02em;line-height:1}
.logo .t small{display:block;font-family:var(--font-body);font-weight:500;font-size:10px;color:#A7AFB3;letter-spacing:.06em;margin-top:3px}
.nav{display:none;gap:4px}
.nav a{white-space:nowrap;color:#E8ECEA;font-weight:600;font-size:14px;padding:8px 10px;border-radius:8px;text-decoration:none!important}
.nav a:hover,.nav a[aria-current="page"]{background:#232A2E;color:var(--white)}
.hdr .cta{display:none}
.menu-btn{background:transparent;border:1px solid #3A4247;color:var(--white);border-radius:8px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.drawer{display:none;position:fixed;inset:0;z-index:60;background:var(--dark);color:var(--white);overflow-y:auto;padding:16px}
.drawer.on{display:block}
.drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer nav a{display:block;padding:14px 8px;border-bottom:1px solid #2C3236;color:var(--white);font-weight:600;text-decoration:none!important;font-size:16px}
.drawer nav a small{float:right;color:#A7AFB3;font-size:12px;font-weight:400}
.drawer .group{font-family:var(--font-display);font-size:12px;letter-spacing:.16em;color:var(--orange);padding:16px 8px 4px}
.drawer .ctas{display:grid;gap:10px;margin:18px 0 40px}
@media (min-width:960px){
  .nav{display:flex}
  .menu-btn{display:none}
  .hdr .cta{display:inline-flex;padding:10px 14px;font-size:14px}
}
/* 2026/09/20 「保険修理」を足して項目が9つになった。
   中身の幅が1120pxしかないので、PCでも詰めないと収まらない */
@media (min-width:960px){
  .nav a{font-size:13px;padding:8px 6px}
}
/* さらに狭い画面では、ロゴとSNSも詰める */
@media (min-width:960px) and (max-width:1320px){
  .logo .t{font-size:20px}
  .hdr-sns{display:none}
}

/* SNS */
.sns{display:flex;gap:10px;flex-wrap:wrap}
.sns a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none!important;font-weight:700;font-size:13px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25)}
.sns a svg{width:18px;height:18px}
.sns a:hover{background:rgba(255,255,255,.08)}
.hdr-sns{display:none}
.hdr-sns .sns a{border:0;padding:6px 6px}
.hdr-sns .sns a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.drawer .sns{padding:0 8px}
.drawer-sns{border-bottom:1px solid #2C3236;padding-bottom:14px;margin-bottom:4px}
.drawer-sns .sns{gap:8px}
.drawer-sns .sns a{flex:1 1 0;justify-content:center;padding:12px 6px;border-color:rgba(255,255,255,.35)}
.ftr .sns{margin-top:8px}
.ftr .sns a{color:#C9CFD2;display:inline-flex;padding:6px 10px}
@media (min-width:960px){.hdr-sns{display:block}}

/* パンくず */
.crumb{font-size:12.5px;color:var(--ink2);padding:12px 0}
.crumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.crumb li+li::before{content:"›";margin:0 6px;color:#9AA3A6}
.crumb a{color:var(--ink2)}
.crumb li[aria-current] span{color:var(--ink);font-weight:600}

/* ヒーロー（動画枠） */
.hero{position:relative;background:var(--dark);color:var(--white);overflow:hidden;min-height:78vh;display:flex;align-items:flex-end}
/* 2026/09/19 写真をNV200（斜め前）に替えた。center のままだと車の側面とドアミラーが
   まん中に来て、顔（グリル・ヘッドライト）が画面の外に切れる。64% 42% で顔が右に入り、
   文字が左に来るのでぶつからない */
.hero .poster{position:absolute;inset:0;width:100%;height:100%;background:#0F1214 url(/assets/img/hero-poster.jpg) 64% 42%/cover no-repeat;opacity:.6}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.hero video.ready{opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,20,0) 30%,rgba(15,18,20,.85) 100%)}
.hero-link{position:absolute;inset:0;z-index:1;display:block}
.hero .in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:150px 20px 56px;width:100%}
/* 2026/10/12 ヒーローの写真を押しても何も起きなかったのを直した。
 *
 * なぜ：ヒーロー全体は .hero-link（z-index:1）でリンクになっていたのに、
 *   その上に .in（z-index:2）と ::after（fixed・z-index:1・後勝ち）が
 *   全面をかぶせていて、**指がリンクまで届いていなかった**。
 *   elementFromPoint で13か所たたいて確かめたら、写真・見出し・本文・ボタンの隙間まで
 *   ぜんぶ無反応だった。Clarityのデッドクリックが
 *   2セッション → **6セッション（13.33%）** に増えていた正体がこれ。
 *
 * 直し方：かぶせている2枚をタップに関して透明にして、
 *   本物のリンク（ボタンとタグ）だけが指を受け取るようにする。
 *   残りは下の .hero-link に抜けて、在庫一覧へ行く。
 *   → 13か所たたいて無反応 0 を確認した。
 *
 * ⚠️ .in>* を auto にするやり方ではダメ。見出しと本文のブロックが
 *    横いっぱいに広がっていて、その余白がまた無反応になる（1回それで失敗した）。
 */
.hero::after{pointer-events:none}
.hero .in{pointer-events:none}
.hero .in .btn,.hero .in .chips a{pointer-events:auto}
@media (min-width:800px){.hero .in{padding-top:34vh}}
.hero h1{font-size:clamp(34px,8vw,68px);font-weight:900;line-height:1.1;color:var(--white);margin-bottom:12px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{color:#D6DCDA;font-size:clamp(15px,2.4vw,19px);max-width:44ch}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
/* 2026/09/26 chips を <a> にした（経緯は front-page.php のコメント）。見た目は今までと同じ */
.hero .chips span,.hero .chips a{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;color:#E8ECEA}
.hero .chips a{text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.hero .chips a:hover,.hero .chips a:focus-visible{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.75);color:#fff}
.hero .btn.ghost{color:var(--white);border-color:rgba(255,255,255,.7)}
.hero .note{position:absolute;left:50%;top:8%;transform:translate(-50%,-50%);width:max-content;max-width:90%;text-align:center;z-index:2;font-size:11px;background:rgba(0,0,0,.55);color:#C9CFD2;padding:4px 10px;border-radius:6px;border:1px dashed #5B6670}

/* カード */
.cards{display:grid;gap:16px;grid-template-columns:1fr}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.sec.dark .card{background:#181C1F;border-color:#2C3236}
.card .ph{aspect-ratio:4/3;background:var(--paper);display:grid;place-items:center;color:var(--ink2);font-size:12px;text-align:center;padding:10px;border-bottom:1px solid var(--line)}
.sec.dark .card .ph{background:#232A2E;color:#A7AFB3;border-color:#2C3236}
.card .b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:19px}
.card .price{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--orange)}
.card .price small{font-size:12px;color:var(--ink2);font-family:var(--font-body);font-weight:500;margin-left:6px}
.card .meta{font-size:12.5px;color:var(--ink2)}
.card .more{margin-top:auto;font-weight:700;font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills span{background:var(--paper);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--ink2)}
.sec.dark .pills span{background:#232A2E;color:#C9CFD2}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.cards{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}}

/* 3本柱 */
.pillars{display:grid;gap:14px;grid-template-columns:1fr}
.pillar{border-left:4px solid var(--orange);padding:6px 0 6px 16px}
.pillar h3{margin-bottom:4px}
.pillar p{margin:0;color:var(--ink2);font-size:15px}
@media (min-width:800px){.pillars{grid-template-columns:repeat(3,1fr)}}

/* 数字 */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat b{display:block;font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--orange);line-height:1}
.stat span{font-size:13px;color:var(--ink2)}
@media (min-width:800px){.stats{grid-template-columns:repeat(4,1fr)}}

/* 流れ */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:s}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.step::before{counter-increment:s;content:counter(s);width:44px;height:44px;border-radius:10px;background:var(--ink);color:var(--orange);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:22px}
.step h3{font-size:17px;margin-bottom:2px}
.step p{margin:0;font-size:14.5px;color:var(--ink2)}
@media (min-width:800px){.steps{grid-template-columns:repeat(2,1fr)}}

/* 声 */
.voice{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.voice .stars{color:var(--orange);letter-spacing:.12em;font-size:14px}
.voice p{margin:6px 0 8px;font-size:15px}
.voice .who{font-size:12.5px;color:var(--ink2)}
.voices{display:grid;gap:12px}
@media (min-width:800px){.voices{grid-template-columns:repeat(3,1fr)}}

/* 表 */
table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--white)}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--paper);font-weight:700;color:var(--ink2);font-size:13px;white-space:nowrap}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums}

/* FAQ */
details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px;background:var(--white)}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;gap:10px}
summary::before{content:"Q";color:var(--orange);font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.4}
details p{margin:8px 0 0;font-size:15px;color:var(--ink2)}

/* 記事 */
.post-list{display:grid;gap:14px}
.post{display:grid;grid-template-columns:120px 1fr;gap:14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.post .ph{aspect-ratio:1/1;background:var(--paper);display:grid;place-items:center;font-size:11px;color:var(--ink2);text-align:center;padding:6px}
.post .b{padding:12px 14px 12px 0}
.post h3{font-size:16px;line-height:1.45}
.post .meta{font-size:12px;color:var(--ink2);margin-top:4px}
@media (min-width:800px){.post-list{grid-template-columns:repeat(2,1fr)}}
.article{max-width:760px}
.article h2{font-size:24px;margin:36px 0 12px;border-left:5px solid var(--orange);padding-left:12px}
.article h3{font-size:19px;margin:26px 0 8px}
.article p,.article li{font-size:16px}
.article .meta{font-size:13px;color:var(--ink2);display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.author{display:grid;grid-template-columns:64px 1fr;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--paper);margin-top:32px}
.author .ph{width:64px;height:64px;border-radius:50%;background:#E3E6E1;display:grid;place-items:center;font-size:10px;color:var(--ink2)}
/* 顔写真を入れたとき（2026/09/23）。正方形の写真を丸く切り抜く */
.author img.ph{object-fit:cover;display:block;border:1px solid var(--line)}
.author b{display:block;margin-bottom:2px}
.author p{margin:0;font-size:13.5px;color:var(--ink2)}
.cta-box{background:var(--ink);color:var(--white);border-radius:var(--radius);padding:22px 20px;margin:32px 0}
.cta-box h3{color:var(--white);margin-bottom:6px}
.cta-box p{color:#C9CFD2;font-size:14.5px}
.related{border-top:1px solid var(--line);padding-top:18px;margin-top:28px}
.related h3{font-size:16px;margin-bottom:8px}
.related a{display:block;padding:6px 0;font-size:14.5px}

/* 商品詳細 */
.pd{display:grid;gap:22px}
.pd .gal{display:grid;gap:8px}
.pd .gal .ph{aspect-ratio:4/3;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;font-size:12px;color:var(--ink2);text-align:center;padding:10px}
.pd .gal .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pd .gal .thumbs .ph{aspect-ratio:1/1;font-size:10px}
.pd .buy{border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.pd .buy .price{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--orange);line-height:1}
.pd .buy .price small{font-size:13px;color:var(--ink2);font-family:var(--font-body);font-weight:500;margin-left:6px}
.pd .buy .stock{font-size:13px;color:var(--ink2);margin:6px 0 12px}
@media (min-width:900px){.pd{grid-template-columns:1.2fr 1fr}}
.spec dt{font-weight:700;font-size:13px;color:var(--ink2);margin-top:8px}
.spec dd{margin:0;font-size:15px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.badges span{background:var(--orange-soft);color:var(--orange-ink);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:700}

/* 注意・法律 */
.note{background:var(--orange-soft);border-left:4px solid var(--orange);padding:12px 14px;border-radius:8px;font-size:14px}
.legal{font-size:14.5px}
.legal h2{font-size:20px;margin:28px 0 8px}

/* 会社 */
.dl{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;font-size:15px}
.dl dt{color:var(--ink2);font-weight:500;font-size:13.5px}
.dl dd{margin:0}
.greet{display:grid;gap:16px}
.greet .ph{aspect-ratio:4/5;max-width:280px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;font-size:12px;color:var(--ink2)}
.greet h3{font-size:22px;margin-bottom:8px}
@media (min-width:800px){.greet{grid-template-columns:280px 1fr}}

/* 店舗 */
.map{aspect-ratio:16/9;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;font-size:13px;color:var(--ink2)}
.map iframe{width:100%;height:100%;border:0;display:block}
.two{display:grid;gap:22px}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr}}

/* フォーム */
.form{display:grid;gap:12px;max-width:640px}
.form label{font-weight:700;font-size:14px}
.form label small{font-weight:400;color:var(--ink2);margin-left:6px}
.form input,.form select,.form textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:16px;background:var(--white)}
.form textarea{min-height:140px}

/* フッター */
.ftr{background:var(--dark);color:#C9CFD2;padding:40px 0 100px;font-size:14px}
.ftr .cols{display:grid;gap:22px;grid-template-columns:1fr}
.ftr h4{color:var(--white);font-size:14px;letter-spacing:.1em;margin-bottom:8px;font-family:var(--font-display)}
.ftr a{color:#C9CFD2;display:block;padding:4px 0}
.ftr .co{margin-top:24px;border-top:1px solid #2C3236;padding-top:16px;font-size:12.5px;color:#8C949B}
.ftr .co b{color:var(--white)}
@media (min-width:800px){.ftr{padding-bottom:40px}.ftr .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* スマホ下部固定バー。2026/10/03 からは メール／電話 の2つ（.bar-2） */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#2C3236;padding-bottom:env(safe-area-inset-bottom)}
.bar.bar-2{grid-template-columns:repeat(2,1fr)}
.bar.bar-2 a{padding:11px 2px;font-size:13.5px}
.bar a,.bar .bar-menu{display:grid;place-items:center;padding:9px 2px;font-size:12.5px;font-weight:700;text-decoration:none!important;line-height:1.2;text-align:center;background:var(--white);color:var(--ink);border:0;border-radius:0;width:auto;height:auto;font-family:var(--font-body);cursor:pointer}
.bar small{font-size:10px;font-weight:500;opacity:.8;margin-top:2px}
.bar .bar-menu{background:var(--dark);color:var(--white);gap:0}
.bar .bar-menu svg{width:20px;height:20px}
.bar a.store{background:var(--paper);color:var(--ink);font-size:11.5px;letter-spacing:-.02em;white-space:nowrap}
.bar a.tel{background:var(--ink);color:var(--white)}
.bar a.mail{background:var(--orange);color:var(--white)}
/* ヘッダーの「メールで相談」が出る960px以上まで下のバーを残す
   （800〜959pxでメール導線が消えるのを防ぐ） */
@media (min-width:960px){.bar{display:none}}

/* スクロールで現れる */
.reveal{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .8s cubic-bezier(.16,.84,.3,1),transform .8s cubic-bezier(.16,.84,.3,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal.card img,.reveal.card .ph{transform:scale(1.04);transition:transform 1s cubic-bezier(.16,.84,.3,1)}
.reveal.card.in img,.reveal.card.in .ph{transform:scale(1)}
.card{overflow:hidden}
h2.reveal{transform:translateY(32px)}
.eyebrow.reveal{transform:translateX(-14px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* 写真の「IMAGE」透かし（トップの背景写真以外） */
.imgwrap{position:relative;display:block;container-type:inline-size;line-height:0}
.imgwrap img{width:100%;height:auto}
.wm{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.32em;font-size:clamp(11px,11cqw,56px);color:rgba(255,255,255,.55);text-shadow:0 1px 10px rgba(0,0,0,.45);line-height:1}

/* 補助 */
.grid2{display:grid;gap:16px}
@media (min-width:800px){.grid2{grid-template-columns:1fr 1fr}}
.tags a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;margin:0 6px 6px 0;color:var(--ink)}
/* 本文に置く動画（2026/10/15 梅谷さんのラプター質感の動画がサイト初の動画）
   縦向きで撮られているので、幅を抑えないと画面を占領してしまう。
   preload="none" と poster を本文側で付けてあるので、
   表示しただけでは動画は読み込まれない（押した人だけが読む）。 */
.douga{margin:24px auto;max-width:340px}
.douga video{display:block;width:100%;height:auto;border-radius:10px;background:#0F1214;
  border:1px solid var(--line)}
.douga figcaption{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.douga figcaption strong{color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (min-width:800px){.hero .note{top:34%}}
@media (max-width:799px){
  /* 2026/10/10 スマホのヒーローを 84svh → 62svh に縮めた。
     なぜ：Clarityのスクロール（トップ201ページビュー）で、
       ページの 5% までは 170人（84.6%）が見ているのに、
       10% までくると 116人（57.7%）まで減っていた。**54人がここで帰っていた。**
       実測すると、ヒーローだけでスマホ1.45画面ぶん（1,177px）あり、
       最初の車の写真と支払総額が出てくるのは 1,599px＝ちょうど 10% の位置だった。
       つまり「車を1台も見ないまま帰った人」が4割いたことになる。
     車を 5〜7% の位置まで上げれば、見る人は 57.7% → 80%台に増える勘定。 */
  .hero{min-height:62vh;min-height:62svh}
  /* 横長の写真を縦画面で切り出すと建物と電線ばかりになるので、車のあたりを見せる。
     2026/09/19 写真をNV200（斜め前）に替えた。車高が低いので 72% のままだと
     フロントバンパーのアップになってしまう。55% で車の顔が入る */
  .hero .poster{background-position:center 55%}
  /* 余白を減らして、ボタンを最初の画面に入れる（前は padding-top:46vh でボタンが画面外だった）。
     2026/10/10 上の理由で 24svh → 13svh。見出しとボタンの位置は変わらず、上の空きだけ減る */
  .hero .in{padding:13vh 20px 26px;padding-top:13svh}
  .hero h1{font-size:clamp(30px,8.6vw,40px)}
  .hero .lead{font-size:14.5px;margin-bottom:8px}
  /* 2026/09/26 スマホだけ上下の余白を 3px→7px に。押せるようになったので、指で押せる高さ（約33px）にする。
     chips は btn-row の下にあるので、ここが高くなってもボタンは画面外に押し出されない */
  .hero .chips span,.hero .chips a{font-size:11.5px;padding:7px 12px}
  .hero .btn-row{margin-top:14px}
  .hero .chips{margin-top:12px}
  .hero .btn-row .btn{padding:12px 16px;font-size:14px}
  .hero .note{top:18%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero video{display:none}}


/* ===== WordPress用の追加スタイル ===== */
.card .imgwrap{display:block;aspect-ratio:4/3;border-bottom:1px solid var(--line);overflow:hidden}
.card .imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.sec.dark .card .imgwrap{border-color:#2C3236}
.post .imgwrap{display:block;aspect-ratio:1/1;overflow:hidden}
.post .imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.pd .gal .imgwrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.pd .gal .imgwrap img{width:100%;height:100%;object-fit:cover}
.voice .imgwrap{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-bottom:10px}
.voice .imgwrap img{width:100%;height:100%;object-fit:cover}
.article .imgwrap{border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.alignleft{float:left;margin:0 1.2em 1em 0}
.alignright{float:right;margin:0 0 1em 1.2em}
.aligncenter{margin:0 auto 1em;display:block}
.wp-caption{max-width:100%}
.wp-caption-text,.article figcaption{font-size:13px;color:var(--ink2);margin-top:6px}
.article img{border-radius:var(--radius);height:auto}
.article ul,.article ol{margin-bottom:1.2em}
.article blockquote{border-left:4px solid var(--orange);padding:4px 0 4px 16px;margin:1.2em 0;color:var(--ink2)}
.article .wp-block-heading{scroll-margin-top:80px}
.pagenav{margin-top:28px}
.pagenav .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagenav .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-weight:700;text-decoration:none!important;color:var(--ink);background:var(--white)}
.pagenav .page-numbers.current{background:var(--orange);color:#fff;border-color:var(--orange)}
.pagenav .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.empty{background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius);padding:28px;text-align:center;color:var(--ink2)}
.admin-note{background:var(--note-bg);border:1px solid var(--note-line);border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.wrap>.wp-block-heading{margin-top:32px}

/* ===== お問い合わせフォーム ===== */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button[type=submit]{margin-top:6px}
/* 在庫ページから来た人に「どの車の話か」を見せる（2026/10/04）
   車名を手で書かせると、そこで止まる人がいた */
.form-car{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.form-car img{width:74px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.form-car-t{display:grid;gap:2px;min-width:0}
.form-car-t small{color:var(--ink2);font-size:12px}
.form-car-t b{font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.form-car-t a{font-size:12.5px;color:var(--ink2)}
/* 書くことを3つだけ、入力欄の"上"に出す（これまで送信ボタンの下にあった） */
.form-hint{margin:4px 0 6px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.form-hint b{display:block;color:var(--ink);font-size:14px;margin-top:2px}
.form-note{margin:6px 0 0;font-size:12.5px;color:var(--ink2)}
/* 2026/10/12 フォームのすぐ上の電話（理由は inc/contact.php のコメント） */
.form-tel{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:8px;background:var(--paper);font-size:14px;line-height:1.7;color:var(--ink)}
.form-tel a{font-weight:700;font-size:19px;font-family:var(--font-display);letter-spacing:.02em;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px}
.form-tel span{color:var(--ink2);font-size:12.5px}
@media(max-width:420px){.form-car img{width:60px;height:46px}.form-hint b{font-size:13.5px}}
.form-error{background:#FDECEA;border:1px solid #E0B4AE;border-left:4px solid var(--ng);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:14.5px}
.form-error b{color:var(--ng)}
.form-error ul{margin:6px 0 0;padding-left:18px}
.form-done{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--radius);padding:22px 20px}
.form-done h3{color:var(--ok);margin-bottom:8px}
.form-done p{margin:0;font-size:15px;color:var(--ink2)}
.form-done .btn-row{margin-top:14px}

/* ── 写真がまだ無い枠：一面グレー＋COMING SOON ───────────── */
.ph{aspect-ratio:4/3;background:var(--paper);display:grid;place-items:center;color:var(--ink2);font-size:12px;text-align:center;padding:10px}
.ph.soon{background:#C4C9CC;border-color:#B4BABE;color:#454D53}
.ph.soon span{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.22em;font-size:15px;line-height:1.35;text-indent:.22em}
.sec.dark .card .ph.soon{background:#C4C9CC;border-color:#B4BABE;color:#454D53}
.pd .gal .ph.soon span{font-size:20px}
.pd .gal .thumbs .ph.soon span{font-size:10px;letter-spacing:.1em}
.greet .ph.soon span{font-size:17px}
.post .ph.soon span{font-size:11px;letter-spacing:.12em}
.author .ph.soon span{font-size:9px;letter-spacing:.04em;text-indent:0}
.voice .ph{aspect-ratio:16/9;border-radius:10px;margin-bottom:10px}
.article .ph.soon,.entry .ph.soon{border-radius:var(--radius);margin:14px 0}

/* ── SNS・在庫への導線カード ───────────────────────── */
.sec.follow{background:var(--paper)}
.follows{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.fcard{display:flex;align-items:center;gap:14px;padding:20px 18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.16,.84,.3,1),box-shadow .25s,border-color .25s}
.fcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.fcard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(20,23,25,.12);border-color:#C8CDC6}
.fcard .ic{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.fcard .ic svg{width:26px;height:26px}
.fcard.ig .ic{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}
.fcard.tt .ic{background:#111}
.fcard.goo .ic{background:var(--orange)}
.fcard .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.fcard .tx b{font-family:var(--font-display);font-size:19px;letter-spacing:.02em;line-height:1}
.fcard .tx small{font-size:13px;color:var(--ink2);line-height:1.45}
.fcard .go{margin-left:auto;font-size:13px;font-weight:700;color:var(--orange);white-space:nowrap}
@media(max-width:900px){.follows{grid-template-columns:1fr}.fcard{padding:16px 14px}.fcard .ic{flex:0 0 46px;width:46px;height:46px}.fcard .tx b{font-size:18px}}

/* ── 納車ギャラリー ───────────────────────────────── */
/* 写真の上に「在庫あり／商談中／ご成約」を重ねる。売れた車も残すので、
   ご成約はグレーに落として、買える車が目立つようにしている。 */
.phwrap{display:block;position:relative}
.stockbadge{position:absolute;left:10px;top:10px;z-index:2;display:inline-block;padding:5px 11px;border-radius:999px;background:var(--orange);color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;line-height:1;box-shadow:0 2px 8px rgba(20,23,25,.22)}
.stockbadge.is-sold{background:#5B6469}
.card.sold .imgwrap img{filter:grayscale(.55);opacity:.82}
.card.sold:hover .imgwrap img{filter:none;opacity:1}
.pd .buy .stock.is-sold{display:inline-block;padding:5px 11px;border-radius:999px;background:#5B6469;color:#fff;font-size:12px;font-weight:800;margin:0 0 12px}
.soldnote{font-size:14px;color:var(--ink2);margin:0 0 12px;line-height:1.7}
.pricenote{font-size:12px;color:var(--ink2);margin:-6px 0 14px;line-height:1.65}
/* サブ写真（アイキャッチ以外）。グーネットと同じで、枚数がそのまま情報量になる */
.dgal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.dgal-i{display:block;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dgal-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s cubic-bezier(.16,.84,.3,1)}
.dgal-i:hover img{transform:scale(1.06)}
.dgal-i{cursor:zoom-in}
@media(max-width:600px){.dgal{grid-template-columns:repeat(3,1fr)}}

/* 車種ページの読み物（2026/10/07・inc/shashu-honbun.php）
   在庫から自動で出す数字の表は、ラベルと値を2列で並べる */
.shashu-honbun h2{margin-top:34px}
.shashu-honbun h2:first-child{margin-top:0}
.shashu-honbun h3{margin:22px 0 7px;font-size:17px}
.shashu-honbun p{line-height:1.95}
.shashu-spec{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:baseline;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0}
.shashu-spec dt{margin-top:7px;white-space:nowrap}
.shashu-spec dt:first-of-type{margin-top:0}
.shashu-spec dd{margin-top:7px;font-weight:600}
.shashu-spec dd:first-of-type{margin-top:0}
.shashu-posts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.shashu-posts li{margin:0}
.shashu-posts a{display:block;border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--white);color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;line-height:1.6}
.shashu-posts a::after{content:" ›";color:var(--orange)}
.shashu-posts a:hover{border-color:var(--orange);background:var(--paper)}

/* 色べつ・四駆の在庫（2026/10/07・inc/zaiko-link.php）
   /color/ に並んでいた30台は写真も車名もあるのにリンクが無かった。押せるようにする */
.iro-car-a{display:block;color:inherit;text-decoration:none}
.iro-car-a img{transition:transform .3s cubic-bezier(.16,.84,.3,1)}
.iro-car-a:hover img{transform:scale(1.05)}
.iro-more{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:700;color:var(--orange)}
.iro-car-a:hover .iro-more{text-decoration:underline}
.iro-car-a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:12px}

/* 写真を大きく見る（2026/10/06）
   在庫ページのタップの79%が写真だったのに、押すと生のJPGが別タブで開くだけだった。
   その場で開いて、左右に送れて、閉じれば元の位置に戻る。中身は main.js */
.pv{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center}
.pv[hidden]{display:none}
.pv-img{max-width:94vw;max-height:84vh;object-fit:contain;border-radius:6px;cursor:zoom-out}
.pv button{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:999px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.pv button[hidden]{display:none}
.pv button:hover{background:rgba(255,255,255,.28)}
.pv button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pv-x{top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;font-size:26px}
.pv-p,.pv-n{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:28px}
.pv-p{left:10px}
.pv-n{right:10px}
/* 下の固定バー（高さ52px）と重ならない位置に置く */
.pv-c{position:absolute;bottom:calc(70px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:#fff;font-size:14px;letter-spacing:.06em}
@media(max-width:600px){.pv-img{max-width:100vw;max-height:70vh}.pv-p,.pv-n{width:40px;height:40px;font-size:24px}}

/* こんな相談も受けています（トップ WHY US の下） */
.alsook{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.alsook h3{margin:0 0 10px;font-size:17px}
.alsook ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.alsook li{position:relative;padding-left:20px;font-size:15px;color:var(--ink2);line-height:1.7}
.alsook li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--orange)}
.alsook li b{color:var(--ink);font-weight:700}
@media(min-width:800px){.alsook ul{grid-template-columns:repeat(2,1fr);gap:9px 26px}}

/* h1の中に入れた地域名・業種（見た目は今までのeyebrowと同じ） */
.hero h1 .eyebrow{display:block;font-size:13px;line-height:1.5;font-weight:700;letter-spacing:.14em;color:var(--orange);margin-bottom:8px;text-transform:none}
@media(max-width:600px){.hero h1 .eyebrow{font-size:12px;letter-spacing:.1em}}

/* 「選ばれる理由」の数字タイルをリンクにした（2026/09/20）
   ヒートマップでいちばん押されていたのに、押しても何も起きない場所だった。
   見た目はほぼ今までどおりで、行き先だけ足す。 */
a.stat{display:block;color:inherit;text-decoration:none!important;transition:border-color .15s ease,transform .1s ease,box-shadow .15s ease}
a.stat:hover{border-color:var(--orange);box-shadow:0 2px 14px rgba(242,107,29,.14);transform:translateY(-1px)}
a.stat:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.stat span i{display:block;font-style:normal;color:var(--orange);font-weight:700;font-size:12px;margin-top:7px;letter-spacing:.02em}
a.stat:hover span i{text-decoration:underline}

/* スマホのヒーロー（2026/09/21）
   お客さんの63%がスマホ。

   ・写真は**パソコンと同じもの**を使う（みかちゃん「前の写真がよかった。同じ写真ね」）
   ・ボタンが4つあって**3行**になり、画面の3分の1を占めていた。
     4つ目の「在庫を見る（グーネット）」は**外へ出るリンク**で、
     ヒートマップでも外部へのクリックが17回あった。スマホでは隠して2行にする。
     （パソコンは4つのまま。グーネットへはフッターとメニューからも行ける）
   ・説明文が6行あって画面を圧迫していたので少し詰める

   ※ ボタンの大きさは、もともと @media(max-width:799px) の
     `.hero .btn-row .btn{padding:12px 16px;font-size:14px}` で詰めてある。
     ここで重ねて指定すると詳細度で負けて効かないので、書かない。 */
@media (max-width:600px){
  .hero .btn-row .sp-hide{display:none}
  .hero .btn-row{gap:8px;margin-top:14px}
  .hero .lead{font-size:14px;line-height:1.7}
}

/* ─────────────────────────────────────────────
   スマホ：写真を画面に留めて、文字だけ流す（2026/09/21 試し）
   みかちゃん「写真は固定で文字だけ動くように。
   　　　　　　後ろのNVが文字で見えないところがないように」

   しくみ
   ・写真（.poster）と暗くする膜（::after）を画面に固定する
   ・文字（.in）だけが普通にスクロールで上へ流れる
   ・文字が流れきると、車が丸ごと見える間ができる
   ・そのあと白いセクションが下から上がってきて、写真を覆う

   ヒーローの高さを 145svh にしているのは、
   「文字が流れてから、次のセクションが来るまで」の間をつくるため。

   2026/10/10 その 145svh を 100svh に、padding-top を 26svh → 18svh にした。
   なぜ：145svh ＝ スマホ1.45画面ぶん。そのぶん、売り物の車の写真と支払総額が
     ページの10%の位置まで押し下げられていた。Clarity（トップ201ページビュー）で
     5%までは170人（84.6%）が見ているのに、10%では116人（57.7%）。
     **54人が、車を1台も見ないまま帰っていた。**
     演出のために、商品が4割の人に届いていなかったことになる。
   演出そのものは残してある：写真は画面に固定されたままで、文字だけが流れる。
     文字（約586px）が流れたあと、次のセクションが来るまでに
     まだ 220px ほど「車だけが見える間」が残る。

   ⚠️ ここを直すときは、上にある @media (max-width:799px) の .hero も一緒に見ること。
      600px 以下ではこちらが後勝ちするので、799px のほうだけ直しても効かない
      （2026/10/10 に実際それをやって、1回空振りした）。

   ※ 合わなければ、このブロックごと消せば元に戻る。
   ───────────────────────────────────────────── */
@media (max-width:600px){
  .hero{min-height:100svh;align-items:flex-start}
  .hero .poster{position:fixed;top:0;left:0;width:100%;height:100svh;z-index:0}
  .hero video{position:fixed;top:0;left:0;width:100%;height:100svh;z-index:0}
  .hero::after{position:fixed;top:0;left:0;width:100%;height:100svh;z-index:1}
  .hero .in{position:relative;z-index:2;padding-top:18svh;padding-bottom:0}
  /* 固定した写真の上に、次のセクションがきちんと乗るようにする */
  section.sec{position:relative;z-index:3;background:var(--white)}
  footer.ftr{position:relative;z-index:3}
}

/* ─────────────────────────────────────────────
   お客様の声を、本文の中に引用するとき（2026/09/21）

   グーネットに届いた口コミの、ご本人の文章をそのまま載せる枠。
   誰が・いつ・どの車で書いたかを <cite> に添える。
   （推測で書かない。載せるのは実際に届いた文章だけ）
   ───────────────────────────────────────────── */
.quote{border-left:4px solid var(--orange);background:var(--orange-soft);border-radius:0 8px 8px 0;padding:14px 16px;margin:16px 0}
.quote p{margin:0;font-size:15px;line-height:1.85;color:var(--ink)}
.quote p+p{margin-top:.8em}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:var(--ink2)}

/* よくあるご質問（本文の中に置くQ&A） */
.faq-list{margin:16px 0}
.faq-list dt{font-weight:700;font-size:15px;line-height:1.7;color:var(--ink);position:relative;padding-left:27px;margin-top:18px}
.faq-list dt:first-of-type{margin-top:0}
.faq-list dt::before{content:"Q";position:absolute;left:0;top:.15em;width:19px;height:19px;border-radius:5px;background:var(--orange);color:#fff;font-size:12px;font-weight:700;line-height:19px;text-align:center}
.faq-list dd{margin:8px 0 0 27px;font-size:15px;line-height:1.85;color:var(--ink2)}

/* 納車の日（お客様の声のページ・2026/09/23）
   写真だけを並べる。1枚ずつに説明は付けない（どなたの写真か特定しないため） */
.noshaph{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:22px}
.noshaph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
@media (min-width:700px){.noshaph{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}}

/* ───────────────────────────────────────────────
   車両情報の表（2026/10/03 追加）
   みかちゃん「グーのほうが見やすい」。グーネットと同じ
   2列の表にして、同じ項目をそのまま出す。
   値は _goo_spec.py がグーから取ってメタに入れている。
   ─────────────────────────────────────────────── */
.gspec{margin-top:20px}
.gspec h2{font-size:14.5px;margin:18px 0 8px;padding-left:9px;border-left:3px solid var(--orange);line-height:1.3}
.gspec table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.gspec th,.gspec td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:middle;word-break:break-all}
.gspec th{width:40%;background:var(--paper);font-weight:600;color:var(--ink2)}
.gspec td{background:var(--white);font-weight:700}
.gspec-note{font-size:12.5px;color:var(--ink2);margin:10px 0 0;line-height:1.75}
@media (max-width:420px){
  .gspec th{width:44%}
  .gspec th,.gspec td{padding:6px 8px;font-size:13px}
}