/* ENモビリティワークス株式会社
   2026-10-29 再デザイン：ロゴ「F」の2色（濃紺 #1D2443 ＋ミッドブルー #4C639F）を主役にした体系。
   モチーフは「噛み合う2つのアーチ」＝あいだに立つ。
   - .seam … 濃紺の線とミッドブルーの線が上下にずれて重なる「継ぎ目」。ヘッダー下・章見出し・表の天罫に使う
   - 位置づけの図 … 外部側の結線を濃紺、グループ側の結線をミッドブルーにし、2色が出会う位置に EN を置く */

:root{
  color-scheme: light;

  /* ロゴの2色（主役） */
  --en-a:#1D2443;           /* 濃紺：ロゴの上向きアーチ。本文・見出し・太罫 */
  --en-b:#4C639F;           /* ミッドブルー：ロゴの下向きアーチ。アクセント・リンク（白地 5.85:1） */

  /* 補助（同系の淡色・中間色。親サイトのトークンと同値） */
  --navy-700:#333D63;       /* 本文の地の文（白地 10.56:1） */
  --navy-300:#A3BBDF;       /* 反転面の補助文字（濃紺地 7.74:1） */
  --navy-200:#C7D5EC;       /* 装飾の細罫（UI部品の枠には使わない） */
  --navy-100:#E7ECF5;
  --navy-050:#F4F7FC;
  --slate-600:#4A5878;      /* 補助テキスト（白地 7.10:1／#F4F7FC 地 6.61:1） */
  --border-ui:#8590AC;      /* UI部品の枠（白地 3.19:1） */
  --bg:#FFFFFF;

  --rule-fine:var(--navy-200);
  --rule:var(--navy-300);

  --grid-min: rgba(29,36,67,.07);
  --grid-maj: rgba(29,36,67,.13);

  --pad: clamp(20px, 4.4vw, 68px);
  --max: 1240px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--bg); color:var(--en-a);
  font-family:"Inter","Noto Sans JP",system-ui,sans-serif;
  font-weight:400; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img, svg{ display:block; max-width:100% }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--en-b); outline-offset:3px }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--pad) }
.nw{ white-space:nowrap }            /* 英字の句の途中で折り返さない */
.lede, .intro, .pos-note{ text-wrap:pretty }

.skip{
  position:absolute; left:8px; top:-60px; z-index:100;
  background:var(--en-a); color:#fff; padding:11px 14px; font-size:13px; text-decoration:none;
}
.skip:focus{ top:8px }

/* ── 継ぎ目（2色の線が上下にずれて重なる） ─────────────────
   濃紺は左から 62%、ミッドブルーは右から 62%。中央の 24% が「あいだ」。 */
.seam, header::after, .chap .ln{
  background:
    linear-gradient(var(--en-a),var(--en-a)) left top    / 62% var(--seam-w,2px) no-repeat,
    linear-gradient(var(--en-b),var(--en-b)) right bottom / 62% var(--seam-w,2px) no-repeat;
}

/* ラベル */
.lab{
  display:flex; align-items:center; gap:12px;
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--slate-600); font-variant-numeric:tabular-nums;
}
.lab i{ display:block; flex:none; width:34px; height:1px; background:var(--en-b) }

/* ══ お知らせの帯 ═══════════════════════════════════════ */
.draft{
  background:var(--navy-050); border-bottom:1px dashed var(--en-b);
  font-family:"Noto Sans JP",sans-serif; font-size:12px; line-height:1.7; color:var(--en-a);
}
.draft .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding-block:8px }
.draft b{
  flex:none; border:1px solid var(--en-a); padding:0 8px;
  font-weight:700; letter-spacing:.14em;
}

/* ══ ヘッダー ═══════════════════════════════════════════ */
header{ position:sticky; top:0; z-index:50; background:var(--bg) }
header::after{ content:""; display:block; height:5px; --seam-w:2px }
.hd{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); height:58px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; min-width:0; min-height:44px }
.brand svg{ height:24px; width:auto; flex:none }   /* シンボルの縦横比 71:80 は viewBox のまま */
.brand span{
  font-family:"Noto Sans JP",sans-serif; font-weight:500; font-size:14px;
  letter-spacing:.06em; color:var(--en-a); white-space:nowrap;
}
.hd nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,28px); margin-left:auto }
.hd nav a{
  font-family:"Noto Sans JP",sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.08em;
  color:var(--slate-600); text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; min-height:44px;
  border-bottom:2px solid transparent;
}
.hd nav a:hover{ color:var(--en-a); border-bottom-color:var(--en-b) }
.hd nav a.grp{
  display:flex; align-items:center; gap:6px;
  font-family:"Inter",sans-serif; font-size:10px; font-weight:600; letter-spacing:.2em;
  border-left:1px solid var(--rule-fine); padding-left:clamp(12px,2vw,24px);
}
.ext{ width:9px; height:9px; flex:none }
@media (max-width:900px){ .hd nav a.sec{ display:none } }
@media (max-width:560px){
  .hd nav a.grp{ display:none }
  .brand .co{ display:none }
}

