@charset "UTF-8";
aside {
margin-top: 0;
}
#infoReservation h3 {
color: #7f7f7f;
text-align: center;
max-width: 1000px;
margin: 30px auto auto;
padding: 0 10px;
font-size: 140%;
}
#infoReservation ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1280px;
width: 90%;
margin: 8vh auto 0;
}
#infoReservation ul li:nth-of-type(1) a {
background: url(../img/studio/kurume-rbn.svg) no-repeat;
background-size: contain;
background-position: center;
}
#infoReservation ul li:nth-of-type(2) a {
background: url(../img/studio/yanagawa-rbn.svg) no-repeat;
background-size: contain;
background-position: center;
}
#infoReservation ul li:nth-of-type(3) a {
background: url(../img/studio/hakata-rbn.svg) no-repeat;
background-size: contain;
background-position: center;
}
#infoReservation ul li a {
padding: 25px 20px 30px 20px;
width: 93%;
display: block;
color: #fff !important;
text-shadow: 1px 1px 0 #fff;
z-index: 1;
position: absolute;
left: -10px;
}
#infoReservation ul li a:hover {
opacity: 1;
}
#infoReservation ul li a span {
position: relative;
width: 100%;
display: block;
text-shadow: 1px 1px 2px rgb(0,0,0,0.35);
font-weight: 600;
}
#infoReservation ul li:nth-child(3) a span {
text-shadow: 1px 1px 3px rgb(0,0,0,0.35), -1px -1px 3px rgb(0,0,0,0.35);
}
#infoReservation {
background: url(../img/common/bg_check.svg) 80px top;
padding: 10vh 0;
margin-top: 0;
}
#infoReservation ul li {
width: 31%;
margin-right: 3.5%;
box-sizing: border-box;
background-color: #fff;
position: relative;
z-index: 2;
border-radius: 0 15px 15px;
font-size: 1.5vw;
box-shadow: 10px 10px 0px 0px #9cd8d8;
overflow: hidden;
}
#infoReservation ul li:nth-of-type(3n+3) {
margin-right: 0;
}
#infoReservation ul li:last-of-type {
margin-right: 0;
}
#infoReservation ul li::before {
content: "";
background: #fff;
border-radius: 0 0px 15px 10px;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
#infoReservation ul li figure, #infoReservation ul li figcaption {
margin-bottom: 1.5rem;
text-align: center;
}
#infoReservation ul li figure {
padding: 0 1rem 0 0;
}
#infoReservation ul li figure img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
}
#infoReservation ul li figcaption .btnBlank {
width: 80%;
margin: auto;
background: #9CD8D8;
position: relative;
border-radius: 30px;
font-size: 1.2rem;
line-height: 1.5;
text-shadow: none;
padding: .5rem;
left: 0;
}
#infoReservation ul li figcaption .btnBlank:hover {
opacity: 0.5;
}

@media screen and (max-width: 1280px){
#infoReservation ul li {
font-size: 2vw;
}
}

@media screen and (max-width: 1024px){
#infoReservation ul li {
font-size: 2.4vw;
}
}

@media screen and (max-width: 812px){
#infoReservation ul {
justify-content: center;
}
#infoReservation ul li {
font-size: 1.5rem;
}
#infoReservation ul li {
width: 46%;
margin-right: 8%;
margin-bottom: 30px;
}
#infoReservation ul li:nth-of-type(3n+3) {
margin-right: 8%;
}
#infoReservation ul li:nth-of-type(2n+2) {
margin-right: 0;
}
#infoReservation ul li:last-of-type {
margin-right: 0;
}
}

@media screen and (max-width: 640px){
#infoReservation ul li {
font-size: 3.5vw;
}
}

@media screen and (max-width: 480px){
#infoReservation ul li {
font-size: 6vw;
}
#infoReservation ul li {
width: 100%;
margin-right: 0 !important;
}
#infoReservation ul li:nth-of-type(3n+3) {
margin-right: 0;
}
#infoReservation ul li figcaption .btnBlank {
width: 200px;
}
}

@media screen and (min-width: 480px){
.revert {
display: none;
}
}