@charset "utf-8";

/*  common
----------------------------------------------------------------------------------------------------------- */
h2{font-family: 'Philosopher', sans-serif;
    font-weight: 700;
    font-size: clamp(20px,8vw,130px);
    color: #fff;
    text-align: center;
    width: 95%;
    margin: 0 auto 3% auto;

    text-shadow: -1px 1px 10px #7e5344, -1px 1px 10px #7e5344;
}




.gallery-container{width: 100%; padding-top: 200px;
background:url(../img/common/common-cont-bg.jpg) #e8dcc6 top center no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;
padding-bottom: 5%;

}

.movie-box{width: 95%; margin: 0 auto; justify-content: center;}
.movie-box li{width: calc(30% - 6px); padding: 1%;margin: 0.5%; position: relative; border: solid 3px #fef0da; background:#685348; border-radius: 30px;}
.movie-box li img{border-radius: 20px 20px 0 0;}

.movie-name{ color: #fef0da; text-align: center; font-size: clamp(18px,5vw,30px); padding: 3% 0 1% 0;}

.img-box{width: 95%; max-width: 1000px; margin: 0 auto; justify-content: center;}
.img-box li{width: calc(30% - 6px); padding: 1%; margin: 0.5%; position: relative; border: solid 3px #fef0da; background:#685348; border-radius: 30px;}
.img-box li img{border-radius: 20px;}


.img-box2{width: 95%; max-width: 1200px; margin: 0 auto; justify-content: center;}
.img-box2 li{width: calc(20% - 6px); margin: 0.5%; position: relative; border: solid 3px #685348; background:#685348; border-radius: 10px;}
.img-box2 li img{border-radius: 10px;}


.img-box3{width: 95%; margin: 0 auto; justify-content: center;}
.img-box3 li{width: calc(30% - 6px); padding: 1%; margin: 0.5%; position: relative; border: solid 3px #fef0da; background:#685348; border-radius: 30px;}
.img-box3 li img{border-radius: 20px;}

.wp-link-name{width: 95%; margin: 0 auto; font-size: clamp(10px,2vw,13px); margin-top: 3%; color: #e8dcc6; text-align: center;}

.wp-link-name a{width: 29%; background:#ff6732; color: #fff; display:block; text-align: center;  border-radius: 30px; padding: 3% 1.5%; margin:0.5%;}

.wp-link-name a:link { color: #fff; text-decoration: none;}
.wp-link-name a:visited { color: #fff; }
.wp-link-name a:hover { color: #fff; opacity:0.65;}
.wp-link-name a:active { color: #fff; }


@media screen and (max-width: 1200px) {
.wp-link-name{font-size: clamp(10px,3.5vw,20px);}
.wp-link-name a{width: 100%; border-radius: 30px; padding: 3% 0; margin:0.5% 0;}

}


@media screen and (max-width: 768px) {
.movie-box li{width: calc(98% - 6px); padding: 1%; position: relative; border: solid 3px #fef0da; background:#685348; border-radius: 10px;}
.movie-box{width: 85%; }

.img-box li{width: calc(98% - 6px); padding: 1%; border: solid 3px #fef0da; background:#685348; border-radius: 10px;}
.img-box li{width: calc(40% - 6px); padding: 1%; margin: 0.5%; position: relative; border: solid 3px #fef0da; background:#685348; border-radius: 30px;}
.img-box li img{border-radius: 20px;}


.img-box2{width: 95%; max-width: 1000px; margin: 0 auto; justify-content: center;}
.img-box2 li{width: calc(30% - 6px); margin: 0.5%; position: relative; border: solid 3px #685348; background:#685348; border-radius: 10px;}
.img-box2 li img{border-radius: 10px;}

.img-box3{width: 95%; margin: 0 auto; justify-content: center;}
.img-box3 li{width: calc(98% - 6px); padding: 1%; margin: 0.5%; position: relative; border: solid 3px #fef0da; background:#685348; border-radius: 30px;}
.img-box3 li img{border-radius: 20px;}

.gallery-container{width: 100%; padding-top: 15%;
background:url(../img/common/common-cont-bg.jpg) #e8dcc6 top center no-repeat;
-moz-background-size: auto 100%;
background-size: auto 100%;


}

.wp-link-name{margin-top: 1.5%;}

h2{ font-size: clamp(20px,10vw,80px);}

}