/* ================================================== */
/* 労災保険・雇用保険とは？ */
/* ================================================== */

/* レイアウト調整 */
.frame-deco { display:flex; flex-direction:column; gap:10px; }
.frame-content { background-color:var(--wh); border-radius:8px; display:flex; flex-direction:column; padding:16px; }
.frame-content p { font-weight:700; }
.frame-content .flex { font-size:20px; font-weight:900; justify-content:center; }
.rosai { border:2px solid var(--gr); }
.koyo { border:2px solid var(--or); }
.rosai .flex { color:var(--gr); }
.koyo .flex { color:var(--or); }

@container(min-width:960px) {

/* レイアウト調整 */
.frame-deco { padding:40px; flex-direction:row; gap:24px; }
.frame-content .flex { font-size:24px; }

}

/* ================================================== */
/* 共通部分 */
/* ================================================== */

/* ベース */
.wci-content { padding:0 0 80px 0; }
.content-block { margin:auto; max-width:calc( 100% - 40px ); margin-bottom:56px; }
.content-box { display:flex; flex-direction:column; gap:40px; }
.text-box { display:flex; flex-direction:column; gap:24px; }
.table-box { display:flex; flex-direction:column; gap:8px; }

/* 見出し */
.wci-content-title { color:var(--wh); font-size:24px; font-weight:600; line-height:36px; text-align:center; letter-spacing:1.2px; padding:8px 16px; margin-bottom:24px; }
.content-block h2 { margin-bottom:24px; }
.table-box h3 { color:var(--bl); font-size:16px; font-weight:700; }

/* オレンジの見出し */
.wci-orange-title { --bar-h:20px; align-items:center; color:var(--or-2); display:flex; font-size:20px; font-weight:900; gap:16px; justify-content:center; line-height:1.4; text-align:center; }
.wci-orange-title::before, .wci-orange-title::after { background-color:currentcolor; block-size:var(--bar-h); content:""; flex:1 0 24px; }
.wci-orange-title::before { border-end-end-radius:calc( var(--bar-h) / 2 ); border-start-end-radius:calc( var(--bar-h) / 2 ); }
.wci-orange-title::after { border-end-start-radius:calc( var(--bar-h) / 2 ); border-start-start-radius:calc( var(--bar-h) / 2 ); }

/* テキスト */
.text-frame { background-color:var(--wh); border-radius:8px; padding:16px; }
.text-frame p { font-weight:700; }

@container(min-width:960px) {

/* ベース */
.content-block { max-width:890px; margin-bottom:80px; }
.text-box { gap:0; }
.table-box { margin:auto; max-width:748px; }

/* 見出し */
.wci-content-title { font-size:30px; letter-spacing:1.5px; padding:10px 16px; margin-bottom:56px; }
.content-block h2 { margin-bottom:40px; }
.table-box h3 { font-size:18px; font-weight:800; text-align:center; }

/* 緑の見出し */
.wci-orange-title { font-size:24px; }
.wci-orange-title br { display:none; }

/* テキスト */
.content-block p { font-size:18px; line-height:29px; }
.text-frame { padding:24px; }
.text-frame { font-size:18px; font-weight:800; line-height:29px; }

}

/* ================================================== */
/* 労災保険 */
/* ================================================== */

/* ベース */
.green-content { background-color:#e6f7ec; }

/* 見出し */
.green-content .wci-content-title { background-color:var(--gr); }

/* テキスト */
.green-content .text-frame { border:2px solid var(--gr); }
.content-block p.flex { flex-direction:column; } 

@container(min-width:960px) {

/* テキスト */
.content-block p.flex { flex-direction:row; } 

}

/* ================================================== */
/* 雇用保険 */
/* ================================================== */

/* ベース */
.orange-content { background-color:#fef5e6; }

/* 見出し */
.orange-content .wci-content-title { background-color:var(--or-2); }

/* テキスト */
.orange-content .text-frame { border:2px solid var(--or-2); }