@charset "UTF-8";
/* ==========================================================
   orbiter-cat.css  カテゴリページの上の説明（.orb-cat の中だけに効きます）
   色：オービターネイビー #042d7a ＋ 金のライン #c9a227
   ========================================================== */
.orb-cat{--navy:#042d7a;--gold:#c9a227;--ink:#242a35;--sub:#5b6472;--line:#e3e6ec;--tint:#f5f7fb;
  color:var(--ink);font-size:16px;line-height:1.85;text-align:left;margin:0 0 40px;}
.orb-cat *{box-sizing:border-box;}
.orb-cat p{margin:0 0 12px;}
.orb-cat a{color:var(--navy);text-decoration:none;}

/* はじめの一文 */
.orb-cat .c-hero{background:var(--navy);color:#fff;padding:28px 28px 24px;border-bottom:4px solid var(--gold);margin:0 0 18px;}
.orb-cat .c-hero h2,#main-column .orb-cat .c-hero h2{margin:0 0 8px;padding:0;border:0;background:none;color:#fff;font-size:26px;line-height:1.45;font-weight:700;}
.orb-cat .c-hero h2 em{font-style:normal;color:#f3d77a;}
.orb-cat .c-hero p,#main-column .orb-cat .c-hero p{margin:0;font-size:15px;opacity:.92;color:#fff !important;}
.orb-cat .c-pts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:16px 0 0;}
.orb-cat .c-pts div{background:rgba(255,255,255,.1);padding:10px 12px;font-size:13.5px;line-height:1.5;}
.orb-cat .c-pts b{display:block;font-size:17px;color:#fff;}

/* 入口のカード */
.orb-cat .c-jump{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 44px;}
.orb-cat .c-jump a{display:block;border:2px solid var(--navy);background:#fff;padding:16px 14px 12px;text-align:center;font-weight:700;font-size:16px;line-height:1.5;color:var(--navy);position:relative;}
.orb-cat .c-jump a:hover{background:var(--tint);}
.orb-cat .c-jump a small{display:block;font-weight:400;font-size:12.5px;color:var(--sub);margin-top:2px;}
.orb-cat .c-jump a::after{content:"";display:block;width:12px;height:12px;border-right:3px solid var(--gold);border-bottom:3px solid var(--gold);transform:rotate(45deg);margin:8px auto 0;}

/* 見出し */
.orb-cat .c-h,#main-column .orb-cat .c-h{text-align:center;margin:0 0 6px;padding:0;border:0;background:none;font-size:24px;line-height:1.5;font-weight:700;color:var(--ink);}
.orb-cat .c-h em{font-style:normal;color:var(--navy);font-size:1.25em;border-bottom:4px solid var(--gold);padding:0 2px;}
.orb-cat .c-sub{text-align:center;color:var(--sub);font-size:14.5px;margin:0 0 20px;}
.orb-cat section{scroll-margin-top:80px;margin:0 0 48px;}

/* 3種類のカード */
.orb-cat .c-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.orb-cat .c-type{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;}
.orb-cat .c-type .t-h{background:var(--navy);color:#fff;padding:10px 14px;border-bottom:3px solid var(--gold);}
.orb-cat .c-type .t-h b{display:block;font-size:18px;}
.orb-cat .c-type .t-h span{font-size:13px;opacity:.9;}
.orb-cat .c-type .t-b{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column;}
.orb-cat .c-type .t-b p{font-size:14.5px;line-height:1.75;}
.orb-cat .c-type ul{list-style:none;margin:0 0 12px;padding:0;font-size:14px;}
.orb-cat .c-type li{display:flex;justify-content:space-between;border-bottom:1px solid #eef0f4;padding:5px 0;}
.orb-cat .c-type li b{font-weight:700;color:var(--navy);}
.orb-cat .c-type li b.no{color:#8a93a1;font-weight:400;}
.orb-cat .c-type .t-spec{font-size:13px;color:var(--sub);margin:0 0 12px;}
.orb-cat .c-type .t-go{margin-top:auto;display:block;background:var(--navy);color:#fff;text-align:center;padding:9px;font-weight:700;font-size:14.5px;}
.orb-cat .c-type .t-go::after{content:" ›";}
.orb-cat .c-type .t-go:hover{opacity:.88;}

/* 用途から選ぶ */
.orb-cat .c-use{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.orb-cat .c-use div{background:var(--tint);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.orb-cat .c-use span{font-size:15px;}
.orb-cat .c-use b{flex:none;background:var(--navy);color:#fff;font-size:13.5px;padding:3px 10px;}

.orb-cat .c-guide{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--navy);color:#fff;padding:16px 20px;border-bottom:3px solid var(--gold);}
.orb-cat .c-guide b{font-size:17px;color:#fff;}
.orb-cat .c-guide span{font-size:13.5px;opacity:.9;}
.orb-cat .c-guide::after{content:"›";font-size:26px;color:#f3d77a;line-height:1;}
.orb-cat .c-guide:hover{opacity:.9;}

/* 厚みの選び方 */
.orb-cat .c-thick{width:100%;border-collapse:collapse;font-size:15px;}
.orb-cat .c-thick th,.orb-cat .c-thick td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:middle;}
.orb-cat .c-thick th{background:var(--navy);color:#fff;width:22%;white-space:nowrap;font-weight:700;}
.orb-cat .c-thick td.k{width:30%;font-size:13.5px;color:var(--sub);}
.orb-cat .c-note{font-size:13px;color:var(--sub);margin:8px 0 0;}

@media (max-width:767px){
  .orb-cat .c-hero{padding:20px 16px 18px;}
  .orb-cat .c-hero h2,#main-column .orb-cat .c-hero h2{font-size:21px;}
  .orb-cat .c-pts{grid-template-columns:1fr 1fr;}
  .orb-cat .c-jump{grid-template-columns:1fr;gap:4px;}
  .orb-cat .c-jump a{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:12px 14px;}
  .orb-cat .c-jump a small{display:none;}
  .orb-cat .c-jump a::after{margin:0 4px 6px 8px;}
  .orb-cat .c-h,#main-column .orb-cat .c-h{font-size:20px;}
  .orb-cat .c-types,.orb-cat .c-use{grid-template-columns:1fr;}
  .orb-cat .c-thick th{width:28%;}
  .orb-cat .c-guide{flex-wrap:wrap;}
  .orb-cat .c-guide span{flex:1 1 100%;order:3;}
  .orb-cat .c-thick td.k{display:none;}
}

/* ==========================================================
   種類 → 厚み → サイズ で選ぶ箱（cat-picker.js）
   ========================================================== */
.orb-cat .cp{border:2px solid var(--navy);background:#fff;padding:22px 24px 18px;margin:0 0 44px;}
.orb-cat .cp-step{margin:0 0 20px;}
.orb-cat .cp-sh{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin:0 0 10px;color:var(--ink);}
.orb-cat .cp-sh b{display:inline-grid;place-items:center;width:26px;height:26px;background:var(--navy);color:#fff;font-size:14px;}
.orb-cat .cp-types{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.orb-cat .cp button{font:inherit;cursor:pointer;border:1px solid #c5cee2;background:#fff;color:var(--ink);border-radius:2px;}
.orb-cat .cp-type{padding:12px 10px;text-align:center;line-height:1.4;}
.orb-cat .cp-type b{display:block;font-size:17px;}
.orb-cat .cp-type small{display:block;font-size:12px;color:var(--sub);margin-top:3px;}
.orb-cat .cp button.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.orb-cat .cp button.on small{color:rgba(255,255,255,.8);}
.orb-cat .cp-ths{display:flex;flex-wrap:wrap;gap:6px;}
.orb-cat .cp-th{min-width:64px;padding:8px 10px;font-size:17px;font-weight:700;}
.orb-cat .cp-th small{font-size:11px;font-weight:400;margin-left:1px;}
.orb-cat .cp-want{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:var(--tint);padding:10px 12px;margin:0 0 10px;font-size:14px;}
.orb-cat .cp-want>span{font-weight:700;margin-right:4px;}
.orb-cat .cp-want label{display:flex;align-items:center;gap:3px;}
.orb-cat .cp-want input{width:88px;font-size:16px;padding:5px 8px;border:1px solid #b9c3d8;border-radius:2px;}
.orb-cat .cp-want i{font-style:normal;}
.orb-cat .cp-want em{flex-basis:100%;font-style:normal;font-size:12.5px;color:var(--sub);}
.orb-cat .cp-tb{width:100%;border-collapse:collapse;font-size:15px;}
.orb-cat .cp-tb th{background:var(--navy);color:#fff;font-weight:400;font-size:13px;padding:7px 10px;text-align:left;}
.orb-cat .cp-tb td{padding:9px 10px;border-bottom:1px solid var(--line);}
.orb-cat .cp-tb td b{font-size:16px;}
.orb-cat .cp-tb .cp-p{text-align:right;white-space:nowrap;}
.orb-cat .cp-tb .cp-p b{font-size:18px;color:var(--navy);}
.orb-cat .cp-tb .cp-go{text-align:right;width:1%;white-space:nowrap;}
.orb-cat .cp-tb .cp-go a{display:inline-block;background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:3px;}
.orb-cat .cp-tb tr.fit td{background:#fff8e1;}
.orb-cat .cp-tb tr.no td{color:#b3b9c4;}
.orb-cat .cp-tb tr.no .cp-p b{color:#b3b9c4;}
.orb-cat .cp-tb tr.no .cp-go a{background:#c9cfda;}
.orb-cat .cp-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;border:1px solid var(--sub);color:var(--sub);padding:0 5px;border-radius:2px;vertical-align:2px;}
.orb-cat .cp-tag.is-fit{border-color:#c9a227;background:#c9a227;color:#fff;}
.orb-cat .cp-note{font-size:12.5px;color:var(--sub);margin:10px 0 0;}
@media (max-width:768px){
  .orb-cat .cp{padding:16px 12px 12px;}
  .orb-cat .cp-type b{font-size:15px;}
  .orb-cat .cp-type small{font-size:11px;}
  .orb-cat .cp-tb{font-size:14px;}
  .orb-cat .cp-want input{width:72px;}
  .orb-cat .cp-want>span{flex-basis:100%;}
  .orb-cat .cp-tb .cp-go a{padding:7px 10px;}
}

/* 入口カードが2つのとき */
.orb-cat .c-jump.is-2{grid-template-columns:repeat(2,1fr);}

/* ---- 写真（2026-10-18 追加） ---- */
.orb-cat .c-hero.has-img{display:grid;grid-template-columns:1.35fr 1fr;padding:0;}
.orb-cat .c-hero.has-img .c-hero-t{padding:26px 26px 22px;}
.orb-cat .c-hero.has-img h2,#main-column .orb-cat .c-hero.has-img h2{font-size:23px;}
.orb-cat .c-hero.has-img .c-pts{grid-template-columns:1fr 1fr;}
.orb-cat .c-hero-img{display:block;width:100%;height:100%;object-fit:cover;min-height:220px;margin:0;}
.orb-cat .c-type .t-img{display:block;width:100%;height:150px;object-fit:cover;object-position:center 30%;margin:0;}
.orb-cat .c-thick-row{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start;}
.orb-cat .c-thick-img{display:block;width:100%;height:auto;margin:0;}
@media (max-width:768px){
  .orb-cat .c-hero.has-img{grid-template-columns:1fr;}
  .orb-cat .c-hero.has-img .c-hero-t{padding:20px 16px 18px;}
  .orb-cat .c-hero-img{min-height:0;height:160px;}
  .orb-cat .c-thick-row{grid-template-columns:1fr;}
  .orb-cat .c-thick-img{height:140px;object-fit:cover;}
}

/* ---- 比べる表・注意リスト（塩ビ板などで使用 2026-10-18） ---- */
.orb-cat .c-cmp{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 10px;}
.orb-cat .c-cmp th,.orb-cat .c-cmp td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.orb-cat .c-cmp thead th{background:var(--navy);color:#fff;font-weight:700;}
.orb-cat .c-cmp thead th:first-child{background:#fff;border-color:transparent var(--line) var(--line) transparent;}
.orb-cat .c-cmp tbody th{background:var(--tint);width:130px;white-space:nowrap;font-weight:700;}
.orb-cat .c-cmp td.y{color:var(--navy);font-weight:700;}
.orb-cat .c-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.orb-cat .c-list li{list-style:none;padding:10px 4px 10px 18px;border-bottom:1px solid var(--line);font-size:14.5px;position:relative;}
.orb-cat .c-list li::before{content:"";position:absolute;left:4px;top:19px;width:6px;height:6px;background:var(--navy);}
.orb-cat section{margin:0 0 44px;}
@media (max-width:768px){
  .orb-cat .c-cmp{font-size:13px;}
  .orb-cat .c-cmp tbody th{width:auto;white-space:normal;}
  .orb-cat .c-cmp th,.orb-cat .c-cmp td{padding:8px;}
}

/* ---- 素材ごとの色（2026-10-18）----
   .orb-cat に is-pvc を足すと、塩ビ板の色（えんじ）になります。アクリルはネイビーのまま */
.orb-cat.is-pvc{--navy:#9b2d27;--line:#ecdcda;--tint:#fbf4f3;}
.orb-cat.is-pvc .cp button{border-color:#e3c6c2;}
.orb-cat.is-pvc .cp-want input{border-color:#d9b5b0;}
.orb-cat.is-pvc .cp-tb .cp-p b{color:var(--ink);}
.orb-cat.is-pvc .c-cmp thead th:last-child{background:#042d7a;}
.orb-cat.is-pvc .c-cmp td.y:last-child{color:#042d7a;}