.ksq-metrics{--bg:#f8fafc;--fg:#0f172a;--muted:#64748b;--brand:#0ea5e9;
    background:var(--bg); color:var(--fg); padding:32px 16px;
border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0}
  .ksq-metrics__container{max-width:1080px;margin:0 auto}
  .ksq-metrics__head{text-align:center;margin-bottom:16px}
  .ksq-metrics__title{font-size:22px;line-height:1.3;margin:0 0 4px}
  .ksq-metrics__desc{font-size:14px;color:var(--muted);margin:0}
  .ksq-metrics__grid{display:grid;grid-template-columns:1fr
1fr;gap:16px;margin:20px 0 8px}
  .ksq-metrics__item{background:#fff;border:1px solid
#e5e7eb;border-radius:12px;padding:20px;text-align:center}

.ksq-metrics__value{font-weight:800;display:flex;justify-content:center;align-items:baseline;gap:6px}
  .ksq-metrics__value span{font-size:40px;letter-spacing:1px}
  .ksq-metrics__value small{font-size:18px;color:var(--fg)}
  .ksq-metrics__label{font-size:14px;color:var(--muted);margin-top:6px}
  .ksq-metrics__note{font-size:12px;color:#94a3b8;margin:6px 0 0}
  .ksq-metrics__cta{display:flex;justify-content:center;margin-top:16px}
  .ksq-button{display:inline-block;padding:12px
20px;border-radius:9999px;border:1px solid
var(--brand);text-decoration:none}
  .ksq-button{font-weight:700}
  .ksq-button:hover{background:var(--brand);color:#fff}
  @media (min-width:768px){
    .ksq-metrics{padding:40px 20px}
    .ksq-metrics__title{font-size:24px}
    .ksq-metrics__grid{grid-template-columns:repeat(2,1fr);gap:20px}
    .ksq-metrics__value span{font-size:48px}
  }
      /* Scoped to #ksq-howto */
      #ksq-howto .howto-grid{display:grid;gap:16px}
      #ksq-howto .howto-card{border:1px solid
#e5e7eb;border-radius:12px;background:#fff}
      #ksq-howto .howto-card .card-body{padding:16px 18px}
      #ksq-howto .badge-soft{background:#eef2ff;color:#334155;border:1px
solid #c7d2fe;padding:.25rem .5rem;border-radius:9999px;font-size:.8rem}
      @media(min-width:768px){#ksq-howto
.howto-grid{grid-template-columns:1fr 1fr}}
    /* --- Scoped styles (このセクション内のみ) --- */
    #case-studies { margin: 2.5rem 0; }
    #case-studies * { box-sizing: border-box; }
    #case-studies .cs-header { display: grid; gap: .75rem; margin-bottom:
1.25rem; }
    #case-studies .cs-eyebrow { font-size: .875rem; letter-spacing: .08em;
color: #666; }
    #case-studies h2#case-studies-title { font-size: clamp(1.4rem, 2.2vw +
1rem, 2rem); margin: 0; }
    #case-studies .cs-intro { color: #333; line-height: 1.8; }
    #case-studies .cs-toc { background: #f6f7f9; border: 1px solid #e6e8ed;
border-radius: .75rem; padding: 1rem; margin: 1.25rem 0 1.75rem; }
    #case-studies .cs-toc h3 { font-size: 1rem; margin: 0 0 .5rem; }
    #case-studies .cs-toc ul { display: grid; grid-template-columns: 1fr;
gap: .4rem .75rem; margin: 0; padding-left: 1.1rem; }
    #case-studies .cs-toc a { text-decoration: none; }
    #case-studies .cs-grid { display: grid; grid-template-columns: 1fr;
gap: 1rem; }
    #case-studies .cs-card { background: #fff; border: 1px solid #e6e8ed;
border-radius: .9rem; padding: 1.1rem 1.1rem 1.2rem; box-shadow: 0 1px 2px
rgba(0,0,0,.03); }
    #case-studies .cs-card h3 { margin-top: 0; font-size: 1.125rem; }
    #case-studies .cs-meta { display: grid; gap: .35rem; margin: .25rem 0