/* ══ ヒーロー（方眼・図面枠・表題欄） ═══════════════════════ */
#hero{ padding-block:clamp(22px,4vh,44px) clamp(40px,7vh,80px) }
.sheet{
  position:relative;
  border:1px solid rgba(76,99,159,.34);
  background-image:
    linear-gradient(to right,  var(--grid-min) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-min) 1px, transparent 1px),
    linear-gradient(to right,  var(--grid-maj) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-maj) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px, 160px 160px, 160px 160px;
  padding:clamp(28px,6vw,80px) clamp(18px,5vw,72px) 0;
}
.reg{ position:absolute; width:15px; height:15px; color:var(--en-b) }
.reg.tl{ top:-8px; left:-8px }   .reg.tr{ top:-8px; right:-8px }
.reg.bl{ bottom:-8px; left:-8px } .reg.br{ bottom:-8px; right:-8px }

.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.hero-txt{ min-width:0 }

.h1{ margin:clamp(22px,4vh,40px) 0 0 }
.h1 img{ width:min(100%, 400px); height:auto }

.catch{
  margin:clamp(30px,5vh,52px) 0 0;
  font-family:"Noto Sans JP",sans-serif; font-weight:700;
  font-size:clamp(25px,4.2vw,56px); line-height:1.45; letter-spacing:.04em;
  color:var(--en-a); word-break:keep-all; overflow-wrap:anywhere;
}
.catch .ln{ display:block }
.catch .ln.b{ color:var(--en-b); padding-left:1em }       /* 2行目をミッドブルーで半歩ずらす＝ロゴの2つのアーチのずれ */
.sub{
  display:flex; align-items:center; gap:clamp(12px,1.6vw,20px);
  margin:clamp(14px,2.4vh,24px) 0 0;
  font-family:"Syncopate",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(10px,1.1vw,14px); letter-spacing:.3em; line-height:1.7; color:var(--en-b);
}
.sub i{ flex:none; width:clamp(26px,4vw,56px); height:5px; --seam-w:1px;
  background:
    linear-gradient(var(--en-a),var(--en-a)) left top / 62% 1px no-repeat,
    linear-gradient(var(--en-b),var(--en-b)) right bottom / 62% 1px no-repeat }

.lede{
  margin:clamp(20px,3.4vh,34px) 0 0; max-width:34em;
  font-family:"Noto Sans JP",sans-serif; font-weight:400;
  font-size:clamp(14.5px,1.25vw,17px); line-height:2.05; color:var(--navy-700);
}

/* 図版（PLATE）：ロゴのシンボルを作図線つきで拡大。ロゴの形・色はそのまま */
.plate{ margin:0; min-width:0; justify-self:center; width:100%; max-width:380px }
.plate svg{ width:100%; height:auto; overflow:visible }
.plate .cons{ fill:none; stroke:var(--en-b); stroke-width:1; stroke-dasharray:3 5; opacity:.55 }
.plate .zone{ fill:var(--navy-050); stroke:var(--en-b); stroke-width:1 }
.plate .dim{ fill:var(--en-b); stroke:var(--en-b); stroke-width:1 }
.plate text{ font-family:"Syncopate",sans-serif; font-weight:700; font-size:10px; letter-spacing:.3em; fill:var(--en-a) }
.plate figcaption{
  margin-top:10px; text-align:center;
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--slate-600);
}
@media (max-width:1000px){
}
@media (max-width:720px){
  .hero-grid{ grid-template-columns:minmax(0,1fr) }
  .plate{ display:none }               /* 小さい画面では図版を省き、本文を先に読ませる */
}

