@charset "utf-8";
/* =========================================================
   エニタック会計事務所 — 共通スタイル
   紺 × 緑 を基調に、罫線と余白で構成する落ち着いたトーン
   ========================================================= */

:root{
  --ink:      #1B2E4B;   /* 紺（既存ブランドカラー） */
  --ink-2:    #33465F;
  --ink-3:    #5B6B80;
  --green:    #2BAD5E;   /* 緑（既存ブランドカラー） */
  --green-d:  #1E7A43;
  --green-l:  #C7DCCB;   /* 白緑（面・影に使う。彩度を落とした若草） */
  --akane:    #9C4A3E;   /* 臙脂（紅葉から。差し色。多用しない） */
  --paper:    #FBFAF7;   /* 生成り */
  --paper-2:  #F3F0E9;   /* 生成り（濃）— セクションの色替えに使う */
  --paper-3:  #EDE7DA;   /* 砂色 — 区切りの面 */
  --line:     #DDD8CC;
  --line-2:   #E9E5DB;
  --white:    #FFFFFF;
  --serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --wrap: 1220px;
  --gut: 40px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.95;
  color:var(--ink-2);
  background:var(--paper);
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--green-d); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.narrow{ max-width:760px; }

/* ── ヘッダー ───────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,247,.92);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line-2);
}
.site-head-in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:baseline; gap:11px; white-space:nowrap; }
.brand-mark{
  width:9px; height:9px; background:var(--green);
  border-radius:50%; flex:none; transform:translateY(-1px);
}
/* ヘッダーとフッターの丸印をロゴマークに差し替え */
.site-head .brand,
.foot-brand .brand{ align-items:center; gap:10px; }
.site-head .brand-mark,
.foot-brand .brand-mark{
  width:26px; height:21px; border-radius:0; transform:none;
  background:url("/images/logo-mark.png?v=20260917") center/contain no-repeat;
}
/* 極小画面ではロゴぶんの幅を詰めて、屋号が省略されないようにする */
@media(max-width:360px){
  .site-head .brand{ gap:8px; }
  .site-head .brand-mark{ width:20px; height:16px; }
}
.brand-name{ font-family:var(--serif); font-size:19px; color:var(--ink); letter-spacing:.09em; font-weight:600; }
.brand-sub{ font-size:10.5px; letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:13.5px; letter-spacing:.09em; color:var(--ink-2); white-space:nowrap;
  padding:6px 0; border-bottom:1px solid transparent; transition:border-color .2s, color .2s;
}
.nav a:hover, .nav a.is-current{ color:var(--ink); border-bottom-color:var(--green); }
.nav .nav-cta{
  border:1px solid var(--ink); padding:9px 20px; color:var(--ink);
  font-size:13px; letter-spacing:.09em; transition:background .2s, color .2s;
}
.nav .nav-cta:hover{ background:var(--ink); color:var(--white); border-bottom-color:var(--ink); }

.nav-toggle{
  display:none; background:none; border:0; padding:8px; cursor:pointer;
  width:42px; height:42px; flex:none;
}
.nav-toggle span{ display:block; height:1px; background:var(--ink); margin:6px 0; transition:.25s; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ナビ7項目を1行に並べるには実測で約1,061px要る（余白80＋ロゴ303＋間24＋ナビ654）。
   それより狭いと項目が縦に折り返して崩れるので、1,100px以下はメニューボタンに切り替える（2026-09-11） */
@media(max-width:1100px){
  .nav-toggle{ display:block; }
  .brand-sub{ display:none; }
  .brand{ min-width:0; }
  .brand-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .nav{
    position:fixed; inset:74px 0 auto 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px var(--gut) 28px; border-bottom:1px solid var(--line);
    max-height:calc(100vh - 74px); overflow:auto;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ width:100%; padding:15px 0; border-bottom:1px solid var(--line-2); font-size:15px; }
  .nav a:hover, .nav a.is-current{ border-bottom-color:var(--line-2); }
  .nav .nav-cta{ border:0; border-bottom:1px solid var(--line-2); padding:15px 0; }
  .nav .nav-cta:hover{ background:none; color:var(--green-d); }
}

/* ── 見出し・共通パーツ ─────────────────────── */
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--green-d); margin:0 0 20px; font-weight:500;
}
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:1px;
  background:var(--green); vertical-align:middle; margin-right:12px; transform:translateY(-2px);
}
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:600; letter-spacing:.04em; }
h1{ font-size:clamp(23px,3.1vw,31px); line-height:1.65; margin:0 0 26px; }
h2{ font-size:clamp(23px,3.1vw,31px); line-height:1.65; margin:0 0 26px; }
h3{ font-size:19px; line-height:1.7; margin:0 0 12px; }
p{ margin:0 0 1.5em; }
.lead{ font-size:16.5px; line-height:2.1; color:var(--ink-2); }
.muted{ color:var(--ink-3); }
.small{ font-size:13.5px; line-height:1.9; }

section{ padding:92px 0; }
.section-line{ border-top:1px solid var(--line-2); }

/* 生成りの濃淡でセクションを塗り分け、白が続かないようにする。
   面の色が変わるところは罫線を引かない（線と面の二重の区切りを避ける） */
#fields,
#who,
#profile{ background:var(--paper-2); }
#profile{ border-top:0; }
@media(max-width:700px){ :root{ --gut:24px; } section{ padding:62px 0; } }
@media(max-width:360px){ .brand-name{ font-size:15.5px; } }

.btn{
  display:inline-block; padding:15px 34px; font-size:14px; letter-spacing:.1em;
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  transition:background .22s, color .22s; cursor:pointer; font-family:var(--sans);
}
.btn:hover{ background:var(--ink); color:var(--white); }
.btn-fill{ background:var(--ink); color:var(--white); }
.btn-fill:hover{ background:var(--green-d); border-color:var(--green-d); color:var(--white); }
.btn-ghost{ border-color:var(--line); color:var(--ink-2); }
.btn-ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--white); }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px; font-size:14px;
  letter-spacing:.08em; color:var(--ink); border-bottom:1px solid var(--line);
  padding-bottom:4px; transition:border-color .2s, gap .2s;
}
.link-arrow::after{ content:"→"; color:var(--green-d); transition:transform .2s; }
.link-arrow:hover{ border-bottom-color:var(--green); }
.link-arrow:hover::after{ transform:translateX(4px); }

