/* CMD-066b 通信制大学「学校カード」（osc）
   正本: /home/yykk/seo-army/ouchi-site/mu-plugins/ouchi-school-card.css
   手本: CHILIT 留学エージェント会社カード v4（/home/yykk/chilit-site/wp/mu-plugins/chilit-agent-card.css）
         2026-09-03 中里さん指示「CHILITの留学エージェントの表見たでしょ？」＝構造・寸法は v4 をそのまま写し、
         色だけ おうちカレッジの子テーマトークン（--oc-*・緑系）に置換する。紺・金（CHILIT）は使わない。
   対応HTML: scripts/tsushin_school_card.py が生成する wp:html ブロック（div.osc.osc--a）
   設計方針: ラッパーは背景・枠なし（透明）。タブは文字＋2px下線のみ。表は th 45%／1px細罫線／th 薄網掛け／角丸なし。
   JSなし（ConoHa WAF制約）。タブは input[type=radio] + label + :checked のみで切替 */

.osc{margin:24px 0;background:none;border:none;color:var(--oc-text,#1A1A1A);font-feature-settings:"palt";font-family:inherit;}
.osc *{box-sizing:border-box;}

/* タブ（文字のみ＋2px下線・左寄せ・gap 20px） */
.osc .osc-tabin{position:absolute;opacity:0;width:0;height:0;pointer-events:none;margin:0;}
.osc .osc-tabs{display:flex;gap:20px;flex-wrap:nowrap;background:none;border-bottom:1px solid var(--oc-border-light,#EBE8E4);padding:0 4px;}
.osc .osc-tabs label{flex:0 0 auto;margin:0;padding:9px 2px;text-align:left;white-space:nowrap;font-size:14.72px;font-weight:700;line-height:1.8;color:var(--oc-text-light,#A0A0A0);cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;transition:color .12s linear;}
.osc .osc-pane{display:none;padding:13px 4px;}

/* 4タブ（id非依存: 1記事に48カードを置くため radio の name/id は osc-{slug} で一意化。
   選択中＝文字を濃く＋2px下線（おうちカレッジのメイン緑） */
.osc .osc-tabin:nth-of-type(1):checked ~ .osc-tabs label:nth-of-type(1),
.osc .osc-tabin:nth-of-type(2):checked ~ .osc-tabs label:nth-of-type(2),
.osc .osc-tabin:nth-of-type(3):checked ~ .osc-tabs label:nth-of-type(3),
.osc .osc-tabin:nth-of-type(4):checked ~ .osc-tabs label:nth-of-type(4){color:var(--oc-text,#1A1A1A);border-bottom:2px solid var(--oc-green,#2B6B4F);}
.osc .osc-tabin:nth-of-type(1):checked ~ .osc-pane--1,
.osc .osc-tabin:nth-of-type(2):checked ~ .osc-pane--2,
.osc .osc-tabin:nth-of-type(3):checked ~ .osc-pane--3,
.osc .osc-tabin:nth-of-type(4):checked ~ .osc-pane--4{display:block;}

/* 表（v4実測: th 45% / 1px罫線 / padding 7px 10px / 13.77px / line-height 1.6） */
.osc .osc-tbl{margin:0;padding:0;overflow-x:visible;max-width:none;width:auto;}
.osc .osc-tbl table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;border-radius:0;margin:0;background:none;}
.osc .osc-tbl table th,
.osc .osc-tbl table td{border:1px solid var(--oc-border,#D8D4CF);border-radius:0;padding:7px 10px;text-align:left;vertical-align:middle;white-space:normal;word-break:normal;overflow-wrap:break-word;font-size:13.77px;line-height:1.6;}
.osc .osc-tbl table th{width:45%;background:rgba(43,107,79,.06);color:var(--oc-text,#1A1A1A);font-weight:700;}
.osc .osc-tbl table td{width:55%;color:var(--oc-text,#1A1A1A);font-weight:500;background:transparent;}
.osc .osc-tbl a{color:var(--oc-green,#2B6B4F);text-decoration:underline;word-break:break-all;}

/* 表と表の間の小見出し（学部・コース別の学費 など） */
.osc .osc-sub{margin:14px 0 6px;padding:0 2px;font-size:13.77px;font-weight:700;line-height:1.6;color:var(--oc-text,#1A1A1A);}

/* セル内の点リスト（1項目=1行） */
.osc .swl-inline-list{display:inline-block;width:100%;margin:0;padding:2px 0 2px 20px;font-size:13.77px;line-height:1.5;}
.osc .swl-inline-list:before{top:calc(.75em - 1px);}

/* セル内の折りたたみ（値は左・記号は右／中身は折り返し可） */
.osc .osc-more--cell{margin:0;}
.osc .osc-more.osc-more--cell>summary{padding:0;font-size:13.77px;font-weight:500;line-height:1.6;color:inherit;}
.osc .osc-more-dots{margin:5px 0 1px;}
.osc .osc-more-dots .swl-inline-list{padding-top:1px;padding-bottom:1px;}

/* summary の両端配置（左=値／右=＋・−。文字ラベルは持たせない） */
.osc .osc-more>summary{position:relative;display:block;}
.osc .osc-val{display:block;padding-right:1.4em;}
.osc .osc-cue{position:absolute;right:0;top:0;font-size:14px;font-weight:400;line-height:1.6;color:var(--oc-text-light,#A0A0A0);}
.osc .osc-cue:before{content:"\FF0B";}
.osc .osc-more[open]>summary .osc-cue:before{content:"\2212";}

/* 出典・注記（表の下・左寄せ。注記が2〜3文になる校があるため中央寄せにしない） */
.osc .osc-tbl figcaption,
.osc .osc-tbl .wp-element-caption{margin:10px 0 0;padding:0 2px;font-size:12.8px;line-height:1.6;color:var(--oc-text-sub,#6B6B6B);text-align:left;background:none;opacity:1;}

/* 表の下の折りたたみ（資格の一覧＝全文） */
.osc .osc-more{margin:6px 0 0;}
.osc .osc-more>summary{padding:8px 2px;font-size:13.77px;font-weight:700;color:var(--oc-green-dark,#1E4D38);text-decoration:none;cursor:pointer;list-style:none;}
.osc .osc-more>summary::-webkit-details-marker{display:none;}
.osc .osc-more--list .osc-more-dots{margin:4px 0 0;padding:0 2px;}
.osc .osc-more--list .swl-inline-list{padding-top:3px;padding-bottom:3px;line-height:1.6;}

@media (max-width:599px){
  /* SP(390px)もPCと同値。タブのみ gap 16px で1行に収める */
  .osc .osc-tabs{gap:16px;}
  .osc .osc-tabs label{letter-spacing:0;}
  .osc .osc-tbl table th{letter-spacing:0;}
  /* 点リストの1行維持（SP390で数px不足→字送りとインデントを微調整） */
  .osc .swl-inline-list{letter-spacing:-.02em;}
  .osc .osc-more--cell>summary .osc-val>.swl-inline-list{padding-left:16px;}
}


/* ===== CMD-066d 学費比較ウィジェット（ofc）2026-09-05 =====
   中里さん指示「学部・コースごとに一覧で・分野タブで絞れるように」。参考=ビズリーチ求人数ウィジェット（ラジオタブ＋横棒＋details）
   対応HTML: scripts/tsushin_fee_compare.py が生成する wp:html ブロック（div.ofc）。色はカード（osc）と同じ子テーマトークン */
.ofc{margin:24px 0;border:1px solid var(--oc-border,#D8D4CF);background:#fff;border-radius:6px;overflow:hidden}
.ofc input[type="radio"]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.ofc-head{background:var(--oc-green,#2B6B4F);color:#fff;font-size:14px;font-weight:700;text-align:center;padding:12px 10px;line-height:1.4}
.ofc-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--oc-border,#D8D4CF);background:#fff}
.ofc-tabs label{flex:1 1 25%;min-width:25%;text-align:center;padding:10px 2px;font-size:12.5px;font-weight:700;color:#6B6B6B;cursor:pointer;border-bottom:3px solid transparent;line-height:1.3;user-select:none}
.ofc-panel{display:none;padding:12px 14px 6px}
#ofc-t1:checked ~ .ofc-tabs label[for="ofc-t1"],#ofc-t2:checked ~ .ofc-tabs label[for="ofc-t2"],#ofc-t3:checked ~ .ofc-tabs label[for="ofc-t3"],#ofc-t4:checked ~ .ofc-tabs label[for="ofc-t4"],
#ofc-t5:checked ~ .ofc-tabs label[for="ofc-t5"],#ofc-t6:checked ~ .ofc-tabs label[for="ofc-t6"],#ofc-t7:checked ~ .ofc-tabs label[for="ofc-t7"],#ofc-t8:checked ~ .ofc-tabs label[for="ofc-t8"]{color:var(--oc-green,#2B6B4F);border-bottom-color:var(--oc-green,#2B6B4F)}
#ofc-t1:checked ~ .ofc-body .ofc-panel--1,#ofc-t2:checked ~ .ofc-body .ofc-panel--2,#ofc-t3:checked ~ .ofc-body .ofc-panel--3,#ofc-t4:checked ~ .ofc-body .ofc-panel--4,
#ofc-t5:checked ~ .ofc-body .ofc-panel--5,#ofc-t6:checked ~ .ofc-body .ofc-panel--6,#ofc-t7:checked ~ .ofc-body .ofc-panel--7,#ofc-t8:checked ~ .ofc-body .ofc-panel--8{display:block}
.ofc-count{margin:0 0 8px;font-size:12px;color:#6B6B6B;text-align:right}
.ofc .ofc-t{width:100%;border-collapse:collapse;font-size:13px;margin:0;border:0;background:none;table-layout:fixed}
.ofc .ofc-t tr{border:0;background:none}
.ofc .ofc-t th{text-align:left;font-weight:500;color:#333;width:46%;padding:5px 10px 5px 0;line-height:1.35;vertical-align:middle;background:none;border:0;border-bottom:1px solid #EFEDEA;font-size:13px;white-space:normal;overflow-wrap:anywhere}
.ofc .ofc-t th b{display:block;font-weight:700;color:var(--oc-text,#1A1A1A)}
.ofc .ofc-t th .ofc-fac{display:block;font-size:11.5px;color:#6B6B6B}
.ofc .ofc-t td{border:0;border-bottom:1px solid #EFEDEA;padding:5px 0;vertical-align:middle;background:none;font-size:13px}
.ofc-barwrap{background:#F1EFEB;height:14px;width:100%;border-radius:2px}
.ofc-bar{height:14px;background:var(--oc-green,#2B6B4F);min-width:2px;border-radius:2px}
.ofc .ofc-t td.ofc-val{width:118px;text-align:right;font-weight:700;color:var(--oc-text,#1A1A1A);padding-left:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ofc .ofc-t td.ofc-val--range{white-space:normal;word-break:keep-all;overflow-wrap:normal;line-height:1.3;font-size:12px}
.ofc .ofc-t td.ofc-val--wide{width:auto;white-space:normal;font-weight:600;color:#6B6B6B;text-align:right}
.ofc-more{border-top:1px solid var(--oc-border,#D8D4CF);background:#fff;margin:10px -14px 0}
.ofc-more summary{list-style:none;cursor:pointer;text-align:center;background:#F6F5F2;color:var(--oc-text,#1A1A1A);font-weight:700;font-size:13px;padding:11px 36px;user-select:none;position:relative}
.ofc-more summary::-webkit-details-marker{display:none}
.ofc-more summary::after{content:"▼";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:11px;transition:transform .2s}
.ofc-more[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.ofc-more .ofc-in{padding:10px 14px 4px}
.ofc-note{color:#6B6B6B;font-size:11px;line-height:1.6;padding:10px 14px;border-top:1px solid var(--oc-border,#D8D4CF);background:#FBFAF8}
@media(max-width:600px){.ofc-tabs label{font-size:11px;padding:9px 1px}.ofc .ofc-t th,.ofc .ofc-t td{font-size:12px}.ofc .ofc-t th{width:50%}.ofc .ofc-t th .ofc-fac{font-size:10.5px}.ofc .ofc-t td.ofc-val{width:104px;font-size:12px}.ofc .ofc-t td.ofc-val--range{font-size:11px}.ofc-panel{padding:10px 10px 4px}.ofc-more{margin:10px -10px 0}}

/* ===== CMD-066e 全体比較ウィジェット（ovw）2026-09-05 — ofc の見た目を共有し、ラジオid・グループ見出し・順位バッジ・公式ボタン・チップだけ追加 ===== */
#ovw-t1:checked ~ .ofc-tabs label[for="ovw-t1"],#ovw-t2:checked ~ .ofc-tabs label[for="ovw-t2"],#ovw-t3:checked ~ .ofc-tabs label[for="ovw-t3"],#ovw-t4:checked ~ .ofc-tabs label[for="ovw-t4"],
#ovw-t5:checked ~ .ofc-tabs label[for="ovw-t5"],#ovw-t6:checked ~ .ofc-tabs label[for="ovw-t6"],#ovw-t7:checked ~ .ofc-tabs label[for="ovw-t7"],#ovw-t8:checked ~ .ofc-tabs label[for="ovw-t8"],#ovw-t9:checked ~ .ofc-tabs label[for="ovw-t9"]{color:var(--oc-green,#2B6B4F);border-bottom-color:var(--oc-green,#2B6B4F)}
#ovw-t1:checked ~ .ofc-body .ofc-panel--1,#ovw-t2:checked ~ .ofc-body .ofc-panel--2,#ovw-t3:checked ~ .ofc-body .ofc-panel--3,#ovw-t4:checked ~ .ofc-body .ofc-panel--4,
#ovw-t5:checked ~ .ofc-body .ofc-panel--5,#ovw-t6:checked ~ .ofc-body .ofc-panel--6,#ovw-t7:checked ~ .ofc-body .ofc-panel--7,#ovw-t8:checked ~ .ofc-body .ofc-panel--8,#ovw-t9:checked ~ .ofc-body .ofc-panel--9{display:block}
.ovw .ofc-tabs label{flex:1 1 20%;min-width:20%}
.ovw .ofc-t th{width:auto}
.ovw .ofc-t th a{color:var(--oc-text,#1A1A1A);text-decoration:underline;text-decoration-color:#C9C4BD;text-underline-offset:2px}
.ovw .ofc-t td.ovw-rk{width:26px;text-align:center;font-weight:700;color:#fff;padding:5px 0}
.ovw .ofc-t td.ovw-rk::before{content:"";display:none}
.ovw .ofc-t td.ovw-rk{color:#6B6B6B;font-size:12px;width:28px;white-space:nowrap;text-align:center}
.ovw .ofc-t td.ovw-rk small{font-size:9.5px;font-weight:500;color:#6B6B6B;margin-left:1px}
.ovw .ofc-t thead th{font-size:10.5px;font-weight:600;color:#6B6B6B;background:#FBFAF8;border-bottom:1px solid var(--oc-border,#D8D4CF);padding:4px 4px 4px 0;text-align:left;width:auto;white-space:nowrap}
.ovw .ofc-t thead th.ovw-rk{width:28px;text-align:center;padding:4px 0}
.ovw .ofc-t thead th.ovw-logo{width:92px}
.ovw .ofc-t thead th.ovw-off{width:58px;text-align:right}
.ovw .ofc-t td.ovw-logo{width:92px;padding:4px 8px 4px 0;text-align:center}
.ovw .ofc-t td.ovw-logo img{display:block;max-width:84px;max-height:38px;width:auto;height:auto;margin:0 auto;object-fit:contain;background:#fff}
.ovw .ofc-t td.ovw-off{width:58px;text-align:right;padding:4px 0 4px 6px}
.ovw-btn{display:inline-block;padding:3px 9px;border-radius:14px;background:#fff;border:1px solid var(--oc-green,#2B6B4F);color:var(--oc-green,#2B6B4F)!important;font-size:11px;font-weight:700;text-decoration:none!important;line-height:1.5;white-space:nowrap}
.ovw-btn--aff{background:#F97316;border-color:#F97316;color:#fff!important}
.ovw .ofc-t th[colspan="3"]{width:auto}
.ovw .ofc-t td.ofc-val{width:104px}
.ovw-grp{margin:12px -14px 6px;padding:8px 14px;background:#F6F5F2;color:var(--oc-text,#1A1A1A);font-weight:700;font-size:13px;border-top:1px solid var(--oc-border,#D8D4CF);border-bottom:1px solid var(--oc-border,#D8D4CF)}
.ovw-grp:first-child{margin-top:0}
.ovw-grp-n{float:right;font-weight:500;color:#6B6B6B;font-size:12px}
.ovw .ofc-t th b{display:block;color:var(--oc-text,#1A1A1A);font-weight:700}
.ovw .ofc-t th .ofc-fac{display:block;font-size:11.5px;color:#6B6B6B;margin:1px 0 3px}
.ovw-chips{display:flex;flex-wrap:wrap;gap:4px 6px}
.ovw-chips span{display:inline-block;padding:1px 7px;border-radius:4px;background:#F1EFEB;color:#333;font-size:11.5px;font-weight:500;white-space:nowrap}
@media(max-width:600px){.ovw .ofc-tabs label{flex:1 1 33.33%;min-width:33.33%}.ovw .ofc-t td.ovw-rk{width:22px;font-size:11px}.ovw .ofc-t thead th{font-size:9.5px;white-space:normal}.ovw .ofc-t thead th.ovw-rk{width:22px}.ovw .ofc-t thead th.ovw-logo{width:44px}.ovw .ofc-t thead th.ovw-off{width:48px}.ovw .ofc-t td.ovw-logo{width:44px;padding-right:4px}.ovw .ofc-t td.ovw-logo img{max-width:40px;max-height:26px}.ovw .ofc-t td.ovw-off{width:48px;padding-left:4px}.ovw-btn{padding:2px 6px;font-size:10px}.ovw .ofc-t td.ofc-val{width:88px}.ovw .ofc-t td.ofc-barcell{width:44px}.ovw-chips span{font-size:10.5px;margin:0;padding:1px 5px}.ovw-grp{margin:10px -10px 6px;padding:8px 10px}}
/* 続きがある一覧: 見える部分の下端をぼかす（2026-09-06 中里さん「ぼかして続きがあるようにして」）。開いたら消す */
.ofc-fade{position:relative}
.ofc-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 60%,#fff 100%);pointer-events:none}
.ofc-fade:has(+ .ofc-more[open])::after{display:none}
.ofc-fade + .ofc-more{margin-top:0;border-top:0}
.ofc-fade + .ofc-more summary{background:#fff;border-top:1px solid var(--oc-border,#D8D4CF);border-bottom:1px solid var(--oc-border,#D8D4CF)}

/* グループ選択（分野・スクーリング・資格・編入・入試・奨学金）: 先頭のボタンで選んだグループだけ表示（2026-09-06 中里さん「表の頭に分野を記載して選択したやつが出てくるように」） */
.ovw .ofc-panel>section{display:none}
.ovw-sub{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 10px}
.ovw-sub label{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--oc-border,#D8D4CF);border-radius:16px;background:#fff;color:var(--oc-text,#1A1A1A);font-size:12px;font-weight:600;line-height:1.3;cursor:pointer;user-select:none;white-space:nowrap}
.ovw-sub label span{font-size:10.5px;font-weight:500;color:#6B6B6B}
.ovw .ofc-panel>input:checked~nav label span{color:inherit}
.ovw .ofc-panel>input:nth-of-type(1):checked~section:nth-of-type(1){display:block}
.ovw .ofc-panel>input:nth-of-type(1):checked~nav label:nth-of-type(1){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
.ovw .ofc-panel>input:nth-of-type(2):checked~section:nth-of-type(2){display:block}
.ovw .ofc-panel>input:nth-of-type(2):checked~nav label:nth-of-type(2){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
.ovw .ofc-panel>input:nth-of-type(3):checked~section:nth-of-type(3){display:block}
.ovw .ofc-panel>input:nth-of-type(3):checked~nav label:nth-of-type(3){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
.ovw .ofc-panel>input:nth-of-type(4):checked~section:nth-of-type(4){display:block}
.ovw .ofc-panel>input:nth-of-type(4):checked~nav label:nth-of-type(4){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
.ovw .ofc-panel>input:nth-of-type(5):checked~section:nth-of-type(5){display:block}
.ovw .ofc-panel>input:nth-of-type(5):checked~nav label:nth-of-type(5){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
.ovw .ofc-panel>input:nth-of-type(6):checked~section:nth-of-type(6){display:block}
.ovw .ofc-panel>input:nth-of-type(6):checked~nav label:nth-of-type(6){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
.ovw .ofc-panel>input:nth-of-type(7):checked~section:nth-of-type(7){display:block}
.ovw .ofc-panel>input:nth-of-type(7):checked~nav label:nth-of-type(7){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
.ovw .ofc-panel>input:nth-of-type(8):checked~section:nth-of-type(8){display:block}
.ovw .ofc-panel>input:nth-of-type(8):checked~nav label:nth-of-type(8){background:var(--oc-green,#2B6B4F);color:#fff;border-color:var(--oc-green,#2B6B4F)}
@media(max-width:600px){.ovw-sub{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin:0 -10px;padding-left:10px;padding-right:10px}.ovw-sub label{font-size:11px;padding:5px 9px}}
/* スマホでは比較部品（全体比較・学費比較）を画面いっぱいに（2026-09-07 中里さん「横の余白がなくなるように」） */
@media(max-width:600px){.ofc{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;border-left:0;border-right:0;border-radius:0}.ofc-panel{padding-left:12px;padding-right:12px}.ofc-more{margin-left:-12px;margin-right:-12px}.ovw-grp{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}.ovw-sub{margin:0 -12px;padding-left:12px;padding-right:12px}}