/* 表題欄（TITLE BLOCK） */
.tbk{
  margin:clamp(34px,6vh,60px) calc(-1 * clamp(18px,5vw,72px)) 0;
  background:var(--bg); position:relative;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.tbk::before{                                /* 天罫を継ぎ目に */
  content:""; position:absolute; left:0; right:0; top:-6px; height:5px;
  background:
    linear-gradient(var(--en-a),var(--en-a)) left top / 62% 2px no-repeat,
    linear-gradient(var(--en-b),var(--en-b)) right bottom / 62% 2px no-repeat;
}
.tbk div{ padding:12px 14px; border-left:1px solid var(--rule); min-width:0 }
.tbk div:first-child{ border-left:0 }
.tbk b{
  display:block; margin-bottom:6px;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-600);
}
.tbk span{
  display:block; font-family:"Noto Sans JP",sans-serif; font-weight:500;
  font-size:clamp(11.5px,.95vw,13px); line-height:1.6; color:var(--en-a);
}
@media (max-width:1000px){
  .tbk{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .tbk div{ border-top:1px solid var(--rule-fine) }
  .tbk div:first-child{ grid-column:1 / -1; border-top:0 }
  .tbk div:nth-child(2n){ border-left:0 }
  .tbk div:last-child:nth-child(even){ grid-column:1 / -1 }
}

/* ══ 章（01 / 02 / 03 / 04） ═════════════════════════════ */
.blk{ padding-block:clamp(48px,9vh,104px) }
.blk:nth-of-type(even){ background:var(--navy-050) }       /* 白と淡いネイビーの面を交互に */
.chap{ display:flex; align-items:center; gap:14px }
.chap .no{
  font-family:"Syncopate",sans-serif; font-weight:700; font-size:13px; letter-spacing:.06em;
  color:var(--en-b); font-variant-numeric:tabular-nums; flex:none;
}
.chap .ln{ flex:1 1 auto; height:5px }
.chap .nm{
  flex:none; font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--slate-600);
}
h2{
  margin:clamp(18px,3vh,28px) 0 0;
  font-family:"Noto Sans JP",sans-serif; font-weight:700;
  font-size:clamp(22px,2.6vw,34px); line-height:1.5; letter-spacing:.04em; color:var(--en-a);
}
.intro{
  margin:clamp(14px,2.4vh,22px) 0 0; max-width:38em;
  font-family:"Noto Sans JP",sans-serif; font-size:clamp(14.5px,1.15vw,16px); line-height:2.05; color:var(--navy-700);
}

/* ══ 01 事業内容 ════════════════════════════════════════ */
.roles{
  list-style:none; margin:clamp(28px,5vh,48px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  background:var(--rule-fine);
  border-bottom:1px solid var(--rule);
}
.roles li{ position:relative; background:var(--bg); padding:clamp(22px,3vh,32px) clamp(16px,1.8vw,24px) clamp(24px,3.4vh,34px);
           display:flex; flex-direction:column; gap:12px; min-width:0 }
.roles li::before{                           /* 各項目の天罫：濃紺とミッドブルーを交互に */
  content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--en-a);
}
.roles li:nth-child(even)::before{ background:var(--en-b) }
.roles .top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.roles .n{
  font-family:"Syncopate",sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em;
  color:var(--en-b); font-variant-numeric:tabular-nums;
}
.ic{ width:30px; height:30px; flex:none; fill:none; stroke:var(--en-a); stroke-width:1.5;
     stroke-linecap:round; stroke-linejoin:round; overflow:visible }
.roles h3{
  margin:6px 0 0; font-family:"Noto Sans JP",sans-serif; font-weight:700;
  font-size:clamp(15.5px,1.25vw,18px); line-height:1.6; color:var(--en-a);
}
.roles p{ margin:0; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:1.95; color:var(--slate-600) }
@media (max-width:1000px){ .roles{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:600px){ .roles{ grid-template-columns:minmax(0,1fr) } }

/* 予定の印 */
.tbc{
  display:inline-block; vertical-align:2px; margin-left:8px;
  border:1px solid var(--en-b); color:var(--en-b);
  font-size:10.5px; font-weight:500; line-height:1.6; letter-spacing:.14em; padding:0 6px;
}

/* ══ 02 位置づけ：外部 → EN ← グループ各社 ══════════════════
   外部側の結線は濃紺、グループ側の結線はミッドブルー。2色が EN で出会う。 */
.pos{
  margin:clamp(30px,5vh,52px) 0 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1.15fr) 72px minmax(0,1fr);
  grid-template-rows:auto 1fr 1fr;
  column-gap:0;
}
.pos .lab{ margin-bottom:12px; align-self:end }
.l-out{ grid-column:1; grid-row:1 }
.l-en { grid-column:3; grid-row:1 }
.l-grp{ grid-column:5; grid-row:1 }
.n-lease{ grid-column:1; grid-row:2; margin-bottom:6px }
.n-auc  { grid-column:1; grid-row:3; margin-top:6px }
.c-in { grid-column:2; grid-row:2 / 4 }
.core { grid-column:3; grid-row:2 / 4; align-self:center }
.c-out{ grid-column:4; grid-row:2 / 4 }
.n-grp{ grid-column:5; grid-row:2 / 4; align-self:center }