/* 画像スロット：画像が未設置でも崩れないよう下地を敷く */
.ph{
  position:relative; overflow:hidden; background-color:var(--paper-2);
  background-image:linear-gradient(160deg,#EDE8DD 0%,#E3E7E0 52%,#DCE4DE 100%);
  background-size:cover; background-position:center;
}
.ph::after{
  content:attr(data-label); position:absolute; inset:auto 0 0 0;
  font-size:10.5px; letter-spacing:.2em; color:#A9A497; padding:10px 14px;
  text-transform:uppercase;
}
.ph.has-img::after{ display:none; }
.ph > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── ヒーロー ───────────────────────────────── */
.hero{ position:relative; padding:0; overflow:hidden; }
.hero-in{
  max-width:var(--wrap); margin:0 auto; padding:92px var(--gut) 88px;
  display:grid; grid-template-columns:1.18fr .82fr; gap:68px; align-items:center;
}
/* 見出しは1行で収める。ビューポート幅ではなく左カラムの実幅に追従させないと、
   余白とgapのぶん(148px)がずれて中間幅で溢れる */
.hero-text{ container-type:inline-size; }
.hero h1{
  font-size:min(5.5cqi,42px); line-height:1.52; margin:0 0 28px;
  letter-spacing:.03em; font-weight:600; white-space:nowrap;
}
.hero h1 .accent{
  background:linear-gradient(transparent 70%, rgba(43,173,94,.24) 70%);
}
.hero-lead{ font-size:15.5px; line-height:2.1; color:var(--ink-2); margin:0 0 34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* 写真 ＋ 背後の和柄（青海波）。紺と緑を線色に使っています */
.hero-visual{ position:relative; }
.hero-photo{ position:relative; z-index:1; aspect-ratio:4/5; }
.wa-panel{
  position:absolute; z-index:0; top:-38px; right:-64px;
  width:74%; height:62%;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'>\
<g fill='none' stroke-width='1'>\
<g stroke='%231B2E4B' opacity='0.5'>\
<path d='M-20 20 A20 20 0 0 1 20 20'/><path d='M0 20 A20 20 0 0 1 40 20'/>\
<path d='M20 20 A20 20 0 0 1 60 20'/></g>\
<g stroke='%232BAD5E' opacity='0.45'>\
<path d='M-10 20 A10 10 0 0 1 10 20'/><path d='M10 20 A10 10 0 0 1 30 20'/>\
<path d='M30 20 A10 10 0 0 1 50 20'/></g></g></svg>");
  background-size:40px 20px;
  -webkit-mask-image:linear-gradient(215deg, #000 22%, transparent 78%);
  mask-image:linear-gradient(215deg, #000 22%, transparent 78%);
}
/* 写真の後ろに、右下へずらした細い枠（額装のように） */
.hero-visual::before{
  content:""; position:absolute; z-index:0; inset:20px -20px -20px 20px;
  border:1px solid var(--ink); opacity:.28;
  animation:intro-fade 1.2s ease-out both; animation-delay:calc(var(--intro-delay,0s) + .9s);
}
/* 左下にも一枚、緑の面で受ける */
.hero-visual::after{
  content:""; position:absolute; z-index:0; left:-40px; bottom:-34px;
  width:46%; height:34%; background:var(--green-l);
}

/* 2カラムのままだと見出しが1行に収まらなくなるため、1100pxで1カラムに切り替える */
@media(max-width:1100px){
  .hero-in{ grid-template-columns:1fr; gap:46px; padding:60px var(--gut) 64px; }
  /* 1カラムなら幅があるので、収まらないときだけ折り返す */
  .hero-text{ container-type:normal; }
  .hero h1{ font-size:clamp(26px,4.9vw,42px); white-space:normal; }
  .hero-visual{ order:-1; }
  .hero-photo{ aspect-ratio:16/10; }
  .wa-panel{ top:-24px; right:-30px; width:46%; height:56%; }
  .hero-visual::after{ left:-24px; bottom:-20px; width:34%; height:26%; }
  .hero-visual::before{ inset:12px -12px -12px 12px; }
  .scroll-cue{ display:none; }
}
/* スクロールの目印：細い縦線の上を小さな点が下りていく */
.scroll-cue{
  position:absolute; left:max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); bottom:26px;
  display:flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
  animation:intro-fade 1s ease-out both; animation-delay:calc(var(--intro-delay,0s) + 1.4s);
}
.scroll-cue-line{ position:relative; width:1px; height:44px; background:var(--line); overflow:hidden; }
.scroll-cue-line::after{
  content:""; position:absolute; left:0; top:-10px; width:1px; height:10px; background:var(--green);
  animation:scroll-cue 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes scroll-cue{ 70%,100%{ transform:translateY(56px); } }

/* ── 支援領域（2026-09-19 石橋さんの依頼「文字ばかり。枠や区切りでスマートに」） ──
   見出しは左に題、右に説明の2列。3つの領域はそれぞれ生成りの面に細い枠（上辺だけ紺の太線）で囲み、
   説明と箇条書きの間に罫線を1本。箇条書きは小さな菱形の印と点線で区切る。角丸・影は使わない */
.sec-head{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:end; margin-bottom:44px; }
.sec-head h2{ margin:0; }
.sec-head .lead{ margin:0 0 6px; }
.fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.field{
  background:var(--paper); border:1px solid var(--line); border-top:2px solid var(--ink);
  padding:30px 30px 24px; display:flex; flex-direction:column;
}
.field-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.field-no{ font-family:var(--serif); font-size:12.5px; letter-spacing:.2em; color:var(--green-d); margin:0; }
.field h3{ font-size:18px; margin:0; }
.field-lead{ font-size:14.5px; line-height:1.95; color:var(--ink-3); margin:0 0 18px; padding-bottom:18px; border-bottom:1px solid var(--line-2); }
.field-label{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-d); margin:0 0 4px; }
.field ul{ margin:0; padding:0; list-style:none; }
.field li{
  font-size:13.5px; color:var(--ink-2); padding:8px 0 8px 18px;
  position:relative; border-bottom:1px dotted var(--line); line-height:1.7;
}
.field li:last-child{ border-bottom:0; }
.field li::before{
  content:""; position:absolute; left:1px; top:17px;
  width:5px; height:5px; border:1px solid var(--green); transform:rotate(45deg);
}
.fields-more{ margin:36px 0 0; }
@media(max-width:1000px){
  .fields{ grid-template-columns:1fr; gap:14px; }
  .sec-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
}

/* さらに踏み込む領域 */
.advanced{ background:var(--ink); color:#D7DEE8; }
.advanced h2{ color:var(--white); }
.advanced .eyebrow{ color:#7FD3A0; }
.advanced .eyebrow::before{ background:#7FD3A0; }
.advanced p{ color:#B9C4D2; }
/* 2×2。1行に詰め込まず、文章が読める幅を確保します */
.adv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 64px; margin-top:20px; }
.adv{ padding:30px 0 26px; border-top:1px solid rgba(255,255,255,.16); }
.adv-no{ font-family:var(--serif); font-size:12.5px; letter-spacing:.2em; color:#7FD3A0; margin:0 0 12px; }
.adv h3{ color:var(--white); font-size:17.5px; margin:0 0 11px; }
.adv p{ font-size:14px; line-height:1.95; color:#A8B6C6; margin:0; }
@media(max-width:760px){
  .adv-grid{ grid-template-columns:1fr; gap:0; }
}

/* ── 支える企業（写真） ─────────────────────── */
.who-head{ max-width:640px; margin-bottom:50px; }
.who{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
.who-item .ph{ aspect-ratio:3/2; margin-bottom:22px; }
.who-tag{
  font-size:11px; letter-spacing:.16em; color:var(--green-d);
  margin:0 0 8px; text-transform:uppercase;
}
.who-item h3{ font-size:18px; margin:0 0 10px; }
.who-item p{ font-size:14.5px; line-height:1.95; color:var(--ink-3); margin:0; }

/* 写真のない項目は、罫線区切りのテキストで続ける */
.who-more{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin-top:54px;
}
.who-more > div{ padding:30px 0 4px; border-top:1px solid var(--line); }
.who-more h3{ font-size:17px; margin:0 0 10px; }
.who-more p{ font-size:14.5px; line-height:1.95; color:var(--ink-3); margin:0; }

@media(max-width:760px){
  .who{ grid-template-columns:1fr; gap:40px; }
  .who-more{ grid-template-columns:1fr; margin-top:40px; }
}

/* ── プロフィール ───────────────────────────── */
.profile{ display:grid; grid-template-columns:92px 1fr; gap:36px; align-items:start; }
/* 写真が未設置のときは1カラムに詰める（空の灰色枠を出さない） */
.profile.no-photo{ grid-template-columns:1fr; max-width:820px; }
/* 写真は小さめ。緑の細い縁で受けています */
.profile-photo{
  aspect-ratio:3/4; position:relative;
  box-shadow:-6px 6px 0 var(--green-l);
}
.profile-name{ font-family:var(--serif); font-size:27px; color:var(--ink); margin:0 0 6px; letter-spacing:.06em; }
/* 英字は従来どおり大文字＋広めの字間。日本語の肩書はそのまま自然な字間で出す */
.profile-role{ font-size:13px; line-height:1.9; letter-spacing:.16em; color:var(--ink-3); margin:0 0 26px; }
.profile-role .en{ text-transform:uppercase; }
.profile-role .ja{ letter-spacing:.06em; }
.creds{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none; }
.creds li{
  font-size:12px; letter-spacing:.06em; color:var(--ink-2);
  border:1px solid var(--line); padding:5px 13px;
}
.career{ margin:30px 0 0; padding:0; list-style:none; }
.career li{
  display:grid; grid-template-columns:112px 1fr; gap:20px;
  padding:15px 0; border-top:1px solid var(--line-2); font-size:14.5px; line-height:1.85;
}
.career .yr{ color:var(--green-d); font-size:12.5px; letter-spacing:.1em; padding-top:3px; }
@media(max-width:820px){
  .profile{ grid-template-columns:1fr; gap:28px; }
  .profile-photo{ aspect-ratio:3/4; max-width:92px; }
  .career li{ grid-template-columns:1fr; gap:2px; }
}

/* 経歴：所属ごとに見出しを立てる */
.career .org{ font-family:var(--serif); font-size:15.5px; color:var(--ink); display:block; margin-bottom:4px; }
.career .role{ font-size:12px; letter-spacing:.1em; color:var(--green-d); display:block; margin-bottom:8px; }

/* ── コラム ─────────────────────────────────── */
.col-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:42px; flex-wrap:wrap; }
.col-head h2{ margin:0; }

/* 「注目記事」「最新記事」の2段。段の頭は細い罫線と小さな見出しだけで区切る */
.col-row + .col-row{ margin-top:58px; }
.col-row-head{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:30px; border-bottom:1px solid var(--line);
}
.col-row-title{
  font-size:12px; letter-spacing:.2em; color:var(--ink-2); margin:0; font-weight:500;
}

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:38px; }
.posts.rows{ grid-template-columns:1fr; gap:0; }

.post{ display:block; color:inherit; }
.post .ph{ aspect-ratio:16/10; margin-bottom:18px; transition:opacity .25s; }
.post:hover .ph{ opacity:.86; }
.post-meta{ display:flex; align-items:center; gap:13px; margin-bottom:10px; }
.post-date{ font-size:12px; letter-spacing:.1em; color:var(--ink-3); }
.post-tag{ font-size:11px; letter-spacing:.12em; color:var(--green-d); border:1px solid var(--line); padding:3px 10px; }
/* 注目記事の印。タグと囲みが二重にならないよう、eyebrow と同じ「細い罫線＋小字」で揃える */
.post-pin{ font-size:11px; letter-spacing:.14em; color:var(--akane); white-space:nowrap; }
.post-pin::before{
  content:""; display:inline-block; width:14px; height:1px;
  background:var(--akane); vertical-align:middle; margin-right:7px; transform:translateY(-1px);
}
.post h3{ font-size:17.5px; line-height:1.75; margin:0 0 10px; transition:color .2s; }
.post:hover h3{ color:var(--green-d); }
.post p{ font-size:14px; line-height:1.9; color:var(--ink-3); margin:0; }

/* 一覧（行レイアウト） */
.posts.rows .post{
  display:grid; grid-template-columns:210px 1fr; gap:32px; align-items:start;
  padding:34px 0; border-top:1px solid var(--line-2);
}
.posts.rows .post .ph{ aspect-ratio:4/3; margin:0; }
.posts.rows .post h3{ font-size:20px; }
@media(max-width:860px){ .posts{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:700px){
  .posts{ grid-template-columns:1fr; gap:38px; }
  .posts.rows .post{ grid-template-columns:1fr; gap:16px; }
}

/* 記事本文 */
.article-head{ padding:74px 0 46px; border-bottom:1px solid var(--line-2); }
.article-head h1{
  font-size:clamp(25px,3.7vw,38px); line-height:1.62; margin:16px 0 22px; letter-spacing:.04em;
}
.article-hero{ aspect-ratio:16/8; margin:0 0 8px; }
.article-body{ max-width:720px; margin:0 auto; padding:58px var(--gut) 20px; }
.article-body h2{
  font-size:22px; margin:60px 0 20px; padding-bottom:14px;
  border-bottom:1px solid var(--line); line-height:1.65;
}
.article-body h3{ font-size:17.5px; margin:38px 0 14px; }
.article-body p{ font-size:16px; line-height:2.15; margin:0 0 1.7em; }
.article-body ul,.article-body ol{ margin:0 0 1.7em; padding-left:1.4em; }
.article-body li{ margin-bottom:.7em; line-height:2.05; }
.article-body p a,.article-body li a,.article-body .note a,.article-body figcaption a{ color:var(--green-d); border-bottom:1px solid var(--green-l); padding-bottom:1px; transition:border-color .2s; }
.article-body p a:hover,.article-body li a:hover,.article-body .note a:hover{ border-bottom-color:var(--green-d); }
.article-body blockquote{
  margin:2em 0; padding:4px 0 4px 24px; border-left:2px solid var(--green);
  color:var(--ink-3); font-size:15.5px; line-height:2.05;
}
/* 記事内の表。囲みは使わず、横罫と余白だけで組む。狭い画面では横スクロール */
.table-wrap{ overflow-x:auto; margin:2.2em 0; }
.article-body table{ border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; }
.article-body th,.article-body td{
  text-align:left; vertical-align:top; padding:14px 18px 14px 0;
  border-bottom:1px solid var(--line-2); line-height:1.85;
}
.article-body thead th{
  border-bottom:1px solid var(--line); color:var(--ink-3);
  font-size:12px; letter-spacing:.12em; font-weight:500; padding-bottom:10px;
}
.article-body tbody th{ color:var(--ink); font-weight:600; white-space:nowrap; }

.article-body figure{ margin:2.4em 0; }
.article-body figcaption{ font-size:12.5px; color:var(--ink-3); margin-top:10px; letter-spacing:.04em; }
.article-body .note{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:24px 0; margin:2.4em 0; font-size:14.5px; line-height:2; color:var(--ink-3);
}
/* 記事末尾の著者欄。全記事に同じものを置く（テンプレートに組み込み済み） */
.author-wrap{ max-width:720px; margin:0 auto; padding:0 var(--gut); }
.author-box{
  display:grid; grid-template-columns:1fr; gap:24px;
  margin:56px 0 0; padding:32px 0 0; border-top:1px solid var(--line);
}
/* 記事の著者欄は既定で写真なし。写真を入れた記事だけ2カラムになる */
.author-box:has(.ph){ grid-template-columns:78px 1fr; }
.author-box .ph{ aspect-ratio:3/4; }
.author-name{ font-family:var(--serif); font-size:19px; color:var(--ink); margin:0 0 5px; letter-spacing:.05em; }
.author-role{ font-size:12px; line-height:1.85; letter-spacing:.08em; color:var(--ink-3); margin:0 0 15px; }
.author-box p{ font-size:14px; line-height:1.95; color:var(--ink-3); margin:0 0 16px; }
.author-links{ display:flex; flex-wrap:wrap; gap:22px; margin:0; padding:0; list-style:none; }
.author-links a{ font-size:13px; color:var(--green-d); border-bottom:1px solid var(--line); padding-bottom:2px; }
.author-links a:hover{ border-bottom-color:var(--green); }
@media(max-width:640px){
  .author-box{ grid-template-columns:1fr; gap:18px; }
  .author-box .ph{ max-width:78px; }
}

.article-foot{ max-width:720px; margin:0 auto; padding:38px var(--gut) 0; border-top:1px solid var(--line-2); }

.breadcrumb{ font-size:12px; letter-spacing:.08em; color:var(--ink-3); margin:0 0 4px; }
.breadcrumb a{ color:var(--ink-3); border-bottom:1px solid transparent; }
.breadcrumb a:hover{ color:var(--green-d); border-bottom-color:var(--line); }
.breadcrumb span{ margin:0 8px; color:var(--line); }

/* ── お問い合わせ ───────────────────────────── */
.contact{ background:var(--paper-3); }
/* 砂色の面では緑と灰の文字のコントラスト比が4.5を切る。この面の中だけ一段濃くする */
.contact .eyebrow{ color:#1C7340; }
.contact .muted{ color:#56667B; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start; }
.info{ margin:34px 0 0; padding:0; list-style:none; }
.info li{ padding:17px 0; border-top:1px solid var(--line); }
.info .k{ font-size:11px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; display:block; margin-bottom:5px; }
.info .v{ font-size:15px; color:var(--ink); line-height:1.8; }

.form-row{ margin-bottom:22px; }
.form-row label{
  display:block; font-size:12.5px; letter-spacing:.1em; color:var(--ink-2); margin-bottom:8px;
}
.form-row .req{ color:var(--green-d); margin-left:6px; font-size:11px; letter-spacing:.08em; }
.form-row input,.form-row select,.form-row textarea{
  width:100%; padding:13px 15px; font-size:15px; font-family:var(--sans);
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:0; transition:border-color .2s;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none; border-color:var(--green);
}
.form-row textarea{ min-height:150px; resize:vertical; line-height:1.85; }
.form-note{ font-size:12.5px; color:var(--ink-3); line-height:1.85; margin:16px 0 22px; }
.form-ok{
  display:none; border:1px solid var(--green); padding:22px 24px;
  font-size:14.5px; line-height:1.9; color:var(--green-d); background:var(--white);
}
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }

/* ── フッター ───────────────────────────────── */
.site-foot{ background:var(--ink); color:#94A3B5; padding:60px 0 32px; }
.foot-in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-brand .brand-name{ color:var(--white); }
.foot-brand .brand-sub{ color:#8E9DB0; }
.foot-brand p{ font-size:13px; line-height:1.9; margin:16px 0 0; color:#8B9AAD; max-width:26em; }
.foot-nav{ display:flex; gap:52px; flex-wrap:wrap; }
/* フッターの見出しは h2（h4 だと本文の h2 から階層が飛ぶ）。紺地の文字色はコントラスト比4.5以上にする */
.foot-nav h2{ font-family:var(--sans); font-size:11px; line-height:inherit; letter-spacing:.2em; color:#8E9DB0; margin:0 0 14px; text-transform:uppercase; font-weight:500; }
.foot-nav ul{ margin:0; padding:0; list-style:none; }
.foot-nav li{ margin-bottom:11px; }
.foot-nav a{ font-size:13.5px; color:#B4C0CE; }
.foot-nav a:hover{ color:var(--white); }
.foot-copy{
  max-width:var(--wrap); margin:0 auto; padding:26px var(--gut) 0;
  font-size:11.5px; letter-spacing:.1em; color:#8B9AAD;
}

/* ── 出現アニメーション（控えめ） ─────────────── */
.rise{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.rise.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ── 開いたときの動き ───────────────────────────
   控えめに。文字が上から順に浮かび、写真がわずかに引いて落ち着く。
   動きを減らす設定の人には出さない */
@keyframes intro-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes intro-settle{ from{ opacity:0; transform:scale(1.035); } to{ opacity:1; transform:none; } }
@keyframes intro-drift{ from{ opacity:0; transform:translate(10px,-8px); } to{ opacity:1; transform:none; } }
@keyframes intro-fade{ from{ opacity:0; } to{ opacity:1; } }

/* 暖簾が出るときは --intro-delay（下記）のぶんだけ遅らせ、暖簾が開くのに合わせて動かす */
.site-head{ animation:intro-fade .6s ease-out both; animation-delay:var(--intro-delay,0s); }
.hero-text > *{ animation:intro-rise .85s cubic-bezier(.2,.7,.2,1) both; }
.hero-text > :nth-child(1){ animation-delay:calc(var(--intro-delay,0s) + .10s); }
.hero-text > :nth-child(2){ animation-delay:calc(var(--intro-delay,0s) + .22s); }
.hero-text > :nth-child(3){ animation-delay:calc(var(--intro-delay,0s) + .36s); }
.hero-text > :nth-child(4){ animation-delay:calc(var(--intro-delay,0s) + .50s); }
/* 写真は落ち着いたあと、24秒かけてごくゆっくり寄っていく（往復）。青海波は右へ流れ続ける（2026-09-19） */
.hero-photo{
  animation:intro-settle 1.5s cubic-bezier(.2,.7,.2,1) both,
            hero-breathe 24s ease-in-out infinite alternate;
  animation-delay:calc(var(--intro-delay,0s) + .15s), calc(var(--intro-delay,0s) + 1.7s);
}
.wa-panel{
  animation:intro-drift 1.4s ease-out both,
            hero-wave 18s linear infinite;
  animation-delay:calc(var(--intro-delay,0s) + .35s), calc(var(--intro-delay,0s) + 1.4s);
}
@keyframes hero-breathe{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
@keyframes hero-wave{ to{ background-position:40px 0; } }
.hero-visual::after{ animation:intro-fade 1.2s ease-out both; animation-delay:calc(var(--intro-delay,0s) + .6s); }

/* 記事ページは見出しまわりだけ同じ動き */
.article-head .wrap > *{ animation:intro-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.article-head .wrap > :nth-child(1){ animation-delay:.08s; }
.article-head .wrap > :nth-child(2){ animation-delay:.20s; }
.article-head .wrap > :nth-child(3){ animation-delay:.32s; }

@media(prefers-reduced-motion:reduce){
  .site-head, .hero-text > *, .hero-photo, .wa-panel, .hero-visual::after, .hero-visual::before, .scroll-cue, .scroll-cue-line::after,
  .article-head .wrap > *{ animation:none; }
}

/* ── 記事末尾「あわせて読みたい」（build.js が生成） ─────── */
.related-wrap{ max-width:720px; margin:56px auto 0; padding:0 var(--gut); }
.related-title{ font-size:11px; letter-spacing:.18em; color:var(--ink-3); margin:0 0 6px; text-transform:uppercase; }
.related{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.related li{ border-bottom:1px solid var(--line); }
.related a{ display:block; padding:16px 0; }
.related-meta{ display:flex; gap:14px; font-size:11.5px; letter-spacing:.08em; color:var(--ink-3); margin-bottom:5px; }
.related-name{ font-family:var(--serif); font-size:16px; line-height:1.7; color:var(--ink); transition:color .2s; }
.related a:hover .related-name{ color:var(--green-d); }

/* ── 記事タグ（build.js が posts.js の tags から生成） ───── */
.post-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
.post-tags a{
  font-size:11.5px; letter-spacing:.08em; color:var(--ink-3);
  border:1px solid var(--line); padding:5px 11px; background:rgba(255,255,255,.5);
  transition:border-color .2s, color .2s;
}
.post-tags a:hover{ color:var(--green-d); border-color:var(--green); }
/* コラム一覧の「タグから探す」 */
.tag-index{ margin:0 0 46px; gap:9px; }
.tag-index a span{ margin-left:7px; color:var(--line); font-size:10.5px; }
.tag-index a:hover span{ color:var(--green); }
/* 私見であることの注記。相談用の note と区別して控えめに */
.note.view-note{ background:none; border-left:2px solid var(--line); color:var(--ink-3); font-size:13.5px; }

/* ── お知らせ（build.js が news/posts.js から生成） ───── */
.news-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.news-item{ border-bottom:1px solid var(--line); padding:26px 0; }
.news-meta{ display:flex; align-items:center; gap:14px; margin-bottom:7px; }
.news-date{ font-size:12px; letter-spacing:.08em; color:var(--ink-3); }
.news-type{
  font-size:10.5px; letter-spacing:.12em; color:var(--green-d);
  border:1px solid var(--green-l); padding:3px 9px; white-space:nowrap;
}
.news-title{ font-family:var(--serif); font-size:17px; line-height:1.75; color:var(--ink); margin:0 0 8px; }
.news-item p{ font-size:14px; line-height:1.95; color:var(--ink-3); margin:0; }
.news-link{ margin-top:10px !important; }
.news-link a{ font-size:13px; color:var(--green-d); border-bottom:1px solid var(--line); padding-bottom:2px; }
.news-link a:hover{ border-bottom-color:var(--green); }
/* お知らせの一覧：日付・種別・タイトルの1行。行全体が詳細へのリンク */
.news-row{ border-bottom:1px solid var(--line); }
.news-row a{
  display:grid; grid-template-columns:92px auto 1fr; align-items:baseline; column-gap:18px;
  padding:20px 2px; color:var(--ink); text-decoration:none;
}
.news-row .news-type{ justify-self:start; }
.news-row .news-title{
  font-family:var(--serif); font-size:16px; line-height:1.75; margin:0; color:var(--ink); transition:color .2s;
}
.news-row a:hover .news-title{ color:var(--green-d); }
@media (max-width:700px){
  .news-row a{ grid-template-columns:auto 1fr; row-gap:6px; }
  .news-row .news-title{ grid-column:1 / -1; }
}

/* ── 開いたときの暖簾（2026-09-18。同日2回作り直し） ─────────────
   ホームだけ・そのタブで最初の1回だけ。約3.9秒（割れ始めは2.0秒、くぐり抜けは2.75秒から）。
   2回目は四角い板をCSSで回すだけで「リアリティがない・カクカク」との指摘を受けた。
   いまは site.js が SVG で布の輪郭を毎フレーム描き直している（requestAnimationFrame）。
   上端は竿に掛かったまま、下ほど大きくしなる。① 風にそよぐ → ② 真ん中から押し分けられ、
   内側の2枚が大きく外へしなって少し揺れ戻る（振れた下側に影が落ちる）→ ③ 開いた暖簾の間を前へ進んで抜ける（進む先を消失点に、布が手前へ広がって視界の外へ流れる）。
   ここのCSSは「site.js が動き出すまでの一瞬」に見せる無地の暖簾（縫い目と3本の割れ目）と、
   万一 site.js が動かなかったときの後始末だけを受け持つ。
   出すかどうかは index.html の head のスクリプトが決め、html に noren-on を付ける。
   JavaScript が動かない人・「動きを減らす」設定の人には出さない。クリックかキー操作ですぐ開く */
.noren{ display:none; }
html.noren-on{ --intro-delay:2.7s; }
/* 暖簾をくぐると、向こうのトップ画面もわずかに手前へ寄ってくる（前へ進んだ感じ） */
html.noren-on .hero-in{ animation:noren-approach 1.3s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--intro-delay,0s) - .35s); }
@keyframes noren-approach{ from{ transform:scale(.955); } to{ transform:none; } }
html.noren-on .noren{
  display:block; position:fixed; inset:0; z-index:1000; cursor:pointer; overflow:hidden;
  background:
    linear-gradient(rgba(251,250,247,.2), rgba(251,250,247,.2)) 0 44px / 100% 1px no-repeat,
    linear-gradient(rgba(251,250,247,.14), rgba(251,250,247,.14)) 25% 45px / 1px calc(100% - 45px) no-repeat,
    linear-gradient(rgba(251,250,247,.14), rgba(251,250,247,.14)) 50% 45px / 1px calc(100% - 45px) no-repeat,
    linear-gradient(rgba(251,250,247,.14), rgba(251,250,247,.14)) 75% 45px / 1px calc(100% - 45px) no-repeat,
    var(--ink);
  animation:noren-away 0s linear 5s forwards;   /* site.js が動かなかったときの保険 */
}
html.noren-on .noren.is-live{ background:none; }
html.noren-skip .noren{ display:none; }
/* 幅・高さは属性ではなくCSSで画面いっぱいに（読み込み後に画面の高さが変わっても裾の下が空かない） */
.noren-svg{ position:absolute; inset:0; display:block; width:100%; height:100%; }
@keyframes noren-away{ to{ visibility:hidden; } }
@media(prefers-reduced-motion:reduce){ html.noren-on .noren{ display:none; } }

/* ── 和柄（2026-09-18） ─────────────────────────
   石橋さんの依頼「単色だけだとダサい。市松や麻の葉を足してスマートに」。背景色は変えない。
   役割を分けて、使う場所を絞っている。
     青海波 … ヒーロー（従来どおり）
     麻の葉 … 細い線。セクションの隅から滲んで消えるように置く（支援領域・その先の選択肢・記事の見出し）
              ※お問い合わせにも置いていたが、文字と重なって読みにくいとの指摘で外した（2026-09-18）
     市松   … 紺の面の縁取り（その先の選択肢とフッターの上端）。上の面の色と紺が交互になり、面が切り替わる
   柄は文字の少ない端に寄せ、マスクで消えていくようにしてある（本文の読みやすさを落とさないため）。
   柄は擬似要素で敷く。isolation で重なり順を閉じ、z-index:-1 で文字の下・面の色の上に置く */
:root{
  --pat-asanoha:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='45.03' viewBox='0 0 26 45.03'><path d='M-52 -45.03L-26 -45.03M-52 -45.03L-39 -22.52M-52 -45.03L-65 -22.52M-39 -37.53L-52 -45.03M-39 -37.53L-26 -45.03M-39 -37.53L-39 -22.52M-52 -30.02L-52 -45.03M-52 -30.02L-39 -22.52M-52 -30.02L-65 -22.52M-26 -45.03L0 -45.03M-26 -45.03L-13 -22.52M-26 -45.03L-39 -22.52M-13 -37.53L-26 -45.03M-13 -37.53L0 -45.03M-13 -37.53L-13 -22.52M-26 -30.02L-26 -45.03M-26 -30.02L-13 -22.52M-26 -30.02L-39 -22.52M0 -45.03L26 -45.03M0 -45.03L13 -22.52M0 -45.03L-13 -22.52M13 -37.53L0 -45.03M13 -37.53L26 -45.03M13 -37.53L13 -22.52M0 -30.02L0 -45.03M0 -30.02L13 -22.52M0 -30.02L-13 -22.52M26 -45.03L52 -45.03M26 -45.03L39 -22.52M26 -45.03L13 -22.52M39 -37.53L26 -45.03M39 -37.53L52 -45.03M39 -37.53L39 -22.52M26 -30.02L26 -45.03M26 -30.02L39 -22.52M26 -30.02L13 -22.52M52 -45.03L78 -45.03M52 -45.03L65 -22.52M52 -45.03L39 -22.52M65 -37.53L52 -45.03M65 -37.53L78 -45.03M65 -37.53L65 -22.52M52 -30.02L52 -45.03M52 -30.02L65 -22.52M52 -30.02L39 -22.52M-39 -22.52L-13 -22.52M-39 -22.52L-26 0M-39 -22.52L-52 0M-26 -15.01L-39 -22.52M-26 -15.01L-13 -22.52M-26 -15.01L-26 0M-39 -7.51L-39 -22.52M-39 -7.51L-26 0M-39 -7.51L-52 0M-13 -22.52L13 -22.52M-13 -22.52L0 0M-13 -22.52L-26 0M0 -15.01L-13 -22.52M0 -15.01L13 -22.52M0 -15.01L0 0M-13 -7.51L-13 -22.52M-13 -7.51L0 0M-13 -7.51L-26 0M13 -22.52L39 -22.52M13 -22.52L26 0M13 -22.52L0 0M26 -15.01L13 -22.52M26 -15.01L39 -22.52M26 -15.01L26 0M13 -7.51L13 -22.52M13 -7.51L26 0M13 -7.51L0 0M39 -22.52L65 -22.52M39 -22.52L52 0M39 -22.52L26 0M52 -15.01L39 -22.52M52 -15.01L65 -22.52M52 -15.01L52 0M39 -7.51L39 -22.52M39 -7.51L52 0M39 -7.51L26 0M65 -22.52L91 -22.52M65 -22.52L78 0M65 -22.52L52 0M78 -15.01L65 -22.52M78 -15.01L91 -22.52M78 -15.01L78 0M65 -7.51L65 -22.52M65 -7.51L78 0M65 -7.51L52 0M-52 0L-26 0M-52 0L-39 22.52M-52 0L-65 22.52M-39 7.51L-52 0M-39 7.51L-26 0M-39 7.51L-39 22.52M-52 15.01L-52 0M-52 15.01L-39 22.52M-52 15.01L-65 22.52M-26 0L0 0M-26 0L-13 22.52M-26 0L-39 22.52M-13 7.51L-26 0M-13 7.51L0 0M-13 7.51L-13 22.52M-26 15.01L-26 0M-26 15.01L-13 22.52M-26 15.01L-39 22.52M0 0L26 0M0 0L13 22.52M0 0L-13 22.52M13 7.51L0 0M13 7.51L26 0M13 7.51L13 22.52M0 15.01L0 0M0 15.01L13 22.52M0 15.01L-13 22.52M26 0L52 0M26 0L39 22.52M26 0L13 22.52M39 7.51L26 0M39 7.51L52 0M39 7.51L39 22.52M26 15.01L26 0M26 15.01L39 22.52M26 15.01L13 22.52M52 0L78 0M52 0L65 22.52M52 0L39 22.52M65 7.51L52 0M65 7.51L78 0M65 7.51L65 22.52M52 15.01L52 0M52 15.01L65 22.52M52 15.01L39 22.52M-39 22.52L-13 22.52M-39 22.52L-26 45.03M-39 22.52L-52 45.03M-26 30.02L-39 22.52M-26 30.02L-13 22.52M-26 30.02L-26 45.03M-39 37.53L-39 22.52M-39 37.53L-26 45.03M-39 37.53L-52 45.03M-13 22.52L13 22.52M-13 22.52L0 45.03M-13 22.52L-26 45.03M0 30.02L-13 22.52M0 30.02L13 22.52M0 30.02L0 45.03M-13 37.53L-13 22.52M-13 37.53L0 45.03M-13 37.53L-26 45.03M13 22.52L39 22.52M13 22.52L26 45.03M13 22.52L0 45.03M26 30.02L13 22.52M26 30.02L39 22.52M26 30.02L26 45.03M13 37.53L13 22.52M13 37.53L26 45.03M13 37.53L0 45.03M39 22.52L65 22.52M39 22.52L52 45.03M39 22.52L26 45.03M52 30.02L39 22.52M52 30.02L65 22.52M52 30.02L52 45.03M39 37.53L39 22.52M39 37.53L52 45.03M39 37.53L26 45.03M65 22.52L91 22.52M65 22.52L78 45.03M65 22.52L52 45.03M78 30.02L65 22.52M78 30.02L91 22.52M78 30.02L78 45.03M65 37.53L65 22.52M65 37.53L78 45.03M65 37.53L52 45.03M-52 45.03L-26 45.03M-52 45.03L-39 67.55M-52 45.03L-65 67.55M-39 52.54L-52 45.03M-39 52.54L-26 45.03M-39 52.54L-39 67.55M-52 60.04L-52 45.03M-52 60.04L-39 67.55M-52 60.04L-65 67.55M-26 45.03L0 45.03M-26 45.03L-13 67.55M-26 45.03L-39 67.55M-13 52.54L-26 45.03M-13 52.54L0 45.03M-13 52.54L-13 67.55M-26 60.04L-26 45.03M-26 60.04L-13 67.55M-26 60.04L-39 67.55M0 45.03L26 45.03M0 45.03L13 67.55M0 45.03L-13 67.55M13 52.54L0 45.03M13 52.54L26 45.03M13 52.54L13 67.55M0 60.04L0 45.03M0 60.04L13 67.55M0 60.04L-13 67.55M26 45.03L52 45.03M26 45.03L39 67.55M26 45.03L13 67.55M39 52.54L26 45.03M39 52.54L52 45.03M39 52.54L39 67.55M26 60.04L26 45.03M26 60.04L39 67.55M26 60.04L13 67.55M52 45.03L78 45.03M52 45.03L65 67.55M52 45.03L39 67.55M65 52.54L52 45.03M65 52.54L78 45.03M65 52.54L65 67.55M52 60.04L52 45.03M52 60.04L65 67.55M52 60.04L39 67.55M-39 67.55L-13 67.55M-39 67.55L-26 90.07M-39 67.55L-52 90.07M-26 75.06L-39 67.55M-26 75.06L-13 67.55M-26 75.06L-26 90.07M-39 82.56L-39 67.55M-39 82.56L-26 90.07M-39 82.56L-52 90.07M-13 67.55L13 67.55M-13 67.55L0 90.07M-13 67.55L-26 90.07M0 75.06L-13 67.55M0 75.06L13 67.55M0 75.06L0 90.07M-13 82.56L-13 67.55M-13 82.56L0 90.07M-13 82.56L-26 90.07M13 67.55L39 67.55M13 67.55L26 90.07M13 67.55L0 90.07M26 75.06L13 67.55M26 75.06L39 67.55M26 75.06L26 90.07M13 82.56L13 67.55M13 82.56L26 90.07M13 82.56L0 90.07M39 67.55L65 67.55M39 67.55L52 90.07M39 67.55L26 90.07M52 75.06L39 67.55M52 75.06L65 67.55M52 75.06L52 90.07M39 82.56L39 67.55M39 82.56L52 90.07M39 82.56L26 90.07M65 67.55L91 67.55M65 67.55L78 90.07M65 67.55L52 90.07M78 75.06L65 67.55M78 75.06L91 67.55M78 75.06L78 90.07M65 82.56L65 67.55M65 82.56L78 90.07M65 82.56L52 90.07' fill='none' stroke='%231B2E4B' stroke-opacity='0.2' stroke-width='0.7'/></svg>");
  --pat-asanoha-light:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='45.03' viewBox='0 0 26 45.03'><path d='M-52 -45.03L-26 -45.03M-52 -45.03L-39 -22.52M-52 -45.03L-65 -22.52M-39 -37.53L-52 -45.03M-39 -37.53L-26 -45.03M-39 -37.53L-39 -22.52M-52 -30.02L-52 -45.03M-52 -30.02L-39 -22.52M-52 -30.02L-65 -22.52M-26 -45.03L0 -45.03M-26 -45.03L-13 -22.52M-26 -45.03L-39 -22.52M-13 -37.53L-26 -45.03M-13 -37.53L0 -45.03M-13 -37.53L-13 -22.52M-26 -30.02L-26 -45.03M-26 -30.02L-13 -22.52M-26 -30.02L-39 -22.52M0 -45.03L26 -45.03M0 -45.03L13 -22.52M0 -45.03L-13 -22.52M13 -37.53L0 -45.03M13 -37.53L26 -45.03M13 -37.53L13 -22.52M0 -30.02L0 -45.03M0 -30.02L13 -22.52M0 -30.02L-13 -22.52M26 -45.03L52 -45.03M26 -45.03L39 -22.52M26 -45.03L13 -22.52M39 -37.53L26 -45.03M39 -37.53L52 -45.03M39 -37.53L39 -22.52M26 -30.02L26 -45.03M26 -30.02L39 -22.52M26 -30.02L13 -22.52M52 -45.03L78 -45.03M52 -45.03L65 -22.52M52 -45.03L39 -22.52M65 -37.53L52 -45.03M65 -37.53L78 -45.03M65 -37.53L65 -22.52M52 -30.02L52 -45.03M52 -30.02L65 -22.52M52 -30.02L39 -22.52M-39 -22.52L-13 -22.52M-39 -22.52L-26 0M-39 -22.52L-52 0M-26 -15.01L-39 -22.52M-26 -15.01L-13 -22.52M-26 -15.01L-26 0M-39 -7.51L-39 -22.52M-39 -7.51L-26 0M-39 -7.51L-52 0M-13 -22.52L13 -22.52M-13 -22.52L0 0M-13 -22.52L-26 0M0 -15.01L-13 -22.52M0 -15.01L13 -22.52M0 -15.01L0 0M-13 -7.51L-13 -22.52M-13 -7.51L0 0M-13 -7.51L-26 0M13 -22.52L39 -22.52M13 -22.52L26 0M13 -22.52L0 0M26 -15.01L13 -22.52M26 -15.01L39 -22.52M26 -15.01L26 0M13 -7.51L13 -22.52M13 -7.51L26 0M13 -7.51L0 0M39 -22.52L65 -22.52M39 -22.52L52 0M39 -22.52L26 0M52 -15.01L39 -22.52M52 -15.01L65 -22.52M52 -15.01L52 0M39 -7.51L39 -22.52M39 -7.51L52 0M39 -7.51L26 0M65 -22.52L91 -22.52M65 -22.52L78 0M65 -22.52L52 0M78 -15.01L65 -22.52M78 -15.01L91 -22.52M78 -15.01L78 0M65 -7.51L65 -22.52M65 -7.51L78 0M65 -7.51L52 0M-52 0L-26 0M-52 0L-39 22.52M-52 0L-65 22.52M-39 7.51L-52 0M-39 7.51L-26 0M-39 7.51L-39 22.52M-52 15.01L-52 0M-52 15.01L-39 22.52M-52 15.01L-65 22.52M-26 0L0 0M-26 0L-13 22.52M-26 0L-39 22.52M-13 7.51L-26 0M-13 7.51L0 0M-13 7.51L-13 22.52M-26 15.01L-26 0M-26 15.01L-13 22.52M-26 15.01L-39 22.52M0 0L26 0M0 0L13 22.52M0 0L-13 22.52M13 7.51L0 0M13 7.51L26 0M13 7.51L13 22.52M0 15.01L0 0M0 15.01L13 22.52M0 15.01L-13 22.52M26 0L52 0M26 0L39 22.52M26 0L13 22.52M39 7.51L26 0M39 7.51L52 0M39 7.51L39 22.52M26 15.01L26 0M26 15.01L39 22.52M26 15.01L13 22.52M52 0L78 0M52 0L65 22.52M52 0L39 22.52M65 7.51L52 0M65 7.51L78 0M65 7.51L65 22.52M52 15.01L52 0M52 15.01L65 22.52M52 15.01L39 22.52M-39 22.52L-13 22.52M-39 22.52L-26 45.03M-39 22.52L-52 45.03M-26 30.02L-39 22.52M-26 30.02L-13 22.52M-26 30.02L-26 45.03M-39 37.53L-39 22.52M-39 37.53L-26 45.03M-39 37.53L-52 45.03M-13 22.52L13 22.52M-13 22.52L0 45.03M-13 22.52L-26 45.03M0 30.02L-13 22.52M0 30.02L13 22.52M0 30.02L0 45.03M-13 37.53L-13 22.52M-13 37.53L0 45.03M-13 37.53L-26 45.03M13 22.52L39 22.52M13 22.52L26 45.03M13 22.52L0 45.03M26 30.02L13 22.52M26 30.02L39 22.52M26 30.02L26 45.03M13 37.53L13 22.52M13 37.53L26 45.03M13 37.53L0 45.03M39 22.52L65 22.52M39 22.52L52 45.03M39 22.52L26 45.03M52 30.02L39 22.52M52 30.02L65 22.52M52 30.02L52 45.03M39 37.53L39 22.52M39 37.53L52 45.03M39 37.53L26 45.03M65 22.52L91 22.52M65 22.52L78 45.03M65 22.52L52 45.03M78 30.02L65 22.52M78 30.02L91 22.52M78 30.02L78 45.03M65 37.53L65 22.52M65 37.53L78 45.03M65 37.53L52 45.03M-52 45.03L-26 45.03M-52 45.03L-39 67.55M-52 45.03L-65 67.55M-39 52.54L-52 45.03M-39 52.54L-26 45.03M-39 52.54L-39 67.55M-52 60.04L-52 45.03M-52 60.04L-39 67.55M-52 60.04L-65 67.55M-26 45.03L0 45.03M-26 45.03L-13 67.55M-26 45.03L-39 67.55M-13 52.54L-26 45.03M-13 52.54L0 45.03M-13 52.54L-13 67.55M-26 60.04L-26 45.03M-26 60.04L-13 67.55M-26 60.04L-39 67.55M0 45.03L26 45.03M0 45.03L13 67.55M0 45.03L-13 67.55M13 52.54L0 45.03M13 52.54L26 45.03M13 52.54L13 67.55M0 60.04L0 45.03M0 60.04L13 67.55M0 60.04L-13 67.55M26 45.03L52 45.03M26 45.03L39 67.55M26 45.03L13 67.55M39 52.54L26 45.03M39 52.54L52 45.03M39 52.54L39 67.55M26 60.04L26 45.03M26 60.04L39 67.55M26 60.04L13 67.55M52 45.03L78 45.03M52 45.03L65 67.55M52 45.03L39 67.55M65 52.54L52 45.03M65 52.54L78 45.03M65 52.54L65 67.55M52 60.04L52 45.03M52 60.04L65 67.55M52 60.04L39 67.55M-39 67.55L-13 67.55M-39 67.55L-26 90.07M-39 67.55L-52 90.07M-26 75.06L-39 67.55M-26 75.06L-13 67.55M-26 75.06L-26 90.07M-39 82.56L-39 67.55M-39 82.56L-26 90.07M-39 82.56L-52 90.07M-13 67.55L13 67.55M-13 67.55L0 90.07M-13 67.55L-26 90.07M0 75.06L-13 67.55M0 75.06L13 67.55M0 75.06L0 90.07M-13 82.56L-13 67.55M-13 82.56L0 90.07M-13 82.56L-26 90.07M13 67.55L39 67.55M13 67.55L26 90.07M13 67.55L0 90.07M26 75.06L13 67.55M26 75.06L39 67.55M26 75.06L26 90.07M13 82.56L13 67.55M13 82.56L26 90.07M13 82.56L0 90.07M39 67.55L65 67.55M39 67.55L52 90.07M39 67.55L26 90.07M52 75.06L39 67.55M52 75.06L65 67.55M52 75.06L52 90.07M39 82.56L39 67.55M39 82.56L52 90.07M39 82.56L26 90.07M65 67.55L91 67.55M65 67.55L78 90.07M65 67.55L52 90.07M78 75.06L65 67.55M78 75.06L91 67.55M78 75.06L78 90.07M65 82.56L65 67.55M65 82.56L78 90.07M65 82.56L52 90.07' fill='none' stroke='%23FBFAF7' stroke-opacity='0.14' stroke-width='0.7'/></svg>");
  --pat-ichimatsu-paper:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect width='6' height='6' fill='%23FBFAF7'/><rect x='6' y='6' width='6' height='6' fill='%23FBFAF7'/></svg>");
  --pat-ichimatsu-sand:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect width='6' height='6' fill='%23EDE7DA'/><rect x='6' y='6' width='6' height='6' fill='%23EDE7DA'/></svg>");
}
#fields, .advanced, .article-head, .site-foot{ position:relative; isolation:isolate; }
#fields::before, .advanced::before, .article-head::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
}
/* 支援領域：右上から左下へ消えていく（枠の外の余白にだけ見える） */
#fields::before{
  top:0; right:0; width:46%; height:78%;
  background:var(--pat-asanoha);
  -webkit-mask-image:linear-gradient(225deg, #000 8%, transparent 62%);
  mask-image:linear-gradient(225deg, #000 8%, transparent 62%);
}
/* その先の選択肢（紺）：右側に生成りの細線 */
.advanced::before{
  top:0; right:0; width:52%; height:100%;
  background:var(--pat-asanoha-light);
  -webkit-mask-image:linear-gradient(250deg, #000 10%, transparent 70%);
  mask-image:linear-gradient(250deg, #000 10%, transparent 70%);
}
/* 記事・下層ページの見出し：右端に細く */
.article-head::before{
  top:0; right:0; width:34%; height:100%;
  background:var(--pat-asanoha);
  -webkit-mask-image:linear-gradient(270deg, #000 0%, transparent 85%);
  mask-image:linear-gradient(270deg, #000 0%, transparent 85%);
}
/* 市松の縁：紺の面の上端に、上の面の色と紺を交互に並べる（6px角×2段） */
.advanced::after, .site-foot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:12px; pointer-events:none;
}
.advanced::after{ background:var(--pat-ichimatsu-paper); }
.site-foot::before{ background:var(--pat-ichimatsu-sand); }
/* スマートフォンでは柄の面積を小さく、さらに淡くする */
@media(max-width:700px){
  #fields::before{ width:70%; height:40%; opacity:.7; }
  .advanced::before{ width:80%; opacity:.8; }
  .article-head::before{ width:50%; opacity:.7; }
}