/* ============================================================
   トラベルイン ホーム画面追加 案内ページ  (/add-home/)
   スコープ: #tbx-add-home
   高齢の方向け：本文18px以上・ボタン高さ60px以上・大きな文字は白抜きでも読みやすい濃さ
   配色：C-2案（白×ロゴの赤×空色、TOPは水色＋白い半円）
   ※ファイル末尾の「C-2 デザイン」ブロックが上書き定義
   ============================================================ */
:root {
  --tbx-red:      #F03C3C;  /* ロゴの赤 */
  --tbx-red-dark: #D62828;
  --tbx-orange:   #D9773A;
  --tbx-yellow:   #F1D58A;
  --tbx-green:    #3E9468;
  --tbx-sky:      #3A6F9E;
  --tbx-sky-dark: #2B5478;
  --tbx-text:     #222222;
  --tbx-line:     #06C755;
  --tbx-cream:    #FBF6EE;
  --tbx-beige:    #F7F4EF;
}

/* ---------- 静的HTMLページ用ベース（WordPressのCSSを読み込まないため） ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #222;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, "Noto Sans JP", sans-serif;
}
img { max-width: 100%; height: auto; }
.tbx-ah-header {
  display: flex;
  justify-content: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #EEE;
  background: #fff;
}
.tbx-ah-header__logo { display: block; line-height: 0; }
.tbx-ah-header__logo img { width: 84px; height: auto; }
.tbx-ah-footer {
  padding: 24px 16px calc(32px + env(safe-area-inset-bottom));
  background: #F5F6F8;
  text-align: center;
  font-size: 16px;
}
.tbx-ah-footer__link { color: #1F78C1; font-weight: 700; font-size: 18px; }
.tbx-ah-footer__copy { margin: 12px 0 0; color: #666; font-size: 13px; }
#tbx-add-home h1, #tbx-add-home h2, #tbx-add-home p { margin-top: 0; }

#tbx-add-home {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  color: var(--tbx-text);
  font-size: 18px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
#tbx-add-home *,
#tbx-add-home *::before,
#tbx-add-home *::after { box-sizing: border-box; }
#tbx-add-home [hidden] { display: none !important; }
/* 日本語を文節で改行（対応ブラウザのみ。非対応は通常の改行） */
#tbx-add-home h1, #tbx-add-home h2, #tbx-add-home p {
  word-break: auto-phrase;
  text-wrap: pretty;
}
#tbx-add-home strong { color: var(--tbx-red-dark); }

/* ---------- ヒーロー ---------- */
#tbx-add-home .ah-hero {
  position: relative;
  overflow: hidden;
  margin: 8px 0 20px;
  padding: 32px 16px 28px;
  text-align: center;
  border-radius: 24px;
  background: var(--tbx-beige);
  border-top: 5px solid var(--tbx-red);
}
#tbx-add-home .ah-hero__icon {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 24px;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}
#tbx-add-home .ah-hero__title {
  position: relative;
  margin: 18px 0 10px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.45;
}
#tbx-add-home .ah-hero__title span {
  color: var(--tbx-red);
  background: linear-gradient(transparent 66%, rgba(241, 213, 138, .6) 66%);
  padding: 0 2px;
}
#tbx-add-home .ah-hero__lead {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 10px 18px;
  font-size: 19px;
  background: none;
}

/* ---------- パネル ---------- */
#tbx-add-home .ah-panel {
  position: relative;
  margin: 0 0 28px;
  padding: 0 16px 22px;
  background: #fff;
  border: 2px solid var(--tbx-sky);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
#tbx-add-home .ah-panel__title {
  margin: 0 -16px 18px;
  padding: 14px 16px;
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  color: #fff;
  background: var(--tbx-sky);
}
#tbx-add-home .ah-panel__text { margin: 0 0 18px; text-align: center; }

/* 注意パネル（アプリ内ブラウザ） */
#tbx-add-home .ah-panel--warn {
  border-color: var(--tbx-orange);
  background: var(--tbx-cream);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
#tbx-add-home .ah-panel--warn .ah-panel__title {
  background: var(--tbx-orange);
}

/* 追加済みパネル */
#tbx-add-home .ah-panel[data-for="installed"] {
  border-color: var(--tbx-green);
  background: #F3F8F5;
  padding-top: 24px;
}
#tbx-add-home .ah-panel[data-for="installed"] .ah-panel__title {
  margin: 0 0 10px;
  padding: 0;
  color: var(--tbx-green);
  background: none;
}

