/* =========================================================
   Liberer — tokens
   ========================================================= */
:root{
  --paper:#f5f4f1;          /* 基調：ごく淡い生成り */
  --paper-tint:#eef0f1;     /* 原則7：ごく僅かに青みがかった淡色 */
  --ink:#1a1b1c;            /* 墨色 */
  --ink-body:#3a3c3e;       /* 本文 */
  --muted:#787a7c;          /* 補足・ラベル。紙色に対して 3.9:1。飾りの小文字用 */
  --muted-dark:#5c5e60;     /* 読ませる小文字用。紙色に対して 5.9:1 で AA を満たす */
  --accent:#006780;         /* 差し色（一点豪華主義） */
  --accent-lite:#4fb3c9;    /* 黒地上での差し色 */
  --watermark:.053;         /* FV背面ロゴの濃さ。logo.svg は黒で描画されるため、墨色6%に近づけた値 */
  --line:#dcdad4;           /* ヘアライン */
  --line-ink:rgba(245,244,241,.18);

  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;

  --gut:clamp(20px,5vw,64px);      /* 左右余白 */
  --sec-y:clamp(84px,11vw,164px);  /* セクション上下 */
  --max:1180px;
  --hd-h:60px;
}

/* =========================================================
   base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-body);
  font-family:var(--gothic);
  font-size:15px;
  line-height:2.05;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
strong{font-weight:700;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.ink :focus-visible{outline-color:var(--accent-lite)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 原則6：全要素を同じ格子に乗せる */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* =========================================================
   header
   ========================================================= */
.hd{
  position:sticky;top:0;z-index:40;
  background:rgba(245,244,241,.86);
  -webkit-backdrop-filter:saturate(1.1) blur(10px);
  backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--line);
}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:var(--hd-h)}
.logo{font-family:var(--mincho);font-weight:600;font-size:19px;letter-spacing:.14em;color:var(--ink)}
.nav{display:flex;align-items:center}

