@charset "UTF-8";
/* CSS Document */
#month h3.rec::before{content:'RECCOMEND';font-size:1.1em !important;}
.top {height: 55vh;background-position:center center;background-repeat:no-repeat;background-size:cover;position:relative;}
.top > div {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;}
.top > div h2 {color:#fff;font-weight:bold;font-size:1.75em;padding-bottom:3%;}
.top > div p {color:#fff;font-weight:500;font-size:1.1em;line-height:2em;}
.top#gallery01 {background-image:url("img/top1.jpg");}
.top#gallery02 {background-image:url("img/top2.jpg");}
.top#gallery03 {background-image:url("img/top3.jpg");}
.top#gallery04 {background-image:url("img/top4.jpg");}
.top#gallery05 {background-image:url("img/top5.jpg");}
.top#gallery06 {background-image:url("img/top6.jpg");}
.top#gallery06 {background-image:url("img/top7.jpg");}
.top#pac01 {background-image:url("img/p-top1.jpg");}
.top#pac02 {background-image:url("img/p-top2.jpg");}
.top#pac03 {background-image:url("img/p-top3.jpg");}
.top#pac04 {background-image:url("img/p-top4.jpg");}
@media screen and (max-width:780px) {
.top > div h2 {font-size:1.55em;padding-bottom:8%;}
.top > div p {font-size:.875em;line-height:1.75em;}
}
#menu {max-width:1500px;margin:0 auto;background-color:#efefef;text-align:center;}
#menu > div.flex-box {justify-content:center;padding:20px 0;align-items:center;}
#menu > div.flex-box > div {flex:1;font-family:din-condensed, sans-serif;font-size:1.6em;}
#menu > div.flex-box > ul {flex:4;font-family:source-han-sans-japanese, sans-serif;align-items:center;}
#menu ul.flex-box > li {width:calc(15.555% - 20px);border-left:1px solid #333;}
#menu ul.flex-box > li a {display:block;color:#333;font-weight:600;transition:.3s ease;}
#menu ul.flex-box > li a:hover{color:#00a29a;text-decoration:underline;}
@media screen and (max-width:1100px) {
#menu ul.flex-box > li {width:calc(15.555% - 5px);font-size:13px;}
}
@media screen and (max-width:1023px) {
#menu ul.flex-box > li {width:calc(15.555% - 10px);font-size:16px;}
}
@media screen and (max-width:780px) {
#menu > div.flex-box {flex-wrap:wrap;}
#menu > div.flex-box > div {flex:none;width: 100%}
#menu > div.flex-box > ul {flex:none;width: 100%;justify-content:space-around;flex-wrap:wrap;margin-top:30px;}
#menu ul.flex-box > li {width:calc(33.333% - 20px);border-left:0px solid #333;margin-bottom:20px;}
}
@media screen and (max-width:590px) {
#menu ul.flex-box > li {width:calc(50% - 20px);border-left:0px solid #333;margin-bottom:20px;}
}
#pic_list ul {justify-content:space-between;flex-wrap:wrap;}
#pic_list ul li {width: calc(33.3333% - 40px);margin-bottom:8%;border-bottom:1px solid #ccc;}
#pic_list ul li div {overflow: hidden;}
#pic_list ul li img {width:100%;height:auto;transition:.4s ease;}
#pic_list ul li h4 {font-size:1.25em;font-weight:500;line-height:1.35em;padding:5% 0;transition:.4s ease;text-align:justify;}
#pic_list ul li :hover img {transform:scale(1.05,1.05);opacity:.7;}
#pic_list ul li :hover h4 {color:#00a29a;}
@media screen and (max-width:1800px) {
#pic_list .inner {margin:0 5%;}
}
@media screen and (max-width:1400px) {
#pic_list ul li h4 {font-size:1.1em;line-height:1.2em;}
}
@media screen and (max-width:1200px) {
#pic_list ul li {width:calc(50% - 40px);margin-bottom:5%;border-bottom:1px solid #ccc;}	
}
@media screen and (max-width:780px) {
#pic_list ul li h4 {font-size:1em;line-height:1.2em;}
}
@media screen and (max-width:590px) {
#pic_list ul {justify-content:space-around;}
#pic_list ul li {width:calc(100% - 40px);border-bottom:1px solid #ccc;margin-bottom:15%;}
#pic_list ul li h4 {font-size:.875em;line-height:1.2em;padding:5% 0 15%;}
}