/**
 * 製品一覧：条件検索ブロック（新デザイン）＋一覧グリッド／ツールバー／ページネーション
 */

/* ====================================================================
 * 本文コンテナ幅：Figma 2011-27598 は 70/70 ガター（内容幅 1300px）。
 * 共通 .container（max-width:1200rem + padding:0 20rem）だと内容幅 1160px しか
 * 取れず差分が出るため、news-show/works-show と同様に解除する。
 * ==================================================================== */
body.page-products-index .renewal-subpage-body > .container.products-index {
    max-width: none;
    padding-left: 70rem;
    padding-right: 70rem;
    box-sizing: border-box;
}

@media (max-width: 1023.98px) {
    body.page-products-index .renewal-subpage-body > .container.products-index {
        padding-left: 16rem;
        padding-right: 16rem;
    }
}

/* ====================================================================
 * 条件検索：新デザイン（.products-search ベース）
 * ==================================================================== */
.page-products-index .products-index-search {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}

.page-products-index .products-index-search__box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ----- SP：カテゴリ一覧の見出し（Figma 3372-87249） ----- */
.page-products-index .products-category-heading {
    display: flex;
    flex-direction: column;
    gap: 32rem;
    width: 100%;
    margin-bottom: 32rem;
    box-sizing: border-box;
}

.page-products-index .products-category-heading__head {
    display: flex;
    flex-direction: column;
    gap: 14rem;
    width: 100%;
}

.page-products-index .products-category-heading__title {
    display: flex;
    align-items: center;
    min-height: 51rem;
    margin: 0;
    padding: 4rem 0 4rem 16rem;
    border-left: 5rem solid #ff9143;
    box-sizing: border-box;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24rem;
    line-height: 1.8;
    letter-spacing: 1.2rem;
    color: var(--color-neutral-01);
}

.page-products-index .products-category-heading__line {
    width: 100%;
    height: 1px;
    background-color: rgba(217, 217, 217, 0.88);
}

.page-products-index .products-category-heading__desc {
    margin: 0;
    padding: 0 8rem;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16rem;
    line-height: 2;
    letter-spacing: 0.16rem;
    color: var(--color-neutral-01);
}

/* PC：コンテンツ見出し（Figma 3371:74358 — h2 34px ＋ オレンジ左罫 ＋ グレー線 ＋ 補足文） */
@media (min-width: 1024px) {
    .page-products-index .products-category-heading {
        gap: 40rem;
        margin-bottom: 40rem;
    }

    .page-products-index .products-category-heading__head {
        gap: 28rem;
    }

    .page-products-index .products-category-heading__title {
        min-height: 0;
        padding: 4rem 0 4rem 28rem;
        font-size: 34rem;
        line-height: 1.8;
        letter-spacing: 1.36rem;
    }

    .page-products-index .products-category-heading__desc {
        padding: 0;
    }
}

.page-products-index .products-search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40rem;
    width: 100%;
    box-sizing: border-box;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    color: var(--color-neutral-01);
}

/* ----- イントロ（製品を探す + 説明） ----- */
.page-products-index .products-search__intro {
    display: flex;
    flex-direction: column;
    gap: 28rem;
    width: 100%;
}

.page-products-index .products-search__intro-desc {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16rem;
    line-height: 2;
    color: var(--color-neutral-01);
}

/* ----- 検索フォーム本体（オフホワイト枠付きボックス） ----- */
.page-products-index .products-search__view {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32rem;
    padding: 48rem 56rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-bg-02);
    border: 4rem solid #ffffff;
    border-radius: 32rem;
}

/* 「検索条件」見出しは共通コンポーネント c-section-heading--accent-sm に移行
   （Figma「h3 検索・フォーム用」5515:88621。旧 .products-search__view-head* は廃止）*/

/* ----- 行コンテナ ----- */
.page-products-index .products-search__rows {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24rem;
    width: 100%;
}

