/* ヨビオコ:アプリ紹介・プライバシーポリシー・利用規約・サポートの共通デザイン */
:root{
  --bg:#F4F7FC; --surface:#FFFFFF; --surface-2:#EEF3FA; --ink:#15233F; --muted:#66758F; --line:#DFE8F3;
  --accent:#1F7AF0; --accent-soft:#E3EFFF; --good:#1FA971; --warm:#F08A4B;
  --dawn-1:#1B2F6B; --dawn-2:#3563E9; --dawn-3:#8FB4FF; --dawn-4:#FFC9A8;
  --round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --num:"Outfit","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0B1222;--surface:#141E33;--surface-2:#1A2640;--ink:#E7EEF9;--muted:#97A6C0;--line:#26365A;--accent:#5AA2FF;--accent-soft:#1D3257;}
}
:root[data-theme="dark"]{--bg:#0B1222;--surface:#141E33;--surface-2:#1A2640;--ink:#E7EEF9;--muted:#97A6C0;--line:#26365A;--accent:#5AA2FF;--accent-soft:#1D3257;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
img{max-width:100%}

/* 上の細いナビ(全ページ共通) */
.topnav{display:flex;align-items:center;gap:16px;max-width:880px;margin:0 auto;padding:14px 20px}
.topnav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-family:var(--round);font-weight:800;font-size:17px}
.topnav .brand img,.topnav .brand .icon-fallback{width:32px;height:32px;border-radius:9px}
.topnav nav{margin-left:auto;display:flex;gap:16px;font-size:13.5px}
.topnav nav a{color:var(--muted);text-decoration:none}
.topnav nav a[aria-current="page"]{color:var(--ink);font-weight:700}

/* 文章ページ(プライバシーポリシー・利用規約・サポート) */
.doc{max-width:760px;margin:0 auto;padding:8px 20px 64px}
.doc h1{font-family:var(--round);font-size:clamp(26px,5vw,34px);line-height:1.3;margin:18px 0 6px;letter-spacing:.01em}
.doc .meta{color:var(--muted);font-size:13px;margin:0 0 28px}
.doc h2{font-family:var(--round);font-size:19px;margin:40px 0 10px;padding-top:6px}
.doc h3{font-size:15.5px;margin:22px 0 6px}
.doc p,.doc li{font-size:15px;max-width:70ch}
.doc ul,.doc ol{padding-left:1.4em}
.doc .lead{font-size:15.5px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
.doc th,.doc td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.doc th{color:var(--muted);font-weight:500;width:32%}
.tablewrap{overflow-x:auto}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 20px;margin:0 0 8px}
.toc ol{margin:6px 0;columns:2;column-gap:28px;font-size:14px}
@media (max-width:560px){.toc ol{columns:1}}
.contactbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-top:10px}

