:root{
  --bg:#f6f7f9; --card:#ffffff; --soft:#eef1f4; --line:#e2e6ea;
  --text:#14171a; --muted:#5b6168; --faint:#8b929a;
  --accent:#0f9d8f; --accent-dark:#0a6d63; --accent-soft:#e6f5f3; --accent-line:#cfe9e5;
  --hot:#d93a45; --amber:#c98a12;
  --radius:14px; --maxw:840px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 固定ヘッダー(56px)にアンカー先の見出しが隠れないようにする */
section[id]{scroll-margin-top:64px}
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.85;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px; -webkit-text-size-adjust:100%;
}
/* width/height 属性を持つ画像は height:auto がないと縦に伸びる */
img,video{max-width:100%; height:auto; display:block}
a{color:var(--accent-dark)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.wide{max-width:1060px; margin:0 auto; padding:0 20px}

/* header */
.topbar{position:sticky; top:0; z-index:50; background:rgba(246,247,249,.93); -webkit-backdrop-filter:saturate(1.6) blur(10px); backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line)}
.topbar .wide{display:flex; align-items:center; gap:14px; height:56px}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; text-decoration:none; color:var(--text); white-space:nowrap}
.brand img{width:26px; height:26px; border-radius:7px; border:1px solid var(--line)}
.topbar .spacer{flex:1}
.topbar a.mini{font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap}
.topbar a.mini:hover{color:var(--accent-dark)}
.lang{font-size:12px; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:4px 11px; text-decoration:none; color:var(--muted)}
.lang:hover{border-color:var(--accent); color:var(--accent-dark)}
/* スマホではブランド名テキストを隠してページ内ナビを残す */
@media(max-width:640px){
  .topbar .wide{gap:11px}
  .brand span{display:none}
  .topbar a.mini{font-size:12.5px}
}

