@charset "UTF-8";

.nanohana {width:675px; float:left;}
.nanohana h2 {display: block;font-size: 14px;font-weight: bold;}
.nanohana h3 {display: block;font-size: 16px;font-weight: bold;width: 100%;box-sizing: border-box;padding: 10px 30px;background: #FFF200;margin: 30px 0 20px;}
.nanohana h4 {display: inline-block;font-size: 21px;font-weight: bold;padding: 7px 10px;background: #FF0000;color: #fff;margin-top: 20px;}
.nanohana img {max-width: 100%;}
.nanohana p {font-size: 14px;padding-top: 20px;line-height: 24px;}
.nanohana p a {font-weight: bold;color: #0000FF;text-decoration: underline;}
.nanohana ul {display: flex;margin: 20px 0 50px;}
.nanohana ul li {display: block;width: 240px;text-align: center;font-size: 16px;font-weight: bold;padding: 15px 0;background: #FFD500;}
.nanohana ul li:first-child {margin-right: 40px;}
.nanohana ul li a {display: block;color: #4D4D4D;}
.nanohana ul li a:hover {opacity: 0.7;}

.nanohana .day-calendar p {font-size: 16px;font-weight: bold;padding: 0 0 20px;}
.nanohana .day-calendar table {width: 100%;max-width: 400px;margin: 0 auto;}

#booking-form {width: 675px;float: left;}
#booking-form #action-button button {padding: 10px 20px;background: #767676;border: 0;color: #fff;border-radius: 5px;}


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

.nanohana {width:100%; float: none;}
#booking-form {width:100%; float: none;}

}
@media only screen and (max-width:667px){

.nanohana h4 {font-size: 18px;}

}
@media only screen and (max-width:520px){

.nanohana h4 {font-size: 14px;margin: 20px auto 0;}
.nanohana ul {display: block;margin: 20px auto 50px;width: 240px;}
.nanohana ul li:first-child {margin-right: 0px;margin-bottom: 20px;}

}
@media only screen and (max-width:375px){

}
@media only screen and (max-width:320px){

}