/* フッター(全ページ共通) */
.foot{border-top:1px solid var(--line);margin-top:40px}
.foot .in{max-width:880px;margin:0 auto;padding:24px 20px 36px;display:flex;flex-wrap:wrap;gap:10px 20px;font-size:13px;color:var(--muted)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .copy{width:100%;margin-top:6px}

/* アイコンが見つからないときの代わり */
.icon-fallback{display:inline-grid;place-items:center;background:linear-gradient(160deg,var(--dawn-2),var(--dawn-3) 60%,var(--dawn-4));color:#fff;font-size:18px}


/* ---- 言葉の切り替え(日本語 / EN) ---- */
.i18n-wait body{visibility:hidden}
.topnav nav{align-items:center}
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.lang-switch button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;line-height:1.2;padding:4px 10px;border-radius:99px;cursor:pointer;white-space:nowrap}
.lang-switch button[aria-pressed="true"]{background:#3563E9;color:#fff}
/* 長い文のページは、日本語と英語を別々に書いておき、片方だけ見せる */
[data-l="en"]{display:none}
html[data-lang="en"] [data-l="en"]{display:block}
html[data-lang="en"] [data-l="ja"]{display:none}
.topnav nav a{white-space:nowrap}
/* スマホ:切り替えはナビの中ではなく、その下(ページの一番上の右)に出す */
.langrow{display:none}
@media (max-width:640px){
  .topnav{gap:10px}
  .topnav nav{gap:14px;font-size:13px}
  header.topnav nav .lang-switch{display:none}
  .langrow{display:flex;justify-content:flex-end;max-width:760px;margin:0 auto;padding:2px 20px 0}
}
@media (max-width:340px){.topnav nav{gap:10px;font-size:12px}.topnav .brand{font-size:15.5px;gap:8px}}


/* ================= 検索向けに足したページ(タイプ・コラム・よくある質問・使い方) ================= */
.nb{display:inline-block}
.lang-switch a{color:var(--muted);font-size:12px;font-weight:700;line-height:1.2;padding:4px 10px;border-radius:99px;text-decoration:none;white-space:nowrap}
.lang-switch a[aria-current="true"]{background:#3563E9;color:#fff}
.crumbs{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.7}
.crumbs a{color:var(--muted)}
.doc .lead a{font-weight:700}
.doc h1{overflow-wrap:anywhere}
.doc .note{background:var(--accent-soft);border-radius:16px;padding:14px 16px;max-width:none}
.doc table.grid th{width:auto;white-space:nowrap}
.doc table.grid thead th{color:var(--ink);font-weight:700;border-bottom:2px solid var(--line)}
.doc table.grid tbody th{color:var(--ink);font-weight:700}
.doc table.grid td,.doc table.grid th{font-size:14px;line-height:1.7}
.doc table.tips th{white-space:normal;min-width:9.5em}
.doc table.tips th small{color:var(--muted);font-weight:500}
.doc table.tips th a{text-decoration:none}
@media (max-width:560px){.doc table.grid th{white-space:normal}}
.qa h3{margin:26px 0 4px;font-size:16px;line-height:1.6}
.qa p{margin:0}

/* カード(コラムの一覧・あわせて読む) */
.cards{list-style:none;padding:0 !important;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cards li{max-width:none}
.card-link{display:block;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.card-link:hover{border-color:var(--accent)}
.card-link b{display:block;font-family:var(--round);font-size:15px;line-height:1.55}
.card-link span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.65}

/* タイプ */
.typegrid{list-style:none;padding:0 !important;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.typegrid li{max-width:none}
.typecard{display:flex;align-items:center;gap:12px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px 12px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.typecard:hover{border-color:var(--accent)}
.typecard .em{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:var(--tsoft,#E3EFFF)}
.typecard .tx{min-width:0}
.typecard b{display:block;font-family:var(--round);font-size:14.5px;line-height:1.45}
.typecard small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.typehero{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;margin:6px 0 4px}
.typehero .em{flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:50px;background:var(--tsoft,#E3EFFF)}
.typehero p{margin:0;max-width:none}
.typehero .an{font-size:13px;color:var(--muted)}
.typehero .sh{font-family:var(--round);font-weight:700;font-size:17px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px !important}
.chips span{font-size:12px;font-weight:700;background:var(--surface-2);border-radius:99px;padding:3px 10px;white-space:nowrap}
.tpills{list-style:none;padding:0 !important;display:flex;flex-wrap:wrap;gap:8px}
.tpills li{background:var(--accent-soft);color:var(--ink);font-weight:700;font-size:14px;border-radius:99px;padding:5px 14px}
@media (max-width:480px){.typehero{gap:14px;padding:16px}.typehero .em{width:68px;height:68px;font-size:36px}.typehero .sh{font-size:15.5px}}

/* ページの下の案内(アプリのバナー) */
.promo{display:flex;gap:16px;align-items:flex-start;margin-top:44px;border-radius:22px;padding:22px 20px;color:#fff;background:linear-gradient(135deg,#1B2F6B,#3563E9 70%,#6E92F5)}
.promo img{flex:none;width:64px;height:64px;border-radius:15px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.promo .tx{min-width:0;flex:1}
.promo b{display:block;font-family:var(--round);font-size:18px;line-height:1.5}
.promo p{margin:6px 0 0;font-size:14px;line-height:1.75;color:rgba(255,255,255,.92);max-width:none}
.promo p.os{font-size:12px;color:rgba(255,255,255,.75);margin-top:4px}
.promo .bt{margin-top:8px}
.promo .btn{display:inline-block;margin:6px 8px 0 0;padding:10px 18px;border-radius:99px;background:#fff;color:#1B2F6B;font-weight:700;font-size:14px;text-decoration:none}
.promo .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65)}
@media (max-width:480px){.promo{gap:12px;padding:18px 16px}.promo img{width:48px;height:48px;border-radius:12px}.promo b{font-size:16.5px}.promo .btn{display:block;text-align:center;margin-right:0}}
/* 記事の途中の案内(1行) */
.promo-line{display:flex;align-items:center;gap:12px;margin:34px 0 0;padding:10px 14px;border-radius:16px;background:var(--accent-soft);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s}
.promo-line:hover{border-color:var(--accent)}
.promo-line img{flex:none;width:36px;height:36px;border-radius:9px}
.promo-line .tx{min-width:0;flex:1}
.promo-line b{display:block;font-family:var(--round);font-size:14px;line-height:1.5}
.promo-line .go{flex:none;font-size:12.5px;font-weight:700;color:#fff;background:#3563E9;border-radius:99px;padding:6px 12px;white-space:nowrap}
@media (max-width:480px){.promo-line{flex-wrap:wrap;row-gap:8px;padding:12px 14px}.promo-line .tx{flex:1 1 calc(100% - 48px)}.promo-line .go{margin-left:48px}}

/* ================= コラム(一覧と記事) ================= */
.kicker{margin:18px 0 -14px;font-family:var(--round);font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--accent)}
.doc.col{max-width:1040px}
.doc.col h1{font-size:clamp(30px,6vw,42px)}
.doc.col .lead{background:none;border:0;padding:0;font-size:16px;color:var(--muted);max-width:40em}
.coltabs{display:flex;gap:8px;margin:22px -20px 0;padding:0 20px 4px;overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:3;background:var(--bg)}
.coltabs::-webkit-scrollbar{display:none}
.coltabs a{flex:none;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.coltabs a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.colsec{scroll-margin-top:60px}
.colsec h2{display:flex;align-items:baseline;gap:10px;margin:34px 0 14px;font-size:21px}
.colsec h2 small{font-family:inherit;font-size:12.5px;font-weight:500;color:var(--muted)}
.colgrid{list-style:none;padding:0 !important;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.colgrid li{max-width:none}
.colcard{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
.colcard:hover{border-color:var(--accent)}
.colcard .thumb{display:grid;place-items:center;height:112px;font-size:46px;line-height:1}
.thumb.t0{background:linear-gradient(135deg,#DCE9FF,#EEF4FF)}.thumb.t1{background:linear-gradient(135deg,#FFE9D6,#FFF4EA)}
.thumb.t2{background:linear-gradient(135deg,#DDF5EA,#EEFAF4)}.thumb.t3{background:linear-gradient(135deg,#EDE3FF,#F6F0FF)}
.thumb.t4{background:linear-gradient(135deg,#FFE1E6,#FFF0F2)}.thumb.t5{background:linear-gradient(135deg,#FFF3C9,#FFF9E4)}
.colcard .bd{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.ctag{align-self:flex-start;display:inline-block;font-size:11.5px;font-weight:700;line-height:1.5;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:2px 10px;text-decoration:none;white-space:nowrap}
.colcard b{font-family:var(--round);font-size:16px;line-height:1.55}
.colcard .ds{font-size:13px;line-height:1.7;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.colcard .rt{margin-top:auto;padding-top:4px;font-size:12px;color:var(--muted)}
@media (min-width:720px){
  .colgrid li.feat{grid-column:1/-1}
  .feat .colcard{flex-direction:row}
  .feat .colcard .thumb{flex:none;width:38%;height:auto;min-height:190px;font-size:76px}
  .feat .colcard .bd{justify-content:center;padding:22px 26px}
  .feat .colcard b{font-size:22px;line-height:1.45}
  .feat .colcard .ds{font-size:14px;-webkit-line-clamp:4}
  .feat .colcard .rt{margin-top:0}
}
@media (max-width:560px){.colgrid{grid-template-columns:1fr}.colcard{flex-direction:row}.colcard .thumb{flex:none;width:84px;height:auto;font-size:34px}.colcard .bd{padding:12px 14px}.colcard b{font-size:15px}.colcard .ds{-webkit-line-clamp:2}}
/* 記事 */
.doc.art .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 20px}
.doc.art .lead{border:0;border-left:4px solid var(--accent);border-radius:0 14px 14px 0;background:var(--surface);font-size:16px}
.doc.art .toc{margin:18px 0 0}
.doc.art .toc b{font-family:var(--round);font-size:14px}
.doc.art .toc a{text-decoration:none;color:var(--ink)}
.doc.art .toc a:hover{color:var(--accent);text-decoration:underline}
.doc.art .toc li{margin:0;padding:3px 0;break-inside:avoid}
.doc.art h2{scroll-margin-top:16px;padding:0 0 8px;border-bottom:2px solid var(--line);font-size:20px;margin-top:46px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .colcard .thumb{filter:brightness(.82) saturate(.9)}}
:root[data-theme="dark"] .colcard .thumb{filter:brightness(.82) saturate(.9)}

/* ================= 運営元 Hugbit のカード ================= */
.hb-card{display:flex;align-items:center;gap:18px;background:#0E1A1C;color:#fff;border-radius:22px;padding:20px 24px;text-decoration:none;border:1px solid #0E1A1C;transition:border-color .25s,background .25s}
.hb-card:hover{background:#14252A;border-color:#8CCBC3}
.hb-card img{flex:none;width:58px;height:auto}
.hb-card .hb-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;text-align:left}
.hb-card small{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#8CCBC3}
.hb-card b{font-family:"Outfit","M PLUS Rounded 1c",system-ui,sans-serif;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:#fff}
.hb-card .hb-s{font-size:13px;color:#C5D1D3;line-height:1.6}
.hb-card .hb-go{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:17px;transition:background .25s,color .25s}
.hb-card:hover .hb-go{background:#fff;color:#0E1A1C}
.hb-wrap{max-width:760px;margin:0 auto;padding:44px 20px 64px}

/* ================= コラム:動きのあるパーツ ================= */
/* 読んだところまでの線 */
.readbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#3563E9,#5AC8FA);pointer-events:none}
/* 下から出てくる(col.js がクラスをつけたときだけ) */
.rvl{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.rvl.in{opacity:1;transform:none}
.rvl tbody tr{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--r,0) * 70ms + .15s)}
.rvl.in tbody tr{opacity:1;transform:none}
.rvl>li{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--r,0) * 80ms + .1s)}
.rvl.in>li{opacity:1;transform:none}
/* もくじ:いま読んでいるところ */
.doc.art .toc a[aria-current="true"]{color:var(--accent);font-weight:700}
/* 手順(番号つきのリスト) */
.doc.art>ol{list-style:none;padding:0 !important;counter-reset:st;margin:14px 0}
.doc.art>ol>li{counter-increment:st;position:relative;padding:10px 14px 10px 52px;margin:8px 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;max-width:none}
.doc.art>ol>li::before{content:counter(st);position:absolute;left:12px;top:9px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-family:var(--round);font-weight:800;font-size:13.5px}
/* 一覧のカード */
.colcard .thumb{transition:font-size .2s}
.colgrid li.rvl{transition-delay:calc(var(--r,0) * 60ms)}

/* ---- 記事の上の、動く図 ---- */
.fig{--fb1:#DCE9FF;--fb2:#F4F8FF;--fc:#fff;--fi:#15233F;--fm:#66758F;--fl:#DFE8F3;position:relative;overflow:hidden;margin:20px 0 0;height:196px;border-radius:22px;
  background:linear-gradient(135deg,var(--fb1),var(--fb2));color:var(--fi);display:grid;place-items:center;font-family:var(--round);user-select:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fig{--fb1:#16254A;--fb2:#101A33;--fc:#1C2947;--fi:#E7EEF9;--fm:#97A6C0;--fl:#2A3B62}}
:root[data-theme="dark"] .fig{--fb1:#16254A;--fb2:#101A33;--fc:#1C2947;--fi:#E7EEF9;--fm:#97A6C0;--fl:#2A3B62}
.fig .e{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1}
html.js .fig:not(.play) *,html.js .fig:not(.play) *::before,html.js .fig:not(.play) *::after{animation-play-state:paused !important}

/* 流れ(3つの丸と、あいだを進む点) */
.fig-tl{display:flex;align-items:flex-start;justify-content:center;gap:0;width:100%;padding:0 14px}
.fig-tl .n{flex:none;width:112px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.fig-tl .n .e{width:68px;height:68px;border-radius:50%;background:var(--fc);display:grid;place-items:center;font-size:32px;box-shadow:0 6px 16px rgba(30,60,140,.12);animation:tlPulse 6s ease-in-out infinite}
.fig-tl .n small{font-size:12.5px;font-weight:800;line-height:1.4;color:var(--fi);animation:tlLabel 6s ease-in-out infinite}
.fig-tl .n2 .e,.fig-tl .n2 small{animation-delay:2s}.fig-tl .n3 .e,.fig-tl .n3 small{animation-delay:4s}
.fig-tl .ln{flex:1;max-width:90px;min-width:20px;height:4px;border-radius:9px;background:var(--fl);margin-top:32px;position:relative}
.fig-tl .ln i{position:absolute;top:-4px;left:0;width:12px;height:12px;border-radius:50%;background:#3563E9;opacity:0;animation:tlDot 6s linear infinite}
.fig-tl .l1 i{animation-delay:1.2s}.fig-tl .l2 i{animation-delay:3.2s}
@keyframes tlPulse{0%,34%,100%{transform:scale(1);box-shadow:0 6px 16px rgba(30,60,140,.12)}6%,26%{transform:scale(1.14);box-shadow:0 0 0 6px rgba(53,99,233,.22),0 10px 22px rgba(30,60,140,.2)}12%{transform:scale(1.14) rotate(-9deg)}18%{transform:scale(1.14) rotate(9deg)}}
@keyframes tlLabel{0%,34%,100%{color:var(--fm)}6%,26%{color:var(--fi)}}
@keyframes tlDot{0%{left:0;opacity:0}2%{opacity:1}13%{left:calc(100% - 12px);opacity:1}15%,100%{left:calc(100% - 12px);opacity:0}}

/* アイコンの列 */
.fig-ir{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;padding:0 10px}
.fig-ir .t{display:flex;flex-direction:column;align-items:center;gap:8px;animation:irHop 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .28s)}
.fig-ir .e{width:56px;height:56px;border-radius:18px;background:var(--fc);display:grid;place-items:center;font-size:27px;box-shadow:0 6px 14px rgba(30,60,140,.12)}
.fig-ir small{font-size:11.5px;font-weight:800;color:var(--fm);white-space:nowrap}
.fig-ir .hot .e{box-shadow:0 0 0 3px #3563E9,0 8px 18px rgba(53,99,233,.3)}.fig-ir .hot small{color:#3563E9}
@keyframes irHop{0%,22%,100%{transform:none}8%{transform:translateY(-14px)}14%{transform:translateY(0) scale(1.04,.96)}}

/* タスクを打つ */
.fig-ty{position:relative;width:min(300px,84%);background:var(--fc);border-radius:20px;padding:14px 16px 16px;box-shadow:0 10px 26px rgba(30,60,140,.16);text-align:center;overflow:hidden}
.fig-ty .segs{display:flex;gap:5px}.fig-ty .segs i{flex:1;height:5px;border-radius:9px;background:var(--fl)}
.fig-ty .segs i:first-child{background:#1FA971}.fig-ty .segs i:nth-child(2){background:#3563E9}
.fig-ty .tg{display:block;font-size:21px;font-weight:800;margin:12px 0 10px;white-space:nowrap}
.fig-ty .in{display:flex;align-items:center;justify-content:center;height:42px;border:1.5px solid #9DB6F7;border-radius:13px;font-size:16px;font-weight:700}
.fig-ty .in.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px}
.fig-ty .ty{display:inline-block;overflow:hidden;white-space:nowrap;width:var(--w);animation:tyType 6.4s infinite}
.fig-ty .ca{width:2px;height:20px;background:#3563E9;margin-left:2px;animation:tyBlink .9s steps(1) infinite}
.fig-ty .ok{position:absolute;inset:0;background:var(--fc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:800;opacity:0;animation:tyDone 6.4s ease infinite}
.fig-ty .ok span{width:44px;height:44px;border-radius:50%;background:#1FA971;color:#fff;display:grid;place-items:center;font-size:24px}
@keyframes tyType{0%,8%{width:0}48%,100%{width:var(--w)}}
@keyframes tyBlink{50%{opacity:0}}
@keyframes tyDone{0%,56%{opacity:0;transform:scale(.96)}62%,92%{opacity:1;transform:none}100%{opacity:0}}

/* やることリスト */
.fig-cl{width:min(290px,84%);display:grid;gap:9px}
.fig-cl .r{display:flex;align-items:center;gap:12px;background:var(--fc);border-radius:14px;padding:10px 14px;box-shadow:0 5px 14px rgba(30,60,140,.1);font-size:14.5px;font-weight:700}
.fig-cl .r i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #9DB6F7;position:relative;background:#1FA971;border-color:#1FA971}
.fig-cl .r i::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fig-cl .r span{opacity:.45;text-decoration:line-through}
.fig-cl .r1 i{animation:clB1 7s ease infinite}.fig-cl .r1 i::after{animation:clT1 7s ease infinite}.fig-cl .r1 span{animation:clX1 7s ease infinite}
@keyframes clB1{0%,10%{background:transparent;border-color:#9DB6F7;transform:none}13%{transform:scale(1.25)}16%,88%{background:#1FA971;border-color:#1FA971;transform:none}95%,100%{background:transparent;border-color:#9DB6F7}}
@keyframes clT1{0%,10%{transform:rotate(45deg) scale(0)}16%,88%{transform:rotate(45deg) scale(1)}95%,100%{transform:rotate(45deg) scale(0)}}
@keyframes clX1{0%,10%{opacity:1;text-decoration:none}16%,88%{opacity:.45;text-decoration:line-through}95%,100%{opacity:1;text-decoration:none}}
.fig-cl .r2 i{animation:clB2 7s ease infinite}.fig-cl .r2 i::after{animation:clT2 7s ease infinite}.fig-cl .r2 span{animation:clX2 7s ease infinite}
@keyframes clB2{0%,28%{background:transparent;border-color:#9DB6F7;transform:none}31%{transform:scale(1.25)}34%,88%{background:#1FA971;border-color:#1FA971;transform:none}95%,100%{background:transparent;border-color:#9DB6F7}}
@keyframes clT2{0%,28%{transform:rotate(45deg) scale(0)}34%,88%{transform:rotate(45deg) scale(1)}95%,100%{transform:rotate(45deg) scale(0)}}
@keyframes clX2{0%,28%{opacity:1;text-decoration:none}34%,88%{opacity:.45;text-decoration:line-through}95%,100%{opacity:1;text-decoration:none}}
.fig-cl .r3 i{animation:clB3 7s ease infinite}.fig-cl .r3 i::after{animation:clT3 7s ease infinite}.fig-cl .r3 span{animation:clX3 7s ease infinite}
@keyframes clB3{0%,46%{background:transparent;border-color:#9DB6F7;transform:none}49%{transform:scale(1.25)}52%,88%{background:#1FA971;border-color:#1FA971;transform:none}95%,100%{background:transparent;border-color:#9DB6F7}}
@keyframes clT3{0%,46%{transform:rotate(45deg) scale(0)}52%,88%{transform:rotate(45deg) scale(1)}95%,100%{transform:rotate(45deg) scale(0)}}
@keyframes clX3{0%,46%{opacity:1;text-decoration:none}52%,88%{opacity:.45;text-decoration:line-through}95%,100%{opacity:1;text-decoration:none}}

/* 5秒のカウントダウン */
.fig-c5{position:relative;width:min(300px,84%);background:var(--fc);border-radius:20px;padding:16px 18px 18px;box-shadow:0 10px 26px rgba(30,60,140,.16)}
.fig-c5 .top{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:800}
.fig-c5 .num{display:flex;align-items:baseline;gap:4px}
.fig-c5 .win{display:inline-block;height:40px;overflow:hidden;font-size:36px;line-height:40px;font-weight:800;color:#3563E9}
.fig-c5 .col{display:block;animation:c5Num 7s infinite;animation-timing-function:steps(5,end)}
.fig-c5 .col i{display:block;height:40px;font-style:normal;text-align:right}
.fig-c5 small{font-size:12px;color:var(--fm)}
.fig-c5 .bar{height:9px;border-radius:9px;background:var(--fl);margin-top:12px;overflow:hidden}
.fig-c5 .bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#3563E9,#5AC8FA);transform-origin:0 50%;animation:c5Bar 7s linear infinite}
.fig-c5 .bell{position:absolute;right:-12px;top:-16px;width:52px;height:52px;border-radius:50%;background:#FFD45C;display:grid;place-items:center;font-size:25px;opacity:0;animation:c5Bell 7s ease infinite;box-shadow:0 8px 18px rgba(200,140,0,.35)}
.fig-c5{overflow:visible}
@keyframes c5Num{0%{transform:translateY(0)}71.4%,100%{transform:translateY(-200px)}}
@keyframes c5Bar{0%{transform:scaleX(1)}71.4%,100%{transform:scaleX(0)}}
@keyframes c5Bell{0%,70%{opacity:0;transform:scale(.4)}74%{opacity:1;transform:scale(1.1) rotate(-18deg)}79%{transform:rotate(18deg)}84%{transform:rotate(-14deg)}89%{transform:rotate(12deg)}94%{opacity:1;transform:rotate(0)}100%{opacity:0;transform:scale(.6)}}

/* マナーモード・機内モード・電源オフ */
.fig-md{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:26px;row-gap:8px;align-items:center;justify-content:center}
.fig-md .ph{grid-row:1;grid-column:1;position:relative;width:74px;height:118px;border-radius:18px;background:#15233F;padding:6px;box-shadow:0 10px 22px rgba(20,35,63,.3)}
.fig-md .ph::before{content:"";position:absolute;inset:6px;border-radius:13px;background:linear-gradient(180deg,#8FB2F5,#E7EEFA);animation:mdScreen 9s ease infinite}
.fig-md .b{position:absolute;inset:0;display:grid;place-items:center;font-size:32px}
.fig-md .b.on{animation:mdOn 9s ease infinite}.fig-md .b.off{opacity:0;animation:mdOff 9s ease infinite}
.fig-md .res{grid-row:2;grid-column:1;position:relative;height:22px;font-size:13px;font-weight:800;text-align:center}
.fig-md .res span{position:absolute;left:-30px;right:-30px;top:0}
.fig-md .yes{color:#1FA971;animation:mdYes 9s ease infinite}.fig-md .no{color:var(--fm);opacity:0;animation:mdNo 9s ease infinite}
.fig-md .chips{grid-row:1 / span 2;grid-column:2;display:grid;gap:8px}
.fig-md .c{background:var(--fc);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px rgba(30,60,140,.1);animation:mdChip 9s ease infinite}
.fig-md .c2{animation-delay:3s}.fig-md .c3{animation-delay:6s}
@keyframes mdChip{0%,30%{background:#3563E9;color:#fff;transform:translateX(-6px)}34%,100%{background:var(--fc);color:var(--fi);transform:none}}
@keyframes mdOn{0%,63%{opacity:1;transform:none}6%,18%,40%,52%{transform:rotate(-14deg)}12%,24%,46%,58%{transform:rotate(14deg)}67%,97%{opacity:0}100%{opacity:1}}
@keyframes mdOff{0%,63%{opacity:0}67%,97%{opacity:1}100%{opacity:0}}
@keyframes mdYes{0%,63%{opacity:1}67%,97%{opacity:0}100%{opacity:1}}
@keyframes mdNo{0%,63%{opacity:0}67%,97%{opacity:1}100%{opacity:0}}
@keyframes mdScreen{0%,63%{filter:none}67%,97%{filter:grayscale(1) brightness(.35)}100%{filter:none}}

/* 鳴らない・覚えがない */
.fig-q{position:relative;width:220px;height:140px}
.fig-q .bell{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--fc);display:grid;place-items:center;font-size:40px;box-shadow:0 8px 20px rgba(30,60,140,.14);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.fig-q .q{position:absolute;font-size:26px;font-weight:800;color:#3563E9;opacity:0;animation:qPop 4.5s ease infinite}
.fig-q .q1{left:22px;top:8px}.fig-q .q2{right:18px;top:0;animation-delay:.7s;font-size:32px}.fig-q .q3{right:34px;bottom:2px;animation-delay:1.4s;font-size:20px}
.fig-q .mg{position:absolute;left:8px;bottom:0;font-size:34px;animation:qScan 4.5s ease-in-out infinite}
@keyframes qPop{0%,8%{opacity:0;transform:scale(.3) translateY(8px)}18%,52%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes qScan{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(64px,-52px) rotate(-12deg)}60%{transform:translate(120px,-10px) rotate(10deg)}}

/* 音楽 */
.fig-eq{position:relative;width:240px;height:130px;display:grid;place-items:end center}
.fig-eq .bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.fig-eq .bars i{width:14px;height:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#5AC8FA,#3563E9);transform-origin:50% 100%;animation:eqBar 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -.17s)}
.fig-eq .bars i:nth-child(3n){animation-duration:.8s}.fig-eq .bars i:nth-child(4n+1){animation-duration:1.4s}
.fig-eq .nt{position:absolute;font-size:24px;opacity:0;animation:eqNote 3.6s ease-in infinite}
.fig-eq .n1{left:6px;bottom:30px}.fig-eq .n2{right:2px;bottom:44px;animation-delay:1.2s}.fig-eq .n3{left:46%;bottom:70px;animation-delay:2.4s}
@keyframes eqBar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes eqNote{0%{opacity:0;transform:translateY(10px) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translateY(-56px) rotate(14deg)}}

/* アラーム・タイマー・リマインダー */
.fig-tr{display:flex;gap:12px;justify-content:center;padding:0 10px;width:100%}
.fig-tr .c{flex:1;max-width:150px;min-width:0;height:124px;background:var(--fc);border-radius:18px;box-shadow:0 8px 20px rgba(30,60,140,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px 8px;position:relative;overflow:hidden}
.fig-tr small{font-size:11.5px;font-weight:800;color:var(--fm);margin-top:auto}
.fig-tr .e{font-size:30px;margin-top:6px}
.fig-tr .a .e{animation:trRing 2.4s ease-in-out infinite}
.fig-tr .a b{font-size:16px}
.fig-tr .t .bar{width:78%;height:8px;border-radius:9px;background:var(--fl);overflow:hidden}
.fig-tr .t .bar i{display:block;height:100%;background:#F08A4B;border-radius:9px;transform-origin:0 50%;animation:trBar 4s linear infinite}
.fig-tr .r .note{margin-top:14px;background:#EAF0FF;color:#15233F;border-radius:11px;padding:7px 9px;font-size:11.5px;font-weight:800;white-space:nowrap;animation:trNote 4s ease infinite;font-family:var(--round),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji"}
@keyframes trRing{0%,50%,100%{transform:none}10%,30%{transform:rotate(-16deg)}20%,40%{transform:rotate(16deg)}}
@keyframes trBar{0%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
@keyframes trNote{0%,12%{transform:translateY(-64px);opacity:0}24%,76%{transform:none;opacity:1}90%,100%{transform:translateY(-64px);opacity:0}}

/* スコア */
.fig-sc{display:flex;align-items:center;gap:26px;justify-content:center}
.fig-sc .ring{position:relative;width:112px;height:112px;flex:none}
.fig-sc svg{width:100%;height:100%;transform:rotate(-90deg)}
.fig-sc circle{fill:none;stroke-width:10}.fig-sc .bg{stroke:var(--fl)}
.fig-sc .fg{stroke:#3563E9;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:0;animation:scRing 6s ease infinite}
.fig-sc .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;animation:scNum 6s ease infinite}
.fig-sc .bars{display:grid;gap:9px;width:150px}
.fig-sc .bars div{display:grid;grid-template-columns:1fr;gap:3px;font-size:11px;font-weight:800;color:var(--fm)}
.fig-sc .bars i{display:block;height:8px;border-radius:9px;background:var(--c);width:var(--w);transform-origin:0 50%;animation:scBar 6s ease infinite;animation-delay:calc(var(--i) * .15s)}
@keyframes scRing{0%,6%{stroke-dashoffset:264}40%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:264}}
@keyframes scNum{0%,20%{opacity:0;transform:scale(.7)}40%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes scBar{0%,6%{transform:scaleX(0)}36%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* 4文字 */
.fig-lt{display:flex;gap:12px}
.fig-lt .t{position:relative;width:62px;height:76px;border-radius:16px;background:var(--fc);box-shadow:0 8px 18px rgba(30,60,140,.14);perspective:300px}
.fig-lt b{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:var(--c);backface-visibility:hidden;animation:ltA 5s ease-in-out infinite;animation-delay:calc(var(--i) * .35s)}
.fig-lt b.b{animation-name:ltB;opacity:0}
@keyframes ltA{0%,38%{transform:rotateX(0);opacity:1}46%,88%{transform:rotateX(90deg);opacity:0}96%,100%{transform:rotateX(0);opacity:1}}
@keyframes ltB{0%,38%{transform:rotateX(-90deg);opacity:0}46%,88%{transform:rotateX(0);opacity:1}96%,100%{transform:rotateX(-90deg);opacity:0}}

/* 無料とプレミアム */
.fig-pl{display:flex;gap:14px;align-items:stretch}
.fig-pl .c{position:relative;width:128px;background:var(--fc);border-radius:18px;padding:14px 14px 16px;box-shadow:0 8px 20px rgba(30,60,140,.12);display:grid;gap:8px;align-content:start;overflow:hidden}
.fig-pl b{font-size:14.5px}
.fig-pl i{display:block;height:7px;border-radius:9px;background:var(--fl);transform-origin:0 50%;animation:plRow 5s ease infinite}
.fig-pl i:nth-of-type(2){width:80%;animation-delay:.15s}.fig-pl i:nth-of-type(3){width:62%;animation-delay:.3s}.fig-pl i:nth-of-type(4){width:74%;animation-delay:.45s}
.fig-pl .prem{background:linear-gradient(150deg,#22357A,#3563E9);color:#fff;animation:plUp 5s ease-in-out infinite}
.fig-pl .prem i{background:rgba(255,255,255,.45)}
.fig-pl .gem{position:absolute;right:10px;top:9px;font-size:18px}
.fig-pl .sh{position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation:plShine 5s ease infinite}
@keyframes plRow{0%,4%{transform:scaleX(0)}22%,100%{transform:scaleX(1)}}
@keyframes plUp{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes plShine{0%,35%{left:-60%}65%,100%{left:130%}}

@media (max-width:480px){
  .fig{height:176px}
  .fig-tl .n{width:92px}.fig-tl .n .e{width:58px;height:58px;font-size:27px}.fig-tl .n small{font-size:11.5px}.fig-tl .ln{margin-top:27px}
  .fig-ir{gap:6px}.fig-ir .e{width:44px;height:44px;border-radius:14px;font-size:22px}.fig-ir small{font-size:10px}
  .fig-tr{gap:8px}.fig-tr .c{height:116px}
  .fig-sc{gap:16px}.fig-sc .ring{width:96px;height:96px}.fig-sc .bars{width:130px}
  .fig-lt .t{width:54px;height:68px}
  .fig-pl .c{width:118px}
  .fig-md{column-gap:16px}.fig-md .c{padding:7px 12px;font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  .fig *,.fig *::before,.fig *::after,.colcard .thumb{animation:none !important}
  .rvl,.rvl tbody tr,.rvl>li{opacity:1 !important;transform:none !important;transition:none !important}
  .readbar{display:none}
}

/* ================= 改行を、言葉の切れ目に合わせる ================= */
/* .bx … 作るとき(または assets/js/bx.js)に切れ目 <wbr> を入れた日本語。切れ目のところだけで改行する */
.bx{word-break:keep-all;overflow-wrap:anywhere}
/* 切れ目を入れていない日本語も、対応しているブラウザでは文節で改行する。行のはじめに「、」「。」などを置かない */
html[lang="ja"] body{line-break:strict;word-break:auto-phrase}
/* 見出しは、行の長さをそろえる(最後の行に1〜2文字だけ残さない)。文章は、最後の行に短い言葉だけ残さない */
h1,h2,h3,h4,summary,.card-link b,.typecard b,.promo b,.promo-line b,.typehero .sh,.how-title,.modal-body h2,.modal-body h3{text-wrap:balance}
p,li,dd,td,th,figcaption,.card-link span{text-wrap:pretty}
/* 1文字ずつ出す見出しは、出している間に行が動かないようにする */
.tw,.tw *,[data-type]{text-wrap:wrap}
html[lang="en"] body{hyphens:manual;overflow-wrap:break-word}
/* 文章のページ(規約・コラムなど)の本文は、ふつうの改行にする(文節ごとに切ると、右はしがでこぼこになるため)。
   見出し・カード・案内などの短い文だけ、言葉の切れ目で改行する */
.doc :is(p:not(.lead),li,td,dd),.doc :is(p:not(.lead),li,td,dd) .bx,.doc :is(p:not(.lead),li,td,dd).bx{word-break:normal;overflow-wrap:break-word}
.doc :is(.promo,.promo-line,.cards,.colgrid,.toc,.typegrid,.typehero,.coltabs) .bx,.doc :is(.promo,.cards,.colgrid,.toc,.typegrid,.typehero) :is(p,li).bx,
.doc :is(.promo,.cards,.colgrid,.toc,.typegrid,.typehero) :is(p,li){word-break:keep-all;overflow-wrap:anywhere}