/* --- 開閉ボタン（900px未満） --- */
.nav-btn{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  width:34px;height:34px;margin-right:-8px;padding:0;position:relative;color:var(--ink);
}
.nav-btn span{
  position:absolute;left:7px;width:20px;height:1px;background:currentColor;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .18s linear;
}
.nav-btn span:nth-child(1){top:14px}
.nav-btn span:nth-child(2){top:20px}
.nav-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* --- メニュー本体：900px未満はオーバーレイ --- */
.nav-list{
  position:absolute;top:100%;left:0;right:0;z-index:30;
  height:calc(100vh - var(--hd-h));
  height:calc(100dvh - var(--hd-h));
  background:var(--paper);
  display:flex;flex-direction:column;
  padding:clamp(20px,5vw,36px) var(--gut) 40px;
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.nav-list[data-open="true"]{visibility:visible;opacity:1;transition:opacity .3s ease}

/* 第1階層 */
.nav-list > a,
.nav-parent{
  display:flex;align-items:center;justify-content:space-between;gap:1em;width:100%;
  font-family:var(--mincho);font-weight:600;letter-spacing:.06em;color:var(--ink);
  font-size:15px;line-height:1.6;text-align:left;
  border:0;border-top:1px solid var(--line);
  padding:clamp(16px,3.4vw,22px) 2px;
  -webkit-appearance:none;appearance:none;background:none;cursor:pointer;
}
.nav-list > a:last-child{border-bottom:1px solid var(--line)}

/* 第2階層 */
.nav-sub{display:none}
.nav-parent[aria-expanded="true"] + .nav-sub{display:block}
.nav-sub a{
  display:block;border-top:1px solid var(--line);
  padding:clamp(13px,2.8vw,17px) 2px clamp(13px,2.8vw,17px) 1.5em;
  font-family:var(--gothic);font-size:14px;letter-spacing:.08em;color:var(--muted);
}
.nav-sub a[aria-current="page"]{color:var(--ink)}

/* 階層を示すシェブロン */
.ico-chev{width:1em;height:1em;flex:none;opacity:.7;
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.nav-parent[aria-expanded="true"] .ico-chev{transform:rotate(180deg)}

@media (min-width:900px){
  .nav-btn{display:none}
  .nav-list{
    position:static;inset:auto;z-index:auto;background:none;height:auto;overflow:visible;
    flex-direction:row;align-items:center;justify-content:flex-end;
    gap:clamp(14px,2vw,28px);padding:0;
    visibility:visible;opacity:1;transition:none;
  }
  .nav-list > a,
  .nav-parent{
    display:inline-flex;gap:.5em;width:auto;
    font-family:var(--gothic);font-weight:400;
    font-size:13px;letter-spacing:.1em;line-height:1;
    color:var(--muted);border:0;padding:6px 0;white-space:nowrap;
    transition:color .2s;
  }
  .nav-list > a:hover,.nav-parent:hover{color:var(--ink)}
  .nav-list > a:last-child{border-bottom:0}
  .nav-list > a[aria-current="page"]{color:var(--ink)}
  .nav-group:has(a[aria-current="page"]) .nav-parent{color:var(--ink)}

  /* ドロップダウン本体 */
  .nav-group{position:relative}
  .nav-sub{
    position:absolute;top:calc(100% + 13px);left:-18px;min-width:168px;
    background:var(--paper);border:1px solid var(--line);padding:5px 0;z-index:50;
  }
  .nav-sub a{
    border:0;padding:11px 18px;
    font-size:13px;letter-spacing:.1em;color:var(--muted);
    transition:color .2s,background-color .2s;
  }
  .nav-sub a:hover{color:var(--ink);background:var(--paper-tint)}
  .ico-chev{width:10px;height:10px}
}

@media (prefers-reduced-motion:reduce){
  .nav-btn span,.nav-list,.ico-chev{transition:none!important}
  button.cta.is-sending .plane{animation:none;transform:none;opacity:1}
}
@media (min-width:760px){
  :root{--hd-h:74px}
}

/* =========================================================
   共通パーツ
   ========================================================= */

/* 原則4：罫線＝格子。左端にラベル、右端に補足 */
.rule{
  display:flex;align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:13px;margin-bottom:clamp(44px,6vw,76px);
  font-size:11px;letter-spacing:.1em;line-height:1.6;
}
.rule-l{color:var(--ink);white-space:nowrap}
.rule-l i{font-style:normal;color:var(--muted);letter-spacing:.18em;margin-right:.9em;font-size:10.5px}

/* 原則1：アイブロウ */
.eyebrow{
  display:flex;align-items:center;gap:.95em;
  font-size:11.5px;font-weight:500;letter-spacing:.28em;
  color:var(--accent);line-height:1;margin-bottom:clamp(20px,2.4vw,28px);
}
.eyebrow::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}

/* 原則2＋5：日本語大見出し（明朝）＋縦線アクセント */
.h2{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(24px,2.9vw,33px);line-height:1.45;letter-spacing:.01em;
  color:var(--ink);position:relative;
  padding-left:clamp(16px,1.8vw,24px);
}
.h2::before{
  content:"";position:absolute;left:0;top:.3em;bottom:.22em;
  width:2px;background:var(--ink);
}

.h2 ruby{ruby-position:over;-webkit-ruby-position:before}
.h2 rt{
  font-family:var(--gothic);font-weight:500;
  font-size:max(9.5px,.24em);letter-spacing:.14em;color:var(--accent);
  transform:translateY(.35em);
}

/* 原則6：左＝見出し／右＝本文 */
.grid{display:grid;gap:clamp(36px,4.6vw,52px)}
@media (min-width:880px){
  .grid{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    column-gap:clamp(40px,5.5vw,88px);
  }
  /* 長い右カラムの横に見出しを留め、左半分の空白を「意味のない余白」にしない */
  .col-l{align-self:start;position:sticky;top:clamp(98px,14vh,148px)}
}

/* 原則3：意味ブロック × 一文改行 */
.blk p{font-size:clamp(15px,1.4vw,17px);line-height:2.05;letter-spacing:.02em}
.blk p + p{margin-top:.34em}
.blk + .blk{margin-top:clamp(26px,3vw,38px)}

/* セクションのリズム（原則7） */
.sec{padding:var(--sec-y) 0;scroll-margin-top:64px}
.sec.tint{background:var(--paper-tint)}
.sec.ink{background:var(--ink);color:rgba(245,244,241,.76)}
.sec.ink .h2{color:var(--paper)}
.sec.ink .h2::before{background:var(--accent-lite)}
.sec.ink .eyebrow{color:var(--accent-lite)}
.sec.ink .rule{border-color:var(--line-ink)}
.sec.ink .rule-l{color:var(--paper)}
.sec.ink .rule-l i{color:rgba(245,244,241,.5)}
.sec.ink strong{color:var(--paper)}
.sec.ink .pull{border-color:var(--line-ink);color:var(--paper)}

/* =========================================================
   1. ファーストビュー
   ========================================================= */
.fv{
  padding:clamp(28px,4vw,48px) 0 clamp(40px,5vw,64px);
  min-height:calc(100vh - var(--hd-h));
  min-height:calc(100dvh - var(--hd-h));
  display:flex;align-items:center;
  position:relative;overflow:hidden;
}
.fv-in{position:relative;z-index:1}
/* メインコピー背面のロゴ（装飾）。
   背景画像として logo.svg を敷き、濃さは opacity で決める。
   CSSマスクは参照元にオリジン制限がかかり file:// で描画されないため、背景画像を使う。 */
.fv-mark{
  display:block;position:absolute;z-index:0;pointer-events:none;
  top:50%;transform:translateY(-50%);
  left:max(0px, calc((100% - var(--max)) / 2));
  width:min(1040px,100%);aspect-ratio:40 / 18;
  background:url(assets/logo.svg) no-repeat center / 100% 100%;
  opacity:var(--watermark);
}
.fv h1{
  font-family:var(--mincho);font-weight:600;color:var(--ink);
  font-size:clamp(44px,14vw,104px);
  line-height:1.3;letter-spacing:.03em;
  /* 見出しの上でテキストカーソル（Iビーム）が出ないようにする */
  cursor:default;-webkit-user-select:none;user-select:none;
}
.fv h1 ruby{ruby-position:over;-webkit-ruby-position:before}
.fv h1 rt{
  font-family:var(--gothic);font-weight:500;
  font-size:.2em;letter-spacing:.14em;color:var(--accent);
  transform:translateY(.4em);
}
.fv .sub{
  margin-top:clamp(16px,2vw,24px);
  font-size:clamp(15px,1.5vw,21px);letter-spacing:.06em;
  color:var(--ink-body);max-width:34em;
  cursor:default;-webkit-user-select:none;user-select:none;
}
@media (min-width:1150px){ .brm{display:none} }

/* =========================================================
   4. 対比表
   ========================================================= */
.cmp-wrap{margin-top:clamp(56px,7vw,92px)}
/* 表を1枚のパネルとして切り出す（角丸・影は使わない） */
.cmp-card{
  background:var(--paper);
  padding:clamp(22px,3vw,40px) clamp(20px,2.8vw,40px) clamp(12px,1.8vw,22px);
}
table.cmp{width:100%;border-collapse:collapse;text-align:left}
table.cmp th,table.cmp td{padding:0;font-weight:400;vertical-align:top}

/* — モバイル：行をブロックに畳む（縦罫線なし） — */
table.cmp,table.cmp thead,table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block}
table.cmp thead{display:none}
table.cmp tr{border-top:1px solid var(--line);padding:22px 0}
table.cmp th[scope=row]{
  font-size:13px;letter-spacing:.18em;color:var(--muted);margin-bottom:12px;
}
table.cmp td{font-size:15px;line-height:1.95;color:var(--muted)}
table.cmp td + td{margin-top:10px}
table.cmp td::before{
  content:attr(data-l);display:block;
  font-size:10.5px;letter-spacing:.18em;color:var(--muted);opacity:.75;margin-bottom:2px;
}
table.cmp td.mine{color:var(--ink)}
table.cmp td.mine::before{color:var(--accent);opacity:1}

