form#filterForm{
    background-color: var(--main-color-paleorange);
    padding: 20px 0;
    user-select: none;
}
/* .filterCategories li {
    display: flex;
    align-items: center; 
    padding: 5px;
    margin-right: 10px; 
}

.filterCategorie li label {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: bold;
    background: #faf9f9;
    border: 1px solid #ccc;
    color: #aeaeae;
    transition: all 0.5s 0s ease;
}

.filterCategorie li input {
    appearance: none;
} */

.filterCategories {
    text-align: left;
    inline-size: fit-content;
    margin-inline: auto;
}

.filterCategorie {
    padding: 20px 0;
    display: flex;
    flex-wrap: nowrap; /* 改行しないように設定 */
    align-items: flex-start; /* アイテムを上揃え */
}

.filterCategorie + .filterCategorie {
    border-top: #AEAEAE solid 1px;
}

.filterCategorieName {
    font-weight: bold;
    margin-left: 10px;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
    width: 80px;
    min-width: 80px;
    flex-grow: 0;
}

/* 各フィルターのラベル群に対してフレックス */
.filterCategorieInputs {
    display: flex;
    flex-wrap: wrap;  /* ここでラベルが折り返す */
    gap: 5px;
    flex-grow: 1;
    max-width: 100%;
}

/* チェックボックス非表示 */
.filterCategorieInputs input {
    appearance: none;
}

/* ラベルのスタイル（共通） */
.filterCategorieInputs label {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: bold;
    background: #faf9f9;
    border: 1px solid #ccc;
    color: #aeaeae;
    transition: all 0.5s ease;
    white-space: nowrap;
}

/* ul.filterCategorie li input[type="checkbox"]:checked + label {
    background: var(--main-color-orange);
    border: 1px solid var(--main-color-darkorange);
    color: var(--color-white);
} */
ul.filterCategorie li input[type="checkbox"]:checked ~ label {
    background: var(--main-color-orange);
    border: 1px solid var(--main-color-darkorange);
    color: var(--color-white);
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 画面が縮小された際でも、filterCategorieName と filterCategorieInputs は同じ行に並ぶ */
@media screen and (max-width: 1020px) {
    .filterCategorie {
        flex-direction: row;
    }

    .filterCategorieName {
        margin-bottom: 10px;
        margin-left: 25px;
    }

    /* ラベルが折り返しされた場合でも、filterCategorieInputs は縮小せず、横並びを維持 */
    .filterCategorieInputs {
        flex-basis: auto;
        margin-top: 0;
    }
}


/* .subject-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 1em;
}
.subject-filters label {
    white-space: nowrap;
} */


/* ul.filterCategorie li input[type="checkbox"]:checked~label {
    background: var(--main-color-orange);
    border: 1px solid var(--main-color-darkorange);
    color: var(--color-white);
} */




input.btn_search{
    background: var(--main-color-orange);
    color: white;
    margin-top: 20px;
    border: none;
    border-radius: calc( 1px / 0 );
    /* padding: 15px; */
    padding: 10px;
    width: 300px;
    cursor: pointer;
    margin-bottom: 70px;
}

input.btn_search:hover{
    opacity: 0.5;
}

/* コンテナテキスト */
.l-tiles_area{
    /* container-type: inline-size; */

    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラム */
    gap: 20px;
    /* flex-wrap: wrap;
    justify-content: space-evenly; */
}

@media (max-width: 768px) {
    .l-tiles_area {
        grid-template-columns: repeat(2, 1fr); /* 2カラムに */
    }
}
@media (max-width: 480px) {
    .l-tiles_area {
        grid-template-columns: 1fr; /* 1カラムに */
    }
}

.l-tile {
    width: 100%;
}

/* .l-tile {
    width: calc(96% / 3);
    min-width: 340px;
} */
/* .l-tile + .l-tile{
    margin-left: 1rem;
} */

/* タイル */
.tile_flex{
    display: flex;
    flex-direction: column;
    background-color: white;
    border: #ddd solid 1px;
    border-radius: 15px;
    padding: 20px;
    min-height: 500px;

    img{
        width: 200px;
    }

}

/* ul タグの間隔を調整 */
ul.l-tiles_area {
    margin-bottom: 60px;
}

.sub_icons{
    text-align: left;
    margin-top: 10px;
}

.c-sub_icon{
    border-radius: calc(1px/0);
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    margin-right: 4px;
    margin-top: 4px;
}
.c-sub_icon.icon-kokugo{
    background-color: red;
}
.c-sub_icon.icon-sansu{
    background-color: rgb(0, 94, 255);
}
.c-sub_icon.icon-rika{
    background-color: rgb(45, 170, 0);
}

.c-sub_icon.icon-shakai{
    background-color: rgb(255, 119, 0);
}
.c-sub_icon.icon-eigo{
    background-color: rgb(255, 196, 0);
}
.c-sub_icon.icon-homeEconomics{
    background-color: rgb(254, 0, 207);
}
.c-sub_icon.icon-doutoku{
    border: 1px solid;
    color: black;
}
.c-sub_icon.icon-health{
    background-color: rgb(0, 220, 254);
    /* border: 1px solid;
    color: black; */
}
.c-sub_icon.icon-pe{
    border: 1px solid;
    color: black;
}
.c-sub_icon.icon-music{
    border: 1px solid;
    color: black;
}
/* .c-sub_icon.icon-sonota{
    background-color: gray;
} */

.information {
    padding-left: 20px;
    text-align: left;
}

.product_title{
    font-weight: bold;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

dl.text_flex {
    display: flex;
    padding-left: 1px;
    padding-bottom: 3px;
    font-size: 15px;
    margin-top: 10px;
}



.text_flex dt {
    word-break: keep-all;
}

.text_flex dt.price_spacing { margin-right: 30px; }
/* .text_flex dd.price_spacing { padding-left: 25px; } */

/* .text_flex dt.publication_spacing { margin-right: 20px; }
.text_flex dd.publication_spacing { padding-left: 20px; } */

.text_flex dt.kinds_spacing { margin-right: 30px; }
/* .text_flex dd.kinds_spacing { padding-left: 25px; } */

.text_flex dt.grade_spacing { margin-right: 30px; }
/* .text_flex dd.grade_spacing { padding-left: 10px; } */

#results-count{
    padding-bottom: 20px;
    padding-top: 30px;
    font-size: 17px;
}

dt.price_spacing[data-size="large"] {
    writing-mode: horizontal-tb; /* フォントサイズが大きくなっても横書き */
}

dt.price_spacing {
    writing-mode: horizontal-tb; /* 横書きに変更 */
    transform: none;             /* 縦書きに影響するtransformをリセット */
    display: inline-block;       /* 横並びにする */
    font-size: 15px ;
}
@media (min-width: 10px) {
    dt.price_spacing {
        writing-mode: horizontal-tb;
    }
}

/* 追加する文字に対するスタイル */
p.additional-text {
    font-size: 12px;
    color: #333;
    margin-top: 10px;
}

/* リンクに対するスタイル */
a.details-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #FF7510;;
    text-decoration: underline;
}

