/* CSS Document */

html,body{
font-size:min(1.25vw, 10px) !important;
}

img{
max-width: 100%;
height: auto;
}

br.sp{
display: none;
}


#rental_boat .wrap{
max-width: 800px;
padding: 1rem;
margin: auto
}

#rental_boat header{
margin-bottom: 20px;
}

#rental_boat h2{
margin-bottom: 20px;
text-align: center;
}

#rental_boat table{
width: 100%;
font-size: 1rem;
}

#rental_boat caption{
position: relative;
padding-bottom: 10px;
font-size: 2em;
font-weight: bold;
text-align: center;
}

#rental_boat caption small{
position: absolute;
right: 0;
bottom:0.1em;
font-size: 80%;
font-weight: normal;
}

#rental_boat table:not(:nth-of-type(1)) caption{
padding-top: 30px;
}

#rental_boat table tr:nth-of-type(1),
#rental_boat table tr:nth-of-type(2),
#rental_boat table tr:nth-of-type(5),
#rental_boat table tr:nth-of-type(6),
#rental_boat table tr:nth-of-type(9),
#rental_boat table tr:nth-of-type(10),
#rental_boat table tr:nth-of-type(13),
#rental_boat table tr:nth-of-type(14),
#rental_boat table tr:nth-of-type(17),
#rental_boat table tr:nth-of-type(18),
#rental_boat table tr:nth-of-type(21),
#rental_boat table tr:nth-of-type(22),
#rental_boat table tr:nth-of-type(25),
#rental_boat table tr:nth-of-type(26){
background-color: #f4f4f4;
}

#rental_boat table:nth-of-type(3) tr:nth-of-type(1),
#rental_boat table:nth-of-type(4) tr:nth-of-type(1),
#rental_boat table:nth-of-type(4) tr:nth-of-type(2){
background-color: #fff;
}


#rental_boat td{
padding: 1rem;
vertical-align: top;
}



#rental_boat .photo{
border-bottom: 1px solid #ccc;
width: 180px;
vertical-align: middle;
}

#rental_boat .photo div{
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;
color: #fff;
height: 10.8rem;
font-size: 1.8em;
font-weight: bold;
}

#rental_boat .name{
color: #02619E;
font-size: 1.8em;
font-weight: bold;
}

#rental_boat .price{
color: #f00;
width: 12em;
font-size: 1.8em;
font-weight: bold;
}

#rental_boat .name,
#rental_boat .price{
padding-bottom: 0;
line-height: 1.1;
}

#rental_boat tr:first-child .photo,
#rental_boat tr:first-child .name,
#rental_boat tr:first-child .price{
border-top: 1px solid #ccc;
}

#rental_boat table:last-child{
margin-bottom: 2em;
}

#rental_boat table:last-child td{
padding: 1em 1em;
}

#rental_boat table:nth-of-type(3) tr:last-child td,
#rental_boat table:last-child tr:last-child td{
border-bottom: 1px solid #ccc;
padding: 1em;
}

#rental_boat .price > small:last-child{
color: #000;
font-weight: normal;
}


#rental_boat .spec,
#rental_boat .comment{
border-bottom: 1px solid #ccc;
font-size:1.4em;
}

#rental_boat .comment .num{
display: inline-block;
background-color: #376BB0;
color: #fff;
padding: 0.2em 1em 0.3em 1em;
margin-top: 0.3em;
font-weight: bold;
}

@media screen and (max-width:768px) {

br.sp{
display: block;
}

#rental_boat table{
font-size: 1.5rem;
}

#rental_boat .name,
#rental_boat .price{
padding-bottom: 0;
line-height: 1.4;
font-size: 1.7em;
vertical-align: middle;
}

#rental_boat .photo{
width: 26vw;
}

#rental_boat .price{
width: 8em;
}

#rental_boat .price > small{
display: block;
}

}