@charset "UTF-8";
/* ============================================================================
   contents.css  読みものページ（選び方・板図鑑・グッズの作り方・2カット無料）専用
   すべて .c- で始まるので、他のページには影響しません。
   本番化するときは orbiter.css の末尾に追記します。
   ========================================================================== */

.o-gd .c-toc{background:var(--o-tint);padding:18px 22px;margin:0 0 40px;}
.o-gd .c-toc p{font-size:10px;letter-spacing:.16em;color:#a3aab5;margin:0 0 8px;}
.o-gd .c-toc ol{margin:0;padding-left:20px;}
.o-gd .c-toc li{font-size:13px;line-height:2;color:#3d4653;}
.o-gd .c-toc a:hover{color:var(--o-navy);}

/* 3つの質問 */
.o-gd .c-q3{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 0 20px;}
.o-gd .c-q3>div{background:var(--o-tint);padding:22px 20px;}
.o-gd .c-q3 .c-qn{font-size:10px;letter-spacing:.16em;color:#a3aab5;margin:0 0 6px;}
.o-gd .c-q3 h3{margin:0 0 12px !important;font-size:15px !important;}
.o-gd .c-q3 dl{margin:0;}
.o-gd .c-q3 dt{font-size:12.5px;font-weight:600;color:var(--o-navy);margin-top:10px;}
.o-gd .c-q3 dd{font-size:12.5px;line-height:1.8;color:#454e5c;margin:2px 0 0;}

/* 比較表 */
.o-gd .c-scroll{overflow-x:auto;margin:0 0 10px;-webkit-overflow-scrolling:touch;}
.o-gd .c-cmp{min-width:720px;}
.o-gd .c-cmp th,.o-gd .c-cmp td{text-align:center !important;padding:12px 8px !important;font-size:12.5px !important;}
.o-gd .c-cmp thead th{background:var(--o-navy) !important;color:#fff !important;width:auto !important;font-weight:600;}
.o-gd .c-cmp tbody th{width:130px !important;text-align:left !important;}
.o-gd .c-cmp td.c-l{text-align:left !important;}
.o-gd .c-mk{font-size:15px;color:var(--o-navy);font-weight:700;}
.o-gd .c-mk.no{color:#b8352a;}
.o-gd .c-mk.mid{color:#8a93a1;}

/* カード（図鑑・用途） */
.o-gd .c-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin:0 0 20px;}
.o-gd .c-card{border:1px solid var(--o-line);background:#fff;padding:0;display:flex;flex-direction:column;}
.o-gd .c-card .c-ph{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#f1f3f7,#f1f3f7 10px,#eceff4 10px,#eceff4 20px);display:grid;place-items:center;font-size:11px;color:#9aa2af;}
.o-gd .c-card .c-in{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;}
.o-gd .c-card h3{margin:0 0 4px !important;font-size:16px !important;}
.o-gd .c-card .c-en{font-size:10px;letter-spacing:.14em;color:#a3aab5;margin:0 0 10px;}
.o-gd .c-card p{font-size:12.5px !important;line-height:1.9 !important;margin:0 0 10px !important;}
.o-gd .c-tags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px;}
.o-gd .c-tags span{font-size:11px;border:1px solid #c5cee2;color:var(--o-navy);padding:2px 8px;border-radius:2px;}
.o-gd .c-tags span.no{border-color:#e3a59e;color:#b8352a;}
.o-gd .c-card .c-go{margin-top:auto;font-size:12.5px;color:var(--o-navy);font-weight:600;}

/* 図解 */
.o-gd .c-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 0 20px;}
.o-gd .c-fig{border:1px solid var(--o-line);padding:18px 16px 16px;background:#fff;}
.o-gd .c-fig svg{display:block;width:100%;height:auto;margin:0 0 12px;}
.o-gd .c-fig b{display:block;font-size:13.5px;margin:0 0 4px;}
.o-gd .c-fig span{display:block;font-size:12px;line-height:1.8;color:#5b6472;}
.o-gd .c-fig .c-res{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:2px;background:#e6edf9;color:var(--o-navy);}
.o-gd .c-fig .c-res.pay{background:#fff1e0;color:#9a4d00;}
.o-gd .c-fig .c-res.no{background:#f8e1df;color:#a3261b;}

/* 手順 */
.o-gd .c-steps{counter-reset:cs;margin:0 0 20px;}
.o-gd .c-steps>div{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--o-line);}
.o-gd .c-steps>div:first-child{border-top:1px solid var(--o-line);}
.o-gd .c-steps>div::before{counter-increment:cs;content:counter(cs,decimal-leading-zero);font-size:22px;font-weight:300;color:var(--o-navy);letter-spacing:.02em;}
.o-gd .c-steps b{display:block;font-size:14.5px;margin:2px 0 6px;}
.o-gd .c-steps p{margin:0 !important;}

/* 2コース */
.o-gd .c-course{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0 0 20px;}
.o-gd .c-course>div{border:1px solid var(--o-line);padding:24px 22px;}
.o-gd .c-course .c-ct{display:inline-block;font-size:10.5px;letter-spacing:.1em;background:var(--o-navy);color:#fff;padding:2px 9px;margin:0 0 10px;}
.o-gd .c-course h3{margin:0 0 8px !important;}
.o-gd .c-course ul{list-style:none;margin:10px 0 0;padding:0;}
.o-gd .c-course li{font-size:12.5px;line-height:1.8;padding:6px 0 6px 16px;border-top:1px solid #eef0f4;position:relative;color:#454e5c;}
.o-gd .c-course li::before{content:"";position:absolute;left:2px;top:14px;width:5px;height:5px;border-radius:50%;background:var(--o-navy);}

/* CTA */
.o-gd .c-cta{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:40px 0 0;}
.o-gd .c-cta a{display:block;padding:22px 22px;background:var(--o-navy);color:#fff !important;font-size:14px;font-weight:600;}
.o-gd .c-cta a small{display:block;font-size:11.5px;font-weight:400;opacity:.85;margin-top:4px;}
.o-gd .c-cta a.c-sub{background:var(--o-tint);color:var(--o-ink) !important;}

/* 要確認 */
.c-todo{display:inline-block;background:#fff4c2;color:#6b5500;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:2px;margin-left:4px;vertical-align:middle;}

/* 読みものナビ */
.o-gd .c-nav{margin:56px 0 0;}
.o-gd .c-nav p{font-size:10px;letter-spacing:.16em;color:#a3aab5;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--o-line);}
.o-gd .c-nav div{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.o-gd .c-nav a{background:var(--o-tint);padding:16px 14px;font-size:12.5px;font-weight:600;text-align:center;line-height:1.6;}
.o-gd .c-nav a:hover{background:var(--o-band);color:var(--o-navy);}
.o-gd .c-nav a.is-on{background:var(--o-navy);color:#fff;}

@media (max-width:960px){
  .o-gd .c-q3,.o-gd .c-figs{grid-template-columns:1fr;}
  .o-gd .c-cards,.o-gd .c-course,.o-gd .c-cta{grid-template-columns:1fr;}
  .o-gd .c-nav div{grid-template-columns:1fr 1fr;}
}

/* 用途から選ぶ */
.o-gd .c-use{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 0 20px;}
.o-gd .c-use a{display:block;border:1px solid var(--o-line);background:#fff;padding:16px 18px;}
.o-gd .c-use a:hover{border-color:var(--o-navy);}
.o-gd .c-use b{display:block;font-size:14px;margin-bottom:4px;color:var(--o-ink);}
.o-gd .c-use span{font-size:12px;line-height:1.8;color:var(--o-sub);}
@media (max-width:960px){ .o-gd .c-use{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .o-gd .c-use{grid-template-columns:1fr;} }

/* ===== 2026-10-09 読みもの：ご利用ガイドと見分けがつくよう、写真付きカードに ===== */
.o-gd .c-nav .c-nav-h{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:0;color:var(--o-sub);border-bottom:0;padding:0;margin:0 0 14px;}
.o-gd .c-nav .c-nav-h span{background:#c9a227;color:#fff;font-weight:700;font-size:12px;padding:3px 10px;border-radius:30px;}
.o-gd .c-nav .c-rds{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.o-gd .c-nav a.c-rd{display:block;background:#fff;border:1px solid var(--o-line);border-radius:10px;overflow:hidden;padding:0;text-align:left;font-weight:400;color:var(--o-ink);}
.o-gd .c-nav a.c-rd:hover{background:#fff;border-color:#c9a227;}
.o-gd .c-nav a.c-rd.is-on{background:#fffaf0;border-color:#c9a227;color:var(--o-ink);}
.o-gd .c-nav .c-rd-img{display:block;aspect-ratio:16/9;background:#eef1f5 center/cover no-repeat;}
.o-gd .c-nav .c-rd-t{display:block;padding:10px 12px 12px;}
.o-gd .c-nav .c-rd-t small{display:block;font-size:10.5px;color:#a8851a;font-weight:700;margin-bottom:2px;}
.o-gd .c-nav .c-rd-t b{display:block;font-size:13.5px;line-height:1.5;}
.o-gd .c-nav .c-rd-t em{display:block;font-style:normal;font-size:11.5px;color:var(--o-sub);margin-top:3px;line-height:1.5;}
@media (max-width:960px){
  .o-gd .c-nav .c-rds{grid-template-columns:1fr;gap:8px;}
  .o-gd .c-nav a.c-rd{display:grid;grid-template-columns:96px 1fr;align-items:center;}
  .o-gd .c-nav .c-rd-img{aspect-ratio:auto;height:100%;min-height:72px;}
}

.o-gd .c-nav .c-rds{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
@media (max-width:960px){.o-gd .c-nav .c-rds{grid-template-columns:1fr;}}