@charset "utf-8";

/* 商品カタログコンテナ */
.product-catalog-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 商品アイテム外枠 */
.product-item {
    margin-bottom: 30px;
    border-radius: 10px;
    border: 1px solid #ccc;
    /* border-top: 1px solid #ccc; */
    overflow: hidden;
    background: #fff;
    /* box-shadow: 3px 3px 10px rgba(0,0,0,0.05); */
}

/* 常時表示エリア */
.product-main {
    padding: 25px;
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.product-title {
    margin: 0;
    color: #282f88;
    border-bottom: 2px solid #282f88;
    padding-bottom: 5px;
    font-size: 1.3em;
    flex-grow: 1;
}

/* TDSダウンロードボタン */
.tds-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #93c64c, #0068b6);
    color: #fff !important;
    /* テーマのリンク色を上書き */
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
    transition: 0.3s;
}

.tds-button:hover {
    opacity: 0.9;
}

/* 特長・用途のグリッド */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.info-box h5 {
    margin: 0 0 8px 0;
    border-left: 4px solid #282f88;
    padding-left: 10px;
    font-size: 1em;
}

.info-box:last-child h5 {
    border-color: #0068b6;
}

.info-text {
    font-size: 0.95em;
    color: #444;
    margin: 0;
    line-height: 1.6;
}

/* スペック開閉ボタン */
.spec-toggle-btn {
    width: 100%;
    padding: 12px;
    background: #f8f9fa;
    border: none;
    border-top: 1px solid #eee;
    cursor: pointer;
    color: #666;
    font-weight: bold;
    transition: 0.3s;
}

.spec-toggle-btn:hover {
    background: #e9ecef;
}

/* 折りたたみスペック表 */
.spec-content {
    display: none;
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
}

.spec-table-wrapper {
    overflow-x: auto;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    min-width: 600px;
}

.spec-table th {
    border: 1px solid #eee;
    padding: 10px;
    background: #fdfdfd;
    color: #777;
    font-weight: normal;
}

.spec-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
}


/* フィルターナビゲーション */
.product-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ddd;
}

.filter-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
}

/* 選択されているボタンのスタイル */
.filter-btn.active {
    background: #93c64c;
    /* スクショに近い緑色 */
    color: #fff;
    border-color: #93c64c;
}

/* フィルタリング用の制御 */
.product-item {
    display: block;
    /* デフォルトは表示 */
}

.product-item.is-hidden {
    display: none;
    /* 選択されていない分類を隠す */
}


/* 分類ナビゲーション全体の枠 */
.filter-navigation-wrapper {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-label {
    width: 100%;
    font-weight: bold;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 5px;
}

.filter-btn.active {
    background: #282f88;
    /* 大分類は青 */
    color: #fff;
    border-color: #282f88;
}

/* 中分類ボタンが選択された時の色（緑） */
.filter-btn.mid-active {
    background: #93c64c;
    color: #fff;
    border-color: #93c64c;
}


/* ナビゲーション全体の枠 */
.filter-navigation-wrapper {
    background: #fdfdfd;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 30px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-label {
    width: 100%;
    font-weight: bold;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 5px;
}

/* 大分類（青） */
.main-btn.active {
    background: #282f88;
    color: #fff;
    border-color: #282f88;
}

/* 中分類（緑） */
.mid-btn.active {
    background: #93c64c;
    color: #fff;
    border-color: #93c64c;
}

/* 小分類（グレー/黒） */
.small-btn.active {
    background: #0068b6;
    color: #fff;
    border-color: #0068b6;
}

.product-item.is-hidden {
    display: none;
}



/* スペック全体のコンテナ */
.spec-content {
    display: none;
    /* 初期は非表示 */
    padding: 20px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-top: none;
}

/* スペック項目の並び */
.spec-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* 項目間の余白 */
}

/* 個別のスペックボックス */
.spec-item {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.85em;
}