@media (min-width:880px){
  table.cmp{display:table}
  table.cmp thead{display:table-header-group}
  table.cmp tbody{display:table-row-group}
  table.cmp tr{display:table-row;padding:0;border:0}
  table.cmp th,table.cmp td{display:table-cell;padding:24px 0;border-top:1px solid var(--line)}
  table.cmp thead th{
    padding:0 0 14px;border-top:0;
    font-size:13px;letter-spacing:.1em;line-height:1.7;color:var(--muted);
  }
  table.cmp thead th.mine{color:var(--accent);font-weight:500}
  table.cmp th[scope=row]{width:13%;margin:0;font-size:13px;letter-spacing:.18em;color:var(--muted);padding-right:24px}
  table.cmp td{width:44%;font-size:15px;padding-right:clamp(28px,4vw,56px)}
  table.cmp td:last-child{padding-right:0}
  table.cmp td + td{margin:0}
  table.cmp td::before{display:none}
}

/* =========================================================
   5. STEP ／ 6. 強み ／ 7. 領域
   ========================================================= */
.item.first{border-top:0;padding-top:0;margin-top:0}
.item{border-top:1px solid var(--line);padding-top:clamp(22px,2.6vw,28px);margin-top:clamp(38px,4.4vw,54px)}
.item-n{font-size:11px;letter-spacing:.24em;color:var(--muted);line-height:1;margin-bottom:14px}
.item-t{
  font-family:var(--mincho);font-weight:600;color:var(--ink);
  font-size:clamp(19px,2.1vw,25px);line-height:1.5;letter-spacing:.02em;
  margin-bottom:clamp(16px,1.8vw,22px);
}

