@charset "UTF-8";

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#mainmovie {margin:0; padding:0; width:100%; height: 100vh; position: relative;}
.movieblock {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow:hidden;
    opacity: 1;                   /* 要素の透明度 */
    pointer-events: auto;         /* マウスイベントをオン */
    width: 100%;                  /* 横幅 100% */
    height: 100%;                 /* 縦幅 100% */}
.movieblock video {position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;}
.movieblock.active{
    opacity: 0;           /* 要素の透明度 */
    pointer-events: none; /* マウスイベントをキャンセル */
}
.moviejpg {opacity: 0;           /* 要素の透明度 */
    pointer-events: none; /* マウスイベントをキャンセル */
	overflow: hidden}
.moviejpg.active{
    position: absolute;           /* 子要素 */
    opacity: 1;                   /* 要素の透明度 */
    pointer-events: auto;         /* マウスイベントをオン */
    width: 100%;                  /* 横幅 100% */
    height: 100%;                 /* 縦幅 100% */
	animation: fadeIn 3s cubic-bezier(0.33, 0.5, 0.68, 1) 1 forwards;
top: 0;
	right: 0;
	bottom: 0;
	left: 0;}
.moviejpg {width:100%; height:100%}

#muteBtn {background:url("../img/index/sound_off.png") no-repeat 0 0; width:90px; height:25px; background-size:contain; display:inline-block; position:absolute}
#muteBtn.on {background:#000 url("../img/index/sound_on.png") no-repeat 0 0; background-size:contain;}
#muteBtn.off {display: none}

#skipBtn {background:url("../img/index/skip.png") no-repeat 0 0; width:90px; height:25px; background-size:contain; display:inline-block; position:absolute}
#skipBtn a {display:block; width: 100%; height:100%;}


