@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap");

:root { --green:#16a34a; --green-dark:#12843e; --ink:#111827; --muted:#586579; --line:#e4e8e5; --cream:#fffbea; --soft:#f6f8f4; font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif; color:var(--ink); background:#f2f3f1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:#f2f3f1; color:var(--ink); line-height:1.65; }
img { display:block; max-width:100%; }
a { color:inherit; }
button,input,select { font:inherit; }
.visually-hidden { position:absolute!important; overflow:hidden; width:1px; height:1px; margin:-1px; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:200; top:8px; left:8px; padding:8px 13px; pointer-events:none; opacity:0; background:var(--ink); color:#fff; transform:translateY(-150%); }
.skip-link:focus { pointer-events:auto; opacity:1; transform:none; }

.library-header,.library-footer,main { width:min(1260px,calc(100% - 32px)); margin-inline:auto; }
.library-header { position:sticky; z-index:100; top:0; display:grid; min-height:74px; padding:0 30px; grid-template-columns:auto 1fr auto auto; gap:24px; align-items:center; border-bottom:1px solid #edf0ed; border-radius:16px 16px 0 0; background:rgba(255,255,255,.96); box-shadow:0 6px 18px rgba(17,24,39,.04); backdrop-filter:blur(14px); }
.library-brand { display:inline-flex; gap:10px; align-items:center; font-size:21px; font-weight:700; letter-spacing:.08em; text-decoration:none; }
.brand-mark { position:relative; display:block; width:25px; height:30px; }
.brand-mark i { position:absolute; display:block; width:16px; height:25px; border-radius:100% 0 100% 0; transform:rotate(28deg); }
.brand-mark i:first-child { top:0; left:0; background:#7bd86d; }
.brand-mark i:last-child { right:0; bottom:0; background:#f4ce3d; }
.library-nav { display:flex; gap:clamp(15px,2vw,28px); align-items:center; }
.library-nav a { font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
.library-nav a:hover,.library-nav a.is-current { color:var(--green); }
.search-link { display:grid; width:34px; height:34px; place-items:center; font-size:27px; line-height:1; text-decoration:none; transform:rotate(-18deg); }
.header-cta { display:inline-flex; min-height:46px; padding:0 22px; gap:10px; justify-content:center; align-items:center; border-radius:999px; background:linear-gradient(100deg,#17a85b,#0ca878); box-shadow:0 9px 20px rgba(22,163,74,.18); color:#fff; font-size:13px; font-weight:700; text-decoration:none; }
.menu-button { display:none; border:0; background:transparent; }
main { overflow:hidden; background:#fff; box-shadow:0 20px 60px rgba(17,24,39,.08); }

.library-hero { display:grid; min-height:330px; grid-template-columns:.9fr 1.2fr; background:var(--cream); }
.library-hero__copy { position:relative; z-index:2; padding:34px 30px 34px 54px; background:linear-gradient(110deg,#fffdf4 0,#fff9e3 86%,rgba(255,249,227,.18)); }
.library-hero__copy::after { position:absolute; z-index:-1; top:0; right:-70px; width:120px; height:100%; background:linear-gradient(90deg,#fff9e3 10%,transparent); clip-path:polygon(0 0,100% 6%,62% 48%,100% 100%,0 100%); content:""; }
.breadcrumb { display:flex; gap:8px; margin-bottom:18px; color:#7c8798; font-size:10px; }
.breadcrumb a { text-decoration:none; }
.script-label { margin:0 0 3px; color:var(--green); font-size:13px; font-style:italic; font-weight:700; letter-spacing:.15em; }
.library-hero h1 { margin:0 0 10px; font-size:42px; line-height:1.2; letter-spacing:-.04em; }
.library-hero__copy > p:not(.script-label) { margin:0; color:#344054; font-size:13px; line-height:1.9; }
.library-hero dl { display:flex; margin:18px 0 0; gap:9px; }
.library-hero dl div { display:flex; min-width:78px; padding:8px 10px; align-items:baseline; gap:6px; border:1px solid rgba(22,163,74,.15); border-radius:8px; background:rgba(255,255,255,.7); }
.library-hero dt { color:#6b7280; font-size:9px; }
.library-hero dd { margin:0; color:var(--green-dark); font-size:14px; font-weight:800; }
.library-hero__visual { position:relative; min-width:0; overflow:hidden; }
.library-hero__visual > img { width:100%; height:100%; object-fit:cover; object-position:52% center; }
.hero-note { position:absolute; top:36px; right:42px; display:flex; width:245px; min-height:210px; padding:25px 26px; flex-direction:column; gap:8px; background:#fff1bb; box-shadow:0 12px 28px rgba(52,40,15,.18); transform:rotate(-5deg); }
.hero-note strong { font-size:16px; }
.hero-note span { font-size:13px; }
.hero-note small { margin-top:8px; font-size:11px; font-weight:700; line-height:1.9; }

.category-tabs { display:flex; padding:15px 22px; gap:9px; overflow-x:auto; border-bottom:1px solid var(--line); background:#fff; scrollbar-width:thin; }
.category-tab { display:grid; flex:0 0 142px; min-height:68px; padding:9px 11px; grid-template-columns:30px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; text-align:left; box-shadow:0 3px 10px rgba(17,24,39,.04); }
.category-tab > span { display:grid; width:30px; height:30px; grid-row:1/3; place-items:center; border-radius:50%; background:#eff8f1; color:var(--green); font-size:10px; font-weight:800; }
.category-tab strong { overflow:hidden; font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.category-tab small { color:#7c8798; font-size:8px; }
.category-tab.is-active { border-color:var(--green); background:linear-gradient(135deg,#28a85a,#11976c); color:#fff; box-shadow:0 8px 18px rgba(22,163,74,.18); }
.category-tab.is-active > span { background:rgba(255,255,255,.18); color:#fff; }
.category-tab.is-active small { color:rgba(255,255,255,.78); }

.course-library { padding:36px 30px 46px; }
.course-library__toolbar { display:flex; margin-bottom:18px; justify-content:space-between; align-items:flex-end; gap:24px; }
.section-kicker { margin:0 0 3px; color:var(--green); font-size:9px; font-weight:800; letter-spacing:.15em; }
.course-library__toolbar h2,.article-path h2 { display:inline; margin:0; font-size:24px; line-height:1.4; }
#visible-count { margin-left:10px; padding:3px 8px; border:1px solid #cfe6d5; border-radius:999px; color:var(--green-dark); font-size:9px; }
.course-controls { display:flex; gap:10px; }
.course-search { display:flex; width:330px; height:42px; padding:0 13px; gap:8px; align-items:center; border:1px solid var(--line); border-radius:9px; background:#fff; color:#7c8798; }
.course-search input { min-width:0; width:100%; border:0; outline:0; font-size:11px; }
.sort-select select { height:42px; padding:0 34px 0 13px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#344054; font-size:11px; }
.course-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.library-course-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 5px 15px rgba(17,24,39,.05); }
.library-course-card.is-hidden { display:none; }
.library-course-card > a,.course-card-static { display:block; height:100%; color:inherit; text-decoration:none; }
.library-course-card__image { position:relative; overflow:hidden; aspect-ratio:1.75; background:var(--soft); }
.library-course-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.library-course-card > a:hover img { transform:scale(1.025); }
.library-course-card__image em { position:absolute; top:9px; right:9px; padding:4px 8px; border-radius:999px; background:rgba(17,24,39,.78); color:#fff; font-size:7px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.library-course-card__body { display:flex; min-height:180px; padding:13px 14px 14px; flex-direction:column; }
.category-chip { align-self:flex-start; padding:2px 7px; border-radius:999px; background:#e6f6eb; color:#16844c; font-size:8px; font-weight:700; }
.library-course-card h3 { margin:7px 0 5px; font-size:15px; line-height:1.4; }
.library-course-card p { display:-webkit-box; overflow:hidden; min-height:48px; margin:0 0 12px; color:var(--muted); -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:10px; line-height:1.7; }
.course-facts { display:flex; margin-top:auto; gap:10px; align-items:center; color:#7c8798; font-size:8px; }
.course-facts b { display:grid; width:25px; height:25px; margin-left:auto; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); font-size:12px; }
.empty-state { padding:45px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); text-align:center; }

.article-path { padding:42px 30px 54px; background:linear-gradient(180deg,#fbfcf9,#f5f8f3); }
.article-path__heading { display:flex; margin-bottom:20px; justify-content:space-between; align-items:flex-end; gap:30px; }
.article-path__heading p:not(.section-kicker) { margin:5px 0 0; color:var(--muted); font-size:11px; }
.hierarchy { display:flex; align-items:center; gap:8px; color:#7c8798; font-size:10px; }
.hierarchy span { padding:8px 10px; border:1px solid #dce6dc; border-radius:8px; background:#fff; }
.hierarchy b { margin-right:3px; color:var(--green); font-size:16px; }
.hierarchy i { font-style:normal; }
.article-preview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.article-preview-grid article { overflow:hidden; border:1px solid var(--line); border-radius:9px; background:#fff; }
.article-preview-grid a { display:block; height:100%; text-decoration:none; }
.article-preview-grid img { width:100%; height:135px; object-fit:cover; }
.article-preview-grid article div { padding:10px 11px 12px; }
.article-preview-grid span { color:var(--green); font-size:8px; font-weight:700; }
.article-preview-grid h3 { display:-webkit-box; overflow:hidden; margin:4px 0 9px; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:12px; line-height:1.5; }
.article-preview-grid p { margin:0; color:#7c8798; font-size:8px; }
.article-preparing { padding:42px; border:1px dashed #cfd9cf; border-radius:12px; background:#fff; text-align:center; }
.article-preparing strong { font-size:17px; }
.article-preparing p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.library-footer { display:grid; min-height:105px; padding:22px 30px; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; border-top:1px solid var(--line); border-radius:0 0 16px 16px; background:#fff; }
.library-footer p { margin:0; color:var(--muted); font-size:10px; }
.library-footer small { color:#9ca3af; font-size:8px; letter-spacing:.08em; }

@media (max-width:900px) {
  .library-header { grid-template-columns:auto 1fr auto; }
  .library-nav { justify-self:end; }
  .library-nav a:nth-child(n+4) { display:none; }
  .search-link { display:none; }
  .course-card-grid,.article-preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:700px) {
  html { scroll-padding-top:62px; }
  body { background:#fff; }
  .library-header,.library-footer,main { width:100%; }
  .library-header { min-height:62px; padding:0 16px; grid-template-columns:auto 1fr auto auto; gap:13px; border-radius:0; }
  .library-brand { grid-row:1; font-size:17px; }
  .brand-mark { width:21px; height:25px; }
  .brand-mark i { width:13px; height:21px; }
  .library-nav { position:absolute; top:62px; right:12px; left:12px; display:none; padding:14px; border:1px solid var(--line); border-radius:12px; flex-direction:column; align-items:stretch; background:#fff; box-shadow:0 14px 34px rgba(17,24,39,.16); }
  .library-nav.is-open { display:flex; }
  .library-nav a:nth-child(n) { display:block; padding:6px; }
  .search-link { display:grid; grid-row:1; grid-column:3; font-size:24px; }
  .header-cta { display:none; }
  .menu-button { display:flex; width:23px; padding:0; grid-row:1; grid-column:4; flex-direction:column; gap:5px; }
  .menu-button i { width:23px; height:2px; border-radius:99px; background:var(--ink); }
  main { box-shadow:none; }
  .library-hero { min-height:0; grid-template-columns:1fr; }
  .library-hero__visual { min-height:190px; grid-row:1; }
  .library-hero__copy { grid-row:2; padding:18px 20px 22px; }
  .library-hero__copy::after { display:none; }
  .breadcrumb { margin-bottom:9px; }
  .library-hero h1 { font-size:31px; }
  .library-hero__copy > p:not(.script-label) { font-size:10px; line-height:1.8; }
  .library-hero dl { margin-top:12px; }
  .library-hero dl div { min-width:0; flex:1; padding:6px 8px; }
  .library-hero dd { font-size:12px; }
  .hero-note { top:17px; right:15px; width:150px; min-height:125px; padding:13px 14px; gap:3px; }
  .hero-note strong { font-size:9px; }
  .hero-note span { font-size:7px; }
  .hero-note small { margin-top:3px; font-size:6px; line-height:1.6; }
  .category-tabs { padding:11px 14px; gap:7px; }
  .category-tab { flex-basis:126px; min-height:59px; padding:7px 9px; grid-template-columns:27px 1fr; }
  .category-tab > span { width:27px; height:27px; }
  .course-library { padding:26px 16px 34px; }
  .course-library__toolbar { display:block; }
  .course-library__toolbar h2,.article-path h2 { font-size:20px; }
  .course-controls { margin-top:14px; }
  .course-search { min-width:0; width:100%; }
  .sort-select select { width:105px; padding-inline:9px; }
  .course-card-grid { grid-template-columns:1fr; gap:10px; }
  .library-course-card > a,.course-card-static { display:grid; grid-template-columns:118px 1fr; }
  .library-course-card__image { min-height:132px; aspect-ratio:auto; }
  .library-course-card__body { min-width:0; min-height:132px; padding:10px 11px; }
  .library-course-card h3 { margin:4px 0 3px; font-size:13px; }
  .library-course-card p { min-height:0; margin-bottom:7px; font-size:8px; }
  .course-facts { gap:7px; font-size:7px; }
  .course-facts b { width:22px; height:22px; }
  .library-course-card__image em { top:7px; right:7px; font-size:6px; }
  .article-path { padding:30px 16px 38px; }
  .article-path__heading { display:block; }
  .hierarchy { margin-top:14px; gap:5px; }
  .hierarchy span { flex:1; padding:6px; text-align:center; }
  .hierarchy b { display:block; font-size:13px; }
  .article-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .article-preview-grid h3 { font-size:10px; }
  .library-footer { min-height:90px; padding:18px 16px; grid-template-columns:1fr auto; }
  .library-footer p { display:none; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }