/* アプリのページ（templates/app.html）と首頁の App の枠（_app_teaser.html）。全部の外観で共通。
   色・線・影・角丸は各外観の site.css の :root にある --app-* で決める（ここに色を直書きしない）。 */
.app-kicker{display:inline-block;font-weight:800;font-size:14px;color:var(--app-accent);background:var(--app-tint);border-radius:999px;padding:4px 14px;margin-bottom:16px;letter-spacing:.04em}
.phone{background:#fff;border:9px solid #22303A;border-radius:36px;overflow:hidden;width:min(290px,72vw);box-shadow:var(--app-shadow-lg)}
.phone img{width:100%}
.phone-sm{width:min(220px,56vw);border-width:7px;border-radius:28px}

/* 首頁の枠 */
/* 2026-10-25 Mori「トップページのAPPの場所はもっと魅力的に」＝画面2枚を重ねて見せる・できること3つ・大きいボタン */
.app-teaser{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;background:var(--app-tint);border:var(--app-border);border-radius:var(--app-radius);
  box-shadow:var(--app-shadow-lg);padding:48px 52px;overflow:hidden}
.app-teaser > *{min-width:0}
.app-teaser-text{display:grid;gap:14px;justify-items:start}
.app-teaser-text .app-kicker{background:var(--app-card);margin-bottom:0}
.app-teaser h2{font-size:36px;line-height:1.4}
.app-teaser-lead{color:var(--app-muted);font-size:17px;line-height:1.85;margin:0}
.app-mark{color:var(--app-ink);font-weight:800;background:linear-gradient(transparent 58%,var(--app-hl) 58%)}
.app-teaser-points{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;width:100%}
.app-teaser-points li{display:flex;gap:12px;align-items:center;background:var(--app-card);border:var(--app-border);border-radius:var(--app-radius-sm);padding:10px 14px;font-size:16px;line-height:1.6}
.app-teaser-points b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--app-hl);border:var(--app-border);
  font-family:var(--app-num-font);font-weight:var(--app-num-weight);font-size:19px;line-height:1}
.app-teaser-cta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:8px}
.app-teaser-btn{background:var(--app-hl);color:var(--app-ink)}
.app-teaser-note{font-size:14px;color:var(--app-muted)}
/* 2枚を横に並べて、どちらの画面も全部見せる（右を少し下げる）。2026-10-26 Mori「横並びにして」＝スマホも横並び */
.app-teaser-shots{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:20px;padding-bottom:56px}
.app-teaser-shots .phone{width:min(210px,48%)}
.app-teaser-shots .phone-front{margin-top:56px}
.app-bubble{position:absolute;right:8%;bottom:4px;margin:0;background:var(--app-card);border:var(--app-border);border-radius:999px;padding:6px 18px;
  font-weight:800;font-size:16px;box-shadow:var(--app-shadow);transform:rotate(-4deg)}
@media (max-width:900px){
  .app-teaser{grid-template-columns:1fr;padding:30px 20px 24px;gap:12px}
  .app-teaser h2{font-size:26px}
  .app-teaser-btn{width:100%}
  .app-teaser-points li{font-size:15px}
  .app-teaser-shots{gap:12px;padding-bottom:52px}
  .app-teaser-shots .phone{width:min(160px,47%);border-width:7px;border-radius:26px}
  .app-teaser-shots .phone-front{margin-top:40px}
  .app-bubble{right:4%;bottom:2px;font-size:15px}
}

