/* 短居｜TANKYO（2026-11-14）：ユーザー提供の素材（tankyo_web_assets：色・ロゴ・アイコン・split hero・写真）に合わせる。土台は とも、くらす の style.css */
:root{--bg:#f8f8f5;--surface:#fff;--ink:#102f29;--muted:#56665f;--line:#d8e2df;--brand:#0f5b4f;--brand-d:#102f29;--btn:#0f5b4f;--btn-h:#0b483e;--accent:#f6c65b;--soft:#ddf1ea;--ph1:#e4f2ec;--ph2:#f5f1e6;--tk-cream:#f8f8f5;--tk-mint:#ddf1ea}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111a17;--surface:#18231f;--ink:#e5ece9;--muted:#a3b2ac;--line:#2d3b36;--brand:#86d3bf;--brand-d:#b2e5d7;--btn:#0f5b4f;--btn-h:#16705f;--soft:#1f3a33;--ph1:#1b2c27;--ph2:#262a22;--tk-cream:#151f1c;--tk-mint:#1f3a33}}
:root[data-theme=dark]{--bg:#111a17;--surface:#18231f;--ink:#e5ece9;--muted:#a3b2ac;--line:#2d3b36;--brand:#86d3bf;--brand-d:#b2e5d7;--btn:#0f5b4f;--btn-h:#16705f;--soft:#1f3a33;--ph1:#1b2c27;--ph2:#262a22;--tk-cream:#151f1c;--tk-mint:#1f3a33}

/* ロゴ：家のマーク＋tankyo.＋短居（ふりがな たんきょ） */
.tk-logo{display:inline-flex;align-items:center;gap:6px;color:var(--brand);text-decoration:none;line-height:1}
.tk-logo .mk{width:30px;height:30px;flex:none}
.tk-logo .en{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;font-weight:700;font-size:28px;letter-spacing:-.02em}
.tk-logo ruby{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;font-weight:700;font-size:22px;ruby-position:over;margin-left:4px}
.tk-logo rt{font-size:8.5px;font-weight:700;letter-spacing:.3em;opacity:.8}
.tk-tag{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;margin-left:12px;white-space:nowrap}
@media(max-width:820px){.tk-tag{display:none}}
@media(max-width:600px){.tk-logo .mk{width:24px;height:24px}.tk-logo .en{font-size:23px}.tk-logo ruby{font-size:18px}}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tk-brand{display:flex;align-items:center;min-width:0}
.gnav .tk-cta{background:var(--btn);color:#fff!important;border-radius:12px;padding:8px 16px}
.gnav .tk-cta:hover{background:var(--btn-h)}

/* ヒーロー：左に文章・右に写真（素材の split hero） */
.tk-hero{display:grid;grid-template-columns:1fr 1fr;min-height:520px;background:var(--tk-cream);overflow:hidden}
.tk-hero-copy{padding:clamp(28px,5vw,80px) clamp(20px,5vw,72px) 110px;display:flex;flex-direction:column;justify-content:center;max-width:680px;margin-left:auto}
.tk-hero-img{background:#cfd8d4 url(/assets/hero.jpg) 38% 40%/cover no-repeat;min-height:320px}
.tk-badge{display:inline-flex;align-self:flex-start;align-items:center;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--brand);background:var(--surface);font-size:12px;font-weight:700;margin:0 0 16px}
.tk-h1{font-family:"Klee One","Zen Kurenaido","Hiragino Mincho ProN",serif;font-weight:600;color:var(--brand-d);font-size:clamp(32px,4.4vw,58px);line-height:1.38;letter-spacing:.03em;margin:0 0 2px;transform:rotate(-2deg);transform-origin:left}
.tk-h1 .l2{display:block;padding-left:.5em}
.tk-swash{display:block;width:min(400px,80%);height:auto;margin:0 0 20px 1em;color:var(--accent)}
.tk-lead{max-width:480px;font-size:15.5px;line-height:2;margin:0;color:var(--ink)}
.tk-lead strong{color:var(--brand)}
@media(max-width:820px){.tk-hero{grid-template-columns:1fr}.tk-hero-img{order:-1;min-height:260px;background-position:40% 35%}.tk-hero-copy{margin:0;max-width:none;padding:24px 16px 100px}}
@media(max-width:600px){.tk-hero-img{min-height:220px}.tk-lead{font-size:14.5px;line-height:1.95}}

/* 検索カード（ヒーローに重ねる） */
.tk-search{position:relative;z-index:3;margin:-78px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.14);padding:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:stretch}
.tk-f{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--surface);margin:0}
.tk-f svg{grid-row:1/3;width:22px;height:22px;color:var(--brand)}
.tk-f .k{font-size:11px;color:var(--muted);font-weight:700;line-height:1.2}
.tk-f select{border:0;background:transparent;font:inherit;font-weight:700;font-size:16px;padding:0;min-height:28px;color:var(--ink);width:100%;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:18px}
.tk-f select:focus{outline:none}.tk-f:focus-within{outline:3px solid var(--brand);outline-offset:1px}
.tk-go{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--btn);color:#fff;font:inherit;font-weight:700;font-size:16px;padding:0 28px;min-height:56px;cursor:pointer}
.tk-go:hover{background:var(--btn-h)}.tk-go svg{width:20px;height:20px}
@media(max-width:820px){.tk-search{grid-template-columns:1fr 1fr;margin-top:-70px}.tk-go{grid-column:1/-1}}
@media(max-width:600px){.tk-search{grid-template-columns:1fr;padding:14px;gap:10px}}

/* 4つの特徴 */
.tk-feat{list-style:none;padding:0;margin:28px 0 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tk-feat li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:6px 18px;border-left:1px solid var(--line)}
.tk-feat li:first-child{border-left:0}
.tk-feat svg{grid-row:1/3;width:40px;height:40px;color:var(--brand)}
.tk-feat b{font-size:15px}.tk-feat span{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:820px){.tk-feat{grid-template-columns:1fr 1fr;row-gap:16px}.tk-feat li:nth-child(3){border-left:0}}
@media(max-width:600px){.tk-feat li{padding:4px 8px;gap:2px 10px}.tk-feat svg{width:32px;height:32px}.tk-feat b{font-size:13.5px}.tk-feat span{font-size:11.5px}}

/* 目的から探す＋オーナー向け */
.tk-mid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start;margin:32px 0}
@media(max-width:980px){.tk-mid{grid-template-columns:1fr}}
.tk-mid h2{font-size:22px;margin:0 0 14px;border:0;padding:0}
.tk-purpose{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tk-purpose a{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.06);text-decoration:none;color:var(--ink);height:100%}
.tk-purpose a:hover{border-color:var(--brand)}
.tk-purpose .pi{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--tk-mint);color:var(--brand);overflow:hidden}
.tk-purpose .pi svg{width:34%;height:auto}.tk-purpose .pi img{width:100%;height:100%;object-fit:cover;display:block}
.tk-purpose .pl{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;font-weight:700;font-size:14.5px}
.tk-purpose .pl::after{content:"›";font-size:20px;line-height:1;color:var(--muted)}
@media(max-width:820px){.tk-purpose{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 6px;margin:0;scrollbar-width:none}.tk-purpose::-webkit-scrollbar{display:none}.tk-purpose li{flex:0 0 40%;scroll-snap-align:start}}
@media(max-width:600px){.tk-purpose li{flex-basis:44%}}
.tk-owner{position:relative;background:var(--tk-mint);border:1px solid var(--line);border-radius:16px;padding:20px 20px 22px;overflow:hidden}
.tk-owner .ok{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin:0 0 8px}
.tk-owner .ok svg{width:18px;height:18px;color:var(--brand)}
.tk-owner h2{font-size:21px;line-height:1.5;margin:0 0 8px}
.tk-owner p{font-size:13px;color:var(--muted);margin:0 0 14px;max-width:16em}
.tk-owner .btn{border-radius:999px;margin:0;position:relative;z-index:1}
.tk-owner .bld{position:absolute;right:14px;bottom:12px;width:76px;height:auto;color:var(--brand);opacity:.35}
@media(max-width:600px){.tk-owner .bld{width:70px}}

/* 結果 */
.tk-res-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:8px 0 12px}
.tk-res-head h2{margin:0}
#tcount{margin:0;font-size:14px}
.dh-q{display:none}
.tk-purpose .pl{white-space:nowrap;font-size:14px;letter-spacing:-.01em}
@media(min-width:821px) and (max-width:1180px){.tk-purpose .pl{font-size:13px;padding:10px 8px}}
.tk-mid>*{min-width:0}
@media(max-width:600px){.site-h .gnav a:not(.tk-cta):not(:first-child){display:none}.site-h .gnav{gap:6px}}