/* 必要なトークンのみ抜粋 */
:root {
    --brand: #0168b3;      /* 見出し左バーなどの基調ブルー */
    --kv-blue: #2b69a4;    /* KVラベルの青帯 */
    --kv-accent: #f0b19d;  /* KV下のピーチ帯 */
    --kv-bar-h: 20px;      /* KV下線の太さ */
    --kv-stick-w: 12px;    /* KV右棒の幅 */
    --kv-stick-up: 100%;   /* KV右棒の上方向伸び */
    --container: 1120px;
  }
  
  /* ベース */
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.9;
    color: #333;
  }
  
  /* コンテナ */
  .container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
  }
  
  /* ====== Hero / KV ====== */
  .hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    background: url('/images/kv-about.png') center/cover no-repeat;
  }
  
  /* 必要に応じてマスクがあれば */
  .hero__mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.45));
    pointer-events: none;
  }
  
  /* KV 見出し（横帯と縦棒がつながるデザイン） */
  .kv {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    transform: translateY(-26px);
  }
  
  @media (min-width: 768px) {
    .kv {
      transform: translateY(-34px);
    }
  }
  
  .kv__label {
    position: relative;
    z-index: 1;
    color: #fff;
    background: var(--kv-blue);
    font-weight: 800;
    letter-spacing: .02em;
    font-size: clamp(22px, 3.8vw, 34px);
    padding: clamp(12px, 3.6vw, 16px) clamp(18px, 5.2vw, 24px);
  }
  
  /* 横帯（右棒の幅ぶん延長） */
  .kv::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    width: calc(100% + var(--kv-stick-w));
    height: var(--kv-bar-h);
    bottom: calc(-1 * var(--kv-bar-h));
    background: var(--kv-accent);
  }
  
  /* 右の縦棒（横帯と連結） */
  .kv::before {
    content: "";
    position: absolute;
    right: calc(-1 * var(--kv-stick-w));
    bottom: calc(-1 * var(--kv-bar-h));
    width: var(--kv-stick-w);
    height: calc(var(--kv-bar-h) + var(--kv-stick-up));
    background: var(--kv-accent);
  }
  
  /* ====== Sections / 見出し ====== */
  .section {
    padding-block: clamp(40px, 7vw, 88px);
  }
  
  .section--tint {
    background: #fdeee6;
  }
  
  /* 左バー＋全幅ライン＋短い青線の見出し */
  .sec-head {
    position: relative;
    isolation: isolate;
    padding-left: 16px;
    margin-bottom: clamp(16px, 3.5vw, 28px);
  }
  
  .sec-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 6px;
    border-radius: 3px;
    background: var(--brand);
  }
  
  .sec-head::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: #d7dee6;
    z-index: 0;
  }
  
  .sec-head__title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 10px;
    font-weight: 800;
    font-size: clamp(22px, 3.4vw, 32px);
    color: var(--brand);
    z-index: 1;
  }
  
  /* 見出しの下に短い青線 */
  .sec-head__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 120px;
    height: 2px;
    background: var(--brand);
    z-index: 2;
  }
  
  /* セクション本文の余白 */
  .sec-body p {
    margin: 0 0 1em;
  }