/* CAMP介護経営ライブラリー（2026-10-18 段2。10/18 TOP とログインの作り込み：指示書 docs/CLAUDE_CODE_指示_ライブラリーTOPとログイン_20261018.md の 2章）
   読み手は介護事業の経営者・管理者。本文 18px・行間 1.8、明暗差を大きく、ボタンは大きく。外部のフォント・スクリプトは読まない。 */
:root{
  --navy:#14335c; --navy-deep:#0d2341; --navy-soft:#e8eef6; --ink:#1c2633; --muted:#4d5a69; --line:#d5dde7;
  --bg:#ffffff; --bg-soft:#f5f7fa; --accent:#d9631e; --accent-deep:#b84f12; --accent-ink:#ffffff; --link:#1a4f8f; --danger:#b42318; --warn-bg:#fff4e5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",Meiryo,sans-serif;font-size:18px;line-height:1.8;-webkit-text-size-adjust:100%}
a{color:var(--link)}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:20}

/* ヘッダー */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--navy-deep);text-decoration:none;white-space:nowrap}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--ink);text-decoration:none;font-size:16px}
.nav a:hover{color:var(--link);text-decoration:underline}
.nav .nav-page{display:inline}
.nav form{margin:0}
button.link{background:none;border:0;color:var(--ink);font:inherit;font-size:16px;cursor:pointer;padding:0}
@media (max-width:860px){.nav .nav-page{display:none}.nav{gap:14px}.brand{font-size:16px}.brand-mark{width:26px;height:26px}}
@media (max-width:560px){.top-in{flex-wrap:wrap;gap:4px 12px;padding:8px 0}.nav{width:100%;justify-content:flex-end}}   /* 狭い画面は2段（上に名前、下にログインと登録） */

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:2px solid transparent;line-height:1.3;min-height:48px;padding:12px 26px}
.btn-main{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-size:19px;min-height:58px;padding:14px 32px;box-shadow:0 3px 0 var(--accent-deep)}
.btn-main:hover{background:var(--accent-deep)}
.btn-sub{background:var(--bg);color:var(--navy);border-color:var(--navy)}
.btn-sub:hover{background:var(--navy-soft)}
.btn-head{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);min-height:42px;padding:8px 16px;font-size:16px}
.btn-quiet{background:var(--bg);color:var(--navy);border-color:var(--line)}
.btn-danger{background:var(--bg);color:var(--danger);border-color:var(--danger)}

/* 最初の画面 */
.hero{background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 70%);color:#fff;padding:72px 0 64px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.05)}
.hero-kicker{display:inline-block;font-size:16px;font-weight:700;letter-spacing:.06em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 16px;margin:0 0 18px}
.hero h1{font-size:40px;line-height:1.45;margin:0 0 20px;letter-spacing:.02em}
.hero p.lead{font-size:19px;max-width:760px;margin:0 0 30px;color:#eef3fa}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .btn-sub{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.hero .btn-sub:hover{background:rgba(255,255,255,.1)}
.hero-note{font-size:16px;color:#d6e0ee;margin:14px 0 0}
@media (max-width:640px){.hero{padding:48px 0 44px}.hero h1{font-size:28px}.hero p.lead{font-size:18px}.hero-btns .btn{width:100%}}

/* 区画 */
.sec{padding:64px 0}
.sec-soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:30px;line-height:1.45;margin:0 0 10px;color:var(--navy-deep)}
.sec .sec-lead{color:var(--muted);margin:0 0 30px;max-width:780px}
.eyebrow{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--accent-deep);margin:0 0 6px}
@media (max-width:640px){.sec{padding:44px 0}.sec h2{font-size:24px}}

/* 3つのカード（読めるもの） */
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kind{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.kind svg{width:44px;height:44px;margin-bottom:8px}
.kind h3{font-size:21px;margin:0 0 6px;color:var(--navy-deep)}
.kind p{margin:0;color:var(--ink)}
@media (max-width:860px){.kinds{grid-template-columns:1fr}}

/* 公開中の資料（ログイン前は題名・種類・サムネイルだけ） */
.shelf-h{font-size:20px;margin:40px 0 14px;color:var(--navy-deep)}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.book{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--bg)}
.book:hover{border-color:var(--navy)}
.book-img{position:relative;aspect-ratio:16/9;background:var(--navy-soft)}
.book-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.book-kind{position:absolute;left:10px;top:10px;background:var(--navy-deep);color:#fff;font-size:14px;font-weight:700;border-radius:6px;padding:2px 10px}
.book-t{font-weight:700;padding:12px 14px 4px;line-height:1.6}
.book-lock{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--accent-deep);padding:0 14px 14px}
.book-lock svg{width:16px;height:16px;flex:0 0 auto}
@media (max-width:860px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.shelf{grid-template-columns:1fr}}