@media screen and (min-width: 768px) {
.headnavi { position:fixed; z-index:999; top:0;background:#5e5e5e url(../img/common/back_gray.jpg) center top; width:100%; margin:0 auto; opacity: 0;}
.headnavi.active {opacity:100;}
	
.pass_box {border:solid 2px #CCC; padding:20px 80px; display: inline-block; margin:50px auto 40px; font-size:24px; text-align: left}
.pass_box input {font-size:20px;}
.pass_box label {display: inline-block; width: 150px; text-align: center}
.pass_box form {margin:0; padding:0;}
.pass_box button {width: 160px; font-size:18px; padding:5px 0; margin:10px 0 0 180px; background:#428580; border:solid 1px #CCC; border-radius:5px; color:#FFF}

.entry_btn {margin-bottom:100px}
.entry_btn p {font-size:18px; margin:0 auto 20px; line-height:2.2em}

.moviejpg {background:url("../img/index/main_fn.jpg?0623") no-repeat center center; background-size:cover}
#muteBtn {z-index:1000; right:20px; top:20px;}
#skipBtn {z-index:1000; right:10px; bottom:20px;}

.information {padding-top:64px; margin-top:0px; font-weight:400; width:100%;}
.information h4 {font-family: 'Noto Serif JP', serif; font-weight:300; font-size:20px; letter-spacing:5px;}
.information dl {width:1080px; padding:0 0 0 200px; text-align:left;font-size:16px; margin-top:0px; box-sizing: border-box;}
.information dl dt{
	clear:both;
	padding: 3px 0;
	float:left;
	width:145px;
	}
.information dl dd{
margin:0;
padding: 3px 0 ;
display:block;
float:left;
width:650px;
}
.information dl:after {content:""; display:block; clear:both; height:80px;}

.colum_L {float:left; width:440px; height:320px; margin:50px 50px 0 0; padding:0 40px; font-size:15px; line-height:2.0em; background: rgba(255,255,255,.8); color:#333; text-align:left}
.colum_R {float:right; width:440px; height:320px; margin:50px 0 0 0px; padding:0 40px; font-size:15px; line-height:2.0em; background: rgba(255,255,255,.8); color:#333; text-align:left}
.colum_L p,.colum_R p {text-align:center; font-size:34px; letter-spacing:5px; padding:50px 0 35px 0; margin:0; color:#372809;}
.colum_p {height:400px; padding-top:40px;}

.photo1_back {background:url(../img/index/photo1.jpg?20260518) no-repeat center center; background-size:cover;}
.photo2_back {background:url(../img/index/photo2.jpg) no-repeat center center; background-size:cover;}
.photo3_back {background:url(../img/index/photo3.jpg) no-repeat center center; background-size:cover;}
.btn_more {
    display: block;
    background:url(../img/index/bt_more.jpg) no-repeat center top;
	width:215px;
	height:45px;
    position: relative;
	text-indent: -9999px;
	margin:30px 0 0 114px;
}
.btn_more a {
    position: relative;
    color: #FFF;
    z-index: 3;
    display: block;
    padding: 20px 0;
}
.btn_more:hover:before {opacity: 0;}
.btn_more:hover:after {right: 30px;}
.btn_comingsoon {background:url(../img/index/bt_comingsoon.jpg) no-repeat center top;}

.note {font-size:11px; text-align:left; margin:50px 0 0 0; line-height:1.5em;}
}

@media screen and (max-width: 767px) {
.headnavi { position:fixed; z-index:999; top:0; width:100%; margin:0 auto; opacity: 0;}
.headnavi.active {opacity:100;}

.pass_box {border:solid 2px #CCC; padding:20px 0; display:block; margin:50px 20px 40px; font-size:17px; text-align: center}
.pass_box input {font-size:17px;}
.pass_box label {display: inline-block; width:100px; text-align: center; font-size:16px}
.pass_box form {margin:0; padding:0;}
.pass_box button {width: 120px; font-size:15px; padding:5px 0; margin:15px auto 0; background:#428580; border:solid 1px #CCC; border-radius:5px; color:#FFF}

.entry_btn {margin-bottom:50px;}
.entry_btn p {font-size:15px; margin:0 10px 20px}
.entry_btn_img {text-align: center}
.entry_btn img {width: 300px; max-width:80%}

#muteBtn {z-index:980; left:10px; top:calc(100vh - 100px);}
#skipBtn {z-index:980; right:10px; top:calc(100vh - 100px);}
	
.moviejpg.active{overflow:hidden}
.moviejpg {background:url("../img/index/main_fn_sp.jpg?0623") no-repeat center center; background-size:cover}
	
.information { padding-top:30px; margin:0px 0 0 0; text-align:center;}
.information h4 {font-family: 'Noto Serif JP', serif; font-weight:300; font-size:17px; letter-spacing:2px;}
.information img {height:18px;}
.information dl {text-align:left; margin:10px 10px 50px; padding:10px 15px; line-height:1.2em; font-size:15px; height:200px; overflow-y: scroll; background: rgba(255,255,255,.1);}
.information dl dt{padding:0;display:block; font-weight:bold;}
.information dl dd{margin:0 0 20px 0;padding:0;display:block;}
.information a {text-decoration:underline;}
	
.colum_L,.colum_R {margin:0 10px; font-size:13px; line-height:1.75em; padding:20px 20px 30px 20px; background: rgba(255,255,255,.8); color:#333;}
.colum_L p,.colum_R p {text-align:center; font-size:22px; letter-spacing:5px; padding:10px 0 10px 0; margin:0; color:#372809;}
.colum_p {padding:40px 0 20px 0;}

.photo1_back {background:url(../img/index/photo1.jpg?20260518) no-repeat 10% center; background-size:cover; padding:50px 0;}
.photo2_back {background:url(../img/index/photo2.jpg) no-repeat 82% center; background-size:cover; padding:50px 0;}
.photo3_back {background:url(../img/index/photo3.jpg) no-repeat center center; background-size:cover; padding:50px 0;}

.notes {font-size:11px; margin-top:50px;}

.btn_more {
    display: block;
    background:url(../img/index/bt_more.jpg) no-repeat center center;
	background-size:contain;
	width:190px;
	height:40px;
    position: relative;
	text-indent: -9999px;
	margin:30px auto 0 auto;
}
.btn_movie {
	background:url(../img/index/bt_movie.jpg) no-repeat center center;
	background-size:contain;
	margin:10px auto 0 auto;
}
.btn_more a {
    position: relative;
    color: #FFF;
    z-index: 3;
    display: block;
    padding: 20px 0;
}
.btn_comingsoon {background:url(../img/index/bt_comingsoon.jpg) no-repeat center top;}

.note {font-size:10px; text-align:left; margin:20px 0 50px 0; line-height:1.4em;}

.footer_btn_top {opacity:0; display: none}
.footer_btn_top.active {opacity:100; display:block}
}