.page-products-index .products-search__row {
    display: flex;
    align-items: center;
    gap: 40rem;
    width: 100%;
}

.page-products-index .products-search__row-label {
    display: flex;
    width: 110rem;
    flex: 0 0 110rem;
    align-items: center;
    gap: 8rem;
}

.page-products-index .products-search__row-dot {
    display: inline-block;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    background: linear-gradient(90deg, #ff9143 0%, #ff6243 100%);
}

.page-products-index .products-search__row-label-text {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
    white-space: nowrap;
}

.page-products-index .products-search__row-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-neutral-04);
}

.page-products-index .products-search__row-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* ----- ラジオボタン（区分） ----- */
/* ピル本体（.c-field__radio / .c-field__check）は c-field（field.css）に統一。
   ここではフレックス並び（横並び・wrap・gap）のみ管理する。 */
.page-products-index .products-search__radios,
.page-products-index .products-search__checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10rem;
}

.page-products-index .products-search__empty {
    margin: 0;
    padding: 8rem 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-size: 14rem;
    color: var(--color-neutral-02);
}

/* ----- キーワード入力 ----- */
.page-products-index .products-search__keyword {
    display: flex;
    align-items: center;
    height: 56rem;
    padding: 0 32rem;
    background-color: #ffffff;
    border-radius: 28rem;
    box-sizing: border-box;
}

.page-products-index .products-search__keyword-input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
}

.page-products-index .products-search__keyword-input::placeholder {
    color: var(--color-neutral-02);
}

/* ----- ボタン群 ----- */
.page-products-index .products-search__actions {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 24rem;
    margin-top: 8rem;
}

.page-products-index .products-search__reset,
.page-products-index .products-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56rem;
    box-sizing: border-box;
    border-radius: 28rem;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16rem;
    letter-spacing: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.page-products-index .products-search__reset-text,
.page-products-index .products-search__submit-text {
    white-space: nowrap;
}

.page-products-index .products-search__reset {
    gap: 16rem;
    padding: 0 20rem 0 32rem;
    background-color: var(--color-bg-03);
    border: 2rem solid #ffffff;
    color: #000000;
}

.page-products-index .products-search__reset-icon {
    width: 14rem;
    height: 14rem;
    object-fit: contain;
}

.page-products-index .products-search__submit {
    gap: 16rem;
    width: 180rem;
    padding: 0 20rem 0 40rem;
    background-color: var(--color-key);
    border: 2rem solid var(--color-key);
    color: #ffffff;
}

.page-products-index .products-search__submit-icon {
    width: 20rem;
    height: 20rem;
    object-fit: contain;
}

.page-products-index .products-search__reset:hover,
.page-products-index .products-search__submit:hover {
    opacity: 0.85;
}