/* hero */
.hero{padding:48px 0 8px; background:linear-gradient(180deg,#ffffff 0%,var(--bg) 100%); border-bottom:1px solid var(--line)}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--accent-dark);
  background:var(--accent-soft); border:1px solid var(--accent-line); padding:5px 11px; border-radius:999px; margin-bottom:18px}
h1{font-size:33px; line-height:1.45; margin:0 0 16px; letter-spacing:-.01em; font-weight:800}
h1 .hl{background:linear-gradient(transparent 62%, #ffe9a8 62%)}
.lead{font-size:17px; color:#31363b; margin:0 0 26px}
.cta-row{display:flex; flex-wrap:wrap; gap:11px; margin-bottom:8px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:11px; font-weight:700;
  font-size:15px; text-decoration:none; border:1px solid transparent; transition:.15s}
.btn-main{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-main:hover{background:var(--accent-dark)}
.btn-sub{background:var(--card); color:var(--text); border-color:var(--line)}
.btn-sub:hover{border-color:#c7ced5}
.hero-note{font-size:12.5px; color:var(--faint); margin-top:4px}

/* hero devices */
.devices{display:flex; align-items:flex-end; justify-content:center; gap:30px; flex-wrap:wrap;
  padding:36px 22px 30px; margin:30px 0 0; background:var(--card); border:1px solid var(--line); border-radius:18px}
.dev{text-align:center}
.dev img{filter:drop-shadow(0 12px 30px rgba(20,23,26,.20)) drop-shadow(0 2px 4px rgba(20,23,26,.12))}
.dev.portrait img{width:138px}
.dev.landscape img{width:400px}
.dev b{display:block; margin-top:16px; font-size:13.5px; font-weight:700; letter-spacing:.02em}
.dev span{display:block; margin-top:2px; font-size:12px; color:var(--faint)}
@media(max-width:900px){
  .devices{gap:22px; padding:28px 14px}
  .dev.portrait img{width:110px}
  .dev.landscape img{width:318px}
}
@media(max-width:560px){
  .dev.portrait img{width:104px}
  .dev.landscape{order:-1; width:100%}
  .dev.landscape img{width:100%; max-width:400px; margin:0 auto}
}

/* frames */
.frame{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:0 1px 3px rgba(20,23,26,.05)}
.frame video,.frame img{border-radius:8px; width:100%}
.frame figcaption{font-size:12.5px; color:var(--muted); padding:9px 4px 3px; line-height:1.6}
figure{margin:0}

/* sections */
section{padding:46px 0; border-bottom:1px solid var(--line)}
section:nth-of-type(even){background:var(--card)}
h2{font-size:25px; line-height:1.5; margin:0 0 6px; font-weight:800; letter-spacing:-.01em}
h2 .num{color:var(--accent); font-size:13px; display:block; font-weight:700; letter-spacing:.12em; margin-bottom:6px}
h3{font-size:18.5px; margin:30px 0 8px; font-weight:700}
h4{font-size:16px; margin:22px 0 4px; font-weight:700}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px; padding-left:1.35em}
li{margin:5px 0}
.sub{color:var(--muted); font-size:15px}

/* toc */
.toc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin:30px 0 44px}
.toc h2{font-size:14px; margin:0 0 10px; letter-spacing:.06em; color:var(--muted)}
.toc ol{margin:0; padding-left:1.3em; font-size:15px}
.toc a{text-decoration:none; color:var(--text)}
.toc a:hover{color:var(--accent-dark); text-decoration:underline}

/* callouts */
.note{border-left:3px solid var(--accent); background:var(--accent-soft); padding:14px 18px; border-radius:0 10px 10px 0; margin:20px 0; font-size:15px}
.note.warn{border-left-color:var(--amber); background:#fdf6e6}
.note.key{border-left-color:var(--hot); background:#fdeded}

/* tables */
.tablewrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:12px; background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:440px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:var(--soft); color:var(--muted); font-weight:700; font-size:13px}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.big{font-weight:800; color:var(--accent-dark)}

/* steps */
.steps{counter-reset:s; list-style:none; padding:0; margin:22px 0}
.steps li{counter-increment:s; position:relative; padding:16px 18px 16px 60px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; margin-bottom:10px}
section:nth-of-type(even) .steps li{background:var(--bg)}
.steps li::before{content:counter(s); position:absolute; left:16px; top:15px; width:28px; height:28px; border-radius:8px;
  background:var(--accent); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center}
.steps b{display:block; margin-bottom:2px}
.steps span{font-size:14.5px; color:var(--muted)}

/* cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:14px; margin:22px 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px}
section:nth-of-type(even) .card{background:var(--bg)}
.card h4{margin:0 0 5px; font-size:15.5px}
.card p{margin:0; font-size:14.5px; color:var(--muted)}

/* shots */
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:24px 0}
.shots .frame{padding:7px}
.shots figcaption{font-size:11.5px; padding:7px 2px 2px; text-align:center}

/* app block */
.appbox{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; margin:24px 0}
section:nth-of-type(even) .appbox{background:var(--bg)}
.apphead{display:flex; gap:16px; align-items:center; margin-bottom:16px}
.apphead img{width:64px; height:64px; border-radius:15px; border:1px solid var(--line)}
.apphead h3{margin:0; font-size:20px}
.apphead p{margin:2px 0 0; font-size:13.5px; color:var(--muted)}
.badge{display:inline-block; font-size:11px; font-weight:700; color:var(--accent-dark); background:var(--accent-soft);
  border:1px solid var(--accent-line); padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle}
.two{display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start}
@media(max-width:720px){.two{grid-template-columns:1fr}}

/* faq */
details{background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:9px; overflow:hidden}
section:nth-of-type(even) details{background:var(--bg)}
summary{padding:15px 18px; font-weight:700; cursor:pointer; font-size:15.5px; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋"; color:var(--accent); font-weight:800; margin-right:10px}
details[open] summary::before{content:"−"}
details .body{padding:0 18px 16px; font-size:15px; color:#31363b}
details .body p:last-child{margin-bottom:0}

/* footer */
footer{padding:34px 0 46px; font-size:13px; color:var(--muted); background:var(--bg)}
footer a{color:var(--muted); margin-right:16px}
.disc{font-size:12.5px; color:var(--faint); margin-top:14px; line-height:1.75}

/* smartphone */
@media(max-width:600px){
  h1{font-size:26px}
  h2{font-size:21px}
  h3{font-size:17.5px}
  section{padding:38px 0}
  .wrap,.wide{padding:0 16px}
  .hero{padding-top:34px}
  .lead{font-size:16px}
  /* タップしやすい全幅CTA */
  .cta-row .btn{flex:1 1 auto; justify-content:center; padding:13px 16px}
  .toc{padding:16px 18px; margin:26px 0 34px}
  .note{padding:12px 14px; font-size:14.5px}
  .appbox{padding:18px 16px}
  .apphead{gap:12px}
  .apphead img{width:52px; height:52px; border-radius:12px}
  .apphead h3{font-size:17px}
  .buybox{padding:18px 16px}
  table{font-size:13.5px; min-width:400px}
  th,td{padding:9px 11px}
  .steps li{padding:14px 14px 14px 52px}
  .steps li::before{left:12px; top:13px}
  .shots{grid-template-columns:repeat(2,1fr)}
  .frame{padding:8px}
  .devices{margin-top:24px}
}

/* buy box (adapter) */
.buybox{background:var(--card); border:1px solid var(--accent-line); border-radius:16px; padding:24px 26px; margin:26px 0;
  box-shadow:0 1px 3px rgba(20,23,26,.05)}
section:nth-of-type(even) .buybox{background:var(--bg)}
.buybox-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.buybox-tag{font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--hot);
  padding:3px 10px; border-radius:999px}
.buybox h4{margin:0; font-size:17px; line-height:1.5}
.buybox .why{font-size:14.5px; color:var(--muted); margin:8px 0 14px}
.checklist{list-style:none; padding:0; margin:0 0 18px}
.checklist li{position:relative; padding-left:26px; font-size:15px; margin:7px 0}
.checklist li::before{content:""; position:absolute; left:2px; top:.62em; width:11px; height:6px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(-45deg)}
.checklist li.no::before{border:none; content:"×"; color:var(--hot); font-weight:800; left:4px; top:0; width:auto; height:auto; transform:none}
.btn-buy{background:#f0a12a; color:#221a08; border-color:#d98d16}
.btn-buy:hover{background:#e0930f; color:#1a1406}
.buybox-note{font-size:12px; color:var(--faint); margin:12px 0 0; line-height:1.7}
.badge.soon{color:var(--muted); background:var(--soft); border-color:var(--line); margin-left:6px}

/* footer cross-promo (姉妹アプリのヒーロー広告) */
.footer-promo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
  margin:0 0 28px; overflow:hidden; text-decoration:none; color:var(--text);
  font-size:16.5px; line-height:1.85;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 8px 26px rgba(20,23,26,.09);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
footer a.footer-promo{margin-right:0; color:var(--text)}
.footer-promo:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(20,23,26,.14); border-color:var(--accent-line)}
.footer-promo:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.footer-promo__media{position:relative; align-self:stretch; overflow:hidden;
  background:var(--soft); border-right:1px solid var(--line)}
.footer-promo__media::before{content:""; display:block; padding-top:56.25%}
.footer-promo__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.footer-promo__body{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:22px 24px; text-align:center}
.footer-promo__eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.06em; line-height:1.5;
  color:var(--accent-dark); background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:4px 10px; border-radius:999px}
.footer-promo__title{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800;
  letter-spacing:-.01em; line-height:1.4; color:var(--text)}
.footer-promo__title img{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); flex:none}
.footer-promo__lead{font-size:13.5px; line-height:1.75; color:var(--muted)}
.footer-promo__cta{padding-top:6px; font-size:13.5px; font-weight:700; color:var(--accent-dark)}
.footer-promo__cta::after{content:" \2192"}
@media(max-width:720px){
  .footer-promo{grid-template-columns:1fr; margin-bottom:24px}
  .footer-promo__media{border-right:0; border-bottom:1px solid var(--line)}
  .footer-promo__body{padding:18px 18px 20px}
  .footer-promo__lead{max-width:32em}
  .footer-promo__title{font-size:17.5px}
}
@media(prefers-reduced-motion:reduce){
  .footer-promo{transition:none}
  .footer-promo:hover{transform:none}
}

/* フッターのセクションアンカー（キーワード付き内部リンク） */
.footer-links{margin:22px 0 6px; padding-top:18px; border-top:1px solid var(--line)}
.footer-links h2{font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--faint);
  margin:0 0 10px; padding:0; border:0; text-transform:uppercase}
.footer-links ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 0}
.footer-links li{margin:0}
.footer-links a{display:inline-block; font-size:12.5px; color:var(--muted);
  margin-right:14px; text-decoration:none; border-bottom:1px solid transparent}
.footer-links a:hover{color:var(--text); border-bottom-color:var(--line)}

/* H1直下のタグライン */
.tagline{font-size:20px; font-weight:700; line-height:1.5; color:var(--text);
  margin:-4px 0 16px; letter-spacing:-.01em}
.tagline b{background:linear-gradient(transparent 62%, #ffe9a8 62%); font-weight:700}
@media (max-width:600px){ .tagline{font-size:17px} }