:root{--bg:#faf6f1;--card:#fff;--ink:#3a322e;--muted:#7a6d66;--accent:#b0705f;--accent-l:#f3e4de;--line:#e8ddd4}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;line-height:1.9;font-size:16px}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
.wide{max-width:1000px}
header.site{border-bottom:1px solid var(--line);background:var(--card)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:6px;padding-bottom:6px}
.logo{display:block;line-height:0}
.logo img{height:72px;width:auto}
.hero{padding:44px 0 24px}
.hero h1{margin:0 0 8px;font-size:clamp(24px,5vw,34px);line-height:1.5}
.hero p{margin:0;color:var(--muted)}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 8px;padding:0;list-style:none}
.cats a{display:inline-block;padding:6px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-size:14px}
.cats a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin:20px 0 60px;padding:0;list-style:none}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);height:100%}
.card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.card .in{padding:14px 16px 18px}
.tag{display:inline-block;font-size:12px;background:var(--accent-l);color:var(--accent);border-radius:999px;padding:1px 10px}
.card h3{margin:8px 0 0;font-size:17px;line-height:1.55}
article h1{font-size:clamp(23px,5vw,32px);line-height:1.5;margin:18px 0 18px}
article .eye{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;display:block}
article .body p,article .body ul{margin:0 0 1.5em}
article .body li{margin:.2em 0}
.crumb{font-size:13px;color:var(--muted);padding-top:20px}
.crumb a{color:var(--muted)}
.related{margin:48px 0 60px}
.related h2{font-size:18px;border-left:4px solid var(--accent);padding-left:10px}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px;text-align:center}
article .body h2{font-size:20px;line-height:1.5;margin:2em 0 .7em;border-left:4px solid var(--accent);padding-left:10px}
article .body p.key{font-size:1.15em;text-align:center;background:var(--accent-l);border-radius:12px;padding:12px 14px}
.imgnote{font-size:12px;color:var(--muted);margin:6px 0 0}

.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:10px}
.flinks a{color:var(--muted)}
.doc h1{font-size:clamp(23px,5vw,30px);margin:18px 0}
.doc h2{font-size:18px;margin:2em 0 .6em;border-left:4px solid var(--accent);padding-left:10px}
.doc p{margin:0 0 1.2em}
table.info{width:100%;border-collapse:collapse;background:var(--card);margin-bottom:1.5em}
table.info th,table.info td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
table.info th{width:9em;background:var(--accent-l);white-space:nowrap}
.doc{margin-bottom:60px}

header.site{position:sticky;top:0;z-index:10}
.gnav{display:flex;gap:6px 22px;align-items:center}
.gnav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.gnav a:hover{color:var(--accent)}
@media(max-width:640px){.gnav a:not(.keep){display:none}.logo img{height:56px}}
.hero2{background:linear-gradient(135deg,#f6e4dc 0%,#faf1e8 55%,#faf6f1 100%);overflow:hidden}
.hero2-in{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding-top:44px;padding-bottom:44px}
.eyebrow{margin:0 0 10px;font-size:12.5px;letter-spacing:.22em;color:var(--accent);font-weight:700}
.hero2 h1{margin:0 0 16px;font-size:clamp(26px,4.2vw,38px);line-height:1.5;font-weight:700;letter-spacing:.02em}
.mark{background:linear-gradient(transparent 62%,rgba(176,112,95,.28) 62%);padding:0 .1em}
.hero2 .lead{margin:0 0 6px;color:var(--muted);font-size:15.5px;max-width:30em}
.hero2 .cats{margin-top:20px}
.hero2-img img{display:block;width:100%;max-width:380px;margin-left:auto;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 28px 28px;box-shadow:0 18px 40px rgba(120,80,60,.18)}
@media(max-width:780px){.hero2-in{grid-template-columns:1fr;padding-top:28px;padding-bottom:30px}.hero2-img img{max-width:260px;margin:0 auto;aspect-ratio:1/1;border-radius:999px 999px 24px 24px}}
/*hero-fix*/
.hero2 h1{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.hero2-img img{object-position:50% 65%}
@media(max-width:520px){.hero2 h1{font-size:25px}.hero2 .lead{font-size:14.5px}}

/*hitokoto*/
.hitokoto{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:16px;padding:20px 24px;margin:30px 0 8px}
.hk-label{margin:0 0 6px;font-size:12.5px;letter-spacing:.18em;color:var(--accent);font-weight:700}
.hk-text{margin:0;font-size:17px;line-height:1.95;font-weight:500}
.hk-sign{margin:12px 0 0;text-align:right;font-size:13.5px;color:var(--muted)}
/*img-fix*/
.hero2-img img,.card img,article .eye{height:auto}


/*ph2*/
.card .ph{display:grid;place-items:center;aspect-ratio:16/7;background:#f6e4dc;color:#8a5a4a;font-weight:700;letter-spacing:.12em;font-size:15px;text-align:center;padding:0 12px}
.card .ph-a{background:#f6e4dc}.card .ph-b{background:#e8efe3;color:#5f7457}.card .ph-c{background:#f4ecd6;color:#8a7440}.card .ph-d{background:#e3ebe6;color:#4f6b5c}.card .ph-e{background:#ece3ea;color:#765a70}.card .ph-f{background:#f9e3d3;color:#9a5a3a}

/*meta*/
article .meta{margin:-4px 0 18px;font-size:13.5px;color:var(--muted)}
.card .date{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:400}

/*pr*/
.pr{margin:36px 0 0;padding:16px 18px;background:var(--card);border:1px dashed var(--line);border-radius:14px;font-size:13.5px;line-height:1.7;overflow-wrap:anywhere}
.pr-label{margin:0 0 10px;font-size:12px;color:var(--muted)}
.pr a{color:var(--ink)}
.pr img{max-width:128px;height:auto}

/*side*/
.layout{max-width:1100px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.main-col{min-width:0;max-width:760px;width:100%;margin:0 auto}
.side{min-width:0}
.side-in{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:14px;margin-bottom:40px;overflow:hidden;text-align:center}
.side-in .pr-label{text-align:left}
@media(min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
  .main-col{margin:0}
  .side-in{position:sticky;top:96px;margin-top:64px}
}