@charset "utf-8";

/*
順序逆にしたい時は以下利用して
#content_katei{
Display:flex;
flex-wrap:wrap;
flex-direction:column-reverse;
}
#content_katei .kateibox{
Width:100%;
}
*/

#content_katei .kateibox{
Padding:10px 10px 10px 10px;
Background:#f3f3f3;
Margin-bottom:10px;
}
#content_katei .kateibox img{
Margin:0 auto 10px;
Display:block;
Width:100%;
}
#content_katei .kateibox img.sikaku{
max-width:400px;
}
#content_katei .kateibox img.tate{
max-width:350px;
}
#content_katei .kateibox img.hosotate{
max-width:250px;
}
#content_katei .kateibox img.gokubosotate{
max-width:150px;
}
#content_katei .kateibox img.yoko{
max-width:450px;
}
#content_katei .kateibox .txt .days{
Border-bottom:2px solid #666;
Margin-bottom:10px;
Font-weight:bold;
Color:#626262;
}
#content_katei .kateibox .txt .days .number{
Padding:5px 8px;
Border-radius:3px;
Font-size:16px;
background: linear-gradient(to bottom, #999, #333);
Color:white;
Margin-right:7px;
letter-spacing:0em;
}
#content_katei .kateibox .txt img{
Display:inline;
Width:auto;
Margin:0px 0px 0px 0px;
}
@media screen and (min-width: 900px) {
                                #content_katei .kateibox{
                                Display:flex;
                                flex-direction:row-reverse;
                                align-items:flex-start;
                                }
                                #content_katei .kateibox img{
                                Margin-bottom:0px;
                                object-fit: contain;
                                }
                                #content_katei .kateibox .txt{
                                Margin-left:10px;
                                Margin-right:10px;
                                Width:100%;
                                font-size:14px;
                                }
                                #content_katei .kateibox .txt .days{
                                Margin-left:-10px;
                                font-size:16px;
                                }
}





#detail_list ul{
Display:flex;
Flex-wrap:wrap;
Justify-content:space-between;
}
#detail_list  li{
flex-basis:19%;
Margin-bottom:5px;
}
#detail_list  li.double{
flex-basis:39.5%;
}
#detail_list  ul li a{
Display:block;
Background:white;
Border:1px solid #ccc;
padding:5px 5px;
}
#detail_list  ul li a:hover{
Border:1px solid #eee;
}
#detail_list  ul a img{
object-fit: contain;
width: 100%;
height: 70px;
}
@media screen and (min-width: 768px) {
                                #detail_list li{
                                flex-basis:10.5%;
                                Margin-bottom:5px;
                                }
                                #detail_list  li.double{
                                flex-basis:21.8%;
                                }
}
@media screen and (min-width: 1200px) {
                                #detail_list  li{
                                flex-basis:8%;
                                }
                                #detail_list  li.double{
                                flex-basis:16.3%;
                                }
}