/* KURA TOKYO アプリのページ共通（apps.html・app-*.html）
   site.css の上に重ねる部品だけ。配色・書体・ボタン・節の地色は site.css のまま。 */

/* ---------- ヒーローの絵（右側） ---------- */
.app-art{position:relative;width:min(480px,100%);margin-inline:auto;padding-top:.5rem}
.app-art .hero-fig{width:100%;height:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25))}
.app-art .svc-badge{right:-10px;top:-14px}
@media (max-width:900px){.app-art{width:min(420px,100%);margin-top:1rem}}

/* ---------- ヒーロー下の帯（HB: 紫の帯にボタン2つ） ---------- */
.app-sub{background:var(--wakaba);text-align:center;padding:2.4rem 0 2.6rem}
.app-sub p{font-weight:700;font-size:1.08rem}
.app-sub .btn-row{justify-content:center;margin-top:1.2rem}
.app-sub .btn{min-width:240px;min-height:54px}
.app-sub .sec-note{margin-top:.8rem}

/* ---------- 目次（固定のアンカーナビ。小さい画面では横に流れる帯） ---------- */
.anchor-nav{position:sticky;top:74px;z-index:30;background:rgba(255,253,249,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.anchor-nav ul{display:flex;gap:.2rem 1.6rem;justify-content:center;align-items:center;overflow-x:auto;white-space:nowrap;padding:.2rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.anchor-nav ul::-webkit-scrollbar{display:none}
.anchor-nav a{display:inline-block;padding:.7rem .2rem;font-size:.9rem;font-weight:700;color:var(--midori);text-decoration:none;border-bottom:3px solid transparent}
.anchor-nav a:hover{border-bottom-color:var(--midori)}
@media (max-width:980px){.anchor-nav ul{justify-content:flex-start;gap:0 1.2rem}}
section[id]{scroll-margin-top:132px}

/* ---------- 導入事例（公開前はダミー枠） ---------- */
.case-ph{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:900px;margin:0 auto}
.case-ph .ph{min-height:220px;padding:1.6rem 1.2rem}
.case-ph .ph p{font-size:.84rem;color:var(--muted);max-width:22em}
@media (max-width:720px){.case-ph{grid-template-columns:1fr}.case-ph .ph{min-height:170px}}

/* ---------- 機能紹介（HB: 左に画面、右に見出しと説明の白いカード） ---------- */
.feat-group + .feat-group{margin-top:3.6rem}
.feat-group-title{text-align:center;font-size:clamp(1.15rem,1rem + .8vw,1.45rem);margin-bottom:1.6rem}
.feat-group-title small{display:block;font-size:.8rem;font-weight:700;color:var(--midori);margin-top:.2rem}
.feat-list{display:grid;gap:1.4rem;max-width:960px;margin:0 auto}
.feat{display:grid;grid-template-columns:300px 1fr;gap:1.6rem 2rem;align-items:center;padding:1.4rem}
.feat-fig{display:grid;place-items:center;padding:1.1rem;border-radius:var(--r-lg);background:var(--wakaba);min-height:200px}
.feat-fig.is-momo{background:var(--momo)}
.feat-fig.is-sora{background:var(--sora)}
.feat-fig.is-kinari{background:var(--kinari)}
.feat-fig .fig{width:100%;max-width:260px;height:auto;filter:drop-shadow(0 8px 18px rgba(36,61,51,.12))}
.feat-head{display:flex;align-items:center;gap:.8rem}
.feat-head .ic{width:48px;height:48px;padding:8px;border-radius:14px}
.feat-head h3{font-size:clamp(1.08rem,1rem + .5vw,1.3rem)}
.feat-body > p{margin-top:.8rem;font-size:.95rem}
.feat-body ul{margin-top:.8rem;display:grid;gap:.3rem;font-size:.9rem}
.feat-body li{padding-left:1.5em;position:relative}
.feat-body li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;background:var(--check) no-repeat center/contain}
.feat-body .note{margin-top:.8rem;font-size:.82rem;color:var(--muted)}
@media (max-width:760px){.feat{grid-template-columns:1fr;padding:1.1rem}.feat-fig{min-height:0}}

/* ---------- 連携・前提（3枚。3枚目は正直に書く制約） ---------- */
.prereq{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.prereq .card{padding:1.6rem 1.4rem}
.prereq h3{display:flex;align-items:center;gap:.6rem;font-size:1.05rem}
.prereq h3 .ic{width:44px;height:44px;padding:8px;border-radius:12px}
.prereq ul{margin-top:1rem;display:grid;gap:.5rem;font-size:.9rem}
.prereq li{padding-left:1.5em;position:relative}
.prereq li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;background:var(--check) no-repeat center/contain}
.prereq .card.is-honest{background:var(--kinari);border-color:#e7d9a2}
.prereq .card.is-honest li::before{background:none;content:"※";font-weight:700;color:var(--midori);top:0;left:.1em}
.prereq .card .status{margin-left:auto}
@media (max-width:900px){.prereq{grid-template-columns:1fr}}

/* ---------- 料金・導入方法 ---------- */
.price-box{max-width:760px;margin:0 auto;padding:2.2rem 1.6rem;text-align:center}
.price-box .big{font-size:clamp(1.3rem,1.1rem + 1.2vw,1.8rem);font-weight:700}
.price-box p + p{margin-top:.6rem}
.price-box .sec-note{font-size:.84rem}
.price-box .status{margin-bottom:.8rem}
.install-flow{margin-top:3.2rem}
.install-flow .flow{--n:4;max-width:900px}

/* ---------- 公開のお知らせ・相談（HB: 資料請求の箱） ---------- */
.notify-box{max-width:900px;margin:0 auto;padding:2.4rem 1.6rem;text-align:center;border-radius:var(--r-xl);background:var(--kami);border:2px solid var(--line)}
.notify-box h3{font-size:clamp(1.2rem,1.05rem + .8vw,1.5rem)}
.notify-box p{margin-top:.8rem;font-size:.95rem}
.notify-box .btn-row{justify-content:center;margin-top:1.4rem}
.notify-box .btn{min-width:240px;min-height:54px}

/* ---------- アプリ一覧（apps.html。HB: other-apps） ---------- */
.apps-hero-icons{display:flex;justify-content:center;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.apps-hero-icons a{display:grid;justify-items:center;gap:.3rem;text-decoration:none;font-size:.78rem;font-weight:700;color:var(--fuka)}
.apps-hero-icons .ic{width:64px;height:64px;padding:11px;border-radius:20px;background:var(--kami);border:2px solid var(--line)}
.apps-list{display:grid;gap:4rem;max-width:960px;margin:0 auto}
.app-entry{display:grid;grid-template-columns:140px 1fr;gap:1.4rem 2.4rem;align-items:start}
.app-entry .ic{width:120px;height:120px;padding:24px;border-radius:30px;border:2px solid var(--line)}
.app-entry h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
.app-entry h2 .status{font-size:.7rem}
.app-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.app-tags li{font-size:.78rem;font-weight:700;color:var(--midori);border:2px solid #cfe3d6;border-radius:999px;padding:.05em .9em;background:var(--kami)}
.app-entry .desc{margin-top:1rem;font-size:.98rem}
.app-box{margin-top:1rem;padding:1.1rem 1.3rem;border-radius:var(--r-md);background:var(--wakaba);font-size:.9rem}
.app-box.is-momo{background:var(--momo)}
.app-box.is-sora{background:var(--sora)}
.app-box.is-kinari{background:var(--kinari)}
.app-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.app-thumbs li{display:grid;gap:.5rem}
.app-thumbs .fig{width:100%;height:auto;border-radius:var(--r-md);border:2px solid var(--line);background:var(--kami)}
.app-thumbs p{font-size:.8rem;line-height:1.6}
.app-entry .btn-row{margin-top:1.4rem}
@media (max-width:720px){
  .app-entry{grid-template-columns:1fr}
  .app-entry .ic{width:88px;height:88px;padding:18px;border-radius:24px}
  .app-thumbs{grid-template-columns:1fr}
  .app-thumbs li{grid-template-columns:120px 1fr;align-items:center;gap:.8rem}
}
.apps-intro{text-align:center;margin:0 auto 3.2rem}
.app-entry{scroll-margin-top:100px}
.svc-kicker-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.svc-kicker-row .status{background:var(--tamago);border-color:var(--tamago)}
@media (max-width:900px){.app-art .svc-badge{right:0;top:-10px}}