@charset "UTF-8";

/*----------------------------base-----------------------------------*/

body {
	font-family: 'Oswald', 'Noto Sans JP', "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

body{
	background: #000;
}
svg{
	display: block;
	height: auto;
	max-width: 100%;
	fill: #fff;
}
img{
	flex-shrink: 0;
}
::selection{
	background: #000;
	color: #ed1c24;
	text-shadow: none;
}
::-moz-selection{
	background: #000;
	color: #ed1c24;
	text-shadow: none;
}
sup{
	font-size: 0.5em;
	line-height: 1;
	vertical-align: middle;
	margin-right: 5px;
}
#o{
	overflow: hidden;
	width: 100%;
	position: relative;
}
.yt{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
.yt iframe{
	display: block;
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
}
.cap{
	font-size: 1.4rem;
	line-height: 1.4;
}

/*----------------------------link etc--------------------------------*/

a,
input,
button{
	outline: 0;
}
input::-moz-focus-inner,
button::-moz-focus-inner{
	border: 0;
}
a{
	text-decoration: none;
	color: #000;
}
a.lnk{
	color: #ed1c24;
}

/*----------------------------load-----------------------------------*/

#load{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	background: #100;
}
#load .loader{
	height: 100%;
	width: 100%;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.8s ease-in-out;
	animation: load 2s ease forwards;
	opacity: 0;
}
@keyframes load{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
#load .loader2{
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	width: 50px;
	height: 50px;
	animation: b1 3s infinite steps(2, start);
	mix-blend-mode: color-dodge;
}
#load .loader2>div{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: spin 4s ease infinite;
}
#load .loader2>div:before,
#load .loader2>div:after{
	opacity: 0.9;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 2px solid #d00;
	border-bottom-color: transparent !important;
	border-radius: 100%;
	animation: spin 0.7s linear infinite;
}
#load .loader2>div:after{
	border-color: #ff0;
	animation: spin 1s linear infinite;
}
@keyframes spin{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/*----------------------------delay-----------------------------------*/

.delay{
	opacity: 0;
	transform: translate(0,80px); 
	transition: 1.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.delayActive{
	opacity: 1.0;
	transform: translate(0,0); 
	transition: 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: 0 !important;
	filter: blur(0) saturate(100%) !important;
}

/*----------------------------header--------------------------------*/

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 5;
	padding: 40px;
	pointer-events: none;
	font-weight: bold;
	transition: 0.3s ease-in-out;
}
header:before{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	content: "";
	display: block;
	width: 100%;
	height: 20vh;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 80%);
	transition: 0.3s ease-in-out;
}
header a{
	pointer-events: auto;
	color: #fff;
}
header h1{
	width: 260px;
	transition: 0.3s ease-in-out;
	margin: 0 auto 0 0;
	position: relative;
	z-index: 4;
}
header h1 a,
header h1 img{
	display: block;
}
header nav{
	width: auto;
	margin: 0 0 0 auto;
	line-height: 1;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	position: relative;
	z-index: 3;
}
header ul li{
	display: flex;
	align-items: center;
	justify-content: center;
}
header ul li a{
	display: block;
}
header ul.nav1{
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	font-size: 5rem;
	letter-spacing: -0.2rem;
	transition: 0.3s ease-in-out;
}
header ul.nav1 li{
	margin-right: 30px;
}
header ul.nav1 li.ns{
	display: none;
}
header ul.nav2{
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}
header ul.nav2 li{
	width: 44px;
	padding-top: 7px;
	transition: 0.3s ease-in-out;
}
header ul.nav2 li{
	margin-left: 10px;
}
header ul.nav2 li:first-child{
	margin-left: 0;
}
header ul.nav2 li a{
	display: block;
	width: 100%;
	height: 100%;
}
header ul.nav2 li a img{
	display: block;
}
header ul.nav2 li.bm{
	display: none;
}

