@charset "UTF-8";
/* =============================================================
   フロントの改善（フェーズ1〜・2026-10-24〜）
   WP 由来の CSS（reset / font / layout / front・lower）は残し、このファイルで上から重ねる。
   front-head.php が全部のフロントのページで最後に読む。元に戻すときは、このファイルを外すだけ。
   ============================================================= */

:root {
  --jol-text: #070c1a;
  --jol-text-sub: #5d6b69;     /* 説明の文字。白地で 4.5:1 以上（前の #879694 は 3.07） */
  --jol-teal: #0f7f80;         /* 小見出しの青緑。白地で 4.5:1 以上（前の #1a9fa0 は 3.22） */
  --jol-blue: #0065b8;
  --jol-focus: #1a73e8;
  --jol-shadow-md: 0 10px 30px rgba(16, 24, 40, .10);
  --jol-ease: cubic-bezier(.2, .65, .3, 1);
}

/* ─── 全体 ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(229, 40, 31, .14); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 縦横の大きさを書いた画像は、形が崩れないように高さを自動にする（読み込み中に画面がずれないための指定） */
img[width][height] { height: auto; }

/* キーボードで操作したときだけ、いま選んでいる所に枠を出す（マウスやタップでは出さない） */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--jol-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── ふわっと出る動き ──────────────────────────────────────
   ふだんは最初から見える。JS が動くとき（html.js-reveal）だけ隠して、画面に入ったら出す（common.js）。
   ★動きを減らしたい設定の人には動かさない。検索エンジンや印刷でも見えるように。 */
.fadein,
.fadein_up { opacity: 1; transform: none; }
html.js-reveal .fadein { opacity: 0; transition: opacity .7s var(--jol-ease); }
html.js-reveal .fadein_up {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .7s var(--jol-ease), transform .7s var(--jol-ease);
}
html.js-reveal .fadein.is-show,
html.js-reveal .fadein_up.is-show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .fadein,
  html.js-reveal .fadein_up { opacity: 1; transform: none; transition: none; }
}
@media print {
  html.js-reveal .fadein,
  html.js-reveal .fadein_up { opacity: 1 !important; transform: none !important; }
}

/* ─── ヘッダー ──────────────────────────────────────────────
   スクロールで固定されたら、薄い影で浮かせる。
   ★すりガラス（後ろが透ける見た目）は試したが、ロゴの画像が白い背景つきのため白い四角が目立った。
     ロゴは管理画面で同じ名前の画像に差し替える運用なので、透明な版を別に作ると差し替えに追いつかない。
     そのため背景は白のまま、影だけにしている（2026-10-24） */
header.is_fixed {
  border-bottom-color: rgba(224, 224, 224, .6);
  box-shadow: 0 6px 24px rgba(16, 24, 40, .08);
}

/* ─── ボタン・カード ───────────────────────────────────────── */
/* ボタン: 押せることが伝わる、軽い浮き上がり（マウスのときだけ） */
a.btn { transition: transform .2s var(--jol-ease), box-shadow .2s var(--jol-ease), background-color .2s ease, opacity .2s ease; }
@media (hover: hover) {
  a.btn:hover { transform: translateY(-2px); }
}
a.btn:active { transform: translateY(0); }

/* プランのカード: マウスを乗せると少し浮く（カード全体が購入画面へのリンク）
   ★layout.css の「div.sim-type a.swiper-slide:hover」（下へ 3px 沈む）より強く効くように、同じ書き方にしている。
     （前の「.sim-type .swiper-slide:hover」は弱くて効いていなかった・フェーズ2で直した） */
div.sim-type a.swiper-slide { transition: transform .25s var(--jol-ease), box-shadow .25s var(--jol-ease), background-color .25s ease; }
div.sim-type a.swiper-slide:hover { transform: none; }   /* タップの端末では沈ませない（触ったあと沈んだままになる） */
@media (hover: hover) {
  div.sim-type a.swiper-slide:hover { transform: translateY(-4px); box-shadow: var(--jol-shadow-md); }
}

/* 文字のリンク（使い方の手順 1「対応機種を見る」など）: 押せる高さ 44px と矢印 */
a.txt-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  margin-top: 4px;
  font-weight: 600;
  color: var(--jol-blue);
  text-decoration: none;
}
a.txt-link::after { content: "\2192"; transition: transform .2s var(--jol-ease); }
@media (hover: hover) {
  a.txt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  a.txt-link:hover::after { transform: translateX(3px); }
}

/* 旅の特典の節のボタン（クーポンのページへ） */
div.area div.inner div.btn-wrap { margin-top: clamp(20px, 3vw, 32px); }

/* ─── フッター ─── フェーズ3で作り直した（下の「footer.site-footer」）。 */

/* ─── スマホ ────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
  /* ヘッダーの申し込みボタン: 押しやすい高さに（前は高さ 23〜30px） */
  header a.btn { min-height: 38px; }
}

/* =============================================================
   フェーズ2: 申し込みの後押し（2026-10-24）
   動きは front-ux.js。要素が無いページ（/esim/ など）では何も起きない。
   ============================================================= */

/* ─── トップの最初の画面（div.main.top-hero）──────────────────────────
   ★div.main は下層ページ（/esim/・/faq/・/reviews/・固定ページ）の上の部分にも使われている（lower.css）。
     トップだけに効かせるため、必ず「.top-hero」を付けて書く。
     （フェーズ2 では付け忘れて、下層ページの上の部分がパソコンで 600px に伸び、スマホでは暗い層が重なっていた → フェーズ3で直した） */

/* 1025px 以上: 絵の左の明るい所に文字（前と同じ配置）。
   前は高さが決まっていて中の文字を上下の真ん中に「浮かせて」いたため、中身が増えると見出しがヘッダーの下に潜った。
   → 中身が収まらないときだけ下へ伸ばす。位置は前と同じ（左から横幅の 5%・幅 55%・上下の真ん中） */
@media screen and (min-width: 1025px) {
  div.main.top-hero { display: flex; align-items: center; height: auto; min-height: max(41.66vw, 400px); padding-top: 40px; padding-bottom: 40px; }
  div.main.top-hero div.content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: calc((100% + 30px) * .55);              /* 前の「幅 55%」と同じ（左右の余白 15px ずつを足した幅の 55%） */
    margin-left: calc((100% + 30px) * .05 - 15px); /* 前の「左から 5%」と同じ位置 */
  }
}

/* 1024px 以下: 絵を上に、文字をその下に分ける（文字を絵に重ねない・フェーズ3）。
   481〜1024px は横長の絵（main.webp）を角の丸いカードで丸ごと。480px 以下は下の「スマホ」の決まり
   （縦長の絵 main-sp.webp を大きく・見出しと説明は絵の下の部分に重ねる＝運営者の依頼 2026-10-28）。
   ★どちらも front-head.php が先に読む絵と同じ（main.webp は 481px 以上・main-sp.webp は 480px 以下）。
     前は 481〜768px で main-tab.webp も読んでいた（先に読む絵と違うので 2 枚）→ 今は 1 枚 */
@media screen and (max-width: 1024px) {
  div.main.top-hero {
    display: block;
    height: auto;
    min-height: 0;
    padding: 16px 16px clamp(32px, 5vw, 48px);
    background: linear-gradient(180deg, #f6f1e7 0%, #fbf9f4 52%, #fff 100%);
  }
  div.main.top-hero::before {
    display: block;
    max-width: 960px;
    margin: 0 auto clamp(20px, 3vw, 30px);
    content: "";
    aspect-ratio: 12 / 5;
    background: #ece6da url(../img/webp/front/main.webp) center / cover no-repeat;
    border-radius: clamp(16px, 2.4vw, 24px);
    box-shadow: 0 14px 34px rgba(16, 24, 40, .14);
  }
  div.main.top-hero div.content {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 960px;
    margin: 0 auto;
  }
  div.main.top-hero h1 { color: var(--jol-text); }
  div.main.top-hero p { color: var(--jol-text-sub); }
}
/* 480px 以下（スマホ）: 縦長の絵（main-sp.webp）を画面の端から端まで大きく出し、見出しと説明を絵の下の部分に重ねる。
   運営者の依頼（2026-10-28）
     ①「スマホはトップの絵が切れてしまう。少し大きくなってもいいので、もう少し迫力を」
     ②「トップの絵の上に、1 秒後に訴求の文章が浮かび上がるように」
   ・絵は侍の全身（上の字と家紋から、青い渦と手まで）。切るのは絵の下の暗いぼかしだけ（縦 1214 のうち下の 54）
   ・見出し（h1）と説明（p）は、絵の下の部分に白い字で重ねる。読みやすいように、文字の後ろだけ絵を暗くする幕（div.content::before）
   ・申し込みボタンと安心材料の札は、前と同じく、絵の下の端に 26px 重なる角の丸い板（::after）の上
   ・並べ方は格子（grid）。div.content は箱を作らない（display: contents）ので、中の見出し・説明・ボタン・札を
     そのまま格子の行に置ける（1 行目＝絵の上の部分・2 行目＝見出し・3 行目＝説明・4 行目＝ボタン・5 行目＝札）。
     絵（::before）は 1〜3 行目にまたがるので、見出しや説明の行数が変わっても（言語・管理画面の文言）、文字はいつも絵の下の端にそろう
   ・動き: 開いたとき、絵が少し大きい所から落ち着く（1.6 秒）。最初の 1 秒は絵だけ。1 秒後に見出しが、少し遅れて説明が、
     下からふわっと浮かび上がる（暗くする幕も一緒に）。動きを減らす設定の人には、最初から文字を出す（動かさない）
   ・画面の下の申し込みバーは、ボタンを通り過ぎてから出す（front-ux.js） */
@media screen and (max-width: 480px) {
  div.main.top-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto;
    padding-top: 0;
    overflow: hidden;   /* 落ち着く動きの途中で、絵が横にはみ出さないように */
  }
  div.main.top-hero div.content { display: contents; }
  div.main.top-hero::before {
    grid-area: 1 / 1 / 4 / 2;
    margin: 0 -16px;    /* 左右の余白（16px）の外まで＝画面の端から端まで */
    aspect-ratio: 750 / 1160;
    /* 下の層は、絵が届く前の下地（絵と同じく上が明るく下が暗い）。絵より先に文字が出ても読める */
    background: url(../img/webp/front/main-sp.webp) 50% 0 / cover no-repeat,
                linear-gradient(180deg, #ebe4d6 0, #c9c2b4 38%, #2d4350 70%, #192c2a 100%);
    border-radius: 0;
    box-shadow: none;
  }
  div.main.top-hero div.content::before {   /* 文字の後ろを暗くする幕（見出しの少し上から、絵の下の端まで） */
    content: "";
    grid-area: 2 / 1 / 4 / 2;
    z-index: 1;
    margin: -120px -16px 0;
    background: linear-gradient(180deg, rgba(10, 20, 24, 0) 0, rgba(10, 20, 24, .45) 32%, rgba(10, 20, 24, .78) 70%, rgba(10, 20, 24, .86) 100%);
    pointer-events: none;
  }
  div.main.top-hero h1 {
    grid-area: 2 / 1;
    z-index: 2;
    color: #fff;
    font-size: clamp(26px, 8vw, 30px);   /* 375px 以上は前と同じ 30px。それより狭いスマホは少し小さく（絵が隠れすぎないように） */
    line-height: 1.35;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  }
  div.main.top-hero div.content > p {
    grid-area: 3 / 1;
    z-index: 2;
    margin: 0 0 50px;   /* 下の板（26px 重なる）にかからないように */
    padding-top: 10px;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(15px, 4.4vw, 16px);
    line-height: 1.7;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
  }
  div.main.top-hero a.btn.apply {
    grid-area: 4 / 1;
    z-index: 2;
    margin-top: 2px;    /* 板の上の端から 28px（前と同じ） */
  }
  div.main.top-hero ul.trust-chips { grid-area: 5 / 1; z-index: 2; }
  div.main.top-hero::after {   /* ボタンと札の板 */
    content: "";
    grid-area: 4 / 1 / 6 / 2;
    z-index: 1;
    margin: -26px -16px 0;
    background: linear-gradient(180deg, #f6f1e7 0, #fbf9f4 45%, #fff 100%);
    border-radius: 24px 24px 0 0;
  }
}
/* 動きの最後の形は、ふだんの形と同じ。終わったら CSS のふだんの形に戻す（backwards: 始まるまでは最初の形で待つ） */
@media screen and (max-width: 480px) and (prefers-reduced-motion: no-preference) {
  div.main.top-hero::before { animation: topHeroIn 1.6s var(--jol-ease) backwards; }
  div.main.top-hero div.content::before { animation: topScrimIn 1s ease .8s backwards; }
  div.main.top-hero h1 { animation: topCopyIn 1s var(--jol-ease) 1s backwards; }
  div.main.top-hero div.content > p { animation: topCopyIn 1s var(--jol-ease) 1.2s backwards; }
}
@keyframes topHeroIn { from { transform: scale(1.08); } to { transform: none; } }
@keyframes topScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes topCopyIn { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ─── 最初の画面の安心材料（約15分で QR・回線・日英サポート・今の SIM はそのまま） ─── */
div.main.top-hero ul.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: clamp(18px, 2vw, 26px);
  padding: 0;
}
div.main.top-hero ul.trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  color: var(--jol-text);
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.3;
  font-weight: 600;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(7, 12, 26, .08);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
div.main.top-hero ul.trust-chips svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--jol-teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media screen and (max-width: 480px) {
  div.main.top-hero ul.trust-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  div.main.top-hero ul.trust-chips li { padding: 7px 10px; font-size: 12.5px; border-radius: 12px; }
}

/* ─── プラン: 滞在日数で選ぶ・通貨 ─────────────────────────── */
div.plan-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
}
div.plan-tools + div.slider-wrap { margin-top: clamp(24px, 3vw, 36px); }
div.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #eef2f7;
  border: 1px solid rgba(7, 12, 26, .06);
  border-radius: 999px;
}
button.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.seg-btn:hover { color: var(--jol-text); background: rgba(255, 255, 255, .7); }
}
/* 日数: 選んだら青で塗る（いちばん大事な操作）／通貨: 白い札が乗る（スイッチの見た目） */
div.trip-pick button.seg-btn[aria-pressed="true"] { color: #fff; background: var(--jol-blue); box-shadow: 0 4px 12px rgba(0, 101, 184, .28); }
div.cur-pick button.seg-btn { padding: 0 14px; font-size: 14px; letter-spacing: .02em; }
div.cur-pick button.seg-btn[aria-pressed="true"] { color: var(--jol-text); background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .14); }
@media screen and (max-width: 600px) {
  div.trip-pick { display: flex; width: 100%; max-width: 520px; }
  div.trip-pick button.seg-btn { flex: 1 1 0; padding: 0 6px; font-size: 14px; }
}