/* .details-link:hover {
    text-decoration: underline;
} */

.result {
    opacity: 0;
    transform: translateY(100px);
    animation-name: fadeIn;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.add {
    text-align: left;
    padding: 0 50px;
    font-size: 19px;
}



/* 
    画面幅が縮小された際の指定
    尚、後述のルールが優先されるため順番を変えるべからず
*/
@media (max-width: 1169px) and  (min-width: 768px) {
    .tile_flex {
        min-height: 565px;
    }
    .information{
        padding-left: 10px;
    }
    .text_flex dt.grade_spacing{
        margin-right: 15px;
    }
    .text_flex dt.kinds_spacing{
        margin-right: 15px;
    }
    .text_flex dt.price_spacing{
        margin-right: 15px;
    }
}
@media (max-width: 768px) and (min-width: 481px) {
    .tile_flex {
        min-height: 460px;
    }
    dl.text_flex{
        font-size: 12px;
    }
    dt.price_spacing {
        font-size: 12px;
    }
    .information {
        padding-left: 0px;
    }
    .text_flex dt.grade_spacing{
        margin-right: 10px;
    }
    .text_flex dt.kinds_spacing{
        margin-right: 10px;
    }
    .text_flex dt.price_spacing{
        margin-right: 10px;
    }
    p.additional-text{
        font-size: 10px;
    }
    a.details-link{
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .tile_flex {
        min-height: 0px;
    }
    .information {
        padding-left: 0px;
    }
    dl.text_flex{
        font-size: 12px;
    }
    dt.price_spacing {
        font-size: 12px;
    }
    p.additional-text {
        font-size: 10px;
    }
    a.details-link {
        font-size: 10px;
    }
    .text_flex dt.grade_spacing{
        margin-right: 15px;
    }
    .text_flex dt.kinds_spacing{
        margin-right: 15px;
    }
    .text_flex dt.price_spacing{
        margin-right: 15px;
    }
}