/* ----- SP 調整（新デザイン） ----- */
@media (max-width: 1023.98px) {
    .page-products-index .products-search {
        gap: 32rem;
        padding-top: 32rem;
    }

    .page-products-index .products-search__intro {
        gap: 14rem;
    }

    .page-products-index .products-search__intro-desc {
        padding: 0 8rem;
        font-size: 16rem;
        letter-spacing: 0.16rem;
        line-height: 2;
        text-align: left;
    }

    .page-products-index .products-search__view {
        gap: 16rem;
        padding: 24rem;
        border-width: 4rem;
        border-radius: 24rem;
    }

    /* 「検索条件」見出しは c-section-heading--accent-sm に移行（SP も Figma 準拠で左寄せ）*/

    /* 行（縦積み・各行下に区切り線） */
    .page-products-index .products-search__rows {
        gap: 16rem;
    }

    .page-products-index .products-search__row {
        flex-direction: column;
        align-items: stretch;
        gap: 16rem;
    }

    .page-products-index .products-search__row-label {
        width: auto;
        flex: 0 0 auto;
    }

    .page-products-index .products-search__row-label-text {
        font-size: 16rem;
        letter-spacing: 0.16rem;
        line-height: 1.5;
    }

    /* カテゴリー：6件超は「さらに表示」で折りたたみ */
    .page-products-index #js-category-checkboxes-sp.is-collapsed .c-field__check:nth-child(n+7) {
        display: none;
    }

    .page-products-index .products-search__more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8rem;
        height: 38rem;
        padding: 0 16rem 0 24rem;
        margin: 0;
        background-color: #ffffff;
        border: 1px solid var(--color-light-orange-01);
        border-radius: 19rem;
        font-family: "Noto Sans JP", Helvetica, sans-serif;
        font-weight: 700;
        font-size: 12rem;
        letter-spacing: 0.6rem;
        line-height: 1.5;
        color: var(--color-neutral-01);
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.15s ease;
    }

    .page-products-index .products-search__more:hover {
        background-color: var(--color-light-orange-02);
    }

    .page-products-index .products-search__more-icon {
        width: 18rem;
        height: 18rem;
        object-fit: contain;
    }

    /* キーワード入力 */
    .page-products-index .products-search__keyword {
        height: 56rem;
        padding: 0 24rem;
        border-radius: 32rem;
    }

    .page-products-index .products-search__keyword-input {
        font-size: 14rem;
        letter-spacing: 0.7rem;
    }

    /* アクション（横並び・センター） */
    .page-products-index .products-search__actions {
        align-self: stretch;
        flex-direction: row;
        justify-content: center;
        gap: 16rem;
        margin-top: 0;
    }

    .page-products-index .products-search__reset {
        height: 52rem;
        gap: 8rem;
        padding: 0 20rem 0 24rem;
        width: auto;
    }

    .page-products-index .products-search__submit {
        height: 52rem;
        gap: 16rem;
        padding: 0 20rem 0 40rem;
        width: auto;
    }

    .page-products-index .products-search__reset-text,
    .page-products-index .products-search__submit-text {
        font-size: 14rem;
        letter-spacing: 0.84rem;
    }
}

/* ====================================================================
 * カテゴリ選択時のレイアウト（.products-search--category-mode）
 *  - 上部のイントロ（製品を探す＋説明）と「検索条件」見出しを廃止
 *  - 代わりにフォーム内に「{カテゴリ名}を条件で絞り込む」見出しを表示
 *  - 区分ラジオは非表示（hidden inputで保持）
 * ==================================================================== */
.page-products-index .products-search--category-mode {
    gap: 0;
}

.page-products-index .products-search--category-mode .products-search__category-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.page-products-index .products-search--category-mode .products-search__category-title {
    margin: 0 0 8rem;
    padding: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24rem;
    letter-spacing: 0.96rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
}

.page-products-index .products-search--category-mode .products-search__category-rules {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.page-products-index .products-search--category-mode .products-search__category-rule {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--color-neutral-04);
}

.page-products-index .products-search--category-mode .products-search__category-rule--accent {
    flex: 0 0 100rem;
    height: 2rem;
    background-color: var(--color-key);
}

@media (max-width: 1023.98px) {
    .page-products-index .products-search--category-mode .products-search__category-head {
        align-items: center;
        gap: 8rem;
        padding-bottom: 16rem;
        border-bottom: 1px solid var(--color-neutral-04);
    }

    .page-products-index .products-search--category-mode .products-search__category-title {
        margin: 0;
        font-size: 20rem;
        letter-spacing: 0.8rem;
        line-height: 1.5;
        text-align: center;
    }

    .page-products-index .products-search--category-mode .products-search__category-rules {
        justify-content: center;
        width: 100%;
    }

    .page-products-index .products-search--category-mode .products-search__category-rule {
        display: none;
    }

    .page-products-index .products-search--category-mode .products-search__category-rule--accent {
        display: block;
        flex: 0 0 100rem;
    }
}

/* ----- 一覧の上余白（PC 96px／SP 48px） ----- */
.page-products-index .products-index__list-section {
    margin-top: 96rem;
}