.node{
  position:relative; border:1px solid var(--en-a); background:var(--bg);
  padding:16px 18px; font-family:"Noto Sans JP",sans-serif; min-width:0;
}
.node strong{ display:block; font-weight:700; font-size:15.5px; line-height:1.6; color:var(--en-a) }
.node small{ display:block; font-size:12.5px; line-height:1.8; color:var(--slate-600); margin-top:2px }
.node a{ color:var(--en-b); text-underline-offset:3px }
.node a:hover{ color:var(--en-a) }
.n-lease, .n-auc{ border-right-width:3px }                  /* 結線が入る辺を太く（濃紺） */
.n-grp{ border-color:var(--en-b); border-left-width:3px }   /* グループ側はミッドブルー */
.node.core{
  border:0; background:var(--bg); outline:1px solid var(--en-a);
  padding:22px 22px 24px; display:flex; align-items:center; gap:16px;
}
.node.core::after{                                          /* 下辺に濃紺｜ミッドブルーの2トーンの帯（外部側｜グループ側） */
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:
    linear-gradient(var(--en-a),var(--en-a)) left / 50% 100% no-repeat,
    linear-gradient(var(--en-b),var(--en-b)) right / 50% 100% no-repeat;
}
.node.core svg{ height:44px; width:auto; flex:none }

