/* ================================================== */
/* 資格講習サポート */
/* ================================================== */

/* カラー */
:root {
--or-plus:#ea5504;
}

/* 見出し */
.fraem-plus h3 { text-align:center; margin-bottom:8px; }
.fraem-plus.f-gr h3 { color:var(--gr); }
.fraem-plus.f-or h3 { color:var(--or); }

/* カコミ */
.frame-deco { display:flex; flex-direction:column; gap:10px; padding:16px; }
.fraem-plus { background-color:var(--wh); border-radius:8px; padding:16px; }
.fraem-plus.f-gr { border:2px solid var(--gr); }
.fraem-plus.f-or { border:2px solid var(--or); }
.color-plus-or { color:var(--or-plus); }

/* リスト */
.button-list { align-items:center; display:flex; flex-direction:column; gap:24px; justify-content:center; margin:auto; width:241px; }
.button-list li a { transition:.3s; opacity:1; }
.button-list li a:hover { transition:.3s; opacity:0.7; }

/* 講習一覧 */
.qualifications-list { gap:16px; }
.coures { background-color:var(--wh); border:2px solid transparent; box-shadow:4px 4px 0 0 rgba( 0, 0, 0, 0.25 ); }

/* 展開時：シャドウを外してボーダーで巻く */
.coures[open] { border-color:#fff0cd; box-shadow:0 0 0 0 transparent; }

/* ラベル */
.coures-link { align-items:center; background-color:var(--ye); display:grid; font-size:14px; font-weight:400; gap:6px; line-height:18px; padding:8px 16px; }
summary.coures-link { cursor:pointer; }
summary.coures-link::-webkit-details-marker { display:none; }
.coures[open] .coures-link { background-color:#fff0cd; }

/* ラベル：開催日 */
.coures-date { align-items:center; display:flex; flex-wrap:wrap; font-feature-settings:"palt"; font-size:13px; font-weight:700; gap:4px 8px; line-height:18px; }
.coures-date::before { background-color:var(--or); content:""; flex-shrink:0; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / 100% 100%; height:14px; width:14px; }
.coures-count { border:1px solid currentcolor; border-radius:2px; font-size:11px; font-weight:600; line-height:16px; padding:0 6px; }
.coures-tag { gap:8px; }

/* 開催予定なし：グレー表示 */
.coures.is-none[open] { border-color:#f2f2f2; }
.coures.is-none .coures-link { background-color:#e5e5e5; color:var(--gray); }
.coures.is-none[open] .coures-link { background-color:#f2f2f2; }
.coures-tag span { align-items:center; color:var(--wh); display:flex; font-size:12px; font-weight:600; justify-content:center; line-height:12px; height:20px; width:64px; }
.tag-master { background-color:var(--gr); letter-spacing:-1.08px; }
.tag-next { background-color:var(--or); }

/* 展開部分 */
.coures-body { display:flex; font-size:16px; font-weight:400; flex-direction:column; gap:24px; text-align:justify; line-height:28px; padding:16px; }
.coures-body > * + * { margin-block-start:8px; }
.coures-body-list { gap:16px; }
.coures-body-list li { flex-direction:column; gap:4px; }
.list-label { align-items:center; background-color:#99cac6; border-radius:40px; color:var(--wh); display:flex; font-weight:700; justify-content:center; height:33px; width:112px; }

/* 申し込み */
.apply-list { gap:16px; }
.apply-button { font-size:16px; padding:8px 16px; text-align:center; height:auto; min-height:52px; max-width:100%; width:100%; }
.apply-label { flex:1; }
.down-arrow { align-items:center; background-color:var(--wh); border-radius:50%; display:flex; flex-shrink:0; justify-content:center; height:32px; width:32px; }
.apply-note a { text-decoration:underline; }

/* ホバー：閉じているときのみ */
@media (hover:hover) {

.coures { transition:border-color .3s, box-shadow .3s, transform .3s; }
.coures-link { transition:background-color .3s; }
.coures:not([open]):hover { background-color:#fff0cd; box-shadow:0 0 0 0 transparent; transform:translate( 4px, 4px ); }
.coures.is-none:not([open]):hover { background-color:#f2f2f2; }
.coures.is-none:not([open]):hover .coures-link { background-color:#f2f2f2; }

}

/* 開閉アニメーション（対応ブラウザのみ） */
@supports (interpolate-size:allow-keywords) {
:root { interpolate-size:allow-keywords; }
.coures::details-content { block-size:0; overflow:hidden; transition:block-size .3s, content-visibility .3s allow-discrete; }
.coures[open]::details-content { block-size:auto; }
}

@container(min-width:960px) {

/* カラー */
:root {
--or-plus:#ea3a04;
}

/* カコミ */
.frame-deco { gap:24px; padding:40px; }

/* リスト */
.button-list { display:flex; flex-direction:row; gap:40px; width:654px; }

/* 講習一覧 */
.qualifications-list { --coures-date-w:280px; gap:24px; }
.coures-link { column-gap:24px; font-size:18px; grid-template-columns:1fr var(--coures-date-w); padding:16px 24px; }
.coures-link br { display:none; }

/* ラベル：開催日 */
.coures-date { align-self:stretch; border-inline-start:1px solid rgba( 0, 0, 0, 0.2 ); font-size:16px; gap:4px 10px; line-height:24px; padding-inline-start:16px; }
.coures-date::before { height:16px; width:16px; }
.coures-count { font-size:12px; line-height:18px; }
.coures.is-none .coures-link::after { align-self:stretch; border-inline-start:1px solid rgba( 0, 0, 0, 0.2 ); content:""; }

/* 展開部分 */
.coures-body { font-size:18px; line-height:29px; padding:24px 40px; }
.coures-body-list { gap:24px; }
.coures-body-list li { flex-direction:row; gap:16px; }
.list-label { font-weight:800; height:36px; width:120px; }
.list-text { flex:1; }

/* 申し込み */
.apply-list { gap:24px; }
.apply-button { font-size:20px; min-height:64px; width:fit-content; }
.apply-button br { display:none; }
.apply-label { flex:0 1 auto; }
.apply-note { text-align:center; }

}