/* アプリのページ */
.app-hero{padding-block:32px 72px}
.app-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.app-hero-in > *{min-width:0}
.app-hero h1{font-size:52px;line-height:1.35}
.app-hero .lead{margin-top:18px;font-size:19px;color:var(--app-muted)}
.app-chips{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.app-chips li{background:var(--app-card);border:var(--app-border);border-radius:999px;padding:5px 14px;font-size:15px;font-weight:700;line-height:1.6}
.app-cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.app-hero-visual{position:relative;justify-self:center}
.app-hero-cat{position:absolute;width:130px;left:-80px;bottom:-20px}
@media (max-width:900px){
  .app-hero{padding-block:16px 56px}
  .app-hero-in{grid-template-columns:1fr;gap:40px}
  .app-hero h1{font-size:34px}
  .app-hero .lead{font-size:17px}
  .app-cta .btn{flex:1 1 100%}
  .app-hero-cat{width:90px;left:-40px;bottom:-12px}
}
.app-sec-tint{background:var(--app-tint)}
.app-pains{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.app-pains li{position:relative;background:var(--app-card);border:var(--app-border);border-radius:var(--app-radius-sm);padding:16px 18px 16px 46px;font-weight:700;line-height:1.6}
.app-pains li::before{content:"";position:absolute;left:18px;top:21px;width:16px;height:16px;border-radius:50%;background:var(--app-tint);border:2px solid var(--app-muted)}
.app-answer{margin-top:28px;font-size:20px}
.app-answer b{background:linear-gradient(transparent 60%,var(--app-hl) 60%)}
.app-feats{display:grid;gap:0;margin-top:20px}
.app-feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:48px}
.app-feat + .app-feat{border-top:var(--app-divider)}
.app-feat > *{min-width:0}
.app-feat:nth-child(even) .app-feat-text{order:2}
.app-tag{display:inline-block;font-weight:800;font-size:14px;color:var(--app-accent);border:1.5px solid currentColor;border-radius:999px;padding:1px 12px;margin-bottom:12px}
.app-feat h3{font-size:28px;line-height:1.45;margin-bottom:12px}
.app-feat-text > p:last-child{color:var(--app-muted);font-size:17px;line-height:1.9}
.app-shots{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.app-shots img{width:min(250px,100%);border-radius:18px;border:var(--app-border-img);box-shadow:var(--app-shadow-lg);background:#fff}
.app-shots-2 img{width:calc(50% - 9px);max-width:250px}
.app-shots-2 img:last-child{margin-top:48px}
.app-redpen{background:var(--app-card);border:var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow);padding:26px 28px;display:grid;gap:2px}
.rp-l{font-size:13px;font-weight:800;color:var(--app-muted);letter-spacing:.06em;margin-top:8px}
.rp-l:first-child{margin-top:0}
.rp-before{font-size:24px;font-weight:700;color:var(--app-muted);text-decoration:line-through;text-decoration-color:#D24B47;text-decoration-thickness:3px}
.rp-after{font-size:28px;font-weight:800}
.rp-after mark{background:var(--app-hl);color:inherit;border-radius:6px;padding:0 4px}
.rp-note{margin-top:14px;font-size:15px;line-height:1.8;background:var(--app-tint);border-radius:12px;padding:10px 14px}
@media (max-width:900px){
  .app-pains{grid-template-columns:1fr;gap:10px}
  .app-feat{grid-template-columns:1fr;gap:28px;padding-block:40px}
  .app-feat:nth-child(even) .app-feat-text{order:0}
  .app-feat h3{font-size:23px}
  .rp-before{font-size:20px} .rp-after{font-size:23px}
}
.app-nums{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.app-nums li{background:var(--app-card);border:var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow);padding:22px 20px;display:grid;gap:4px;align-content:start}
.app-nums b{font-family:var(--app-num-font);font-weight:var(--app-num-weight);font-size:40px;line-height:1.2;color:var(--app-accent);font-variant-numeric:tabular-nums}
.app-nums span{font-size:15px;color:var(--app-muted);font-weight:700;line-height:1.6}
.app-note{margin-top:18px;color:var(--app-muted);font-size:15px}
@media (max-width:900px){ .app-nums{grid-template-columns:1fr 1fr;gap:12px} .app-nums b{font-size:30px} }
.app-compare table th.hl,.app-compare table td.hl{background:var(--app-hl-soft);font-weight:700}
.app-compare tbody th{font-size:15px;white-space:nowrap}
.app-quote{margin-top:28px;font-size:18px;line-height:1.9;border-left:4px solid var(--app-accent);padding-left:18px}
@media (max-width:900px){ .app-compare tbody th{white-space:normal} }
.app-day{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:d}
.app-day li{position:relative;background:var(--app-card);border:var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow);padding:22px 24px;display:grid;gap:2px}
.app-day li:not(:last-child)::after{content:"→";position:absolute;right:-32px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:800;color:var(--app-accent)}
.app-day span{font-size:14px;font-weight:800;color:var(--app-accent)}
.app-day b{font-size:21px}
.app-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.app-steps li{background:var(--app-card);border:var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow);padding:24px;display:grid;gap:8px;align-content:start}
.app-steps .n{width:44px;height:44px;border-radius:50%;background:var(--app-accent);color:#fff;font-weight:800;font-size:20px;display:grid;place-items:center}
.app-steps h3{font-size:20px}
.app-steps p{color:var(--app-muted);font-size:16px;line-height:1.8}
@media (max-width:900px){
  .app-day{grid-template-columns:1fr;gap:36px}
  .app-day li:not(:last-child)::after{content:"↓";right:auto;left:28px;top:auto;bottom:-34px;transform:none}
  .app-steps{grid-template-columns:1fr;gap:14px}
}
.app-plans{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px;margin-top:28px}
.app-plan{background:var(--app-card);border:var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow);padding:24px 26px}
.app-plan-hl{background:var(--app-hl-soft)}
.pl-c{font-weight:800;color:var(--app-muted);font-size:16px}
.pl-p{font-family:var(--app-num-font);font-weight:var(--app-num-weight);font-size:40px;line-height:1.4;font-variant-numeric:tabular-nums}
.pl-p small{font-size:17px;font-weight:700;color:var(--app-muted)}
.app-rules{margin:24px 0 0;padding-left:1.3em;display:grid;gap:6px;color:var(--app-muted);font-size:16px;line-height:1.8}
.app-rules b{color:var(--app-ink)}
@media (max-width:900px){ .app-plans{grid-template-columns:1fr} .pl-p{font-size:34px} }