/* 3. の締めコピー（一点の熱） */
.pull{
  border-top:1px solid var(--line);
  margin-top:clamp(32px,3.8vw,44px);padding-top:clamp(24px,2.8vw,32px);
  font-family:var(--mincho);font-weight:600;color:var(--ink);
  font-size:clamp(18px,2vw,24px);line-height:1.85;letter-spacing:.02em;
}

/* 7. 領域リスト */
.fields li{
  border-top:1px solid var(--line);padding:clamp(18px,2.2vw,24px) 0;
  font-family:var(--mincho);font-weight:500;color:var(--ink);
  font-size:clamp(16px,1.7vw,20px);line-height:1.7;letter-spacing:.02em;
}
.fields li:last-child{border-bottom:1px solid var(--line)}

/* =========================================================
   8. お問い合わせ（黒地・唯一）
   ========================================================= */
.cta{
  display:inline-flex;align-items:center;gap:1em;
  margin-top:clamp(34px,4vw,46px);
  padding:19px clamp(28px,3.6vw,44px);
  background:var(--accent);color:var(--paper);
  font-size:14.5px;font-weight:500;letter-spacing:.12em;
  transition:background .22s ease;
}
.cta:hover{background:#00819f}
.cta span{font-size:1.1em;line-height:1;transform:translateY(-1px)}
.ft{background:var(--ink);color:rgba(245,244,241,.5)}
.ft-in{
  border-top:1px solid var(--line-ink);
  padding:30px 0 40px;
  width:100%;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.1em;
}
.ft-logo{font-family:var(--mincho);font-weight:600;font-size:16px;letter-spacing:.14em;color:rgba(245,244,241,.85)}
.ft-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(16px,2.4vw,32px)}
.ft-meta a{
  color:rgba(245,244,241,.72);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.4em;text-decoration-color:rgba(245,244,241,.28);
  transition:color .2s,text-decoration-color .2s;
}
.ft-meta a:hover{color:var(--paper);text-decoration-color:rgba(245,244,241,.6)}

/* =========================================================
   モーション：ごく控えめな一種類のみ
   ========================================================= */
