/* ホーム画面に追加のご案内（a2hs.css）— a2hs.js と対になる見た目だけの指定。
 *
 * 他の画面の指定には一切触りません。すべて .a2hs の中だけに効きます。
 * 色を変えたいときは、下の :root の3つの値だけを各アプリの色に差し替えてください。
 */
:root {
  --a2hs-accent: #4c4034;   /* このアプリの色（ボタン・しるし） */
  --a2hs-accent-ink: #ffffff;
  --a2hs-ink: #302b26;
}

.a2hs {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;            /* 画面のいちばん手前。他の部品と取り合わない */
  box-sizing: border-box;
  width: calc(100% - 20px);
  max-width: 420px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: #ffffff;
  color: var(--a2hs-ink);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  font: 15px/1.6 -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  animation: a2hs-in .28s ease-out both;
}
@keyframes a2hs-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .a2hs { animation: none; } }

/* パソコンでは右下に小さく出す（作業の邪魔をしない） */
@media (min-width: 720px) {
  .a2hs { left: auto; right: 20px; transform: none; width: 360px; animation: none; }
}

.a2hs .a2hs-head { display: flex; gap: 12px; align-items: flex-start; }
.a2hs .a2hs-mark {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--a2hs-accent);
  color: var(--a2hs-accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.a2hs .a2hs-lead { min-width: 0; }
.a2hs .a2hs-lead b { display: block; font-size: 15px; font-weight: 700; }
.a2hs .a2hs-lead span { display: block; margin-top: 2px; font-size: 13px; color: #55606f; }

.a2hs .a2hs-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.a2hs .a2hs-steps li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.a2hs .a2hs-steps li b { flex: 0 0 auto; color: var(--a2hs-accent); font-size: 15px; }
.a2hs .a2hs-steps li span { min-width: 0; }
.a2hs .a2hs-i {
  width: 1.15em; height: 1.15em;
  vertical-align: -.2em;
  margin: 0 2px;
  fill: var(--a2hs-accent);
  color: var(--a2hs-accent);
}

.a2hs .a2hs-note { margin: 10px 0 0; font-size: 13px; color: #55606f; }

.a2hs .a2hs-btns { display: flex; gap: 8px; margin-top: 12px; }
.a2hs button { font: inherit; cursor: pointer; border-radius: 10px; padding: 11px 14px; }
.a2hs .a2hs-go {
  flex: 1 1 auto;
  border: 1px solid var(--a2hs-accent);
  background: var(--a2hs-accent);
  color: var(--a2hs-accent-ink);
  font-weight: 700;
}
.a2hs .a2hs-later {
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #ffffff;
  color: #55606f;
}
.a2hs .a2hs-ios .a2hs-btns, .a2hs.a2hs-ios .a2hs-btns, .a2hs.a2hs-ios-inapp .a2hs-btns { justify-content: flex-end; }

/* iPhone の共有ボタンは画面のいちばん下にある。そこへ目を向けてもらうための矢印。 */
.a2hs .a2hs-arrow {
  margin: 6px 0 -4px;
  text-align: center;
  color: var(--a2hs-accent);
  font-size: 18px;
  line-height: 1;
  animation: a2hs-bob 1.6s ease-in-out infinite;
}
@keyframes a2hs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .a2hs .a2hs-arrow { animation: none; } }