/* 確認用TOP（/top-a/）だけで読む。案A＝墨と白（2026-10-28 白倉が選択・プレマテックス寄せ）。
   中身は index.html のまま。色は変数の差し替えで変え、足した部品（.ta-*）だけ新しく書く。
   作り方＝tools/build-top-a.py。文字は16px以上・本文のコントラスト4.5以上・押せる高さ44px以上を守る。 */

body.ta{
  --ta-ink:#1F2229; --ta-ink2:#2B2F38; --ta-mist:#EEF0F3; --ta-line:#D7DBE2; --ta-muted:#4F5664;
  --ta-on:#F2F3F5; --ta-on-muted:#C3C8D2;
  --ta-en:"Oswald","Noto Sans JP",system-ui,sans-serif;
  /* 既存の色の変数を墨にそろえる（オレンジ・紺・緑 → 墨） */
  --primary:#1F2229; --pNavy:#1F2229; --pNavy2:#2B2F38; --pTeal:#2B2F38; --pGreen:#2B2F38;
  --pOrange:#1F2229; --pOrangeD:#000; --pOrangeCta:#1F2229; --pOrangeInk:#1F2229;
  --pCell:#EEF0F3; --pLine:#D7DBE2; --pInk:#1F2229; --pGray:#4F5664;
}