.js .rv{opacity:0;transform:translateY(10px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* =========================================================
   下層ページ（会社概要）
   ========================================================= */
.page-head{padding:clamp(52px,8vw,96px) 0 clamp(36px,4vw,56px)}
/* ページ見出し直後のセクションは、上余白を詰めて間延びを防ぐ */
.page-head + .sec{padding-top:clamp(20px,2.6vw,36px)}
.nav a[aria-current="page"]{color:var(--ink)}

/* お問い合わせフォーム：面を持たせず、下線だけで受ける */
.form{max-width:720px}
.form-req{
  margin:0 0 clamp(26px,3vw,36px);
  font-size:12.5px;letter-spacing:.06em;color:var(--muted);
}
.form-req .req{margin:0 .35em 0 0}
.field{margin-top:clamp(30px,3.6vw,44px)}
.form > .field:first-of-type{margin-top:0}
.field-label{
  display:block;margin:0 0 2px;
  font-size:13px;letter-spacing:.08em;line-height:1.9;color:var(--ink);
}
.req{color:var(--accent);margin-left:.45em}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea{
  display:block;width:100%;margin:0;
  font-family:var(--gothic);font-size:16px;line-height:1.9;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:10px 2px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s,box-shadow .2s;
}
.form textarea{resize:vertical;min-height:4.2em}
.form input:hover,.form textarea:hover{border-bottom-color:#bdbab3}
/* 下線そのものをフォーカス表示にするので、既定の枠線は出さない */
.form input:focus,.form textarea:focus{
  outline:none;border-bottom-color:var(--accent);
  box-shadow:0 1px 0 0 var(--accent);
}

/* ハニーポット：display:none ではなく画面外に置く */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{
  margin-top:clamp(34px,4vw,48px);
  font-size:12.5px;line-height:1.9;letter-spacing:.04em;color:var(--muted);
}
.form-note a{
  color:var(--muted);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.35em;text-decoration-color:var(--line);
  transition:color .2s,text-decoration-color .2s;
}
.form-note a:hover{color:var(--ink);text-decoration-color:#bdbab3}
.form-foot{margin-top:clamp(20px,2.4vw,28px)}
button.cta{
  border:0;cursor:pointer;font-family:var(--gothic);
  -webkit-appearance:none;appearance:none;
}
button.cta[disabled]{opacity:.7;cursor:default}
button.cta[disabled]:hover{background:var(--accent)}
/* 送信中：文字を伏せ、紙飛行機だけを飛ばす。
   ラベルは visibility で残してボタン幅を保つ（読み上げ名は aria-label で補う） */
button.cta{position:relative}
button.cta .plane{display:none;width:15px;height:15px;flex:none}
button.cta.is-sending .cta-label{visibility:hidden}
button.cta.is-sending .plane{
  display:block;position:absolute;left:0;right:0;top:50%;
  margin:0 auto;margin-top:-7.5px;
  animation:fly 1.15s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes fly{
  0%   {transform:translate(-5px,3px);opacity:0}
  22%  {opacity:1}
  68%  {opacity:1}
  100% {transform:translate(11px,-7px);opacity:0}
}

/* 送信エラー */
.form-error{
  margin-top:clamp(20px,2.4vw,28px);max-width:38em;
  border-left:2px solid var(--accent);padding-left:14px;
  font-size:13.5px;line-height:1.95;letter-spacing:.02em;color:var(--ink);
}
.form-error a{
  color:var(--accent);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.3em;text-decoration-color:rgba(0,103,128,.35);
}
.form-error a:hover{text-decoration-color:var(--accent)}

/* 送信完了 */
.done{max-width:720px}
.done-back{margin-top:clamp(30px,3.6vw,44px)}
.done .h2{margin-bottom:clamp(20px,2.4vw,28px)}
.done .h2:focus{outline:none}
.done .h2:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
/* 規約・ポリシー等の文書ページ */
.doc-lead{
  max-width:56em;font-size:clamp(15px,1.4vw,17px);line-height:2.05;letter-spacing:.02em;
}
.doc-row{
  display:grid;gap:clamp(12px,1.8vw,18px);
  border-top:1px solid var(--line);
  margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(22px,2.6vw,30px);
}
.doc-row h2{
  margin:0;font-family:var(--mincho);font-weight:600;color:var(--ink);
  font-size:clamp(17px,1.7vw,21px);line-height:1.6;letter-spacing:.02em;
}
.doc-row p{font-size:clamp(15px,1.4vw,17px);line-height:2.05;letter-spacing:.02em}
.doc-row p + p{margin-top:1.1em}
.doc-ol{margin:1.1em 0;padding:0;list-style:none;counter-reset:doc}
.doc-ol li{
  counter-increment:doc;position:relative;padding-left:2.1em;
  font-size:clamp(15px,1.4vw,17px);line-height:2.05;letter-spacing:.02em;
}
.doc-ol li::before{
  content:counter(doc)".";position:absolute;left:0;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.doc-contact{margin-top:1.4em}
.doc-contact p + p{margin-top:0}
.doc-cta{margin-top:1.6em}
.doc-cta a,.done-back a{
  color:var(--accent);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.35em;text-decoration-color:rgba(0,103,128,.35);
  transition:text-decoration-color .2s;
}
.doc-cta a:hover,.done-back a:hover{text-decoration-color:var(--accent)}
@media (min-width:880px){
  .doc-row{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,5.5vw,88px);gap:0}
}

/* 定義リスト：横ヘアラインのみ（縦罫線なし）／格子に乗せる */
.profile{margin:0}
.profile-row{border-top:1px solid var(--line);padding:clamp(20px,2.6vw,28px) 0;display:grid;gap:8px}
.profile-row:last-child{border-bottom:1px solid var(--line)}
.profile dt{font-size:13px;letter-spacing:.18em;color:var(--muted);line-height:1.6;margin:0}
.profile dd{margin:0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.95;color:var(--ink);letter-spacing:.02em}
@media (min-width:760px){
  .profile-row{grid-template-columns:minmax(0,160px) minmax(0,1fr);column-gap:clamp(28px,4vw,56px);align-items:baseline;gap:0}
  .profile dt{padding-top:.35em}
}

/* =========================================================
   下層ページ（代表挨拶）
   ========================================================= */
/* 本文を左、プロフィールを右に置く。本文の左端は上の見出し（.page-head の h1）と
   揃えて、ページの基準線を1本にする。
   カードの幅と段間はビューポートに追従させ、本文:カード を 6:4〜7:3 に保つ
   （880px で 64:36、1024px で 69:31、1280px 以上で 70:30）。
   上限を 300px / 56px で止めるのは、--gut が 5vw で伸びるのに内容幅が
   max-width:1180px で止まるため。上限が緩いと画面を広げるほど本文が細くなる。
   .grid の既定比 5fr/6fr と段間 88px では本文が主役にならないので上書きする。 */
.grid-flip{--fig-w:clamp(272px,25.5vw,300px)}
@media (min-width:880px){
  .grid-flip{
    grid-template-columns:minmax(0,1fr) var(--fig-w);
    column-gap:clamp(36px,4.6vw,56px);
  }
  /* DOMは本文が先。カードを右カラムへ回す。
     スクロール追従（position:sticky）はしない。カードの高さが約740pxあり、
     追従させると「一緒に動く→止まる→また動く」の切り替わりが目に付くうえ、
     固定中は略歴の下端が画面の外に残って読めなくなる。 */
  .grid-flip > .col-fig{
    grid-area:1 / 2;
    align-self:start;
    /* 箱の上端ではなく、写真の上端を左カラム1行目の文字の高さに合わせる。
       1行目は .lead p（line-height 1.8）なので、文字の上に (1.8-1)/2 =
       0.4文字分の行間が乗っている。その分だけカードを下げる。 */
    margin-top:calc(clamp(19px,2.2vw,26px) * .4);
  }
  .grid-flip > .col-body{grid-area:1 / 1}
}

/* 冒頭のメインメッセージ。本文（最大17px）より大きく h1（最大33px）より小さい
   明朝にして、見出しと張り合わせずに、ページ内で強い文字をここ1か所に集める
   （一点豪華主義）。下の罫線で本文と切り、格子に乗せる。 */
.lead{
  border-bottom:1px solid var(--line);
  padding-bottom:clamp(24px,2.8vw,32px);
  margin-bottom:clamp(30px,3.6vw,42px);
}
.lead p{
  font-family:var(--mincho);font-weight:600;color:var(--ink);
  font-size:clamp(19px,2.2vw,26px);line-height:1.8;letter-spacing:.02em;
}
.lead p + p{margin-top:.15em}

/* ここから .message-body 配下は代表挨拶ページ専用。
   .message-body はこのページの本文カラムにしか付けない目印クラスで、
   グローバルの .blk / .blk p は一切触らない（他ページの余白・書体は現状のまま）。 */

/* 日本語の折り返しを文節単位にする。既定の word-break は文字単位で折るので
   「向き合いな／がら、」のように語の途中で切れたり、末尾一文字だけが次行へ
   こぼれる（泣き別れ）。auto-phrase は非対応ブラウザでは無視され、従来の
   折り返しに戻るだけなので、フォールバックの記述は不要。
   Chrome/Edge 119+ 対応、Safari は未対応（2026-09 時点）。 */
.message-body .blk p{word-break:auto-phrase}

/* 行間のメリハリ。塊の中はぎゅっと近接させ、塊と塊のあいだはゆったり離す。
   グローバル側と同じプロパティ（margin-top）を上書きする。margin-bottom を
   足す書き方にすると、隣接する margin-top と相殺（マージン潰れ）して
   大きいほうだけが効き、意図した詰め／広げにならない。 */
.message-body .blk p + p{margin-top:.15em}                    /* 既定 .34em より詰める。0 だと塊が固まりすぎる */
.message-body .blk + .blk{margin-top:clamp(35px,3.9vw,49px)}  /* 既定 clamp(26px,3vw,38px) より広げる */

/* プロフィールカード。写真・罫線・氏名・略歴の間隔を --pc-gap 一つで揃え、
   要素ごとに違う余白が付かないようにする（1カラムに畳んだときも同じ）。 */
.pcard{
  --pc-gap:15px;
  max-width:min(100%,var(--fig-w,320px));   /* 畳んだ幅では写真を広げすぎない */
}
.portrait img{display:block;width:100%;height:auto}   /* 角は落とさず直角のまま */

/* 原則4：罫線＝格子。写真の下端で受けて、氏名を載せる */
.pcard-id,.bio{
  border-top:1px solid var(--line);
  margin-top:var(--pc-gap);padding-top:var(--pc-gap);
}
/* 氏名の上の役職と下のローマ字は、飾りではなく読ませる文字なので
   --muted ではなく --muted-dark を使う（--muted は 3.9:1 で AA に届かない） */
.portrait-role{display:block;font-size:14px;letter-spacing:.24em;color:var(--muted-dark);line-height:1}
.portrait-name{
  display:block;margin-top:calc(var(--pc-gap) - 3px);
  font-family:var(--mincho);font-weight:600;color:var(--ink);
  font-size:clamp(18px,1.9vw,21px);line-height:1.5;
  /* 姓名の間は半角スペース1つ。全角だと間延びするので、字間で釣り合いを取る */
  letter-spacing:.06em;
}
.portrait-en{
  display:block;margin-top:calc(var(--pc-gap) - 8px);
  font-size:14px;letter-spacing:.18em;color:var(--muted-dark);line-height:1.6;
}

/* 略歴。装飾ラベルではなく読ませる文章として組む。一文ずつ改行（原則3）。 */
.bio p{font-size:14px;line-height:1.9;letter-spacing:.02em;color:var(--ink-body)}
.bio p + p{margin-top:.3em}
/* 数字ひとつだけ前へ出す。太字にはせず、濃さで差をつける */
.bio strong{font-weight:500;color:var(--ink)}