/* ---------- ボタン ---------- */
#tbx-add-home .ah-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
  transition: transform .1s, box-shadow .1s, opacity .2s;
  font-family: inherit;
}
#tbx-add-home .ah-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
#tbx-add-home .ah-btn:focus-visible { outline: 4px solid var(--tbx-yellow); outline-offset: 3px; }
#tbx-add-home .ah-btn--primary {
  background: var(--tbx-sky);
  color: #fff;
}
#tbx-add-home .ah-btn--install {
  background: var(--tbx-red-dark);
  color: #fff;
  min-height: 78px;
  font-size: 23px;
  box-shadow: 0 3px 0 #A81F1F;
  animation: ah-pulse 2s ease-in-out infinite;
}
#tbx-add-home .ah-btn--install .ah-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--tbx-red);
  font-size: 26px;
}
#tbx-add-home .ah-btn--install:disabled {
  background: #BDBDBD;
  box-shadow: 0 3px 0 #9E9E9E;
  animation: none;
  cursor: default;
}
#tbx-add-home .ah-btn--install:disabled .ah-btn__icon { color: #9E9E9E; }
#tbx-add-home .ah-btn--line {
  background: var(--tbx-line);
  color: #fff;
  box-shadow: 0 3px 0 #04963F;
}
#tbx-add-home .ah-btn__icon { font-size: 1.2em; line-height: 1; }

@keyframes ah-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  #tbx-add-home .ah-btn--install,
  #tbx-add-home .ah-pointer__arrow { animation: none; }
}

#tbx-add-home .ah-note {
  margin: 14px 0 0;
  font-size: 17px;
  text-align: center;
}

/* ---------- 手順 ---------- */
#tbx-add-home .ah-manual { margin-top: 24px; padding-top: 20px; border-top: 2px dashed #D8D4CC; }
#tbx-add-home .ah-manual__lead { margin: 0 0 12px; font-weight: 700; text-align: center; }
#tbx-add-home .ah-steps { list-style: none; margin: 0; padding: 0; }
#tbx-add-home .ah-step {
  --step-color: var(--tbx-red);
  --step-bg: var(--tbx-beige);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 16px 14px;
  background: var(--step-bg);
  border-left: 5px solid var(--step-color);
  border-radius: 12px;
}
/* 表示されている順に 赤 → オレンジ → 緑（data-step は JS が付与） */
#tbx-add-home .ah-step[data-step="2"] { --step-color: var(--tbx-orange); }
#tbx-add-home .ah-step[data-step="3"] { --step-color: var(--tbx-green); }
#tbx-add-home .ah-step:last-child { margin-bottom: 0; }
#tbx-add-home .ah-step__num {
  flex: 0 0 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--step-color);
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  line-height: 46px;
  text-align: center;
}
#tbx-add-home .ah-step__body { flex: 1; min-width: 0; }
#tbx-add-home .ah-step__text { margin: 0; font-size: 19px; }
#tbx-add-home .ah-step__sub { margin: 8px 0 0; font-size: 16px; color: #555; }

/* アイコン付きキー表示 */
#tbx-add-home .ah-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  white-space: nowrap;
}
#tbx-add-home .ah-svg {
  width: 32px;
  height: 32px;
  padding: 3px;
  fill: var(--tbx-sky-dark);
  color: var(--tbx-sky-dark);
  background: #fff;
  border: 1.5px solid #B7C6D6;
  border-radius: 9px;
  vertical-align: middle;
}

#tbx-add-home .ah-switch {
  display: block;
  margin: 18px auto 0;
  padding: 8px 4px;
  background: none;
  border: 0;
  color: var(--tbx-sky-dark);
  font-size: 17px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- 画面下を指す矢印（iPhone Safari） ---------- */
#tbx-add-home .ah-pointer {
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
#tbx-add-home .ah-pointer[data-pos="right"] { left: auto; right: 6px; transform: none; }
#tbx-add-home .ah-pointer__label {
  padding: 6px 14px;
  background: var(--tbx-red);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
#tbx-add-home .ah-pointer__arrow {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--tbx-red);
  text-shadow: 0 0 4px #fff, 0 0 4px #fff;
  animation: ah-bounce 1.2s ease-in-out infinite;
}
@keyframes ah-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ---------- 完了 ---------- */
#tbx-add-home .ah-done { text-align: center; }
#tbx-add-home .ah-done__mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--tbx-green);
  color: #fff;
  font-size: 46px;
  line-height: 76px;
  box-shadow: none;
}