.conn{ position:relative; min-height:40px }
.conn .h{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.conn path{ fill:none; stroke-width:2 }
.c-in  path{ stroke:var(--en-a) }
.c-out path{ stroke:var(--en-b) }
.conn .v{ display:none }
.pos-note{ margin:18px 0 0; font-family:"Noto Sans JP",sans-serif; font-size:12.5px; line-height:1.8; color:var(--slate-600) }

@media (max-width:820px){
  .pos{ grid-template-columns:minmax(0,1fr); grid-template-rows:none }
  .pos > *{ grid-column:1 !important; grid-row:auto !important }
  .pos .lab{ margin:0 0 10px }
  .l-en, .l-grp{ margin-top:0 }
  .n-lease{ margin-bottom:10px }
  .n-auc{ margin-top:0 }
  .n-lease, .n-auc{ border-right-width:1px; border-bottom-width:3px }
  .n-grp{ border-left-width:1px; border-top-width:3px }
  .conn{ min-height:0; height:44px; display:flex; justify-content:center }
  .conn .h{ display:none }
  .conn .v{ display:block; width:2px; height:100% }
  .c-in  .v{ background:var(--en-a) }
  .c-out .v{ background:var(--en-b) }
  .c-out{ margin-bottom:14px }
}

/* ══ 03 会社概要 ═══════════════════════════════════════ */
.co{
  width:100%; margin:clamp(28px,5vh,46px) 0 0; border-collapse:collapse;
  border-top:2px solid var(--en-a); background:var(--bg);
  font-family:"Noto Sans JP",sans-serif;
}
.co th, .co td{ text-align:left; vertical-align:top; border-bottom:1px solid var(--rule); padding:18px 20px }
.co th{
  width:11em; background:var(--navy-050); border-right:2px solid var(--en-b);
  font-weight:500; font-size:13px; letter-spacing:.08em; color:var(--slate-600);
}
.co td{ font-size:15px; line-height:1.9; color:var(--en-a); font-variant-numeric:tabular-nums }
.co td small{ font-size:12.5px; color:var(--slate-600); margin-right:.6em }
.co td .alias{ display:inline-block; margin-left:.6em; font-size:13px; color:var(--slate-600) }
.co td a{ color:var(--en-b); text-underline-offset:3px }
.co td a:hover{ color:var(--en-a) }
.co ul{ margin:0; padding:0; list-style:none }
.co li{ position:relative; padding-left:1.1em }
.co li::before{ content:""; position:absolute; left:0; top:.95em; width:.5em; height:2px; background:var(--en-b) }
@media (max-width:640px){
  .co, .co tbody, .co tr, .co th, .co td{ display:block; width:100% }
  .co th{ border-bottom:0; border-right:0; padding:12px 14px 4px; background:var(--bg) }
  .co th::before{ content:""; display:inline-block; width:10px; height:2px; background:var(--en-b); vertical-align:middle; margin-right:8px }
  .co td{ padding:4px 14px 16px }
}

/* ══ 04 お問い合わせ（反転面：ロゴの濃紺） ═════════════════ */
#contact{ position:relative; background:var(--en-a); color:#fff; overflow:hidden }
#contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to right,  rgba(255,255,255,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.11) 1px, transparent 1px);
  background-size:32px 32px,32px 32px,160px 160px,160px 160px;
}
#contact::after{                                  /* 上辺に継ぎ目（ミッドブルー側が太い） */
  content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--en-b);
}
#contact .arches{                                  /* 噛み合う2本のアーチ（線画のモチーフ。ロゴそのものではない） */
  position:absolute; right:var(--pad); bottom:-28px;     /* 下辺から立ち上がる位置。見出し行とは重ねない */
  width:clamp(150px,18vw,240px); height:auto; pointer-events:none;
}
#contact .arches path{ fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke }
#contact .arches .a{ stroke:rgba(255,255,255,.32) }
#contact .arches .b{ stroke:var(--navy-300); opacity:.55 }
@media (max-width:820px){ #contact .arches{ display:none } }
#contact .wrap{ position:relative; padding-block:clamp(56px,10vh,112px) }
#contact .chap .no{ color:var(--navy-300) }
#contact .chap .ln{
  background:
    linear-gradient(#fff,#fff) left top / 62% 2px no-repeat,
    linear-gradient(var(--navy-300),var(--navy-300)) right bottom / 62% 2px no-repeat;
}
#contact .chap .nm{ color:var(--navy-300) }
#contact h2{ color:#fff }
#contact .intro{ color:var(--navy-200); max-width:34em }
.btn{
  display:inline-flex; align-items:center; gap:16px; margin-top:clamp(26px,4vh,38px);
  padding:16px 26px; min-height:44px; border:2px solid rgba(255,255,255,.8); color:#fff; text-decoration:none;
  font-family:"Noto Sans JP",sans-serif; font-size:14px; font-weight:500; letter-spacing:.08em;
  max-width:100%;
}
.btn svg{ width:26px; height:8px; flex:none }
.btn:hover{ background:#fff; color:var(--en-a); border-color:#fff }
.btn:focus-visible{ outline-color:#fff }

/* ══ フッター ═══════════════════════════════════════════ */
footer{ padding-block:clamp(36px,6vh,64px) }
.f-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px }
.f-top img{ height:56px; width:auto }      /* 351.6:80 の縦横比は width:auto で保つ */
.f-links{ display:flex; flex-wrap:wrap; gap:0 24px; font-family:"Noto Sans JP",sans-serif; font-size:13px }
.f-links a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; color:var(--navy-700); text-underline-offset:3px }
.f-links a:hover{ color:var(--en-a) }
.f-block{
  margin-top:clamp(24px,4vh,38px); border:1px solid var(--rule); position:relative;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
}
.f-block::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-6px; height:5px;
  background:
    linear-gradient(var(--en-a),var(--en-a)) left top / 62% 2px no-repeat,
    linear-gradient(var(--en-b),var(--en-b)) right bottom / 62% 2px no-repeat;
}
.f-block div{ padding:12px 14px; border-left:1px solid var(--rule-fine); min-width:0 }
.f-block div:first-child{ border-left:0 }
.f-block b{ display:block; margin-bottom:6px; font-size:10px; font-weight:600; letter-spacing:.2em;
            text-transform:uppercase; color:var(--slate-600) }
.f-block span{ font-family:"Noto Sans JP",sans-serif; font-size:12px; color:var(--en-a); letter-spacing:.04em }
@media (max-width:1000px){
  .f-block{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:row }
  .f-block div:nth-child(3){ border-left:0 }
  .f-block div:nth-child(-n+2){ border-bottom:1px solid var(--rule-fine) }
  .f-block div:last-child:nth-child(odd){ grid-column:1 / -1 }
}
@media (max-width:480px){              /* 2列だと和文が語の途中で折れるので1列に */
  .f-block{ grid-template-columns:minmax(0,1fr); grid-auto-flow:row }
  .f-block div{ border-left:0; border-bottom:1px solid var(--rule-fine) }
  .f-block div:last-child{ border-bottom:0 }
}
.f-cr{ margin-top:18px; font-family:"Noto Sans JP",sans-serif; font-size:11px; letter-spacing:.1em; color:var(--slate-600) }

/* 和文を文節で折り返す（語の途中で改行しない。未対応ブラウザは従来どおり） */
body{ word-break:auto-phrase }