/* 「Best for your trip」の札と、選んだプランの枠 */
.pick-badge { display: none; }
div.sim-type a.swiper-slide .pick-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
.is-pick .pick-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--jol-blue);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 101, 184, .3);
}
/* 枠は内側に描く（スライドの外側だと、横に流す枠に切られて見えなくなる） */
div.sim-type a.swiper-slide.is-pick { outline: 3px solid var(--jol-blue); outline-offset: -3px; background: #f2f7fe; }

/* 円のときは「¥2,980 (tax incl.)」の重ね書きを出さない（大きな値段がもう円） */
html[data-currency="JPY"] .jpy-line,
html[data-currency="JPY"] div.sim-type a.swiper-slide ul.info li.jpy-line { display: none; }   /* ★カードの札は layout.css の「ul.info li」の方が強いので、同じ書き方で上回る（フェーズ4で直した） */

/* カードの小さな札（円・1 日あたり・制限後の速さ）: 幅が足りないときは折り返す（前は札の中で文字が 2 行に割れていた） */
div.sim-type a.swiper-slide ul.info { flex-wrap: wrap; gap: 6px; }
div.sim-type a.swiper-slide ul.info li { white-space: nowrap; }
div.sim-type a.swiper-slide ul.info li + li { margin-left: 0; }
/* 1 日あたり（値段のすぐ下） */
div.sim-type a.swiper-slide span.perday { display: block; margin-top: 6px; padding-left: .25em; color: var(--jol-text-sub); font-size: 14px; font-weight: 600; }

/* スマホ（768px 以下）: 横に流すカードをやめ、縦に並べて一目で比べる */
div.plan-list { display: none; }
@media screen and (max-width: 768px) {
  div.plans-area div.plan-swiper { display: none; }
  div.plan-list { display: block; max-width: 560px; margin: 22px auto 0; }
}
a.plan-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  margin-top: 14px;
  padding: 12px;
  color: var(--jol-text);
  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, background-color .2s ease, transform .15s ease;
}
div.plan-list a.plan-row:first-child { margin-top: 0; }
a.plan-row:active { transform: scale(.985); }
@media (hover: hover) {
  a.plan-row:hover { border-color: #b8cbe0; box-shadow: var(--jol-shadow-md); }
}
a.plan-row.is-pick { background: #f5f9ff; border-color: var(--jol-blue); box-shadow: 0 0 0 2px var(--jol-blue), 0 10px 26px rgba(0, 101, 184, .14); }
a.plan-row .pick-badge { position: absolute; top: -10px; left: 14px; }
a.plan-row.is-pick .pick-badge { padding: 3px 10px; font-size: 11px; }
a.plan-row span.pr-gb {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 58px;
  padding: 11px 6px;
  color: var(--jol-blue);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  background: #eef5fc;
  border-radius: 12px;
}
a.plan-row span.pr-gb small { margin-left: 2px; font-size: 13px; font-weight: 700; }
a.plan-row span.pr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
a.plan-row span.pr-days { font-size: 17px; line-height: 1.2; font-weight: 700; }
a.plan-row span.pr-sub { color: var(--jol-text-sub); font-size: 13px; line-height: 1.3; white-space: nowrap; }
a.plan-row span.pr-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
a.plan-row span.pr-price > span { color: #db1a1a; font-size: 22px; line-height: 1.1; font-weight: 800; }
a.plan-row span.pr-price small { color: var(--jol-text-sub); font-size: 12px; line-height: 1.2; font-weight: 500; }
a.plan-row span.pr-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 screen and (max-width: 374px) {
  a.plan-row { gap: 8px; }
  a.plan-row span.pr-cta { display: none; }   /* 幅の狭い端末では、行そのものが押せるので「Buy」を外す */
}
ul.plan-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 18px;
  padding: 14px 16px;
  background: #f5f8fb;
  border-radius: 14px;
}
ul.plan-includes li { display: inline-flex; align-items: center; gap: 6px; color: #33403e; font-size: 14px; line-height: 1.4; }
ul.plan-includes li::before { content: "\2713"; color: var(--jol-teal); font-weight: 800; }
p.plan-note { margin-top: 10px; color: var(--jol-text-sub); font-size: 13px; text-align: center; }

/* ─── 対応機種かんたんチェック ─────────────────────────────── */
div.devcheck {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(18px, 3vw, 28px);
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, .06);
}
label.devcheck-label { display: block; margin-bottom: 8px; color: #33403e; font-size: 14px; font-weight: 700; }
div.devcheck-box { position: relative; }
div.devcheck-box svg {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--jol-text-sub);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
div.devcheck-box input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 54px;
  padding: 0 16px 0 46px;
  color: var(--jol-text);
  font: inherit;
  font-size: 16px;   /* 16px 未満だと iPhone が勝手に拡大する */
  background: #f8fafc;
  border: 1.5px solid #c9d3df;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
div.devcheck-box input::placeholder { color: #6b7774; opacity: 1; }
div.devcheck-box input:focus { outline: none; background: #fff; border-color: var(--jol-blue); box-shadow: 0 0 0 4px rgba(0, 101, 184, .16); }
div.devcheck-result:empty { display: none; }
div.devcheck-result { margin-top: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.6; border-radius: 14px; }
div.devcheck-result.is-ok { background: #ecf8f3; border: 1px solid #bfe5d3; }
div.devcheck-result.is-ng { background: #fff5e9; border: 1px solid #f3d3a8; }
div.devcheck-result p.dc-head { display: flex; align-items: center; gap: 8px; font-weight: 800; }
div.devcheck-result p.dc-head::before {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  border-radius: 50%;
}
div.devcheck-result.is-ok p.dc-head { color: #0b6b4f; }
div.devcheck-result.is-ok p.dc-head::before { content: "\2713"; background: #12935f; }
div.devcheck-result.is-ng p.dc-head { color: #8a4600; }
div.devcheck-result.is-ng p.dc-head::before { content: "!"; background: #c86400; }
ul.dc-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0; }
ul.dc-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  border: 1px solid #cfe9dc;
  border-radius: 999px;
}
ul.dc-list li span.dc-brand { color: var(--jol-text-sub); font-size: 12px; font-weight: 600; }
div.devcheck-result p.dc-more,
div.devcheck-result p.dc-note,
div.devcheck-result p.dc-hint,
div.devcheck-result p.dc-text { margin-top: 8px; color: #33403e; font-size: 14px; }
div.devcheck-result p.dc-text a { color: var(--jol-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
div.devcheck a.txt-link { margin-top: 10px; }

/* ─── お客様の声 ──────────────────────────────────────────── */
p.rv-summary { margin-top: .5rem; color: #33403e; font-size: 16px; text-align: center; }
p.rv-summary span.rv-stars { margin-right: 4px; color: #db1a1a; letter-spacing: 2px; }
p.rv-summary strong { font-size: 20px; }
/* 3 件より少ないとき（769px 以上＝2〜3 枚ずつ並ぶ幅）: 左に寄せず真ん中に。送るボタンも要らない
   ★「div.slider-wrap div.default-slide div.swiper-wrapper」（両端に寄せる）より強くするため、先頭に div.slider-wrap を付けている */
@media screen and (min-width: 769px) {
  div.slider-wrap div.review-type.is-few div.swiper-wrapper { justify-content: center; }
  /* 最後の 1 枚の右の間隔（Swiper が直接書き込む 50px）を消して、ちょうど真ん中に */
  div.slider-wrap div.review-type.is-few div.swiper-slide:last-child { margin-right: 0 !important; }
  div.slider-wrap div.review-type.is-few div.swiper-pagination,
  div.slider-wrap div.review-type.is-few div.swiper-button-prev,
  div.slider-wrap div.review-type.is-few div.swiper-button-next { display: none; }
}

/* ─── スマホの申し込みバー（最初の画面のボタンが見えなくなったら下から出す・フッターでは隠す。
       トップはボタンを通り過ぎてから出す＝最初の画面の大きな絵には重ねない・front-ux.js） ─── */
div.sticky-cta { display: none; }
@media screen and (max-width: 768px) {
  div.sticky-cta {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 15;   /* ヘッダー（メニュー）20・お知らせの窓 30 より下 */
    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;
  }
  div.sticky-cta.is-on { visibility: visible; transform: none; transition: transform .35s var(--jol-ease), visibility 0s; }
  div.sticky-cta span.sc-text { display: flex; flex-direction: column; line-height: 1.2; }
  div.sticky-cta span.sc-from { color: var(--jol-text-sub); font-size: 12px; font-weight: 600; }
  div.sticky-cta span.sc-price { color: var(--jol-text); font-size: 22px; font-weight: 800; }
  div.sticky-cta a.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #db1a1a;
    border-radius: 12px;
    box-shadow: 0 3px 0 #a31414;
  }
  div.sticky-cta a.sc-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a31414; }
}
@media (prefers-reduced-motion: reduce) {
  div.sticky-cta,
  div.sticky-cta.is-on { transition: none; }
}
@media print {
  div.sticky-cta { display: none !important; }
}

/* =============================================================
   フェーズ3: デザインの刷新（2026-10-24）
   最初の画面（上の「トップの最初の画面」）・各節の小さな見出し・「JAPAN-ON-LINE eSIM とは」の強みと数字・
   ボタンの色の決まり・フッター。写真の差し替えは、素材をいただいてから。
   ============================================================= */

/* ─── 各節の見出しの上の小さな見出し（PLANS & PRICING など） ─── */
p.eyebrow {
  position: relative;   /* 写真の節（div.area.image）は暗い層（::before）が上にかぶさる。見出しと同じく、その上に出す */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #0b6e6f;   /* 白地でも薄い青の地（#f2f7fe）でも 4.5:1 以上（--jol-teal は薄い青の地で 4.47 と足りない） */
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
p.eyebrow::before,
p.eyebrow::after {
  width: 22px;
  height: 2px;
  content: "";
  background: currentColor;
  border-radius: 2px;
  opacity: .5;
}
p.eyebrow.wht { color: rgba(255, 255, 255, .92); }   /* 写真の上の節（Reliable. Speedy. Affordable.） */
div.txt-abu p.eyebrow { justify-content: flex-start; }
div.txt-abu p.eyebrow::before { display: none; }

/* ─── 「JAPAN-ON-LINE eSIM とは」: 強みと数字 ───────────────────────
   前は高さが決まった絵の上に文字を浮かせていた（スマホでは梅の花・太陽の絵と文字が重なっていた）。
   → 文字をすりガラスのカードに入れ、中身に合わせて伸びる形に。絵（鶴・太陽・富士山・鳥居）は後ろにそのまま見える */
div.txt-abu {
  padding: clamp(24px, 4vw, 44px);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: clamp(20px, 3vw, 28px);
  box-shadow: 0 24px 60px rgba(16, 24, 40, .12);
}
@media screen and (min-width: 1025px) {
  /* 位置は前と同じ（左から横幅の 10%）。高さは前と同じだけ取り、中身が多いときだけ伸びる */
  div.area.illust { display: flex; align-items: center; height: auto; min-height: max(51.5625vw, 990px); padding-top: 72px; padding-bottom: 72px; }
  div.area.illust > div.content { width: 100%; }
  div.txt-abu { position: relative; top: auto; left: auto; transform: none; width: min(720px, 52vw); margin-left: calc(10vw - 15px); }
}
@media screen and (max-width: 1024px) {
  /* カードを上に、絵の下の場面（富士山・鳥居・鶴）がカードの下に見えるように、下を広く空ける */
  div.area.illust { height: auto; padding: clamp(40px, 7vw, 72px) 16px clamp(200px, 56vw, 460px); }
  div.area.illust > div.content { width: 100%; }
  div.txt-abu { position: relative; top: auto; left: auto; transform: none; width: auto; max-width: 680px; margin: 0 auto; }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  div.txt-abu h2 br.br768 { display: none; }   /* カードが広いので、見出しを 3 行に割らない */
}
ul.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(18px, 2.4vw, 26px);
  padding: 0;
}
ul.about-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e3eaf1;
  border-radius: 16px;
}
ul.about-stats span.st-num {
  color: var(--jol-teal);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}
ul.about-stats span.st-num small { margin-left: 4px; font-size: .5em; font-weight: 700; letter-spacing: 0; }
ul.about-stats span.st-label { color: #33403e; font-size: 13.5px; line-height: 1.45; }
div.txt-abu div.btn-wrap { margin-top: clamp(20px, 2.6vw, 28px); }
div.txt-abu div.btn-wrap a.btn { margin-top: 0; }

/* ─── 特長の節（Built for travel in Japan）のカード: 角を丸く・うすい枠と影 ─── */
div.feature-type div.swiper-slide {
  border: 1px solid #e3eaf3;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, .05);
}

/* ─── ボタンの色の決まり ────────────────────────────────────────
   赤（塗り）＝申し込み（a.btn.apply）／青い枠＝「もっと見る」（それ以外の a.btn・/esim/ の Technical Details）。
   前は「もっと見る」も青く塗ったボタンで、申し込みの赤と同じ強さで並んでいた → いちばん押してほしい赤が目立つように。
   矢印の丸は、白い丸の絵（arrow-i-wht.svg）を「型」にして青で塗る（矢印は丸の穴なので、下の色が見える） */
a.btn:not(.apply),
span.btn.modal {
  color: var(--jol-blue);
  background: #fff;
  border: 2px solid var(--jol-blue);
  box-shadow: none;
}
a.btn:not(.apply)::after,
span.btn.modal::after {
  background: var(--jol-blue);
  -webkit-mask: url(../img/icon/arrow-i-wht.svg) center / contain no-repeat;
  mask: url(../img/icon/arrow-i-wht.svg) center / contain no-repeat;
}
a.btn:not(.apply):hover,
span.btn.modal:hover { box-shadow: none; }
@media (hover: hover) {
  a.btn:not(.apply):hover,
  span.btn.modal:hover { color: #fff; background: var(--jol-blue); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 101, 184, .22); }
  a.btn:not(.apply):hover::after,
  span.btn.modal:hover::after { background: #fff; }
}

/* ─── フッター（footer.site-footer） ──────────────────────────────
   前: 大きな見出し（48px）＋見出しの無いリンクの列 3 つ。町並みの絵がリンクの文字に重なっていた（スマホは下の 3 つ）。
   今: 左に名前と一言、右に「Service／Help／Company」。町並みは、リンクの下の帯（重ならない）。
   ★front-footer.php の footer に class="site-footer" があるページだけ（ブログは別の作りなので変わらない） */
footer.site-footer {
  display: flex;
  flex-direction: column;
  background: #f7f9fc;
  border-top: 1px solid #e6ebf1;
}
footer.site-footer div.content {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 36px 64px;
  width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 16px clamp(28px, 3vw, 40px);
}
footer.site-footer::before {
  order: 2;
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(150px, 18vw, 260px);
  background: url(../img/webp/footer-bk-band.webp) right bottom / auto 100% no-repeat;
  z-index: auto;
}
footer.site-footer #copyright { order: 3; }
footer.site-footer h2.footer-title {
  color: var(--jol-text);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  font-weight: 800;
}
footer.site-footer span.footer-by { display: block; margin-top: 6px; color: var(--jol-text-sub); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
footer.site-footer p.footer-lead { max-width: 380px; margin-top: 14px; color: #33403e; font-size: 15px; line-height: 1.7; }
footer.site-footer nav.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
}
footer.site-footer p.footer-head {
  margin-bottom: 8px;
  color: var(--jol-text-sub);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
footer.site-footer nav.footer-nav ul { padding: 0; }
footer.site-footer nav.footer-nav li a {
  display: inline-block;
  min-width: 44px;   /* 「FAQ」「Blog」のような短いリンクも押しやすい幅に */
  padding: 7px 0;
  color: var(--jol-text);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) {
  footer.site-footer nav.footer-nav li a:hover { color: var(--jol-blue); text-decoration: underline; text-underline-offset: 3px; }
}
@media screen and (max-width: 1024px) {
  footer.site-footer div.content { grid-template-columns: 1fr; }
}
@media screen and (max-width: 768px) {
  /* 町並みは画面の幅いっぱいに（絵の横と縦の比 1200:466 に合わせた高さ） */
  footer.site-footer::before { height: 38.9vw; background-size: 100% auto; background-position: center bottom; }
}
@media screen and (max-width: 600px) {
  footer.site-footer nav.footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── ヘッダー: いま開いているページのリンクの色 ─── 前の #ff4027 は白地で 3.49（文字には 4.5 以上が要る）→ 同じ赤の濃い方に */
nav#pcnav ul li.current a { color: #db1a1a; }

/* =============================================================
   フェーズ4: 多言語のトップ（2026-10-25）
   日本語・中国語（簡体字・繁体字）・韓国語。文言は inc/front-i18n.php（英語が元・訳は AI）。
   ============================================================= */

/* 漢字・ハングルの字形: Poppins は英数字だけなので、その言語の書体を続けて指定する
   （指定しないと、中国語が日本語の書体で出て字形が混ざったり、韓国語が古い書体になったりする） */
html:lang(ja) { font-family: "Poppins", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif; }
html:lang(zh-CN) { font-family: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html:lang(zh-TW) { font-family: "Poppins", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
html:lang(ko) { font-family: "Poppins", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
/* 行の折り返し: 日本語・中国語は句読点の前で折らない。韓国語は単語の途中で折らない（空白で折る） */
html:lang(ja),
html:lang(zh-CN),
html:lang(zh-TW) { line-break: strict; overflow-wrap: break-word; }
html:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
/* 小さな見出しの字間: 漢字・ハングルは英語の大文字ほど空けない */
html:lang(ja) p.eyebrow,
html:lang(zh-CN) p.eyebrow,
html:lang(zh-TW) p.eyebrow,
html:lang(ko) p.eyebrow { letter-spacing: .08em; }

/* ─── ヘッダーの言語の切り替え（地球のマーク） ─── */
details.lang-menu { position: relative; margin: 0 16px 0 0; }
details.lang-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--jol-text);
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 999px;
  transition: border-color .2s ease, background-color .2s ease;
}
details.lang-menu summary::-webkit-details-marker { display: none; }
details.lang-menu summary::after {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .55;
  transform: rotate(45deg);
}
details.lang-menu[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
details.lang-menu summary svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (hover: hover) {
  details.lang-menu summary:hover { background: #f5f9ff; border-color: #b8cbe0; }
}
details.lang-menu ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
}
details.lang-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--jol-text);
  font-size: 15px;
  text-decoration: none;
  border-radius: 10px;
}
details.lang-menu li a[aria-current="true"] { color: var(--jol-blue); font-weight: 700; background: #eef5fc; }
details.lang-menu li a[aria-current="true"]::after { content: "\2713"; }
@media (hover: hover) {
  details.lang-menu li a:hover { background: #f3f6fa; }
}
@media screen and (max-width: 1024px) {
  details.lang-menu { margin-right: 10px; }
  details.lang-menu summary { min-height: 36px; padding: 0 10px; }
}
@media screen and (max-width: 768px) {
  /* スマホは地球のマークだけ（名前は読み上げ用に summary の aria-label にある） */
  details.lang-menu { margin-right: 8px; }
  details.lang-menu summary { justify-content: center; min-width: 36px; min-height: 32px; padding: 0 7px; }
  details.lang-menu summary .lm-cur,
  details.lang-menu summary::after { display: none; }
}

/* ─── 訳したページの注記・レビューの言葉・英語のままの質問 ─── */
p.ai-note {
  max-width: 760px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  color: var(--jol-text-sub);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
p.ai-note a { color: var(--jol-blue); text-decoration: underline; text-underline-offset: 2px; }
p.rv-note { margin-top: .5rem; color: var(--jol-text-sub); font-size: 13px; text-align: center; }
div.qa-wrap h3 span.en-only {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  color: var(--jol-text-sub);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  vertical-align: middle;
  background: #eef2f7;
  border-radius: 999px;
}

/* 見出しの行をそろえる（最後の行に 1 語・1 文字だけ残らないように）。対応していないブラウザは今までどおり */
h1, h2, h3,
div.main.top-hero ul.trust-chips li { text-wrap: balance; }
p { text-wrap: pretty; }
/* 日本語の見出しは、文節（意味のまとまり）で折り返す（Chrome・Edge。ほかのブラウザは今までどおり） */
html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) div.main.top-hero ul.trust-chips li { word-break: auto-phrase; }

/* =============================================================
   フェーズ5: 管理画面からトップを直す（2026-10-25）
   お知らせの帯・節の並び替え（どの節が隣り合っても崩れないように）。
   ============================================================= */

/* ─── お知らせの帯（ヘッダーの上。管理画面「トップページ」で ON） ─── */
div.site-notice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 52px 8px 16px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  background: var(--jol-blue);
}
div.site-notice[hidden] { display: none; }
div.site-notice.tone-sale { background: #c8161d; }   /* 白い文字で 5.6:1 */
div.site-notice.tone-warn { color: #5c3300; background: #ffe6b3; }
div.site-notice p.sn-text { margin: 0; font-weight: 600; }
div.site-notice p.sn-text a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
div.site-notice p.sn-text a::after { content: " \2192"; }
div.site-notice button.sn-close {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transform: translateY(-50%);
}
div.site-notice button.sn-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: hover) {
  div.site-notice button.sn-close:hover { background: rgba(255, 255, 255, .16); }
  div.site-notice.tone-warn button.sn-close:hover { background: rgba(92, 51, 0, .08); }
}
@media screen and (max-width: 480px) {
  div.site-notice { justify-content: flex-start; font-size: 13px; text-align: left; }
}

/* ─── 節の並び替え ───
   front.css の「div.area.illust + div.area { margin-top: 0 }」は、とはの節（絵の下が薄い青）の次に
   使い方の節（薄い青の地・area col）が来る前提。並びを変えて白い節が来たら、ふつうの間隔を空ける */
div.area.illust + div.area:not(.col) { margin-top: clamp(50px, 9.765vw, 75px); }

/* 訳したページの注記（記事のいちばん下の箱。よくある質問を隠しても出る） */
div.area.ai-note-area { margin-top: clamp(24px, 4vw, 40px); }
div.area.ai-note-area p.ai-note { margin-top: 0; }

/* =============================================================
   フェーズ6: 仕上げ（2026-10-25）
   ============================================================= */
/* 横に流れるカード（carousel.js。前は Swiper）: 縦のスクロールは画面に任せ、横の動きでめくる */
.default-slide.is-carousel,
.sp-slide.is-carousel { touch-action: pan-y; overflow-x: clip; }
/* ↑overflow-x: clip（2026-10-25）: 画面の外で待っているカードを、左右だけ切る（ページの横幅に数えない）。
   前の Swiper は入れ物で切っていたが、carousel.js に替えたあと切れておらず、タブレット（769〜1024px）では
   プランのカードの 3 枚目のぶんページが横に広がっていた（iPad で横にずれる・Tab で 3 枚目に進むとページごと横に動く）。
   上下は切らない（影・浮き上がり）。前へ次へ・点は入れ物の内側にあるので切れない */
.default-slide.is-carousel .swiper-wrapper,
.sp-slide.is-carousel .swiper-wrapper { will-change: transform; }
.swiper-button-prev[role="button"],
.swiper-button-next[role="button"] { cursor: pointer; }
/* 点のボタン: 見た目の点（16px）はそのままに、押せる範囲を 28px に（決まりの 24px 以上）。点と点の間は前と同じ 10px */
.is-carousel button.swiper-pagination-bullet { position: relative; width: 28px; height: 28px; vertical-align: middle; background: transparent; }
.is-carousel button.swiper-pagination-bullet::before {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  content: "";
  background: #efefef;
  border-radius: 50%;
  transition: background-color .2s ease;
}
.is-carousel button.swiper-pagination-bullet-active::before { background: #0068b7; }
.is-carousel .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: -2px; }
/* 色の差の仕上げ（axe の指摘。白い文字・白地で 4.5:1 以上）
   ・/esim/ の比べる表の「JAPAN-ON-LINE eSIM」の列: 白い文字と #ff4027 は 3.49 → 上下の丸い端（#db1a1a）と同じ赤に
   ・/faq/ の分類のボタン（選んだとき）の件数: 白 75% は 3.92 → 92% に */
table.comparison-table tr .sunsyscon { background: #db1a1a; }
div.faqhc button.faqhc-chip.is-on span { color: rgba(255, 255, 255, .92); }

/* =============================================================
   使い方（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 の順に時間差で出る */
div.step-wrap div.box { --d: 0s; }
div.step-wrap div.box:nth-child(2) { --d: .22s; }
div.step-wrap div.box:nth-child(3) { --d: .44s; }
html.js-reveal div.step-wrap div.box.fadein_up { transition-delay: var(--d); }

/* 写真: 少し大きい所からゆっくり元に戻り、そのあとも小さく動き続ける */
div.step-wrap div.box div.img { position: relative; overflow: hidden; }
div.step-wrap div.box div.img img.thum { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
html.js-reveal div.step-wrap div.box:not(.is-show) div.img img.thum { transform: scale(1.14); }
div.step-wrap div.box.is-show div.img img.thum {
  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 div.step-wrap div.box:not(.is-show) span.step-badge { transform: scale(0); }
div.step-wrap div.box.is-show span.step-badge { animation: jolPop .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) + .6s) both; }
div.step-wrap div.box.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 div.step-wrap div.box:not(.is-show) span.sb-check path.sb-draw { stroke-dashoffset: 12; }
div.step-wrap div.box.is-show span.sb-check path.sb-draw { animation: jolDraw .5s ease-out calc(var(--d) + 1.1s) both; }
/* STEP 02: 押す動き（くり返し） */
div.step-wrap div.box.is-show span.sb-buy svg { animation: jolTap 2.6s ease-in-out calc(var(--d) + 1.4s) infinite; }
/* STEP 03: 電波のマークが下から順に点く（くり返し） */
div.step-wrap div.box.is-show span.sb-wifi path { animation: jolWifi 2.2s ease-in-out calc(var(--d) + 1.2s) infinite; }
div.step-wrap div.box.is-show span.sb-wifi path.w2 { animation-delay: calc(var(--d) + 1.4s); }
div.step-wrap div.box.is-show span.sb-wifi path.w3 { animation-delay: calc(var(--d) + 1.6s); }
div.step-wrap div.box.is-show span.sb-wifi path.w4 { animation-delay: calc(var(--d) + 1.8s); }

/* 「STEP 01」の札: 写真の下から、少し遅れて上がってくる */
html.js-reveal div.step-wrap div.box:not(.is-show) span.label { transform: translateY(14px); opacity: 0; }
div.step-wrap div.box.is-show span.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,
  div.step-wrap div.box div.img img.thum,
  span.step-badge,
  span.step-badge::after,
  span.step-badge svg,
  span.step-badge path,
  div.step-wrap div.box span.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,
  div.step-wrap div.box div.img img.thum,
  span.step-badge,
  div.step-wrap div.box span.label { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* 見出しの中のサービス名を途中で折り返さない（top-body.php の $tnw） */
span.nw { white-space: nowrap; }

/* =============================================================
   長めの旅（31 日までのプラン）の節（2026-10-25・運営者の案1「長い旅ほどおトク」＋案2「ぴったりのプラン」）
   サービスの始めは長期滞在（月額）を出さないため、31 日までのプランで「長めの旅」の人に訴える。
   ・数字は全部、販売中のプランから（top-body.php の frontLongTripData）。比べた結果がおトクでないときは、その一文を出さない
   ・写真は AI（Gemini）で作った外国人（assets/front/img/webp/front/longtrip-*.webp・jpg）。イラストは HTML と SVG
   ・横に送るカードは carousel.js の .default-slide（パソコン 3 枚・タブレット 2 枚・スマホ 1 枚ずつ）
   ・動きは How it works と同じ強さ（.inview → is-show）。★動きを減らしたい設定の人・印刷は止まった完成の絵
   ============================================================= */

/* ─── 主役のカード（いちばん長いプラン）: 左に写真、右に値段と申し込み ─── */
div.lt-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  color: #fff;
  background: linear-gradient(150deg, #072a4f 0%, #0a3d73 55%, #0b4f93 100%);
  border-radius: clamp(20px, 3vw, 32px);
  box-shadow: 0 30px 70px rgba(7, 42, 79, .28);
  overflow: hidden;
  isolation: isolate;
}
div.lt-area p.h2-read + div.lt-hero { margin-top: clamp(26px, 3.4vw, 40px); }
div.lt-hero::after {   /* 右上の光（飾り）。白い文字が読みにくくならない濃さ（いちばん明るい所でも 5:1 以上） */
  position: absolute;
  top: -40%;
  right: -18%;
  z-index: -1;
  width: 72%;
  aspect-ratio: 1;
  content: "";
  background: radial-gradient(closest-side, rgba(29, 164, 165, .34), rgba(29, 164, 165, 0));
  pointer-events: none;
}
div.lt-photo { position: relative; min-height: 460px; overflow: hidden; }
div.lt-photo picture { position: absolute; inset: 0; display: block; }
/* ★「img[width][height] { height: auto }」（上の全体の決まり）より強く書く（弱いと写真がカードの下まで届かない） */
div.lt-hero div.lt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
/* 写真の上の札（回線）と「Day 18 of 31」（飾り・読み上げない） */
span.lt-chip,
span.lt-daycard {
  position: absolute;
  z-index: 2;
  color: var(--jol-text);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px rgba(7, 42, 79, .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
span.lt-chip {
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  border-radius: 999px;
}
span.lt-chip svg { width: 18px; height: 18px; fill: none; stroke: var(--jol-teal); stroke-width: 2.2; stroke-linecap: round; }
span.lt-daycard { right: 18px; bottom: 18px; display: block; width: 200px; padding: 12px 14px 14px; border-radius: 16px; }
span.lt-dc-t { display: block; font-size: 13.5px; line-height: 1.3; font-weight: 700; }
span.lt-dc-bar { display: block; height: 8px; margin-top: 9px; overflow: hidden; background: #e2eaf3; border-radius: 4px; }
span.lt-dc-bar i { display: block; width: 58%; height: 100%; background: linear-gradient(90deg, var(--jol-teal), var(--jol-blue)); border-radius: 4px; transform-origin: left center; }

div.lt-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 3.8vw, 52px);
}
span.lt-tag {
  display: inline-flex;
  padding: 6px 13px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
}
div.lt-hero h3.lt-name { margin-top: 14px; color: #fff; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.3; font-weight: 700; }
p.lt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; }
p.lt-price span.lt-num { font-size: clamp(44px, 5vw, 62px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
p.lt-price span.lt-tax { color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 600; }
p.lt-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 6px; color: rgba(255, 255, 255, .9); font-size: 15px; font-weight: 600; }
p.lt-sub span.lt-dot { opacity: .6; }
/* 「¥2,178 less than buying the 16-day plan twice」: 黄色の札・光が流れる */
p.lt-save {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 10px 16px 10px 12px;
  overflow: hidden;
  color: #3a2700;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  background: #ffd34d;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(255, 211, 77, .25);
}
p.lt-save svg { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
p.lt-save strong { font-weight: 800; }
p.lt-save::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
ul.lt-checks { display: grid; gap: 9px; margin-top: 18px; padding: 0; }
ul.lt-checks li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; line-height: 1.4; font-weight: 600; }
ul.lt-checks li::before {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  content: "\2713";
  color: #072a4f;
  font-size: 13px;
  font-weight: 800;
  background: #6fe3cf;
  border-radius: 50%;
}
div.lt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
/* 申し込みボタン: ふつうの a.btn（幅 420〜480px・高さ 60〜80px）は大きすぎるので、カードに合わせる */
div.lt-hero div.lt-actions a.btn,
div.lt-finder a.btn.lt-r-cta {
  width: auto;
  min-width: 250px;
  height: 56px;
  margin: 0;
  padding: 0 58px 0 28px;
  font-size: 17px;
  font-weight: 700;
}
div.lt-hero a.txt-link { margin-top: 0; color: #fff; }
div.lt-hero a:focus-visible { outline-color: #fff; }   /* 濃い青の上でも見える枠 */
p.lt-fine { margin-top: 14px; color: rgba(255, 255, 255, .8); font-size: 12.5px; line-height: 1.55; }
@media screen and (max-width: 900px) {
  div.lt-hero { grid-template-columns: 1fr; }
  div.lt-photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@media screen and (max-width: 480px) {
  div.lt-photo { aspect-ratio: 4 / 3; }
  div.lt-offer { padding: 24px 20px 26px; }
  span.lt-chip { top: 12px; left: 12px; font-size: 13px; }
  span.lt-daycard { right: 12px; bottom: 12px; width: 160px; padding: 10px 12px 12px; }
  div.lt-hero div.lt-actions { width: 100%; }
  div.lt-hero div.lt-actions a.btn { width: 100%; min-width: 0; }
}

/* ─── 横に送るカード（写真とイラストを交互に） ─── */
div.area h3.lt-cards-h3 { margin-top: clamp(44px, 5.4vw, 64px); color: var(--jol-text); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; font-weight: 700; text-align: center; }
div.slider-wrap.lt-slider { margin-top: clamp(18px, 2.4vw, 28px); }
/* 画面の外で待っているカード（パソコンは 4・5 枚目）を、左右だけ切る。
   ★clip-path（見た目だけ切る）ではページの横幅に数えられ、プログラムやキーで横に動いてしまう → overflow-x: clip（幅にも数えない）。
     上下は切らない（影・前へ次へのボタン） */
div.slider-wrap div.lt-type { overflow-x: clip; }
div.slider-wrap div.lt-type div.swiper-wrapper { flex-wrap: nowrap; }
div.slider-wrap div.lt-type div.swiper-slide.lt-card { width: calc((100% - 100px) / 3); margin-right: 50px; }   /* carousel.js が同じ値を書き込む */
/* 前へ次へ: カードを送る仕組み（carousel.js）が動き出すまで出さない（JS が無いとき・読み込みの途中に、押しても動かない矢印が見えないように） */
div.slider-wrap div.lt-type:not(.is-carousel) div.swiper-button-prev,
div.slider-wrap div.lt-type:not(.is-carousel) div.swiper-button-next { display: none; }
@media screen and (max-width: 1024px) {
  div.slider-wrap div.lt-type div.swiper-slide.lt-card { width: calc((100% - 30px) / 2); margin-right: 30px; }
}
@media screen and (max-width: 768px) {
  div.slider-wrap div.lt-type div.swiper-slide.lt-card { width: 100%; margin-right: 15px; }
}
div.slider-wrap div.lt-type div.swiper-slide.lt-card {
  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);
}
div.lt-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #e9f2fc 0%, #f6faff 100%);
}
div.lt-v-photo picture { display: block; width: 100%; height: 100%; }
div.lt-card div.lt-v-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--jol-ease); }
@media (hover: hover) {
  div.lt-card:hover div.lt-v-photo img { transform: scale(1.05); }
}
div.lt-body { padding: 18px 20px 22px; }
div.lt-body h4 { color: var(--jol-text); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.45; font-weight: 700; }
div.lt-body p { margin-top: 8px; color: #33403e; font-size: 15px; line-height: 1.7; }
div.lt-body p.lt-note { margin-top: 6px; color: var(--jol-text-sub); font-size: 13px; line-height: 1.6; }
/* 1 日あたりの値段の棒: 短いほど安い。いちばん安いプランは赤い字と「Best value」 */
ul.lt-bars { display: grid; gap: 14px; width: 86%; margin: 0; padding: 0; list-style: none; }
ul.lt-bars li { position: relative; display: grid; grid-template-columns: 4.8em minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--jol-text); font-size: 14px; line-height: 1.2; font-weight: 700; }
ul.lt-bars li.is-best { margin-top: 12px; }   /* 上に「Best value」の札が乗るぶん */
span.lt-bt { height: 14px; overflow: hidden; background: rgba(0, 101, 184, .1); border-radius: 7px; }
span.lt-bf { display: block; width: var(--w, 100%); height: 100%; background: linear-gradient(90deg, #8dbde8, #5a9bd8); border-radius: 7px; transform-origin: left center; }
ul.lt-bars li.is-best span.lt-bf { background: linear-gradient(90deg, var(--jol-teal), var(--jol-blue)); }
span.lt-bv { min-width: 5.4em; text-align: right; font-variant-numeric: tabular-nums; }
ul.lt-bars li.is-best span.lt-bv { color: #c8161d; }   /* 薄い青の地で 4.5:1 以上（#db1a1a は 4.4 で足りない） */
span.lt-best { position: absolute; top: -21px; right: 0; padding: 3px 9px; color: #fff; font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: .02em; background: #c8161d; border-radius: 999px; box-shadow: 0 4px 10px rgba(200, 22, 29, .3); }
/* 申し込む → QR がメールで届く → 日本で使い始める */
ol.lt-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 92%; margin: 0; padding: 0; list-style: none; }
ol.lt-steps::before { position: absolute; top: 26px; right: 16.66%; left: 16.66%; height: 3px; content: ""; background: linear-gradient(90deg, var(--jol-teal), var(--jol-blue)); border-radius: 2px; transform-origin: left center; }
ol.lt-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--jol-text); font-size: 13px; line-height: 1.35; font-weight: 700; text-align: center; }
span.lt-si { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: #fff; border: 2px solid #cfe0f1; border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 101, 184, .14); }
span.lt-si svg { width: 24px; height: 24px; fill: none; stroke: var(--jol-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
ol.lt-steps li:last-child span.lt-si { background: var(--jol-blue); border-color: var(--jol-blue); }
ol.lt-steps li:last-child span.lt-si svg { stroke: #fff; }
/* 支払いは 1 回・契約なし・返却なし */
ul.lt-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 92%; margin: 0; padding: 0; list-style: none; }
ul.lt-icons li { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--jol-text); font-size: 13px; line-height: 1.35; font-weight: 700; text-align: center; }
span.lt-ii { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; background: #fff; border-radius: 18px; box-shadow: 0 8px 20px rgba(16, 24, 40, .08); }
span.lt-ii svg { width: 28px; height: 28px; fill: none; stroke: var(--jol-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── ぴったりのプラン（日数・人数・使い方 → プランと合計・申し込み） ─── */
div.lt-finder {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(44px, 5.4vw, 64px);
  padding: clamp(22px, 3.2vw, 40px);
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: clamp(20px, 3vw, 28px);
  box-shadow: 0 16px 44px rgba(16, 24, 40, .08);
}
div.lt-finder h3.lt-f-h3 { color: var(--jol-text); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; font-weight: 700; }
div.lt-f-row { margin-top: 20px; }
p.lt-f-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--jol-text); font-size: 15px; line-height: 1.4; font-weight: 700; }
span.lt-f-n { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(135deg, var(--jol-teal), var(--jol-blue)); border-radius: 50%; }
div.lt-finder div.lt-days { display: flex; width: 100%; max-width: 520px; }
div.lt-finder div.lt-days button.seg-btn { flex: 1 1 0; padding: 0 8px; font-size: 14.5px; }
div.lt-finder div.lt-days button.seg-btn[aria-pressed="true"] { color: #fff; background: var(--jol-blue); box-shadow: 0 4px 12px rgba(0, 101, 184, .28); }
div.lt-qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: #eef2f7; border: 1px solid rgba(7, 12, 26, .06); border-radius: 999px; }
button.lt-qty-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--jol-blue);
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
button.lt-qty-btn:active { transform: scale(.92); }
button.lt-qty-btn[aria-disabled="true"] { color: #8794a1; background: transparent; box-shadow: none; cursor: default; transform: none; }
button.lt-qty-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
span.lt-qty-n { min-width: 7em; color: var(--jol-text); font-size: 16px; font-weight: 700; text-align: center; }
div.lt-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
button.lt-use-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  color: #33403e;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 600;
  text-align: left;
  background: #f6f9fc;
  border: 1.5px solid #d6e0ea;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
button.lt-use-btn svg { flex-shrink: 0; width: 26px; height: 26px; fill: none; stroke: var(--jol-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  button.lt-use-btn:hover { border-color: #a9c3dd; }
}
button.lt-use-btn[aria-pressed="true"] { color: var(--jol-text); background: #f2f7fe; border-color: var(--jol-blue); box-shadow: inset 0 0 0 1px var(--jol-blue); }
div.lt-f-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 2.6vw, 30px);
  background: linear-gradient(160deg, #f2f7fe 0%, #e6f0fc 100%);
  border-radius: 20px;
}
p.lt-r-head { color: #0b6e6f; font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html:lang(ja) p.lt-r-head,
html:lang(zh-CN) p.lt-r-head,
html:lang(zh-TW) p.lt-r-head,
html:lang(ko) p.lt-r-head { letter-spacing: .06em; }
div.lt-r-main { margin-top: 8px; transform-origin: left center; }
p.lt-r-name { color: var(--jol-text); font-size: clamp(20px, 2vw, 24px); line-height: 1.3; font-weight: 800; }
p.lt-r-for { color: var(--jol-text-sub); font-size: 14px; font-weight: 600; }
p.lt-r-for:empty { display: none; }
p.lt-r-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; }
p.lt-r-total > span { color: var(--jol-text); font-size: clamp(32px, 3.4vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
p.lt-r-total small { color: var(--jol-text-sub); font-size: 13px; font-weight: 600; }
p.lt-r-per { margin-top: 4px; color: #33403e; font-size: 14px; font-weight: 600; }
p.lt-r-up { margin-top: 14px; padding: 10px 12px; color: #5c3300; font-size: 14px; line-height: 1.6; background: #fff6e0; border: 1px solid #f1d699; border-radius: 12px; }
p.lt-r-up strong { font-weight: 800; }
p.lt-r-up a { color: #0b56a0; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
div.lt-finder a.btn.lt-r-cta { width: 100%; min-width: 0; margin-top: 16px; padding: 0 52px 0 20px; }
p.lt-r-group { margin-top: 10px; color: var(--jol-text-sub); font-size: 13px; line-height: 1.55; }
p.lt-r-up[hidden],
p.lt-r-group[hidden] { display: none; }
@media screen and (max-width: 900px) {
  div.lt-finder { grid-template-columns: 1fr; }
}
@media screen and (max-width: 480px) {
  div.lt-use { grid-template-columns: 1fr; }
  button.lt-use-btn { min-height: 54px; }
  div.lt-finder div.lt-days button.seg-btn { padding: 0 4px; font-size: 13.5px; }
}

/* ─── 動き（How it works と同じ強さ） ───
   主役のカード: 写真が寄ってから小さく動き続ける・札がぽんと出て浮かぶ・右の文字が下から順に・「〜より安い」に光が流れる
   （値段の数え上げは front-ux.js） */
html.js-reveal div.lt-hero:not(.is-show) div.lt-photo img { transform: scale(1.14); }
div.lt-hero.is-show div.lt-photo img { animation: jolZoomIn 1.3s var(--jol-ease) both, jolDrift 16s ease-in-out 1.3s infinite alternate; }
html.js-reveal div.lt-hero:not(.is-show) span.lt-chip,
html.js-reveal div.lt-hero:not(.is-show) span.lt-daycard { transform: scale(.4); opacity: 0; }
div.lt-hero.is-show span.lt-chip { animation: jolPop .6s cubic-bezier(.34, 1.56, .64, 1) .7s both, ltFloat 5s ease-in-out 1.4s infinite; }
div.lt-hero.is-show span.lt-daycard { animation: jolPop .6s cubic-bezier(.34, 1.56, .64, 1) 1s both, ltFloat 6s ease-in-out 1.8s infinite reverse; }
html.js-reveal div.lt-hero:not(.is-show) span.lt-dc-bar i { transform: scaleX(0); }
div.lt-hero.is-show span.lt-dc-bar i { animation: jolGrow 1.4s var(--jol-ease) 1.4s both; }
div.lt-offer > * { --d: 0s; }
div.lt-offer > :nth-child(2) { --d: .08s; }
div.lt-offer > :nth-child(3) { --d: .16s; }
div.lt-offer > :nth-child(4) { --d: .24s; }
div.lt-offer > :nth-child(5) { --d: .36s; }
div.lt-offer > :nth-child(6) { --d: .48s; }
div.lt-offer > :nth-child(7) { --d: .6s; }
div.lt-offer > :nth-child(8) { --d: .7s; }
html.js-reveal div.lt-hero:not(.is-show) div.lt-offer > * { transform: translateY(14px); opacity: 0; }
div.lt-hero.is-show div.lt-offer > * { animation: jolRise .6s var(--jol-ease) calc(.3s + var(--d)) both; }
div.lt-hero.is-show div.lt-offer > p.lt-save { animation: jolPop .6s cubic-bezier(.34, 1.56, .64, 1) calc(.3s + var(--d)) both; }
div.lt-hero.is-show p.lt-save::after { animation: ltShine 4.8s ease-in-out 2.2s infinite; }
/* 横に送るカード: 棒が順に伸びて「Best value」がぽんと出る／手順の線が伸びて丸が順に／丸い絵が順に */
html.js-reveal div.lt-slider:not(.is-show) span.lt-bf { transform: scaleX(0); }
div.lt-slider.is-show span.lt-bf { animation: jolGrow 1s var(--jol-ease) calc(.45s + var(--i, 0) * .28s) both; }
html.js-reveal div.lt-slider:not(.is-show) span.lt-best { transform: scale(0); }
div.lt-slider.is-show span.lt-best { animation: jolPop .55s cubic-bezier(.34, 1.56, .64, 1) 1.5s both; }
html.js-reveal div.lt-slider:not(.is-show) ol.lt-steps::before { transform: scaleX(0); }
div.lt-slider.is-show ol.lt-steps::before { animation: jolGrow 1.3s var(--jol-ease) .5s both; }
html.js-reveal div.lt-slider:not(.is-show) span.lt-si,
html.js-reveal div.lt-slider:not(.is-show) span.lt-ii { transform: scale(.4); opacity: 0; }
div.lt-slider.is-show span.lt-si,
div.lt-slider.is-show span.lt-ii { animation: jolPop .55s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
div.lt-slider.is-show li:nth-child(2) > span.lt-si { animation-delay: .8s; }
div.lt-slider.is-show li:nth-child(3) > span.lt-si { animation-delay: 1.25s; }
div.lt-slider.is-show li:nth-child(2) > span.lt-ii { animation-delay: .55s; }
div.lt-slider.is-show li:nth-child(3) > span.lt-ii { animation-delay: .75s; }
/* ぴったりのプラン: 答えを変えたら、結果が小さく弾む */
div.lt-r-main.is-bump { animation: ltBump .38s var(--jol-ease); }

@keyframes ltFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes ltShine { 0% { transform: translateX(-130%); } 28%, 100% { transform: translateX(130%); } }
@keyframes ltBump { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* 動きを減らしたい設定の人・印刷: 止まった完成の絵 */
@media (prefers-reduced-motion: reduce) {
  div.lt-hero div.lt-photo img,
  span.lt-chip,
  span.lt-daycard,
  span.lt-dc-bar i,
  div.lt-offer > *,
  span.lt-bf,
  span.lt-best,
  ol.lt-steps::before,
  span.lt-si,
  span.lt-ii,
  div.lt-r-main { animation: none !important; transform: none !important; translate: none !important; opacity: 1 !important; }
  p.lt-save::after { display: none; }
  div.lt-card div.lt-v-photo img,
  div.lt-card:hover div.lt-v-photo img { transition: none; transform: none; }
}
@media print {
  div.lt-hero div.lt-photo img,
  span.lt-chip,
  span.lt-daycard,
  span.lt-dc-bar i,
  div.lt-offer > *,
  span.lt-bf,
  span.lt-best,
  ol.lt-steps::before,
  span.lt-si,
  span.lt-ii { animation: none !important; transform: none !important; translate: none !important; opacity: 1 !important; }
  p.lt-save::after { display: none; }
}

/* =============================================================
   安心の理由のカードの絵（2026-10-25・運営者「内容に沿ってアニメーションで」）
   前は止まった線の絵（reliable-i0N.svg）。いまは top-body.php にその場で描く SVG（svg.rel-art）。
   ・サポート: メールの封筒が飛んでヘッドセットに届く → 返事を打つ「…」→「解決」のチェック（くり返し）
   ・今の SIM はそのまま: 画面に「SIM ✓」と「eSIM」の 2 行が順に入る → 電波の棒と波（くり返し）
   ・英語と日本語: 「EN」「JA」の吹き出しが順に出る → 言葉が入れ替わる（Hello!／こんにちは ⇄ Thank you!／ありがとう）
   ・動きは How it works と同じ考え方（.inview → is-show で始まる）。
   ★何も動かないときの見た目＝止まった完成の絵（動きを減らしたい設定の人・印刷・JS なし）:
     封筒は隠れ、チェックは出て、言葉は Hello!／こんにちは
   ============================================================= */
div.reliable-type div.swiper-slide div.img.rel-img { left: 0; width: 240px; height: 180px; }   /* ★front.css の「2 枚目だけ 5px 右」より強く書く */
div.reliable-type div.img.rel-img svg.rel-art { display: block; width: 100%; height: 100%; overflow: visible; }
@media screen and (max-width: 1024px) {
  div.reliable-type div.swiper-slide div.img.rel-img { width: 210px; height: 158px; }
}
svg.rel-art text { font-family: "Poppins", sans-serif; font-weight: 700; }
svg.rel-art text[lang="ja"] { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif; }

/* 何も動かないときの見た目（完成の絵） */
svg.rel-support .rs-trail { stroke-dasharray: 3 7; opacity: .4; }
svg.rel-support .rs-mail { opacity: 0; }
svg.rel-sim text.rm-label { font-size: 12.5px; fill: #070c1a; }
svg.rel-sim text.rm-blue { fill: #0065b8; }
svg.rel-sim .rm-halo { opacity: 0; }
svg.rel-lang text.rl-tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; fill: #fff; text-anchor: middle; }
svg.rel-lang text.rl-ph { font-size: 18px; fill: #070c1a; text-anchor: middle; }
svg.rel-lang text.rl-w { fill: #fff; }
svg.rel-lang text.rl-b { opacity: 0; }

/* 形を変える動きの基準点（部品ごと） */
svg.rel-art .rs-bubble,
svg.rel-art .rs-dot,
svg.rel-art .rs-check,
svg.rel-art .rm-ok,
svg.rel-art .rm-plus,
svg.rel-art .rm-halo,
svg.rel-art .rm-bar,
svg.rel-art .rm-wave,
svg.rel-art .rl-b1,
svg.rel-art .rl-b2,
svg.rel-art .rl-ph { transform-box: fill-box; transform-origin: center; }
svg.rel-art .rs-bubble { transform-origin: 30% 100%; }
svg.rel-art .rm-bar { transform-origin: center bottom; }
svg.rel-art .rm-wave { transform-origin: left center; }
svg.rel-art .rl-b1 { transform-origin: 20% 100%; }
svg.rel-art .rl-b2 { transform-origin: 80% 100%; }

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

/* 1. サポート: 封筒が点線にそって飛ぶ → 吹き出しが受け取って弾む → 「…」を打つ → チェック */
div.slider-wrap.is-show svg.rel-support .rs-trail { animation: relFlow 1.4s linear infinite; }
div.slider-wrap.is-show svg.rel-support .rs-mail { animation: relMail 4.8s var(--jol-ease) .9s infinite both; }
div.slider-wrap.is-show svg.rel-support .rs-bubble { animation: relBubble 4.8s ease-in-out .9s infinite both; }
div.slider-wrap.is-show svg.rel-support .rs-dot { animation: relDot 1.2s ease-in-out infinite; }
div.slider-wrap.is-show svg.rel-support .rs-dot.d2 { animation-delay: .15s; }
div.slider-wrap.is-show svg.rel-support .rs-dot.d3 { animation-delay: .3s; }
div.slider-wrap.is-show svg.rel-support .rs-check { animation: relCheck 4.8s ease-in-out .9s infinite both; }

/* 2. 今の SIM はそのまま: 「SIM ✓」が左から・「eSIM」が右から → 「＋」→ 電波の棒・波・光の輪がくり返す */
div.slider-wrap.is-show svg.rel-sim .r1 { animation: relSlideL .6s var(--jol-ease) .55s both; }
div.slider-wrap.is-show svg.rel-sim .r2 { animation: relSlideR .6s var(--jol-ease) .9s both; }
div.slider-wrap.is-show svg.rel-sim .rm-ok { animation: relPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }
div.slider-wrap.is-show svg.rel-sim .rm-plus { animation: relPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.45s both; }
div.slider-wrap.is-show svg.rel-sim .rm-bar { animation: relBar 2.4s ease-in-out 1.6s infinite both; }
div.slider-wrap.is-show svg.rel-sim .rm-bar.b2 { animation-delay: 1.75s; }
div.slider-wrap.is-show svg.rel-sim .rm-bar.b3 { animation-delay: 1.9s; }
div.slider-wrap.is-show svg.rel-sim .rm-bar.b4 { animation-delay: 2.05s; }
div.slider-wrap.is-show svg.rel-sim .rm-wave { animation: relWave 2.4s ease-out 1.6s infinite both; }
div.slider-wrap.is-show svg.rel-sim .rm-wave.w2 { animation-delay: 1.9s; }
div.slider-wrap.is-show svg.rel-sim .rm-wave.w3 { animation-delay: 2.2s; }
div.slider-wrap.is-show svg.rel-sim .rm-halo { animation: relHalo 2.4s ease-out 1.6s infinite both; }

/* 3. 英語と日本語: 吹き出しが順にぽんと出る → ゆっくり浮かぶ → 言葉が入れ替わる */
div.slider-wrap.is-show svg.rel-lang .rl-b1 { animation: relPop .6s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
div.slider-wrap.is-show svg.rel-lang .rl-b2 { animation: relPop .6s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }
div.slider-wrap.is-show svg.rel-lang .rl-bob1 { animation: relBob 4s ease-in-out 1.7s infinite; }
div.slider-wrap.is-show svg.rel-lang .rl-bob2 { animation: relBob 4s ease-in-out 3.7s infinite; }
div.slider-wrap.is-show svg.rel-lang .rl-a { animation: relPhA 6s ease-in-out 2.4s infinite both; }
div.slider-wrap.is-show svg.rel-lang .rl-b { animation: relPhB 6s ease-in-out 2.4s infinite both; }

@keyframes relIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes relFlow { to { stroke-dashoffset: -20; } }
@keyframes relMail {
  0% { transform: translate(20px, 46px) scale(.75) rotate(-8deg); opacity: 0; }
  8% { opacity: 1; }
  22% { transform: translate(54px, 15px) scale(1) rotate(-10deg); }
  36% { transform: translate(96px, 30px) scale(.85) rotate(8deg); opacity: 1; }
  46%, 100% { transform: translate(114px, 78px) scale(.35) rotate(0deg); opacity: 0; }
}
@keyframes relBubble { 0%, 44%, 58%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes relDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes relCheck { 0%, 52% { transform: scale(0); opacity: 0; } 58% { transform: scale(1.18); opacity: 1; } 63%, 88% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes relSlideL { from { transform: translateX(-22px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes relSlideR { from { transform: translateX(22px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes relPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes relBar { 0% { opacity: .25; transform: scaleY(.4); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: .25; transform: scaleY(.4); } }
@keyframes relWave { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes relHalo { 0% { opacity: .35; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes relBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes relPhA { 0%, 40% { opacity: 1; transform: none; } 48%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes relPhB { 0%, 40% { opacity: 0; transform: translateY(6px); } 48%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

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

/* =============================================================
   長期滞在（月額）の節のカードの絵（2026-10-25・運営者「アニメーションにして」）
   ★この節は法令の確認待ちで、本番ではフラグ（subscription_menu_enabled）が OFF のあいだ出ない。トップと /esim/ の両方。
   前は止まった線の絵（month-feature-i0N.svg・month-step-i0N.svg・ファイルは残した）。いまはその場で描く SVG（svg.mon-art・読み上げない飾り）。
   ・4 枚: 毎月届く（月のマスが順に ✓・更新の矢印が回る）／毎月同じ値段（同じ高さの棒・平らな点線・「＝」の値札）／
     全国で速い（街・山と家・電波塔から電波・両側で電波の棒）／いつでも解約（スイッチを押して OFF → 月末の旗まで棒が伸びる）
   ・3 つの手順: プランを選ぶ（カーソルが押す → 浮いて ✓）／カードを入れる（番号が順に入る → 盾の鍵が閉まる → ✓）／
     毎月自動で届く（QR のまわりを矢印が回り、月の点が順に光る）
   ・カードの列（div.slider-wrap.mon-slider.inview）が画面に入ったら始まる（common.js が is-show を付ける）。
   ★何も動かないときの見た目＝止まった完成の絵（動きを減らしたい設定の人・印刷・JS なし）
   ============================================================= */
div.month-wrap div.box div.img.mon-img svg.mon-art { display: block; width: 100%; height: 100%; overflow: visible; }

/* 何も動かないときの見た目（完成の絵） */
svg.mf-cancel .mf-on { opacity: 0; }
svg.mf-cancel .mf-knob { transform: translateX(-28px); }
svg.mf-cancel .mf-tap,
svg.ms-pick .ms-click { opacity: 0; }
svg.ms-pick .ms-lift { transform: translateY(-6px); }
svg.ms-pick .ms-cursor { transform: translate(80px, 74px); }

/* 形を変える動きの基準点（部品ごと） */
svg.mon-art .mf-c,
svg.mon-art .mf-tagi,
svg.mon-art .mf-w,
svg.mon-art .mf-flag,
svg.mon-art .ms-ok,
svg.mon-art .ms-ok2,
svg.mon-art .ms-ok3,
svg.mon-art .ms-click,
svg.mon-art .ms-shield,
svg.mon-art .ms-qr,
svg.mon-art .ms-d,
svg.mon-art .ms-g { transform-box: fill-box; transform-origin: center; }
svg.mon-art .mf-bar,
svg.mon-art .mf-sb { transform-box: fill-box; transform-origin: center bottom; }
svg.mon-art .mf-line,
svg.mon-art .mf-fill { transform-box: fill-box; transform-origin: left center; }
svg.mon-art .mf-tag { transform-box: fill-box; transform-origin: 26% 50%; }   /* 値札の穴を中心に揺れる */
svg.mon-art .mf-flag { transform-origin: 0% 100%; }
svg.mon-art .mf-ring { transform-origin: 100px 60px; }
svg.mon-art .ms-orbit { transform-origin: 75px 60px; }

/* 出てくる動き（カードの列が画面に入ったとき）: 絵が下から・カードごとに少しずつ遅れて */
html.js-reveal div.mon-slider:not(.is-show) svg.mon-art { opacity: 0; transform: translateY(14px) scale(.94); }
div.mon-slider.is-show svg.mon-art { animation: monIn .8s var(--jol-ease) .1s both; }
div.mon-slider.is-show div.swiper-slide:nth-child(2) svg.mon-art { animation-delay: .25s; }
div.mon-slider.is-show div.swiper-slide:nth-child(3) svg.mon-art { animation-delay: .4s; }
div.mon-slider.is-show div.swiper-slide:nth-child(4) svg.mon-art { animation-delay: .55s; }

/* 4 枚 ① 毎月届く */
div.mon-slider.is-show svg.mf-cal .mf-ring { animation: monSpin 9s linear infinite; }
div.mon-slider.is-show svg.mf-cal .mf-c.c1 { animation: mfC1 6s ease-in-out .6s infinite both; }
div.mon-slider.is-show svg.mf-cal .mf-c.c2 { animation: mfC2 6s ease-in-out .6s infinite both; }
div.mon-slider.is-show svg.mf-cal .mf-c.c3 { animation: mfC3 6s ease-in-out .6s infinite both; }
div.mon-slider.is-show svg.mf-cal .mf-c.c4 { animation: mfC4 6s ease-in-out .6s infinite both; }
div.mon-slider.is-show svg.mf-cal .mf-c.c5 { animation: mfC5 6s ease-in-out .6s infinite both; }
div.mon-slider.is-show svg.mf-cal .mf-c.c6 { animation: mfC6 6s ease-in-out .6s infinite both; }
/* 4 枚 ② 毎月同じ値段 */
div.mon-slider.is-show svg.mf-flat .mf-bar { animation: monGrowY .6s var(--jol-ease) .45s both, monDim 3.2s ease-in-out 2s infinite; }
div.mon-slider.is-show svg.mf-flat .mf-bar.b2 { animation-delay: .55s, 2.2s; }
div.mon-slider.is-show svg.mf-flat .mf-bar.b3 { animation-delay: .65s, 2.4s; }
div.mon-slider.is-show svg.mf-flat .mf-bar.b4 { animation-delay: .75s, 2.6s; }
div.mon-slider.is-show svg.mf-flat .mf-bar.b5 { animation-delay: .85s, 2.8s; }
div.mon-slider.is-show svg.mf-flat .mf-line { animation: jolGrow .8s var(--jol-ease) 1.3s both; }
div.mon-slider.is-show svg.mf-flat .mf-tagi { animation: monPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.8s both; }
div.mon-slider.is-show svg.mf-flat .mf-tag { animation: monSwing 3s ease-in-out 2.4s infinite; }
/* 4 枚 ③ 全国で速い */
div.mon-slider.is-show svg.mf-net .mf-w { animation: monWave 2.4s ease-out 1s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-w.w2 { animation-delay: 1.3s; }
div.mon-slider.is-show svg.mf-net .mf-w.w3 { animation-delay: 1.6s; }
div.mon-slider.is-show svg.mf-net .mf-dot { animation: monBlink 1.2s ease-in-out infinite; }
div.mon-slider.is-show svg.mf-net .mf-sb.s1.k1 { animation: monBar 2.4s ease-in-out 1.00s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-sb.s1.k2 { animation: monBar 2.4s ease-in-out 1.15s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-sb.s1.k3 { animation: monBar 2.4s ease-in-out 1.30s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-sb.s1.k4 { animation: monBar 2.4s ease-in-out 1.45s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-sb.s2.k1 { animation: monBar 2.4s ease-in-out 1.60s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-sb.s2.k2 { animation: monBar 2.4s ease-in-out 1.75s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-sb.s2.k3 { animation: monBar 2.4s ease-in-out 1.90s infinite both; }
div.mon-slider.is-show svg.mf-net .mf-sb.s2.k4 { animation: monBar 2.4s ease-in-out 2.05s infinite both; }
/* 4 枚 ④ いつでも解約: スイッチ OFF → そのあとも月末（旗）まで使える */
div.mon-slider.is-show svg.mf-cancel .mf-on { animation: mfOn 6s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.mf-cancel .mf-knob { animation: mfKnob 6s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.mf-cancel .mf-tap { animation: mfTap 6s ease-out .8s infinite both; }
div.mon-slider.is-show svg.mf-cancel .mf-fill { animation: mfFill 6s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.mf-cancel .mf-flag { animation: mfFlag 6s ease-in-out .8s infinite both; }

/* 手順 ① プランを選ぶ */
div.mon-slider.is-show svg.ms-pick .ms-cursor { animation: msCursor 5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-pick .ms-click { animation: msClick 5s ease-out .8s infinite both; }
div.mon-slider.is-show svg.ms-pick .ms-lift { animation: msLift 5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-pick .ms-hl { animation: msHl 5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-pick .ms-ok { animation: msOk 5s ease-in-out .8s infinite both; }
/* 手順 ② カードを入れる */
div.mon-slider.is-show svg.ms-card .ms-g.g1 { animation: msG1 5.5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-card .ms-g.g2 { animation: msG2 5.5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-card .ms-g.g3 { animation: msG3 5.5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-card .ms-g.g4 { animation: msG4 5.5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-card .ms-flow { animation: monFlow 1.2s linear infinite; }
div.mon-slider.is-show svg.ms-card .ms-shackle { animation: msShackle 5.5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-card .ms-shield { animation: msShield 5.5s ease-in-out .8s infinite both; }
div.mon-slider.is-show svg.ms-card .ms-ok2 { animation: msOk2 5.5s ease-in-out .8s infinite both; }
/* 手順 ③ 毎月自動で届く */
div.mon-slider.is-show svg.ms-auto .ms-qr { animation: monPop .55s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
div.mon-slider.is-show svg.ms-auto .ms-ok3 { animation: monPop .5s cubic-bezier(.34, 1.56, .64, 1) 1s both; }
div.mon-slider.is-show svg.ms-auto .ms-orbit { animation: monSpin 6s linear 1.2s infinite both; }
div.mon-slider.is-show svg.ms-auto .ms-d.d1 { animation: msD1 6s ease-in-out 1.2s infinite both; }
div.mon-slider.is-show svg.ms-auto .ms-d.d2 { animation: msD2 6s ease-in-out 1.2s infinite both; }
div.mon-slider.is-show svg.ms-auto .ms-d.d3 { animation: msD3 6s ease-in-out 1.2s infinite both; }
div.mon-slider.is-show svg.ms-auto .ms-d.d4 { animation: msD4 6s ease-in-out 1.2s infinite both; }
div.mon-slider.is-show svg.ms-auto .ms-d.d5 { animation: msD5 6s ease-in-out 1.2s infinite both; }
div.mon-slider.is-show svg.ms-auto .ms-d.d6 { animation: msD6 6s ease-in-out 1.2s infinite both; }

@keyframes monIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes monSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes monGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes monDim { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes monPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes monSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes monWave { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes monBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes monBar { 0% { opacity: .25; transform: scaleY(.4); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: .25; transform: scaleY(.4); } }
@keyframes monFlow { to { stroke-dashoffset: -12; } }
@keyframes mfOn { 0%, 24% { opacity: 1; } 30%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mfKnob { 0%, 24% { transform: translateX(0); } 30%, 92% { transform: translateX(-28px); } 100% { transform: translateX(0); } }
@keyframes mfTap { 0%, 15% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(.85); } 28%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes mfFill { 0%, 30% { transform: scaleX(.45); } 70%, 92% { transform: scaleX(1); } 100% { transform: scaleX(.45); } }
@keyframes mfFlag { 0%, 68% { opacity: 0; transform: scale(0); } 74% { opacity: 1; transform: scale(1.15); } 78%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes msCursor { 0% { transform: translate(124px, 112px); opacity: 0; } 8% { opacity: 1; } 30%, 85% { transform: translate(80px, 74px); opacity: 1; } 95%, 100% { transform: translate(124px, 112px); opacity: 0; } }
@keyframes msClick { 0%, 31% { opacity: 0; transform: scale(.4); } 36% { opacity: 1; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes msLift { 0%, 33% { transform: translateY(0); } 38%, 88% { transform: translateY(-6px); } 96%, 100% { transform: translateY(0); } }
@keyframes msHl { 0%, 33% { opacity: 0; } 38%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes msOk { 0%, 36% { opacity: 0; transform: scale(0); } 41% { opacity: 1; transform: scale(1.2); } 45%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0); } }
@keyframes msShackle { 0%, 40% { transform: translateY(-3px); } 46%, 92% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
@keyframes msShield { 0%, 44%, 52%, 100% { transform: scale(1); } 48% { transform: scale(1.08); } }
@keyframes msOk2 { 0%, 48% { opacity: 0; transform: scale(0); } 54% { opacity: 1; transform: scale(1.2); } 58%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0); } }
@keyframes mfC1 { 0%, 5% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.15); } 11%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes mfC2 { 0%, 15% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.15); } 21%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes mfC3 { 0%, 25% { opacity: 0; transform: scale(.4); } 28% { opacity: 1; transform: scale(1.15); } 31%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes mfC4 { 0%, 35% { opacity: 0; transform: scale(.4); } 38% { opacity: 1; transform: scale(1.15); } 41%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes mfC5 { 0%, 45% { opacity: 0; transform: scale(.4); } 48% { opacity: 1; transform: scale(1.15); } 51%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes mfC6 { 0%, 55% { opacity: 0; transform: scale(.4); } 58% { opacity: 1; transform: scale(1.15); } 61%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msG1 { 0%, 5% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.15); } 11%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msG2 { 0%, 13% { opacity: 0; transform: scale(.4); } 16% { opacity: 1; transform: scale(1.15); } 19%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msG3 { 0%, 21% { opacity: 0; transform: scale(.4); } 24% { opacity: 1; transform: scale(1.15); } 27%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msG4 { 0%, 29% { opacity: 0; transform: scale(.4); } 32% { opacity: 1; transform: scale(1.15); } 35%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msD1 { 0%, 95% { opacity: 1; transform: scale(1); } 98% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes msD2 { 0%, 13.4% { opacity: 0; transform: scale(.4); } 16.4% { opacity: 1; transform: scale(1.15); } 19.4%, 95% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msD3 { 0%, 30.1% { opacity: 0; transform: scale(.4); } 33.1% { opacity: 1; transform: scale(1.15); } 36.1%, 95% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msD4 { 0%, 46.7% { opacity: 0; transform: scale(.4); } 49.7% { opacity: 1; transform: scale(1.15); } 52.7%, 95% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msD5 { 0%, 63.4% { opacity: 0; transform: scale(.4); } 66.4% { opacity: 1; transform: scale(1.15); } 69.4%, 95% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes msD6 { 0%, 80.1% { opacity: 0; transform: scale(.4); } 83.1% { opacity: 1; transform: scale(1.15); } 86.1%, 95% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(.4); } }

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

/* =============================================================
   特長のカードの絵（2026-10-25・運営者「アニメーションで」）
   前は止まった線の絵（feature-i0N.svg・ファイルは残した）。いまは top-body.php にその場で描く SVG（svg.feat-art・読み上げない飾り）。
   ・Fast Internet Speeds: スピードメーターの針が高い所まで振れ、目盛りの光が満ちる → 針が小さく揺れ続ける・速さの線・読み込みの棒が素早く満ちる
   ・Excellent Data Coverage: 日本の形の上に、南から北へ場所の印が順に立つ → 電波の輪が広がり続ける（47 都道府県どこでも）
   ・Worry-Free Setup: メールの手紙が出てくる・時計がくるっと回る（すぐ届く）→ スマホが QR を読み取る → ✓ と電波の棒（数ステップでつながる）
   ・カードの列（div.slider-wrap.fadein_up.inview）が画面に入ったら始まる。
   ★何も動かないときの見た目＝止まった完成の絵（動きを減らしたい設定の人・印刷・JS なし）
   ============================================================= */
div.feature-type div.img.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 div.slider-wrap:not(.is-show) svg.feat-art { opacity: 0; transform: translateY(16px) scale(.94); }
div.slider-wrap.is-show svg.feat-art { animation: featIn .8s var(--jol-ease) .15s both; }
div.slider-wrap.is-show div.swiper-slide:nth-child(2) svg.feat-art { animation-delay: .35s; }
div.slider-wrap.is-show div.swiper-slide:nth-child(3) svg.feat-art { animation-delay: .55s; }

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

/* =============================================================
   スマホのメニュー（1024px 以下・2026-10-25 作り直し・運営者「もっと魅力的かつ操作しやすく・コンバージョンしやすい設計も」）
   前: ぼかした面の上に、文字だけのリンク 4 つと幅 400px の申し込みボタン（下の半分以上が空き）。Esc で閉じない・キーボードの位置が中に入らない。
   今: いちばん上に申し込みのカード（値段の目安・安心材料・申し込み・プランと料金）→ アイコンと一言のあるリンク（申し込みに近い順）→
       言語（言語版があるページだけ）→ マイページと問い合わせ。開くと中身が順に出る。
   HTML は front-header.php、開け閉め（Esc・Tab・リンクで閉じる・位置）は common.js。
   ★#navigation はもともと 1024px 以下だけ出る（layout.css）。layout.css の「nav#nav ul.menu …」より強く書く（#navigation を頭に付ける）
   ============================================================= */
#navigation nav#nav {
  top: var(--mnav-top, 51px);
  height: calc(100vh - var(--mnav-top, 51px));
  height: calc(100dvh - var(--mnav-top, 51px));
  background: rgba(244, 247, 251, .97);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .3s var(--jol-ease), visibility 0s linear .3s;
}
#navigation.open nav#nav { transform: none; transition: opacity .25s ease, transform .3s var(--jol-ease), visibility 0s; }
#navigation div.mnav {
  height: 100%;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 769px) {
  #navigation div.mnav { padding-top: 24px; }
  #navigation div.mnav > * { max-width: 560px; margin-right: auto; margin-left: auto; }
  #navigation nav#nav div.mnav ul.menu { max-width: 560px; margin: 16px auto 0; }   /* layout.css の「nav#nav ul.menu { max-width: initial }」と、下の一覧の指定より強く */
}

/* ─── 申し込みのカード（値段の目安・安心材料・申し込み） ─── */
#navigation div.mnav-promo {
  position: relative;
  padding: 18px 18px 12px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(150deg, #072a4f 0%, #0a3d73 55%, #0b4f93 100%);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(7, 42, 79, .25);
  isolation: isolate;
}
#navigation div.mnav-promo::after {   /* 右上の光（飾り） */
  position: absolute;
  top: -50%;
  right: -25%;
  z-index: -1;
  width: 75%;
  aspect-ratio: 1;
  content: "";
  background: radial-gradient(closest-side, rgba(29, 164, 165, .32), rgba(29, 164, 165, 0));
  pointer-events: none;
}
#navigation p.mnav-kicker { margin: 0; color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; }
#navigation p.mnav-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
#navigation span.mnav-from { color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; }
#navigation p.mnav-price strong { color: #fff; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
#navigation ul.mnav-points { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; }
#navigation ul.mnav-points li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.3; font-weight: 600; }
#navigation ul.mnav-points li::before {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  content: "\2713";
  color: #072a4f;
  font-size: 11px;
  font-weight: 800;
  background: #6fe3cf;
  border-radius: 50%;
}
#navigation a.mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(90deg, #db1a1a, #ff4027);
  border-radius: 14px;
  box-shadow: 0 4px 0 #a31414;
  transition: transform .15s ease, box-shadow .15s ease;
}
#navigation a.mnav-cta::after { content: "\2192"; font-size: 18px; }
#navigation a.mnav-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #a31414; }
#navigation a.mnav-sub { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#navigation div.mnav-promo a:focus-visible { outline-color: #fff; }   /* 濃い青の上でも見える枠 */

/* ─── リンクの一覧（アイコン・名前・一言。申し込みに近い順） ─── */
#navigation nav#nav ul.menu {
  height: auto;
  margin: 16px 0 0;
  padding: 6px;
  overflow: visible;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
#navigation nav#nav ul.menu li + li { border-top: 1px solid #eef2f6; }
#navigation nav#nav ul.menu li a {
  gap: 14px;
  height: auto;
  min-height: 64px;
  padding: 10px 40px 10px 10px;
  color: var(--jol-text);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 12px;
}
#navigation nav#nav ul.menu li a span { padding-left: 0; }   /* layout.css の「a span { padding-left: 50px }」を消す */
#navigation nav#nav ul.menu li a::after { right: 16px; border-color: #8a96a3; }
#navigation nav#nav ul.menu li:hover a { background: transparent; }   /* タップの端末では、触ったあと色が残らないように */
@media (hover: hover) {
  #navigation nav#nav ul.menu li:hover a { background: #f2f7fe; }
}
#navigation nav#nav ul.menu li.current a,
#navigation nav#nav ul.menu li a:active { background: #f2f7fe; }
#navigation span.mnav-ic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 42px; height: 42px; background: #eef5fc; border-radius: 12px; }
#navigation span.mnav-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--jol-blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#navigation span.mnav-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#navigation span.mnav-t small { color: var(--jol-text-sub); font-size: 13px; line-height: 1.35; font-weight: 500; letter-spacing: 0; }
/* いちばん上（プランと料金）は申し込みに近いので、アイコンに色を付ける */
#navigation nav#nav ul.menu li:first-child span.mnav-ic { background: linear-gradient(135deg, var(--jol-teal), var(--jol-blue)); }
#navigation nav#nav ul.menu li:first-child span.mnav-ic svg { stroke: #fff; }

/* ─── 言語（言語版があるページだけ）・マイページと問い合わせ ─── */
#navigation div.mnav-lang { margin-top: 18px; }
#navigation p.mnav-label { margin: 0 4px 8px; color: var(--jol-text-sub); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#navigation div.mnav-lang ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#navigation div.mnav-lang a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--jol-text); font-size: 14.5px; font-weight: 600; text-decoration: none; background: #fff; border: 1px solid #dfe5ec; border-radius: 999px; }
#navigation div.mnav-lang a[aria-current="true"] { color: #fff; background: var(--jol-blue); border-color: var(--jol-blue); }
#navigation div.mnav-help { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
#navigation div.mnav-help a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  color: var(--jol-text);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 14px;
}
#navigation div.mnav-help span.mnav-ic { width: 36px; height: 36px; border-radius: 10px; }
#navigation div.mnav-help span.mnav-ic svg { width: 20px; height: 20px; }
#navigation div.mnav-help span.mnav-t small { font-size: 11.5px; }
@media screen and (max-width: 359px) {
  #navigation div.mnav-help { grid-template-columns: 1fr; }
}

/* ─── 開くと中身が順に出る（閉じるときは一緒に消える） ─── */
#navigation div.mnav-promo,
#navigation nav#nav ul.menu > li,
#navigation div.mnav-lang,
#navigation div.mnav-help { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .4s var(--jol-ease); }
#navigation.open div.mnav-promo,
#navigation.open nav#nav ul.menu > li,
#navigation.open div.mnav-lang,
#navigation.open div.mnav-help { opacity: 1; transform: none; }
#navigation.open div.mnav-promo { transition-delay: .04s; }
#navigation.open nav#nav ul.menu > li:nth-child(1) { transition-delay: .1s; }
#navigation.open nav#nav ul.menu > li:nth-child(2) { transition-delay: .14s; }
#navigation.open nav#nav ul.menu > li:nth-child(3) { transition-delay: .18s; }
#navigation.open nav#nav ul.menu > li:nth-child(4) { transition-delay: .22s; }
#navigation.open nav#nav ul.menu > li:nth-child(5) { transition-delay: .26s; }
#navigation.open nav#nav ul.menu > li:nth-child(6) { transition-delay: .3s; }
#navigation.open div.mnav-lang { transition-delay: .34s; }
#navigation.open div.mnav-help { transition-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  #navigation nav#nav,
  #navigation div.mnav-promo,
  #navigation nav#nav ul.menu > li,
  #navigation div.mnav-lang,
  #navigation div.mnav-help { transform: none !important; transition: none !important; }
  #navigation div.mnav-promo,
  #navigation nav#nav ul.menu > li,
  #navigation div.mnav-lang,
  #navigation div.mnav-help { opacity: 1; }
}

/* ─── トップの「旅の特典」の節: 本物のクーポン（クーポンのページ フェーズ3・2026-10-27）─────────────────
   inc/top-body.php の ul.tp-cpn。お店の名前の札は、お店の色（--mk-bg）と文字の色（--mk-ink）＝クーポンのページと同じ決まり。
   お客様だけの特典は金の縁。押すとそのクーポンのページ（/coupons/?c=） */
div.area[data-sec="perks"] ul.tp-cpn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
  margin: clamp(22px, 3vw, 32px) auto 0;
  padding: 0;
  list-style: none;
}
div.area[data-sec="perks"] a.tp-cpn-a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px 16px 10px 10px;
  color: var(--jol-text);
  text-align: left;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e3eaf2;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .07);
  transition: transform .2s var(--jol-ease), box-shadow .2s var(--jol-ease), border-color .2s ease;
}
div.area[data-sec="perks"] a.tp-cpn-a.is-perk { background: linear-gradient(180deg, #fffdf5, #fff); border-color: rgba(201, 168, 76, .65); }
div.area[data-sec="perks"] span.tp-cpn-mk {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  color: var(--mk-ink, #fff);
  font-size: 19px;
  font-weight: 900;
  background: var(--mk-bg, #1e3a5f);
  border-radius: 13px;
}
div.area[data-sec="perks"] span.tp-cpn-mk.has-logo { padding: 5px; background: #fff; border: 1px solid #e3eaf2; }
div.area[data-sec="perks"] span.tp-cpn-mk img { display: block; width: 100%; height: 100%; object-fit: contain; }
div.area[data-sec="perks"] span.tp-cpn-t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
div.area[data-sec="perks"] span.tp-cpn-t b { overflow: hidden; font-size: 15.5px; line-height: 1.3; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
div.area[data-sec="perks"] span.tp-cpn-t small { color: var(--jol-text-sub); font-size: 12.5px; line-height: 1.3; font-weight: 700; }
div.area[data-sec="perks"] a.tp-cpn-a.is-perk span.tp-cpn-t small { color: #8a6d1f; }
div.area[data-sec="perks"] span.tp-cpn-off { flex-shrink: 0; color: #c2170f; font-size: 16px; line-height: 1.2; font-weight: 900; text-align: right; white-space: nowrap; }
div.area[data-sec="perks"] a.tp-cpn-a:focus-visible { outline: 3px solid var(--jol-focus); outline-offset: 2px; }
@media (hover: hover) {
  div.area[data-sec="perks"] a.tp-cpn-a:hover { transform: translateY(-2px); border-color: #c8d3e1; box-shadow: 0 12px 24px rgba(16, 24, 40, .12); }
}
@media screen and (max-width: 640px) {
  div.area[data-sec="perks"] ul.tp-cpn { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  div.area[data-sec="perks"] a.tp-cpn-a { transition: none; }
}