/* 與那原浩建築設計室 — 図面をモチーフにしたサイト共通スタイル */
:root{
  --white:#FCFCFB;
  --ink:#151515;
  --gray:#6F6D67;
  --hair:#DCDBD7;
  --pale:#F1F3F2;
  --grid:rgba(4,60,69,.06);
  --green:#043C45;   /* 名刺の深緑 */
  --orange:#F08200;  /* 名刺のオレンジ */
  --g:"Zen Kaku Gothic New",sans-serif;
  --m:"DM Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--g);font-size:17px;line-height:1.95;letter-spacing:.04em;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.mono{font-family:var(--m);font-size:13px;letter-spacing:.08em;color:var(--gray)}
.wrap{max-width:1360px;margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ヘッダー */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:7px 4vw;background:var(--green);color:#DDE6E7;font-size:13px;letter-spacing:.08em}
.topbar ul{display:flex;gap:26px;list-style:none}
.topbar a{transition:color .25s}
.topbar a:hover{color:#fff}
.topbar .tel a{font-family:var(--m);color:#fff}
.site-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 4vw;border-bottom:3px solid var(--green);background:var(--white)}
.site-head .logo{flex:none}
.site-head .logo img{height:56px;width:auto}
.gnav ul{display:flex;align-items:center;gap:clamp(14px,1.5vw,28px);list-style:none;font-size:clamp(14px,1.05vw,16px);font-weight:500;white-space:nowrap}
.gnav a{padding:6px 0;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.gnav a:hover{color:var(--orange);border-color:var(--orange)}
.gnav .cta-s,.cta-m{background:var(--orange);color:#fff;padding:9px 20px;border:none;white-space:nowrap;font-weight:500;transition:background .25s}
.gnav .cta-s:hover,.cta-m:hover{background:var(--green);color:#fff}
.cta-m,.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer;padding:8px 4px;font-weight:500;border-bottom:1px solid var(--ink);white-space:nowrap}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:" ＋";font-family:var(--m);color:var(--orange)}
.mnav[open] summary::after{content:" ×"}
.mnav .panel{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--white);border-bottom:3px solid var(--green);padding:8px 16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
.mnav ul{list-style:none}
.mnav li a{display:block;padding:12px 2px;border-bottom:1px solid var(--hair);font-size:15px}
@media (max-width:1320px){
  .gnav{display:none}
  .cta-m,.mnav{display:block}
  .site-head{gap:14px}
  .site-head .logo{flex:1;min-width:0}
  .cta-m{margin-left:auto}
}
@media (max-width:900px){
  .topbar{display:none}
  .site-head{padding:12px 16px;gap:10px}
  .site-head .logo img{height:auto;max-height:40px;width:100%;max-width:200px}
  .cta-m{padding:8px 12px;font-size:14px}
  .mnav summary{font-size:14px}
  .mnav .panel{grid-template-columns:1fr}
}

/* 方眼紙 */
.grid-paper{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}

/* 見出し */
section{padding:13vh 4vw}
h2{font-weight:500;font-size:clamp(26px,2.8vw,38px);letter-spacing:.1em;line-height:1.6}
h2::after{content:"";display:block;width:40px;height:3px;background:var(--orange);margin-top:14px}
.sec-head{display:grid;grid-template-columns:5fr 7fr;gap:5vw;margin-bottom:6vh;align-items:end}

/* トップ：ヒーロー */
.hero{padding:7vh 4vw 11vh}
.hero-in{display:grid;grid-template-columns:5fr 7fr;gap:5vw;align-items:end}
.hero h1{font-weight:700;color:var(--green);font-size:clamp(38px,5vw,74px);line-height:1.35;letter-spacing:.08em;margin-top:3vh}
.hero h1 b{font-weight:700;color:var(--green)}
.hero .lead{margin-top:4vh;max-width:30em;color:#33322f;font-size:18px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:3vh}
.badges span{border:1px solid var(--green);color:var(--green);font-size:14px;padding:2px 12px}
.plate{position:relative}
.plate figure{aspect-ratio:16/10;overflow:hidden}
.plate figure img{width:100%;height:100%;object-fit:cover}
.dim-x{position:absolute;top:0;left:28px;right:0;height:18px;border-left:1px solid var(--green);border-right:1px solid var(--green)}
.dim-x::before{content:"";position:absolute;left:0;right:0;top:9px;border-top:1px solid var(--green)}
.dim-x span,.dim-y span{position:absolute;background:var(--white);padding:0 8px;font-family:var(--m);font-size:13px;color:var(--green);white-space:nowrap}
.dim-x span{left:50%;top:-7px;transform:translateX(-50%)}
.dim-y{position:absolute;left:0;top:28px;bottom:0;width:18px;border-top:1px solid var(--green);border-bottom:1px solid var(--green)}
.dim-y::before{content:"";position:absolute;top:0;bottom:0;left:9px;border-left:1px solid var(--green)}
.dim-y span{top:50%;left:9px;transform:translate(-50%,-50%) rotate(-90deg)}
.plate .note{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-in>*{animation:up 1s ease-out both}.hero-in>*+*{animation-delay:.3s}

/* トップ：施工事例 */
.works-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.filters{display:grid;gap:10px}
.works-tools .lbl{align-self:center;margin-right:4px}
.subs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;padding-top:10px;border-top:1px dashed var(--hair)}
.subs[hidden]{display:none}
.subs button{font-size:14px;border:1px solid var(--hair);padding:6px 14px;letter-spacing:.06em;transition:.25s}
.subs button small{font-family:var(--m);font-size:12px;margin-left:6px;opacity:.7}
.subs button:hover{border-color:var(--orange);color:var(--orange)}
.subs button[aria-pressed="true"]{background:var(--orange);color:#fff;border-color:var(--orange)}
.works-tools button{font-size:15px;border:1px solid var(--hair);padding:8px 16px;letter-spacing:.06em;transition:.25s}
.works-tools button small{font-family:var(--m);font-size:12px;margin-left:6px;opacity:.7}
.works-tools button:hover{border-color:var(--green);color:var(--green)}
.works-tools button[aria-pressed="true"]{background:var(--green);color:#fff;border-color:var(--green)}
.list{display:grid;grid-template-columns:7fr 5fr;gap:4vw}
.rows{border-top:2px solid var(--green);list-style:none;columns:2;column-gap:32px}
.row{break-inside:avoid}
.row a{position:relative;display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--hair);transition:background .25s,padding .25s}
.row a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange);transform:scaleY(0);transition:transform .25s}
.row a:hover,.row a.cur{background:var(--pale);padding-left:16px}
.row a:hover::before,.row a.cur::before{transform:scaleY(1)}
.row .th{display:none}
.row h3{font-weight:500;font-size:19px;letter-spacing:.06em;line-height:1.5}
.row p{font-size:14px;color:var(--gray)}
.row[hidden]{display:none}
.viewer{position:sticky;top:3vh;align-self:start}
.viewer figure{aspect-ratio:3/2;overflow:hidden;background:var(--hair)}
.viewer img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.spec4{display:grid;grid-template-columns:1.3fr 1fr 1fr .9fr;border:1px solid var(--ink);border-top:none}
.spec4 div{padding:12px 14px;border-left:1px solid var(--hair)}
.spec4 div:first-child{border-left:none}
.spec4 dt{font-family:var(--m);font-size:12px;color:var(--gray);letter-spacing:.1em}
.spec4 dd{font-size:15px;letter-spacing:.02em;white-space:nowrap}
.go{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:16px 22px;background:var(--green);color:#fff;font-size:16px;letter-spacing:.1em;transition:background .25s}
.go:hover{background:var(--orange)}
.go span{font-family:var(--m);white-space:nowrap}

/* トップ：考え方・設計室 */
.think{background:#F2F2EF}
.cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--green)}
.cols article{padding:28px 2.4vw 0 0}
.cols article+article{padding-left:2.4vw;border-left:1px solid var(--hair)}
.cols h3{font-weight:500;font-size:21px;margin:10px 0 12px;letter-spacing:.08em;color:var(--green)}
.cols p{font-size:16px;color:#33322f}
.office{display:grid;grid-template-columns:5fr 7fr;gap:5vw}
.office dl{border-top:2px solid var(--green)}
.office dl div{display:grid;grid-template-columns:8em 1fr;padding:16px 4px;border-bottom:1px solid var(--hair)}
.office dt{color:var(--gray);font-size:15px}
.office p+p{margin-top:1.2em}

/* 事例ページ */
.case-head{padding:5vh 4vw 4vh;border-bottom:1px solid var(--hair)}
.crumb{font-size:14px;color:var(--gray)}
.crumb a{border-bottom:1px solid var(--hair)}
.crumb a:hover{color:var(--orange);border-color:var(--orange)}
.case-head h1{font-weight:500;font-size:clamp(30px,3.6vw,50px);letter-spacing:.1em;line-height:1.4;margin-top:2.4vh}
.case-head .sub{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:12px;font-size:16px;color:#33322f}
.tag{background:var(--green);color:#fff;font-size:14px;padding:3px 14px;letter-spacing:.1em}
.gallery{padding:6vh 4vw 0}
.stage{position:relative;aspect-ratio:3/2;max-height:80vh;margin:0 auto;background:#EEEEEB;overflow:hidden;cursor:zoom-in}
.stage img{width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.stage .cap{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(252,252,251,.94);font-size:16px}
.stage .cap:empty{display:none}
.ba{font-family:var(--g);font-size:13px;letter-spacing:.08em;padding:1px 10px;border:1px solid currentColor;white-space:nowrap}
.ba.before{color:var(--gray)}
.ba.during{color:var(--green)}
.ba.after{color:#fff;background:var(--orange);border-color:var(--orange)}
.count{position:absolute;right:0;bottom:0;padding:12px 18px;font-family:var(--m);font-size:15px;color:#fff;background:var(--green)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;background:rgba(252,252,251,.9);font-size:22px;display:grid;place-items:center;transition:background .25s,color .25s}
.arrow:hover{background:var(--orange);color:#fff}
.arrow.prev{left:0}.arrow.next{right:0}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px}
.thumbs button{aspect-ratio:3/2;overflow:hidden;opacity:.55;transition:opacity .25s}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button:hover{opacity:.85}
.thumbs button[aria-current="true"]{opacity:1;outline:3px solid var(--orange);outline-offset:-3px}
.case-body{display:grid;grid-template-columns:7fr 5fr;gap:5vw;padding:10vh 4vw}
.case-body h2{margin-bottom:3vh}
.text p+p{margin-top:1.4em}
.text .related a{color:var(--green);font-weight:500;border-bottom:1px solid var(--orange);transition:color .25s}
.text .related a:hover{color:var(--orange)}
.voice{margin-top:7vh;padding:30px 32px;border-left:4px solid var(--green);background:var(--pale)}
.voice h3{font-size:19px;font-weight:500;color:var(--green);margin-bottom:10px;letter-spacing:.1em}
.voice p+p{margin-top:1em}
.spec{border:2px solid var(--green);align-self:start;position:sticky;top:3vh}
.spec .ttl{background:var(--green);color:#fff;padding:12px 22px;font-family:var(--m);font-size:14px;letter-spacing:.14em}
.spec dl>div{display:grid;grid-template-columns:6.5em 1fr;border-top:1px solid var(--hair);padding:14px 22px}
.spec dl>div:first-child{border-top:none}
.spec dt{color:var(--gray);font-size:15px}
.spec dd{font-size:16px}
.pager{display:grid;grid-template-columns:1fr auto 1fr;border-top:2px solid var(--green);border-bottom:1px solid var(--hair);margin:0 4vw}
.pager a{padding:24px 12px;transition:color .25s,background .25s}
.pager a:hover{color:var(--orange);background:#F6F6F4}
.pager .next{text-align:right}
.pager .all{border-left:1px solid var(--hair);border-right:1px solid var(--hair);padding:24px 4vw;font-weight:500;display:grid;place-items:center}
.pager b{display:block;font-weight:500;font-size:19px}
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,14,15,.96);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:84vh;width:auto;height:auto}
.lb .lcap{position:absolute;left:0;right:0;bottom:3vh;text-align:center;color:#E8ECEC;font-size:16px}
.lb .close{position:absolute;top:14px;right:20px;color:#fff;font-size:38px;line-height:1;padding:6px}
.lb .arrow{background:rgba(255,255,255,.12);color:#fff}

/* お問い合わせ */
.contact-wrap{max-width:900px;margin:0 auto}
.contact-wrap iframe{width:100%;height:1500px;border:1px solid var(--hair);margin-top:4vh;background:#fff}

/* 読みものページ */
.more-s{display:inline-block;margin-top:14px;font-size:15px;color:var(--green);border-bottom:1px solid var(--green);transition:color .25s,border-color .25s}
.more-s::after{content:" →";font-family:var(--m)}
.more-s:hover{color:var(--orange);border-color:var(--orange)}
.office .links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:3vh}
.banner{padding:6vh 4vw 0}
.banner img{width:100%;height:auto;aspect-ratio:1800/560;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1000px}
.duo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.doc{padding-top:8vh}
.article{max-width:40em}
.article h2{font-size:clamp(22px,2vw,27px);margin:8vh 0 3vh}
.article h2:first-child{margin-top:0}
.article h3{font-size:19px;font-weight:500;color:var(--green);margin:5vh 0 1.5vh;letter-spacing:.08em}
.article p+p{margin-top:1.4em}
.article ul{list-style:none;margin:1.4em 0;border-top:1px solid var(--hair)}
.article li{padding:10px 4px 10px 1.6em;border-bottom:1px solid var(--hair);position:relative}
.article li::before{content:"";position:absolute;left:4px;top:1.25em;width:8px;height:8px;background:var(--orange)}
.article a,.reviews .more a{color:var(--green);border-bottom:1px solid currentColor}
.article a:hover,.reviews .more a:hover{color:var(--orange)}
.more{margin-top:1.4em}
.more a::after{content:" →";font-family:var(--m)}
.side ol{list-style:none}
.side li{border-top:1px solid var(--hair)}
.side li:first-child{border-top:none}
.side a{display:block;padding:12px 22px 12px 26px;font-size:15px;position:relative;transition:background .25s,color .25s}
.side a:hover{background:var(--pale);color:var(--orange)}
.side a[aria-current="page"]{background:var(--pale);font-weight:500;color:var(--green)}
.side a[aria-current="page"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.doc-index{padding-top:8vh}
.doc-index .intro{margin-bottom:8vh;font-size:18px}
.doc-index .intro>:first-child{margin-top:0}
.cards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.cards a{display:block}
.cards img{width:100%;height:auto;aspect-ratio:600/187;object-fit:cover;transition:opacity .25s}
.cards .mono{display:block;margin-top:12px;color:var(--orange)}
.cards b{display:block;font-weight:500;font-size:19px;letter-spacing:.06em;line-height:1.6;border-bottom:1px solid var(--hair);padding-bottom:12px;transition:color .25s}
.cards a:hover img{opacity:.8}
.cards.works img{aspect-ratio:3/2}
.area-link{margin-top:5vh;text-align:right}
.area-others{margin-top:10vh;padding-top:4vh;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline}
.area-others .mono{width:100%}
.spec dd a{border-bottom:1px solid var(--orange)}
.spec dd a:hover{color:var(--orange)}
.cards a:hover b{color:var(--orange)}
.reviews{list-style:none;border-top:2px solid var(--green)}
.review{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:36px 0;border-bottom:1px solid var(--hair)}
.review .pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.review .who{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-bottom:12px;font-weight:500}
.review p+p{margin-top:1em}
.review .who+p{margin-top:0}
.flow .phase{display:grid;grid-template-columns:7.5em 1fr;gap:24px;border-top:2px solid var(--green);padding-top:20px;margin-bottom:6vh}
.flow .phase h2{font-size:20px;color:var(--green)}
.flow .phase h2::after{width:24px;margin-top:10px}
.flow ol{list-style:none}
.flow li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:0 0 26px}
.flow li+li{border-top:1px solid var(--hair);padding-top:22px}
.flow .no{color:var(--orange);font-size:15px;padding-top:4px}
.flow h3{font-size:19px;font-weight:500;letter-spacing:.06em;margin-bottom:4px}
.flow .cost{margin-top:10px;font-size:15px;display:flex;gap:12px;align-items:baseline}
.flow .cost .mono{border:1px solid var(--green);color:var(--green);padding:0 8px;font-size:12px}
.access .info{border-top:2px solid var(--green)}
.access .info div{display:grid;grid-template-columns:8em 1fr;padding:16px 4px;border-bottom:1px solid var(--hair)}
.access dt{color:var(--gray);font-size:15px}
.access dd a{font-family:var(--m);font-size:19px}
.access .map{margin-top:5vh;aspect-ratio:4/3;border:1px solid var(--hair)}
.access .map iframe{width:100%;height:100%;border:0;display:block}
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw}
.smap h2{font-size:21px;margin:0 0 2vh}
.smap ul+h2{margin-top:6vh}
.smap ul{list-style:none;border-top:1px solid var(--hair)}
.smap li a{display:block;padding:9px 4px;border-bottom:1px solid var(--hair);font-size:15px;transition:color .25s}
.smap li a:hover{color:var(--orange)}

/* サイト内の目次（フッター） */
.index{max-width:1360px;margin:0 auto 8vh;display:grid;grid-template-columns:1fr 1fr 1.4fr .8fr;gap:3vw;border-top:2px solid var(--green);padding-top:28px}
.index h2{font-size:18px;letter-spacing:.1em;margin:4px 0 14px}
.index h2::after{width:24px;height:2px;margin-top:8px}
.index ul{list-style:none}
.index .wide ul{columns:2;column-gap:20px}
.index li{break-inside:avoid}
.index a{display:inline-block;padding:4px 0;font-size:15px;color:#33322f;transition:color .25s}
.index a:hover{color:var(--orange)}

/* 表題欄（フッター） */
.site-foot{padding:12vh 4vw 6vh}
.titleblock{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;border:2px solid var(--green)}
.titleblock>div{padding:20px 24px;border-left:1px solid var(--green)}
.titleblock>div:first-child{border-left:none}
.titleblock .big{font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:.12em;margin-top:6px;color:var(--green)}
.titleblock .addr{font-size:15px;color:var(--gray);margin-top:6px}
.titleblock .tel{font-family:var(--m);font-size:23px;margin-top:2px;display:inline-block}
.titleblock .cta{display:block;background:var(--orange);color:#fff;text-align:center;padding:18px;margin-top:10px;font-size:16px;font-weight:500;letter-spacing:.2em;transition:background .3s}
.titleblock .cta:hover{background:var(--green)}
.copy{max-width:1360px;margin:3vh auto 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@media (max-width:900px){
  body{font-size:16px}
  .banner{padding:4vh 16px 0}
  .banner img{aspect-ratio:16/7}
  .duo{grid-template-columns:1fr}
  .doc{padding-top:6vh}
  .cards{grid-template-columns:1fr;gap:28px}
  .review{grid-template-columns:1fr;gap:16px;padding:28px 0}
  .flow .phase{grid-template-columns:1fr;gap:12px}
  .access .info div{grid-template-columns:6.5em 1fr}
  .smap{grid-template-columns:1fr;gap:6vh}
  .index{grid-template-columns:1fr 1fr;gap:5vh 6vw}
  .index .wide{grid-column:1/-1}
  .side{display:none}
  .rows{columns:1}
  .plate .note span+span{display:none}
  section{padding:10vh 16px}
  .hero{padding:5vh 16px 9vh}
  .hero-in,.sec-head,.list,.office,.case-body{grid-template-columns:1fr;gap:5vh}
  .works-tools,.subs{justify-content:flex-start}
  .viewer{display:none}
  .row a{grid-template-columns:112px 1fr;gap:14px;align-items:center;padding:12px 0}
  .row a:hover,.row a.cur{padding-left:0}
  .row .no,.row .yr{display:none}
  .row .th{display:block;width:112px;height:auto;aspect-ratio:3/2;object-fit:cover}
  .row h3{font-size:17px}
  .row p{font-size:13px}
  .cols{grid-template-columns:1fr}
  .cols article+article{padding-left:0;border-left:none;border-top:1px solid var(--hair);margin-top:24px}
  .case-head,.gallery,.site-foot{padding-left:16px;padding-right:16px}
  .case-body{padding:8vh 16px}
  .pager{margin:0 16px;grid-template-columns:1fr 1fr}
  .pager .all{grid-column:1/-1;grid-row:2;border:none;border-top:1px solid var(--hair)}
  .pager b{font-size:16px}
  .stage{aspect-ratio:3/2}
  .stage .cap{font-size:14px;padding:8px 12px}
  .count{font-size:13px;padding:8px 12px}
  .arrow{width:42px;height:42px}
  .thumbs{grid-template-columns:repeat(4,1fr);gap:6px}
  .spec{position:static}
  .voice{padding:22px 20px}
  .titleblock{grid-template-columns:1fr}
  .titleblock>div{border-left:none;border-top:1px solid var(--green)}
  .titleblock>div:first-child{border-top:none}
  .office dl div{grid-template-columns:6em 1fr}
}
.article li .k{display:inline-block;min-width:8.5em;color:var(--gray);font-size:15px}
.portrait{margin-top:4vh;max-width:360px}
.portrait img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.portrait figcaption,.inline figcaption{font-size:14px;color:var(--gray);margin-top:8px;letter-spacing:.1em}
.sidecol{align-self:start}
.sidecol .portrait{margin:0 0 4vh;max-width:60%}
.sidecol .side{position:static}
.article .inline{margin:5vh 0}
.article .inline img{width:100%;max-width:600px;height:auto}
@media (max-width:900px){.portrait{max-width:260px}.sidecol .portrait{max-width:180px}}
@media (max-width:900px){.sidecol{order:-1}.sidecol .portrait{margin:0 auto 2vh}}
.portrait img{aspect-ratio:auto}
.cols article{position:relative;padding-bottom:6px}
.cols .more-s::before{content:"";position:absolute;inset:0}
.cols article:hover h3{color:var(--orange)}
.index h2 a{font-size:inherit;padding:0;color:var(--ink)}.index h2 a::after{content:" →";font-family:var(--m);font-size:14px;color:var(--orange)}.index h2 a:hover{color:var(--orange)}