/* FLEXVIT JAPAN / video guide product pages / 2026-10-21 */
:root{--orange:#f15b32;--ink:#15232c;--dark:#0c1217;--muted:#62707d;--line:#e5e9ec;--soft:#f4f6f7;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;line-height:1.78}
a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e95019;outline-offset:3px}
img{display:block;max-width:100%}
.wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.site-header{background:#0b0f13;color:#fff;border-bottom:1px solid #303b44}.site-head-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.site-logo img{width:162px;height:auto}.site-links{display:flex;flex-wrap:wrap;align-items:center;gap:23px;font-weight:800;font-size:12px}.site-links a:hover,.site-links a[aria-current]{color:#ff9670}
.eyebrow{font-weight:900;letter-spacing:.16em;font-size:12px;color:#ff8660}
.hero{background:#121920;color:#fff;position:relative;overflow:hidden}.hero:after{content:'';position:absolute;border:1px solid #47515b;border-radius:100%;width:650px;height:650px;right:-220px;top:-320px;opacity:.3;box-shadow:0 0 0 110px #fff1,0 0 0 220px #fff1;pointer-events:none}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 45%;gap:38px;align-items:center;min-height:440px;padding-block:42px 55px}
.crumb{font-size:12px;color:#aeb7bf;margin-bottom:43px}.crumb a:hover{color:#fff}
.hero h1{font-size:clamp(65px,8vw,110px);line-height:.95;letter-spacing:-.065em;margin:10px 0 23px;font-weight:950}.hero h1 span{color:var(--orange)}
.hero-lead{font-weight:800;font-size:clamp(17px,2vw,23px);line-height:1.55;margin:0 0 14px}.hero-desc{color:#bcc5cb;font-size:14px;max-width:540px;margin:0 0 24px}
.hero-stats{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.stat{border:1px solid #3d4852;padding:9px 16px;border-radius:12px;min-width:110px}.stat strong{font-size:22px;line-height:1.2;display:block}.stat span{font-size:10px;letter-spacing:.08em;color:#aeb6bc;display:block}
.hero-image{height:365px;position:relative;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:#eef0f0;border:1px solid #384149;box-shadow:0 25px 80px #0007}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-image .photo-credit{position:absolute;bottom:12px;right:14px;background:#0d1822cc;color:#fff;font-size:10px;border-radius:999px;padding:4px 11px}
.bands-wrap{background:white;box-shadow:0 4px 20px #00000006;position:sticky;top:0;z-index:18;border-bottom:1px solid var(--line)}.bands-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:12px 0}.bands-nav a{font-size:13px;font-weight:900;text-align:center;border-radius:9px;padding:10px 4px;color:#44515c;transition:background .2s}.bands-nav a:hover{background:#f0f2f4}.bands-nav a[aria-current='page']{background:#111c24;color:white}.bands-nav a small{font-size:9px;font-weight:600;display:block;letter-spacing:.06em;opacity:.7;line-height:1.2}
.main{padding:55px 0 87px}.overview{display:grid;grid-template-columns:1.2fr .8fr;align-items:stretch;gap:20px;margin-bottom:57px}.overview-card{border:1px solid var(--line);border-radius:16px;padding:22px 25px;background:#fbfbfc}.overview-card h2{font-size:17px;line-height:1.3;margin:5px 0 10px}.overview-card p{font-size:13px;line-height:1.9;color:#5b6570;margin:0}.overview-card .plain-link{font-size:12px;font-weight:800;color:#cf4924;display:inline-block;margin-top:8px}.overview-card .tiny{font-size:12px;color:#6e7378;line-height:1.65}.overview-card--dark{background:#161e25;color:white;border-color:#161e25}.overview-card--dark h2{color:white}.overview-card--dark p{color:#c8d0d6}.overview-card--dark .plain-link{color:#ff8d68}
.section{margin-top:66px;scroll-margin-top:115px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:17px}.section-label{color:#e65324;font-size:12px;font-weight:900;letter-spacing:.14em}.section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.04em;margin:7px 0}.section-head h2 em{font-style:normal;color:var(--orange)}.section-head p{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.75}.section-count{font-size:13px;font-weight:850;color:#344755;white-space:nowrap;border:1px solid #e3e6ea;border-radius:999px;padding:4px 12px}
.filterbar{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:1.6fr .8fr auto;gap:12px;align-items:center;margin-bottom:24px;background:#f9fafb}.filterbar input,.filterbar select{background:white;border:1px solid #d7dfe4;border-radius:10px;height:43px;padding:8px 13px;width:100%;min-width:0;font-size:13px;color:#273541}.filterbar button,.action-print{appearance:none;border:0;background:#111d26;color:white;font-weight:850;border-radius:10px;padding:10px 16px;cursor:pointer;min-height:43px}.action-print{background:#ec5629}.action-print:hover,.filterbar button:hover{filter:brightness(.93)}.filters-summary{font-size:12px;color:#67717a;min-height:20px;margin-bottom:17px}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.video-card{display:flex;flex-direction:column;min-width:0;background:white;border:1px solid #e2e7eb;border-radius:13px;overflow:hidden;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 9px #111a2207}.video-card:hover{transform:translateY(-2px);box-shadow:0 13px 28px #1c2a3817}.video-visual{aspect-ratio:16/9;display:block;position:relative;background:#e1e5e8;overflow:hidden}.video-visual img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .2s}.video-card:hover img{transform:scale(1.035)}.video-play{position:absolute;left:12px;bottom:12px;background:#e95020;color:white;font-size:11px;line-height:1;padding:9px 12px;border-radius:20px;font-weight:850;box-shadow:0 4px 12px #0005}.video-source{position:absolute;top:9px;left:9px;background:#0f1820dd;border-radius:5px;color:#fff;font-size:9px;font-weight:900;padding:4px 7px;letter-spacing:.07em}.video-source--another{background:#1b5061}.video-body{flex:1;display:flex;flex-direction:column;padding:14px}.video-cat{font-size:10px;color:#d5522b;font-weight:900;letter-spacing:.12em}.video-title{font-size:15px;font-weight:900;line-height:1.45;margin:7px 0 4px;letter-spacing:-.02em}.video-en{color:#5c6670;font-size:11px;font-weight:750;line-height:1.5}.video-body p{color:#596571;font-size:12px;line-height:1.7;margin:9px 0 0}.source-line{margin-top:auto;border-top:1px solid #edf0f2;padding-top:9px;font-size:10px;font-weight:750;color:#71808b}.source-line a{color:#d8512c}.video-note{font-size:10px!important;color:#845638!important;background:#fff7ee;padding:7px;border-radius:6px}
.empty-state{padding:34px 26px;background:#f6f8f9;border-radius:15px;border:1px dashed #c8d1d8}.empty-state strong{font-size:18px;display:block}.empty-state p{font-size:13px;color:#61717c;max-width:710px;margin:6px 0 0}.empty-state a{color:#d74f28;font-weight:800}
.use-guide{padding-top:5px}.use-guide__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.use-card{display:grid;grid-template-columns:38% 1fr;overflow:hidden;min-height:165px;border:1px solid var(--line);border-radius:14px;background:#fafbfc}.use-card__media{background:#f2f2f2;min-height:165px}.use-card__media img{width:100%;height:100%;object-fit:cover}.use-card__text{padding:20px;display:flex;flex-direction:column;justify-content:center}.use-card__text .tag{font-size:10px;font-weight:850;letter-spacing:.13em;color:#d94e26}.use-card__text h3{font-size:16px;margin:3px 0 7px}.use-card__text p{margin:0;font-size:12px;color:#566575}.use-card--noimage{grid-template-columns:1fr}.note-strip{border-left:4px solid var(--orange);background:#fcf7f4;margin:20px 0 0;padding:15px 20px;font-size:12px;color:#765a48;line-height:1.8}
.end-links{margin-top:65px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#121d26;color:white;padding:24px 28px;border-radius:16px}.end-links strong{font-size:20px;display:block}.end-links p{font-size:12px;color:#b6c3cc;margin:2px 0}.end-links a{font-size:12px;border:1px solid #5b6268;border-radius:99px;padding:10px 15px;white-space:nowrap;font-weight:800}.end-links a:hover{background:#fff2}
.print-area{display:none}.foot-spacer{height:0}
@media(max-width:980px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-inner{min-height:385px}.hero-image{height:320px}.use-guide__grid{grid-template-columns:1fr}}
@media(max-width:700px){.wrap{width:calc(100% - 28px)}.hero-inner{grid-template-columns:1fr;gap:18px;padding-top:25px;padding-bottom:34px}.hero-image{height:235px;order:1}.hero-copy{order:2}.crumb{margin-bottom:24px}.hero h1{font-size:66px}.site-head-inner{min-height:66px}.site-logo img{width:135px}.site-links{gap:12px;font-size:11px}.site-links a.hide-mobile{display:none}.bands-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.bands-wrap{position:static}.overview{grid-template-columns:1fr;gap:10px}.main{padding-top:32px}.section{margin-top:46px}.filterbar{grid-template-columns:1fr 1fr}.filterbar input{grid-column:1/-1}.filterbar button{grid-column:auto}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.video-title{font-size:13px}.video-body{padding:10px}.video-body p{font-size:11px}.video-en{font-size:10px}.end-links{align-items:flex-start;flex-direction:column}}
@media(max-width:420px){.video-grid{grid-template-columns:1fr}.hero h1{font-size:58px}.use-card{grid-template-columns:34% 1fr}.use-card__text{padding:13px}.use-card__text h3{font-size:14px}}
/* Print/PDF uses an 8-video landscape A4 page, matching the MINI guide format. */
@page{size:A4 landscape;margin:0}
@media print{
  html,body{background:#fff!important;width:297mm!important;color:#15232c!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page-shell,.fv-site-footer{display:none!important}.print-area{display:block!important}
  .print-sheet{width:297mm;height:210mm;position:relative;overflow:hidden;padding:9mm 10mm 7mm;background:white;break-after:page;page-break-after:always;box-sizing:border-box}
  .print-sheet:last-child{break-after:auto;page-break-after:auto}
  .print-header{height:27mm;border-bottom:1px solid #dce1e5;display:flex;gap:6mm;align-items:center;padding-bottom:4mm}
  .print-logo{width:58mm;flex:0 0 58mm}.print-logo img{width:100%;max-height:20mm;object-fit:contain}
  .print-heading{flex:1}.print-heading .print-eyebrow{font-size:8pt;color:#e95428;letter-spacing:.12em;font-weight:800}.print-heading h2{font-size:20pt;margin:0;line-height:1.2;letter-spacing:-.02em}.print-heading h2 em{font-style:normal;color:#e95428}.print-subtitle{font-size:7.3pt;color:#697582;margin:2mm 0 0}.print-right{font-size:7pt;text-align:right;color:#495864;font-weight:700}
  .print-intro{height:16mm;display:flex;align-items:center;justify-content:space-between;gap:7mm;font-size:8pt;line-height:1.5;color:#445361}
  .print-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:3.3mm;height:132mm;margin-top:2mm}
  .print-card{border:1px solid #e0e5e8;border-radius:2mm;overflow:hidden;display:flex;flex-direction:column;min-width:0;break-inside:avoid}
  .print-card-top{display:flex;align-items:center;justify-content:space-between;background:#f6f7f8;padding:1mm 2mm;font-size:6pt;line-height:1.25;font-weight:850;color:#d9512c}
  .print-card-visual{height:34mm;background:#e8ebee;overflow:hidden;position:relative}.print-card-visual img{width:100%;height:100%;object-fit:contain}
  .print-card-visual span{position:absolute;right:2mm;bottom:1mm;color:white;background:#e95428;font-size:5.5pt;font-weight:850;padding:1mm 2mm;border-radius:1mm}
  .print-card-content{padding:1.5mm 2mm 1mm;flex:1;overflow:hidden}.print-card-content h3{font-size:8pt;line-height:1.25;margin:0 0 1mm}.print-card-content .en{font-size:6pt;color:#566470;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.print-card-content p{font-size:6.3pt;line-height:1.45;margin:2mm 0 0;color:#4d5a63}
  .print-footer{position:absolute;left:10mm;right:10mm;bottom:6mm;border-top:1px solid #dce1e5;height:7mm;display:flex;justify-content:space-between;align-items:end;font-size:6pt;color:#687580}
  .print-empty{font-size:13pt;padding:20mm;text-align:center;background:#f7f8f9;border:1px solid #dde3e6;border-radius:3mm}
}