/* テーマ */
.themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.themes li{background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--navy);border-radius:10px;padding:18px 18px;font-weight:700;font-size:19px;color:var(--navy-deep)}
@media (max-width:860px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.themes{grid-template-columns:1fr}}

/* 制度情報・講演日程 */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.news-box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:20px 20px 14px}
.news-box h3{font-size:19px;margin:0 0 8px;color:var(--navy-deep)}
.news{list-style:none;margin:0;padding:0}
.news li{padding:10px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.65}
.news li:last-child{border-bottom:0}
.news-d{display:block;font-size:15px;color:var(--muted)}
.tag{display:inline-block;margin-left:6px;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;vertical-align:1px}
.src{font-size:16px;margin:10px 0 0}
.muted{color:var(--muted);font-size:16px}
@media (max-width:960px){.news-grid{grid-template-columns:1fr}}
.lecture{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.lecture li{background:var(--bg);border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:10px;padding:14px 16px}
.lecture .d{display:block;font-weight:700;color:var(--navy-deep)}
@media (max-width:960px){.lecture{grid-template-columns:1fr}}

/* 監修者 */
.author{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:30px}
.author.no-photo{grid-template-columns:1fr}
.author-photo{width:160px;height:160px;border-radius:50%;object-fit:cover}
.author-name{font-size:26px;font-weight:700;margin:0;color:var(--navy-deep)}
.author-kana{font-size:16px;color:var(--muted);margin:0 0 10px}
.author-roles{list-style:none;margin:0 0 14px;padding:0}
.author-roles li{padding-left:1.2em;position:relative}
.author-roles li::before{content:"";position:absolute;left:0;top:.75em;width:.55em;height:.55em;background:var(--navy);border-radius:2px}
@media (max-width:640px){.author{grid-template-columns:1fr;padding:22px}}

/* ご利用の流れ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:st}
.steps li{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:26px 22px;position:relative;counter-increment:st}
.steps li::before{content:counter(st);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:20px;margin-bottom:10px}
.steps h3{font-size:20px;margin:0 0 6px;color:var(--navy-deep)}
.steps p{margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* よくあるご質問 */
.faq{max-width:860px}
.faq details{background:var(--bg);border:1px solid var(--line);border-radius:10px;margin:0 0 12px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 48px 16px 20px;position:relative;list-style:none;color:var(--navy-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:18px;top:14px;font-size:22px;color:var(--navy)}
.faq details[open] summary::after{content:"－"}
.faq details p{margin:0;padding:0 20px 18px}

/* 最後の呼びかけ */
.cta{background:var(--navy-deep);color:#fff;text-align:center;padding:64px 0}
.cta h2{color:#fff;font-size:30px;margin:0 0 24px}
@media (max-width:640px){.cta h2{font-size:23px}.cta .btn{width:100%}}

/* フッター */
.foot{background:#0b1a30;color:#cfd8e4;padding:36px 0;font-size:16px}
.foot a{color:#fff}
.foot-name{font-weight:700;font-size:18px;color:#fff;margin:0 0 6px}
.foot p{margin:4px 0}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}

/* ログインと会員の手続きの頁 */
.page{padding:48px 0 64px}
.page-h{font-size:28px;margin:0 0 20px;color:var(--navy-deep)}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:30px}
.panel-soft{background:var(--navy-soft);border-color:#c9d6e8}
.panel h2{font-size:23px;margin:0 0 16px;color:var(--navy-deep)}
.panel ul.kinds-mini{margin:0 0 20px;padding-left:1.2em}
.panel ul.kinds-mini li{margin:4px 0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.form input[type=email],.form input[type=text],.form input[type=password]{font:inherit;font-size:18px;padding:12px 14px;border:2px solid #b8c4d3;border-radius:10px;width:100%}
.form input:focus{outline:3px solid #9cc0ec;border-color:var(--link)}
.form .btn{align-self:flex-start}
@media (max-width:640px){.form .btn{align-self:stretch}}
.chk{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-weight:400}
.chk input{width:22px;height:22px;margin-top:5px;flex:0 0 auto}
.agree{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--bg-soft)}
.agree p{margin:6px 0 0}
.req,.opt{font-size:14px;font-weight:400;margin-left:8px;color:var(--danger)}.opt{color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.flash{background:var(--navy-soft);border-left:5px solid var(--navy);padding:12px 16px;margin:20px 0}
.err{background:var(--warn-bg);border-left:5px solid var(--danger);padding:8px 16px;margin:0 0 18px}
.err p{margin:6px 0}
.doc{max-width:820px}
.doc h2{font-size:26px}.doc h3{font-size:20px;margin-top:28px}

/* 資料の頁（ログインの後。中身と並びは今のまま。見た目だけそろえる） */
.block{margin:36px 0}
.block h2{font-size:23px;margin:0 0 14px;padding-bottom:8px;border-bottom:3px solid var(--navy-soft);color:var(--navy-deep)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--bg)}
.card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--navy-soft);display:block}
.card-t{font-weight:700;padding:12px 14px 4px}
.card-d{font-size:16px;color:var(--muted);padding:0 14px 14px}
/* 10/18 lib6：カテゴリーの区画の中で、種類（動画・ホワイトペーパー・その他資料）をカードの左上の印で出す（ログイン前の TOP の .book-kind と同じ形） */
.card-img{position:relative;display:block}
.card-kind{position:absolute;left:10px;top:10px;background:var(--navy-deep);color:#fff;font-size:14px;font-weight:700;border-radius:6px;padding:2px 10px}
/* 10/18 lib7：資料は100件ほどになる前提。サムネイルを小さくし、パソコンは1行に4枚、スマートフォンは2枚。カードに公開日。区画は8件までで、多いときは「このカテゴリーをすべて見る」 */
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card-t{font-size:17px;line-height:1.5;padding:10px 12px 2px}
.card-date{font-size:14px;color:var(--muted);padding:0 12px 6px}
.card-d{font-size:15px;line-height:1.6;padding:0 12px;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{margin:12px 0 0;text-align:right;font-size:17px}
.more a{font-weight:700}
.back{margin:8px 0;font-size:16px}
/* 10/18 lib8：カテゴリーの区画の中を、種類の小区画に分ける。小区画は1行（パソコン4枚・スマートフォン2枚）だけ。1行に入らないのがスマートフォンだけのときは、「すべて見る」もスマートフォンだけに出す */
.kind-sec{margin:18px 0 0}
.kind-h{font-size:18px;line-height:1.5;color:var(--navy-deep);margin:0 0 10px;padding-left:10px;border-left:4px solid var(--navy-soft)}
h2.kind-h{font-size:20px;margin:24px 0 12px}
.more-sp{display:none;margin:10px 0 0;text-align:right;font-size:17px}
.more-sp a{font-weight:700}
@media (max-width:640px){.cards-row .card:nth-child(n+3){display:none}.more-sp{display:block}.kind-h{font-size:17px}}
@media (max-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-t{font-size:16px;padding:8px 10px 2px}.card-date{font-size:13px;padding:0 10px 4px}.card-d{display:none}.card-kind{font-size:12px;left:6px;top:6px;padding:1px 7px}}

/* 3章（構成案①〜⑨）の区画の形 */
.hero-badge{display:inline-block;font-size:16px;font-weight:700;background:var(--accent);color:#fff;border-radius:6px;padding:4px 14px;margin:0 0 18px;letter-spacing:.02em}
.hero h1{font-size:44px}
.hero-sub{font-size:23px;font-weight:700;line-height:1.6;margin:0 0 24px;color:#fff}
.hero-body{max-width:780px;margin:0 0 30px}
.hero-body p{margin:0 0 12px;color:#eef3fa;font-size:18px}
.hero-body p.strong{font-weight:700;color:#fff;font-size:19px}
@media (max-width:640px){.hero h1{font-size:30px}.hero-sub{font-size:19px}}
.sec h2.big{font-size:32px}
@media (max-width:640px){.sec h2.big{font-size:24px}}
.issues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.issues li{background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:12px;padding:20px 22px}
.issues .no{display:block;font-size:15px;font-weight:700;color:var(--accent-deep);letter-spacing:.08em}
.issues h3{font-size:21px;margin:2px 0 6px;color:var(--navy-deep)}
.issues p{margin:0}
.issues li:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:760px){.issues{grid-template-columns:1fr}}
.closing{margin:28px 0 0;padding:18px 22px;background:var(--navy-deep);color:#fff;border-radius:12px;font-weight:700;font-size:19px}
.sec-btn{margin:30px 0 0;text-align:center}
@media (max-width:640px){.sec-btn .btn{width:100%}}
.kind .emoji{display:block;font-size:34px;line-height:1;margin-bottom:10px}
.shelf-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.shelf-big .book-t{font-size:20px;padding:14px 18px 6px}
.shelf-big .book-lock{font-size:16px;padding:0 18px 16px}
.book-badge{position:absolute;right:10px;top:10px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;border-radius:6px;padding:2px 10px}
@media (max-width:760px){.shelf-big{grid-template-columns:1fr}}
.author-lead p{margin:0 0 10px}
.cta .cta-sub{font-size:22px;font-weight:700;margin:0 0 14px}
.cta .cta-body{max-width:760px;margin:0 auto 26px;color:#dbe4f0}

/* 2章：小濱の指定した画像（library_hero_image.jpg）の方向。濃い紺に、赤と黄の強い色で危機感。要所に赤い帯・黄色の下線 */
:root{--red:#d8192b;--red-deep:#a90f1e;--yellow:#ffd21f;--navy:#0f2b57;--navy-deep:#0a1f42;--accent:#e8401c;--accent-deep:#b92e0f}
.hero{background:linear-gradient(160deg,#0a1f42 0%,#123a73 100%);padding:56px 0 56px}
.hero::after{display:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:40px;align-items:start}
.hero-badge{background:var(--yellow);color:var(--navy-deep);font-size:17px;font-weight:800;border-radius:4px;padding:6px 14px}
.hero h1{font-size:46px;font-weight:900;line-height:1.35;margin:0 0 18px}
.hero h1 .band{display:inline-block;background:var(--red);color:#fff;padding:2px 18px 4px;transform:skewX(-8deg);margin:0 10px 10px 0;box-shadow:4px 4px 0 rgba(0,0,0,.25)}
.hero h1 .band span{display:inline-block;transform:skewX(8deg)}
.mark{background:linear-gradient(transparent 62%,var(--yellow) 62%);color:inherit;padding:0 2px}
.hero .mark{background:linear-gradient(transparent 62%,rgba(255,210,31,.85) 62%);color:#fff}
.hero-sub{font-size:24px;font-weight:800}
.hero-body p.strong{color:var(--yellow);font-size:20px}
.btn-main{background:linear-gradient(180deg,#ff6a2b 0%,var(--red) 100%);border-color:var(--red-deep);box-shadow:0 4px 0 var(--red-deep);font-size:20px}
.btn-main:hover{background:linear-gradient(180deg,#ff5a1a 0%,var(--red-deep) 100%)}
.btn-head{background:var(--red);border-color:var(--red)}
.hero-fig{margin:0}
.hero-fig img{display:block;width:100%;height:auto;border-radius:10px;border:3px solid rgba(255,255,255,.85);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.hero-fig figcaption{font-size:14px;color:#cdd8ea;margin-top:6px;text-align:right}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.hero-fig{max-width:100%}}
@media (max-width:640px){.hero h1{font-size:31px}.hero h1 .band{padding:2px 12px 4px}.hero-sub{font-size:20px}}
.sec h2.big{font-weight:900;position:relative;padding-left:18px}
.sec h2.big::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:7px;background:var(--red);border-radius:2px}
.issues li{border-left-color:var(--red)}
.issues .no{display:inline-block;background:var(--red);color:#fff;border-radius:4px;padding:0 10px;letter-spacing:.06em}
.closing{background:var(--red);font-size:20px;box-shadow:0 4px 0 var(--red-deep)}
.kind{border-top:5px solid var(--navy)}
.book-badge{background:var(--red)}
.book-kind{background:var(--navy-deep)}
.themes li{border-left-color:var(--red)}
.lecture li{border-top-color:var(--red)}
.steps li::before{background:var(--red)}
.cta{background:linear-gradient(160deg,#0a1f42 0%,#123a73 100%)}
.cta h2{font-weight:900}
.cta .cta-sub{color:var(--yellow)}
.eyebrow{color:var(--red-deep)}
.hero h1 .nw{display:inline-block;white-space:nowrap}   /* 「令和9年度介護報酬改定」を言葉の途中で折り返さない */
.nav a.btn-head{color:#fff}   /* ヘッダーの登録ボタンの字は白（.nav a の字の色に負けていた） */

/* 本番で足したもの（段2 の頁の部品の名前を、そのまま新しい見た目で使えるようにする） */
.btn:not([class*="btn-"]){background:linear-gradient(180deg,#ff6a2b 0%,var(--red) 100%);color:#fff;border-color:var(--red-deep);box-shadow:0 4px 0 var(--red-deep);font-size:19px;min-height:54px;padding:12px 28px}
.btn:not([class*="btn-"]):hover{background:linear-gradient(180deg,#ff5a1a 0%,var(--red-deep) 100%)}
.btn-o{background:var(--bg);color:var(--navy);border-color:var(--navy)}
.btn-o:hover{background:var(--navy-soft)}
.kind-icon{display:block;width:48px;height:48px;margin-bottom:10px}
.news-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}
.news-grid-2 .block{margin:0}
@media (max-width:960px){.news-grid-2{grid-template-columns:1fr}}