@charset "UTF-8";
/* =============================================================
   index.html（アプリの入口・本番 /simulation/public/）の見た目（2026-10-25）
   トップ（index-front.php）で効いた工夫を入れた: 最初の画面の札・値段の目安／滞在日数で選ぶ・1 日あたり・
   スマホの縦の一覧／使い方の作り直し（写真・1―2―3・動く印）／特長の動く絵／スマホの申し込みバー／ふわっと出る動き。
   ★index.html だけが読む（style.css・simulator.css の後）。部品の名前は hp- で始める（ほかの画面と混ざらない）。
   ★使い方・特長の動きは modern.css（トップ）から写したもの（.spec-build ではなく scratchpad の gen_home_css.py で作る）。
     トップの動きを直したら、ここも同じに。
   ============================================================= */
:root {
  --jol-teal: #0f7f80;
  --jol-blue: #0065b8;
  --jol-ease: cubic-bezier(.2, .65, .3, 1);
}
.hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 比較表の「Select」の見えない見出し: マスを基準にする（基準が表の外だと、横に動く枠の外に置かれてページの横幅が広がる・スマホで 390→599px） */
.compare-tbl th { position: relative; }
#plans, #how, #features { scroll-margin-top: calc(var(--nav-h, 72px) + 12px); }

/* ─── ふわっと出る動き（トップと同じ考え方）: JS が動くときだけ隠し、見えたら出す。動きを減らしたい設定の人・印刷は最初から見える ─── */
html.js-reveal .hp-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s var(--jol-ease), transform .7s var(--jol-ease); }
html.js-reveal .hp-reveal.is-show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .hp-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  html.js-reveal .hp-reveal { opacity: 1 !important; transform: none !important; }
}

