@charset "UTF-8";
/* CSS Document */

/* 中身-モバイルファースト======================================================================================================== */

#list li{
margin-bottom: 20px;
text-align: center;
}
#list li a{
display: block;
text-decoration: none;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
color: #fff;
position: relative;
}
#list li .title{
display: block;
background-color: rgba(0,0,0,.7);
padding: 5px 0;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#list li .title h4{
font-size: 4.2vw;
letter-spacing: .2em;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

#list li .photo{
aspect-ratio: 4/3;
background-color: #999;
text-align: center;
}
#list li .photo img{
aspect-ratio: 4/3;
object-fit: contain;
}

#list li .text{
padding: 5px;
background-color: #535965;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
font-size: 3vw;
line-height: 1.4;
}
#list li .text .price{
}
#list li .text .price dd span{
font-size: 5.5vw;
}
#list li .text .train dd .st{
font-size: 4vw;
}
#list li .text .train dd .n{
font-size: 5.5vw;
}



/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 671px){
#list ul{
display: flex;
flex-wrap: wrap;
}
#list li{
width: 560px;
margin: 0 20px 40px;
}
#list li .title h4{
font-size: 30px;
}
#list li .photo img{
max-width: 100%;
height: auto;
}

#list li .text{
padding: 10px;
font-size: 18px;
}
#list li .text .price dd span{
font-size: 52px;
line-height: 1;
}
#list li .text .train dd .st{
font-size: 36px;
line-height: 1;
}
#list li .text .train dd .n{
font-size: 52px;
line-height: 1;
}

/* バス便 */
#list li .text .train dd.bus .st{
font-size: 24px;
}
#list li .text .train dd.bus .n{
font-size: 40px;
}





}