@charset "utf-8";
/* CSS Document */
ul,
ol,
dl,
li,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
nav,
input,
select {
		margin: 0;
		padding: 0;
}
body,
td,
th {
	position: relative;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.3;
	color: #fff;
	overflow-x: hidden;
	overflow-y: scroll;
}
body {
	position: relative;
	min-width: 320px;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	background: #000 url(../images/base_bg_pc.jpg) no-repeat top center/ 96.00rem auto;
	background-attachment: fixed;
}
html {
	font-size: 20px;
}
@media screen and (max-width: 750px) {
	html {
		font-size: calc(100vw / 37.5);
	}
	body {
		background: none;
	}
	body::before {
		content: "";
		z-index: 0;
		position: fixed;
		background: #000 url(../images/base_bg.jpg) no-repeat top center/ 100% auto;
		width: 100%;
		height: 100%;
	}
}
@media screen and (max-width: 320px) {
	html {
		font-size: 8.5px;
	}
}
@media screen and (min-width: 641px) {
	/* body {
		background: url(../images/base_bg_pc.jpg) left top;
		background-size: 15.00rem;
		background-attachment: fixed;
	}
	body:before{
		content: none;
	} */
}
@media screen and (min-width: 1920px) {
	body {
		background-size: cover;
	}
}
article{
	max-width: 750px;
	overflow: hidden;
	/* background: url(../images/base_bg.jpg);
	background-size: 15.00rem; */
	box-shadow: 0 0.40rem 0.80rem -0.20rem rgba(0, 0, 0, 0.7);
	min-height: calc(100vh - 8.05rem);
	background: #000 url(../images/base_bg.jpg) no-repeat top center/ 37.50rem auto;
	background-attachment: fixed;
}
@media screen and (max-width: 750px) {
	article{
		background: none;
	}
}
li {
		list-style: none;
}
img {
		vertical-align: bottom;
}
a {
}
a:visited,
a:active {
}
a:hover,
a.hover {
		text-decoration: none;
}
hr {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 0.40rem;
	margin: 0;
	/* background: #fff;
	background: -webkit-linear-gradient(0deg, #e75c12, #ffcc2d, #fdf1da);
	background: -ms-linear-gradient(0deg, #e75c12, #ffcc2d, #fdf1da);
	background: linear-gradient(0deg, #e75c12, #ffcc2d, #fdf1da); */
	border: none;
	box-shadow:0 0 0.30rem 0.15rem rgba(89,41,6,0.5),0 0 0 0.10rem #000;
	box-sizing: content-box;
	background: url(../images/img_line.jpg) no-repeat center/ 100% auto;
	height: 0.70rem;
}
section hr:last-of-type {
	margin-top: 2.00rem;
}
section hr.only {
	margin-top: 0;
}
hr.rope{
	border: none;
	box-shadow: none;
	height: 1.10rem;
	background: url(../images/img_rope.png) no-repeat center/ auto 100%;
}
hr.rope-s{
	border: none;
	box-shadow: none;
	height: 1.05rem;
	background: url(../images/img_rope_s.png) no-repeat center/ auto 100%;
}
.t-s{
	text-shadow:
		black 0.10rem 0,	black -0.10rem 0,
		black 0 -0.10rem, black 0 0.10rem,
		black 0.10rem 0.10rem , black -0.10rem 0.10rem,
		black 0.10rem -0.10rem, black -0.10rem -0.10rem,
		black 0.05rem 0.10rem,	black -0.05rem 0.10rem,
		black 0.05rem -0.10rem, black -0.05rem -0.10rem,
		black 0.10rem	0.05rem,	black -0.10rem	0.05rem,
		black 0.10rem -0.05rem, black -0.10rem -0.05rem,

		black 0.10rem 0.20rem,	black -0.10rem 0.20rem,
		black	0.05rem 0.20rem,	black -0.05rem 0.20rem,
		black 0 0.20rem,
		black 0.10rem 0.25rem,	black -0.10rem 0.25rem,
		black	0.05rem 0.25rem,	black -0.05rem 0.25rem,
		black 0 0.25rem;
}
.t-s.t-b{
	color: #6ccbfe;
}
.t-s.t-r{
	color: #ff848e;
}