/* ラベル部分（粘度、配合比など） */
.spec-label {
    background: #f2f2f2;
    padding: 6px 12px;
    border-right: 1px solid #ddd;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}

/* 値の部分 */
.spec-value {
    padding: 6px 12px;
    color: #333;
    background: #fff;
    white-space: nowrap;
    /* 改行させたくない場合はこれ */
}



/* スペック全体のコンテナ（中身に合わせる設定） */
.spec-content {
    display: none;
    padding: 20px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-top: none;
}

/* ★ここがポイント：tableタグを使わず、表のような挙動をさせる */
.spec-table-container {
    display: inline-table;
    /* 中身の量に合わせて全体の幅が決まる */
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid #ddd;
    min-width: 300px;
    /* あまりに小さくなりすぎないよう */
}

/* 行の設定 */
.spec-row {
    display: table-row;
}

/* セルの設定（ラベル） */
.spec-label {
    display: table-cell;
    background: #f2f2f2;
    padding: 8px 15px;
    border: 1px solid #ddd;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    /* ラベルは改行させない */
    width: 1%;
    /* ラベル幅を中身ギリギリに詰める */
}

/* セルの設定（値） */
.spec-value {
    display: table-cell;
    padding: 8px 15px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    /* 値が長すぎる場合はここで改行を許容 */
}

/* 画像の親要素 */
.product-image-wrapper {
    margin-bottom: 15px;
    text-align: left;
    /* 左寄せ（中央ならcenter） */
}

/* 画像自体のサイズ制限 */
.product-image-wrapper img {
    max-width: 100%;
    /* 親の幅を超えない */
    max-height: 200px;
    /* 高くなりすぎないように制限（お好みで） */
    height: auto;
    border-radius: 4px;
    /* 角を少し丸くすると今風です */
    border: 1px solid #eee;
}


@media screen and (max-width:768px) {
    .tds-button {
        width: 150px;
        text-align: center;
        justify-content: center;
    }
}


/* カテゴリーラベルのスタイル */
.product-category-labels {
    font-size: 0.7rem;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cat-label {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.cat-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: #8aa0bf;
    font-size: 0;
    line-height: 1;
}

.cat-sep::before {
    content: ">";
    font-size: 0.8rem;
    font-weight: 700;
    transform: translateY(-0.5px);
}

/* 大分類の色 */
.cat-sep-lg {
    background: #282f88;
}

/* 中分類の色 */
.cat-sep-mid {
    background: #93c64c;
}

/* 小分類の色 */
.cat-sep-sml {
    background: #0068b6;
}


/* 製品名との間隔調整 */
.product-title {
    margin-top: 5px !important;
}

@charset "utf-8";

/* =========================
   商品カタログ全体
========================= */

.product-catalog-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================
   商品カード
========================= */

.product-item {
    display: block;
    margin-bottom: 30px;
    border-radius: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
    background: #fff;
}

.product-item.is-hidden {
    display: none;
}

.product-main {
    padding: 25px;
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.product-title {
    margin: 5px 0 0 !important;
    color: #282f88;
    border-bottom: 2px solid #282f88;
    padding-bottom: 5px;
    font-size: 1.5em;
    font-weight: bold;
    flex-grow: 1;
}

/* =========================
   TDSボタン
========================= */

.tds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #93c64c, #0068b6);
    color: #fff !important;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
    transition: 0.3s;
}

.tds-button:hover {
    opacity: 0.9;
}

/* =========================
   特長・用途
========================= */

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.info-box h5 {
    margin: 0 0 8px 0;
    border-left: 4px solid #282f88;
    padding-left: 10px;
    font-size: 1em;
}

.info-box:last-child h5 {
    border-color: #0068b6;
}

.info-text {
    font-size: 0.95em;
    color: #444;
    margin: 0;
    line-height: 1.6;
}

/* =========================
   スペック開閉
========================= */

.spec-toggle-btn {
    width: 100%;
    padding: 12px;
    background: #f8f9fa;
    border: none;
    border-top: 1px solid #eee;
    cursor: pointer;
    color: #666;
    font-weight: bold;
    transition: 0.3s;
}

.spec-toggle-btn:hover {
    background: #e9ecef;
}

.spec-content {
    display: none;
    padding: 20px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-top: none;
}

/* 旧table用が残っていても崩れにくいように残す */
.spec-table-wrapper {
    overflow-x: auto;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    min-width: 600px;
}

.spec-table th {
    border: 1px solid #eee;
    padding: 10px;
    background: #fdfdfd;
    color: #777;
    font-weight: normal;
}

.spec-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
}

/* 現在使っているdiv構成のスペック */
.spec-table-container {
    display: inline-table;
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid #ddd;
    min-width: 300px;
}

.spec-row {
    display: table-row;
}

.spec-label {
    display: table-cell;
    background: #f2f2f2;
    padding: 8px 15px;
    border: 1px solid #ddd;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    width: 1%;
}

.spec-value {
    display: table-cell;
    padding: 8px 15px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
}

/* =========================
   画像
========================= */

.product-image-wrapper {
    margin-bottom: 15px;
    text-align: left;
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 200px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
}

/* =========================
   フィルターナビ
========================= */

.filter-navigation-wrapper {
    background: #fdfdfd;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 30px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-label {
    width: 100%;
    font-weight: bold;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 5px;
}

.filter-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
}

.main-btn.active {
    background: #282f88;
    color: #fff;
    border-color: #282f88;
}

