/* ============================================================
   仕上げ：文字だけの面にも「作り」を入れる
   base.css のあとに読み込む
   ============================================================ */

/* ---- 面の地色に、ごく薄い格子 ---- */
section.tint, section.leaf { position: relative; }
section.tint::before, section.leaf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 24, 28, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 24, 28, .028) 1px, transparent 1px);
  background-size: 96px 96px;
}
section.tint > .wrap, section.leaf > .wrap { position: relative; }

/* ---- 節の見出し：ラベルに点、罫線は引かれて伸びる ---- */
.sec-head { border-top: 0; position: relative; padding-top: clamp(18px, 2.6vh, 28px); }
.sec-head::before {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%;
  background: var(--hair);
}
.sec-head::after {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0;
  background: var(--ink); transition: width 1.2s cubic-bezier(.16, 1, .3, 1);
}
.js .sec-head.on::after { width: 100%; }
.sec-head .en { position: relative; padding-left: 1.3em; }
.sec-head .en::after {
  content: ""; position: absolute; left: 0; top: .82em; width: 6px; height: 6px;
  border-radius: 999px; background: var(--blue);
}
section.ink .sec-head::before { background: rgba(255, 255, 255, .22); }
section.ink .sec-head::after { background: #fff; }

/* ---- 見出しに小さな添え字（和文の級数差をつける） ---- */
.sec-head h2 { position: relative; }

/* ---- 大きな番号は背景の透かしに ---- */
.head-row { position: relative; }
.head-row .bignum {
  position: absolute; left: -.06em; top: -.18em; z-index: 0;
  font-size: clamp(76px, 15vw, 210px); color: rgba(18, 24, 28, .05); line-height: .8;
}
.head-row .sec-head { position: relative; z-index: 1; padding-left: clamp(10px, 4vw, 64px); }
section.ink .head-row .bignum { color: rgba(255, 255, 255, .08); }
@media (max-width: 720px) { .head-row .bignum { font-size: 84px; } .head-row .sec-head { padding-left: 0; } }

/* ---- 引用に大きな記号 ---- */
.pull { position: relative; }
.pull::before {
  content: "“"; position: absolute; left: -.42em; top: -.35em;
  font-family: var(--serif); font-size: 3.4em; line-height: 1; color: var(--hair);
}

/* ---- 表：見出し行に小さな飾り、行にホバーの帯 ---- */
.facts dt { position: relative; padding-left: .9em; }
.facts dt::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; background: var(--blue); }
section.ink .facts dt::before { background: var(--green); }

/* ---- カード：上辺のアクセントが伸びる ---- */
.card, .tile, .gains li, .how-grid article, .lean article { position: relative; }
.card::before, .tile::before, .gains li::before, .how-grid article::before, .lean article::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--ink);
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
.card:hover::before, .tile:hover::before, .how-grid article:hover::before, .lean article:hover::before { width: 100%; }
.gains li::before { background: var(--blue); }
.gains li:nth-child(even)::before { background: var(--green); }
.js .gains li.on::before { width: 44px; }
.gains li::after { display: none; }

/* ---- 箇条書きの点を線に ---- */
.ticks li::before { background: var(--ink); }

/* ---- 段落の先頭を少しだけ引き締める ---- */
.lead-copy b, .message .body b, .card p b { font-weight: 700; background: linear-gradient(transparent 62%, rgba(0, 164, 227, .18) 62%); }

/* ---- 行の区切りに使う細い点線 ---- */
.creed li, .profile, .field, .ways li, .steps > li { border-bottom-style: solid; }

/* ---- 脚：タグラインを大きく ---- */
.site-foot .tagline { letter-spacing: .24em; font-size: 11px; }

/* ---- 選択・リンクの細部 ---- */
a:focus-visible { outline-offset: 2px; }

/* ---- 体験への誘い：背景に薄い格子と角のマーク ---- */
.try { position: relative; overflow: hidden; }
.try::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px;
  border: 1px solid var(--hair); border-radius: 999px; pointer-events: none;
}

/* ---- ページ先頭の見出しに細い縦線 ---- */
.page-hero .inner { position: relative; padding-left: clamp(0px, 2vw, 26px); }
.page-hero .inner::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
}