/* ─── 最初の画面: 安心材料の札・値段の目安・スマホが使えるかへのリンク ─── */
ul.hp-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; padding: 0; list-style: none; }
ul.hp-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
ul.hp-chips svg { flex-shrink: 0; width: 17px; height: 17px; fill: none; stroke: #f0c869; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.hp-hero-cta .hero-cta { margin-top: 0; }
p.hp-from { margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; }
p.hp-from strong { color: #fff; font-size: 22px; font-weight: 700; }
p.hp-from span { font-size: 13px; }
a.hp-hero-link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin-top: 8px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
a.hp-hero-link::after { content: "\2192"; }
@media (max-width: 480px) {
  ul.hp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  ul.hp-chips li { padding: 7px 10px; font-size: 12.5px; border-radius: 12px; }
}

/* ─── プラン: 滞在日数で選ぶ・1 日あたり・スマホの縦の一覧 ─── */
.hp-tools { display: flex; justify-content: center; margin: -16px 0 28px; }
.hp-tools[hidden] { display: none; }
.hp-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; background: #eef2f7; border: 1px solid rgba(7, 12, 26, .06); border-radius: 999px; }
button.hp-seg-btn {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 0 18px;
  color: #3b4745;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  button.hp-seg-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, .7); }
}
button.hp-seg-btn[aria-pressed="true"] { color: #fff; background: var(--jol-blue); box-shadow: 0 4px 12px rgba(0, 101, 184, .28); }
@media (max-width: 600px) {
  .hp-seg { display: flex; width: 100%; border-radius: 18px; }
  button.hp-seg-btn { flex: 1 1 40%; padding: 0 8px; font-size: 14px; }
}
.plan-card[hidden],
.carrier-group[hidden],
a.hp-row[hidden] { display: none !important; }
/* プランのカードの緑の札（Best Value など）: style.css の #4a7d10 は薄い緑の地で 4.33（文字には 4.5 以上が要る）→ この画面だけ濃く */
#plans .plan-card .badge-green { color: #3f6b0d; }
.hp-perday { margin-top: 4px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; }
.hp-note { margin-top: 18px; color: var(--text-muted); font-size: 0.82rem; text-align: center; }

.hp-list { display: none; }
@media (max-width: 768px) {
  #plans .plan-cards-grid { display: none; }
  .hp-list { display: block; max-width: 560px; margin: 0 auto; }
}
a.hp-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  margin-top: 12px;
  padding: 12px;
  color: var(--text-primary);
  text-decoration: none;
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.hp-list a.hp-row:first-child { margin-top: 0; }
a.hp-row:active { transform: scale(.985); }
span.hp-row-gb { display: flex; align-items: center; justify-content: center; min-width: 62px; padding: 11px 6px; color: var(--jol-blue); font-size: 17px; line-height: 1; font-weight: 800; background: #eef5fc; border-radius: 12px; }
span.hp-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
span.hp-row-name { font-size: 15px; line-height: 1.3; font-weight: 700; }
span.hp-row-sub { color: var(--text-secondary); font-size: 12.5px; line-height: 1.3; }
span.hp-row-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
span.hp-row-price > span { color: #db1a1a; font-size: 20px; line-height: 1.1; font-weight: 800; }
span.hp-row-price small { color: var(--text-muted); font-size: 11.5px; line-height: 1.2; }
span.hp-row-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; color: #fff; font-size: 14px; font-weight: 700; background: #db1a1a; border-radius: 999px; }
@media (max-width: 374px) {
  a.hp-row { gap: 8px; }
  span.hp-row-cta { display: none; }   /* 幅の狭い端末では、行そのものが押せるので「Buy」を外す */
}

/* ─── 使い方（トップと同じ作り） ─── */
.hp-how { background: var(--bg-mid); }
.hp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.hp-step { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e3eaf3; border-radius: 20px; box-shadow: 0 6px 24px rgba(16, 24, 40, .06); }
.hp-step-img { aspect-ratio: 5 / 3; }
.hp-step-img picture { display: block; width: 100%; height: 100%; }
.hp-step-txt { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px 22px 24px; }
.hp-step-label { display: inline-flex; padding: 4px 12px; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; background: linear-gradient(135deg, var(--jol-teal), var(--jol-blue)); border-radius: 999px; }
.hp-step-txt h3 { margin-top: 12px; font-size: 1.12rem; line-height: 1.4; }
.hp-step-txt p { margin-top: 8px; color: var(--text-secondary); font-size: .92rem; line-height: 1.7; }
a.hp-link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin-top: 6px; color: var(--blue); font-weight: 600; }
a.hp-link::after { content: "\2192"; transition: transform .2s var(--jol-ease); }
@media (hover: hover) {
  a.hp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  a.hp-link:hover::after { transform: translateX(3px); }
}
.hp-step-btn { margin-top: 14px; }
@media (max-width: 900px) {
  .hp-steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* ─── 特長（トップと同じ動く絵） ─── */
.hp-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.hp-feat-card { padding: 26px 24px 30px; text-align: center; background: #fff; border: 1px solid #e3eaf3; border-radius: 20px; box-shadow: 0 6px 24px rgba(16, 24, 40, .05); }
.hp-feat-img { display: flex; align-items: center; justify-content: center; height: 210px; }
.hp-feat-card h3 { margin-top: 12px; font-size: 1.12rem; line-height: 1.4; }
.hp-feat-card p { margin-top: 8px; color: var(--text-secondary); font-size: .92rem; line-height: 1.7; }
.hp-feat-cta { margin-top: 36px; text-align: center; }
@media (max-width: 900px) {
  .hp-feat-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* ─── スマホの申し込みバー（最初の画面のボタンが見えなくなったら下から出す・プランの節とフッターでは隠す） ─── */
.hp-sticky { display: none; }
@media (max-width: 768px) {
  .hp-sticky {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 10px 10px 10px 18px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
    border: 1px solid rgba(7, 12, 26, .08);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    visibility: hidden;
    transform: translateY(calc(100% + 28px));
    transition: transform .35s var(--jol-ease), visibility 0s linear .35s;
  }
  .hp-sticky.is-on { visibility: visible; transform: none; transition: transform .35s var(--jol-ease), visibility 0s; }
  .hp-sticky-txt { display: flex; flex-direction: column; line-height: 1.2; }
  .hp-sticky-txt small { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
  .hp-sticky-txt strong { color: var(--text-primary); font-size: 22px; font-weight: 800; }
  a.hp-sticky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    background: #db1a1a;
    border-radius: 12px;
    box-shadow: 0 3px 0 #a31414;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-sticky,
  .hp-sticky.is-on { transition: none; }
}
@media print {
  .hp-sticky { display: none !important; }
}

/* =============================================================
   使い方（How it works）の作り直し（2026-10-25・運営者の案A「写真の差し替え＋順に出る動き・動きはしっかり」）
   写真は AI（Gemini）で作った外国人旅行者（assets/front/img/webp/front/step-photo-0N[-720].webp・jpg）。
   動きは、ふわっと出る動きの仕組み（.inview → is-show・common.js）に乗せる。
   ★動きを減らしたい設定の人・JS が動かないときは、止まった完成の絵（最初から全部見える）
   ============================================================= */

/* 見出しの下の「1 ― 2 ― 3」: 線が順に伸び、番号が順に光る */
ol.step-progress {
  display: flex;
  max-width: 520px;
  margin: clamp(20px, 3vw, 30px) auto clamp(26px, 3.4vw, 40px);
  padding: 0;
  list-style: none;
}
ol.step-progress li { position: relative; display: flex; flex: 1; justify-content: center; }
ol.step-progress li + li::before,
ol.step-progress li + li::after {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 4px;
  margin-top: -2px;
  content: "";
  border-radius: 2px;
}
ol.step-progress li + li::before { background: #d9e6f2; }   /* 下地の線 */
ol.step-progress li + li::after {
  background: linear-gradient(90deg, var(--jol-teal), var(--jol-blue));
  transform-origin: left center;
}
ol.step-progress span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--jol-teal), var(--jol-blue));
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 101, 184, .25);
}
html.js-reveal ol.step-progress:not(.is-show) li + li::after { transform: scaleX(0); }
html.js-reveal ol.step-progress:not(.is-show) span { transform: scale(.4); opacity: 0; }
ol.step-progress.is-show span { animation: jolPop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
ol.step-progress.is-show li:nth-child(2) span { animation-delay: .9s; }
ol.step-progress.is-show li:nth-child(3) span { animation-delay: 1.7s; }
ol.step-progress.is-show li + li::after { animation: jolGrow .7s var(--jol-ease) both; }
ol.step-progress.is-show li:nth-child(2)::after { animation-delay: .25s; }
ol.step-progress.is-show li:nth-child(3)::after { animation-delay: 1.05s; }

/* カード: 01→02→03 の順に時間差で出る */
.hp-step { --d: 0s; }
.hp-step:nth-child(2) { --d: .22s; }
.hp-step:nth-child(3) { --d: .44s; }
html.js-reveal .hp-step.hp-reveal { transition-delay: var(--d); }

/* 写真: 少し大きい所からゆっくり元に戻り、そのあとも小さく動き続ける */
.hp-step .hp-step-img { position: relative; overflow: hidden; }
.hp-step .hp-step-img img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
html.js-reveal .hp-step:not(.is-show) .hp-step-img img { transform: scale(1.14); }
.hp-step.is-show .hp-step-img img {
  animation: jolZoomIn 1.3s var(--jol-ease) var(--d) both, jolDrift 16s ease-in-out calc(var(--d) + 1.3s) infinite alternate;
}

/* 赤い丸の印（前は写真に焼き込みだった）: ぽんと出て、波紋が広がり続ける */
span.step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: #db1a1a;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(219, 26, 26, .35);
}
span.step-badge::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 2px solid rgba(219, 26, 26, .55);
  border-radius: 50%;
  opacity: 0;
}
span.step-badge svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.js-reveal .hp-step:not(.is-show) span.step-badge { transform: scale(0); }
.hp-step.is-show span.step-badge { animation: jolPop .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) + .6s) both; }
.hp-step.is-show span.step-badge::after { animation: jolRing 2.8s ease-out calc(var(--d) + 1.6s) infinite; }
/* STEP 01: チェックの線を描く */
span.sb-check path.sb-draw { stroke-dasharray: 12; stroke-dashoffset: 0; }
html.js-reveal .hp-step:not(.is-show) span.sb-check path.sb-draw { stroke-dashoffset: 12; }
.hp-step.is-show span.sb-check path.sb-draw { animation: jolDraw .5s ease-out calc(var(--d) + 1.1s) both; }
/* STEP 02: 押す動き（くり返し） */
.hp-step.is-show span.sb-buy svg { animation: jolTap 2.6s ease-in-out calc(var(--d) + 1.4s) infinite; }
/* STEP 03: 電波のマークが下から順に点く（くり返し） */
.hp-step.is-show span.sb-wifi path { animation: jolWifi 2.2s ease-in-out calc(var(--d) + 1.2s) infinite; }
.hp-step.is-show span.sb-wifi path.w2 { animation-delay: calc(var(--d) + 1.4s); }
.hp-step.is-show span.sb-wifi path.w3 { animation-delay: calc(var(--d) + 1.6s); }
.hp-step.is-show span.sb-wifi path.w4 { animation-delay: calc(var(--d) + 1.8s); }

/* 「STEP 01」の札: 写真の下から、少し遅れて上がってくる */
html.js-reveal .hp-step:not(.is-show) .hp-step-label { transform: translateY(14px); opacity: 0; }
.hp-step.is-show .hp-step-label { animation: jolRise .6s var(--jol-ease) calc(var(--d) + .45s) both; }

@keyframes jolPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes jolGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes jolZoomIn { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes jolDrift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.2%, -.8%, 0); } }
@keyframes jolRing { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes jolDraw { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
@keyframes jolTap { 0%, 62%, 100% { transform: scale(1); } 72% { transform: scale(.82); } 84% { transform: scale(1.08); } }
@keyframes jolWifi { 0%, 100% { opacity: .35; } 30%, 70% { opacity: 1; } }
@keyframes jolRise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 動きを減らしたい設定の人・印刷: 止まった完成の絵 */
@media (prefers-reduced-motion: reduce) {
  ol.step-progress span,
  ol.step-progress li + li::after,
  .hp-step .hp-step-img img,
  span.step-badge,
  span.step-badge::after,
  span.step-badge svg,
  span.step-badge path,
  .hp-step .hp-step-label { animation: none !important; transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  span.step-badge::after { opacity: 0 !important; }
}
@media print {
  ol.step-progress span,
  ol.step-progress li + li::after,
  .hp-step .hp-step-img img,
  span.step-badge,
  .hp-step .hp-step-label { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* =============================================================
   特長のカードの絵（2026-10-25・運営者「アニメーションで」）
   前は止まった線の絵（feature-i0N.svg・ファイルは残した）。いまは top-body.php にその場で描く SVG（svg.feat-art・読み上げない飾り）。
   ・Fast Internet Speeds: スピードメーターの針が高い所まで振れ、目盛りの光が満ちる → 針が小さく揺れ続ける・速さの線・読み込みの棒が素早く満ちる
   ・Excellent Data Coverage: 日本の形の上に、南から北へ場所の印が順に立つ → 電波の輪が広がり続ける（47 都道府県どこでも）
   ・Worry-Free Setup: メールの手紙が出てくる・時計がくるっと回る（すぐ届く）→ スマホが QR を読み取る → ✓ と電波の棒（数ステップでつながる）
   ・カードの列（.hp-feat-grid.hp-reveal）が画面に入ったら始まる。
   ★何も動かないときの見た目＝止まった完成の絵（動きを減らしたい設定の人・印刷・JS なし）
   ============================================================= */
.hp-feat-img svg.feat-art { display: block; width: 240px; max-width: 100%; height: auto; overflow: visible; }

/* 何も動かないときの見た目（完成の絵） */
svg.fa-speed .fa-prog { stroke-dasharray: 100 100; stroke-dashoffset: 15; }
svg.fa-speed .fa-needle { transform: rotate(354deg); }
svg.fa-speed .fa-st { opacity: 0; }
svg.fa-map .fm-rip { opacity: 0; }
svg.fa-map .fm-glow { opacity: .55; }
svg.fa-setup .fs-scan { opacity: 0; }

/* 形を変える動きの基準点（部品ごと） */
svg.feat-art .fa-needle,
svg.feat-art .fa-jit { transform-origin: 120px 118px; }
svg.feat-art .fa-bar { transform-box: fill-box; transform-origin: left center; }
svg.feat-art .fm-pin { transform-box: fill-box; transform-origin: 50% 100%; }
svg.feat-art .fm-rip,
svg.feat-art .fs-ok { transform-box: fill-box; transform-origin: center; }
svg.feat-art .fs-b { transform-box: fill-box; transform-origin: center bottom; }
svg.feat-art .fs-hand { transform-origin: 86px 46px; }

/* 出てくる動き（カードの列が画面に入ったとき）: 絵が下から・カードごとに少しずつ遅れて */
html.js-reveal .hp-feat-grid:not(.is-show) svg.feat-art { opacity: 0; transform: translateY(16px) scale(.94); }
.hp-feat-grid.is-show svg.feat-art { animation: featIn .8s var(--jol-ease) .15s both; }
.hp-feat-grid.is-show .hp-feat-card:nth-child(2) svg.feat-art { animation-delay: .35s; }
.hp-feat-grid.is-show .hp-feat-card:nth-child(3) svg.feat-art { animation-delay: .55s; }

/* 1. 速さ */
.hp-feat-grid.is-show svg.fa-speed .fa-needle { animation: faSweep 1.4s var(--jol-ease) .5s both; }
.hp-feat-grid.is-show svg.fa-speed .fa-prog { animation: faProg 1.4s var(--jol-ease) .5s both; }
.hp-feat-grid.is-show svg.fa-speed .fa-jit { animation: faJit 1.6s ease-in-out 2s infinite alternate both; }
.hp-feat-grid.is-show svg.fa-speed .fa-bar { animation: faBar 2.2s ease-in-out 1.2s infinite both; }
.hp-feat-grid.is-show svg.fa-speed .fa-st { animation: faStreak 1.1s ease-out .6s infinite both; }
.hp-feat-grid.is-show svg.fa-speed .fa-st.s2 { animation-delay: .85s; }
.hp-feat-grid.is-show svg.fa-speed .fa-st.s3 { animation-delay: 1.1s; }
/* 2. 全国の電波 */
.hp-feat-grid.is-show svg.fa-map .fm-glow { animation: featGlow 3.2s ease-in-out infinite; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p1 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 0.50s both; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p2 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 0.68s both; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p3 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 0.86s both; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p4 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.04s both; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p5 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.22s both; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p6 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.40s both; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p7 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.58s both; }
.hp-feat-grid.is-show svg.fa-map .fm-pin.p8 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.76s both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r1 { animation: featRipple 2.6s ease-out 2.00s infinite both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r2 { animation: featRipple 2.6s ease-out 2.32s infinite both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r3 { animation: featRipple 2.6s ease-out 2.64s infinite both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r4 { animation: featRipple 2.6s ease-out 2.96s infinite both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r5 { animation: featRipple 2.6s ease-out 3.28s infinite both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r6 { animation: featRipple 2.6s ease-out 3.60s infinite both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r7 { animation: featRipple 2.6s ease-out 3.92s infinite both; }
.hp-feat-grid.is-show svg.fa-map .fm-rip.r8 { animation: featRipple 2.6s ease-out 4.24s infinite both; }
/* 3. かんたん設定 */
.hp-feat-grid.is-show svg.fa-setup .fs-letter { animation: fsLetter 6s ease-in-out .8s infinite both; }
.hp-feat-grid.is-show svg.fa-setup .fs-hand { animation: fsHand 6s ease-in-out .8s infinite both; }
.hp-feat-grid.is-show svg.fa-setup .fs-flow { animation: featFlow 1.2s linear infinite; }
.hp-feat-grid.is-show svg.fa-setup .fs-scan { animation: fsScan 6s ease-in-out .8s infinite both; }
.hp-feat-grid.is-show svg.fa-setup .fs-ok { animation: fsOk 6s ease-in-out .8s infinite both; }
.hp-feat-grid.is-show svg.fa-setup .fs-b.k1 { animation: fsB1 6s ease-in-out .8s infinite both; }
.hp-feat-grid.is-show svg.fa-setup .fs-b.k2 { animation: fsB2 6s ease-in-out .8s infinite both; }
.hp-feat-grid.is-show svg.fa-setup .fs-b.k3 { animation: fsB3 6s ease-in-out .8s infinite both; }
.hp-feat-grid.is-show svg.fa-setup .fs-b.k4 { animation: fsB4 6s ease-in-out .8s infinite both; }

@keyframes featIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes faSweep { 0% { transform: rotate(150deg); } 70% { transform: rotate(362deg); } 100% { transform: rotate(354deg); } }
@keyframes faProg { 0% { stroke-dashoffset: 100; } 70% { stroke-dashoffset: 12; } 100% { stroke-dashoffset: 15; } }
@keyframes faJit { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }
@keyframes faBar { 0% { transform: scaleX(0); opacity: 1; } 40%, 70% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(1); opacity: 0; } 81%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes faStreak { 0% { transform: translateX(12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-14px); opacity: 0; } }
@keyframes featGlow { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes featPin { 0% { transform: translateY(-8px) scale(0); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes featRipple { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes featFlow { to { stroke-dashoffset: -16; } }
@keyframes fsLetter { 0% { transform: translateY(16px); } 12%, 90% { transform: translateY(0); } 100% { transform: translateY(16px); } }
@keyframes fsHand { 0%, 12% { transform: rotate(0deg); } 30%, 100% { transform: rotate(360deg); } }
@keyframes fsScan { 0%, 30% { opacity: 0; transform: translateY(0); } 33% { opacity: 1; } 45% { transform: translateY(38px); } 57% { opacity: 1; transform: translateY(0); } 60%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes fsOk { 0%, 60% { opacity: 0; transform: scale(0); } 65% { opacity: 1; transform: scale(1.2); } 69%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0); } }
@keyframes fsB1 { 0%, 69% { opacity: 0; transform: scaleY(.3); } 72% { opacity: 1; transform: scaleY(1.15); } 74%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scaleY(.3); } }
@keyframes fsB2 { 0%, 72% { opacity: 0; transform: scaleY(.3); } 75% { opacity: 1; transform: scaleY(1.15); } 77%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scaleY(.3); } }
@keyframes fsB3 { 0%, 75% { opacity: 0; transform: scaleY(.3); } 78% { opacity: 1; transform: scaleY(1.15); } 80%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scaleY(.3); } }
@keyframes fsB4 { 0%, 78% { opacity: 0; transform: scaleY(.3); } 81% { opacity: 1; transform: scaleY(1.15); } 83%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scaleY(.3); } }

/* 動きを減らしたい設定の人・印刷: 止まった完成の絵（上の「何も動かないときの見た目」） */
@media (prefers-reduced-motion: reduce) {
  svg.feat-art,
  svg.feat-art * { animation: none !important; }
  html.js-reveal .hp-feat-grid:not(.is-show) svg.feat-art { opacity: 1; transform: none; }
}
@media print {
  svg.feat-art,
  svg.feat-art * { animation: none !important; }
  html.js-reveal .hp-feat-grid:not(.is-show) svg.feat-art { opacity: 1; transform: none; }
}