.clg-home { --clg-main:#159dad; --clg-main-dark:#087b91; --clg-main-soft:#eaf9fb; --clg-navy:#102f68; --clg-muted:#667b9d; --clg-line:#dfeaf3; margin:0; background:#fff; color:var(--clg-navy); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.55; }
.clg-home.clg-palette-blue { --clg-main:#3d7be4; --clg-main-dark:#265ab5; --clg-main-soft:#edf4ff; }
.clg-home * { box-sizing:border-box; }
.clg-home a { color:inherit; text-decoration:none; }
.clg-home a:hover { color:var(--clg-main-dark); }
.clg-home button,.clg-home input { font:inherit; }
.clg-home img { max-width:100%; }
.clg-shell { max-width:1390px; width:calc(100% - 40px); margin:auto; }
.clg-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.clg-preview-ribbon { position:relative; z-index:30; min-height:32px; display:flex; align-items:center; justify-content:center; gap:12px; padding:4px 12px; background:#123166; color:#fff; font-size:12px; font-weight:700; }
.clg-preview-ribbon span { opacity:.78; font-weight:400; }
.clg-preview-ribbon a { padding:2px 9px; border:1px solid #fff9; border-radius:20px; color:#fff; }
.clg-preview-ribbon a:hover { color:#fff; background:#ffffff2e; }
.clg-header { position:relative; z-index:10; background:#fff; box-shadow:0 2px 16px #1c4a7014; }
.clg-header-inner { min-height:82px; display:flex; align-items:center; gap:26px; }
.clg-brand { display:flex; align-items:center; gap:12px; flex:none; min-width:260px; }
.clg-brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:40% 40% 50% 50%; background:linear-gradient(135deg,var(--clg-main),#8edbe5); color:#fff; font-size:29px; transform:rotate(-12deg); }
.clg-brand strong { display:block; font-family:Georgia,serif; font-size:23px; line-height:1.1; letter-spacing:.08em; }
.clg-brand small { display:block; margin-top:4px; font-size:11px; font-weight:700; letter-spacing:.07em; }
.clg-nav { display:flex; align-items:center; justify-content:center; flex:1; gap:clamp(12px,2.2vw,34px); font-size:14px; font-weight:800; white-space:nowrap; }
.clg-header-cta { flex:none; background:linear-gradient(120deg,var(--clg-main),var(--clg-main-dark)); color:#fff!important; border-radius:99px; padding:11px 19px; font-size:13px; font-weight:800; box-shadow:0 6px 14px #00799324; }
.clg-header-cta span { margin-left:7px; }
.clg-header-cta:hover { filter:brightness(1.06); }
.clg-hero { min-height:480px; background-image:linear-gradient(90deg,#fffffff5 0%,#ffffffdb 33%,#ffffff17 65%,#ffffff55 100%),var(--hero-image); background-size:cover; background-position:center; }
.clg-hero-inner { min-height:480px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.clg-hero-copy { width:min(690px,57%); padding:28px 0 30px; }
.clg-handnote { margin:0 0 12px; color:#216db4; font-family:cursive; font-size:22px; letter-spacing:.18em; transform:rotate(-4deg); transform-origin:left; }
.clg-hero h1 { margin:0; font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif; color:var(--clg-navy); font-size:clamp(35px,4.5vw,68px); line-height:1.24; font-weight:900; letter-spacing:.01em; text-shadow:0 2px 5px #fff; }
.clg-hero h1 em { color:var(--clg-main-dark); font-style:normal; }
.clg-hero-intro { margin:22px 0 24px; font-size:16px; font-weight:700; line-height:1.55; text-shadow:0 1px 5px #fff; }
.clg-search { width:min(660px,100%); min-height:53px; display:flex; align-items:center; padding:5px 5px 5px 20px; gap:12px; border:1px solid #c9dce9; border-radius:99px; background:#fff; box-shadow:0 8px 20px #1c4a7020; }
.clg-search>span { color:var(--clg-main); font-size:32px; line-height:1; }
.clg-search input { min-width:0; flex:1; border:0!important; background:none!important; box-shadow:none!important; outline:0; color:var(--clg-navy); font-size:14px; }
.clg-search input::placeholder { color:#8da1b7; }
.clg-search button { border:0; border-radius:99px; padding:9px 30px; background:linear-gradient(120deg,var(--clg-main),var(--clg-main-dark)); color:#fff; font-weight:800; cursor:pointer; }
.clg-hero-links { display:flex; gap:10px; margin-top:14px; }
.clg-hero-links a { display:flex; align-items:center; justify-content:space-between; min-width:160px; padding:9px 13px; border:1px solid var(--clg-main); border-radius:99px; background:#ffffffeb; color:var(--clg-main-dark); font-size:13px; font-weight:800; }
.clg-hero-links a:hover { background:var(--clg-main-soft); }
.clg-hero-notes { flex:0 0 155px; align-self:center; margin-left:auto; }
.clg-hero-notes p { display:flex; align-items:center; gap:8px; margin:13px 0; font-size:29px; color:var(--clg-main); text-shadow:0 1px 5px #fff; }
.clg-hero-notes span { font-size:13px; color:var(--clg-navy); font-weight:900; line-height:1.4; }
.clg-sections { padding:18px 0 42px; }
.clg-section { margin-bottom:20px; padding:16px 16px 18px; border-radius:16px; background:#f8fbff; }
.clg-section.clg-tinted { background:var(--clg-main-soft); }
.clg-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 12px; }
.clg-heading>div { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
.clg-heading-icon { color:var(--clg-main); font-size:28px; font-weight:900; line-height:1; }
.clg-heading h2 { margin:0; font-family:Georgia,"Yu Mincho",serif; font-size:23px; line-height:1.2; color:var(--clg-navy); }
.clg-heading p { margin:1px 0 0; font-size:12px; font-weight:700; color:var(--clg-muted); }
.clg-heading>a { font-size:12px; font-weight:800; color:var(--clg-main-dark); white-space:nowrap; }
.clg-guide-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.clg-guide-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; background:#fff; border:1px solid var(--clg-line); border-radius:8px; box-shadow:0 3px 7px #193e6210; transition:transform .15s, box-shadow .15s; }
.clg-guide-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px #193e6224; }
.clg-guide-card>img,.clg-guide-placeholder { display:block; width:100%; height:136px; object-fit:cover; background:linear-gradient(120deg,#e2f8fc,#edf2ff); }
.clg-guide-placeholder { display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--clg-main-dark); }
.clg-guide-body { display:flex; flex:1; flex-direction:column; padding:10px 10px 8px; min-height:116px; }
.clg-guide-body strong { font-size:14px; line-height:1.35; font-weight:900; }
.clg-guide-body small { display:block; margin-top:6px; color:var(--clg-muted); font-size:11px; line-height:1.45; font-weight:700; }
.clg-arrow { align-self:flex-end; display:grid; place-items:center; width:25px; height:25px; margin-top:auto; border-radius:50%; background:var(--clg-main-soft); color:var(--clg-main-dark); font-size:16px; }
.clg-topic-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.clg-topic-grid>a { position:relative; display:grid; grid-template-columns:45px minmax(0,1fr); grid-template-rows:auto 1fr; align-items:center; min-height:91px; gap:0 8px; padding:10px 8px; background:#fff; border:1px solid var(--clg-line); border-radius:9px; }
.clg-topic-grid>a>span { grid-row:1 / 3; display:grid; place-items:center; width:43px; height:43px; border-radius:50%; background:var(--clg-main-soft); color:var(--clg-main-dark); font-size:24px; font-weight:800; }
.clg-topic-grid strong { font-size:13px; font-weight:900; }
.clg-topic-grid small { color:var(--clg-muted); font-size:10px; line-height:1.4; font-weight:700; }
.clg-topic-grid b { position:absolute; right:7px; bottom:5px; color:var(--clg-main-dark); }
.clg-purpose { background:#f2f7ff; }
.clg-purpose-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.clg-purpose-grid>a { position:relative; min-height:175px; display:flex; flex-direction:column; padding:16px; border:1px solid var(--clg-line); border-radius:10px; background:linear-gradient(135deg,#fff 55%,var(--clg-main-soft)); overflow:hidden; }
.clg-purpose-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; margin-bottom:8px; background:var(--clg-main-soft); color:var(--clg-main-dark); font-size:25px; font-weight:900; }
.clg-purpose-grid strong { font-family:Georgia,"Yu Mincho",serif; font-size:21px; }
.clg-purpose-grid b { font-size:12px; }
.clg-purpose-grid small { margin-top:4px; color:var(--clg-muted); font-weight:700; }
.clg-purpose-grid i { position:absolute; right:12px; bottom:10px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--clg-main-soft); color:var(--clg-main-dark); font-style:normal; }
.clg-bottom-grid { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.clg-bottom-grid .clg-section { margin-bottom:0; }
.clg-latest-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.clg-latest-grid>a { overflow:hidden; border:1px solid var(--clg-line); border-radius:7px; background:#fff; }
.clg-latest-grid img { display:block; width:100%; height:105px; object-fit:cover; }
.clg-latest-grid>a>span { display:block; padding:7px 8px; }
.clg-latest-grid time { display:block; margin-bottom:4px; color:var(--clg-muted); font-size:10px; }
.clg-latest-grid strong { display:block; font-size:12px; line-height:1.4; }
.clg-faq-list { display:grid; gap:6px; }
.clg-faq-list a { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--clg-line); border-radius:6px; background:#fff; color:#31578c; font-size:11px; font-weight:800; }
.clg-faq-list span { color:var(--clg-main-dark); }
.clg-footer { padding:22px 0; border-top:1px solid var(--clg-line); background:#fbfdff; }
.clg-footer>.clg-shell { display:flex; align-items:center; gap:30px; }
.clg-footer strong { display:block; font-family:Georgia,serif; font-size:18px; letter-spacing:.06em; }
.clg-footer small { display:block; color:var(--clg-muted); font-size:10px; }
.clg-footer nav { display:flex; gap:20px; margin-left:auto; font-size:11px; font-weight:800; }
.clg-footer p { margin:0; font-size:10px; color:var(--clg-muted); }
@media(max-width:1100px) { .clg-nav { gap:12px; font-size:12px; } .clg-brand { min-width:220px; } .clg-brand strong { font-size:18px; } .clg-header-cta { font-size:11px; padding:10px 13px; } .clg-hero-notes { display:none; } .clg-hero-copy { width:min(690px,68%); } .clg-guide-grid,.clg-topic-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px) { .clg-shell { width:calc(100% - 28px); } .clg-preview-ribbon { flex-wrap:wrap; } .clg-preview-ribbon span { display:none; } .clg-header-inner { min-height:72px; flex-wrap:wrap; gap:8px 10px; padding:10px 0; } .clg-brand { min-width:0; } .clg-brand-mark { width:34px; height:34px; font-size:23px; } .clg-brand strong { font-size:16px; } .clg-brand small { font-size:9px; } .clg-nav { order:3; width:100%; justify-content:space-between; overflow-x:auto; gap:16px; font-size:11px; } .clg-header-cta { margin-left:auto; font-size:10px; padding:8px 10px; } .clg-hero,.clg-hero-inner { min-height:0; } .clg-hero { background-image:linear-gradient(90deg,#ffffffee,#ffffffd4),var(--hero-image); background-position:66% center; } .clg-hero-copy { width:100%; padding:37px 0 30px; } .clg-handnote { font-size:17px; } .clg-hero h1 { font-size:clamp(34px,9vw,48px); } .clg-hero-intro { font-size:13px; } .clg-search { min-height:48px; padding-left:12px; gap:6px; } .clg-search input { font-size:11px; } .clg-search button { padding:8px 15px; font-size:12px; } .clg-hero-links { flex-wrap:wrap; } .clg-hero-links a { min-width:0; flex:1 1 42%; font-size:11px; } .clg-section { padding:14px 10px; } .clg-heading h2 { font-size:19px; } .clg-heading p { width:100%; padding-left:35px; } .clg-guide-grid,.clg-topic-grid,.clg-purpose-grid,.clg-latest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .clg-guide-card>img,.clg-guide-placeholder { height:108px; } .clg-guide-body { min-height:115px; } .clg-guide-body strong { font-size:12px; } .clg-topic-grid>a { grid-template-columns:34px minmax(0,1fr); min-height:84px; } .clg-topic-grid>a>span { width:32px; height:32px; font-size:18px; } .clg-topic-grid strong { font-size:11px; } .clg-topic-grid small { font-size:9px; } .clg-bottom-grid { grid-template-columns:1fr; } .clg-purpose-grid>a { min-height:170px; padding:12px; } .clg-purpose-grid strong { font-size:16px; } .clg-latest-grid img { height:100px; } .clg-footer>.clg-shell { flex-wrap:wrap; gap:12px; } .clg-footer nav { order:3; width:100%; margin-left:0; flex-wrap:wrap; gap:12px; } }