@charset "utf-8";
/* CSS Document */
.ttl { text-align:center; color:#000; margin:0; padding:0 0 30px 0 }
.ttl h1{ font-size:2.6rem; line-height:3.6rem; margin:0; padding:40px 0 0 0; }
.ttl h4 { font-size:0.9rem; line-height:1.6rem; margin:0; padding:0; }
h4 img{ height:50px; width:auto;}

.text { line-height:2.4rem; padding:30px 0; font-size:1.6rem !important; margin:0 auto; width:80vw;}
.mainttl { background-position:center; background-repeat:no-repeat; background-size:cover; width:100%; margin:100px 0 0 15%; padding:0; clear:both; box-sizing:border-box}
.fshadow{ text-shadow:#333 1px 1px 1px;}
.moviebase{ background:#000; width:100%; padding:100px 4% 40px 20%; box-sizing:border-box}
.movie {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.movie iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.wrapper { position: relative;  padding-bottom: 46.25%; height: 0; overflow: hidden;}
.copy { width:100%; margin:150px 0 0 0; padding:0; color:#FFF; font-size:2.0rem; line-height:5.0rem }
.newslist{ background-color:#E0E0E0; padding:0 0 0 15%; margin:0; width:100%; box-sizing:border-box; border:#E0E0E0 1px solid}
.newslist dl{ font-size:1.6rem; line-height:3.0rem; padding:10px; box-sizing:border-box;border:#E0E0E0 1px solid;
 margin:30px auto; background-color:#FFF; width:90%; display: flex; flex-flow: row wrap;} 
.newslist a{ color:#000}
.newslist dl dt{ width:250px;padding:20px 30px 0 0 ;position: relative; margin:0; font-size:20px; font-weight:bold;
text-align:center; box-sizing:border-box; color:#ED7600 }
.newslist dl dd{ width:calc(100% - 250px); padding:10px 0 0 10px; box-sizing:border-box; margin:0; text-align:left; }
.newslist dl dd a{ padding:0 10px; margin:0; box-sizing:border-box; position:relative; display:block; width:100%;}
.newslist dl dd a p{background-color:#F4F4F4; color:#000; text-align:center; padding:10px 0}
.newslist dl dt::before {content: '';width: 30px;height: 30px;	position: absolute;
border-left: solid 2px #FFCC00;	border-top: solid 2px #FF9900;	top: 0;	left: 0;}
.newsicon{ display: flex; flex-wrap: wrap; font-size:1.4rem !important; line-height:2.0rem !important; }
.newsicon div{ width:33%; padding-bottom:10px;}
.newsicon div img{ width:100%;}
.newsicon a::before{background:#FFF !important; }
.newsicon a::after{background:#FFF !important; }
.newsbt{width:100% !important; text-align:center !important; border:#999 1px solid; padding:10px 0 !important}
.newslist dl dd a::before{content: '';position: absolute;bottom:0; left:0; 
    width:95%; height: 1px;background:#333; transition: all .3s;}
.newslist dl dd a::after{ content: '';position: absolute; bottom:5px; right:5%;
    width: 15px; height:1px;background:#333; transform: rotate(35deg); transition: all .3s;}
.newslist dl dd a:hover::before{  width:100%;}
.newslist dl dd a:hover::after{ right:0;}

.mainttl h2 { margin:0 auto; padding:0; line-height:3.0rem; font-size:1.5rem; text-align:center; color:#000; text-shadow:1px 1px 2px #FFF; width:90vw }
a .bt{ margin:30px auto; padding:10px; line-height:30px; font-size:16px; text-align:center; color:#000; text-shadow:1px 1px 2px #FFF; border:#333 1px solid; text-decoration:none !important;  }
a .bt img{ height:30px !important; width:auto !important; margin:0 auto;}
.w30 { width:30%}
a .bt3{ margin:30px 1vw; padding:10px 0; line-height:3.0rem; font-size:1.6rem; text-align:center; color:#FFF; text-shadow:1px 1px 2px #FFF; border:#FFF 1px solid; text-decoration:none !important; display:block; float:left; }
a .bt1{ margin:30px auto; padding:10px 0; line-height:3.0rem; font-size:1.6rem; text-align:center; color:#FFF; text-shadow:1px 1px 2px #FFF; border:#FFF 1px solid; text-decoration:none !important; width:30vw; display:block; clear:both }
a .bt2{ width:46vw; margin:30px 1vw; padding:10px 0; line-height:3.0rem; font-size:1.6rem; text-align:center; color:#000; text-shadow:1px 1px 2px #FFF; border:#333 1px solid; text-decoration:none !important; display:block; float:left; }

.line3 {width:30vw; }
.line6 {width:14vw; }
.youtube { width:1000px; height:560px; }
.bgblack { background:#000; width:100%; }
.img-box{ width:85%; height: 46vw; overflow: hidden; position:relative; margin:0 0 0 15%}
.img-box>div{ position: absolute; top: 0; left: 0; width: 100%; height: 46vw; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 10; opacity: 0; animation-name: fade; animation-duration: 32s; animation-iteration-count: infinite;}
.snsm a{ width:100%; display:block; padding:5px 0 0 0; font-size:80%}
.tirolian{  max-width:200px; margin:5vh auto !important }
@keyframes fade { 0%{opacity:0;} 20%{opacity:1;} 60%{opacity: 1;} 80%{opacity: 0;}100%{opacity:0; z-index: 0; }}
.img-box>div:nth-of-type(1){ background-image:url(../img/top/imgtop1.jpg);}
.img-box>div:nth-of-type(2){ background-image:url(../img/top/imgtop22.jpg); animation-delay: 8s;}
.img-box>div:nth-of-type(3){ background-image:url(../img/top/imgtop21.jpg); animation-delay: 16s;}
.img-box>div:nth-of-type(4){ background-image:url(../img/top/imgtop2.jpg); animation-delay: 24s;}
@media only screen and (max-width: 1024px) {
.img-box{ width:100%; height: 46vw; margin:0}
}
@media only screen and (max-height:700px) {.menu{ overflow:scroll}.img-box{ height:calc(46vw + 50px); top:50px }
.img-box>div{ }
}
/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */

@media only screen and (max-width: 1024px) {
.moviebase{ display:none}
.menu { display:none}
input[type="checkbox"].bellows + ul{ max-height: 0;  overflow: hidden;}
input[type="checkbox"].bellows:checked + ul{ max-height: 95vh;overflow:scroll}
.newslist dl dd{ width:100%;} 
.newslist{ padding:0; background:#FFF}
.newslist dl{ width:90%; background-color:#F7F7F7; } 
.mainttl { margin:60px 0 0 0;}
.ttl { text-align:left; color:#09C; margin:10px !important; padding:0;  border-bottom:#096 1px solid; border-left:#096 3px solid; background:#FFF !important}
.ttl h1{ font-size:1.4rem; line-height:2.0rem; margin:0; padding:5px 0 0 5px; }
.ttl h4 { font-size:0.9rem; line-height:1.6rem; margin:0; padding:0 0 0 40px; }
.maintext ul { display:block; }
.maintext ul li { display:block; margin:30px 0 }
.maintext1 { width:100%; text-align:center }
.maintext1 img { width:50%; }
.maintext2 { width:100%; }
.info li dl { clear:none !important; float:left  }
.ttlshop { color:#09F !important}
.ttlshop a { color:#000 !important}
.newsttlbase{ width:calc(100% - 250px) !important;}
.newsttl{ display:none}

}
@media print, screen and (max-width: 768px) {
.newslist dl dt{ width:100%; font-size:1.6rem; line-height:2.0rem; padding:10px 0  }
.newsttlbase{ width:100% !important;}
.newslist dl dd{ width:100%; font-size:1.2rem; line-height:2.0rem;  }
h2 { line-height:2.4rem; font-size:1.3rem;  }
a .bt{ line-height:2.0rem; font-size:1.3rem; width:80% !important  }
h2 { text-align:left}
.info li { width:90vw; display:block; vertical-align:top; clear:both; margin:0 auto; border:none }
.newsicon div a{height:100%}
.newsicon{ width:100% !important}.newsicon div{ width:100%; font-size:1.2rem !important; line-height:2.0rem !important;}
.newsicon div img{ width:200px;object-fit:cover; float:left; margin:0 10px 0 0}
.movie{ display:none}
}
 
@media print, screen and (max-width: 424px) {
.newsicon div{ width:97%; padding:10px 0}.newsicon div img{ width:100%; margin:10px; float:clear;}
}
   
.filter { position: absolute; background:url(../img/top/pattern.png) repeat; top:0; left:0; margin:0 ; padding:0; width:100%; height:100%; min-height:500px; border:#333 1px solid; z-index:10 }
.ttlshop { color:#FFF !important}
.ttlshop a { color:#FFF !important}

.news { color:#000; background-color:#FFFFFF; margin:0; padding:20px 0 !important; font-size:1.2rem; line-height:2.6rem; text-align:left }
.news dt { float:left; display:block; font-weight:bold; margin:0; padding:0 0 0 50px; width:27%;  border-right:#999 1px dotted; box-sizing:border-box}

.borderl { border-left:#CCC 1px solid}
.border_r { border-right:#CCC 1px solid}
/* PRmovie */
#prmovie {position: fixed;bottom: 20px;right: 130px;font-size: 77%;}
#prmovie a {background:#369;text-decoration: none;color: #fff;width: 100px;	padding: 30px 0;
	text-align: center;display: block;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
#prmovie a:hover {	text-decoration: none;	background:#F93;}
.backnum{clear:both; display:block; border:#FCC 3px double; background:#069; color:#FFF; margin:20px auto; padding:20px; box-sizing:border-box; text-align:center; width:90%}
@media only screen and (max-width: 1024px) {
.wrapper { display:none}
.mobiletop { display:block; position:relative; height:300px; width:100vw; text-align:center; background:#FFF  }
.mobilelogo { height:60px; display:block; background:#FFF; text-align:left }
.mobiletopbg { position:absolute; top:0; left:0; width:100%; height:300px; }
#prmovie { display:none;}
.slider img { width:214px; }

}