/* ヘッダー：墨の帯 */
.ta .header{background:rgba(31,34,41,.94)}
.ta .header,.ta .header a,.ta .header button{color:#fff}
.ta .header .mega-menu,.ta .header .mega-menu a{color:#1F2229}

/* ===== ファーストビュー ===== */
.ta .ta-hero{position:relative;min-height:min(860px,100svh);display:flex;align-items:center;overflow:hidden;background:#2a2e36;color:#fff;padding:0}
.ta .ta-fluid{position:absolute;inset:0;width:100%;height:100%}
.ta .ta-vein{position:absolute;inset:-10%;width:120%;height:120%;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;animation:taDrift 40s ease-in-out infinite alternate}
@keyframes taDrift{to{transform:translate(-4%,3%) rotate(2deg)}}
.ta .ta-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,34,41,.82) 0%,rgba(31,34,41,.5) 50%,rgba(31,34,41,0) 85%);pointer-events:none}
.ta .ta-hero-in{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:150px max(20px,env(safe-area-inset-right,0px)) 90px max(20px,env(safe-area-inset-left,0px));box-sizing:border-box}
/* 2026-10-28 プレマテックス型：上に大きな額縁の動画、その左下に英字が重なり、下に日本語。1列 */
.ta .ta-hero-in{grid-template-columns:minmax(0,1fr);gap:28px}
.ta .ta-hero-txt{max-width:760px}
.ta .ta-stage{position:relative;padding-bottom:clamp(40px,6vw,90px)}
.ta .ta-frame{position:relative;margin-left:auto;width:min(78%,1000px);aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.35);max-width:100%}
.ta .ta-frame video{width:100%;height:100%;object-fit:cover;display:block}
.ta .ta-frame small{position:absolute;right:10px;top:10px;font-size:16px;line-height:1.5;color:#fff;background:rgba(0,0,0,.6);padding:0 8px;border-radius:4px}
.ta .ta-stage .ta-hero-en{position:absolute;left:0;bottom:0;text-shadow:0 4px 30px rgba(0,0,0,.35)}
@media(max-width:768px){
  .ta .ta-frame{width:100%}
  .ta .ta-stage{padding-bottom:0}
  .ta .ta-stage .ta-hero-en{position:static;margin-top:20px}
}

/* ===== 最初の演出（html.ta-js の時だけ。JSが ta-i1〜ta-i4 を順に付ける） ===== */
.ta-intro{display:none}
html.ta-js #loadingOverlay{display:none!important}   /* 本番の読み込み幕と二重にならないように */
.ta .ta-hero{align-items:flex-start}
html.ta-js .ta-intro{display:flex;position:fixed;inset:0;z-index:10000;background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .8s ease,visibility .8s}
.ta-intro img{width:84px;height:84px;opacity:0;filter:blur(14px);transition:opacity 1s,filter 1s}
.ta-intro span{font-family:"Oswald",sans-serif;font-weight:500;letter-spacing:.3em;font-size:20px;color:#1F2229;opacity:0;filter:blur(14px);transition:opacity 1s .1s,filter 1s .1s}
html.ta-i1 .ta-intro img,html.ta-i1 .ta-intro span{opacity:1;filter:none}
html.ta-i2 .ta-intro{opacity:0;visibility:hidden}
html.ta-js .ta .ta-frame{opacity:0;transform:scale(1.06);transition:opacity 1.1s ease,transform 1.8s cubic-bezier(.2,.7,.1,1)}
html.ta-i3 .ta .ta-frame{opacity:1;transform:none}
html.ta-js .ta .ta-hero-en i{animation:none;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
html.ta-js .ta .ta-hero-en span:nth-child(2) i{transition-delay:.12s}
html.ta-js .ta .ta-hero-en span:nth-child(3) i{transition-delay:.24s}
html.ta-i4 .ta .ta-hero-en i{transform:none}
html.ta-js .ta .ta-hero-txt{opacity:0;transform:translateY(16px);transition:opacity .9s .3s,transform .9s .3s}
html.ta-i4 .ta .ta-hero-txt{opacity:1;transform:none}
.ta .ta-hero-en{margin:0;font-family:var(--ta-en);font-weight:500;text-transform:uppercase;font-size:clamp(52px,7.6vw,108px);line-height:.98;letter-spacing:.02em}
.ta .ta-hero-en span{display:block;overflow:hidden}
.ta .ta-hero-en i{display:block;font-style:normal;animation:taUp 1.1s cubic-bezier(.2,.7,.1,1) both}
.ta .ta-hero-en span:nth-child(2) i{animation-delay:.12s}
.ta .ta-hero-en span:nth-child(3) i{animation-delay:.24s}
@keyframes taUp{from{transform:translateY(105%)}to{transform:none}}
.ta .ta-hero-h1{margin:22px 0 0;font-size:clamp(22px,2.5vw,28px);font-weight:700;letter-spacing:.1em;line-height:1.55;color:#fff}
.ta .ta-hero-lead{margin:14px 0 0;font-size:17px;line-height:1.85;color:#F2F3F5;max-width:32em}
.ta .ta-hero-lead b{color:#fff}
.ta .ta-hero-sub{margin:8px 0 0;font-size:16px;color:var(--ta-on-muted)}
.ta .ta-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ta .ta-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;background:#fff;color:#1F2229;border:1px solid #fff}
.ta .ta-btn:hover{background:#E6E8EC}
.ta .ta-btn.is-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.ta .ta-btn.is-ghost:hover{background:rgba(255,255,255,.12)}
.ta .ta-ar{font-family:var(--ta-en)}
.ta .ta-hero-note{margin:14px 0 0;font-size:16px;color:var(--ta-on-muted)}
.ta .ta-hero-trust{margin:18px 0 0;font-size:16px;line-height:1.8;color:#E6E8EC;border-left:2px solid rgba(255,255,255,.5);padding-left:12px}
.ta .ta-hero-trust em{font-style:normal;color:var(--ta-on-muted)}
.ta .ta-hero-frame{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);background:#000;max-width:100%}
.ta .ta-hero-frame video{width:100%;height:100%;object-fit:cover;display:block}
.ta #heroSpVid{display:none}
.ta .ta-hero-frame small{position:absolute;left:10px;bottom:8px;font-size:16px;line-height:1.5;color:#fff;background:rgba(0,0,0,.6);padding:0 8px;border-radius:4px}
.ta .ta-scroll{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:1;font-family:var(--ta-en);font-size:16px;letter-spacing:.3em;color:#E6E8EC;text-decoration:none;min-height:44px;display:flex;align-items:center}
@media(max-width:900px){
  .ta .ta-hero-in{grid-template-columns:1fr;padding-top:96px;gap:32px}
  .ta .ta-hero::after{background:rgba(31,34,41,.62)}
}
@media(max-width:768px){
  .ta #heroMovieVid{display:none}
  .ta #heroSpVid{display:block}
  .ta .ta-hero-frame{aspect-ratio:1/1}
}

/* ===== 節の見出し：英字の大見出し＋日本語 ===== */
.ta .ta-en{margin:0 0 6px;font-family:var(--ta-en);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(36px,4.6vw,58px);line-height:1;color:#1F2229}
.ta .lp-sec-head{text-align:left}
.ta .lp-h2{color:#1F2229;letter-spacing:.06em}
.ta .lp-h2 em{font-style:normal;color:#1F2229;background:linear-gradient(transparent 70%,#D7DBE2 70%)}
.ta .lp-lead2{color:var(--ta-muted)}
.ta .ms-label .en{font-family:var(--ta-en);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(36px,4.6vw,58px);line-height:1;color:#1F2229}

/* 残っていた紺の帯・オレンジのボタン・背景の点々とにじみ */
.ta .pos-strip{background:var(--ta-ink2)}
.ta{--hkv-btn:#1F2229}
.ta .hkv-btn{background:#1F2229}
.ta .lp-deco{display:none}
/* 英字の大見出しと二重になる透かし（js/motion.js の .mo-wm）と、見出しの後ろの点線のリング */
.ta .mo-wm{display:none}
.ta .lp-sec-head::before,.ta .lp-sec-head::after{display:none}

/* 白と薄い灰の節を交互に */
.ta .lp-paint.lp-sec{background:#fff}
.ta .lp-paint.lp-sec.alt{background:var(--ta-mist)}

/* ===== 社長1つ・HAKUSO5つ：墨の面にタイル ===== */
.ta .duty-b{background:var(--ta-ink);color:var(--ta-on)}
.ta .duty-b .lead{color:#fff}
.ta .duty-b .sublead,.ta .duty-b .note,.ta .duty-b .cta p{color:var(--ta-on-muted)}
.ta .duty-b .gh{color:#fff}
.ta .duty-b .gh b{color:#fff;font-family:var(--ta-en)}
.ta .duty-b .grp{background:transparent;border-color:rgba(255,255,255,.25)}
.ta .duty-b .t{background:var(--ta-ink2);border:1px solid rgba(255,255,255,.16);transition:transform .3s}
.ta .duty-b .t:hover{transform:translateY(-3px)}
.ta .duty-b .t p,.ta .duty-b .t small{color:#fff}
.ta .duty-b .bar div{background:#4F5664!important}
.ta .duty-b .bar div:last-child{background:#fff!important;color:#1F2229}
.ta .duty-b .cta a{background:#fff;color:#1F2229;min-height:52px}

/* 2026-10-28 画像つきの札をやめ、試作どおりの3列タイルに（tools/build-top-a.py の 6b） */
.ta .duty-b .in,.ta .duty-b .lead,.ta .duty-b .sublead,.ta .duty-b .note,.ta .duty-b .cta,.ta .duty-b .cta p{text-align:left}
.ta .duty-b .cta{justify-content:flex-start;align-items:flex-start}
.ta .ta-en.ta-en-on{color:#fff}
.ta .ta-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.2);border-left:1px solid rgba(255,255,255,.2);margin:36px 0 28px}
.ta .ta-tile{position:relative;min-height:190px;padding:26px 24px 56px;border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:6px;overflow:hidden;text-decoration:none;color:#fff}
.ta .ta-tile::before{content:"";position:absolute;inset:0;background:var(--ta-ink2);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.ta .ta-tile:hover::before,.ta .ta-tile:focus-visible::before{transform:none}
.ta .ta-tile>*{position:relative}
.ta .ta-tile.is-owner{background:rgba(255,255,255,.08)}
.ta .ta-tile-en{font-family:var(--ta-en);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:22px;color:#fff;margin-bottom:auto}
.ta .ta-tile-jp{font-size:19px;font-weight:700;line-height:1.5;color:#fff;margin-top:24px}
.ta .ta-tile-n{font-size:16px;color:var(--ta-on-muted)}
.ta .ta-tile-go{position:absolute;right:22px;bottom:20px;font-family:var(--ta-en);font-size:22px;color:#fff;transition:transform .3s}
.ta .ta-tile:hover .ta-tile-go{transform:translateX(6px)}
@media(max-width:900px){.ta .ta-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ta .ta-tiles{grid-template-columns:1fr}.ta .ta-tile{min-height:0}}

/* ===== 流れる英字の帯 ===== */
.ta .ta-marq{overflow:hidden;padding:36px 0;border-top:1px solid var(--ta-line);border-bottom:1px solid var(--ta-line);background:#fff}
.ta .ta-marq div{display:flex;gap:60px;white-space:nowrap;width:max-content;animation:taMq 38s linear infinite}
.ta .ta-marq span{font-family:var(--ta-en);font-weight:300;text-transform:uppercase;font-size:clamp(64px,10vw,140px);line-height:1;color:transparent;-webkit-text-stroke:1px #1F2229}
@keyframes taMq{to{transform:translateX(-50%)}}

/* ===== 会社紹介の写真 ===== */
.ta .ta-photo{position:relative;margin:0 0 36px;max-width:100%}
.ta .ta-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ta .ta-photo figcaption{position:absolute;left:10px;bottom:8px;font-size:16px;line-height:1.5;color:#fff;background:rgba(0,0,0,.6);padding:0 8px;border-radius:4px}
@media(min-width:960px){
  .ta #mission .lp-container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
  .ta .ta-photo{margin:0;position:sticky;top:90px}
}

/* ===== 料金：墨の面 ===== */
.ta #lp-price{background:var(--ta-ink)}
.ta #lp-price .ta-en,.ta #lp-price .lp-h2,.ta #lp-price .lp-h2 em{color:#fff}
.ta #lp-price .lp-h2 em{background:linear-gradient(transparent 70%,#4F5664 70%)}
.ta #lp-price .lp-lead2,.ta #lp-price .lp-sec-head span{color:var(--ta-on-muted)!important}

/* ===== 最後の問い合わせ：流れる背景 ===== */
.ta #lp-contact{position:relative;overflow:hidden;background:#2a2e36;color:#fff}
.ta #lp-contact .ta-fluid{z-index:0}
.ta #lp-contact>*:not(.ta-fluid){position:relative;z-index:1}

/* スマホの下の固定バー：墨の地に白いボタン */
.ta .lp-sticky-cta a{background:#fff;color:#1F2229;font-size:16px}
.ta .lp-final .fbtn{background:#fff;color:#1F2229}
.ta .lp-final .fbtn:hover{background:#E6E8EC}

/* いちばん下の欄：緑の地と丸い飾り → 墨 */
.ta .footer,.ta .footer .footer-inner{background:#1F2229!important}
.ta .footer-deco{display:none}

@media (prefers-reduced-motion:reduce){
  .ta .ta-vein,.ta .ta-hero-en i,.ta .ta-marq div{animation:none}
}

/* 2026-10-28 額縁と英字で縦に長くなったので、文字に重なる SCROLL は出さない */
.ta .ta-scroll{display:none}

/* 2026-10-28 道具の動画を実際の操作の録画（1280x800）に替えたので 16:10 */
.ta #lp-tools .td-vid{aspect-ratio:16/10;background:#fff}

/* 2026-10-28 オプション欄：カラーシミュは流れの動画、下にハクコミ単体の紹介 */
.ta #lp-colorsim{display:grid;gap:18px}
.ta #lp-colorsim .cs-card::before{background:#1F2229}
.ta #lp-colorsim .cs-media{padding:14px 14px 0 18px}
.ta #lp-colorsim .cs-vid,.ta #lp-colorsim .cs-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid #D7DBE2;background:#fff}
.ta #lp-colorsim .cs-tag{color:#1F2229;border-color:#1F2229}
.ta #lp-colorsim .cs-p{color:#4F5664}
@media(min-width:700px){.ta #lp-colorsim .cs-media{padding:16px 0 16px 20px}}

/* 2026-10-28 オプション欄：ご契約中の会社の料金の表 */
.ta .cs-price{background:#fff;border:1px solid #D7DBE2;border-radius:14px;padding:22px 22px 18px}
.ta .cs-price-h{margin:0 0 14px;font-size:19px;font-weight:700;color:#1F2229}
.ta .cs-price-scroll{overflow-x:auto}
.ta .cs-price table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.6}
.ta .cs-price th,.ta .cs-price td{border-bottom:1px solid #D7DBE2;padding:12px 10px;text-align:left;vertical-align:top;color:#1F2229}
.ta .cs-price thead th{background:#1F2229;color:#fff;font-weight:700}
.ta .cs-price thead th:last-child{background:#2B2F38}
.ta .cs-price tbody td:last-child{background:#EEF0F3}
.ta .cs-price tbody th{white-space:nowrap}
.ta .cs-price-note{margin:10px 0 0;font-size:16px;color:#4F5664}
.ta #lp-colorsim>*{min-width:0}
.ta .cs-price-in{margin:14px 0 0;padding:12px 14px;background:#EEF0F3;border-left:4px solid #1F2229;font-size:16px;line-height:1.75;color:#1F2229}

/* 2026-10-28 旧TOPの .hero が高さを画面の高さに固定していて、PCで本文とボタンが下で切れていた。中身の高さに合わせる */
.ta .ta-hero{height:auto!important;min-height:min(860px,100svh)}

/* 2026-10-28 動画の枠＝D案（白倉が6案から選択）：斜めの窓＋右下にオレンジの帯がずれて重なる＋光の筋 */
.ta .ta-frame{background:none;box-shadow:none;overflow:visible}
.ta .ta-back{position:absolute;inset:0;background:#E8762E;clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);transform:translate(22px,22px)}
.ta .ta-front{position:absolute;inset:0;overflow:hidden;clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
.ta .ta-front video{width:100%;height:100%;object-fit:cover;display:block}
.ta .ta-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);background-size:250% 100%;animation:taSheen 4.5s linear infinite}
@keyframes taSheen{from{background-position:120% 0}to{background-position:-120% 0}}
/* 出てくる動き：窓が左から開き、少し遅れてオレンジの帯がずれ出る */
html.ta-js .ta .ta-frame{opacity:1;transform:none}
html.ta-js .ta .ta-front{clip-path:polygon(14% 0,14% 0,0 100%,0 100%);transition:clip-path 1.4s cubic-bezier(.2,.7,.1,1)}
html.ta-js .ta .ta-back{opacity:0;transform:translate(0,0);transition:opacity 1s .5s,transform 1.4s cubic-bezier(.2,.7,.1,1) .5s}
html.ta-i3 .ta .ta-front{clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
html.ta-i3 .ta .ta-back{opacity:1;transform:translate(22px,22px)}
@media(max-width:768px){.ta .ta-back,html.ta-i3 .ta .ta-back{transform:translate(12px,12px)}}
@media (prefers-reduced-motion:reduce){.ta .ta-front::after{animation:none}}

/* 2026-10-29 制作物の料金表＝墨の帯型（2案） */
.ta .cs-price2{background:#fff;border:1px solid #D7DBE2;border-radius:14px;padding:22px 22px 18px}
.ta .pr-band{background:#1F2229;color:#fff;border-radius:12px;padding:6px 20px}
.ta .pr-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);font-variant-numeric:tabular-nums}
.ta .pr-r:last-child{border-bottom:0}
.ta .pr-hd{font-size:16px;color:#C3C8D2;font-weight:700;padding:10px 0}
.ta .pr-n{font-weight:700;font-size:16px}
.ta .pr-was{color:#C3C8D2;font-size:16px}
.ta .pr-now{font-family:"Oswald","Noto Sans JP",sans-serif;font-weight:500;font-size:24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#fff}
.ta .pr-now i{font:700 14px "Noto Sans JP",sans-serif;font-style:normal;background:#E8762E;color:#1F2229;border-radius:4px;padding:0 6px}
@media(max-width:620px){.ta .pr-r{grid-template-columns:1fr 1fr}.ta .pr-r .pr-n{grid-column:1/-1}.ta .pr-hd{display:none}.ta .pr-was::before{content:"通常 "}}
/* 2026-10-29 値段の字を本文と同じ字体にそろえ、「6割」の札を縦一列にそろえる */
.ta .pr-r{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto}
.ta .pr-hd{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto}
.ta .pr-hd span:last-child{grid-column:3 / span 2}
.ta .pr-was{font-family:"Noto Sans JP",sans-serif;font-weight:400}
.ta .pr-now{font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:22px;letter-spacing:.01em;display:block}
.ta .pr-now i{display:none}
.ta .pr-off{font:700 14px/1 "Noto Sans JP",sans-serif;background:#E8762E;color:#1F2229;border-radius:4px;padding:5px 8px;white-space:nowrap;justify-self:end}
@media(max-width:620px){.ta .pr-r{grid-template-columns:1fr auto auto}.ta .pr-r .pr-n{grid-column:1/-1}}
.ta .pr-r>span{text-align:left;min-width:0}
.ta .pr-r>.pr-off{text-align:center}
@media(max-width:620px){
  .ta .pr-r{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .ta .pr-r .pr-n{grid-column:1/-1}
  .ta .pr-was{grid-column:1;grid-row:2}
  .ta .pr-now{grid-column:1;grid-row:3;font-size:22px}
  .ta .pr-off{grid-column:2;grid-row:3;align-self:center}
}
.ta .pr-now{white-space:nowrap}
@media(min-width:621px){.ta .pr-r,.ta .pr-hd{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 104px}}
/* 2026-10-29 「6割」は小さく、数字の右下に添える */
.ta .pr-r,.ta .pr-hd{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)!important}
.ta .pr-hd span:last-child{grid-column:auto}
.ta .pr-now .pr-off{display:inline-block;vertical-align:-2px;margin-left:4px;font:700 12px/1 "Noto Sans JP",sans-serif;background:#E8762E;color:#1F2229;border-radius:3px;padding:3px 5px;letter-spacing:0}
@media(max-width:620px){.ta .pr-r{grid-template-columns:minmax(0,1fr)!important}.ta .pr-was,.ta .pr-now{grid-column:1}}
.ta #lp-colorsim img.cs-vid{aspect-ratio:16/9}