@charset "utf-8";

/* 製品ページの共通デザイン（2026-09-23）。
 *
 * **ページに <style> を埋めない。** 埋めると、デザインを1行直すたびに
 * 26製品×12言語のページが全部書き換わり、差分が読めなくなる。
 * import.css から読むので、ページ側の変更は要らない。
 *
 *   .ks__*   ページの作り（script/rebuild_*.py が組む本文）
 *   .smc__*  カラー一覧（lib/color_chart.rb が組む生成物）
 */

/* ============ ページの作り ============ */
.ks{
  --ink:#101418; --sub:#5c6570; --line:#cfd5d8; --sea:#edf0f1;
  --night:#05090c; --glow:#8fe04a; --red:var(--color_red,#e0211a);
  color:var(--ink); line-height:1.9;
  /* **自前の地を持つ。** ページによっては背景が暗く、継ぐと本文が読めない
     （daybreak と monroegi は article に暗いグラデーションが敷かれていた） */
  background:#fff;
}
.ks *{box-sizing:border-box}
.ks__wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.ks__night{background:var(--night);color:#e8edef}
.ks__sea{background:var(--sea)}
.ks__band{margin:0}
/* **切り抜かない。** 帯の写真には文字が焼き込まれていることがあり、切ると途中で切れる */
.ks__band img{display:block;width:100%;height:auto}

/* 夜のヒーロー：名前と、暗がりで光っている写真 */
.ks__hero{display:grid;gap:30px;grid-template-columns:1fr;align-items:center;padding:52px 0 46px}
.ks__name{margin:0;font-size:clamp(38px,6vw,68px);font-weight:700;line-height:1.02;letter-spacing:-.02em}
.ks__name small{display:block;margin-top:10px;font-size:14px;font-weight:400;letter-spacing:.08em;color:#8d9aa1}
.ks__name .ks__from{margin-top:4px;font-size:12px;letter-spacing:.1em;color:#6f7d85}
.ks__lead{margin:18px 0 0;font-size:clamp(16px,1.8vw,19px);line-height:1.8;max-width:30em;color:#c8d1d5}
.ks__key{display:flex;flex-wrap:wrap;gap:8px 30px;margin:26px 0 0;padding:0;list-style:none}
.ks__key li{font-size:14px;color:#8d9aa1}
.ks__key b{display:block;font-size:26px;font-weight:700;color:#fff;line-height:1.3}
.ks__key b i{font-style:normal;font-size:14px;font-weight:400;color:#8d9aa1;margin-left:4px}
.ks__heroshot{margin:0}
.ks__heroshot img{display:block;width:100%;height:auto}
.ks__heroshot figcaption{margin-top:10px;font-size:13px;color:#8d9aa1}

/* 明暗の見開き：同じ棚を、灯りの下と、消したあとで */
.ks__pair{display:grid;gap:28px 44px;grid-template-columns:1fr;align-items:center;padding:0 0 56px}
.ks__pair img{display:block;width:100%;height:auto}
.ks__pair h2{margin:0 0 14px;font-size:clamp(21px,2.4vw,28px);font-weight:700;line-height:1.4;color:#fff}
.ks__pair p{margin:0 0 14px;font-size:16px;color:#c8d1d5;max-width:32em}
.ks__note{margin:0;font-size:13px;color:#8d9aa1}

/* 明の地：理由を4つ。順番ではないので番号は振らない */
.ks__why{padding:58px 0 10px}
.ks__why>h2{margin:0 0 6px;font-size:clamp(22px,2.6vw,30px);font-weight:700}
.ks__why>p{margin:0 0 34px;font-size:15px;color:var(--sub);max-width:34em}
.ks__item{display:grid;gap:20px 40px;grid-template-columns:1fr;padding:30px 0;border-top:1px solid var(--line)}
.ks__item h3{margin:0 0 10px;font-size:clamp(18px,2vw,22px);font-weight:700;line-height:1.5}
.ks__item p{margin:0 0 12px;font-size:16px;max-width:34em}
.ks__item figure{margin:0}
.ks__item img{display:block;width:100%;height:auto;background:#fff}
.ks__item figcaption{margin-top:8px;font-size:13px;color:var(--sub)}

/* 号数のはしご：棒の長さは重さそのもの */
.ks__ladder{padding:56px 0}
.ks__ladder h2{margin:0 0 6px;font-size:clamp(22px,2.6vw,30px);font-weight:700}
.ks__ladder>p{margin:0 0 26px;font-size:15px;color:var(--sub)}
.ks__bars{margin:0;padding:0;list-style:none}
.ks__bar{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.ks__bar dt{font-size:16px;font-weight:700}
.ks__bar dd{margin:0;padding-right:58px}
.ks__bar span{display:block;height:15px;background:var(--ink);position:relative}
.ks__bar b{position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%);
  font-size:13px;font-weight:400;color:var(--sub);white-space:nowrap}

/* 動画・スペック */
.ks__movie{padding:0 0 56px}
.ks__movie h2,.ks__spec h2{margin:0 0 16px;font-size:clamp(22px,2.6vw,30px);font-weight:700}
.ks__movie iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}
.ks__spec{padding:0 0 60px}
.ks__table{width:100%;border-collapse:collapse;font-size:15px}
.ks__table th,.ks__table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.ks__table thead th{border-bottom:2px solid var(--ink);font-size:13px;color:var(--sub)}
.ks__table td:last-child{color:var(--sub)}
.ks__off{color:var(--sub)}
.ks__small{margin:14px 0 0;font-size:13px;color:var(--sub)}

@media(min-width:880px){
  .ks__hero{grid-template-columns:1.02fr .98fr;gap:56px}
  .ks__pair{grid-template-columns:.9fr 1.1fr}
  .ks__item{grid-template-columns:1.08fr .92fr;align-items:start}
  .ks__item--flip>figure{order:-1}
}
@media(prefers-reduced-motion:reduce){.ks *{transition:none!important;animation:none!important}}

/* 2つ並べ・3つ並べ（針の規格の比較） */
.ks__two,.ks__trio{display:grid;gap:22px 30px;grid-template-columns:1fr;margin:0}
.ks__two figure,.ks__trio figure{margin:0}
.ks__two img,.ks__trio img{display:block;width:100%;height:auto;background:#fff}
.ks__two figcaption,.ks__trio figcaption{margin-top:9px;font-size:14px}
.ks__two b,.ks__trio b{display:block;font-size:15px}
.ks__two span,.ks__trio span{color:var(--sub);font-size:13px}

/* 比較表：列が多いので横に送る。左端の項目名は残す */
.ks__matrix{overflow-x:auto;margin:0 0 6px;-webkit-overflow-scrolling:touch}
.ks__matrix table{border-collapse:collapse;font-size:14px;min-width:760px}
.ks__matrix th,.ks__matrix td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.ks__matrix thead th{border-bottom:2px solid var(--ink);font-size:13px;line-height:1.5;vertical-align:bottom}
.ks__matrix tbody th{position:sticky;left:0;background:var(--sea);text-align:left;font-weight:700}
.ks__matrix tbody tr:nth-child(odd) td{background:rgba(255,255,255,.55)}
.ks__matrix .is-own{background:rgba(224,33,26,.06)}
.ks__matrix thead .is-own{color:var(--red)}

@media(min-width:720px){
  .ks__two{grid-template-columns:1fr 1fr}
  .ks__trio{grid-template-columns:1fr}
}

.ks__item h2{margin:0 0 10px;font-size:clamp(19px,2.1vw,24px);font-weight:700;line-height:1.5}
.ks__gallery{display:grid;gap:18px 20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:18px 0 0}
.ks__gallery figure{margin:0}
.ks__gallery img{display:block;width:100%;height:auto;background:#fff}

/* ============ カラー一覧 ============ */
.smc {
  --smc-ink: #14161a;
  --smc-sub: #6b7076;
  --smc-line: #d8d5d0;
  --smc-tile: #f2f1ee;
  --smc-red: var(--color_red, #e0211a);
  max-width: 1100px;
  margin: 56px auto;
  padding: 0 20px;
  color: var(--smc-ink);
}
.smc__head { margin: 0 0 10px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; }
.smc__formula {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  margin: 0 0 30px; padding-bottom: 16px;
  border-bottom: 2px solid var(--smc-ink); font-size: 15px;
}
.smc__n { font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--smc-red); margin-right: 3px; }
.smc__x { font-style: normal; color: var(--smc-sub); margin: 0 8px; }
.smc__eq { margin-left: 8px; color: var(--smc-sub); }
.smc__sizes { margin-left: auto; color: var(--smc-sub); }
.smc__bodies { margin: 0 0 36px; }
.smc__sub { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.smc__count { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--smc-sub); }
.smc__note { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--smc-sub); }
.smc__bodygrid, .smc__grid { list-style: none; margin: 0; padding: 0; display: grid; }
.smc__bodygrid { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 230px)); }
.smc__grid { gap: 16px 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.smc__body, .smc__item { margin: 0; }
.smc__body img, .smc__item img {
  display: block; width: 100%; height: auto;
  background: var(--smc-tile); border: 1px solid var(--smc-line);
}
.smc__body img { background: #fff; border-color: var(--smc-ink); }
.smc__name { display: block; margin-top: 7px; font-size: 13px; line-height: 1.5; }
.smc__item--off img { filter: grayscale(1); opacity: .55; }
.smc__item--off .smc__name { color: var(--smc-sub); }
.smc__off { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--smc-sub); white-space: nowrap; }
.smc__body .smc__name { font-size: 15px; font-weight: 700; }
@media (max-width: 480px) {
  .smc__grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .smc__sizes { margin-left: 0; width: 100%; }
}