@charset "shift_jis";

/* ==============================================
   共通 / 全ページ共通スタイル
=============================================== */

/* タイトル帯 */
.deko-title-bar {
    display: flex;
    align-items: stretch;
    border: 2px solid #009900;
    margin-bottom: 10px;
    font-weight: bold;
}

/* タイトル帯：テキスト名（deko・fit・freeframe・halfpipe） */
.deko-title-bar__name {
    background-color: #009900;
    color: #fff;
    font-size: 22px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* タイトル帯：画像置き（den-o・den・sr・syokusai-frame・topwall） */
.deko-title-bar__img {
    background-color: #009900;
    padding: 6px 16px;
    display: flex;
    align-items: center;
}

/* タイトル帯：大見出しテキスト（mesh・soil-damu） */
.deko-title-bar__ttl {
    background-color: #009900;
    color: #fff;
    font-size: 1.2rem;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    margin: 0;
}

/* タイトル帯：サブテキスト共通 */
.deko-title-bar__sub {
    color: #3399FF;
    padding: 6px 16px;
    display: flex;
    align-items: center;
}

/* セクション見出し */
.section-heading {
    display: block; 
}

.toku-text .section-heading {margin-top: 0;}

/* ol 字下げ */
ol {
    padding-left: 1.5rem;
}

/* ----------------------------------------------
   特徴エリア（toku-flex系）
----------------------------------------------- */
.toku-flex {
    display: flex;
    gap: 16px;
}

.toku-img {
    display: block;
}

.toku-text {
    width: calc(100% - 286px);
}

.toku-detail-body {
    margin: 0 0 1em 2em;
    line-height: 1.5;
}

.toku-sub-heading {
    color: #996633;
    font-weight: bold;
    margin: 8px 0 2px;
}

.toku-side-imgs {
    float: right;
    margin: 0 0 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toku-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 11pt;
    line-height: 1.8;
    color: #C44000;
}

.toku-list li {
    margin-bottom: 4px;
}


/* ----------------------------------------------
   注釈テーブル（toku-note-table）
----------------------------------------------- */
.toku-note-table {
    border-collapse: collapse;
    margin-top: 8px;
}

.toku-note-table td {
    padding: 3px 8px;
    vertical-align: top;
}

/* ----------------------------------------------
   特徴リスト（deko・sr）
----------------------------------------------- */
.deko-features {
    list-style: disc;
    padding-left: 1.4em;
    font-size: 14px;
    font-weight: bold;
    color: #006600;
}

.deko-features li {
    margin-bottom: 8px;
}

/* ----------------------------------------------
   適用箇所テキスト（deko）
----------------------------------------------- */
.deko-text-body {
    padding: 10px 20px;
    font-size: 14px;
}

/* ----------------------------------------------
   施工手順（deko）
----------------------------------------------- */
.tejyun__title {
    font-weight: bold;
    font-size: 14px;
    margin: 8px 0 6px 16px;
}

.tejyun__wrap {
    text-align: center;
}

.tejyun {
    display: inline-flex;
    align-items: flex-end;
    margin: 0 0 8px;
}

.tejyun__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tejyun__label {
    font-size: 13px;
    margin-bottom: 4px;
}

.tejyun__arrow {
    align-self: center;
    flex-shrink: 0;
}

/* ----------------------------------------------
   施工手順グリッド（den・halfpipe）
----------------------------------------------- */
.tejyun-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 12px 0;
}

.tejyun-grid__item {
    text-align: center;
}

.tejyun-grid__item img {
    width: 100%;
    height: auto;
}

.tejyun-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 12px 0;
}

.tejyun-grid3__item {
    display: grid;
    grid-template-rows: 45px 137px auto;
    justify-content: center;
    gap: 8px;
}

.tejyun-grid3__img {
    text-align: center;
}

.tejyun-grid3__label {
    font-weight: bold;
    color: #333;
}

.tejyun-grid3__note {
    font-size: 14px;
}

/* ----------------------------------------------
   施工事例（jirei系）
----------------------------------------------- */
.jirei-wrap {
    text-align: center;
    padding-top: 20px;
}

.jirei-group {
    display: inline-flex;
    gap: 16px;
    align-items: flex-start;
}

.jirei-group img {
    height: auto;
}

.jirei-caption {
    text-align: center;
    font-size: 14px;
    padding: 8px 0 20px;
}

.jirei-flex {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 16px;
}

.jirei-flex__img img {
    display: block;
    max-width: 100%;
    height: auto;
}

.jirei-flex__desc {
    flex: 1;
    font-size: 11pt;
    padding-top: 8px;
}

.jirei-flex__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11pt;
    text-align: center;
}

.jirei-flex__item img {
    display: block;
    height: auto;
}

.jirei-flex__wide {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 11pt;
}

.jirei-flex__wide img {
    width: 349px;
    height: auto;
    display: block;
    margin: 0 auto 4px;
}

.jirei-wide {
    margin-bottom: 24px;
}

.jirei-wide img {
    max-width: 100%;
    height: auto;
}

.jirei-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jirei-desc {
    font-size: 11pt;
    line-height: 1.8;
}

.jirei-item {
    text-align: center;
    font-size: 11pt;
    margin: 12px 0;
}

.jirei-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 4px;
}

/* ----------------------------------------------
   一覧テーブル（ichiran-table）
----------------------------------------------- */
.ichiran-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
    margin: 0 auto;
}

.ichiran-table th,
.ichiran-table td {
    border: 1px solid #808080;
    padding: 5px 8px;
    vertical-align: middle;
}

.ichiran-table th {
    background-color: #dddddd;
    text-align: center;
    font-weight: bold;
}

