/*
Theme Name: echigo
Author: tetrabyte2
Description: 
*/

*{
	margin:0px;
	padding:0px;
	border:0px;
	font-size:15px;
	line-height:2em;
	font-weight:normal;
	box-sizing:border-box;
}
ul,li{
	list-style:none;
}
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
a {
	text-decoration:none;
}
a.linkbutton1{
	background-color:#9f886e;
	color:#fff;
	padding:12px 60px;
}
a.linkbutton1:hover{
	background-color:#c5b8a8;
}
table{
	border-collapse:collapse;
}
img{
	vertical-align:top;
	width:100%;
}
html{
	background-color:#fbfbfb;
}

#loader-bg{
	position: fixed;
	top: 0;
	left: 0;
	right:0;
	bottom:0;
	background-color: #fff;
	z-index: 9000;
	overflow:none;
}

#loader{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #fff;
	z-index: 10000;
}

#loaderWrap{
	position:relative;
}
#loader-bg2{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-color:#fff;
	background-image:url(./img/bg_enter.jpg);
	background-size:cover;
	background-position:0% 50%;
	background-repeat:no-repeat;
	animation: bg_slide 30s linear both;
	z-index:9000;
	overflow:none;
	box-sizing:border-box;
	padding-top:calc(100vh / 6);
}
@keyframes bg_slide {
	  0% { background-position:0% 50%;}
	100% { background-position:100% 50%;}
}
@keyframes fadeIn {
	  0% { opacity: 0;}
	100% { opacity: 1;}
}




#loader-bg2 dl{
	max-width:600px;
	margin:30px auto;
}
#loader-bg2 dl dt{
	width:50%;
	float:left;
	text-align:center;
}
#loader-bg2 dl dd{
	margin-left:50%;
	text-align:center;
}
#loader-bg2 button{
	background-color:none;
}


header#fixedHeader{
	position:absolute;
}

header#moveHeader{
	position:fixed;
}
header{
	width:100%;
	top:0px;
	left:0px;
	z-index:99;
	mix-blend-mode: exclusion;
}
header h1 img{
	width:100%;
}
header dl{
	overflow:hidden;
	margin:20px 50px;
}
header dl dt{
	width:250px;
	float:left;
	padding:4px 0px;
	mix-blend-mode: exclusion;
}
header dl dd{
	width:150px;
	float:right;
	mix-blend-mode: exclusion;
	text-align:right;
}
header dd button, #header dd button span{
	display:inline-block;
	transition:all .4s;
	box-sizing:border-box;
}
header dd button{
	position:relative;
	width:38px;
	height:22px;
	background:none;
	border:none;
	appearance:none;
	cursor:pointer;
}
header dd button span{
	position: absolute;
	left:0;
	width:100%;
	height:2px;
	background-color:#047dc6;
	border-radius:2px;
}
header dd button span:nth-of-type(1) {
	top:0;
}
header dd button span:nth-of-type(2) {
	top:10px;
}
header dd button span:nth-of-type(3) {
	bottom:0;
}
header dd button::after{
	position:absolute;
	left:0;
	bottom:-30px;
	content:'MENU';
	display:block;
	width:100%;
	color:#047dc6;
	font-size:11px;
	letter-spacing:1px;
	text-decoration:none;
	text-align:center;
	white-space:nowrap;
	transition:all .4s;
	font-family:Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
header dd button.active::after {
	content: 'CLOSE';
	bottom: -25px;
}
header dd button.active span:nth-of-type(1) {
	transform: translateY(20px) rotate(-45deg);
}
header dd button.active span:nth-of-type(2) {
	opacity: 0;
}
header dd button.active span:nth-of-type(3) {
	transform: translateY(-20px) rotate(45deg);
}







#mainContents{
}


#topMovie{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#topMovie > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}
#topMovie button{
	position:absolute;
	bottom:50px;
	right:50px;
	background:none;
	width:60px;
	mix-blend-mode:exclusion;
	cursor:pointer;
}
#topMovieLogo{
	height:calc(100vh / 2);
	width:calc(100vh / 2 / 3.5 );
	margin:0px auto;
	margin-top:calc(100vh / 5 );
	z-index:10000;
	mix-blend-mode:exclusion;
	position:relative;
	text-align:center;
	z-index:1;
}
#topMovieLogo p{
	display:none;
	font-family:Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size:3vh;
	letter-spacing:0.1em;
	color:#fff;
	position:absolute;
	top:0px;
	right:-100px;
}
#topMovieLogo img{
	display:none;
	width:100%;
	height:auto;
	margin:0px auto;
	position:absolute;
	top:20px;
	left:0px;
}



.topTopicsWrap{
	max-width:1200px;
	margin:0px auto;
	overflow:hidden;
	padding:50px 0px;
}
.topTopicsWrap h3{
	font-family: Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:24px;
	margin:0px 0px 10px 10px;
	color:#444;
}
#topTopics dt{
	width:100%;
	overflow:hidden;
	position:relative;
}
#topTopics dt img{
	transition:1s all;
	position:absolute;
	top:0px;
	bottom:0px;
	width:auto;
	height:100%;
}
#topTopics dt img:hover{
	transform:scale(1.2,1.2);
	transition:1s all;
}
#topTopics dd{
	margin-top:14px;
}
#topTopics dd a{
	display:block;
	color:#444;
}
#topTopics dd time{
	display:block;
	font-size:11px;
}
.topTopics{
	width:50%;
	float:left;
}
.topTopics ul{
	margin:0px 20px;
}
.topTopics dt{
	padding-top:100%;
}

