@charset "utf-8";

/* 共通パーツ */
html, body{
	width:100%;
	height:100%;
	font-family: "NotoSansJP";
	font-weight: 400;
}
html{overflow-y: scroll;font-size: 625%;}

body{
	position: relative;
	width: 100%;
	color: #fbf9e5;
	background-color: #281413;
	font-size: .14em;
	font-weight: 400;
	line-height: 1.6em;
	word-wrap: break-word;
	z-index: -10;
}

img{
	max-width: 100%;
	height: auto;
    display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	image-rendering: auto;
}
/* chrome opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	body {
		image-rendering: -webkit-optimize-contrast;
	}
}
svg {vertical-align:bottom;max-width: 100%;}
img[src$=".svg"] {width: 100%;transform:translate(0,0);}

iframe[name="google_conversion_frame"] { position: absolute; top: 0; }

section{
	position: relative;
	margin: 0 auto;
}

a:link {color: #fbf9e5;text-decoration: none;}
a:visited {color: #fbf9e5;text-decoration: none;}
a:hover{cursor: pointer;text-decoration: none; color: #EEEFC8; transition: all .6s ease-out;}

.sp{ display: block; }
.pc{ display: none; }

/* loadong */
#loading {
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
	background: #281413;
	background: linear-gradient(150deg,#281413 0%, #000000 100%);
	opacity: 1;
	transition: opacity .3s ease-out;
	z-index: 20000;
}
#loading.LoadOut{opacity: 0;}
#loading .loader {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	width: 100px;
	height: 100px;
}

#loading .loader div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: .8;
}

#loading .loader .one {
	border-top: 1px solid #d6b67c;
	animation: rotate-left 1s linear infinite;
}

#loading .loader .two {
	border-right: 1px solid #cd9d35;
	animation: rotate-right 1s linear infinite;
}

#loading .loader .three {
	border-bottom: 1px solid #f7edd5;
	animation: rotate-right 1s linear infinite;
}

#loading .loader .four {
	border-left: 1px solid #965f29;
	animation: rotate-right 1s linear infinite;
}

@keyframes rotate-left {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


#wrap{position: relative;margin: 0 auto;width: 100%; height:auto;opacity: 0;overflow-x: hidden;}
#wrap.display{animation: dispWrap 0.9s  ease-in 0s 1 normal forwards;}
@keyframes dispWrap {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.both{clear:both;}
.nodisp{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	height: 0;
}
.center{text-align: center;}
.right{text-align: right;}
.strong{font-weight: 700;}
.underline{text-decoration: underline !important;}

#header{
	position: relative;
	margin: 0 auto;
	max-width:640px;
	padding-top: 4%;
}
/* keyvisual */
#keyvisual{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 0;
	padding-top:105.46875%;
	background-image:url("../t_img/main.jpg?t=1111");
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.btnArea{
	position: relative;
	margin: 20px auto 0 auto;
	width: 70%;
	max-width:200px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap:0 5px;
	opacity:0;
	z-index: 10;
}
.btnArea.display{animation: dispWrap 0.8s  ease-in 0s 1 normal forwards;}
.btnArea .btn{
	position: relative;
	margin: 0;
	width: calc(33.333% - 4px);
	cursor: pointer;
	 transition: all .4s ease-out;
}
.btnArea .btn:hover{opacity: 0.6;}

footer{
	position: relative;
	margin: 100px auto 0 auto;
	padding-bottom: 30px;
	opacity:0;
}
footer.display{animation: dispWrap 0.8s  ease-in 0s 1 normal forwards;}
footer ul{
	position: relative;
	margin: 0 auto;
	width: 60%;
	max-width:180px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap:0 30px;
}
footer ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 15px);
	cursor: pointer;
	 transition: all .4s ease-out;
}
footer ul li:hover{opacity: 0.6;}

/* youtube */
.movieWrap{
    position: relative;
    margin: 0 auto;
	background-color: #000000;
	width: 100%;
	max-width: 960px;
	overflow: hidden;
}
.movie{
	position: relative;
	margin:0 auto;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.movie iframe, .movie img{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

#popup{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	display: none;
	background-color: rgba(0,0,0,0.9);
	overflow: scroll;
	z-index: 100;
}
#popup .closeWin{
	position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
	overflow: visible;
	z-index: 101;
}
#popup .modalCont{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width: calc(100% - 20px);
	max-width: 960px;
	border: solid 2px;
	border-image: linear-gradient(135deg,rgba(248, 250, 187, 1) 9%, rgba(84, 57, 21, 1) 100%) 1;
	z-index: 103;
}
#popup .close{
	position: absolute;
	top:-40px;
	right: -10px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 104;
}
#popup .close span{
	position:absolute;
	top:16px;
	left:0;
	width:100%;
	height:1px;
	background-color:#fbf9e5;
}
#popup .close span:nth-child(1){transform: rotate(45deg);}
#popup .close span:nth-child(2){transform: rotate(-45deg);}

/* ----- pc ----- */
@media screen and (min-width: 799px) and (orientation: landscape) {

	.sp{ display: none; }
	.pc{ display: block; }
    
    body{font-size: .16em;}
	
	#header{padding-top: 0;}
	
	.btnArea{
		position: fixed;
		bottom:20px;
		right: 20px;
		margin: auto;
		max-width:220px;
		padding-bottom: 0;
	}
	
	footer{
		margin: 70px auto 0 auto;
		padding-bottom: 20px;
	}
	footer ul{
		max-width:290px;
		gap:0 60px;
	}
	footer ul li{width: calc(50% - 30px);}
	
	#popUp .close{
		width: 60px;
		height: 60px;
	}
}

/* ----- movie ----- */
@media screen and (min-width: 799px) and (max-height: 650px) {
	#popup .modalCont{
		position:absolute;
		top:40px;
		transform: translate(-50%, 0);
	}
}