.mid-btn.active {
    background: #93c64c;
    color: #fff;
    border-color: #93c64c;
}

.small-btn.active {
    background: #0068b6;
    color: #fff;
    border-color: #0068b6;
}

/* =========================
   分類ラベル
========================= */

.product-category-labels {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cat-label {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.cat-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: #8aa0bf;
    font-size: 0;
    line-height: 1;
}

.cat-sep::before {
    content: ">";
    font-size: 0.8rem;
    font-weight: 700;
    transform: translateY(-0.5px);
}

.cat-sep-lg {
    background: #282f88;
}

.cat-sep-mid {
    background: #93c64c;
}

.cat-sep-sml {
    background: #0068b6;
}

/* =========================
   小分類説明ブロック
========================= */


/* =========================
   小分類説明ブロック
========================= */

.small-category-lead-block {
    margin-bottom: 0px;
    padding-bottom: 30px !important;
}

.small-category-lead-block.is-hidden {
    display: none;
}

.small-category-main {
    padding: 28px 34px;
    border: 1px solid #d7e4f3;
    border-left: 8px solid #1f5fa8;
    border-radius: 18px;
    background: linear-gradient(135deg, #f4f9ff 0%, #eef6ff 45%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(31, 95, 168, 0.08);
}

/* 上段：左コンテンツ / 右画像 */
.small-category-top {
    display: block;
    margin-bottom: 22px;
}

.small-category-top:not(:has(.small-category-top__image)) {
    grid-template-columns: 1fr;
}

.small-category-top__content {
    width: 100%;
    min-width: 0;
}

.small-category-top__image {
    width: 100%;
    max-width: 400px;
    margin: 0 0 24px 0;
}

/* 分類ラベル */
.small-category-lead-block .product-category-labels {
    margin-bottom: 14px;
}

/* タイトル + TDS */
.small-category-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(40, 47, 136, 0.12);
}

.small-category-title {
    margin: 0 !important;
    padding-bottom: 0;
    border-bottom: none;
    color: #282f88;
    font-size: 2rem;
    line-height: 1.35;
    flex: 0 1 auto;
}

/* 
.small-category-title::after {
    content: "について";
    margin-left: 0.2em;
    font-weight: 700;
} */

/* small_cat_desc */
.small-category-desc {
    margin: 0;
    color: #29445f;
    line-height: 1.9;
    font-size: 0.98rem;
}

/* 画像 */
.small-category-image-wrapper {
    margin-bottom: 0;
    text-align: left;
}

.small-category-image-wrapper img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    max-height: none;
    margin-left: 0;
}

/* 下段 特長・用途 */
.small-category-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
}

.small-category-info-grid .info-box {
    padding: 20px 18px 16px;
    border: 1px solid #dce7f5;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.small-category-info-grid .info-box h5 {
    margin: 0 0 12px;
    padding-left: 12px;
    border-left: 4px solid #282f88;
    color: #282f88;
    font-size: 1.35rem;
    font-weight: 700;
}

.small-category-info-grid .info-text {
    color: #23384d;
    line-height: 1.9;
}

/* 小分類説明側TDS */
.small-category-tds {
    min-width: 110px;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid #1f5fa8;
    border-radius: 6px;
    background: #fff;
    color: #1f5fa8 !important;
    box-shadow: 0 4px 10px rgba(31, 95, 168, 0.08);
    white-space: nowrap;
    flex: 0 0 auto;
}

.small-category-tds:hover {
    background: #f2f8ff;
    color: #1f5fa8;
}

.small-category-lead-block+.product-item {
    margin-top: 12px;
}

/* =========================
   SP
========================= */

@media screen and (max-width: 768px) {
    .small-category-main {
        padding: 22px 18px;
        border-left-width: 6px;
    }

    .small-category-top {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 18px;
    }

    /* 画像を先に */
    .small-category-top__image {
        order: -1;
        max-width: 100%;
        width: 100%;
    }

    .small-category-image-wrapper {
        text-align: left;
    }

    .small-category-image-wrapper img {
        max-width: 100%;
        margin-left: 0;
    }

    .small-category-heading {
        gap: 12px;
        margin-bottom: 12px;
        justify-content: space-between;
    }

    .small-category-title {
        font-size: 1.6rem;
    }

    .small-category-desc {
        font-size: 0.95rem;
    }

    .small-category-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .small-category-info-grid .info-box h5 {
        font-size: 1.15rem;
    }

    .small-category-top__content {
        width: 100%;
    }
}

/* =========================
   SP
========================= */

@media screen and (max-width: 768px) {
    .tds-button {
        width: 150px;
        text-align: center;
        justify-content: center;
    }
}