.topNews{
	margin-left:50%;
}
.topNews dt{
	padding-top:75%;
}

.topNews p{

}
#topTopics dt{
	width:100%;
	overflow:hidden;
	position:relative;
	padding-top:80%;
}


.topNews ul{
	overflow:hidden;
	padding:0px 20px;
	border-left:1px solid #ccc;
}
.topNews ul li{
	width:50%;
	float:left;
}
.topNews ul li dl{
	margin:0px 5px 20px 0px;
}
.topNews ul li:nth-child(even) dl{
	margin:0px 0px 20px 5px;
}


.topAbout{
	height:calc( 100vh - 102px ) ;
	min-height:700px;
	position:relative;
}
.topAboutWrap{
	width:100%;
	margin:0px auto;
	overflow:hidden;
	position:absolute;
	top:100px;
	left:0px;
	right:0px;
	bottom:100px;
}
.topAboutBG{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	height:40%;
	background-repeat:no-repeat;
	background-size:cover;
	z-index:-1;
}
.topAbout dl{
	max-width:1200px;
	height:100%;
	margin:0px auto;
	background-repeat:no-repeat;
	background-size:auto 100%;
}
.topAbout dl dt{
	height:40%;
}
.topAbout dl dt h3{
	width:220px;
	height:220px;
	background-color:#4a3e1b;
	position:relative;
	float:right;
	margin-top:10%;
	margin-right:20px;
	box-shadow:8px 8px 0px #777;
}
.topAbout dl dt h3 strong{
	display:block;
	font-size:60px;
	color:#fff;
	font-family: Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	position:absolute;
	line-height:1.0em;
}
.topAbout dl dt h3 strong:nth-child(1){
	top:40px;
	right:40px;
}
.topAbout dl dt h3 strong:nth-child(2){
	bottom:40px;
	right:40px;
}
.topAbout dl dt h3 strong:nth-child(3){
	top:40px;
	left:40px;
}
.topAbout dl dt h3 strong:nth-child(4){
	bottom:40px;
	left:40px;
}
.topAbout dl dd{
	position:relative;
	height:60%;
	padding:20px 300px 20px 40%;
}
.topAbout dl dd div{
	display: flex;
	font-family: Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:17px;
	overflow-wrap: break-word;
	line-height:2em;
	width:100%;
	height:100%;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	align-items: center;
}
.topAbout dl dd a{
	position:absolute;
	right:10px;
	bottom:10px;
}


.topFeature{
	padding:50px 0px;
}
.topFeatureWrap{
	width:100%;
	max-width:1200px;
	margin:0px auto;
	overflow:hidden;
}
.topFeatureWrap dl{
	width:calc(100% / 3);
	float:left;
}
.topFeatureWrap dt, .topFeatureWrap dd{
	width:100%;
	position:relative;
	background-repeat:no-repeat;
	background-position:50%;
	background-size:cover;
}
.topFeatureWrap dt:before, .topFeatureWrap dd:before{
	content:'';
	display:block;
	padding-top:100%;
}

@media screen and (max-width : 1400px) {
	.topFeatureWrap{
		width:auto;
		max-width:auto;
		margin:0px 100px;
	}
	.topFeatureWrap dl{
		width:100%;
		float:none;
		overflow:hidden;
	}
	.topFeatureWrap dt, .topFeatureWrap dd{
		width:50%;
		float:left;
	}

}

.topFeatureWrap dt span{
	font-family: Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:#fff;
	text-shadow:1px 1px 2px #444;
	font-size:72px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.topFeatureWrap dd{
	background-color:#000;
}
.topFeatureWrap dd div{
	color:#fff;
	width:100%;
	padding:20px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}


.topItem{
	margin-bottom:50px;
}
.topItem ul{
	overflow:hidden;
	background-color:#000;
}
.topItem ul li{
	width:calc(100% / 3);
	height:calc(100vw / 3);
	float:left;
	background-repeat:no-repeat;
	background-position:50%;
	background-size:auto 100%;
}
.topItem ul li div{
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
	text-align:center;
}
.topItem ul li div strong{
	display:block;
	font-family: Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:1.5vw;
	color:#fff;
	padding-top:30%;
}
.topItem ul li div p{
	margin:40px;
	color:#fff;
	text-align:left;
}
.topItem ul li div a{

}


.topEatShop{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50%;
	padding:100px 0px 150px 0px;
}
.topEatShop h3{
	font-family: Noto Serif JP, "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:32px;
	margin:0px 0px 32px 0px;
	color:#444;
	letter-spacing:4px;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	align-items: center;
	line-height:1.5em;
	width:100%;
	display:flex;
}
.topEatShop ul li{
	margin:0px 10px !important;
	line-height:0;
}
.topEatShop ul li, .topEatShop ol li{
	vertical-align:top;
}
.topEatShop p{
	margin-top:40px;
	text-align:center;
}

#mainContents{
	margin-top:120px;
}