.ichiran-table td:first-child {
    text-align: left;
}

.ichiran-table td:not(:first-child) {
    text-align: center;
}

.ichiran-note {
    margin: 8px auto;
    width: 90%;
    font-size: 13px;
}

/* ----------------------------------------------
   番号リスト（item-list）
----------------------------------------------- */
.item-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 1em;
    font-size: 11pt;
    line-height: 1.8;
}

.item-list li::before {
    content: attr(data-num) "．";
}

/* ----------------------------------------------
   配置・画像センター系
----------------------------------------------- */
.pic-center {
    text-align: center;
    margin: 12px 0;
}

.pic-center img {
    max-width: 100%;
    height: auto;
}

.pic-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
}

.pic-flex__item {
    text-align: center;
    font-size: 11pt;
}

.pic-flex__header {
    border: 1px solid #009900;
    padding: 4px 8px;
    text-align: center;
    font-weight: bold;
    color: #009900;
    margin-bottom: 6px;
}

.pic4 img,
.pic5 img {
    display: block;
    height: auto;
    margin: 0 auto 4px;
}

.pic4 img { width: 249px; }
.pic5 img { width: 250px; }

/* ----------------------------------------------
   intro-flex（soil-damu）
----------------------------------------------- */
.intro-flex {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 12px 0;
}

.intro-flex__img img {
    display: block;
    max-width: 100%;
    height: auto;
}

.intro-flex__text {
    flex: 1;
}

/* ----------------------------------------------
   仕様・2カラム系
----------------------------------------------- */
.shiyou-flex {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.shiyou-flex__col {
    flex: 1;
}

/* ----------------------------------------------
   各種固有パーツ
----------------------------------------------- */
/* gray-title（halfpipe） */
.gray-title {
    margin: 20px 0 10px;
    font-weight: bold;
    background-color: #d8d8d8;
}

/* kozo-imgs（halfpipe） */
.kozo-imgs {
    text-align: center;
}

/* haichi-flex（halfpipe） */
.haichi-flex {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 12px 0;
}

.haichi-flex img {
    height: auto;
}

/* shokusei-bar（mesh） */
.shokusei-bar {
    background-color: #D0A43D;
    text-align: center;
    font-weight: bold;
    padding: 6px;
    margin: 2rem 0 1rem;
}

/* den-note-box（den） */
.den-note-box {
    border: 1px solid #333;
    padding: 6px 10px;
    font-size: 11pt;
    margin: 8px 0;
    display: inline-block;
}

/* toku-flex内画像テキスト（den-o・mesh） */
.toku-flex__text {
    flex: 1;
}

/* ----------------------------------------------
   fit.asp 固有
----------------------------------------------- */
.fit-gaiyou-imgs {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 12px 0;
}

.fit-gaiyou-imgs img {
    height: auto;
}

.fit-feature-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.fit-feature-table td {
    padding: 10px 14px;
    vertical-align: middle;
    border: none;
}

.fit-feature-table__head {
    background-color: #FFFF80;
    font-weight: bold;
    width: 220px;
    white-space: nowrap;
}

.fit-feature-table__body {
    border-left: 2px solid #e0e0e0;
}

.fit-case-box {
    border: 1px solid #cccccc;
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}

.fit-case-box__head {
    background-color: #DFEFFF;
    color: #0000FF;
    font-weight: bold;
    padding: 8px 12px;
}

.fit-case-box__body {
    padding: 10px 12px;
    text-align: center;
}

.fit-case-box__body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px auto;
}

.fit-case-box__note {
    text-align: center;
    font-size: 13px;
    color: #333;
    margin: 4px 0 8px;
}

.fit-case-arrow {
    color: #0000FF;
    font-weight: bold;
    font-size: 15px;
}

/* ----------------------------------------------
   freeframe.asp 固有
----------------------------------------------- */
.ff-intro {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 12px 0;
}

.ff-intro__list {
    flex: 1;
}

.ff-intro__img {
    flex-shrink: 0;
}

.ff-intro__img img {
    height: auto;
}

.ff-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ff-korei-heading {
    background-color: #BAFF75;
    font-weight: bold;
    padding: 4px 8px;
    margin: 0 0 10px;
    font-size: 14px;
}

.ff-korei-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.ff-korei-grid__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.ff-korei-grid__item img {
    width: 100%;
    height: auto;
}

.ff-korei-large {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ff-korei-large__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

.ff-korei-large__item img {
    height: auto;
}

/* ==============================================
   レスポンシブ（max-width: 768px）
=============================================== */
@media screen and (max-width: 768px) {
    .deko-title-bar,
    .toku-flex,
    .ff-intro,
    .shiyou-flex,
    .jirei-flex,
    .intro-flex {
        flex-direction: column;
    }

    .toku-text {
        width: 100%;
    }

    .toku-side-imgs {
        float: none;
        margin: 0 0 12px;
    }

    /* tejyun-grid */
    .tejyun-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tejyun-grid3 {
        grid-template-columns: 1fr;
    }

    /* haichi-flex */
    .haichi-flex {
        flex-direction: column;
        align-items: center;
    }

    /* ff */
    .ff-intro__img {
        width: 100%;
        text-align: center;
    }

    .ff-korei-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ff-korei-large {
        flex-direction: column;
        align-items: center;
    }

    /* fit */
    .fit-gaiyou-imgs {
        flex-direction: column;
        align-items: center;
    }

    .fit-feature-table__head {
        width: auto;
        white-space: normal;
    }

    /* mesh */
    .toku-flex__img {
        display: block;
        margin: 0 auto;
    }

    /* ichiran-table（topwall） */
    .ichiran-table {
        width: 100%;
        font-size: 12px;
    }
}