/* =========================================================================
   ホーム画面に追加のご案内（保護者・コーチ）
   -------------------------------------------------------------------------
   トンマナ：面は角丸なし・影で立たせる。丸いのは「印」だけなので、
   手順の番号（円）とアプリのアイコンだけが丸い。
   保護者には下にフッターメニューが出るので、そのぶん持ち上げる。
   ========================================================================= */

.a2-wrap{
  position:fixed; inset:0; z-index:9500;              /* モーダル(99000)より下 */
  display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(15,27,46,.45);
  opacity:0; transition:opacity .2s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.a2-wrap.is-in{ opacity:1; }
.a2-card{ transform:translateY(10px); transition:transform .22s ease; }
.a2-wrap.is-in .a2-card{ transform:none; }
@media(prefers-reduced-motion:reduce){ .a2-wrap,.a2-card{ transition:none; } }

.a2-card{
  position:relative; width:100%; max-width:400px; margin:auto;
  background:var(--surface,#fff); border:1px solid var(--border,#e3e8f0);
  box-shadow:0 24px 60px rgba(15,35,80,.30), 0 4px 12px rgba(15,35,80,.12);
  padding:16px 16px 12px;
}
.a2-x{
  position:absolute; top:6px; right:6px; border:0; background:none; cursor:pointer;
  font-size:16px; line-height:1; padding:8px; color:var(--text-3,#7a8699);
}
.a2-x:hover{ color:var(--text,#0f1b2e); }

.a2-head{ display:flex; align-items:center; gap:11px; padding-right:26px; }
.a2-icon{ width:44px; height:44px; border-radius:10px; flex:none; box-shadow:0 2px 8px rgba(20,50,100,.16); }
.a2-title{ font-size:15px; font-weight:900; color:var(--text,#0f1b2e); line-height:1.4; }
.a2-sub{ font-size:11px; color:var(--text-3,#7a8699); font-weight:700; margin-top:2px; line-height:1.5; }

/* 手順ごとの図。iOS は実機のスクリーンショット（.a2-shot）、
   Android・その他は描いた絵（.a2-fig）。並べ方は同じ。 */
.a2-step-t{ display:flex; align-items:flex-start; gap:9px; }
.a2-step-fig{ margin:7px 0 0 27px; }
.a2-fig{ display:block; width:100%; max-width:240px; height:auto; background:#f7f9fc; border:1px solid var(--border,#e3e8f0); }
.a2-shot{ display:block; width:100%; max-width:300px; height:auto; background:#f7f9fc; border:1px solid var(--border,#e3e8f0); }
.a2-sm{ display:block; font-size:11px; color:var(--text-3,#7a8699); line-height:1.5; margin-top:1px; }
.a2-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--border,#e3e8f0); }
.a2-done{ border:1px solid var(--border,#e3e8f0); background:var(--surface,#fff); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:800; color:var(--text-2,#41506a); padding:8px 18px; }
.a2-done:hover{ background:#f4f7fc; }

.a2-steps{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.a2-step{ display:block; font-size:12.5px; line-height:1.6; color:var(--text-2,#33415c); }
.a2-num{
  flex:none; width:20px; height:20px; border-radius:999px;   /* 「印」なので丸のまま */
  background:var(--primary,#2f6bff); color:#fff;
  font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center;
}
.a2-tx{ flex:1; min-width:0; }
.a2-tx b{ color:var(--text,#0f1b2e); }

.a2-note{ font-size:11px; color:var(--text-3,#7a8699); line-height:1.6; margin-top:9px; }
.a2-go{
  display:block; width:100%; margin-top:12px; border:0; cursor:pointer; font:inherit;
  background:var(--primary,#2f6bff); color:#fff; font-size:14px; font-weight:900; padding:12px 14px;
  box-shadow:0 8px 20px rgba(47,107,255,.28);
}
.a2-go:hover{ filter:brightness(1.07); }

/* 下の並びは .a2-foot が持つので、ここでは線も余白も付けない */
.a2-off{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--text-3,#7a8699); cursor:pointer; user-select:none;
}
.a2-off input{ width:15px; height:15px; accent-color:var(--primary,#2f6bff); cursor:pointer; }

@media(max-width:380px){
  .a2-card{ padding:12px 12px 9px; }
  .a2-step{ font-size:12px; }
}