@media (max-width: 1023.98px) {
    .page-products-index .products-index__list-section {
        margin-top: 48rem;
    }
}

/* ----- 一覧スタック（ツールバー＋シェル） ----- */
.page-products-index .products-list-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40rem;
    width: 100%;
}

@media (max-width: 1023.98px) {
    .page-products-index .products-list-stack {
        gap: 24rem;
    }
}

/* ----- ツールバー（works と同形） ----- */
.page-products-index .products-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 8rem 8rem 8rem 16rem;
    box-sizing: border-box;
    background-color: var(--color-bg-02);
    border-radius: 8rem;
}

.page-products-index .products-list-toolbar__inner {
    display: inline-flex;
    align-items: center;
    gap: 16rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
}

.page-products-index .products-list-toolbar__heading {
    display: inline-flex;
    align-items: center;
    gap: 8rem;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
}

/* PC：ソートバー見出しは 16px（Figma 2983:47675） */
@media (min-width: 1024px) {
    .page-products-index .products-list-toolbar__heading {
        font-size: 16rem;
    }
}

.page-products-index .products-list-toolbar__heading-icon {
    width: 14rem;
    height: 14rem;
    object-fit: contain;
}

.page-products-index .products-list-toolbar__control {
    display: flex;
    align-items: center;
    min-width: 0;
}

.page-products-index .products-list-toolbar__select {
    width: 240rem;
    max-width: 100%;
    padding: 10rem 36rem 10rem 20rem;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
    background-color: #ffffff;
    border: none;
    border-radius: 6rem;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23737373' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12rem center;
    background-size: 12rem 8rem;
    box-sizing: border-box;
}

.page-products-index .products-list-toolbar__select--key-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff6243' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
}

@media (max-width: 1023.98px) {
    .page-products-index .products-list-toolbar {
        padding: 12rem 16rem;
    }

    .page-products-index .products-list-toolbar__inner {
        gap: 12rem;
        flex-wrap: nowrap;
    }

    .page-products-index .products-list-toolbar__heading {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .page-products-index .products-list-toolbar__control {
        flex: 1 1 auto;
        min-width: 0;
    }

    .page-products-index .products-list-toolbar__select {
        width: 100%;
        padding: 10rem 36rem 10rem 20rem;
    }
}

/* ----- 一覧シェル -----
   Figma 3115-82849 / 4592:426348（製品検索結果ページ）: shell は 1300 幅 / bg #fbf9f8 /
   border-radius 40 / 内側パディング 0。カードは 4×307 + gap 24×3 = 1300 で flush。
   SP（390）は左右 16rem の余白を持たせる（PC は flush・SP のみ調整）。*/
.page-products-index .products-list-shell {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--color-bg-01);
    border-radius: 40rem;
}

@media (max-width: 1023.98px) {
    .page-products-index .products-list-shell {
        padding: 16rem;
        border-radius: 24rem;
    }
}


.page-products-index .products-list__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 24rem;
    text-align: center;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-size: 15rem;
    color: var(--color-neutral-02);
}


/* ----- a11y ----- */
.page-products-index .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ====================================================================
 * SP「〇〇トップへ」戻るボタン
 * ==================================================================== */
.page-products-index .products-index__back-to-top {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 48rem;
    margin-bottom: 20rem;
}

/* 戻るボタンの本体は共通 c-button（secondary-back）に委譲。
   旧 __back-btn/__back-icon/__back-text の自前スタイルは撤去し、
   ここではレイアウト（中央寄せ・余白・PC幅）のみ受け持つ。 */

/* PC：戻るボタンを表示（Figma 2011-27598 はページネーション直下に配置） */
@media (min-width: 1024px) {
    .page-products-index .products-index__back-to-top {
        margin-top: 56rem;
        margin-bottom: 0;
    }

    /* 元レイアウトの 354px 幅を踏襲（SP は c-button の min-width:0 で内容幅） */
    .page-products-index .products-index__back-to-top .c-button {
        width: 354rem;
    }
}