.scrolled header{
	padding: 20px 40px 0;
}
.scrolled header:before{
	top: -10vh;
}
.scrolled header h1{
	width: 200px;
}
.scrolled header ul.nav1{
	font-size: 4rem;
}
.scrolled header ul.nav2 li{
	width: 36px;
	padding-top: 4px;
}
@media screen and (max-width: 1400px){
	header ul.nav1{
		font-size: 3rem;
		letter-spacing: -0.1rem;
	}
}
@media screen and (max-width: 1060px){
	header{
		padding: 40px 20px 0;
	}
	header h1{
		width: 180px;
	}
	header ul.nav1 li{
		margin-right: 20px;
	}
	header ul.nav2 li{
		width: 36px;
	}
	
	.scrolled header{
		padding: 20px 20px 0;
	}
	.scrolled header ul.nav1{
		font-size: 3rem;
	}
	header ul.nav2 li{
		padding-top: 3px;
	}
}
@media screen and (max-width: 800px){
	header:after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
		background: rgba(0,0,0,0);
		transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
		transform: skewX(-20deg);
		transform-origin: 0 100%;
	}
	.open header:after{
		left: 0;
		background: rgba(0,0,0,1);
		transform: skewX(0deg);
	}
	header ul.nav1{
		position: fixed;
		top: 0;
		left: 100vw;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
		transform: skewX(30deg);
		transform-origin: 0 0;
	}
	.open header ul.nav1{
		left: 0;
		opacity: 1;
		transition: 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
		transform: skewX(0deg);
		padding-top: 40px;
	}
	header ul.nav1 li{
		display: block;
		width: 100%;
		margin: 0;
		text-align: center;
		font-size: 5rem;
		padding: 0 10px;
		margin-bottom: 10px;
		letter-spacing: -0.2rem;
	}
	header ul.nav1 li.ns{
		display: block;
		font-size: 1.8rem;
		letter-spacing: -0.05rem;
		margin-bottom: 12px;
	}
	header ul.nav1 li:not(.ns)+.ns{
		padding-top: 20px;
	}
	header ul.nav2{
		position: relative;
		z-index: 2;
	}
	header ul.nav2 li.bm{
		display: block;
		padding-top: 0;
	}
	header ul.nav2 li.bm a{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 39px;
		position: relative;
		padding: 4px 0;
	}
	header ul.nav2 li.bm a span,
	header ul.nav2 li.bm a:before,
	header ul.nav2 li.bm a:after{
		content: "";
		display: block;
		width: 26px;
		height: 1px;
		background: #fff;
		transition: 0.3s;
	}
	.open header ul.nav2 li.bm a span{
		opacity: 0;
	}
	.open header ul.nav2 li.bm a:before{
		transform: rotate(-225deg) translate(7px,-7px);
	}
	.open header ul.nav2 li.bm a:after{
		transform: rotate(225deg) translate(7px,7px);
	}
}
@media screen and (max-width: 480px){
	header{
		padding: 20px 10px 0;
	}
	.scrolled header{
		padding: 20px 10px 0;
	}
	header h1{
		width: 200px;
		max-width: calc(100% - 140px);
	}
}

/*-------------*/

#lv{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #000;
	transition: 1s ease-in-out;
}
#lv .outer{
	position: relative;
}
#lv .outer:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #6465d2;
	mix-blend-mode: color-dodge;
	opacity: 0.5;
	z-index: 3;
}
#lv .inner{
	width: 100%;
	height: 500px;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