input[type="submit"][disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

body *::-webkit-scrollbar{width:0.30rem;}/*バーの太さ*/
body *::-webkit-scrollbar-track{background:rgba(0,0,0,0.5);}/*バーの背景色*/
body *::-webkit-scrollbar-thumb{background:#ffffff;}/*バーの色*/

/* animation ****************************************************/
.touch-count.hover{
	-webkit-animation: btn 0.5s ease-in;
	animation: btn 0.5s ease-in;
}
.touch-move:hover{
	-webkit-animation: btn 0.5s ease-in;
	animation: btn 0.5s ease-in;
}
@media screen and (max-width: 750px) {
	.touch-move.hover{
		-webkit-animation: btn 0.5s ease-in;
		animation: btn 0.5s ease-in;
	}
}
@-webkit-keyframes btn {
	from, 20%, 40%, 60%, 80%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0%	{opacity: 1;}
	20% {-webkit-transform: scale3d(1.2, 1.2, 1.2);}
	40% {-webkit-transform: scale3d(1, 1, 1);}
	60% {-webkit-transform: scale3d(1.03, 1.03, 1.03);}
	80% {-webkit-transform: scale3d(1, 1, 1);}
	to	{-webkit-transform: scale3d(1, 1, 1);}
}

@keyframes btn {
	from, 20%, 40%, 60%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0%	{opacity: 1;}
	20% {transform: scale3d(1.2, 1.2, 1.2);}
	40% {transform: scale3d(1, 1, 1);}
	60% {transform: scale3d(1.03, 1.03, 1.03);}
	80% {transform: scale3d(1, 1, 1);}
	to	{transform: scale3d(1, 1, 1);}
}

.move-infinit{
	-webkit-animation: btn-infinit 2s ease-in infinite;
	animation: btn-infinit 2s ease-in infinite;
}
@-webkit-keyframes btn-infinit {
	from, 5%, 10%, 15%, 20%, 25% {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0%	{opacity: 1;}
	5% {-webkit-transform: scale3d(1.2, 1.2, 1.2);}
	10% {-webkit-transform: scale3d(.9, .9, .9);}
	15% {-webkit-transform: scale3d(1.03, 1.03, 1.03);}
	20% {-webkit-transform: scale3d(.97, .97, .97);}
	25%	{-webkit-transform: scale3d(1, 1, 1);}
}

@keyframes btn-infinit {
	from, 5%, 10%, 15%, 20%, 25% {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0%	{opacity: 1;}
	5% {transform: scale3d(1.2, 1.2, 1.2);}
	10% {transform: scale3d(.9, .9, .9);}
	15% {transform: scale3d(1.03, 1.03, 1.03);}
	20% {transform: scale3d(.97, .97, .97);}
	25%	{transform: scale3d(1, 1, 1);}
}

@-webkit-keyframes wave-infinit {
	from, 10%, 20%, 30%, 40%, 50%{
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0%	{}
	10% {margin-top:-2rem}
	20% {margin-top:-1.50rem}
	30% {margin-top:-2rem}
	40% {margin-top:-1.50rem}
	50%	{margin-top:-2rem}
}
@keyframes wave-infinit {
	from, 10%, 20%, 30%, 40%, 50%{
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0%	{}
	10% {margin-top:-2rem}
	20% {margin-top:-1.50rem}
	30% {margin-top:-2rem}
	40% {margin-top:-1.50rem}
	50%	{margin-top:-2rem}
}

@-webkit-keyframes reflection {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@keyframes reflection {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes flash {
	from{-webkit-filter: brightness(1);}
	15% {-webkit-filter: brightness(2);}
	50% {-webkit-filter: brightness(1);}
	to	{-webkit-filter: brightness(1);}
}

@keyframes flash {
	from{filter: brightness(1);}
	15% {filter: brightness(2);}
	50% {filter: brightness(1);}
	to	{filter: brightness(1);}
}

.scl{
	opacity: 0;
	-webkit-transition: -webkit-transform 0.5s ease-out, opacity 0.5s ease-out;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	-webkit-transform: translateY(2rem);
	transform: translateY(2rem);
}
.scl.scl-animate{
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
/* loading ****************************************************/
#loading {
	position: fixed;
	z-index: 10000;
	display: block;
	width: 100vw;
	height: 100vh;
	transition: all 1s;
}
.spinner{
	width: 100vw;
	height: 100vh;
	background: #fff url(../images/loading.gif) center center no-repeat;
	background-size: auto 10rem;
}
.loaded {
	opacity: 0;
	visibility: hidden;
}

/******************************************************************************
index
******************************************************************************/
.all-container {
	width: 100%;
	overflow-x: hidden;
}
.container{
	min-width: 320px;
	margin: 0 auto;
	padding-bottom: 1.00rem;
}
.container.container-ranking{
	padding-bottom: 3.00rem;
}
@media screen and (max-width: 750px) {
	img {
		width: 100%;
		height: auto;
	}
	.all-container {
		width: 100%;
		background-image: none;
	}
	.container,
	.infotab,
	.space-z{
		background-size: auto 13.80rem;
	}
}
/* nav ****************************************************/
header{
	/* height: 4.25rem; */
}
nav{
	display: none;
	position: fixed;
	width: 100%;
	max-width: 750px;
	min-width: 320px;
	z-index: 300;
    overflow: hidden;
    padding-bottom: 0.10rem;
	/* background: url(../images/header_bg.jpg) left top;
	background-size: auto 100%; */
	background: rgba(0, 0, 0, 0.6);
}
nav > ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
nav > ul li{
    position: relative;
	-webkit-box-flex:0;
	-ms-flex:0 0 5.30rem;
	flex: 0 0 5.30rem;
	width: 5.30rem;
	align-self: flex-start;
	line-height: 0;
}
nav > ul li.logo{
	margin-right:auto;
	border-left-width: 0;
	-webkit-box-flex:1;
	-ms-flex:1 0 8.65rem;
	flex: 1 0 8.65rem;
}
nav > ul li.menu01{
	-webkit-box-flex:0;
	-ms-flex:0 0 7.05rem;
	flex: 0 0 7.05rem;
	width: 7.05rem;
}
nav > ul li.menu02{
	-webkit-box-flex:0;
	-ms-flex:0 0 8.45rem;
	flex: 0 0 8.45rem;
	width: 8.45rem;
}
nav > ul li.menu03{
	-webkit-box-flex:0;
	-ms-flex:0 0 8.05rem;
	flex: 0 0 8.05rem;
	width: 8.05rem;
}
nav > ul li::before{
	/* content:""; */
	position: absolute;
	display: block;
	width: 0.10rem;
	height: 4rem;
	background: #cc3200;
	left: 0;
}
nav > ul li::after{
	/* content:""; */
	position: absolute;
	display: block;
	width: 0.10rem;
	height: 4rem;
	background: #a50808;
	right: 0;
	top: 0;
}
nav > ul li.back::after{
	content: none;
}
nav > ul li:first-of-type::before{
	content: none;
}
nav > ul li:last-of-type::after{
	content: none;
}
nav > ul li.menu01.hover,
nav > ul li.menu02.hover,
nav > ul li.menu03.hover{
	/* background: -webkit-linear-gradient(0deg, rgba(100, 0, 0, 0.7), rgba(100, 0, 0, 0.2));
	background: -ms-linear-gradient(0deg, rgba(100, 0, 0, 0.7), rgba(100, 0, 0, 0.2));
	background: linear-gradient(0deg, rgba(100, 0, 0, 0.7), rgba(100, 0, 0, 0.2)); */
}
nav > ul li a{
	display: block;
	/* margin: 0 1.00rem; */
	height: 5.00rem;
	text-indent: -9999px;
	overflow: hidden;
	/* background: url(../images/nav_menu.png) no-repeat left top/ auto 12.00rem; */
}
nav > ul li.logo a{
	display: block;
	background: url(../images/logo.png) no-repeat center center/ 100% auto;
	height: 5.00rem;
	width: 8.95rem;
	margin: 0.20rem 0 0 0.65rem;
}
nav > ul li.menu01 a{
	background: url(../images/nav_menu_01.png) no-repeat left center/ auto 4.30rem;
	/* background-position-y: -0.00rem;
	background-position-x: -1.90rem; */
}
nav > ul li.menu02 a{
	background: url(../images/nav_menu_02_notyet.png) no-repeat left center/ auto 3.90rem;
	/* background-position-y: -4.00rem;
	background-position-x: -1.00rem; */
}
nav > ul li.menu03 a{
	background: url(../images/nav_menu_02.png) no-repeat left center/ auto 4.40rem;
	/* background-position-y: -8.00rem;
	background-position-x: -0.80rem; */
}
/* nav > ul li.menu01.hover a{
	background-position-x: -9.90rem;
}
nav > ul li.menu02.hover a{
	background-position-x: -9.00rem;
}
nav > ul li.menu03.hover a{
	background-position-x: -8.80rem;
} */
nav > ul li.back{
	margin-right:auto;
	border-left-width: 0;
	-webkit-box-flex:1;
	-ms-flex:1 0 6.50rem;
	flex: 1 0 6.50rem;
}
nav > ul li.back a{
	display: block;
	background: url(../images/nav_menu_ver_back.png) no-repeat top center;
	background-size: auto 5.00rem;
	width: 8.50rem;
}
/* .frame ****************************************************/
.gold-frame{
	border-radius: 0.50rem;
	padding: 0.10rem;
	margin: 1.00rem 1.00rem 0;
	border:	0.10rem solid #000;
	background: -webkit-linear-gradient(85deg, #cf962c, #f0d799, #d39d31);
	background: -ms-linear-gradient(85deg, #cf962c, #f0d799, #d39d31);
	background: linear-gradient(85deg, #cf962c, #f0d799, #d39d31);
	box-shadow: 0.10rem 0.10rem 0.10rem rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}
.gold-frame-inner{
	position: relative;
	border-radius: 0.45rem;
	padding: 0.70rem 1.00rem 0.70rem;
	border:	0.10rem solid #472d29;
	background: -webkit-linear-gradient(#6b3f00 3%, #331c00);
	background: -ms-linear-gradient(#6b3f00 3%, #331c00);
	background: linear-gradient(#6b3f00 3%, #331c00);
	box-shadow: inset 0 0 0.20rem rgba(0,0,0,0.5);
	box-sizing: border-box;
}
.gold-frame-inner > *{
	position: relative;
	z-index: 10;
}
.gold-frame-inner > h3,
.gold-frame-inner > h4,
h3.frame,
h4.frame{
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	font-size: 1.30rem;
	height: 3.50rem;
	padding: 0 6%;
	border: 0.25rem solid #cf962c;
	border-radius: 100rem;
	box-sizing: border-box;
	box-shadow: 0 0 0 0.125rem #000, 0 0.125rem 0 0.125rem rgba(0,0,0,0.25);
}

.gold-frame.rope-frame,
.gold-frame.rope-frame .gold-frame-inner{
	border-radius: 0;
}
.gold-frame.rope-frame .gold-frame-inner{
	padding: 1.00rem;
}
.gold-frame.rope-frame .gold-frame-inner::before,
.gold-frame.rope-frame .gold-frame-inner::after{
	content: "";
	position: absolute;
	  width: 30.10rem;
	  height: 1.35rem;
	  background: url(../images/bg_frm_top.png) center no-repeat;
	  background-size: auto 100%;
	  top: -0.65rem;
	  left: -0.60rem;
}
.gold-frame.rope-frame .gold-frame-inner::after{
	  background: url(../images/bg_frm_bottom.png) center no-repeat;
	  background-size: auto 100%;
	top: auto;
	bottom: -0.65rem;
}
.wood-back{
	background: url(../images/bg_wood.jpg) center;
	background-size: 100% auto;
	padding: 0.60rem;
	height: auto;
	border-top: 0.05rem solid #d9b58e;
	border-bottom: 0.05rem solid #4c2507;
	box-shadow: 0 0 0 0.10rem #330e05, 0 0.20rem 0.20rem 0.20rem rgba(0, 0, 0, 0.5);
	border-radius: 0.75rem;
}

.gold-frame-inner > h3::before,
.gold-frame-inner > h3::after,
.gold-frame-inner > h4::before,
.gold-frame-inner > h4::after,
h3.frame::before,
h3.frame::after,
h4.frame::before,
h4.frame::after{
	content: "";
	position: absolute;
	width: 0.75rem;
	height: 0.75rem;
	background: url(../images/sttl_frame_item.png) repeat center/ auto 100%;
	top: 36%;
	left: 2.866%;
}
.gold-frame-inner > h3::before,
.gold-frame-inner > h4::after,
h3.frame::after,
h4.frame::after{
	left: auto;
	right: 2.866%;
}
h3.frame img{
	height: 88%;
	width: auto;
	margin: auto;
}

.gold-frame-inner.red-frame{
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}
.gold-frame-inner.red-frame h3,
.gold-frame-inner.red-frame h4{
	border-width: 0.10rem;
	background: #8f0000;
	background: -webkit-linear-gradient(#8f0000, #660000, #8f0000);
	background: -ms-linear-gradient(#8f0000, #660000, #8f0000);
	background: linear-gradient(#8f0000, #660000, #8f0000);
	box-shadow: 0 0 0 0.125rem #000, 0 0.125rem 0 0.125rem rgba(0,0,0,0.25), inset 0 0 0.25rem #000;
}
.gold-frame-inner.s-frame{
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	position: relative;
	z-index: 15;
}
.gold-frame-inner.s-frame h3{
	  height: 2.90rem;
	border-width: 0.10rem;
	background: -webkit-linear-gradient(#700f1a, #b61a29);
	background: -ms-linear-gradient(#700f1a, #b61a29);
	background: linear-gradient(#700f1a, #b61a29);
	background-size: auto;
	box-shadow: 0 0 0 0.125rem #000, 0 0.125rem 0 0.125rem rgba(0,0,0,0.25), inset 0 0 0.25rem #000;
}
.gold-frame-inner.full-inner{
	padding: 0;
	overflow: hidden;
}
.gold-frame-inner.full-inner img{
	width: 100%;
	height: auto;
}
@media screen and (max-width: 750px) {
	.gold-frame-inner > h3{
		font-size: 3.2vw;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}
.gold-frame .gold-frame-inner{
	text-align: center;
	padding: 0.50rem;
	font-size: 1.20rem;
	line-height: 1.5;
}
.gold-frame .gold-frame-inner strong{
	color: #fffd00;
}
.gold-frame .gold-frame-inner aside{
    margin-top: 0.40rem;
    font-size: 0.90rem;
}

.wood-ttl{
	position: relative;
    z-index: 15;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 3.50rem;
	margin: auto;
	background: url(../images/ttl_bg_board.png) no-repeat center top/ auto 100%;
}
.wood-ttl::after{
	content: "";
	display: block;
	position: absolute;
	z-index: 5;
    top: -3.70rem;
    width: 100%;
    height: 12.50rem;
    /* background: url(../images/ttl_bg_board_front.png) no-repeat center/ auto 100%; */
}
#rankingreward .wood-ttl::after,
#allreward .wood-ttl::after{
    background: url(../images/ttl_bg_board_front_reward.png) no-repeat center/ auto 100%;
}
.wood-ttl span{
	position: relative;
	z-index: 10;
	height: 5.00rem;
	width: 100%;
	margin-top: 2.50rem;
	text-indent: -9999px;
}
.howto.wood-frame .wood-ttl::after,
.caution .wood-frame .wood-ttl::after{
	content: none;
}
.howto.wood-frame .wood-ttl{
    margin: 1.20rem auto 0;
    height: 3.30rem;
}
.howto.wood-frame .wood-ttl span{
	height: 2.00rem;
	width: 100%;
	margin-top: 0.60rem;
	background: url(../images/ttl_howto.png) no-repeat center/ auto 100%;
}
.caution .wood-ttl{
    height: 3.30rem;
}
.caution .wood-ttl span{
	height: 2.00rem;
	width: 100%;
	margin-top: 0.60rem;
	background: url(../images/ttl_caution.png) no-repeat center/ auto 100%;
}
.wood-frame .detail{
	position: relative;
	border-radius: 0.50rem;
	padding: 0.10rem;
	margin: 0 1.00rem;
	border: 0.10rem solid #000000;
	background: -moz-linear-gradient(90deg, #ffe487, #ffeeb2, #ffe488);
	background: -webkit-linear-gradient(90deg, #ffe487, #ffeeb2, #ffe488);
	background: -ms-linear-gradient(90deg, #ffe487, #ffeeb2, #ffe488);
	box-sizing: border-box;
	box-shadow: 0.10rem 0.10rem 0.20rem rgba(0,0,0,0.5);
}
[id*="modal-"] .wood-frame .detail{
	border-radius: 0;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: 0;
}
.wood-frame .detail .inner{
	position: relative;
	border-radius: 0.40rem;
	padding: 1.00rem;
	border:	0.10rem solid #f8af01;
	background: #713310 url(../images/bg_grain.jpg) repeat-y center top;
	background-size: 100% auto;
	box-shadow: inset 0 0 0.20rem 0.20rem rgba(0,0,0,0.5);
	box-sizing: border-box;
}
[id*="modal-"] .wood-frame .detail .inner{
	border-radius: 0;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: 0;
}
.wood-frame.frame-only .detail .inner{
	padding: 0;
	overflow: hidden;
}
.wood-frame .detail .inner.damage{
	padding-bottom: 1.50rem;
	background: url(../images/bg_grain_damage.png) no-repeat center bottom, url(../images/bg_grain.jpg) repeat-y center top;
	background-size: 34.80rem auto, 100% auto;
}
[id*="modal-"] .wood-frame .detail .inner.damage{
	padding: 0;
}
.wood-frame .detail .inner .slick-dotted.slick-slider{
	margin-bottom: 2.55rem;
}
.wood-frame .detail .yellow {
	color: #fce203;
}
.wood-frame [class*='Slide'] .arrow.prev.slick-arrow,
.wood-frame [class*='Slide'] .arrow.next.slick-arrow{
	top: 0;
	margin-top: 12.50rem;
	width: 2rem;
	height: 9rem;
	position: absolute;
	z-index: 5;
	text-indent: -9999px;
	-webkit-filter: drop-shadow(0 0.20rem 0.20rem rgba(0,0,0,.6));
					filter: drop-shadow(0 0.20rem 0.20rem rgba(0,0,0,.6));
	line-height: 0;
	overflow: hidden;
	white-space: nowrap;
}
.wood-frame [class*='Slide'] .arrow.hover{
	-webkit-animation: btn 0.5s ease-in;
	animation: btn 0.5s ease-in;
}

.wood-frame [class*='Slide'] .arrow.prev.slick-arrow{
	left: -1.50rem;
	background: url(../images/arr_slideL.png) left bottom 1.90rem no-repeat;
	background-size: auto 3.60rem;
}
.wood-frame [class*='Slide'] .arrow.next.slick-arrow{
	right: -1.50rem;
	background: url(../images/arr_slideR.png) right bottom 1.90rem no-repeat;
	background-size: auto 3.60rem;
}
.wood-frame [class*='Slide'] .slick-dots{
	bottom: -2.30rem;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: absolute;
	width: 100%;
}
.wood-frame [class*='Slide'] .slick-list{
	box-sizing: border-box;
	margin: 0 auto;
	border-radius: 0.40rem;
	background: rgba(0,0,0,0.6);
	box-shadow: inset 0 0 0.75rem 0 #000;
}
.wood-frame [class*='Slide'] .slick-dots li{
	width: 1.20rem;
	height: 100%;
	margin: 0 0.75rem;
}
.wood-frame [class*='Slide'] .slick-dots li button{
	background-color: rgba(0,0,0,0.25);
	border-radius: 50%;
	box-shadow:0px 0px 6px 0px #000 inset;
	width: 1.20rem;
	height: 1.20rem;
	padding: 0.60rem;
	transition: 0.2s;
}
.wood-frame [class*='Slide'] .slick-dots li.slick-active button{
	background-color: rgba(255,255,0,0.75);
	box-shadow:0px 0px 6px 0px #fff inset;
}
.wood-frame [class*='Slide'] .slick-dots li button::before{
	content:"";
	width: 99.3%;
	height: 99.3%;
}
.wood-frame [class*='Slide'] .slick-dots li button::after{
	background-image: none;
}
@media screen and (max-width: 750px) {
	.wood-frame [class*='Slide'] .arrow.prev.slick-arrow,
	.wood-frame [class*='Slide'] .arrow.next.slick-arrow{
		width: 4rem;
	}
}
.frame-deco{
	position: relative;
}
.frame-deco > *{
	position: relative;
	z-index: 10;
}
.frame-deco::before{
	content: "";
	display: block;
	position: absolute;
	z-index: 5;
	top: 0;
	width: 100%;
	height: 100%;
	margin-right: 0.60rem;
	border-image: url(../images/frame_deco.png) 102 36 36 36 round;
    border-width: 5.10rem 1.80rem 1.80rem;
	border-style: solid;
	box-sizing: border-box;
}
.frame-deco::after{
	content: "";
	display: block;
	position: absolute;
	z-index: 3;
	top: 1.60rem;
	left: 1.45rem;
	width: 34.75rem;
	height: 75%;
	background: #49331f;
	background: -moz-linear-gradient(90deg, #49331f, #1e140b, #49331f);
	background: -webkit-linear-gradient(90deg, #49331f, #1e140b, #49331f);
	background: -ms-linear-gradient(90deg, #49331f, #1e140b, #49331f);
}
.belong{
	margin-top: 2rem;
}
.belong .ttl-random{
	background-color: rgba(0,0,0,.7);
	padding: 1.50rem 0 1.50rem;
}
.belong .ttl-random h3{
	height: 5.05rem;
	background: url(../images/what_belong_ttl_random.png) center no-repeat/ auto 100%;
	text-indent: -9999px;
}
#ranking .belong .ttl-random h3{
	height: 2.55rem;
	background: url(../images/team_belong_ttl_random.png) center no-repeat/ auto 100%;
}
.belong .ttl-random p{
	text-align: center;
	margin-top: 1.00rem;
}
.belong .ttl-random a{
	display: block;
	margin: 1.00rem auto 0;
	width: 22.10rem;
	height: 3.10rem;
	background: url(../images/what_belong_btn_belong.png) center no-repeat/ auto 100%;
	text-indent: -9999px;
}
.belong .btn-area h4{
	display: block;
	margin-top: 1.50rem;
	height: 1.80rem;
	background: url(../images/what_belong_sttl.png) center no-repeat/ auto 100%;
	text-indent: -9999px;
}
.belong .btn-area a{
	text-indent: -9999px;
	display: block;
	margin: 0.75rem auto 0;
	width: 30.20rem;
	height: 4.30rem;
}
.belong .btn-area a.btn-make{
	background: url(../images/what_belong_btn_make.png) center no-repeat/ auto 100%;
	-webkit-animation: flash 3s ease-out infinite;
	animation: flash 3s ease-out infinite;
}
.belong .btn-area a.btn-join{
	background: url(../images/what_belong_btn_join.png) center no-repeat/ auto 100%;
	-webkit-animation: flash 3s ease-out 0.5s infinite;
	animation: flash 3s ease-out 0.5s infinite;
}
@media screen and (min-width: 641px) {
	.belong .btn-area a.btn-make:hover,
	.belong .btn-area a.btn-join:hover{
		-webkit-filter: brightness(2);
		filter: brightness(2);
	}
}
.recruit{
	width: 22.10rem;
	margin: 1.30rem auto 0;
	padding: 0.25rem;
	border-radius: 0.40rem;
	box-sizing: border-box;
	border: 0.05rem solid #72442a;
	background: rgb(138,97,26);
	background: -moz-linear-gradient(-15deg, rgba(138,97,26,1) 10%, rgba(250,192,92,1) 25%, rgba(255,222,164,1) 30%, rgba(250,192,92,1) 35%, rgba(138,97,26,1) 50%, rgba(250,192,92,1) 65%, rgba(255,222,164,1) 70%, rgba(250,192,92,1) 75%, rgba(138,97,26,1) 90%);
	background: -webkit-linear-gradient(-15deg, rgba(138,97,26,1) 10%, rgba(250,192,92,1) 25%, rgba(255,222,164,1) 30%, rgba(250,192,92,1) 35%, rgba(138,97,26,1) 50%, rgba(250,192,92,1) 65%, rgba(255,222,164,1) 70%, rgba(250,192,92,1) 75%, rgba(138,97,26,1) 90%);
	background: linear-gradient(-15deg, rgba(138,97,26,1) 10%, rgba(250,192,92,1) 25%, rgba(255,222,164,1) 30%, rgba(250,192,92,1) 35%, rgba(138,97,26,1) 50%, rgba(250,192,92,1) 65%, rgba(255,222,164,1) 70%, rgba(250,192,92,1) 75%, rgba(138,97,26,1) 90%);
}
.recruit div{
	height: 100%;
	padding: 1.00rem 0;
	border-radius: 0.20rem;
	box-sizing: inherit;
	border: 0.05rem solid #72442a;
	box-shadow: inset 0 0 0.50rem 0.20rem rgba(0,0,0,0.75);
	  background: #3d2c0f url(../images/what_twitter_bg.jpg) center bottom no-repeat;
	  background-size: 100% auto;
}
.recruit h3{
	height: 3.55rem;
	  background: url(../images/what_twitter_ttl.png) center no-repeat/ auto 100%;
	text-indent: -9999px;
}
.recruit.tl h3{
	  background: url(../images/what_twitter_ttl_tl.png) center no-repeat/ auto 100%;
}
.recruit a{
	display: block;
	margin: 0.75rem auto 0;
	width: 16.00rem;
	height: 3.30rem;
	  background: url(../images/what_twitter_search_btn.png) center no-repeat/ auto 100%;
	text-indent: -9999px;
}
.recruit a.tw-recruit{
	width: 18.00rem;
	  background: url(../images/what_twitter_recruit_btn.png) center no-repeat/ auto 100%;
}
.recruit a.ln-recruit{
	width: 18.00rem;
	  background: url(../images/what_line_recruit_btn.png) center no-repeat/ auto 100%;
}

/* loginform*/
.user-point,
.loginform{
	margin-top: 1.00rem;
	position: relative;
	display: block;
	width: 100%;
	padding: 2.50rem 3.00rem 2.80rem;
    padding: 2.50rem 10.50rem 2.80rem 1.50rem;
	box-sizing: border-box;
	background: url(../images/img_rope.png) no-repeat center top 0.70rem, url(../images/img_rope.png) no-repeat center bottom 0.70rem;
	background-color: rgba(33,20,7,0.8);
	background-size: auto 1.10rem;
}
.loginform form .input-name {
	width: 100%;
}
.loginform form .input-name > .frame {
	display: inline-block;
	background: -moz-linear-gradient(top, #cdb15e 0%, #a57a2f 50%, #c5a84e);
	background: -webkit-gradient(linear, left top, left bottom, from(#cdb15e), color-stop(0.5, #a57a2f), to(#c5a84e));
	background: linear-gradient(#cdb15e 0%, #a57a2f 50%, #c5a84e);
	border-radius: 0.35rem;
	width: 23.00rem;
	padding: 0.10rem;
}
.loginform form .input-name > .frame > input[type="text"] {
	resize: none;
	width: 22.00rem;
	background-color: #ffffff;
	border: none;
	border-radius: 0.30rem;
	color: #605f5e;
	font-size: 100%;
	font-weight: bold;
	line-height: 260%;
	vertical-align: middle;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	box-shadow: rgba(0, 0, 0, 0.6) 0 0 0.60rem 0.10rem inset;
	padding-left: 1.00rem;
	/* appearance: none; */
	transition: 0.3s;
}
.loginform form .input-name input[type="text"]:focus {
	border: none;
	outline: 0;
}
_:-ms-lang(x)::-ms-backdrop, .loginform form .input-name > .frame > input[type="text"]  {
	height: 38px;
}
.loginform .input-description {
	position: relative;
	display: table;
	width: 100%;
}
.loginform .input-description .inner {
	display: inline-block;
	width: 30.00rem;
	vertical-align: middle;
	padding-bottom: 2.25rem;
}
.loginform .input-description p.lead {
	font-weight: normal;
	line-height: 1.25;
}
.loginform .input-description .error {
	position: absolute;
	display: inline-block;
	vertical-align: middle;
	top: 2.60rem;
	left: 0;
	display: none;
}
.loginform .input-description .error p.lead {
	font-weight: bold;
	line-height: 1.7;
	color: #fcb510;
}
.loginform .input-description .faq-open {
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	width: 2.40rem;
	height: 2.40rem;
	text-indent: -9999px;
	cursor: pointer;
	background: url(../images/btn_qes.png) no-repeat top right/ auto 100%;
}
.loginform .submit{
	display: inline-block;
	float: right;
	margin-top: -0.20rem;
}
.loginform .submit .submit-btn {
	background: url(../images/btn_submit.png) no-repeat center center;
	background-size: 100% auto;
	border: none;
	width: 6.10rem;
	height: 3.05rem;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
}
.loginform.login-done{
	background: url(../images/img_rope_s.png) no-repeat left 1.10rem top 1.00rem, url(../images/img_rope_s.png) no-repeat left 1.10rem bottom 1.00rem;
	background-color: rgba(33,20,7,0.8);
	background-size: auto 1.10rem;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.loginform.login-done .your-score {
  	display: inline-block;
}
.loginform.login-done .your-score dl {
    width: 25.5rem;
	margin: 0 auto;
	font-weight: bold;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 0.25rem;
	grid-template-areas:
		"a b"
		"c d"
		"e f";
}
.loginform.login-done .your-score dl dt:nth-of-type(1) { grid-area: a; }
.loginform.login-done .your-score dl dd:nth-of-type(1) { grid-area: b; }
.loginform.login-done .your-score dl dt:nth-of-type(2) { grid-area: c; }
.loginform.login-done .your-score dl dd:nth-of-type(2) { grid-area: d; }
.loginform.login-done .your-score dl dt:nth-of-type(3) { grid-area: e; }
.loginform.login-done .your-score dl dd:nth-of-type(3) { grid-area: f; }

@media all and (-ms-high-contrast:none) {
	.loginform.login-done .your-score dl {
	  display: -ms-grid;
	  -ms-grid-columns: auto auto;
	  -ms-grid-rows: 1fr 1fr 1fr;
	}
	.loginform.login-done .your-score dl dt:nth-of-type(1) {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	.loginform.login-done .your-score dl dd:nth-of-type(1) {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
	}
	.loginform.login-done .your-score dl dt:nth-of-type(2) {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	.loginform.login-done .your-score dl dd:nth-of-type(2) {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
	}
	.loginform.login-done .your-score dl dt:nth-of-type(3){
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	.loginform.login-done .your-score dl dd:nth-of-type(3){
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
	}
}
.loginform.login-done .your-score dt,
.loginform.login-done .your-score dd {
  display: inline-block;
  font-size: 1.20rem;
  vertical-align: middle;
}
.loginform.login-done .your-score dt {
  text-align: right;
  padding-left: 1.00rem;
}
.loginform.login-done .your-score dd {
  text-align: right;
  padding-right: 1.00rem;
}
.reward-check {
	position: absolute;
    right: 0;
    top: 2.50rem;
}
.reward-check .rwd-open{
	width: 7.50rem;
	height: 5.70rem;
	background: url(../images/btn_reward.png) no-repeat center/ auto 100%;
	text-indent: -9999px;
}
[id*="modal-"]{
	display: none;
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
[id*="modal-"] .modal{
	position: relative;
	z-index: 100;
	max-width: 35.00rem;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
[id*="modal-"] .gold-frame{
	padding: 0.25rem;
	margin: 0;
	border:	0.15rem solid #1a0100;
	background: #fce477;
	box-shadow: 0.10rem 0.10rem 0.10rem rgba(0, 0, 0, 0.5);
}
[id*="modal-"] .gold-frame .gold-frame-inner{
	border: none;
    padding: 1.00rem;
	box-shadow: 0 0 0.05rem  0.05rem rgba(0,0,0,0.5), inset 0 0 0.10rem  0.05rem rgba(0,0,0,0.25);
	background: -webkit-linear-gradient(#554924 3%, #110f06);
	background: -ms-linear-gradient(#554924 3%, #110f06);
	background: linear-gradient(#554924 3%, #110f06);
}
[id*="modal-"] .modal .gold-frame h5{
	text-align: center;
	margin-top: 1.00rem;
}
[id*="modal-"] .modal .gold-frame h5 img{
	width: auto;
	height: 2.85rem;
}
[id*="modal-"] .modal .gold-frame figure{
	overflow-y: scroll;
	overflow-x: hidden;
	text-align: center;
    height: 70vh;
}
[id*="modal-"] .modal .gold-frame figure::-webkit-scrollbar{ width:0.30rem;}/*バーの太さ*/
[id*="modal-"] .modal .gold-frame figure::-webkit-scrollbar-track{background:rgba(0,0,0,0.5);}/*バーの背景色*/
[id*="modal-"] .modal .gold-frame figure::-webkit-scrollbar-thumb{background:#ffffff;}/*バーの色*/
[id*="modal-"] .modal .gold-frame .com{
	border-radius: 0.20rem;
	padding: 0.50rem;
	text-align: left;
}
[id*="modal-"] .modal-over{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
}
[id*="modal-"] .time{
	width: 10.00rem;
	height: 1.50rem;
	margin: 0.50rem auto 0;
	line-height: 1.50rem;
	font-size: 1.10rem;
	text-align: center;
	background: rgba(0,0,0,0.5);
	border-radius: 10rem;
}
[id*="modal-"] .time img{
	margin-top: 0.50rem;
	width: auto;
	height: 1.05rem;
}
[id*="modal-"] figure {
	width: 100%;
	margin: 1.00rem 0 0;
}
[id*="modal-"] .modal.reward-list{
	background: transparent;
}
[id*="modal-"] .modal .gold-frame figure img{
	width: 100%;
}
[id*="modal-"] p{
	margin: 1.00rem 0 0;
}
[id*="modal-"] p a{
	color: #fff;
	font-weight: bold;
}
[id*="modal-"] a.close{
	background: url(../images/modal_close.png) no-repeat center;
	background-size: auto 100%;
	margin: 1.00rem auto 0;
	display: block;
	width: 7.75rem;
	height: 2.75rem;
	text-indent: -9999px;
}

[id*="modal-"] .deco{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
[id*="modal-"] .deco span{
	position: absolute;
	width: 3.25rem;
	height: 1.75rem;
	background: url(../images/bg_dialog.png) no-repeat;
	background-size: auto 200%;
}
[id*="modal-"] .deco span:nth-of-type(1){
	background-position: top right;
	top: -0.50rem;
	left: -1.00rem;
}
[id*="modal-"] .deco span:nth-of-type(2){
	background-position: top left;
	top: -0.50rem;
	right: -1.00rem;
}
[id*="modal-"] .deco span:nth-of-type(3){
	background-position: bottom right;
	bottom: -0.50rem;
	left: -1.00rem;
}
[id*="modal-"] .deco span:nth-of-type(4){
	background-position: bottom left;
	bottom: -0.50rem;
	right: -1.00rem;
}
[id*="modal-"] .main{
	width: 100%;
	height: 28.80rem;
	overflow-y: auto;
	overflow-x: hidden;
	margin: auto;
}
#modal-rwd .main{
	overflow: hidden;
}
#modal-rwd .rank-reward{
	margin: 0;
	height: 29.00rem;
	overflow-x: hidden;
}
#modal-rwd .tab-cont .rank-reward{
    height: 25.00rem;
}
@media screen and (min-width: 751px) {
	@media screen and (max-height: 700px) {
		[id*="modal-"]{
			padding: 0;
		}
	}
	[id*="modal-"] .modal{
		margin-bottom: 2.50rem;
	}
}
/* section ****************************************************/
section{
	margin-left: auto;
	margin-right: auto;
	z-index: unset;
}
section,
aside{
	position: relative;
}
section.main-ttl,
section.none-ttl{
	/* background: #2a200d;
	background: -moz-linear-gradient(0deg, #2a200d, #796449, #2a200d);
	background: -webkit-linear-gradient(0deg, #2a200d, #796449, #2a200d);
	background: -ms-linear-gradient(0deg, #2a200d, #796449, #2a200d); */
}
section.main-ttl{
	margin-top: 9.00rem;
}
section.main-ttl > .wood-ttl{
	position: relative;
    z-index: 15;
	margin: -4.00rem 0 0.60rem;
    background: none;
}
section.main-ttl > .wood-ttl + .gold-frame,
section.none-ttl > .gold-frame:first-of-type{
	margin-left: 2.00rem;
	margin-right: 2.00rem;
}
section.none-ttl > .gold-frame:first-of-type{
	margin-top: 1.00rem
}
section > .wood-ttl.scl{
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}
section > .wood-ttl.scl::before,
section > .wood-ttl.scl::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	transition: background-position 1s ease-out;
}
.sttl{
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 4.55rem;
	width: 25.25rem;
    margin: 1.00rem auto 0;
	background: url(../images/ttl_sub_bg.png) no-repeat center bottom/ auto 100%;
}
.sttl span{
	display: block;
	text-indent: -9999px;
	height: 3.20rem;
    margin-top: 0.20rem;
	width: 100%;
}
section#ranking .paper{
	padding-bottom: 2.00rem;
}
section.main-ttl.none-ttl .paper{
	margin-top: 0;
}
section.main-ttl.flag-ttl{
	margin-top: 11.00rem;
}
/* #mv ****************************************************/
#mv{
	margin-top: 0;
	position: relative;
	width: 100%;
	max-width: 100%;
	display: block;
	padding: 0;
	z-index: 60;
	background: none;
}
#mv h1 {
	background: url(../images/ttl_img.jpg) no-repeat center top/ 100% auto;
	height: 14.05rem;
	text-indent: -9999px;
}
#mv .frame-deco.period {
	z-index: 10;
	margin-top: -1.60rem;
	padding: 4.30rem 0 3.00rem;
	text-align: center;
}
#mv .frame-deco.period.multi {
	margin-top: -1.30rem;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
}
#mv .frame-deco.period::after{
	height: 83%;
	background: #031739;
	background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
	background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
	background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
}
#mv .frame-deco.period.end::after{
	height: 75%;
}
#mv .frame-deco.period h4{
	width: 100%;
	height: 2.00rem;
	width: 100%;
	background: url(../images/period_board_text.png) no-repeat center/ auto 100%;
	text-indent: -9999px;
}
#mv .frame-deco.period.end h4{
	background: url(../images/period_board_end.png) no-repeat center top/ auto 100%;
}
#mv .frame-deco.period p{
	width: 100%;
	margin-top: 1.10rem;
	font-size: 1.30rem;
}
#mv .frame-deco.period.multi p{
	text-align: left;
    padding-left: 2.50rem;
}
#mv .frame-deco.period p span{
	display: inline-block;
	width: 5.50rem;
}
#mv .frame-deco.period p.period-end{
	color: #666666;
	opacity: 0.7;
}
#mv .frame-deco.period p.period-session{
	text-shadow: 0 0 0.10rem  #a91313, 0 0 0.10rem  #a91313, 0 0 0.10rem  #a91313, 0 0 0.20rem  #ff0000, 0 0 0.20rem  #ff0000, 0 0 0.20rem  #ff0000, 0 0 0.20rem  #ff0000, 0 0 0.20rem  #ff0000, 0 0 0.30rem  #ff0000, 0 0 0.30rem  #ff0000, 0 0 0.30rem  #ff0000;
}
#mv .frame-deco.period p.period-before::before,
#mv .frame-deco.period p.period-session::before,
#mv .frame-deco.period p.period-end::before{
	content: "";
	display: inline-block;
    vertical-align: bottom;
	width: 4.05rem;
	height: 1.65rem;
	margin-right: 1.00rem;
}
#mv .frame-deco.period p.period-before::before{
	background: url(../images/period_board_text_before.jpg) no-repeat center/ auto 1.50rem;
}
#mv .frame-deco.period p.period-session::before{
	background: url(../images/period_board_text_session.jpg) no-repeat center/ auto 1.50rem;
}
#mv .frame-deco.period p.period-end::before{
	background: url(../images/period_board_text_end.jpg) no-repeat center/ auto 1.50rem;
}

/* about ****************************************************/
#about{
	padding: 11.50rem 0 0;
	z-index: 50;
	/* background: url(../images/about_bg.png) top center no-repeat, url(../images/base_bg.jpg) center; */
	/* background: url(../images/base_bg.jpg) center; */
	background-size: 100% auto, auto 15.00rem;
	margin-top: -10.50rem;
}
#about .about-box{
	  position: relative;
}
#about .about-box p{
	position: relative;
	z-index: 10;
	background: url(../images/about_txt.png) no-repeat top center/ auto 100%;
	height: 13.20rem;
	text-indent: -9999px;
}
#about .howto{
	margin-top: 2.50rem;
}
#about + section.main-ttl{
	margin-top: 5.10rem;
}
/*-- install *********************************************/
.letsPlay{
	position: relative;
	margin: 3.00rem 1rem 0;
	z-index: 60;
}
.letsPlay h2{
	margin: 0 auto -3rem;
	height: 4.40rem;
	width: 16.30rem;
	position: relative;
	z-index: 2;
	background: url(../images/lets_mi.png) no-repeat;
	background-size: 100% auto;
	text-indent: 100%;
	white-space: nowrap;
	line-height: 0;
	overflow: hidden;
	font-size: 0;
}
.letsPlay .download{
	margin: 0 auto;
	padding: 3.80rem 1.10rem 1.10rem;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background: #000 url(../images/lets_bg.png) top 7% center no-repeat;
	background-size: 82% auto;
	border: 0.15rem solid #fff;
	box-sizing: border-box;
	border-radius: 1.25rem;
	box-shadow: 0.10rem 0.10rem 0.10rem 0.05em rgba(0,0,0,0.25);
}
.down-app{
	text-align: left;
}
.down-goo{
	text-align: right;
}
.letsPlay .download p img{
	width: 15.85rem;
	height: auto;
}
/*-- SNS *********************************************/
.snsarea {
	position: relative;
	z-index: 60;
	margin: 1.50rem 1.00rem 0;
	border-radius: 0.75rem;
}
.sns-space{
	border-radius: 0.65rem;
	padding: 1.00rem 1.30rem;
	margin: 0 auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	z-index: 100;
}
.screw::before,
.sns-space::before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/sttl_frame_item.png) right 0.20rem top 0.20rem,
				url(../images/sttl_frame_item.png) right 0.20rem bottom 0.20rem,
				url(../images/sttl_frame_item.png) left 0.20rem top 0.20rem,
				url(../images/sttl_frame_item.png) left 0.20rem bottom 0.20rem;
	background-repeat: no-repeat;
	background-size: 0.75rem auto;
}
.sns-space li {
	margin-right: 4.338%;
	width: 9.64%;
}
.snsarea li h2{
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../images/sns_txt.png) center left 30% no-repeat;
	background-size: 88% auto;
	height: 100%;
}
.sns-space li:first-child {
	width: 23.40rem;
	margin-right: 0;
}
.sns-space li:last-child {
	margin-right: 0;
}
.sns-space li a {
	width: 100%;
display: block;
}
.sns-space li a img{
	width: 100%;
height: auto;
}
/* 公式誘導バナー */
.game-bnr {
	position: relative;
	z-index: 60;
	text-align: center;
}
.official-bnr{
	position: relative;
	z-index: 60;
	text-align: center;
	margin: 3.00rem auto 0;
}
.official-bnr .bnr-container{
	margin: 0 auto;
}
.official-bnr .bnr-container a img{
	width: 24.40rem;
}
.official-bnr .bnr-container .official-site{
	margin-top: 0.40rem;
}
.official-bnr .bnr-container .official-line a img{
	width: 24.00rem;
	box-shadow: 0.15rem 0.15rem 0.10rem rgba(0,0,0,0.3);
}
.official-bnr .bnr-container div.official-twitter{
	margin-top: 0.10rem;
}
.game-bnr .bnr-container .inner div{
	margin: 0 auto;
}
.game-bnr .bnr-container .inner .bnr-frame{
	padding: 1.15rem 1.05rem 0.60rem;
}
.game-bnr .bnr-container div.campaign-period{
	margin: 0rem auto 0;
}
.official-site{
	margin: 0 auto;
	line-height: 0;
}
/* noneid ****************************************************/
#noneid{
	position: relative;
	margin-top: 4.00rem;
    height: 13.00rem;
	width: 100%;
}
#noneid > div{
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100%;
	max-width: 750px;
	min-width: 320px;
    padding: 1.00rem 0;
	background: rgba(15, 15, 15, 0.75);
}
#noneid.scl-stay > div{
	position: relative;
}
#noneid h2{
    font-size: 1.40rem;
	font-weight: normal;
	text-align: center;
	padding: 0.10rem 0;
	background-color: #880d19;
	background: -webkit-linear-gradient(90deg, transparent 0%, #880d19 20%, #880d19 80%, transparent 100%);
	background: -ms-linear-gradient(90deg, transparent 0%, #880d19 20%, #880d19 80%, transparent 100%);
	background: linear-gradient(90deg, transparent 0%, #880d19 20%, #880d19 80%, transparent 100%);
}
#noneid p{
	margin-top: 0.75rem;
	text-align: center;
}
#noneid a{
	display: block;
	width: 17.10rem;
	height: 3.70rem;
	background: url(../images/btn_open_app.png) no-repeat top center/ auto 100%;
	text-indent: -9999px;
	margin: 0.75rem auto 0;
}
/* 注意事項 ****************************************************/
.caution{
	position: relative;
	z-index: 60;
	margin-top: 3.00rem;
}
.caution-inner{
	background: #2c1900;
	padding: 1.00rem 0;
	border-radius: 0.50rem;
	box-shadow: inset 0 0 0.50rem 0.25rem rgba(0,0,0,0.5);
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 20.00rem;
}
.caution-inner dt {
	margin: 1.00rem -1rem 0;
	padding: 0.30rem 2rem;
	background: #090603;
	background: -moz-linear-gradient(0deg, #000, rgba(0,0,0,0.3));
	background: -webkit-linear-gradient(0deg, #000, rgba(0,0,0,0.3));
	background: -ms-linear-gradient(0deg, #000, rgba(0,0,0,0.3));
	font-size: 1.25em;
	font-weight: bold;
}
.caution-inner dt:first-of-type{
	margin-top: 0;
}
.caution-inner dd {
	padding: 0.40rem 1.00rem;
}
.detail dd.comment,
.caution-inner dd.dot{
	padding-left: 1em;
	text-indent: -1em;
	margin-left: 1.00rem;
}
/* footer ****************************************************/
.all-container > footer {
	position: relative;
	z-index: 50;
	max-height: 7500px;
	background: #000;
	border-top: solid 0.15rem #ac7f00;
	min-width: 320px;
	margin: auto;
}
.all-container > footer .inner {
	box-sizing: border-box;
	width: 750px;
	margin: 0 auto;
	padding: 0.25rem 1.00rem 0.30rem;
	text-align: right;
}
@media screen and (max-width: 750px) {
		.all-container > footer .inner {
			width: 100%;
		}
}
.all-container > footer p {
	margin: 0;
	line-height: 1.25;
	color: #fff;
}
.all-container > footer ul {
	margin: 1.00rem 0 0;
	font-size: 0;
}
.all-container > footer li {
	display: inline-block;
	padding: 0 1.00rem;
	border-left: solid	0.0625rem #fff;
	line-height: 1;
	font-size: 1.00rem;
}
.all-container > footer li:first-of-type {
	border-left: none;
}
.all-container > footer li:last-of-type {
	padding-right: 0;
}
.all-container > footer li a {
	color: #fff;
}
@media screen and (max-width: 330px) {
	footer {
		width: 320px;
	}
}

@media screen and (max-width: 750px) {
	.all-container ~ img{
		transform: none!important;
	}
}
.fes-bnr {
	margin-top: 3.00rem;
	text-align: center;
}
.fes-bnr img{
	width: 29.00rem;
	margin: auto;
}

.container .wrapper{
	display: none;
}
.container#index .wrapper{
	display: block;
	-webkit-perspective:500;
	perspective:500;
	position: fixed;
	top: 0;
	z-index: 50;
}

/* header ****************************************************/
header.other-page{
	height: 8.00rem;
}
header.other-page nav{
	margin-top: 1.30rem;
	height: 6.30rem;
    padding: 0;
	background: url(../images/bg_other_ttl.png) no-repeat center/ 100% auto;
}
header.other-page nav ul .back{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.35rem;
    flex: 0 0 8.35rem;
	height: 6.40rem;
    width: 7.10rem;
}
header.other-page nav ul .back a{
	display: block;
	height: 6.40rem;
    width: 7.10rem;
	background: url(../images/btn_sitetop.png) no-repeat center/ auto 100%;
	text-indent: -9999px;
}
header.other-page nav ul .ttl{
    display: -webkit-box;
    display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
	width: auto;
    height: 4.20rem;
	margin-top: 0.50rem;
}
header.other-page nav ul li::before{
	content: none;
}
#ranking.ranking-page .rank-box .wood-frame .detail .inner{
	padding: 0;
    overflow: hidden;
}
#ranking.ranking-page .user-list{
	margin-top: 0;
	max-height: 41.50rem;
	overflow-y: scroll;
	overflow-x: hidden;
}
#ranking.ranking-page .user-area:first-of-type{
	margin-top: 0;
}
#ranking.ranking-page .user-area:last-of-type{
	margin-bottom: 0;
}
#ranking.ranking-page .wood-frame .detail .inner .frame.myscore::after{
	content: none;
}
.pager-area{
	margin: 1.00rem 0.50rem;
}
.pager {
	display: inline-block;
	width: 22.00rem;
}
.pager ol.btn {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	flex-wrap: -webkit-wrap;
	flex-wrap: -moz-wrap;
	flex-wrap: -ms-wrap;
	flex-wrap: wrap;
	justify-content: -webkit-space-between;
	justify-content: -moz-space-between;
	justify-content: -ms-space-between;
	justify-content: space-between;
}
.pager ol li {
	width: 11.285%;
	height: 100%;
}
.pager ol li.pulldown {
	width: 9.80rem;
}
.pager ol li.pulldown select::-ms-expand {
	display: none;
}
.pager ol li.pulldown select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(../images/pulldown_arrow.png) no-repeat right 0.50rem center/ 0.80rem 0.50rem;
	background-color: #ffffff;
	border-radius: 0.40rem;
	border: solid 0.10rem #371f06;
	width: 100%;
	padding: 0.50rem 1.60rem 0.50rem 0.5rem;
	font-size: 0.85em;
	color: #371f06;
	line-height: 1.0em;
}
.pager ol li.pulldown select:focus {
    outline-width: 0;
}
.myrank {
	position: relative;
	display: inline-block;
	width: 11.00rem;
	margin: 0.10rem 0 0;
	float: right;
}
.myrank a {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.myrank.disabled a{
	opacity: 0;
	pointer-events: none;
}

.cont-area{
	background: url(../images/paper_bg.png) no-repeat top center/ 33.2rem auto;
    margin: -4.00rem 0.50rem 0;
    padding: 3.20rem 0 2.20rem;
}
.cont-area .gold-frame{
	margin: 3.50rem 3.80rem 0;
    border-radius: 1.00rem;
}
.wood-ttl span{
	height: 7.50rem;
	margin-top: 1.00rem;
}
#campaign > .wood-ttl span{
	background: url(../images/cp_ttl.png) no-repeat center/ auto 100%;
}
#next > .wood-ttl span{
	background: url(../images/next_ttl.png) no-repeat center/ auto 100%;
}
#movie > .wood-ttl span{
	background: url(../images/mov_ttl.png) no-repeat center/ auto 100%;
}
#ver > .wood-ttl span{
	background: url(../images/ver_ttl.png) no-repeat center/ auto 100%;
}
#campaign .txt{
	text-indent: -9999px;
	height: 4.50rem;
	background: url(../images/cp_txt.png) no-repeat center/ auto 100%;
}
#ver .txt{
	text-indent: -9999px;
	height: 3.90rem;
	background: url(../images/ver_txt.png) no-repeat center/ auto 100%;
}
.bnr-area{
	margin-top: 1.50rem;
}
.bnr{
	text-indent: -9999px;
	height: 6.00rem;
	width: 32.00rem;
	padding: 1.00rem 1.50rem;
	margin: -1.00rem -0.60rem;
}
.bnr.cp01{
	background: url(../images/cp_bnr_01.png) no-repeat center/ auto 100%;
}
.bnr.cp02{
	background: url(../images/cp_bnr_02.png) no-repeat center/ auto 100%;
}
.bnr.cp03{
	background: url(../images/cp_bnr_03.png) no-repeat center/ auto 100%;
}
.bnr.cp01 a,
.bnr.cp02 a,
.bnr.cp03 a{
	display: block;
	width: 100%;
	height: 100%;
}
#modal-cp01 .modal .gold-frame figure img,
#modal-cp02 .modal .gold-frame figure img,
#modal-cp03 .modal .gold-frame figure img{
	width: 25.00rem;
}
.bnr.next{
	margin-top: -2.00rem;
	background: url(../images/next_bnr.png) no-repeat center/ auto 100%;
    height: 12.00rem;
}
.bnr.ver{
	background: url(../images/ver_bnr.png) no-repeat center/ auto 100%;
    height: 12.00rem;
}
.btn-area{
	margin-top: 1.00rem;
}
.btn-area a{
	text-indent: -9999px;
	display: block;
	height: 3.70rem;
	width: 13.00rem;
    margin: 7.50rem auto 0;
	background: url(../images/ver_btn.png) no-repeat center/ auto 100%;
}
.mov-box.ver a{
    margin: 2.8rem auto 0;
}
.mov-box{
	position: relative;
	z-index: 60;
	padding: 0 1.00rem;
    max-width: 750px;
    margin: 0 auto;
}
.mov-box ul{
	text-align: center;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.mov-box ul li{
	-webkit-box-flex:0;
	-ms-flex:0 0 15.20rem;
	flex: 0 0 15.20rem;
}
.mov-box ul li:nth-of-type(3){
	margin: 2.00rem auto 0;
}
.mov-box ul li .gold-frame-inner{
	margin: 0 auto;
}
.mov-box h3{
	position: relative;
	background: url(../images/mov_ttl_bg.png) no-repeat center;
	background-size: auto 100%;
	height: 2.20rem;
	text-indent: -9999px;
}
.mov-box h3 span{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2.00rem;
}
.mov-box ul li:nth-of-type(1) h3 span.notyet{
	background: url(../images/mov_sttl_notyet.png) no-repeat center;
	background-size: auto 1.40rem;
}
.mov-box ul li:nth-of-type(2) h3 span.notyet{
	background: url(../images/mov_sttl_notyet.png) no-repeat center;
	background-size: auto 1.40rem;
}
.mov-box ul li:nth-of-type(3) h3 span.notyet{
	background: url(../images/mov_sttl_notyet.png) no-repeat center;
	background-size: auto 1.40rem;
}
.mov-box ul li:nth-of-type(1) h3 span{
	background: url(../images/mov_sttl_01.png) no-repeat center;
	background-size: auto 1.45rem;
}
.mov-box ul li:nth-of-type(2) h3 span{
	background: url(../images/mov_sttl_02.png) no-repeat center;
	background-size: auto 1.45rem;
}
.mov-box ul li:nth-of-type(3) h3 span{
	background: url(../images/mov_sttl_03.png) no-repeat center;
	background-size: auto 1.60rem;
}
.mov-box .movie-btn{
	margin-top: 1.20rem;
}
.mov-box .movie-btn a,
.mov-box .movie-btn span{
	position: relative;
	display: block;
	text-align: center;
    height: 10.40rem;
    width: 15.20rem;
	margin: -1.10rem -0.90rem -1.00rem;
    padding: 1.10rem 0.90rem 1.00rem;
	text-indent: -9999px;
}
.mov-box ul li:nth-of-type(1) .movie-btn span{
	background: url(../images/mov_img_01_notyet.png) no-repeat center/ auto 100%;
}
.mov-box ul li:nth-of-type(2) .movie-btn span{
	background: url(../images/mov_img_02_notyet.png) no-repeat center/ auto 100%;
}
.mov-box ul li:nth-of-type(3) .movie-btn span{
	background: url(../images/mov_img_02_notyet.png) no-repeat center/ auto 100%;
}
.mov-box ul li:nth-of-type(1) .movie-btn a{
	background: url(../images/mov_img_01.png) no-repeat center/ auto 100%;
}
.mov-box ul li:nth-of-type(2) .movie-btn a{
	background: url(../images/mov_img_02.png) no-repeat center/ auto 100%;
}
.mov-box ul li:nth-of-type(3) .movie-btn a{
	background: url(../images/mov_img_03.png) no-repeat center/ auto 100%;
}
#modal-mov iframe{
    width: 34rem;
    position: relative;
    height: 19.125rem;
}
.ttl {
	height: 6.65rem;
	text-indent: -9999px;
	background: url(../images/ttl_main.png) no-repeat center/ auto 100%;
}
#main {
	color: #000;
	text-align: center;
}
#about .about-box{
    margin-top: 1.8rem;
}
#main .txt{
    font-size: 1.85rem;
}
#main .gold-frame .gold-frame-inner {
	background: #fff;
    border-radius: 0.95rem;
}
#main .gold-frame-inner > h3.txt-code{
	display: block;
    height: 3.30rem;
    margin: -2.40rem auto 0;
    width: 20.00rem;
	text-indent: -9999px;
	background: url(../images/txt_code.png) no-repeat center/ auto 1.75rem, -moz-linear-gradient(90deg, #49331f, #1e140b, #49331f);
	background: url(../images/txt_code.png) no-repeat center/ auto 1.75rem, -webkit-linear-gradient(90deg, #49331f, #1e140b, #49331f);
	background: url(../images/txt_code.png) no-repeat center/ auto 1.75rem, -ms-linear-gradient(90deg, #49331f, #1e140b, #49331f);
}
#main .gold-frame .code-area{
	padding-top: 1rem;
    position: relative;
}
#main .gold-frame .code-area p{
	display: inline-block;
}
#main .gold-frame .code-area #copy{
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 10;
}
#main .gold-frame .code-area .text{
    position: absolute;
    text-align: right;
    width: 100%;
    margin: -2.5rem 0 0;

}
#main .gold-frame .code{
    color: #ef7c01;
    font-size: 2.2rem;
	font-weight: bold;
	margin-right: 0.50rem;
}
#main .txt.info{
    padding-top: 1.7rem;
    font-size: 1.4rem;
    line-height: 1.7;
}
#main .btn-area a.game-start{
	height: 3.95rem;
	width: 17.30rem;
    margin: 2rem auto 0;
	text-indent: -9999px;
	background: url(../images/btn_gamestart.png) no-repeat center/ auto 100%;
}
#main .txt.last{
    font-size: 0.85rem;
    padding-top: 1.6rem;
}
.caution-inner dd{
    padding: 0.40rem 3.60rem 0.40rem 4.90rem;
    font-size: 1.3rem;
    line-height: 1.7;
    text-indent: -1.3rem;
}
#modal-copy .gold-frame-inner > h3{
	height: 1.70rem;
	text-indent: -9999px;
	border: none;
	box-shadow: none;
	background: url(../images/txt_copy.png) no-repeat center/ auto 100%;
}
#modal-copy .gold-frame-inner > h3::before,
#modal-copy .gold-frame-inner > h3::after{
	content: none;
}
#modal-copy .gold-frame-inner > p{
    font-size: 1.50rem;
	background: #d0a95e;
	color: #000;
	padding: 1.00rem 0;
	margin: 1rem;
}
#copy input{
	position: absolute;
	z-index: -100;
	margin-top: -10000rem;
}