/* タイプスケール（5段階に集約） */
  :root {
    --fs-xl: 22px;  /* 大見出し */
    --fs-lg: 19px;  /* 製品名 */
    --fs-md: 16px;  /* 本文・小見出し */
    --fs-sm: 13px;  /* 表・キャプション・補助テキスト */
    --fs-xs: 12px;  /* 注釈 */
  }
  @media (max-width: 768px) {
    :root { --fs-xl: 19px; --fs-lg: 17px; --fs-md: 15px; --fs-sm: 12px; --fs-xs: 11px; }
  }
  .surface-table__td,
  .surface-table__th { font-size: var(--fs-sm); line-height: 1.6; }
  .surface-table__th--row { font-weight: 700; }
  .surface-table__caption,
  .table-wrapper__hint { font-size: var(--fs-xs); }
  #surface-comparison__table-caption,
  #surface-features__table-caption {
    padding: 0 0 10px;
    color: #1a1a1a;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
  }
  .surface-comparison__caption { font-size: var(--fs-sm); }
  .surface-note,
  .surface-notes__item { font-size: var(--fs-xs); line-height: 1.7; }
  @media (max-width: 768px) {
    .surface-table__td,
    .surface-table__th { line-height: 1.55; }
  }

  /* 比較表・スペック表：罫線を最小限にしたクリーンな表組み */
  .surface-table,
  .surface-product-spec { width: 100%; border-collapse: collapse; background: #fff; }
  .surface-table__td,
  .surface-table__th {
    border: 0;
    border-bottom: 1px solid #e6e9ee;
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
  }
  .surface-table--comparison tbody .surface-table__td {
    font-size: var(--fs-sm);
    line-height: 1.6;
  }
  .surface-product-spec tbody .surface-table__td {
    font-size: var(--fs-sm);
    line-height: 1.6;
  }
  .surface-table__th--row { color: #5a6472; font-weight: 700; white-space: nowrap; background: #fafbfc; }
  .surface-table thead .surface-table__th,
  .surface-product-spec thead .surface-table__th { border-bottom: 2px solid #d0d7e0; vertical-align: bottom; }
  .surface-table tbody tr:last-child .surface-table__td,
  .surface-table tbody tr:last-child .surface-table__th { border-bottom: 0; }

  /* 比較表のカラム見出し（キャッチ → 製品画像 → 製品名 → ボタン） */
  .surface-compare-head { text-align: center; min-width: 190px; padding: 16px 12px; }
  .surface-compare-head--label { min-width: 0; white-space: nowrap; vertical-align: bottom; }
  .surface-compare-head:not(.surface-compare-head--label) {
    position: relative;
    height: 320px;
    padding-top: 16px;
    vertical-align: top;
  }
  .surface-compare-head__eyebrow {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.5;
    color: #1a6fb0;
    position: absolute;
    top: 16px;
    left: 12px;
    right: 12px;
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .surface-compare-head .surface-comparison__figure {
    position: absolute;
    top: 58px;
    left: 12px;
    right: 12px;
    height: 166px;
    margin: 0;
  }
  .surface-compare-head .surface-comparison__image {
    width: 140px;
    height: 120px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
  }
  .surface-compare-head .surface-comparison__caption {
    margin-top: 6px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.5;
    text-align: center;
  }
  .surface-compare-head__button {
    position: absolute;
    top: 258px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: max-content;
    justify-self: center;
    margin-top: 0;
    padding: 8px 18px;
    border: 1px solid #1a6fb0;
    border-radius: 4px;
    background: #fff;
    color: #1a6fb0;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
  }
  
  @media (max-width: 768px) {
    .surface-compare-head { min-width: 150px; padding: 12px 8px; }
    .surface-compare-head:not(.surface-compare-head--label) { height: 230px; padding-top: 12px; }
    .surface-compare-head:not(.surface-compare-head--label) .surface-compare-head__eyebrow { top: 12px; }
    .surface-compare-head .surface-comparison__figure { top: 52px; height: 142px; }
    .surface-compare-head .surface-comparison__image { width: 100px; height: 100px; }
    .surface-compare-head__button { top: 180px; }
    .surface-table__td,
    .surface-table__th { padding: 10px 12px; }
  }
  .surface-callout__title{font-size:var(--fs-md);}
  .surface-callout__list { margin: 8px 0 0; padding-left: 1.2em; list-style-type:disc;}
  .surface-callout__list li { margin-bottom: 6px; line-height: 1.7; font-size: var(--fs-md); }

  /* 注釈記号 */
  .surface-footnote { font-size: var(--fs-xs); font-weight: 400; color: #5a6472; margin-left: 2px; }
  .surface-note--table { margin: 8px 0 0; font-size: var(--fs-xs); color: #5a6472; line-height: 1.6; }

  /* ビジュアルのサイズ調整 */
  .surface-hero__figure,
  .surface-product__figure { margin: 16px auto; text-align: center; }
  .surface-hero__image { max-width: 640px!important; width: 100%; height: auto; }
  .surface-page .surface-product__image { max-width: 720px!important; width: 100%; height: auto; }
  .surface-page .surface-figure__image { max-width: 100%; width: 100%; height: auto; }
  .surface-page .surface-ai__image { display: block; max-width: 640px!important; width: 100%; height: auto; margin-inline: auto; }
  .surface-hero__caption,
  .surface-product__caption,
  .surface-figure__caption { font-size: var(--fs-xs); color: #5a6472; margin-top: 6px; }
  .surface-cta { text-align: center; }
  .surface-related__list {
    display: grid;
    gap: 12px;
  }
  .related-card {
    border: 1px solid #dce3ea;
    border-radius: 4px;
    background: #fff;
  }
  .related-card__link {
    display: block;
    padding: 16px 18px;
    color: inherit;
    text-decoration: none;
  }
  .related-card__link:hover,
  .related-card__link:focus { background: #f7f9fb; }
  .related-content__title {
    margin: 0 0 6px;
    color: #1a6fb0;
    font-size: var(--fs-md);
    line-height: 1.5;
  }
  .related-content__text {
    margin: 0;
    color: #5a6472;
    font-size: var(--fs-sm);
    line-height: 1.7;
  }
  .surface-figure-group--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .surface-figure-group--two .surface-figure__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  @media (max-width: 768px) {
    .surface-hero__image,
    .surface-page .surface-product__image,
    .surface-page .surface-figure__image,
    .surface-page .surface-ai__image { max-width: 100%; }
    .surface-figure-group--two { grid-template-columns: 1fr; }
  }

  /* 余白の圧縮 */
  .surface-section, .surface-group, .surface-product { margin-bottom: 32px; }
  .surface-text { margin: 0 0 12px; line-height: 1.75; }

  /* 帯見出し（大見出し・中見出し） */
  .surface-section__title {
    background: #dceef8;
    border-left: 6px solid #1a6fb0;
    padding: 12px 16px;
    margin: 40px 0 16px;
    font-size: var(--fs-xl);
    line-height: 1.5;
    border-radius: 2px;
  }
  .surface-section__lead-title {
    padding: 0 0 8px 12px;
    margin: 0 0 16px;
    border-left: 4px solid #1a6fb0;
    font-size: var(--fs-md);
    line-height: 1.6;
  }
  .surface-product__name {
    background: #dceef8;
    padding: 10px 14px;
    margin: 32px 0 8px;
    font-size: var(--fs-lg);
    line-height: 1.5;
    border-radius: 2px;
  }
  .surface-product__subtitle {
    padding-left: 12px;
    margin: 28px 0 12px;
    border-left: 4px solid #1a6fb0;
    font-size: var(--fs-md);
    line-height: 1.6;
  }
  @media (max-width: 768px) {
    .surface-section__title { padding: 10px 12px; border-left-width: 5px; }
  }

  /* ==========================================================
     【確認用】土台レイアウトの最小セット
     本番では css/surface-page.css が担当する範囲です。
     納品ファイル（index.html / index_linked.html）には含めません。
     ========================================================== */
  body { margin: 0; background: #fff; color: #1a1a1a; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.8; }
  .surface-page { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; }
  .surface-page__breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; padding: 0; margin: 0 0 20px; font-size: 12px; color: #5a6472; }
  .surface-hero__eyebrow { font-size: 13px; color: #1a6fb0; font-weight: 700; margin: 0 0 8px; }
  .surface-hero__title { font-size: 28px; line-height: 1.45; margin: 0 0 12px; }
  .surface-hero__subtitle { font-size: 14px; color: #5a6472; margin: 0 0 20px; }
  .surface-toc { background: #f7f9fb; border: 1px solid #e6e9ee; border-radius: 4px;
    padding: 16px 20px; margin: 28px 0; }
  .surface-toc__list { list-style: none; padding: 0; margin: 0;}
  .surface-toc__list .surface-toc__list { padding-left: 1.2em; margin-top: 6px; }
  .surface-toc__sublist{margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px; list-style-type:circle;}
  .surface-toc__item { margin-bottom: 6px; font-size: 14px; }
  .surface-toc__link, .surface-page__breadcrumb a { color: #1a6fb0; }
  .table-wrapper { overflow-x: auto; margin: 16px 0; }
  .surface-callout { background: #f7f9fb; border: 1px solid #e6e9ee; border-radius: 4px;
    padding: 16px 20px; margin: 20px 0; }
  .surface-callout__title { font-weight: 700; margin: 0; }
  .btn-product-link { display: inline-block; padding: 12px 15px; margin: 4px 8px 4px 0;
    border: 1px solid #1a6fb0; border-radius: 4px; color: #1a6fb0; background: #fff;
    font-size: 14px; font-weight: 700; text-decoration: none; }
  .btn-product-link--primary { background: #1a6fb0; color: #fff; }
  .faq-item { border-bottom: 1px solid #e6e9ee; }
  .faq-item__button { display: flex; justify-content: space-between; align-items: center;
    gap: 12px; width: 100%; padding: 16px 4px; border: 0; background: none;
    font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; }
  .faq-item__answer { display: none; padding: 0 4px 16px; }
  .faq-item.is-open .faq-item__answer { display: block; }
  .surface-related__list { list-style: none; padding: 0; margin: 0; }
  .surface-related__item { border: 1px solid #e6e9ee; border-radius: 4px;
    padding: 14px; margin-bottom: 12px; }
  .related-content__title { font-size: 15px; margin: 0 0 6px; }
  .surface-notes__list { list-style: none; padding: 0; margin: 0; }
  .surface-page__footer { margin-top: 40px; padding-top: 16px;
    border-top: 1px solid #e6e9ee; font-size: 12px; color: #5a6472; }
  img { max-width: 100%; height: auto; }


.surface-page{text-align:start;}
#index .surface-page img{max-width:none;}
.surface-page section{width:auto;}

.surface-page p:not(.related-content__text):not(.surface-callout__title){
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    line-height: 1.8;
}

.surface-page h2:not(.surface-hero__title){
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
.surface-page h2:not(.surface-hero__title):not(.surface-toc__title){
    margin-top:40px;
}

.surface-lead__text{font-size:var(--fs-md); line-height: 1.8;}
.surface-text{font-size:var(--fs-md);}
.surface-toc__title{font-size:24px;}
.surface-group__eyebrow{font-size:var(--fs-md);}
.surface-ai__subtitle{font-size:var(--fs-md);}
.surface-ai__caption{font-size:var(--fs-md); margin-top:5px; line-height: 1.8;}
.surface-product__catch{font-size:var(--fs-md);}
.faq-item__answer p{font-size:var(--fs-md); line-height: 1.8;}