/* ヘッダー・フッター・トップを、見本の建設の本番と同じ形にするための土台。
   この後ろに、建設の CSS から取り出した決まり（kit/ks-extracted.css。tools/extract-ks.mjs が作る。クラス名は ks- 付き）が続く。
   色の変数は ks- の部品の中だけに効かせる（記事・診断・固定ページの本文の色は変えない）。 */
.ks-site-header,.ks-site-footer,.ks-home{--paper:#FFFFFF;--surface:#FFFFFF;--soft:#F4F6F8;--warm:#FAF7F1;--ink:#1C2024;--ink-2:#4F5862;--ink-3:#6B7480;--rule:#E3E7EB;--rule-strong:#C9D0D7;--blue:#16508F;--blue-tint:#EAF1F8;--link:#1A5FB4;--cta:#C2410C;--cta-dark:#9A330A;--green:#C2410C;--green-dark:#9A330A;--yellow:#F2C94C;--marker:#FFF3C4;--radius:10px;--radius-s:6px;--measure:42em;--grid:#FFFFFF;--accent:#16508F;--line:#E3E7EB;color:#202a30;letter-spacing:.255px}
/* 建設は body の字間（.015em）が継がれる。768px 以上は 17px、未満は 16px の本文が基準 */
@media(max-width:767px){.ks-site-header,.ks-site-footer,.ks-home{letter-spacing:.24px}}
/* 建設の土台の決まり（要素の指定）を、ks- の部品の中にだけ当てる。:where で詳細度を上げない */
:where(.ks-site-header,.ks-site-footer,.ks-home) :is(img,svg){max-width:100%;height:auto;display:block}
:where(.ks-site-header,.ks-site-footer,.ks-home) a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
:where(.ks-site-header,.ks-site-footer,.ks-home) :is(p,h1,h2,h3,ul){margin-top:revert}
:where(.ks-home) :is(h1,h2,h3){font-weight:700;font-feature-settings:"palt" 1;letter-spacing:.02em;word-break:auto-phrase}
/* このサイトの footer 要素への指定（余白・背景）を打ち消す。値は後ろの建設の決まりが決める */
.ks-site-footer{padding:0;border-top:0;background:none}
.ks-site-header{position:static}
/* トップのページだけ、body の文字の色と字間も建設と同じにする（記事・診断・固定ページの body は変えない） */
body:has(>main>.ks-home){color:#202a30;letter-spacing:.015em}
/* サイト名が建設より2文字長いので、狭い幅では診断のリンクを「診断」だけにして、ヘッダーを1行に収める */
@media(max-width:720px){.ks-site-nav .ks-nav-diagnosis .ks-hide-sp{display:none}.ks-nav-browse summary{white-space:nowrap}}

.ks-artcard__t,.ks-door__t,.ks-feature__t,.ks-home-sec__t{font-feature-settings: "palt" 1; letter-spacing: 0.02em; word-break: auto-phrase;}
.ks-site-header{background: #fff; border-bottom: 1px solid var(--rule);}
.ks-site-header__inner{max-width: 1160px; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.ks-logo{display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 48px;}
.ks-logo svg{width: 26px; height: 26px; flex: none;}
.ks-logo span{font-weight: 700; font-size: 19px; letter-spacing: 0.06em; white-space: nowrap; line-height: 1.3;}
.ks-logo small{display: block; font-weight: 400; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3);}
.ks-site-nav{display: flex; gap: 2px;}
.ks-site-nav a{color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius-s); white-space: nowrap;}
.ks-site-nav a:hover{background: var(--soft);}
@media (max-width: 720px){.ks-site-nav .ks-hide-sp{display: none;}}
@media (max-width: 420px){.ks-site-header__inner{padding: 0 12px; gap: 6px;}.ks-logo{gap: 7px;}.ks-logo svg{width: 22px; height: 22px;}.ks-logo small{display: none;}.ks-logo span{font-size: 16px; letter-spacing: 0.04em;}.ks-site-nav a{padding: 10px 7px; font-size: 13px;}}
.ks-site-footer{background: var(--soft); color: var(--ink-2); font-size: 14px; padding: 48px 0 56px; margin-top: 96px; border-top: 1px solid var(--rule);}
.ks-site-footer a{color: var(--ink); text-decoration: none;}
.ks-site-footer a:hover{text-decoration: underline;}
.ks-site-footer__inner{max-width: 1160px; margin: 0 auto; padding: 0 20px; display: grid; gap: 28px;}
@media (min-width: 760px){.ks-site-footer__inner{grid-template-columns: 1.5fr 1fr 1fr;}}
.ks-site-footer ul{list-style: none; padding: 0; margin: 0;}
.ks-site-footer li a{display: inline-block; padding: 6px 0;}
.ks-site-footer .ks-small{font-size: 13px; line-height: 1.8;}
.ks-site-footer__policy{font-size: 12.5px; margin: 12px 0 0;}
@media (max-width: 640px){table.ks-spec .ks-hide-sp{display: none;}}
.ks-home{max-width: 1160px; margin: 0 auto; padding: 0 20px;}
.ks-home-hero{display: grid; gap: 28px; padding: 40px 0 36px; border-bottom: 1px solid var(--rule);}
@media (min-width: 960px){.ks-home-hero{grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; padding: 64px 0 56px;}}
.ks-home-hero__eyebrow{font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: 0.08em; margin: 0 0 14px;}
.ks-home-hero h1{font-size: 30px; line-height: 1.45; font-weight: 700; margin: 0 0 18px;}
@media (min-width: 768px){.ks-home-hero h1{font-size: 44px; line-height: 1.35;}}
.ks-home-hero__lead{font-size: 16px; color: var(--ink-2); margin: 0 0 26px; max-width: 34em;}
@media (min-width: 768px){.ks-home-hero__lead{font-size: 17.5px;}}
.ks-home-hero__btns{display: flex; flex-wrap: wrap; gap: 10px;}
.ks-btn-main,.ks-btn-sub{display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 22px; border-radius: var(--radius-s); font-weight: 700; font-size: 15.5px; text-decoration: none;}
.ks-btn-main{background: var(--ink); color: #fff;}
.ks-btn-main:hover{background: #000;}
.ks-btn-sub{background: #fff; color: var(--ink); border: 1px solid var(--rule-strong);}
.ks-btn-sub:hover{border-color: var(--ink);}
.ks-btn-shindan{display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 12px 22px; border-radius: var(--radius-s); font-weight: 700; text-decoration: none; font-size: 15.5px; min-height: 52px;}
.ks-btn-shindan .ks-ic{display: none;}
.ks-home-facts{background: var(--soft); border-radius: 16px; padding: 22px 24px;}
.ks-home-facts__t{font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.1em; margin: 0 0 6px;}
.ks-home-facts ul{list-style: none; margin: 0; padding: 0;}
.ks-home-facts li{padding: 14px 0;}
.ks-home-facts li + li{border-top: 1px solid var(--rule-strong);}
.ks-home-facts__v{display: block; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: 0;}
.ks-home-facts__l{display: block; font-size: 14.5px; font-weight: 500; margin-top: 6px; line-height: 1.6;}
.ks-home-facts__s{display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;}
.ks-home-facts__s a{color: var(--ink-3);}
.ks-home-pr{font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0;}
.ks-home-pr strong{color: var(--ink-2);}
.ks-home-sec{margin: 64px 0 0;}
.ks-home-sec__head{display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px;}
.ks-home-sec__t{font-size: 22px; font-weight: 700; margin: 0; line-height: 1.5;}
@media (min-width: 768px){.ks-home-sec__t{font-size: 26px;}}
.ks-home-sec__more{font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none;}
.ks-home-sec__more:hover{text-decoration: underline;}
.ks-home-sec__lead{font-size: 15px; color: var(--ink-2); margin: -8px 0 18px;}
.ks-doors{list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;}
@media (min-width: 640px){.ks-doors{grid-template-columns: 1fr 1fr;}}
@media (min-width: 1000px){.ks-doors{grid-template-columns: repeat(3, 1fr);}}
.ks-door{display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 20px 18px; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s;}
.ks-door:hover{border-color: var(--ink-3);}
.ks-door__ic{display: none;}
.ks-door__t{font-size: 17px; font-weight: 700; line-height: 1.5;}
.ks-door__a{font-size: 14px; color: var(--ink-2); line-height: 1.7;}
.ks-door__to{margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--link);}
.ks-door--shindan{background: var(--soft); border-color: var(--soft);}
.ks-artcards{list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px;}
@media (min-width: 640px){.ks-artcards{grid-template-columns: 1fr 1fr;}}
@media (min-width: 1000px){.ks-artcards{grid-template-columns: repeat(3, 1fr);}}
.ks-artcard{display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 0 22px; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none;}
.ks-artcard__t{font-size: 17px; font-weight: 700; line-height: 1.6;}
.ks-artcard:hover .ks-artcard__t{color: var(--link); text-decoration: underline; text-underline-offset: 0.2em;}
.ks-artcard__l{font-size: 14px; color: var(--ink-2); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.ks-artcard__meta{margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px 12px;}
.ks-artcard__hub{font-size: 12.5px; font-weight: 700; color: var(--blue);}
.ks-feature{display: grid; gap: 20px; border: 1px solid var(--rule); border-radius: 16px; padding: 18px; color: var(--ink); text-decoration: none;}
@media (min-width: 860px){.ks-feature{grid-template-columns: 420px minmax(0, 1fr); gap: 36px; padding: 24px; align-items: center;}}
.ks-feature img{width: 100%; height: auto; border-radius: var(--radius-s); box-shadow: 0 0 0 1px var(--rule);}
.ks-feature__tag{font-size: 12.5px; font-weight: 700; color: var(--blue); letter-spacing: 0.08em;}
.ks-feature__t{display: block; font-size: 22px; font-weight: 700; line-height: 1.5; margin: 6px 0 10px;}
@media (min-width: 768px){.ks-feature__t{font-size: 26px;}}
.ks-feature:hover .ks-feature__t{color: var(--link); text-decoration: underline; text-underline-offset: 0.2em;}
.ks-feature__l{display: block; font-size: 15.5px; color: var(--ink-2); line-height: 1.8;}
.ks-feature__meta{display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 12px;}
.ks-home-end{margin: 80px 0 0; background: var(--soft); border-radius: 16px; padding: 32px 24px; text-align: center;}
.ks-home-end__t{font-size: 20px; font-weight: 700; margin: 0 0 8px;}
.ks-home-end p{margin: 0 0 18px; color: var(--ink-2);}
.ks-home-policy{display: grid; gap: 16px; margin: 0; padding: 0; list-style: none;}
@media (min-width: 760px){.ks-home-policy{grid-template-columns: repeat(4, 1fr);}}
.ks-home-policy li{border-top: 2px solid var(--ink); padding-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.75;}
.ks-home-policy b{display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 4px;}
.ks-home-hero{padding-top:44px;padding-bottom:36px;gap:38px;grid-template-columns:1.45fr .8fr}
.ks-home-hero h1{font-size:40px;line-height:1.55;letter-spacing:.015em}
.ks-home-scene{width:100%;height:auto;align-self:center}
.ks-home-hero__btns .ks-btn-main{display:none}
.ks-home-hero__btns{margin-top:16px}
.ks-home-hero__btns .ks-btn-sub{padding:0;border:0;font-size:14px;text-decoration:underline;min-height:32px}
.ks-home-sec{margin-top:48px}
.ks-doors{gap:0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.ks-door{border:0;border-radius:0;box-shadow:none;background:white;padding:22px 20px;border-bottom:1px solid var(--rule);height:100%}
.ks-door__a{display:none}
.ks-door__t{font-size:18px}
.ks-door__to{margin-top:8px}
.ks-home-facts--after{margin:48px 0;background:#f6f7f5;border-radius:0;padding:22px}
.ks-home-facts--after ul{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ks-home-facts--after li+li{border-top:0;padding-top:0}
.ks-home-facts__v{font-size:30px}
.ks-artcard__t{font-size:18px}
.ks-artcard__meta{font-size:12px}
.ks-home-policy{font-size:14px}
@media(max-width:767px){.ks-home-hero{padding-top:26px;padding-bottom:20px;display:block}.ks-home-hero h1{font-size:27px;line-height:1.55}.ks-home-hero__eyebrow{margin-bottom:14px}.ks-home-hero__lead{font-size:15px;margin:16px 0}.ks-home-scene{display:none}.ks-home-sec{margin-top:30px}.ks-doors{display:block}.ks-door{padding:14px 0}.ks-door__t{font-size:17px}.ks-door__to{font-size:12px;margin-top:4px}.ks-door--shindan{background:white}.ks-home-facts--after ul{display:block}.ks-home-facts--after li+li{border-top:1px solid var(--rule);padding-top:16px}.ks-home-facts--after{margin:30px 0}.ks-feature img{display:none}.ks-feature{display:block}.ks-artcards{display:block}.ks-site-footer{margin-top:56px}}
.ks-home-scene{border-radius:0;aspect-ratio:3/2;object-fit:contain;mix-blend-mode:multiply}
@media(min-width:769px){.ks-home-scene{width:118%;max-width:none;transform:translateX(-8%);}}
.ks-door{display:flex;flex-direction:row;align-items:flex-start;gap:14px}
.ks-door__image{width:88px;height:88px;flex:0 0 88px;object-fit:contain;mix-blend-mode:multiply}
.ks-door__copy{display:block;min-width:0}
.ks-door__copy .ks-door__t{display:block}
.ks-door__copy .ks-door__to{display:block}
@media(min-width:801px){.ks-door__copy .ks-door__t{min-height:3em}}
@media(max-width:800px){.ks-door{display:flex;gap:14px}.ks-door__image{width:76px;height:76px;flex-basis:76px}.ks-door__copy .ks-door__t{font-size:16px;line-height:1.6}.ks-door__copy .ks-door__to{font-size:12px;line-height:1.6}}
.ks-home-category{margin-top:64px}
.ks-home-category .ks-home-sec__head{align-items:center;margin-bottom:14px}
.ks-home-category .ks-home-sec__t{color:#214e70;position:relative;padding-bottom:14px;font-size:28px}
.ks-home-category .ks-home-sec__t::after{content:'';position:absolute;bottom:0;left:0;width:44px;height:3px;background:#214e70}
.ks-home-category .ks-home-sec__lead{margin:0 0 24px;font-size:14px;line-height:1.8}
.ks-home-category .ks-artcards{margin-left:36px;padding-left:22px;border-left:1px solid #d8e2e9;gap:0 26px}
.ks-home-category .ks-artcard{padding-top:18px;padding-bottom:22px}
.ks-home-category .ks-artcard__t{font-size:17px;color:var(--ink)}
.ks-home-category .ks-home-sec__more{white-space:nowrap;font-size:13px}
@media(max-width:767px){.ks-home-category{margin-top:44px}.ks-home-category .ks-home-sec__t{font-size:24px;padding-bottom:12px}.ks-home-category .ks-home-sec__head{gap:8px;flex-wrap:wrap}.ks-home-category .ks-home-sec__lead{font-size:13px;margin-bottom:18px}.ks-home-category .ks-artcards{margin-left:14px;padding-left:16px}.ks-home-category .ks-artcard__t{font-size:17px;line-height:1.7}.ks-home-category .ks-artcard__l{font-size:14px}.ks-home-category .ks-home-sec__more{font-size:12px}}
.ks-article-cover{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:#f5f2ec;border:1px solid #e2e6e8;border-radius:4px;margin-bottom:6px}
.ks-article-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.ks-article-cover__title{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:rgba(255,255,255,.95);border-top:2px solid #214e70;font-size:17px;font-weight:700;line-height:1.55;color:#182c3b}
.ks-artcard:hover .ks-article-cover img{transform:scale(1.025)}
.ks-artcard:hover .ks-article-cover__title{text-decoration:underline;text-underline-offset:3px}
@media(max-width:767px){.ks-article-cover__title{font-size:17px;padding:10px 12px}.ks-home-category .ks-article-cover{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.ks-article-cover img{transition:none}.ks-artcard:hover .ks-article-cover img{transform:none}}
.ks-site-nav{align-items:center}
.ks-nav-categories{display:flex;align-items:center;gap:0}
.ks-site-nav .ks-nav-categories a{font-size:13px;padding:12px 9px}
.ks-site-nav a[aria-current]{color:#214e70;background:#edf3f7;font-weight:700}
.ks-site-nav .ks-nav-diagnosis{color:#214e70;border-left:1px solid var(--rule);border-radius:0;margin-left:6px;font-size:13px}
.ks-nav-browse{display:none;position:relative}
.ks-nav-browse summary{list-style:none;cursor:pointer;font-size:14px;font-weight:700;padding:12px 8px;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.ks-nav-browse summary::-webkit-details-marker{display:none}
.ks-nav-browse summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ks-nav-browse[open] summary{color:var(--blue)}
.ks-nav-browse[open] summary>span{transform:rotate(180deg)}
.ks-nav-browse__panel{position:absolute;right:0;top:calc(100% + 8px);width:260px;padding:12px 16px;background:white;border:1px solid var(--rule);border-radius:5px;box-shadow:0 10px 28px #18334218;z-index:30}
.ks-nav-browse__panel>p{margin:4px 8px 10px;font-size:12px;color:var(--ink-2)}
.ks-site-nav .ks-nav-browse__panel a{display:flex;justify-content:space-between;padding:12px 8px;font-size:15px;border-top:1px solid #edf0f2;border-radius:0;min-height:48px}
@media(max-width:1050px){.ks-nav-categories{display:none}.ks-nav-browse{display:block}}
@media(max-width:420px){.ks-nav-browse summary{font-size:13px;padding:10px 5px;gap:4px}.ks-site-nav .ks-nav-diagnosis{font-size:12px;padding:10px 5px;margin-left:0}.ks-site-header__inner{gap:4px}.ks-nav-browse__panel{right:-58px;width:min(280px,calc(100vw - 32px))}}
.ks-article-cover{display:grid;grid-template-rows:auto 88px;aspect-ratio:auto}
.ks-article-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;min-height:0}
.ks-article-cover__title{position:static;display:flex;align-items:center;height:88px;box-sizing:border-box;background:#fff;padding:12px 14px;line-height:1.55}
@media(max-width:767px){.ks-article-cover{grid-template-rows:auto 88px}.ks-article-cover__title{height:88px;padding:10px 12px}}
.ks-home-category .ks-article-slider .ks-artcards{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 52px)/3);gap:26px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0;margin:0;padding:0 0 14px;border:0;scrollbar-width:thin;scrollbar-color:#a9bbc9 #f1f4f6}
.ks-article-slider .ks-artcards>li{scroll-snap-align:start;min-width:0}
.ks-article-slider .ks-artcard{height:100%;box-sizing:border-box}
.ks-article-slider .ks-artcards:focus-visible{outline:2px solid #214e70;outline-offset:3px}
@media(min-width:768px) and (max-width:999px){.ks-home-category .ks-article-slider .ks-artcards{grid-auto-columns:calc((100% - 26px)/2)}}
@media(max-width:767px){.ks-home-category .ks-article-slider .ks-artcards{grid-auto-columns:88%;gap:16px}.ks-article-slider .ks-article-cover__title{font-size:16px}}
.ks-article-cover__title{align-items:flex-start}
.ks-article-slider .ks-article-cover{grid-template-rows:auto var(--cover-title-height,auto)}
.ks-article-slider .ks-article-cover__title{height:var(--cover-title-height,auto);min-height:88px}
.ks-site-nav a.ks-nav-compare{background:var(--cta);color:#fff;font-weight:700;margin-left:6px;padding:8px 12px;min-height:40px}
.ks-site-nav a.ks-nav-compare:hover,.ks-site-nav a.ks-nav-compare[aria-current="true"]{background:var(--cta-dark);color:#fff}
.ks-nav-browse__panel a.ks-nav-compare{background:var(--cta);color:#fff;font-weight:700;border-top:0;border-radius:6px;margin-top:6px}
.ks-nav-browse__panel a.ks-nav-compare:hover{background:var(--cta-dark);color:#fff}
.ks-home-category .ks-article-grid{margin-left:36px;padding-left:22px;border-left:1px solid #d8e2e9;min-width:0}
.ks-home-category .ks-article-grid .ks-artcards{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;overflow:visible;margin:0;padding:0;border:0}
.ks-home-category .ks-article-grid .ks-artcard{height:100%;box-sizing:border-box}
@media(min-width:768px) and (max-width:999px){.ks-home-category .ks-article-grid .ks-artcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.ks-home-category .ks-article-grid{margin-left:14px;padding-left:16px}.ks-home-category .ks-article-grid .ks-artcards{grid-template-columns:minmax(0,1fr);gap:16px}}
/* このサイトだけの調整（建設から取り出した決まりの後ろに置く）。
   スマホ幅の「記事を探す」のパネル: 建設は診断のリンクが「タイプ診断」の幅で右に 58px はみ出させている。このサイトは「診断」だけで短いので、その分を詰めて画面の中に収める */
@media(max-width:1050px){.ks-nav-browse__panel{right:-32px}}