#lv iframe{
	position: absolute;
	top: calc((56.25vw - 500px)/-2);
	top: calc((56.25vw - 100vh)/-2);
	left: 0;
	filter: contrast(150%);
	width: 100%;
	height: 56.25vw;
	display: block;
	opacity: 0.5;
}
@media screen and (max-width: 177.77vh){
	#lv iframe{
		top: 0;
		left: calc((177.77vh - 100vw)/-2);
		width: 177.77vh;
		height: 100vh;
	}
}
#lv .t{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 4;
	text-align: center;
	font-size: 6rem;
	line-height: 1;
	letter-spacing: -0.1rem;
}
.scrolled #lv .t{
	opacity: 0;
}
#lv .t span{
	display: block;
	padding: 5px 20px 10px;
	position: relative;
	margin-bottom: 10px;
}
#lv .t span:before,
#lv .t span:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.5s ease-out;
	transition-delay: 1s;
	border: 5px solid rgba(255,255,255,0);
	width: 0;
	height: 0;
	box-sizing: border-box;
}
#lv .t span:after{
	top: 100%;
	left: 100%;
}
.loaded #lv .t span:before,
.loaded #lv .t span:after{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.loaded #lv .t span:before{
	border-top: 5px solid rgba(255,255,255,1);
	border-left: 5px solid rgba(255,255,255,1);
}
.loaded #lv .t span:after{
	border-bottom: 5px solid rgba(255,255,255,1);
	border-right: 5px solid rgba(255,255,255,1);
}
@media screen and (max-width: 1060px){
	#lv .t{
		height: 450px;
	}
}
@media screen and (max-width: 420px){
	#lv .t{
		font-size: 4rem;
	}
}

/*----------------------------main--------------------------------*/

main{
	margin-top: 370px;
	position: relative;
	z-index: 3;
	text-align: center;
	background: #fff;
	padding-top: 50px;
	min-height: 800px;
}

.btn{
	text-align: center;
}
.btn a,
.btn span{
	color: #000 !important;
	text-align: center;
	display: inline-block;
	background: #ed1c24;
	position: relative;
	padding: 8px 10px;
	min-width: 200px;
	font-weight: bold;
	position: relative;
	transition: 0.2s ease-out;
	line-height: 1.3;
	border: 2px solid #000;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.2);
}
.btn a:hover,
a:hover .btn span,
.btn a:hover span,
.btn a.current{
	background:#000;
	color: #ed1c24 !important;
	box-shadow: 0px 0px 0 rgba(0,0,0,0.3);
}
@media screen and (max-width: 650px){
	.btn a,
	a .btn span{
		min-width: 150px;
	}
}

h2{
	font-size: 6rem;
	line-height: 1.1;
	padding: 15px;
}
@media screen and (max-width: 500px){
	h2{
		font-size: 4rem;
	}
}

.h2{
	text-align: center;
	margin-bottom: 60px;
}
.h2 h2{
	font-size: 5.2rem;
	line-height: 1.2;
	text-align: center;
	position: relative;
	padding: 0 60px;
	display: inline-block;
}
.h2 h2:before,
.h2 h2:after{
	content: "";
	width: 5px;
	height: 100%;
	position: absolute;
	top: 5px;
	left: 0;
	background: #000;
}
.h2 h2:after{
	left: auto;
	right: 0;
}
.h2 h2 span{
	padding-top: 5px;
	display: block;
	font-size: 1.5rem;
}
@media screen and (max-width: 650px){
	.h2{
		margin-bottom: 40px;
	}
	.h2 h2{
		font-size: 5.0rem;
		padding: 0 40px;
	}
}
@media screen and (max-width: 450px){
	.h2 h2{
		font-size: 3.6rem;
		padding: 0 30px;
	}
}

/*-------------*/