/* ---------- QR（PC） ---------- */
#tbx-add-home .ah-qr {
  display: block;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  background: #fff;
  padding: 12px;
  border: 1px solid #DDD;
  border-radius: 16px;
}

/* ---------- LINE ---------- */
#tbx-add-home .ah-sub {
  margin: 0 0 24px;
  padding: 24px 18px;
  background: #fff;
  border: 2px solid #CFE6D7;
  border-radius: 20px;
  text-align: center;
}
#tbx-add-home .ah-sub__title { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: #2F6E4C; }
#tbx-add-home .ah-sub__text { margin: 0 0 16px; }

@media (min-width: 768px) {
  #tbx-add-home { padding-top: 24px; }
  #tbx-add-home .ah-hero__title { font-size: 34px; }
}

/* ============================================================
   C-2 デザイン（採用案）
   ============================================================ */
/* 案C：シンプル（明るめ・見やすさ優先）
   白ベースにロゴの赤と明るい空色。文字・ボタンは一回り大きく、飾りなし */
#tbx-add-home { --tbx-red:#E52E2E; --tbx-red-dark:#D92525; --tbx-sky:#2F8FDB; --tbx-sky-dark:#1F78C1;
  --tbx-orange:#F08A24; --tbx-green:#2E9E5B; --tbx-beige:#fff; --tbx-cream:#FFF8F0; font-size: 20px; }
#tbx-add-home strong { color: var(--tbx-red-dark); }
#tbx-add-home .ah-hero { background:#fff; border-top:0; border-bottom: 4px solid var(--tbx-red); border-radius:0; }
#tbx-add-home .ah-hero__icon { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-radius: 22px; }
#tbx-add-home .ah-hero__title { font-size: 31px; }
#tbx-add-home .ah-hero__title span { background:none; color: var(--tbx-red); }
#tbx-add-home .ah-hero__lead { font-size: 21px; }
#tbx-add-home .ah-panel { border: 3px solid var(--tbx-sky); border-radius: 12px; box-shadow:none; }
#tbx-add-home .ah-panel__title { background: var(--tbx-sky); font-size: 24px; }
#tbx-add-home .ah-panel--warn { border-color: var(--tbx-orange); }
#tbx-add-home .ah-panel--warn .ah-panel__title { background: var(--tbx-orange); }
#tbx-add-home .ah-panel[data-for="installed"] { background:#fff; border-color: var(--tbx-green); }
#tbx-add-home .ah-btn { border-radius: 12px; box-shadow:none; font-size: 23px; min-height: 70px; }
#tbx-add-home .ah-btn--install { box-shadow:none; min-height: 84px; font-size: 23px; padding: 12px 14px; }
#tbx-add-home .ah-btn--line { box-shadow:none; }
#tbx-add-home .ah-step { background:#fff; border: 2px solid #D5E6F5; border-left: 2px solid #D5E6F5; border-radius: 12px; }
#tbx-add-home .ah-step__num, #tbx-add-home .ah-step[data-step] .ah-step__num { background: var(--tbx-red); }
#tbx-add-home .ah-step__text { font-size: 20px; }
#tbx-add-home .ah-svg { border: 2px solid var(--tbx-sky); }
#tbx-add-home .ah-switch { font-size: 19px; }
#tbx-add-home .ah-sub { border: 3px solid #BFE8CE; border-radius: 12px; }
/* --- C-2：TOPをあたたかいクリームに（やわらか・日だまり） --- */
#tbx-add-home .ah-hero { background: linear-gradient(180deg, #D9ECFB 0%, #E5F2FD 100%); border-radius: 16px 16px 0 0; }
#tbx-add-home .ah-hero__icon { box-shadow: 0 3px 12px rgba(47,143,219,.18); }
/* --- 下部の大きな白い半円 --- */
#tbx-add-home .ah-hero { position: relative; overflow: hidden; border-bottom: 0; padding-bottom: 28px; border-radius: 16px 16px 0 0; }
#tbx-add-home .ah-hero::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: -150px; transform: translateX(-50%);
  width: 125%; height: 320px; border-radius: 50%; background: #fff;
}
#tbx-add-home .ah-hero > * { position: relative; z-index: 1; }