/* 宅配買取ネオプライス 新サイト（2026-10 テリー作成）
   スマホ優先・文字は画像にしない・表示を軽く */
:root{
  /* 色は 2026-10-17 近藤さんの決定「B 青×黄色」（前は紺 #1d3557 中心で「電話しにくい高級感」だった）。--navy は名前のまま明るい青 */
  --navy:#0b5cad; --navy-2:#1a6fc2; --accent:#e86f00; --accent-2:#c85d00;
  --line:#06c755; --ink:#1f2937; --sub:#5b6472; --bg:#ffffff; --bg-soft:#eef6ff;
  --border:#cfe2f6; --gold:#b8892d; --yellow:#ffe14d; --yellow-2:#ffc400; --radius:10px; --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Yu Gothic","Meiryo",sans-serif;color:var(--ink);background:var(--bg);line-height:1.8;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-2)}
a:hover{color:var(--accent-2)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.todo{background:#fff3b0;border:1px dashed #d4a800;padding:0 4px;border-radius:4px;font-weight:bold;color:#7a5b00}

/* ヘッダー */
.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--navy);line-height:1.2}
.logo b{font-size:20px;letter-spacing:.02em;white-space:nowrap}
.logo small{font-size:11px;color:var(--sub);white-space:nowrap}
.gnav{margin-left:auto;display:flex;gap:14px;font-size:14px}
.gnav a{text-decoration:none;color:var(--ink);font-weight:bold;white-space:nowrap}
.head-cta{display:flex;gap:8px;align-items:center}
.head-cta .btn{white-space:nowrap}
@media (max-width:1180px){.head-cta .tel{display:none}}
.tel{font-weight:bold;color:var(--navy);text-decoration:none;font-size:18px;white-space:nowrap}
.tel small{display:block;font-size:11px;color:var(--sub);font-weight:normal}
.menu-btn{display:none}
@media (max-width:860px){
  .gnav,.head-cta .tel{display:none}
  .site-header .wrap{min-height:56px}
  .logo b{font-size:17px}
}

/* ボタン */
.btn{display:inline-block;text-decoration:none;font-weight:bold;border-radius:999px;padding:12px 22px;text-align:center;line-height:1.3;border:0;cursor:pointer;font-size:16px}
.btn-kit{background:var(--accent);color:#fff}
.btn-kit:hover{background:var(--accent-2);color:#fff}
.btn-line{background:var(--line);color:#fff}
.btn-line:hover{filter:brightness(.95);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn small{display:block;font-size:12px;font-weight:normal}

/* スマホ下部の固定ボタン */
.sp-cta{display:none}
@media (max-width:860px){
  .sp-cta{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--border)}
  .sp-cta a{display:block;text-align:center;padding:8px 2px;font-size:12px;font-weight:bold;text-decoration:none;color:#fff}
  .sp-cta a span{display:block;font-size:15px}
  .sp-cta .c-tel{background:var(--navy)} .sp-cta .c-line{background:var(--line)} .sp-cta .c-kit{background:var(--accent)}
  body{padding-bottom:64px}
}

/* パンくず */
.crumbs{font-size:13px;color:var(--sub);padding:10px 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.crumbs li+li:before{content:"›";margin:0 6px;color:#aab}
.crumbs a{color:var(--sub)}

/* ヒーロー */
.hero{background:linear-gradient(135deg,#eef7ff 0%,#dcecfb 100%);color:#0b3d6e;padding:44px 0 40px}
.hero h1{font-size:30px;line-height:1.4;margin:0 0 12px}
.hero p.lead{font-size:17px;margin:0 0 20px;opacity:.95}
.hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.hero .badges li{background:var(--yellow);border:1px solid #f2c400;color:#3a2f00;font-weight:bold;border-radius:999px;padding:4px 12px;font-size:14px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:600px){.hero{padding:28px 0}.hero h1{font-size:23px}.hero p.lead{font-size:15px}}

/* 見出し・本文 */
main h1.page-title{font-size:26px;line-height:1.4;margin:8px 0 16px;color:var(--navy)}
main h2{font-size:22px;color:var(--navy);border-left:6px solid var(--yellow-2);padding-left:12px;margin:40px 0 16px;line-height:1.4}
main h3{font-size:18px;margin:28px 0 10px;color:var(--navy-2)}
.section{padding:8px 0 24px}
.soft{background:var(--bg-soft)}
.soft .section{padding:28px 0}
.lead-box{background:var(--bg-soft);border-radius:var(--radius);padding:16px 18px}
.note{font-size:14px;color:var(--sub)}
table.info{border-collapse:collapse;width:100%;font-size:15px}
table.info th,table.info td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
table.info th{background:var(--bg-soft);width:30%;white-space:nowrap}
@media (max-width:600px){table.info th{white-space:normal;width:34%}}

/* 3ステップ・流れ */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;counter-reset:st}
.steps li{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;position:relative}
.steps li:before{counter-increment:st;content:"STEP " counter(st);display:inline-block;background:var(--navy);color:#fff;font-size:12px;font-weight:bold;border-radius:999px;padding:2px 10px;margin-bottom:6px}
.steps h3{margin:4px 0 6px;font-size:17px}
.steps p{margin:0;font-size:14px;color:var(--sub)}

/* カード（品目・ブランド・実績） */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--accent)}
.card b{display:block;color:var(--navy);font-size:16px}
.card span{font-size:13px;color:var(--sub)}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
@media (max-width:600px){.results{grid-template-columns:1fr 1fr;gap:10px}.result .tx{padding:8px}.result .tx b{font-size:13px}.result .price{font-size:15px}}
.result{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink)}
.result .ph{aspect-ratio:1/1;background:#f1f3f6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.result .ph img{width:100%;height:100%;object-fit:contain}
.result .tx{padding:10px 12px;font-size:13px}
.result .tx b{display:block;font-size:14px;line-height:1.5;margin-bottom:4px;color:var(--ink)}
.result .price{color:var(--accent-2);font-weight:bold;font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.tags a{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;text-decoration:none;color:var(--ink);background:#fff}
.tags a.on,.tags a:hover{border-color:var(--navy);color:var(--navy);font-weight:bold}

/* 実績の個別ページ */
.result-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:700px){.result-detail{grid-template-columns:1fr}}
.result-detail .photos img{border:1px solid var(--border);border-radius:var(--radius);background:#f1f3f6;margin-bottom:10px}
.big-price{font-size:26px;font-weight:bold;color:var(--accent-2)}

/* よくある質問 */
.faq details{border:1px solid var(--border);border-radius:var(--radius);margin:0 0 10px;background:#fff}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:bold;list-style:none;position:relative;padding-left:44px}
.faq summary:before{content:"Q";position:absolute;left:14px;top:12px;background:var(--navy);color:#fff;width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;font-size:13px}
.faq details>div{padding:0 16px 14px 44px}

/* 申込ボックス */
.cta-box{background:var(--navy);color:#fff;border-radius:var(--radius);padding:24px;margin:36px 0;text-align:center}
.cta-box h2{color:#fff;border:0;padding:0;margin:0 0 8px;font-size:22px}
.cta-box p{margin:0 0 16px}
.cta-box .ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cta-box .tel-big{color:#fff;font-size:24px;font-weight:bold;text-decoration:none;display:block;margin-top:12px}

/* フォーム */
form.kit{display:grid;gap:14px;max-width:640px}
form.kit label{font-weight:bold;font-size:15px}
form.kit .req{background:var(--accent);color:#fff;font-size:11px;border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle}
form.kit input[type=text],form.kit input[type=email],form.kit input[type=tel],form.kit select,form.kit textarea{width:100%;font-size:16px;padding:10px;border:1px solid #b8c2cf;border-radius:8px;font-family:inherit}
form.kit fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
form.kit .row{display:flex;flex-wrap:wrap;gap:10px 18px;font-weight:normal}
.hp-field{position:absolute;left:-9999px}

/* 写真の仮枠 */
.photo-slot{background:repeating-linear-gradient(45deg,#eef1f5,#eef1f5 12px,#e4e8ee 12px,#e4e8ee 24px);border:2px dashed #b8c2cf;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:14px;aspect-ratio:4/3;text-align:center;padding:10px}

/* フッター */
.site-footer{background:#0b3d6e;color:#d6e6f7;margin-top:48px;padding:32px 0 24px;font-size:14px}
.site-footer a{color:#fff}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.site-footer h3{color:#fff;font-size:15px;margin:0 0 8px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 4px}
.site-footer .copy{margin-top:24px;font-size:12px;color:#b5cde6;text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.two{grid-template-columns:1fr}}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}
.pager a,.pager span{border:1px solid var(--border);border-radius:6px;padding:4px 10px;text-decoration:none;font-size:14px}
.pager span{background:var(--navy);color:#fff;border-color:var(--navy)}
.now-box{border:2px solid var(--accent);border-radius:var(--radius);padding:10px 16px;margin:12px 0;background:#fff8f0}
.now-box p{margin:0}
.result .now{display:block;font-size:13px;font-weight:bold;color:var(--accent-2)}
.table-scroll{overflow-x:auto}
.price-search{margin:18px 0 12px;padding:18px 20px;background:var(--bg-soft);border-radius:var(--radius)}
.price-search label{display:block;margin:0 0 10px;font-weight:bold;font-size:20px}
.ps-bar{display:flex;align-items:center;background:#fff;border:2px solid var(--accent);border-radius:999px;padding:4px 4px 4px 18px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ps-bar:focus-within{box-shadow:0 0 0 4px rgba(224,122,31,.25)}
.ps-bar svg{flex:none;color:#8a929e}
.ps-bar input{flex:1;min-width:0;font-size:20px;padding:12px 10px;border:0;outline:0;background:transparent}
.ps-bar button{flex:none;font-size:18px;font-weight:bold;color:#fff;background:var(--accent);border:0;border-radius:999px;padding:12px 26px;cursor:pointer}
.ps-bar button:hover{filter:brightness(.95)}
.price-search .note{display:block;margin:10px 0 0;font-size:16px;font-weight:bold}
@media (max-width:600px){.price-search{padding:14px}.price-search label{font-size:18px}.ps-bar{padding-left:14px}.ps-bar input{font-size:18px;padding:11px 8px}.ps-bar button{font-size:17px;padding:11px 18px}}
table.price-table tr[hidden]{display:none}
table.price-table{border-collapse:collapse;width:100%;font-size:15px}
table.price-table th,table.price-table td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
table.price-table th{background:var(--bg-soft)}
table.price-table td.num{white-space:nowrap}
table.price-table td.num b{color:var(--accent-2);font-size:17px}
@media (max-width:600px){table.price-table{font-size:14px}table.price-table th,table.price-table td{padding:8px}}
.chart{width:100%;max-width:640px;height:auto;display:block;margin:8px 0 14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
table.price-table td.up{color:#c0392b}
table.price-table td.down{color:#1d6fb8}
.result-detail .ctas{margin:12px 0}

/* お客様の声（2026-10-16） */
.voices{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.voices li{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;background:#fff;line-height:1.7}
.voices b{display:block;font-size:13px;color:var(--navy);margin-bottom:4px}

/* 出張買取（2026-10-16）：本文の中の札とボタン、ヒーローの白い枠ボタン */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;padding:0;list-style:none}
.badges li{background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:14px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.btn-ghost-w{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8)}
.btn-ghost-w:hover{background:rgba(255,255,255,.12);color:#fff}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 8px}
.ways a{display:block;border:2px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--ink);background:#fff}
.ways a.main{border-color:var(--accent);background:#fff8f1}
.ways b{display:block;font-size:18px;color:var(--navy);margin-bottom:4px}
.ways span{font-size:14px;color:var(--sub)}
@media (max-width:700px){.ways{grid-template-columns:1fr}}

/* 品目カードの写真（2026-10-16。当社の買取実績の写真） */
.card img,.card .noimg{display:block;width:100%;height:110px;object-fit:contain;background:#fff;margin:0 0 8px;border-radius:6px}
.card .noimg{background:linear-gradient(135deg,var(--bg-soft),#e8edf3)}
.card .ph-s{position:relative;display:block;margin:0 0 8px}
.card .ph-s img{object-fit:cover;margin:0}
.card .ph-s .img-note{color:#fff;font-size:11px}

/* 写真つきのヒーロー・ページの写真（2026-10-16。写真はAIで作ったイメージ） */
.hero-photo{background:linear-gradient(90deg,rgba(18,34,56,.88) 0%,rgba(18,34,56,.62) 55%,rgba(18,34,56,.25) 100%),var(--hero-img) center/cover no-repeat}
.page-visual{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius);margin:6px 0 14px}
@media (max-width:600px){.hero-photo{background:linear-gradient(180deg,rgba(18,34,56,.82),rgba(18,34,56,.7)),var(--hero-img) center/cover no-repeat}.page-visual{aspect-ratio:16/9}}

/* サイト名が長くなったので、ヘッダーがはみ出さないように（2026-10-16） */
.logo b{font-size:18px}
@media (max-width:1360px) and (min-width:1181px){.head-cta .btn{display:none}}
@media (max-width:1060px){.gnav{gap:10px;font-size:13px}}

/* 会社のロゴ（2026-10-17 タイプA）：ヘッダーはマーク＋サイト名の文字、フッターは白い台に横長のロゴ */
.logo{flex-direction:row;align-items:center;gap:8px}
.logo-mark{width:43px;height:36px;flex:none}
.logo-txt{display:flex;flex-direction:column}
@media (max-width:860px){.logo-mark{width:36px;height:30px}.logo{gap:6px}}
@media (max-width:1040px) and (min-width:861px){.head-cta .btn{display:none}}
.foot-logo{margin:0 0 10px}
.foot-logo small{display:block;font-size:12px;color:#b5cde6;margin-bottom:4px}
.foot-logo img{display:block;width:220px;height:auto;background:#fff;padding:8px 12px;border-radius:6px;box-sizing:content-box}
/* 宅配買取の流れのイラスト（2026-10-17 チャッピー部長の絵。近藤さんの決定） */
.steps-img{grid-template-columns:repeat(3,1fr)}
.steps-img li img{display:block;width:100%;height:auto;border-radius:8px;margin:4px 0 8px;background:#fffdf7}
@media (max-width:860px){.steps-img{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .steps-img{grid-template-columns:1fr}
  .steps-img li{display:grid;grid-template-columns:120px 1fr;column-gap:12px;align-items:start}
  .steps-img li:before{grid-column:1/-1;justify-self:start}
  .steps-img li img{grid-row:span 2;margin:4px 0 0}
}
.flow-mini{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:fm}
.flow-mini li{text-align:center;font-size:14px;color:var(--navy);position:relative;counter-increment:fm}
.flow-mini img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--border);margin-bottom:6px;background:#fffdf7}
.flow-mini b{display:block;font-size:15px}
.flow-mini b:before{content:counter(fm);display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;text-align:center;margin-right:5px;vertical-align:1px}
.flow-mini small{display:block;font-size:12.5px;color:var(--sub);line-height:1.5;margin-top:2px}
.flow-mini li+li:before{content:"›";position:absolute;left:-9px;top:28%;color:var(--sub);font-size:18px}
/* 3枚の列（トップの出張買取・店頭買取の流れ。2026-11-04） */
.flow-mini.fm3{grid-template-columns:repeat(3,1fr);max-width:760px}
/* スマホ：小さな絵を横に並べず、絵（左）と文（右）を縦に読む形に（2026-10-17 チャッピー部長の表示の注意） */
@media (max-width:700px){.flow-mini,.flow-mini.fm3{grid-template-columns:1fr;gap:10px}
.flow-mini li{display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto auto;column-gap:12px;text-align:left}
.flow-mini img{margin:0;grid-row:1 / span 2;align-self:center}.flow-mini b{font-size:16px;align-self:end}.flow-mini small{font-size:14px;align-self:start}
.flow-mini li+li:before{display:none}}
/* 選ばれる3つの理由・こんな状態でも・本人確認書類（2026-11-04） */
.reasons{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.reasons li{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 14px;text-align:center}
.reasons .num{display:block;font-size:30px;line-height:1.2;color:var(--accent);font-weight:800}
.reasons h3{margin:6px 0 6px;font-size:17px;color:var(--navy)}
.reasons p{margin:0;font-size:14px;line-height:1.7;text-align:left;color:var(--ink)}
.jotai,.id-docs{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.jotai li,.id-docs li{text-align:center;font-size:14px;line-height:1.5}
.jotai img,.id-docs img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--border);margin-bottom:6px;background:#fffdf7}
.jotai b,.id-docs b{display:block;color:var(--navy);font-size:14px}
.id-docs small{display:block;font-size:12px;color:var(--accent-2);line-height:1.5;margin-top:2px}
@media (max-width:900px){.jotai,.id-docs{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.reasons{grid-template-columns:1fr}.jotai,.id-docs{grid-template-columns:repeat(2,1fr)}}
.company-logo{margin:0 0 20px}
.company-logo img{width:260px;height:auto}

/* 写真をドローンのようにゆっくり動かす（2026-10-16 近藤さん「動いてない」→ 動かしてほしい）。動きを減らす設定の人には動かさない */
.hero-photo{position:relative;overflow:hidden;background:var(--navy)}
/* 2026-10-17 近藤さん「動いているのか分かりにくい」→ 決定：チャッピー部長の案「横にゆっくり流す」（1.12倍のまま、横に +3%→−3%、片道12秒）。
   止めるボタン（.hero-pause）つき。上の幕は色B（明るい水色、左が濃い）で、前の暗い紺の幕はやめた */
.hero-photo::before{content:'';position:absolute;inset:0;background:var(--hero-img) center/cover no-repeat;transform-origin:50% 50%;animation:hero-pan 12s ease-in-out infinite alternate;z-index:0}
.hero-photo.paused::before{animation-play-state:paused}
@keyframes hero-pan{from{transform:scale(1.12) translateX(3%)}to{transform:scale(1.12) translateX(-3%)}}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,247,255,.96) 0%,rgba(238,247,255,.88) 48%,rgba(238,247,255,.2) 100%);z-index:1}
.hero-photo .wrap{position:relative;z-index:2}
@media (max-width:600px){.hero-photo::after{background:linear-gradient(180deg,rgba(238,247,255,.94),rgba(238,247,255,.86))}}
.hero-pause{position:absolute;right:12px;bottom:10px;z-index:3;background:rgba(255,255,255,.85);color:#0b3d6e;border:1px solid #9cc7f0;border-radius:999px;padding:3px 12px;font-size:12px;cursor:pointer}
.hero-pause:focus-visible{outline:2px solid #0b5cad;outline-offset:2px}
@media (max-width:860px){.hero-photo{padding-bottom:54px}}
.page-visual{overflow:hidden;border-radius:var(--radius);aspect-ratio:16/7;margin:6px 0 14px}
.page-visual img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%;animation:drone-fly 22s ease-in-out infinite alternate}
@media (max-width:600px){.page-visual{aspect-ratio:16/9}}
@keyframes drone-fly{0%{transform:scale(1.03) translate(0,0)}100%{transform:scale(1.18) translate(-3%,-2%)}}
@media (prefers-reduced-motion:reduce){.hero-photo::before,.page-visual img{animation:none}.hero-pause{display:none}}
/* トップの途中の写真は動かさない（動く所は一番上の1か所。チャッピー部長の注意） */
.page-visual.still img{animation:none}

/* トップの右に当社の本物の買取写真（2026-10-17） */
.hero.has-items .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center}
.hero-items .cap{font-size:13px;color:#fff;opacity:.92;margin:0 0 8px;font-weight:bold}
.hero-items .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero-items a{display:block;background:#fff;border-radius:10px;overflow:hidden;aspect-ratio:1/1;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s}
.hero-items a:hover{transform:translateY(-3px)}
.hero-items img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:860px){.hero.has-items .wrap{grid-template-columns:1fr;gap:18px}.hero-items .grid{gap:6px}}
/* A案の「商品の枠」（2026-10-17 近藤さんの決定）：横長16:9の枠1つ。今は当社の買取写真（1枚目を大きく）、撮影できたら同じ枠を動画に */
.hero-media .frame{position:relative;aspect-ratio:16/9;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.3)}
.frame-tag{position:absolute;left:10px;top:10px;z-index:1;background:#ffd21f;color:#3a2f00;font-size:12px;font-weight:bold;padding:3px 9px;border-radius:999px}
.frame-photos{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:100%;padding:38px 10px 10px;box-sizing:border-box}
.frame-photos a{display:block;min-height:0;border-radius:8px;overflow:hidden;background:#fff;transition:transform .2s}
.frame-photos a:first-child{grid-row:1 / span 2}
.frame-photos a:hover{transform:scale(1.03)}
.frame-photos img{width:100%;height:100%;object-fit:contain;display:block}
.hero-media .cap{font-size:13px;color:#0b3d6e;margin:8px 2px 0}
.hero-media .cap a{color:var(--navy)}
.hero-media .frame{box-shadow:0 4px 16px rgba(11,92,173,.22)}
.frame-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.frame-pause{position:absolute;right:10px;bottom:10px;z-index:1;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.frame-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 枠に動画があるときは、背景の空撮を動かさない（動く所は1か所） */
.hero.has-video::before{animation:none}

/* スマホでは右上の「無料キット申込」を出さない（画面の下に同じボタンがあるため。サイト名が長くなってはみ出した 2026-10-17） */
@media (max-width:860px){.head-cta .btn{display:none}}

/* トップの組み直し（2026-10-17 チャッピー部長の案） */
.big-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 10px}
.big-card{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink)}
.big-card:hover{border-color:var(--accent)}
.big-card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft)}
.big-card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.big-card:hover .ph img{transform:scale(1.05)}
.big-card b{display:block;color:var(--navy);font-size:18px;margin:10px 12px 2px}
.big-card>span{display:block;font-size:13px;color:var(--sub);margin:0 12px 12px}
.img-note{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:1px 6px;border-radius:4px}
@media (max-width:860px){.big-cards{grid-template-columns:1fr 1fr;gap:10px}.big-card b{font-size:16px}}
/* 電話しやすくする言葉（2026-10-17 チャッピー部長の案、近藤さん「入れてください」）：ボタンの前のひとこと・ボタンの下の「通話料無料」と受付時間 */
.hero-ask{font-size:17px;font-weight:bold;color:#0b3d6e;margin:0 0 10px}
.hero-ask span{display:inline-block}
.hero-tel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:12px 0 0;font-size:14px;color:#0b3d6e}
.hero-tel a{font-size:22px;font-weight:bold;color:#0b3d6e;text-decoration:none;letter-spacing:.02em}
.hero-tel b{background:var(--yellow);color:#3a2f00;border:1px solid #f2c400;border-radius:4px;padding:0 8px;font-size:13px}
.hero-tel span{flex-basis:100%}
@media (max-width:600px){.hero-ask{font-size:16px}.hero-tel a{font-size:20px}}
.hero-links{font-size:14px;margin:12px 0 0;opacity:.95}
.hero-links a{color:var(--navy);margin-left:10px}
.hero h1{font-size:34px}
@media (max-width:600px){.hero h1{font-size:24px}}

/* 金・プラチナ・銀の今日の相場（2026-10-26 レオ次長。トップ。値段は /api/souba.php から） */
.souba{margin:40px 0}
.souba h2{margin-bottom:4px}
.souba-asof{margin:0 0 12px;font-size:14px;color:var(--sub)}
.souba-list{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.souba-list li{background:#fffaf0;border:1px solid #ead9b0;border-top:5px solid var(--gold);border-radius:var(--radius)}
.souba-list a{padding:14px 16px;display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;height:100%;box-sizing:border-box}
.souba-list a:hover{background:rgba(0,0,0,.03)}
.souba-list .more{font-size:13px;color:var(--navy);text-decoration:underline}
.souba-list li.platinum{border-top-color:#8f99a6;background:#f7f8fa;border-color:#d9dee5}
.souba-list li.silver{border-top-color:#b4bcc6;background:#fbfcfd;border-color:#e2e6eb}
.souba-list b{font-size:17px;color:var(--ink)}
.souba-list .yen{font-size:28px;font-weight:bold;color:var(--ink);line-height:1.3;font-variant-numeric:tabular-nums}
.souba-list .yen small{font-size:14px;margin-left:2px;font-weight:normal}
.souba-list .diff{font-size:15px;font-weight:bold;min-height:1.5em}
.souba-list .diff small{font-size:12px;color:var(--sub);font-weight:normal;margin-right:6px}
.souba-list .up{color:#c62828}
.souba-list .down{color:#1565c0}
.souba-list .flat{color:var(--sub)}
/* いちばん上の右の枠の相場（2026-10-30。2015年の買取品の代わり） */
/* 10/30 近藤さん「クリックできると思わせる作りに・もう少し大きく」：行ごとにボタンの形（影・丸い矢印・30日の小さなグラフ）、下に金色のボタン */
@media (min-width:861px){.hero.has-items .wrap:has(.hero-souba){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px}}
.hero-links a{white-space:nowrap}
.hs-card{background:#fff;border-radius:16px;padding:22px 22px 16px;box-shadow:0 4px 16px rgba(11,92,173,.22);color:var(--ink)}
.hero-motion .hs-card{box-shadow:0 20px 50px rgba(0,0,0,.45)}
.hs-title{margin:0 0 14px;font-size:19px;font-weight:bold;color:#071a33;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.hs-asof{font-size:13px;font-weight:normal;color:var(--sub)}
.hs-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hs-list a{display:grid;grid-template-columns:auto 1fr 92px 34px;grid-template-areas:"n y s g" "t d s g";align-items:center;column-gap:14px;row-gap:0;padding:12px 14px 12px 16px;border-radius:12px;background:#fffaf0;border:1px solid #ead9b0;border-left:6px solid var(--gold);box-shadow:0 2px 6px rgba(7,26,51,.08);color:inherit;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.hs-list a:hover,.hs-list a:focus-visible{transform:translateY(-2px);box-shadow:0 10px 22px rgba(7,26,51,.18);background:#fff3da}
.hs-list li.platinum a{background:#f4f6f8;border-color:#d9dee5;border-left-color:#8f99a6}
.hs-list li.silver a{background:#f8f9fb;border-color:#e2e6eb;border-left-color:#b4bcc6}
.hs-list li.platinum a:hover,.hs-list li.silver a:hover{background:#eceff3}
.hs-list b{grid-area:n;font-size:19px;color:var(--ink)}
.hs-list .sub{grid-area:t;font-size:12px;color:var(--navy);text-decoration:underline;white-space:nowrap}
.hs-list .yen{grid-area:y;font-size:32px;font-weight:bold;line-height:1.15;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hs-list .yen small{font-size:14px;font-weight:normal;margin-left:3px}
.hs-list .diff{grid-area:d;font-size:14px;font-weight:bold;text-align:right;white-space:nowrap}
.hs-list .diff small{font-size:12px;color:var(--sub);font-weight:normal;margin-right:4px}
.hs-list .up{color:#c62828}
.hs-list .down{color:#1565c0}
.hs-list .flat{color:var(--sub)}
.hs-list .spark{grid-area:s;height:40px}
.hs-list .spark svg{display:block;width:100%;height:100%;overflow:visible}
.hs-list .spark polyline{fill:none;stroke:#b8860b;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hs-list .spark polygon{fill:rgba(201,162,74,.18);stroke:none}
.hs-list li.platinum .spark polyline{stroke:#6b7684}.hs-list li.platinum .spark polygon{fill:rgba(107,118,132,.15)}
.hs-list li.silver .spark polyline{stroke:#8a939e}.hs-list li.silver .spark polygon{fill:rgba(138,147,158,.13)}
.hs-list .go{grid-area:g;width:34px;height:34px;border-radius:50%;background:#071a33;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;padding-bottom:2px;box-sizing:border-box;transition:background .2s,transform .2s}
.hs-list a:hover .go{background:var(--accent);transform:translateX(3px)}
.hs-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 0;padding:14px 16px;border-radius:999px;background:linear-gradient(90deg,#c9a24a,#e0bd66);color:#071a33;font-weight:bold;font-size:16px;text-decoration:none;box-shadow:0 4px 12px rgba(201,162,74,.35);transition:transform .2s,box-shadow .2s}
.hs-btn span{font-size:20px;transition:transform .2s}
.hs-btn:hover{color:#071a33;transform:translateY(-2px);box-shadow:0 10px 22px rgba(201,162,74,.45)}
.hs-btn:hover span{transform:translateX(4px)}
.hs-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--sub)}
@media (max-width:480px){.hs-card{padding:16px 12px 12px}.hs-title{font-size:17px}
.hs-list a{grid-template-columns:auto 1fr 56px 28px;column-gap:8px;padding:10px 10px 10px 12px}
.hs-list b{font-size:16px}.hs-list .yen{font-size:24px}.hs-list .yen small{font-size:12px}.hs-list .diff{font-size:13px}.hs-list .diff small{font-size:11px}
.hs-list .spark{height:30px}.hs-list .go{width:28px;height:28px;font-size:18px}.hs-btn{font-size:15px;padding:12px}}
@media (max-width:700px){.souba-list{grid-template-columns:1fr;gap:8px}.souba-list a{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px;padding:10px 14px}
.souba-list b{min-width:4.5em}.souba-list .yen{font-size:24px}.souba-list .diff{flex-basis:100%}.souba-list .more{flex-basis:100%}}

/* 金・プラチナ・銀の相場のページ（/souba/gold/ など。2026-10-26 レオ次長） */
.sp-now{background:#fffaf0;border:1px solid #ead9b0;border-top:6px solid var(--gold);border-radius:var(--radius);padding:18px 20px;margin:20px 0 8px}
.sp-now.platinum{border-top-color:#8f99a6;background:#f7f8fa;border-color:#d9dee5}
.sp-now.silver{border-top-color:#b4bcc6;background:#fbfcfd;border-color:#e2e6eb}
.sp-label{margin:0;font-weight:bold}
.sp-asof{margin:2px 0 0;font-size:14px;color:var(--sub)}
.sp-yen{margin:4px 0 0;font-size:44px;font-weight:bold;line-height:1.2;font-variant-numeric:tabular-nums}
.sp-yen small{font-size:18px;font-weight:normal;margin-left:4px}
.sp-diff{margin:2px 0 10px;font-size:17px;font-weight:bold;min-height:1.4em}
.sp-diff small{font-size:13px;color:var(--sub);font-weight:normal;margin-right:6px}
.sp-now .up,.sp-days .up{color:#c62828}.sp-now .down,.sp-days .down{color:#1565c0}.sp-now .flat,.sp-days .flat{color:var(--sub)}
.sp-others{list-style:none;margin:0;padding:10px 0 0;border-top:1px dashed #d8cfb8;display:flex;flex-wrap:wrap;gap:8px 20px}
.sp-others span{font-weight:bold;font-variant-numeric:tabular-nums}
.sp-grade td.num,.sp-days td.num{white-space:nowrap}
.sp-calc{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;background:#f7f8fa;border:1px solid #e2e6eb;border-radius:var(--radius);padding:14px 16px}
.sp-calc label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:bold}
.sp-calc select,.sp-calc input{font-size:17px;padding:8px 10px;border:1px solid #c5ccd6;border-radius:6px;background:#fff}
.sp-calc .w{display:flex;align-items:center;gap:6px;font-weight:normal}
.sp-calc input{width:7em}
.sp-out{margin:0;font-size:16px}.sp-out b{font-size:26px;font-variant-numeric:tabular-nums;margin:0 2px}
.sp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sp-tabs button{font-size:15px;padding:7px 16px;border:1px solid #c5ccd6;border-radius:999px;background:#fff;cursor:pointer}
.sp-tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sp-chart{border:1px solid #e2e6eb;border-radius:var(--radius);padding:8px;background:#fff}
.sp-svg{display:block;width:100%;height:auto}
.sp-svg .gr line{stroke:#e5e8ec}.sp-svg text{font-size:12px;fill:#5b6472}
@media (max-width:700px){.sp-yen{font-size:36px}.sp-svg text{font-size:16px}}
/* 相場の記事（2026-10-26 週1回の今の情勢） */
.sp-kiji{background:#fbfaf6;border:1px solid #ead9b0;border-left:6px solid var(--gold);border-radius:var(--radius);padding:4px 20px 14px;margin:28px 0}
.sp-kiji h2{margin-top:14px}
.sp-kiji-date{font-size:14px;color:var(--sub);margin:0 0 4px}
.sp-kiji-title{font-size:19px;font-weight:bold;margin:0 0 6px}
.sp-kiji h3{font-size:17px;margin:18px 0 6px}
.sp-kiji ul{padding-left:1.3em}
.sp-kiji-list li{margin:4px 0}
.kiji-src{font-size:13px;color:var(--sub);line-height:1.7}
.sp-kiji-nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 12px}
@media (max-width:640px){.sp-kiji{padding:2px 14px 12px}.sp-kiji-title{font-size:17px}}

/* ===== 動きのあるトップ（2026-10-30 レオ次長。近藤さんの OK：試作_動きのあるトップ の作り） =====
   トップだけ（body.top-motion）。「ふわっと」「ぼわっと」は JS が動いたとき（body.m-js）だけ。動きを減らす設定の人には動かさない */
body.top-motion{overflow-x:clip}
/* 画面の幅いっぱいの部品（100vw）はスクロールバーの幅だけ右へ出るので、本文の入れ物で切る（clip なので止まる写真はそのまま効く） */
.top-motion main{overflow-x:clip}
.m-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#c9a24a,var(--accent));z-index:70;pointer-events:none}
/* 1. いちばん上：写真がゆっくり切りかわり、見出しが1文字ずつ出る */
.hero-motion{position:relative;overflow:hidden;background:#071a33;color:#fff;min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);display:flex;align-items:center;padding:56px 0 64px}
.hero-motion>.wrap{position:relative;z-index:2;width:100%}
.m-slides{position:absolute;inset:0;z-index:0}
.m-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.m-slide.on{opacity:1}
.m-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 9s linear}
.m-slide.on img{transform:scale(1)}
.hero-motion::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,26,51,.92) 0%,rgba(7,26,51,.72) 50%,rgba(7,26,51,.35) 100%)}
.hero-motion .m-en{font-size:13px;letter-spacing:.4em;color:#e8cf8a;margin:0 0 10px}
.hero-motion h1{color:#fff;font-size:clamp(30px,3.4vw,42px);line-height:1.35;letter-spacing:.03em;margin:0 0 14px}
.hero-motion h1 .w{display:inline-block;white-space:nowrap}
.hero-motion h1 .ch{display:inline-block}
.hero-motion p.lead{color:#fff;opacity:1}
.hero-motion .hero-ask,.hero-motion .hero-tel,.hero-motion .hero-tel a{color:#fff}
.hero-motion .hero-links{color:#dbe7f5}
.hero-motion .hero-links a{color:#e8cf8a}
.hero-motion .hero-media .cap,.hero-motion .hero-media .cap a{color:#dbe7f5}
.hero-motion .hero-media .frame{box-shadow:0 20px 50px rgba(0,0,0,.45)}
.m-note{position:absolute;left:16px;bottom:10px;z-index:3;margin:0;font-size:11px;color:rgba(255,255,255,.7)}
.m-pause{position:absolute;right:12px;bottom:10px;z-index:3;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:3px 12px;font-size:12px;cursor:pointer}
.m-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.m-js .hero-motion h1 .ch{opacity:0;transform:translateY(.6em) rotate(6deg);filter:blur(6px);animation:m-ch .9s cubic-bezier(.2,.8,.2,1) forwards}
.m-js .hero-motion .m-en{opacity:0;animation:m-fade 1s .2s forwards}
.m-js .hero-motion .lead,.m-js .hero-motion .badges,.m-js .hero-motion .hero-ask,.m-js .hero-motion .ctas,.m-js .hero-motion .hero-tel,.m-js .hero-motion .hero-links,.m-js .hero-motion .hero-media{opacity:0;animation:m-fade 1s 1s forwards}
.m-js .hero-motion .badges{animation-delay:1.1s}.m-js .hero-motion .hero-ask{animation-delay:1.2s}.m-js .hero-motion .ctas{animation-delay:1.3s}
.m-js .hero-motion .hero-tel{animation-delay:1.4s}.m-js .hero-motion .hero-links{animation-delay:1.5s}.m-js .hero-motion .hero-media{animation-delay:1.2s}
@media (max-width:860px){
  .hero-motion{align-items:flex-start;padding:36px 0 52px}
  .hero-motion::after{background:linear-gradient(180deg,rgba(7,26,51,.8),rgba(7,26,51,.9))}
  .hero-motion h1{font-size:clamp(21px,5.8vw,34px)}
}
/* 2. 流れる英字の帯 */
.m-band{background:#071a33;color:#e8cf8a;overflow:hidden;white-space:nowrap;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.m-track{display:inline-block;animation:m-flow 32s linear infinite;font-size:clamp(18px,3vw,30px);font-weight:700;letter-spacing:.12em}
.m-track span{margin:0 .8em}
.m-track .dot{color:var(--accent)}
.m-paused .m-track{animation-play-state:paused}
/* 3. 奥の写真は止まったまま、手前のカードだけが流れる（position:sticky なので iPhone でも効く）
   写真の下に負の余白をつけると、区切りの終わりから写真が1画面ぶんはみ出すので、手前（m-fg）を上へ重ねる */
.m-stage{position:relative;background:#071a33;overflow-x:clip}
.m-stage .m-bg{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.m-stage .m-bg img{width:100%;height:100%;object-fit:cover}
.m-stage .m-bg::after{content:"";position:absolute;inset:0;background:rgba(7,26,51,.6)}
.m-stage .m-fg{position:relative;z-index:1;max-width:var(--max);margin:-100vh auto 0;margin-top:-100lvh;padding:24vh 16px 26vh}
.m-title{color:#fff;text-align:center;margin-bottom:20vh}
.m-title .m-en2{font-size:13px;letter-spacing:.4em;color:#e8cf8a}
.m-title h2{font-size:clamp(26px,4.6vw,48px);margin:.2em 0;line-height:1.3;color:#fff}
.m-glass{display:block;max-width:520px;margin:0 0 18vh;padding:26px 28px;border-radius:18px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.35);color:var(--ink);text-decoration:none}
.m-glass:last-child{margin-bottom:0}
.m-glass.r{margin-left:auto}
.m-glass:hover{color:var(--ink)}
.m-glass .no{font-size:44px;font-weight:800;line-height:1;color:#c9a24a;font-family:Georgia,serif}
.m-glass h3{margin:6px 0 8px;font-size:22px;color:#071a33}
.m-glass h3 small{font-size:15px;font-weight:bold;color:var(--sub)}
.m-glass p{margin:0 0 8px;color:var(--sub)}
.m-glass .more{color:var(--navy);font-weight:bold;font-size:15px}
.m-glass:hover .more{text-decoration:underline}
@media (max-width:640px){.m-glass,.m-glass.r{margin-left:0;margin-right:0;padding:22px}}
/* 4. 下へ見るほど横に動く大きな文字（画面の幅いっぱい） */
.m-big{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);padding:9vh 0 2vh;pointer-events:none}
.m-big p{margin:0;white-space:nowrap;font-size:clamp(52px,12vw,160px);font-weight:900;line-height:1.05;letter-spacing:.02em;will-change:transform}
.m-big .a{color:transparent;-webkit-text-stroke:1.5px var(--navy)}
.m-big .b{color:var(--navy);opacity:.08}
/* 5. 品目の写真に光が走る */
.big-card .ph::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);pointer-events:none}
.big-card.on .ph::after{animation:m-shine 1.4s .4s ease forwards}
/* 6. 2つめの止まった写真：言葉が1行ずつ出る（前からある 2列の .two と名前がかぶらないよう m-two） */
.m-stage.m-two{width:100vw;margin:48px 0 0 calc(50% - 50vw)}
.m-stage.m-two .m-fg{padding:34vh 16px 40vh;text-align:center}
.m-line{font-size:clamp(22px,4.4vw,46px);font-weight:800;margin:0 0 16vh;line-height:1.4;color:#fff}
.m-line:last-child{margin-bottom:0}
.m-line em{font-style:normal;color:#e8cf8a}
/* ふわっと出る（下から・左右から）・ぼわっと出る（ぼやけて大きく・字の間が広い → くっきり） */
.m-js .rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.m-js .rv.rv-l{transform:translateX(-60px)}
.m-js .rv.rv-r{transform:translateX(60px)}
.m-js .rv.on{opacity:1;transform:none}
.m-js .bw{opacity:0;filter:blur(24px);transform:scale(1.15);letter-spacing:.35em;transition:opacity 1.6s ease,filter 1.8s ease,transform 2s cubic-bezier(.2,.8,.2,1),letter-spacing 2s cubic-bezier(.2,.8,.2,1)}
.m-js .bw.on{opacity:1;filter:none;transform:none;letter-spacing:.02em}
@keyframes m-ch{to{opacity:1;transform:none;filter:none}}
@keyframes m-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes m-flow{to{transform:translateX(-50%)}}
@keyframes m-shine{to{left:130%}}
@media (prefers-reduced-motion:reduce){
  .m-slide,.m-slide img,.m-track,.big-card .ph::after{animation:none!important;transition:none!important}
  .m-slide img{transform:none}
  .m-pause{display:none}
}