#s_timer{
	text-align: center;
	display: inline-block;
	margin-bottom: 50px;
}
#s_timer{
	margin-top: -130px;
}
#s_timer .w{
	background: #ed1c24;
	border: 2px solid #000;
	display: inline-block;
	box-shadow: 20px 20px 70px rgba(0,0,0,0.4);
}
#s_timer .w>p{
	border-bottom: 2px solid #000;
	font-size: 3.8rem;
	padding: 15px 20px;
	line-height: 1;
}
#s_timer .outer{
	display: flex;
	width: 100%;
	align-items: stretch;
	justify-content: center;
}
#s_timer .date{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30px;
}
#timer .yycountdown-box{
	text-align: center;
	color: #000;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	width: 800px;
	font-size: 2.0rem;
	line-height: 1;
}
#timer .yycountdown-box span{
	display: block;
	width: 25%;
	border-left: 2px solid #111;
}
#timer .yyc-day,
#timer .yyc-hou,
#timer .yyc-min,
#timer .yyc-sec{
	font-size: 13rem;
}
#timer .yyc-day-text,
#timer .yyc-hou-text,
#timer .yyc-min-text,
#timer .yyc-sec-text{
	padding: 10px 0;
}
#timer .yyc-day{
	order: 1;
}
#timer .yyc-hou{
	order: 2;
}
#timer .yyc-min{
	order: 3;
}
#timer .yyc-sec{
	order: 4;
}
#timer .yyc-day-text{
	order: 5;
}
#timer .yyc-hou-text{
	order: 6;
}
#timer .yyc-min-text{
	order: 7;
}
#timer .yyc-sec-text{
	order: 8;
}
#s_timer .outer+ul{
	filter: brightness(0);
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 2px solid #000;
	padding: 20px;
}
#s_timer .outer+ul li{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 25px;
	min-width: 55px;
	margin: 0 10px;
}
#s_timer .outer+ul li img{
	max-height: 100%;
	display: block;
}
@media screen and (max-width: 1100px){
	#s_timer{
		margin: 0 auto !important;
		display: block;
	}
	#s_timer .w{
		display: block;
		border-bottom: 0;
	}
	#s_timer .date{
		width: 28%;
		padding: 0 20px;
	}
	#timer{
		width: 72%;
	}
	#timer .yycountdown-box{
		width: 100%;
	}
	#timer .yyc-day,
	#timer .yyc-hou,
	#timer .yyc-min,
	#timer .yyc-sec{
		font-size: 12vw;
	}
}
@media screen and (max-width: 780px){
	#s_timer .w>p{
		font-size: 3.4rem;
	}
}
@media screen and (max-width: 660px){
	#s_timer .w>p{
		padding: 5px 10px;
	}
	#s_timer .w>p span{
		display: none;
	}
	#s_timer .date{
		padding: 0 8px;
	}
	#timer .yycountdown-box{
		font-size: 1.5rem;
	}
	#timer .yycountdown-box span{
		padding-top: 5px;
	}
	#timer .yyc-day-text,
	#timer .yyc-hou-text,
	#timer .yyc-min-text,
	#timer .yyc-sec-text{
		padding: 5px 0;
	}
	#s_timer .outer + ul{
		padding: 10px;
	}
	#s_timer .outer + ul li{
		margin: 0 5px;
	}
}
@media screen and (max-width: 520px){
	#s_timer .outer + ul li{
		height: 20px;
	}
}
@media screen and (max-width: 450px){
	#s_timer .date{
		padding: 0 4px;
	}
	#s_timer .outer + ul{
		flex-wrap: wrap;
		padding: 5px 5px 0;
	}
	#s_timer .outer + ul li{
		width: 33.3%;
		margin: 5px 0 5px;
		padding: 0 5px;
		height: 15px;
	}
}

#s_timer #timer0{
	padding: 0 20px 10px;
	font-size: 9rem;
	line-height: 1;
	color: #000;
	font-weight: bold;
}
@media screen and (max-width: 1700px){
	#s_timer #timer0{
		font-size: 6vw;
	}
}
@media screen and (max-width: 1100px){
	#s_timer #timer0{
		padding: 0 20px 10px;
		font-size: 9vw;
	}
}
@media screen and (max-width: 720px){
	#s_timer #timer0{
		padding: 0 10px 5px;
		font-size: 11vw;
	}
}

/*-------------*/

