/* =========================================================================
 * home.css — トップページ専用CSS
 * (変数・ベース・ヘッダー/フッターは common.css にあります)
 * ========================================================================= */

/* ---------- レイアウト共通 ---------- */
.shell{max-width:1040px;margin:0 auto;padding:0 20px}
section{padding:64px 0}
@media(max-width:640px){section{padding:44px 0}}
.eyebrow{
  font-size:11.5px;letter-spacing:.22em;font-weight:700;color:var(--brass);
  text-transform:uppercase;margin:0 0 10px;
}
h2.sec-title{font-size:22px;font-weight:800;margin:0 0 8px;letter-spacing:.01em}
.sec-lede{color:var(--sub);font-size:14.5px;max-width:46em;margin:0 0 32px}

/* ---------- ヒーロー(計器盤) ---------- */
.hero{
  background:
    radial-gradient(120% 140% at 50% -10%, var(--ink-3) 0%, var(--ink) 55%),
    var(--ink);
  color:#fff;position:relative;overflow:hidden;padding:8px 0 68px;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px);
}
.hero-inner{position:relative;max-width:1040px;margin:0 auto;padding:0 20px;text-align:center}
.gauge-wrap{width:min(92vw,340px);margin:18px auto 6px}
.gauge-wrap svg{width:100%;height:auto;display:block}
.zone-labels{
  display:flex;justify-content:space-between;max-width:300px;margin:2px auto 0;
  font-size:11px;color:var(--sub-on-dark);padding:0 6px;
}
.zone-labels span:nth-child(2){color:var(--brass-bright);font-weight:700}
.hero h1{
  font-size:clamp(24px,5.4vw,34px);font-weight:800;letter-spacing:.02em;line-height:1.5;
  margin:26px 0 12px;
}
.hero h1 em{font-style:normal;color:var(--brass-bright)}
.hero p.lede{color:var(--sub-on-dark);font-size:14.5px;max-width:34em;margin:0 auto 30px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:14px;
  padding:13px 22px;border-radius:99px;border:1px solid transparent;transition:transform .15s ease;
}
.btn:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn-brass{background:var(--brass);color:#191a12}
.btn-brass:hover{background:var(--brass-bright)}
.btn-outline{border-color:rgba(255,255,255,.28);color:#fff}
.btn-outline:hover{border-color:#fff}
.pr-tag{
  display:inline-block;margin-top:26px;font-size:11px;color:var(--sub-on-dark);
  border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:4px 12px;
}

/* ---------- ツールカード ---------- */
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.tools-grid{grid-template-columns:1fr}}
.tool-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tool-card:hover{border-color:#d8d2c0;box-shadow:0 6px 22px rgba(27,31,39,.06)}
.tool-card .mini-gauge{width:88px;height:52px;margin-bottom:14px}
.tool-card .tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:var(--brass);background:#fbf3e4;border-radius:5px;padding:3px 8px;margin-bottom:10px;width:fit-content;
}
.tool-card h3{font-size:17.5px;font-weight:800;margin:0 0 8px}
.malls-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.mall-tag{display:inline-block;font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 8px;line-height:1.6}
.mall-tag.yahoo{background:var(--mall-y-bg);color:var(--mall-y)}
.tool-card p.desc{color:var(--sub);font-size:13.8px;margin:0 0 16px;flex:1}
.tool-card ul{list-style:none;margin:0 0 20px;padding:0;font-size:13px;color:#3a4150}
.tool-card li{padding:4px 0 4px 18px;position:relative}
.tool-card li::before{content:"◆";position:absolute;left:0;font-size:8px;top:9px;color:var(--brass)}
/* カード下部のボタン。スマホでも押しどころが一目でわかるよう、
   カード幅いっぱいの塗りボタンにしています(高さ54px = 十分なタップ領域)。 */
.tool-card .go{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:54px;padding:14px 20px;margin-top:auto;
  background:var(--ink);color:#fff;
  text-decoration:none;font-weight:800;font-size:15.5px;letter-spacing:.02em;
  border:1px solid var(--ink);border-radius:99px;
  box-shadow:0 2px 0 rgba(27,31,39,.16);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tool-card .go .arrow{color:var(--brass-bright);font-weight:700;transition:transform .15s ease}
.tool-card .go:hover{background:var(--ink-3);border-color:var(--ink-3);transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,31,39,.22)}
.tool-card .go:hover .arrow{transform:translateX(3px)}
.tool-card .go:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(27,31,39,.16)}
@media(prefers-reduced-motion:reduce){
  .tool-card .go:hover{transform:none}
  .tool-card .go:hover .arrow{transform:none}
}

/* ---------- 使い方(ステップ) ---------- */
.steps{background:var(--ink);color:#fff}
.steps .sec-lede{color:var(--sub-on-dark)}
.steps .eyebrow{color:var(--brass-bright)}
.step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.step-row::before{
  content:"";position:absolute;top:23px;left:60px;right:60px;height:1px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px);
}
@media(max-width:720px){.step-row{grid-template-columns:1fr}.step-row::before{display:none}}
.step{padding:0 14px;position:relative;text-align:center}
@media(max-width:720px){.step{text-align:left;padding:0 0 26px 54px;border-left:1px dashed rgba(255,255,255,.2);margin-left:22px}
  .step:last-child{padding-bottom:0}}
.step .tick{
  width:46px;height:46px;border-radius:50%;border:2px solid var(--brass);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  font-family:var(--mono);font-weight:700;font-size:14px;color:var(--brass-bright);
  background:var(--ink-2);position:relative;z-index:1;
}
@media(max-width:720px){.step .tick{position:absolute;left:-23px;top:0;margin:0}}
.step h4{font-size:15px;font-weight:800;margin:0 0 6px}
.step p{font-size:13.3px;color:var(--sub-on-dark);margin:0}

/* ---------- 信頼/開示セクション ---------- */
.trust{background:var(--paper)}
.trust-box{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 20px;font-size:13.6px;color:#3a4150;
}
.trust-box h3{font-size:14.5px;font-weight:800;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.trust-box h3::before{content:"";width:4px;height:14px;background:var(--brass);border-radius:2px}
.trust-box p{margin:6px 0}
.trust-box a{color:var(--needle-deep);text-decoration:underline}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:640px){.trust-grid{grid-template-columns:1fr}}