:root{
  color-scheme:light;
  --blue:#0d5efd;
  --blue-dark:#172840;
  --sky:#eaf4ff;
  --ink:#172840;
  --muted:#5e6f84;
  --line:#d7e1ed;
  --surface:#fff;
  --canvas:#f4f8fc;
  --phx:#f2b514;
  --dl:#0d8a79;
  --vd:#6c55d9;
  --bull:#d44848;
  --shadow:0 16px 42px rgba(23,40,64,.10);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-size:16px;line-height:1.65}
a{color:inherit}
button,select,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid rgba(13,94,253,.45);outline-offset:3px}
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.header-inner{position:relative;width:min(1220px,calc(100% - 32px));min-height:66px;margin:auto;display:flex;align-items:center;gap:22px}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--blue-dark);font-weight:900;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--blue);color:#fff;font-size:13px;box-shadow:0 6px 16px rgba(13,94,253,.22)}
.header-nav{display:flex;align-items:center;gap:17px;margin-left:auto;color:#475970;font-size:13px;font-weight:800}
.header-nav a{text-decoration:none;white-space:nowrap}
.header-nav a:hover,.header-nav a:focus-visible{color:var(--blue)}
.menu-button{display:none;border:0;background:transparent;color:var(--blue-dark);font-weight:900;padding:10px}
.language-switch{display:flex;align-items:center;padding:3px;border:1px solid #cbd8e7;border-radius:10px;background:#fff}
.language-switch a{display:block;border:0;border-radius:7px;background:transparent;color:#5e6f84;padding:5px 7px;font-size:11px;font-weight:800;text-decoration:none}
.language-switch a.is-active{background:var(--blue);color:#fff}
main{width:min(1180px,calc(100% - 32px));margin:auto;padding:34px 0 72px}
.intro{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.intro>div{min-width:0}
.eyebrow,.section-kicker{margin:0 0 5px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.11em}
h1{margin:0;font-size:clamp(1.75rem,3.6vw,2.65rem);line-height:1.2;letter-spacing:-.025em}
.title-supplement{display:inline-block;max-width:100%;padding-inline-start:.15em;font-size:.68em;line-height:1.5;vertical-align:baseline}
.lead{max-width:790px;margin:10px 0 0;color:var(--muted)}
.notice-chip{flex:none;display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:8px 12px;border:1px solid #edd16c;border-radius:999px;background:#fff8db;color:#6d5100;font-size:13px;font-weight:900;white-space:nowrap}
.notice-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--phx)}
.comparator{overflow:hidden;border:1px solid #c9d8e9;border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.comparator-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:20px 22px 14px;background:linear-gradient(135deg,#edf5ff,#fff 70%)}
.comparator-title h2,.section-heading h2{margin:0;font-size:clamp(1.35rem,2.5vw,1.8rem);line-height:1.35}
.comparator-title>p,.section-heading p{margin:0;color:var(--muted);font-size:13px}
.device-picker{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);align-items:end;gap:6px 12px;padding:12px 22px 18px;background:linear-gradient(135deg,#edf5ff,#fff 70%)}
.system-picker{display:grid;min-width:0;gap:6px;color:#5a6b80;font-size:13px;font-weight:900}
.system-reading{grid-row:2;margin:0;padding-inline:3px;color:var(--muted);font-size:.875rem;line-height:1.5;overflow-wrap:anywhere;align-self:start}
.source-reading{grid-column:1}
.target-reading{grid-column:3}
.system-reading[hidden]{display:none}
.system-picker select{width:100%;height:54px;appearance:none;border:2px solid var(--picker,#a7bdd8);border-radius:13px;background:#fff;padding:0 42px 0 15px;color:var(--blue-dark);font-size:17px;font-weight:900;outline:none;background-image:linear-gradient(45deg,transparent 50%,var(--picker,#59718f) 50%),linear-gradient(135deg,var(--picker,#59718f) 50%,transparent 50%);background-position:calc(100% - 18px) 23px,calc(100% - 12px) 23px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.system-picker select:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--picker,#0d5efd) 16%,transparent)}
.source-picker{--picker:var(--phx)}
.target-picker{--picker:var(--dl)}
.swap-button{width:46px;height:46px;display:grid;place-items:center;justify-self:center;border:1px solid #acc1dd;border-radius:50%;background:#fff;color:var(--blue);font-size:22px;font-weight:900;box-shadow:0 5px 14px rgba(23,40,64,.10);transition:transform .18s ease,background .18s ease}
.swap-button:hover{transform:rotate(180deg);background:var(--sky)}
.rating-input{padding:14px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.rating-select-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rating-select-row label,.manual-label{color:#56687e;font-size:13px;font-weight:900}
.rating-select-row select{min-width:170px;height:45px;border:2px solid #9eb8db;border-radius:11px;background:#fff;padding:0 38px 0 13px;color:var(--blue-dark);font-size:17px;font-weight:900}
.rating-select-row p,.manual-row p{margin:0;color:var(--muted);font-size:13px}
.manual-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.manual-field{display:grid;gap:4px}
.manual-field input{width:132px;height:45px;border:2px solid #9eb8db;border-radius:11px;padding:0 12px;font-weight:900;font-variant-numeric:tabular-nums}
.comparison-result{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);min-height:310px}
.system-result{--system:#4e6a8a;position:relative;padding:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--system) 11%,white),#fff)}
.system-result::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--system)}
.system-result.target::before{inset:0 0 0 auto}
.system-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.system-name{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:900;letter-spacing:.02em}
.system-dot{width:11px;height:11px;border-radius:50%;background:var(--system);box-shadow:0 0 0 4px color-mix(in srgb,var(--system) 14%,transparent)}
.side-tag{padding:4px 8px;border:1px solid color-mix(in srgb,var(--system) 30%,white);border-radius:999px;background:#fff;color:var(--system);font-size:11px;font-weight:900}
.rating-hero{display:flex;align-items:flex-end;gap:12px;min-height:62px;margin-bottom:18px}
.rating-hero strong{font-size:clamp(2rem,4vw,3.35rem);line-height:1;letter-spacing:-.04em}
.flight-badge{display:inline-flex;align-items:center;justify-content:center;min-height:32px;margin-bottom:2px;padding:4px 11px;border-radius:8px;font-size:15px;font-weight:900}
.flight-set{display:inline-flex;align-items:center;justify-content:center;gap:4px;vertical-align:middle}
.flight-tone{background:var(--flight-bg,#334c6c);color:var(--flight-fg,#fff);box-shadow:inset 0 0 0 1px rgba(23,40,64,.1)}
.flight-divider{color:var(--muted);font-size:14px;font-weight:700}
.rating-sub{margin:-9px 0 17px;color:#64758a;font-size:13px}
.metric-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.result-metric{min-height:78px;padding:10px 11px;border:1px solid rgba(23,40,64,.11);border-radius:11px;background:rgba(255,255,255,.78)}
.result-metric span{display:block;color:#68798d;font-size:12px;font-weight:900}
.result-metric b{display:block;margin-top:3px;font-size:16px;line-height:1.35}
.result-metric small{display:block;margin-top:3px;color:#6d7e91;font-size:11px;line-height:1.35}
.compare-axis{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-inline:1px dashed #c8d6e6;background:#fff;color:var(--blue)}
.compare-axis strong{font-size:25px}
.compare-axis span{writing-mode:vertical-rl;color:#6a7b90;font-size:11px;font-weight:900;letter-spacing:.08em}
.comparison-note{margin:0;padding:11px 20px;border-top:1px solid var(--line);background:#f9fbfe;color:#607187;font-size:13px;text-align:center}
.section{margin-top:52px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.section-heading>div>p:last-child{margin-top:4px}
.rule-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rule-card{--system:#4e6a8a;overflow:hidden;border:1px solid #d1deeb;border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(23,40,64,.05)}
.rule-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px;background:color-mix(in srgb,var(--system) 10%,white);border-bottom:1px solid color-mix(in srgb,var(--system) 22%,white)}
.rule-card-head h3{display:flex;align-items:center;gap:9px;margin:0;font-size:18px}
.rule-badge{padding:5px 9px;border-radius:999px;background:var(--system);color:#fff;font-size:11px;font-weight:900}
.rule-body{padding:17px 18px}
.rule-summary{margin:0 0 13px;color:#33475f;font-weight:700}
.rule-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.rule-list li{position:relative;padding-left:19px;color:#5a6c82;font-size:14px}
.rule-list li::before{content:"✓";position:absolute;left:0;color:var(--system);font-weight:900}
.rule-link{display:inline-flex;margin-top:15px;color:var(--system);font-size:13px;font-weight:900;text-decoration:none}
.rule-link:hover{text-decoration:underline}
.table-heading{align-items:flex-end}
.table-shell{overflow:auto;max-height:70vh;border:1px solid #cbd8e8;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(23,40,64,.06);overscroll-behavior:contain}
table{width:100%;min-width:980px;border-collapse:separate;border-spacing:0;text-align:center;font-variant-numeric:tabular-nums}
th,td{padding:10px 9px;border-right:1px solid #dce5ef;border-bottom:1px solid #dce5ef;font-size:14px;white-space:nowrap}
th:last-child,td:last-child{border-right:0}
thead{position:sticky;top:0;z-index:4}
thead th{background:#edf4fc;color:#42546b;font-size:13px;font-weight:900}
thead tr:first-child th{font-size:14px}
.table-system-name{display:inline-flex;max-width:100%;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 10px;white-space:normal}
.table-system-name small{color:#4c5f73;font-size:.8125rem;font-weight:600;overflow-wrap:anywhere}
.source-group{background:color-mix(in srgb,var(--source-color,#f2b514) 20%,white)!important;color:#26394f!important}
.target-group{background:color-mix(in srgb,var(--target-color,#0d8a79) 18%,white)!important;color:#26394f!important}
.approx-head{width:42px;background:var(--blue-dark)!important;color:#fff!important}
tbody tr:nth-child(even) td{background:#f9fbfe}
tbody tr:hover td{background:#edf6ff}
.rt-cell{font-size:16px;font-weight:900}
.table-header-note{display:block;margin-top:3px;font-size:.75rem;font-weight:600}
.table-rating{display:block;margin-bottom:4px;font-size:1rem;line-height:1.4}
.table-metric-line{display:block;font-size:.875rem;line-height:1.65}
.table-metric-line small{color:var(--muted);font-size:.75rem}
.cell-flight{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:3px 7px;border-radius:7px;font-weight:900}
.flight-set:has(.flight-divider) .cell-flight{min-width:34px}
.none-cell{color:#7b899a;font-style:italic}
.mobile-list{display:none;gap:12px}
.mobile-card{overflow:hidden;border:1px solid #cad8e8;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(23,40,64,.06)}
.mobile-card-head{display:grid;grid-template-columns:1fr 40px 1fr}
.mobile-card-side{min-width:0;padding:13px 14px;background:color-mix(in srgb,var(--system) 11%,white)}
.mobile-card-side:last-child{text-align:right}
.mobile-card-side small{display:block;color:#5e6f84;font-size:.75rem;font-weight:900}
.mobile-card-side strong{font-size:1.375rem;line-height:1.35}
.mobile-flight-row{margin-top:4px}
.mobile-flight{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:2px 7px;border-radius:6px;font-size:.875rem;font-weight:900}
.mobile-card-axis{display:grid;place-items:center;border-inline:1px dashed #cbd8e7;color:var(--blue);font-weight:900}
.mobile-card-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.mobile-metric-cell{min-width:0;padding:0 12px}
.mobile-metric-source{grid-column:1}
.mobile-metric-target{grid-column:2;text-align:right;border-left:1px solid var(--line)}
.mobile-metric-01{grid-row:1;padding-top:11px;padding-bottom:8px}
.mobile-metric-cricket{grid-row:2;padding-top:8px;padding-bottom:11px;border-top:1px solid #e1e5eb}
.mobile-metric-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .25rem;line-height:1.6}
.mobile-metric-target .mobile-metric-line{justify-content:flex-end}
.mobile-metric-value{max-width:100%;color:var(--ink);font-size:.9375rem;overflow-wrap:anywhere}
.mobile-metric-unit{color:var(--muted);font-size:.75rem;font-weight:600;white-space:nowrap}
.mobile-metric-reference{display:block;color:var(--muted);font-size:.9375rem;overflow-wrap:anywhere}
.mobile-metric-reference .mobile-metric-value{color:var(--muted);font-weight:600}
.mobile-reference-amount{display:block;max-width:100%;overflow-wrap:anywhere}
.mobile-stats-note{display:block;max-width:100%;margin:2px 0 0;color:var(--muted);font-size:.75rem;line-height:1.35;text-align:inherit}
.empty-table{padding:26px;border:1px solid #d2deeb;border-radius:15px;background:#fff;color:#5d6e83;text-align:center}
.method-note{margin:12px 2px 0;color:#64758a;font-size:13px}
.sources-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:16px}
.source-card{--system:#4e6a8a;display:flex;flex-direction:column;min-width:0;padding:22px;border:1px solid #d3deea;border-top:4px solid var(--system);border-radius:15px;background:#fff;box-shadow:0 6px 20px rgba(23,40,64,.05)}
.source-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.source-card .source-kind{margin:0;color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.035em}
.source-status{padding:3px 9px;border:1px solid color-mix(in srgb,var(--system) 35%,white);border-radius:6px;background:color-mix(in srgb,var(--system) 8%,white);color:var(--ink);font-size:.75rem;font-weight:700}
.source-card h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;margin:0;font-size:18px;overflow-wrap:anywhere}
.system-reading-inline{color:var(--muted);font-size:.875rem;font-weight:500;line-height:1.5}
.source-card .source-summary{margin:8px 0 16px;color:var(--muted);font-size:1rem}
.source-details{display:grid;gap:14px;margin:0 0 22px;padding-top:16px;border-top:1px solid var(--line)}
.source-details dt{margin-bottom:4px;font-size:.875rem;font-weight:800}
.source-details dd{margin:0;color:var(--muted);font-size:1rem;line-height:1.7;overflow-wrap:anywhere}
.source-card a{align-self:flex-start;margin-top:auto;color:var(--ink);font-size:.875rem;font-weight:800;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--system);text-decoration-thickness:2px}
.source-card a:hover{text-decoration:underline}
.ad-slot{margin:36px 0;padding:12px 16px;border-block:1px solid var(--line);text-align:center;background:#f8fbfe}
.ad-label{margin:0 0 8px;color:var(--muted);font-size:.75rem}
.ad-slot-content{width:100%;min-height:90px;margin:auto}
.ad-slot+.section{margin-top:32px}
.disclaimer{margin-top:30px;padding:16px 18px;border:1px solid #d6e0eb;border-radius:13px;background:#eef5fd;color:#53657b}
.disclaimer strong{color:var(--blue-dark)}
.disclaimer p{margin:3px 0 0;font-size:13px}
.site-footer{border-top:1px solid #d6e0eb;background:#fff}
.footer-inner{width:min(1180px,calc(100% - 32px));margin:auto;padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#63748a;font-size:13px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:980px){
  .header-nav{display:none}
  .menu-button{display:block;margin-left:auto}
  .header-nav.is-open{position:absolute;top:66px;left:0;right:0;display:grid;gap:0;padding:8px 16px 14px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(23,40,64,.10)}
  .header-nav.is-open a{padding:10px 8px}
  .language-switch{margin-left:0}
  .comparison-result{grid-template-columns:1fr 54px 1fr}
  .system-result{padding:20px 17px}
}
@media(max-width:720px){
  .header-inner,main,.footer-inner{width:min(100% - 24px,1180px)}
  .header-inner{min-height:62px;gap:8px}
  .brand span:last-child{display:none}
  .menu-button{margin-left:0}
  .language-switch{margin-left:auto;max-width:240px;overflow:auto}
  .language-switch a{padding:5px 6px}
  main{padding-top:22px}
  .intro{display:block}
  .lead{font-size:15px}
  .notice-chip{margin-top:13px}
  .comparator{border-radius:17px}
  .comparator-title{display:block;padding:16px 15px 10px}
  .comparator-title>p{margin-top:5px}
  .device-picker{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:6px 7px;padding:10px 15px 15px}
  .system-picker span{font-size:11px}
  .system-picker select{height:49px;padding-left:10px;padding-right:24px;font-size:14px;background-position:calc(100% - 15px) 21px,calc(100% - 10px) 21px}
  .swap-button{width:38px;height:38px;font-size:18px}
  .rating-input{padding:12px 15px}
  .rating-select-row{display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
  .rating-select-row select{min-width:0;width:100%}
  .rating-select-row p{grid-column:1/-1}
  .manual-row{display:grid;grid-template-columns:1fr 1fr}
  .manual-field input{width:100%}
  .manual-row p{grid-column:1/-1}
  .comparison-result{grid-template-columns:1fr 32px 1fr;min-height:0}
  .system-result{padding:16px 11px}
  .system-result::before{width:4px}
  .system-top{align-items:flex-start;margin-bottom:9px}
  .system-name{font-size:11px;line-height:1.3}
  .side-tag{display:none}
  .rating-hero{display:block;min-height:76px;margin-bottom:10px}
  .rating-hero strong{display:block;font-size:26px;line-height:1.15}
  .flight-badge{min-height:25px;margin-top:6px;padding:2px 7px;font-size:12px}
  .rating-sub{min-height:38px;margin:-3px 0 9px;font-size:11px;line-height:1.4}
  .metric-pair{grid-template-columns:1fr;gap:6px}
  .result-metric{min-height:67px;padding:7px}
  .result-metric span{font-size:10px}
  .result-metric b{font-size:12px}
  .result-metric small{font-size:10px}
  .compare-axis strong{font-size:18px}
  .compare-axis span{font-size:9px}
  .comparison-note{padding:9px 12px;text-align:left;font-size:12px;line-height:1.5}
  .section{margin-top:40px}
  .section-heading{display:block}
  .rule-compare,.sources-grid{grid-template-columns:1fr}
  .sources-grid{grid-auto-rows:auto}
  .source-card{padding:18px}
  .ad-slot{padding-inline:0;margin-block:30px}
  .ad-slot-content{min-height:100px}
  .rule-card-head{padding:14px}
  .rule-body{padding:14px}
  .table-shell{display:none}
  .mobile-list{display:grid}
  .footer-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:390px){
  .language-switch a{font-size:10px;padding:5px}
  .device-picker{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}
  .swap-button{width:34px;height:34px}
  .system-picker select{font-size:13px}
  .system-result{padding-inline:9px}
  .rating-hero strong{font-size:23px}
}
@media print{
  .site-header,.intro,.comparator,.rule-compare,.sources-grid,.disclaimer,.site-footer,.ad-slot{display:none!important}
  body{background:#fff}
  main{width:100%;padding:0}
  .section{margin-top:10px}
  .table-shell{display:block;max-height:none;overflow:visible;border:0;box-shadow:none}
  table{min-width:0}
  th,td{padding:4px 3px;font-size:9px}
  .table-rating{font-size:11px}
  .table-metric-line{font-size:9px}
  .table-metric-line small,.table-header-note{font-size:8px}
  .flight-tone{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