.bt{
	text-align: center;
	width: 100%;
	font-size: 8rem;
	line-height: 1;
	font-weight: bold;
	letter-spacing: -0.2rem;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 300px;
	padding: 0 30px;
	position: relative;
	z-index: 3;
}
.bt span{
	display: inline-block;
}
@media screen and (max-width: 1100px){
	.bt{
		font-size: 6rem;
	}
}
@media screen and (max-width: 450px){
	.bt{
		font-size: 12vw;
		height: 240px;
	}
}

/*----------------------------footer--------------------------------*/

footer{
	position: relative;
	z-index: 3;
	width: 100%;
	background: #222;
	color: #676767;
	padding: 100px 40px 40px;
}
footer .inner{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}
footer nav{
	margin: 0 auto 0 0;
}
footer nav ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}
footer nav ul li{
	display: block;
}
footer nav ul li a{
	display: block;
	padding: 2px 10px 2px 0;
	color: #fff;
}
footer nav ul.nav2{
	font-size: 1.6rem;
}
footer .bn{
	width: 300px;
	margin-right: 20px;
}
footer .cero{
	width: 50px;
}
footer ul.pf{
	margin: 40px 0 20px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}
footer ul.pf li{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-width: 60px;
	max-width: 160px;
	margin: 0 30px 0 0;
}
footer ul.pf li img{
	max-height: 100%;
	display: block;
	opacity: 0.35;
}
footer .cp{
	font-size: 1.3rem;
	line-height: 1.2;
	text-align: justify;
}
@media screen and (max-width: 1580px){
	footer nav ul{
		max-width: 520px
	}
}
@media screen and (max-width: 1400px){
	footer{
		padding-top: 50px;
	}
	footer .inner{
		justify-content: center;
	}
	footer nav{
		width: 100%;
		margin-bottom: 30px;
	}
	footer nav ul{
		justify-content: center;
		max-width: none;
	}
	footer ul.pf{
		justify-content: center;
	}
	footer ul.pf li{
		margin: 0 10px;
	}
}
@media screen and (max-width: 800px){
	footer{
		padding: 40px 20px 20px;
	}
	footer .inner{
		justify-content: space-between;
	}
	footer nav ul{
		display: none;
	}
	footer .bn{
		margin: 0;
		width: 46.5%;
		padding-right: 20px;
	}
	footer .cero{
		width: 7%;
	}
	footer ul.pf{
		margin-top: 20px;
		margin-bottom: 0;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	footer ul.pf li{
		width: 32%;
		max-width: none;
		margin: 0;
		padding: 0 5px 20px;
	}
}
@media screen and (max-width: 500px){
	footer{
		padding-top: 20px;
	}
	footer .inner{
		display: block;
	}
	footer .bn{
		width: 100%;
		padding: 0;
		text-align: center;
		max-width: 300px;
		margin: 0 auto 15px;
	}
	footer .cero{
		width: 100%;
		text-align: center;
		max-width: 45px;
		margin: 0 auto;
	}
}

/*----------------------------booknow--------------------------------*/

#booknow{
	position: fixed;
	right: -200px;
	width: 200px;
	height: 200px;
	bottom: 20px;
	z-index: 3;
	transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-property: right, opacity;
	border-radius: 100%;
	background: #000;
	box-shadow: 30px 30px 50px rgba(0,0,0,0.2);
	overflow: hidden;
	border: 3px solid #fff;
}
.scrolled #booknow{
	right: 20px;
}
@media screen and (max-width: 600px){
	#booknow{
		width: 30vw;
		height: 30vw;
	}
}
@media screen and (max-width: 460px){
	.scrolled #booknow{
		right: 10px;
	}
}

/*----------------------cookie--------------------------------*/

.cc-window{
	background: rgba(0,0,0,0.8);
	color: #ddd;
	font-size: 1.4rem !important;
	padding: 10px 20px !important;
	z-index: 99 !important;
}
.cc-message a{
	color: #ddd;
	text-decoration: underline;
}
.cc-btn{
	background: #ed1c24;
	color: #000;
	border: none !important;
}

/*------------------------------------------------------*/

