@charset "shift_jis";

/* ===========================================
   リセット
=========================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===========================================
   ベース
=========================================== */
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    color: #000;
}

a:link    { color: #0000ff; }
a:visited { color: #0D4154; }

figure {
    margin: 10px auto;
}

figcaption {
    text-align: center;
}

/* ===========================================
   ページ全体
=========================================== */
.page-wrap {
    width: 780px;
    margin: 0 auto;
}

/* ===========================================
   ページヘッダー
=========================================== */
.page-header {
    background-color: #1c9156;
    padding: 2px 0 2px 2px;
}

.page-header img {
    display: block;
}

.page-header-title {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 0; /* img のみ表示のため空白を除去 */
}

/* ===========================================
   ページ内ナビ（上部リンク列）
=========================================== */
.inpage-nav {
    text-align: right;
    font-size: 0.875rem;
    padding: 4px 0 6px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

/* ===========================================
   ページナビ（下部 左右）
=========================================== */
.page-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 10pt;
    margin: 8px 0 0;
}

.page-nav-right {
    text-align: right;
    font-size: 10pt;
    margin: 8px 0;
}

/* ===========================================
   ページ区切り（印刷用）
=========================================== */
.page-break {
    page-break-before: always;
}

/* ===========================================
   フッター（i-footer.htm）
=========================================== */
.contact-footer {
    width: 780px;
    margin: 0 auto;
    box-sizing: border-box;
}

.contact-footer-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.contact-footer-title {
    color: #339966;
    font-size: 11pt;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
}

.contact-rule {
    flex: 1;
    border: none;
    border-top: 1px solid #339966;
    margin: 0;
}

.contact-footer-body {
    border: 1px solid #ccc;
    padding: 0 12px 8px;
    text-align: center;
    font-size: 10pt;
    line-height: 1.8;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
}

.contact-footer-body p      { margin: 0; }
.contact-footer-body strong { font-size: 1rem; }

/* ===========================================
   セクション共通
=========================================== */
.ff-section {
    margin-bottom: 24px;
}

/* ------- セクションヘッダー ------- */
.section-header {
    display: flex;
    align-items: stretch;
    border: 1px solid #008080;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.section-header-title {
    display: inline-flex;
    align-items: center;
    background-color: #339966;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 8px;
    margin: 0;
    width: 50%;
    min-width: 0;
}

.section-header-sub {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #006666;
    padding: 4px 8px;
    width: 50%;
}

/* ------- セクションタイトルバナー ------- */
.section-banner {
    background-color: #089066;
    border: 1px solid #339966;
    padding: 4px 8px;
    margin-bottom: 8px;
}

/* ===========================================
   コンテンツ領域（画像＋詳細 横並び）
=========================================== */
.ff-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 98%;
    margin: 0 auto;
}

.ff-main-img {
    flex: 0 0 auto;
    margin: 0;
}

.ff-details {
    flex: 1;
    min-width: 0;
}

/* ===========================================
   ブロック（特長・用途・種類など）
=========================================== */
.ff-block {
    margin-bottom: 10px;
}

.ff-block-heading {
    background-color: #EFEFEF;
    color: #006666;
    font-weight: 700;
    padding: 3px 6px;
    margin-bottom: 4px;
}

/* ===========================================
   定義リスト（番号付き 特長・用途）
=========================================== */
.ff-list {
    display: grid;
    grid-template-columns: 2.5em 1fr;
    gap: 2px 6px;
    margin: 4px 0 0 0;
    padding: 0;
    font-size: 0.875rem;
}

.ff-list dt {
    color: #008080;
    font-weight: 700;
    padding-top: 5px;
}

.ff-list dd {
    margin: 0;
    padding-top: 5px;
}

/* ラベル付き（環境・安全）リスト */
.ff-list--labeled {
    grid-template-columns: 5em 1fr;
}

.ff-list--labeled dt           { color: #CC6600; font-weight: 700; }
.ff-list--labeled dd strong    { color: #CC6600; }


/* ===========================================
   種類グリッド（FM・FP / KSSB製品タイプ）
=========================================== */
.ff-type-grid {
    display: flex;
    gap: 8px;
}

.ff-type-item {
    flex: 1;
}

.ff-type-label {
    color: #333;
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0 0 4px;
}

.ff-type-fig {
    text-align: center;
    margin: 0;
}

/* ===========================================
   中央寄せ画像
=========================================== */
.ff-center-img {
    text-align: center;
    margin: 8px 0;
}

/* ===========================================
   リスト内：色付き見出し
=========================================== */
.catch-label {
    color: #CC6600;
}
.color-label {
    color: #008080;
}

/* ===========================================
   施工状況グリッド（Eタイプ）
=========================================== */
.ff-sekou-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0;
}

.ff-sekou-grid figure {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
}

/* ===========================================
   注記
=========================================== */
.ff-note {
    font-size: 0.8rem;
    margin: 6px 0 0;
    text-align: center;
}

/* ===========================================
   PDFリンク行
=========================================== */
.ff-pdf-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    padding: 4px 8px;
}

/* ===========================================
   データテーブル共通
=========================================== */
.ff-tbl-wrap {
    display: flex;
    justify-content: center;
    margin: 6px 0;
    overflow-x: auto;
}

.ff-data-tbl {
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ff-data-tbl th,
.ff-data-tbl td {
    border: 1px solid #aaa;
    padding: 4px 8px;
    text-align: center;
    vertical-align: middle;
}

.ff-data-tbl thead th  { background-color: #E6FFE6; }
.ff-data-tbl-head      { background-color: #E6FFE6; text-align: left; white-space: nowrap; }
.ff-data-tbl-right     { text-align: right; }
.ff-data-tbl-center    { text-align: center; }

/* ===========================================
   台形フレーム：箇条書きリスト
=========================================== */
.disc-list {
    list-style: none;
    padding: 0 0 0 7px;
    margin: 4px 0;
}

.disc-list li::before {
    content: "●";
    color: #008080;
    margin-right: 4px;
}

/* ===========================================
   トライフレーム：条件テキスト
=========================================== */
.try-condition {
    color: #990000;
    margin-top: 8px;
}

.try-highlight {
    background-color: #FFCCCC;
}

/* ===========================================
   キャッチフレーム：特長（写真＋テキスト横並び）
=========================================== */
.catch-feature {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.catch-feature-img {
    flex: 0 0 auto;
    margin: 0 auto;
}

.catch-feature-text {
    flex: 1;
    font-size: 0.875rem;
}

.catch-feature-text p {
    margin: 0 0 8px;
}


/* ------- 施工状況テーブル ------- */
.catch-sekou-tbl {
    width: 500px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.catch-sekou-tbl th,
.catch-sekou-tbl td {
    border: 1px solid #000;
    padding: 6px 10px;
    text-align: center;
    vertical-align: middle;
}

.catch-sekou-tbl th {
    background-color: #D1E2F2;
    white-space: nowrap;
}

/* ------- スペックテーブル ------- */


.catch-spec-tbl {
    width: 500px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.catch-spec-tbl th {
    background-color: #66cc66;
    border: 1px solid #000;
    padding: 4px 8px;
    text-align: center;
}

.catch-spec-tbl td {
    background-color: #ffffff;
    border: 1px solid #000;
    padding: 4px 8px;
    text-align: center;
}

/* ------- 組立状況 ------- */
.catch-kumitate-wrap {
    margin: 6px 0;
}

.catch-kumitate-title {
    max-width: 472px;
    font-size: 0.875rem;
    margin: 0 auto 6px;
}

.catch-kumitate-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 8px;
}

.catch-kumitate-row figure {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
}

/* ===========================================
   画像ボーダー
=========================================== */
.img-bordered {
    border: 3px solid #0099cc;
    display: block;
}

/* ===========================================
   エコスロープ：施行例フロー
=========================================== */
.eco-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

/* 横並び行（eco1 → 矢印 → eco2） */
.eco-flow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.eco-flow-img {
    margin: 0;
    text-align: center;
}

.eco-flow-arrow {
    flex: 0 0 auto;
    text-align: center;
}

/* 縦矢印 */
.eco-flow-down {
    text-align: center;
}

/* 中央寄せ単独画像行 */
.eco-flow-center {
    text-align: center;
}

/* ===========================================
   ウッドスロープ：メイン写真
=========================================== */
.wood-photos {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
    margin: 8px 0;
}

.wood-photo-main,
.wood-photo-sub {
    margin: 0;
}

/* ===========================================
   ウッドスロープ：特徴・適用箇所 横並び
=========================================== */
.wood-features {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin: 4px 0;
}
.wood-features .ff-block {
    flex: 1;
    margin-bottom: 0;
}

/* ===========================================
   植栽フレーム：タイプ見出し
=========================================== */
.syokusai-type-heading {
    font-weight: 700;
    margin: 14px auto 6px;
    max-width: 536px;
    font-size: 0.9rem;
}

/* ===========================================
   植栽フレーム：施行事例（説明＋写真 横並び）
=========================================== */
.syokusai-case {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 auto 16px;
    max-width: 536px;
}

.syokusai-case-info {
    flex: 0 0 200px;
    font-size: 0.875rem;
    line-height: 1.7;
    min-width: 160px;
}

.syokusai-case-info p {
    margin: 0;
}

.syokusai-case-img {
    flex: 0 0 auto;
    margin: 0;
}


/* ===========================================
   NC�U型枠 Sタイプ
=========================================== */
/* 仕様リスト */
.ff-list--spec {
    grid-template-columns: 9em 1fr;
}
/* CO2 削減量テーブル */
.nc2s-co2-tbl {
    min-width: 500px;
}
.nc2s-co2-tbl thead th {
    background-color: #66cc66;
    border: 1px solid #808080;
}
.nc2s-co2-tbl td {
    border: 1px solid #808080;
    text-align: center;
}

/* 備考テキスト */
.nc2s-bikou {
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.7;
    margin-top: 8px;
}


/* ===========================================
   Tタイプ・Sタイプ 仕様テーブル
=========================================== */
.ts-spec-wrap {
    max-width: 600px;
    margin: 0 auto 16px;
}

.ts-spec-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 4px;
}

.ts-label-green {
    color: rgb(0, 153, 58);
    font-size: 1rem;
}

.ts-spec-note {
    font-size: 0.875rem;
}

.ts-tbl {
    min-width: 600px;
}

.ts-tbl thead th {
    background: rgb(138, 201, 151);
    border: 1px solid #000;
    color: #000;
}

.ts-tbl td {
    border: 1px solid #000;
}

.ts-th-empty {
    width: 110px;
}

.ts-td-yellow {
    background: rgb(216, 230, 152);
}


    



/* ===========================================
   レスポンシブ（〜780px）
=========================================== */
@media screen and (max-width: 780px) {

    /* ページ全体 */
    .page-wrap {
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
    }

    .page-wrap img {
        max-width: 100%;
        height: auto;
    }

    /* ページヘッダー */
    .page-header img {
        height: auto;
    }

    /* ナビ */
    .inpage-nav    { word-break: keep-all; }
    .page-nav-right { margin: 6px 0; }

    /* フッター */
    .contact-footer { width: 100%; padding: 0 8px; }
    .contact-rule   { min-width: 0; }

    /* セクションヘッダー */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-header-title,
    .section-header-sub {
        width: 100%;
    }

    /* コンテンツ横並び → 縦積み */
    .ff-content {
        flex-direction: column;
    }

    .ff-main-img {
        width: 100%;
        text-align: center;
    }

    .ff-center-img img { max-width: 100%; }

    /* 種類グリッド */
    .ff-type-grid { flex-direction: column; }

    /* 施工状況グリッド */
    .ff-sekou-grid { gap: 6px; }

    /* データテーブル */
    .ff-data-tbl { width: 100%; }

    /* キャッチフレーム */
    .catch-feature          { flex-direction: column; }
    .catch-sekou-tbl,
    .catch-spec-tbl         { width: 100%; }
    .catch-kumitate-row     { justify-content: center; }

    /* エコスロープ */
    .eco-flow-row {
        flex-direction: column;
        align-items: center;
    }
    .eco-flow-arrow.-r {
        transform: rotate(90deg);
    }

    /* ウッドスロープ */
    .wood-photos {
        flex-direction: column;
        align-items: center;
    }
    .wood-features {
        flex-direction: column;
        gap: 0;
    }
    .wood-features .ff-block {
        width: 100%;
    }

    /* 植栽フレーム */
    .syokusai-case {
        justify-content: center;
    }
    .syokusai-case-img img {
        max-width: 100%;
        height: auto;
    }

    /* NC�U型枠 Sタイプ */
    .nc2s-co2-tbl {
        min-width: unset;
        width: 100%;
    }
    .ff-list--spec {
        grid-template-columns: 1fr;
    }

    /* Tタイプ・Sタイプ  */
    .ts-spec-label {
        flex-wrap: wrap;
    }
    .ts-tbl {
        min-width: unset;
    }

}