@charset "utf-8";
/* CSS Document */
/* ---------------------------------------------------------------------------------
　　物品棚の共通つくりこみ・横リンク用
--------------------------------------------------------------------------------- */


section.racks_buppin { margin: 1rem 0; display: flex; align-items: center; }
section.racks_buppin div.l-racks-img { text-align: center; }
section.racks_buppin div.l-racks-img img{ max-width: 400px; }
section.racks_buppin div.l-racks-txt{ padding: 0 1rem;}
section.racks_buppin h2 { background: transparent; margin: .3em 0 0 0; padding: 0 !important; font-size: 300%;}
section.racks_buppin p { font-size: 80%; }
section.racks_buppin ul { font-size: 85%; margin: 0; padding: 0 0 0.5em 1.5em; }
section.racks_buppin ul li { padding: 4px 0; }

.racks_tan { flex: 0 0 100%; margin-bottom: 2rem; }
.racks_ren { flex: 0 0 100%; }
.racks_tan_ren .image{ text-align: center; }
.racks_tan_ren p { font-size: 90%; padding: .5em 1em; }
.racks_tan_ren ul { display: table; margin: 0 auto; padding: 0; width: 90%; }
.racks_tan_ren ul li { display: table-cell; padding: 0 5px; width: 33%; text-align: center; font-size: 90%; }
.racks_tan_ren ul li a { display: block; padding: 5px 0; color: #FFF; background: #325397 !important; }
.racks_tan_ren ul li a:hover { background: #900 !important;}

p.sekisai { margin: auto; font-size: 90%; min-height: 120px; width: 98%; padding-right: 40%; padding-top: 3rem; line-height: 180%; background: url(https://furniture.offinet.co.jp/wp-content/uploads/2026/05/416_image8.jpg) 75% 0% no-repeat; }
.racks_sekisai { margin-bottom: 3rem; }
.racks_sekisai ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; width: 100%; }
.racks_sekisai ul li { flex: 0 0 50%; padding: 1%; margin: auto; list-style-type: none; }
.racks_sekisai ul li a { border: 1px solid #CCC; display: block; }
.racks_sekisai ul li img { max-width: 100%; }

/*ここから250812追記（タイプ別選び方）*/
.rack_t_txt{ font-size: 90%; padding: 0 1rem 1rem; }
.rack-about-choice{ margin: 0 .5rem 1.5rem; }
.rack-about-choice p{ font-size: 90%; }
.rack-about-choice ul{ font-size: 90%; margin-bottom: 2rem; background-color: #eef0f2; padding: .5rem 1rem .5rem 2rem; }

.rack-variationbox{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-around; width: 100%; margin-bottom: 2rem; padding: 0; list-style-type: none; }
.rack-variationbox .rack-type{ flex: 0 0 98%; display: flex; align-items: flex-start; margin: .3em 0; padding-left: 1rem; }
.rack-variationbox .rack-type h4{ color: #fbfa01; margin: 0; padding: 0; flex: 0 1 30%; text-align: center; border-radius: 5px; border-bottom: 2px solid #999; }
.rack-variationbox .rack-type h4 a{ text-decoration: none; color: #fbfa01; padding: 1.3rem .5rem; height: 5rem; display: block; }
.rack-variationbox .rack-type h4 a:hover{ opacity: .7; cursor: pointer; }    
.rack-variationbox .rack-type ul{ padding: 0 0 0 2rem; flex: 0 1 70%; font-size: 90%; margin: 0 0 2rem; }

.rack-variationbox .type-l h4{ background-color: #e47375; }
.rack-variationbox .type-lm h4{ background-color: #64b0ae; }
.rack-variationbox .type-m h4{ background-color: #3db3d9; }
.rack-variationbox .type-h h4{ background-color: #5f5f85; }
.rack-variationbox .type-l h4:hover,.type-lm h4:hover,.type-m h4:hover, .type-h h4:hover{ opacity: .7; }
.rack-variationbox .type-shapes h4 { height: 5rem; padding-top: 1.8rem; background-color: #eef0f2; color: #333; }
.rack-variationbox .type-shapes h4.r2{ padding-top: 1.3rem; }


@media (min-width:740px){

    .racks_tan { flex: 0 0 50%; border-right: 1px dashed #999; }
    .racks_ren { flex: 0 0 50%;}
    p.sekisai { padding-right: 50%; padding-top: 0; }
    .racks_sekisai ul { flex-wrap: no-wrap; }
    .racks_sekisai ul li { flex: 0 0 33.3%; padding: 1%; }

    .rack-about-choice ul{ padding: 1rem 3rem; }
    
    .rack-variationbox{ flex-direction: row;}
    .rack-variationbox .rack-type{ flex: 0 0 46%; }
    .rack-variationbox .rack-type h4 a{ padding: 1rem; }
    .rack-variationbox .type-shapes h4 { padding-top: 1.7rem; }
    .rack-variationbox .type-shapes h4.r2{ padding-top: 1rem; }
    

}