/* ぐるり360 ブログ 共通スタイル — scripts/build-blog.mjs が生成。直接編集しない */
/* トークンはLP（public/index.html）の :root と揃えている。LPの色を変えたらここも直す。 */
:root{
  color-scheme:light;
  --paper:#faf6ec;
  --white:#fffdf8;
  --ink:#1a2f4d;
  --soft:#586477;
  --line:rgba(26,47,77,.22);
  --strong:rgba(26,47,77,.56);
  --accent:#a64b08;
  --accent2:#7f3703;
  --closing:#132743;
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","BIZ UDMincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif;
  --wrap:1160px;
  --measure:720px;
}
*,*:before,*:after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:clamp(1rem,.96rem + .16vw,1.075rem)/1.9 var(--sans);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-underline-offset:.18em }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0 }
:focus-visible{ outline:3px solid var(--accent); outline-offset:4px }
.num{ font-variant-numeric:tabular-nums }

.wrap{ width:min(100% - 40px,var(--measure)); margin-inline:auto }
.wrap-wide{ width:min(100% - 40px,var(--wrap)) }

/* ヘッダー */
.site-head{
  position:sticky; top:0; z-index:20;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.site-head-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px }
.brand{
  font-family:var(--serif); font-weight:600; font-size:1.06rem;
  letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap;
}
.head-nav{ display:flex; align-items:center; gap:18px; font-size:.8rem }
.head-nav a{ color:var(--soft); text-decoration:none }
.head-nav a:hover{ color:var(--accent); text-decoration:underline }
.head-cta{
  display:inline-flex; align-items:center; min-height:38px; padding:6px 14px;
  background:var(--accent); color:var(--paper) !important; border-radius:2px;
  font-weight:700; white-space:nowrap;
}
.head-cta:hover{ background:var(--accent2); text-decoration:none !important }
@media (max-width:600px){
  .head-nav{ gap:12px; font-size:.74rem }
  .head-nav .nav-hide-sp{ display:none }
}

/* パンくず */
.crumbs{ font-size:.74rem; color:var(--soft); padding:22px 0 0; letter-spacing:.02em }
.crumbs a{ color:var(--soft) }
.crumbs span{ margin:0 7px; color:var(--line) }

/* 記事 */
article{ padding:10px 0 64px }
.post-meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.72rem; color:var(--soft); margin:22px 0 12px; letter-spacing:.06em }
.badge{ color:var(--accent); font-weight:700 }
h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.34; letter-spacing:-.025em;
  text-wrap:balance; margin:.1em 0 .7em;
}
.lede{ color:var(--soft); font-size:.96rem; margin:0 0 34px; padding-bottom:28px; border-bottom:1px solid var(--line) }

.post-body h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.72rem); line-height:1.44; letter-spacing:-.02em;
  text-wrap:balance; margin:2.6em 0 .8em; padding-top:1.1em; border-top:1px solid var(--line);
}
.post-body h3{ font-size:1.06rem; font-weight:700; line-height:1.6; margin:2em 0 .5em }
.post-body h4{ font-size:.98rem; font-weight:700; margin:1.6em 0 .4em; color:var(--soft) }
.post-body p{ margin:0 0 1.5em }
.post-body ul,.post-body ol{ margin:0 0 1.6em; padding-left:1.35em }
.post-body li{ margin:0 0 .6em }
.post-body li::marker{ color:var(--strong) }
.post-body a{ color:var(--accent); text-decoration:underline }
.post-body a:hover{ color:var(--accent2) }
.post-body strong{ font-weight:700 }
.post-body code{
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  padding:1px 5px; font-size:.88em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.post-body blockquote{
  margin:0 0 1.6em; padding:2px 0 2px 20px;
  border-left:2px solid var(--accent); color:var(--soft);
}
.post-body blockquote p:last-child{ margin-bottom:0 }
.post-body hr{ border:0; border-top:1px solid var(--line); margin:2.6em 0 }

.table-wrap{ overflow-x:auto; margin:0 0 1.8em; -webkit-overflow-scrolling:touch }
.post-body table{ width:100%; min-width:400px; border-collapse:collapse; border-top:1px solid var(--ink); font-size:.82rem }
.post-body th,.post-body td{ padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
.post-body th{ font-size:.7rem; letter-spacing:.08em; color:var(--soft); font-weight:700; white-space:nowrap }

/* 目次 */
.toc{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:20px 24px; margin:0 0 36px }
.toc-title{ font-size:.7rem; letter-spacing:.12em; color:var(--soft); font-weight:700; margin:0 0 10px }
.toc ol{ margin:0; padding-left:1.25em; font-size:.87rem; line-height:1.85 }
.toc li{ margin:.2em 0 }
.toc li::marker{ color:var(--strong) }
.toc a{ color:var(--ink); text-decoration:none }
.toc a:hover{ color:var(--accent); text-decoration:underline }

/* 記事末 */
.post-cta{ margin:52px 0 0; padding:30px 26px; background:var(--white); border:1px solid var(--line); border-radius:4px }
.post-cta h2{ font-family:var(--serif); font-weight:600; font-size:1.2rem; margin:0 0 10px; border:0; padding:0 }
.post-cta p{ margin:0 0 18px; font-size:.88rem; color:var(--soft) }
.post-cta ul{ margin:0; padding-left:1.25em; font-size:.88rem }
/* :not(.btn) が要る。これが無いと詳細度 (0,1,1) で .btn-main の (0,1,0) に勝ってしまい、
   主ボタンが「橙の背景に橙の文字」で読めなくなる。 */
.post-cta a:not(.btn){ color:var(--accent) }
.cta-row{ display:flex; flex-wrap:wrap; gap:10px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:11px 20px; border:1px solid transparent; border-radius:2px;
  font-size:.86rem; font-weight:700; line-height:1.4; text-align:center; text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.btn-main{ background:var(--accent); color:var(--paper) }
.btn-main:hover{ background:var(--accent2) }
.btn-sub{ background:transparent; color:var(--ink); border-color:var(--strong) }
.btn-sub:hover{ border-color:var(--ink); background:var(--white) }

.tags{ margin:40px 0 0; display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.72rem; color:var(--soft) }
.tag:before{ content:"#"; color:var(--strong); margin-right:2px }

/* 一覧 */
.list-head{ padding:44px 0 6px }
.list-head h1{ margin:0 0 14px }
.list-head p{ color:var(--soft); margin:0 0 8px; font-size:.92rem }
.post-list{ list-style:none; padding:0; margin:30px 0 64px; border-top:1px solid var(--ink) }
.post-card{ border-bottom:1px solid var(--line) }
.post-card a{ display:block; padding:26px 4px; text-decoration:none; color:inherit }
.post-card a:hover h2{ color:var(--accent) }
.post-card h2{
  font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.55;
  margin:10px 0 10px; letter-spacing:-.015em; text-wrap:balance;
  transition:color .15s ease;
}
.post-card p{ margin:0; font-size:.86rem; color:var(--soft); line-height:1.85 }
.card-meta{ display:flex; gap:14px; align-items:center; font-size:.7rem; color:var(--soft); letter-spacing:.06em }

/* フッター */
footer{
  padding:34px 0 calc(34px + env(safe-area-inset-bottom));
  background:var(--closing); color:rgba(250,246,236,.62);
  border-top:1px solid rgba(250,246,236,.16);
  font-size:.7rem; text-align:center; line-height:2;
}
footer p{ margin:0 }
footer p+p{ margin-top:5px }
footer a{ color:rgba(250,246,236,.82) }