1rem; }
    #case-studies .cs-meta dl { display: grid; grid-template-columns: 6em
1fr; gap: .25rem .75rem; margin: 0; }
    #case-studies .cs-meta dt { color: #666; }
    #case-studies .cs-meta dd { margin: 0; }
    #case-studies .cs-body { line-height: 1.9; color: #222; }
    #case-studies .cs-body ul { margin: .25rem 0 .75rem 1.25rem; }
    #case-studies .cs-cta { display: flex; flex-wrap: wrap; gap: .5rem
.75rem; margin-top: .75rem; }
    #case-studies .cs-btn { display: inline-block; border: 1px solid
#0f62fe; background: #0f62fe; color: #fff; padding: .6rem .9rem;
border-radius: .6rem; text-decoration: none; font-weight: 600; font-size:
.95rem; }
    #case-studies .cs-btn--ghost { background: #fff; color: #0f62fe; }
    #case-studies .cs-note { font-size: .9rem; color: #666; background:
#fafbfc; border: 1px dashed #e1e4ea; padding: .9rem 1rem; border-radius:
.6rem; }
    #case-studies .cs-top { text-align: right; margin-top: .5rem; }
    #case-studies .cs-top a { font-size: .875rem; text-decoration: none; }
    @media (min-width: 720px) {
      #case-studies .cs-grid { grid-template-columns: 1fr 1fr; }
      #case-studies .cs-toc ul { grid-template-columns: 1fr 1fr; }
    }
  .cs-rep-section {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
    background-color: #f9f9f9; /* 背景色：薄いグレーで区分け */
    padding: 60px 20px;
    box-sizing: border-box;
    color: #333;
    line-height: 1.6;
  }
  /* コンコンテンツの幅制限 */
  .cs-rep-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    padding: 50px 40px; /* パディングを少し調整 */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 50px; /* 間隔を少し広げる */
    position: relative;
  }

  /* 写真エリア */
  .cs-rep-image {
    flex: 0 0 200px; /* 画像の幅 */
    text-align: center;
  }

  .cs-rep-image img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #eee; /* ダミー画像読み込み前の背景 */
  }

  /* テキストエリア */
  .cs-rep-content {
    flex: 1; /* 残りの幅を埋める */
    min-width: 300px;
  }

  /* * 変更点：監修者見出しのデザイン強化
   * バッジ風のデザインにして目立たせる
   */
  .cs-rep-label {
    display: inline-block;
    background-color: #003366; /* 濃いネイビー背景 */
    color: #fff; /* 白文字 */
    font-size: 16px;
    font-weight: bold;
    padding: 8px 20px; /* 余白を大きく */
    margin-bottom: 20px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .cs-rep-name {
    font-size: 28px; /* 名前も少し大きく */
    font-weight: bold;
    color: #333;
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #003366;
    display: block; /* ブロック要素にして下線を引く */
    line-height: 1.2;
  }

  .cs-rep-name small {
    font-size: 0.6em;
    color: #666;
    margin-left: 10px;
    font-weight: normal;
  }

  /* キャッチコピー */
  .cs-rep-headline {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #2c3e50;
  }

  /* 本文 */
  .cs-rep-text {
    font-size: 15px;
    margin-bottom: 25px;
    text-align: justify;
  }

  /* 会社概要テーブル */
  .cs-rep-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 14px;
    text-align: left;
    background-color: #fcfcfc;
    border: 1px solid #eee;
  }

  .cs-rep-table th, .cs-rep-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
  }

  .cs-rep-table th {
    width: 25%;
    background-color: #f4f6f8;
    color: #333;
    font-weight: bold;
    white-space: nowrap; /* 見出しの折り返し防止 */
  }

  .cs-rep-table td {
    color: #555;
  }

  /* テーブル内の補足テキスト */
  .cs-rep-note {
    font-size: 12px;
    color: #888;
    display: block;
    margin-top: 4px;
  }

  /* ボタンエリア */
  .cs-rep-btn-wrapper {
    text-align: left;
    margin-top: 10px;
  }

  /* 会社概要へのリンクボタン */
  .cs-rep-btn {
    display: inline-block;
    background-color: #003366; /* メインカラー */
    color: #fff;
    text-decoration: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  .cs-rep-btn:hover {
    background-color: #00509e; /* ホバー時の色 */
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
  }

  /* スマホ対応（レスポンシブ） */
  @media (max-width: 768px) {
    .cs-rep-container {
      flex-direction: column;
      padding: 30px 20px;
      gap: 30px;
    }

    .cs-rep-image {
      flex: 0 0 auto;
      width: 100%;
    }

    .cs-rep-image img {
      max-width: 240px; /* スマホでは画像を少し小さめに */
    }

    .cs-rep-btn-wrapper {
      text-align: center; /* スマホではボタンを中央寄せ */
    }

    /* テーブルのスマホ対応（縦並び） */
    .cs-rep-table th, .cs-rep-table td {
      display: block;
      width: 100%;
      box-sizing: border-box;
      white-space: normal;
    }

    .cs-rep-table th {
      background-color: transparent;
      padding-bottom: 4px;
      color: #003366;
      border-bottom: none;
    }

    .cs-rep-table td {
      padding-top: 0;
      padding-bottom: 15px;
    }

    .cs-rep-table tr:last-child td {
      border-bottom: none;
    }
  }
    /* 既存のデザインに影響を与えないよう、このセクション専用のスタイルを定義 */
    .reason-section {
        margin: 40px auto; /* 上下40px、左右中央寄せ */
        padding: 30px;
        background-color: #f9f9f9;
        border: 1px solid #eee;
        box-sizing: border-box; /* パディングを含めた幅計算 */
        width: 100%; /* 親要素の幅いっぱいに広げる */
        max-width: 100%; /* はみ出し防止 */
    }

    .reason-title {
        font-size: 26px; /* 見出しを大きく */
        color: #333;
        border-bottom: 3px solid #0056b3;
        padding-bottom: 15px;
        margin-bottom: 30px;
        font-weight: bold;
        line-height: 1.4;
    }

    .reason-intro {
        margin-bottom: 30px;
        font-size: 18px; /* 本文を大きく（14px→18px） */
        line-height: 1.8;
        color: #333;
    }

    .reason-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px; /* アイテム間の隙間 */
    }

    .reason-item {
        width: 48%; /* PCでは2列 */
        background: #fff;
        padding: 25px; /* 内側の余白を広めに */
        box-sizing: border-box;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        border-radius: 4px;
    }

    .reason-item-title {
        font-size: 22px; /* 小見出しを大きく */
        color: #0056b3;
        margin-top: 0;
        margin-bottom: 15px;
        border-left: 6px solid #0056b3;
        padding-left: 15px;
        line-height: 1.4;
        font-weight: bold;
    }

    .reason-item-text {
        font-size: 16px; /* ボックス内の文字も大きく */
        line-height: 1.8;
        margin: 0;
        color: #444;
    }

    .reason-footer {
        background: #eef7ff;
        padding: 20px;
        border-radius: 6px;
        text-align: center;
        margin-top: 30px;
    }

    .reason-footer-text {
        margin: 0;
        font-weight: bold;
        color: #0056b3;
        font-size: 18px; /* 結びの言葉も大きく */
        line-height: 1.6;
    }

    /* スマホ・タブレット向けの調整（画面幅768px以下で1列にする） */
    @media screen and (max-width: 768px) {
        .reason-section {
            padding: 20px; /* スマホでは余白を少し詰める */
        }
        .reason-item {
            width: 100%; /* 1列にして画面幅いっぱいに */
            margin-bottom: 0; /* gapプロパティが効く場合は不要ですが念のため */
        }
        .reason-title {
            font-size: 22px;
        }
        .reason-intro {
            font-size: 16px;
        }
    }