@keyframes b1{
	0%{
		transform: translateX(0px);
	}
	5%{
		transform: translateX(-3px);
	}
	10%{
		transform: translateX(0px);
	}
	15%{
		transform: translateX(-5px);
	}
	20%{
		transform: translateX(1px);
	}
	30%{
		transform: translateX(1px);
	}
	35%{
		transform: translateX(-1px);
	}
	40%{
		transform: translateX(0px);
	}
	45%{
		transform: translateX(-4px);
	}
	50%{
		transform: translateX(0px);
	}
	55%{
		transform: translateX(-2px);
	}
	60%{
		transform: translateX(1px);
	}
	65%{
		transform: translateX(0px);
	}
	75%{
		transform: translateX(0px);
	}
	80%{
		transform: translateX(4px);
	}
	85%{
		transform: translateX(2px);
	}
	90%{
		transform: translateX(-2px);
	}
	100%{
		transform: translateX(0px);
	}
}
@keyframes b2{
	0%{
		transform: translateX(0px);
	}
	5%{
		transform: translateX(3px);
	}
	10%{
		transform: translateX(0px);
	}
	15%{
		transform: translateX(5px);
	}
	20%{
		transform: translateX(-1px);
	}
	30%{
		transform: translateX(-1px);
	}
	35%{
		transform: translateX(1px);
	}
	40%{
		transform: translateX(0px);
	}
	45%{
		transform: translateX(4px);
	}
	50%{
		transform: translateX(0px);
	}
	55%{
		transform: translateX(2px);
	}
	60%{
		transform: translateX(-1px);
	}
	65%{
		transform: translateX(0px);
	}
	75%{
		transform: translateX(0px);
	}
	80%{
		transform: translateX(-4px);
	}
	85%{
		transform: translateX(-2px);
	}
	90%{
		transform: translateX(2px);
	}
	100%{
		transform: translateX(0px);
	}
}

/*------------------------------------------------------*/

.popup{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 5;
}
.popimg{
	width: 100%;
	padding: 5%;
}
.popimg img{
	display: block;
	margin: 0 auto;
	width: auto;
	height: auto;
	max-height: 90vh;
	box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
}
.popclose{
	width: 44px;
	height: 44px;
	background: #ed1c24;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	cursor: pointer;
	text-indent: -10000px;
	overflow: hidden;
	transition: 0.2s;
}
.popclose:before,
.popclose:after{
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: #000;
	position: absolute;
	top: calc(50% - 1px);
	left: 13px;
	transform: rotate(45deg);
	transition: 0.2s;
}
.popclose:after{
	transform: rotate(-45deg);
}
.popclose:hover{
	background: #000;
}
.popclose:hover:before,
.popclose:hover:after{
	background: #ed1c24;
}

/*------------------------------------------------------*/

#twitter_terms{
	width: calc(100% - 40px);
	max-width: 1000px;
	margin: 0 auto;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.7;
	letter-spacing: 0;
	padding: 40px 0;
}
#twitter_terms h1{
	margin-bottom: 40px;
	line-height: 1.5;
	font-size: 2.9rem;
	text-align: center;
}
#twitter_terms h1 span{
	display: inline-block;
	padding: 0 5px;
}
#twitter_terms ol{
	display: block;
	font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	padding-left: 30px;
}
#twitter_terms ol li{
	margin-bottom: 15px;
	padding-left: 5px;
	list-style: decimal;
}
#twitter_terms ol li:last-child{
	margin-bottom: 0;
}
#twitter_terms a{
	color: #0000ee;
	text-decoration: underline;
}
#twitter_terms a:visited{
	color: #551a8b;
}
@media screen and (max-width: 850px){
	#twitter_terms ol{
		padding-left: 27px;
	}
}
@media screen and (max-width: 500px){
	#twitter_terms{
		width: calc(100% - 20px);
	}
	#twitter_terms h1{
		font-size: 2.2rem;
	}
}