:root{
  --bg:#fff;
  --bg-soft:#f5f7f8;
  --ink:#22272d;
  --sub:#67717b;
  --line:#dfe5e8;
  --accent:#2e7774;
  --max:760px;
  --font:"BIZ UDPGothic","BIZ UDゴシック","Yu Gothic UI","Yu Gothic",
         "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{margin:0;padding:0;-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.95;
  letter-spacing:.015em;
  overflow-wrap:anywhere;
  text-rendering:optimizeLegibility;
}
a{
  color:var(--accent);
  text-underline-offset:.24em;
  text-decoration-thickness:1px;
}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{color:var(--ink);background:#d7ecea}

.site-header{border-bottom:1px solid var(--line)}
.header-inner,.main-inner,.footer-inner{
  width:min(100%,var(--max));
  margin-inline:auto;
  padding-inline:clamp(22px,5vw,34px);
}
.header-inner{
  min-height:64px;
  display:flex;
  align-items:center;
}
.brand{
  color:var(--ink);
  font-size:18px;
  font-weight:800;
  letter-spacing:.09em;
  text-decoration:none;
}
.brand span{color:var(--accent)}

.kicker{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.footer-inner{
  min-height:72px;
  padding-top:18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  color:var(--sub);
  font-size:12px;
}

/* トップページ */
.page-home{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.page-home main{
  min-height:0;
  display:flex;
  align-items:center;
}
.page-home .main-inner{
  padding-top:clamp(72px,11vw,112px);
  padding-bottom:clamp(80px,12vw,124px);
}
.page-home .kicker{margin:0 0 14px}
.page-home h1{
  max-width:11em;
  margin:0 0 32px;
  font-size:clamp(34px,7vw,55px);
  font-weight:750;
  line-height:1.36;
  letter-spacing:.005em;
}
.intro{
  max-width:42em;
  color:var(--sub);
}
.intro p{margin:0}
.intro p+p{margin-top:1.25em}
.portal{
  margin-top:42px;
  padding-top:25px;
  border-top:1px solid var(--line);
}
.portal-label{
  margin:0 0 9px;
  color:var(--sub);
  font-size:13px;
  font-weight:700;
}
.portal-link{
  display:block;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  text-decoration:none;
  background:var(--bg);
}
.portal-link:hover{
  border-color:rgba(46,119,116,.45);
  background:var(--bg-soft);
}
.portal-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  font-size:18px;
  font-weight:750;
}
.portal-arrow{color:var(--accent)}
.portal-copy{
  display:block;
  margin-top:5px;
  color:var(--sub);
  font-size:14px;
  line-height:1.7;
}
.contact{
  margin-top:34px;
  padding-top:25px;
  border-top:1px solid var(--line);
}
.contact-label{
  margin:0 0 7px;
  color:var(--sub);
  font-size:13px;
  font-weight:700;
}
.contact a{
  display:inline-block;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
}
.contact a:hover{text-decoration:underline}

/* 駄文一覧 */
.page-essay-list .main-inner{
  padding-top:clamp(52px,8vw,76px);
  padding-bottom:clamp(80px,12vw,124px);
}
.page-essay-list .kicker{margin:0 0 12px}
.page-essay-list h1{
  margin:0 0 16px;
  font-size:clamp(31px,6vw,44px);
  font-weight:750;
  line-height:1.35;
  letter-spacing:.01em;
}
.lead{
  max-width:39em;
  margin:0;
  color:var(--sub);
}
.essay-list{
  margin-top:48px;
  border-top:1px solid var(--line);
}
.essay-item{border-bottom:1px solid var(--line)}
.essay-link{
  display:block;
  padding:26px 0 28px;
  color:var(--ink);
  text-decoration:none;
}
.essay-link:hover .essay-title{color:var(--accent)}
.essay-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
}
.essay-title{
  margin:0;
  font-size:18px;
  font-weight:750;
  line-height:1.6;
  transition:color .15s ease;
}
.essay-date{
  flex:none;
  color:var(--sub);
  font-size:13px;
  white-space:nowrap;
}
.essay-copy{
  margin:8px 0 0;
  max-width:42em;
  color:var(--sub);
  font-size:14px;
  line-height:1.75;
}
.page-essay-list .back{
  margin-top:48px;
  font-size:14px;
}

/* 個別記事 */
.page-article .main-inner{
  padding-top:clamp(52px,8vw,76px);
  padding-bottom:clamp(80px,12vw,124px);
}
.page-article .kicker{margin:0 0 12px}
.page-article h1{
  margin:0 0 10px;
  font-size:21px;
  font-weight:750;
  line-height:1.6;
  letter-spacing:.01em;
}
.meta{
  display:block;
  margin:0 0 44px;
  color:var(--sub);
  font-size:13px;
}
.body{max-width:42em}
.body p{margin:0}
.body p+p{margin-top:1.6em}
.body .break{
  margin:2.6em 0;
  border:0;
  height:1px;
  background:var(--line);
  max-width:5em;
}
.page-article .back{
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:.5em 1.5em;
  font-size:14px;
}

@media(max-width:520px){
  body{font-size:15.5px;line-height:1.9}

  .page-home main{align-items:flex-start}
  .page-home .main-inner{padding-top:68px;padding-bottom:84px}
  .page-home h1{font-size:clamp(34px,11vw,46px)}

  .page-essay-list .main-inner,
  .page-article .main-inner{padding-top:48px;padding-bottom:84px}
  .essay-head{display:block}
  .essay-date{display:block;margin-top:4px}
  .essay-link{padding:23px 0 25px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}

@media print{
  body{color:#000;background:#fff;font-size:11pt}
  .site-header,.site-footer{display:none}
  .page-home{display:block;min-height:auto}
  .page-home main{min-height:auto}
  .page-essay-list .back,.page-article .back{display:none}
}