@charset "utf-8";
#fullWrap{
	min-width: 1200px;
	min-height: 620px;
	width: 100%;
	background-color: #000;
	position: relative;
}

@media screen and (max-width: 768px){
	#fullWrap{
		min-width: 100%;
		min-height: 100%;
	}
}

#contents{
	padding-bottom: 38px;
}
/*---------------
/* 01. Header
---------------*/
#header{
	width: 100%;
	position: relative;
}
#header_fv{
	width: 100%;
	height: 100vh;
	min-width: 1200px;
	min-height: 620px;
	position: relative;
	background: url(../img/top/head_vs.jpg) no-repeat center center / cover;
}
#header_logo{
	min-width: 827px;
	width: 68.91667%;
	padding-top: 16.25%;
/*	min-height: 359px;
	height: 57.90322%;*/
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 160px;
	background: url(../img/top/head_logo.png) no-repeat center center / contain;
}
#header_contWrap{
	display: flex;
	align-items: center;
	width: 100%;
	position: absolute;
	bottom: 20px;
}
#header_linkListsWrap{
	width: 50%;
	display: flex;
	padding-left: 20px;
}
#header_linkLists{
	width: 180px;
	margin-right: 10px;
	display: flex;
	flex-wrap: wrap;
	flex-flow:column;
	justify-content:space-between;
}
.h_linkList{
	width: 100%;
	margin-bottom: 10px;
}
.h_linkList:last-child{
	margin-bottom: 0;
}
.h_linkList a{
	display: block;
	width: 100%;
	padding-top: 30.556%;
	position: relative;
	transition: .3s ease;
}
.h_linkList a:hover{
	opacity: 0.75;
}
.h_linkList a img{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#header_bnr_generate{
	width: 180px;
}
#header_bnr_generate a{
	transition: .3s ease;
}
#header_bnr_generate a:hover{
	opacity: 0.75;
}
#header_copyright{
	/*width: 50%;*/
	width: 375px;
	height: 11px;
	background:url(../img/top/head_copyright.png) no-repeat center center / contain;
	position: absolute;
	bottom: 0;
	right: 24px;
}
@media screen and (max-width: 768px){
	#header_fv{
		height: auto;
		padding-top: 109%;
		/*padding-top: 121.334%;*/ /*bnr*/
		min-width: 100%;
		min-height: auto;
		background: url(../img/top/head_vs_sp.jpg) no-repeat top center / contain;
		background-color: #e60012;
	}
	#header_logo{
		min-width: 92.1334%;
		width: 92.1334%;
		padding-top: 32.8667%;
		background: url(../img/top/head_logo_sp.png) no-repeat center center / contain;
		/*top: 262px;*/
		top: 0;
		margin-top: 51.2%;
		left: 50%;
		bottom: unset;
		transform: translate(-50%,0);
	}
	#header_contWrap{
		flex-wrap: wrap;
		bottom: 0;
	}
	#header_linkListsWrap{
		order:2;
		width: 100%;
		flex-wrap: wrap;
		padding-left: 0px;
	}
	#header_linkLists{
		flex-flow:unset;
		justify-content: center;
		width: 100%;
		margin-right: 0px;
		padding-bottom: 4%;
	}
	.h_linkList{
		width: 32.2667%;
		margin: 0 1.2%;
	}
	#header_bnr_generate{
		width: 100%;
	}
	#header_bnr_generate a img{
		width: 100%;
	}
	#header_copyright{
		width: 50%;
		height: auto;
		padding-top: 1.4667%;
		right: 50%;
		transform: translateX(50%);
		margin: 0 auto 20%;
		background-position: center center;
	}
}

/* NAV */
#head_nav{
	width: 100%;
	min-width: 1200px;
	padding-top: 60px;
	padding-bottom: 12px;
	background-color: #000;
}
.navLists{
	width: 1200px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
.navList{
	width: 218px;
	height: 218px;
	margin: 0 5px;
}
.navList a{
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .25s ease-in-out;
}
.navList a:hover{
	transform: translateY(-12px);
}
.navList a img{
	width: 100%;
}
.header_gachalinkWrap{
	width: 390px;
	height: 348px;
	margin: 40px auto 0;
}
.header_gachalink{
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .25s ease-in-out;
}
.header_gachalink:hover{
	transform: translateY(-12px);
}
@media screen and (max-width: 768px){
	#head_nav{
		min-width: 100%;
		padding-top: 6.667%;
		padding-bottom: 2.1334%;
	}
	.navLists{
		width: 94.667%;
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: center;
	}
	.navList{
		width: calc(100% / 3);
		display: flex;
		padding: 1.4085%;
		margin: 0;
		height: auto;
	}
	.header_gachalinkWrap{
		width: 52%;
		height: auto;
		margin-top: 2.9334%;
	}
	.header_gachalink img{
		width: 100%;
	}
}


/*---------------
/* 02. Content Common
---------------*/
.contWrap{
	width: 1200px;
	margin: 0 auto;
	padding-top: 64px;
	padding-bottom: 32px;
}
.cont_h2{
	font-size: 33px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	padding-bottom: 32px;
}
.cont_h3{
	font-size: 33px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	padding-bottom: 32px;
}
.cont_h4{
	font-size: 24px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	padding-bottom: 24px;
}
.contIn{
	width: 100%;
}
.swpimgWrap{
	width: 100%;
	padding-bottom: 82px;
	position: relative;
}
.swpimgWrap .swiper-pagination{
	position: absolute;
	height: 82px;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swpimgWrap .swiper-pagination-bullet{
	width: 18px;
	height: 18px;
	margin: 0 6px!important;
	background-color: #575757;
	border-radius: 50%;
	opacity: 1;
}
.swpimgWrap .swiper-pagination-bullet-active{
	background-color: #f2a900;
}
.swpimgWrap .swiper-prev,.swpimgWrap .swiper-next{
	display: block;
	position: absolute;
	cursor: pointer;
	width: 70px;
	height: 70px;
	background-color: #f2a900;
	top: calc(50% - 76px);
	z-index: 10;
}
.swpimgWrap .swiper-prev{
	left: 0;
}
.swpimgWrap .swiper-prev:after,.swpimgWrap .swiper-next:after{
	content: '';
	width: 26px;
	height: 21px;
	position: absolute;
	top: calc(50% - 10.5px);
	transition: .2s ease-in-out;
}
.swpimgWrap .swiper-next{
	right: 0;
}
.swpimgWrap .swiper-prev:after{
	background:url(../img/common/arrow_left.png) no-repeat center center / contain;
	left: calc(50% - 16px);
}
.swpimgWrap .swiper-next:after{
	background:url(../img/common/arrow_right.png) no-repeat center center / contain;
	right: calc(50% - 16px);
}
.swpimgWrap .swiper-prev:hover::after{
	left: calc(50% - 21px);
}
.swpimgWrap .swiper-next:hover::after{
	right: calc(50% - 21px);
}
.contInbnr{
	width: 100%;
}
.contInbnr img{
	width: 100%;
}

@media screen and (max-width: 768px){
	.contWrap{
		width: 100%;
		padding-top: 32px;
	}
	.cont_h2{
		font-size: 2rem;
		padding-bottom: 16px;
	}
	.cont_h3{
		font-size: 2rem;
		padding-bottom: 16px;
	}
	.swpimgWrap{
		padding-bottom: 56px;
	}
	.swpimgWrap .swiper-pagination{
		height: 56px;
	}
	.swpimgWrap .swiper-pagination-bullet{
		width: 16px;
		height: 16px;
		margin: 0 10px!important;
	}
	.swpimgWrap .swiper-prev,.swpimgWrap .swiper-next{
		width: 35px;
		height: 35px;
		top: calc(50% - 43px);
	}
	.swpimgWrap .swiper-prev:after,.swpimgWrap .swiper-next:after{
		width: 13px;
		height: 10.5px;
		top: calc(50% - 5.25px);
	}
	.swpimgWrap .swiper-prev:after{
		left: calc(50% - 8px);
	}
	.swpimgWrap .swiper-next:after{
		right: calc(50% - 8px);
	}
	.swpimgWrap .swiper-prev:hover::after{
		left: calc(50% - 8px);
	}
	.swpimgWrap .swiper-next:hover::after{
		right: calc(50% - 8px);
	}
	.cont_h4{
		font-size: 1.6rem;
	}
}

.anib{
	animation: boundAni 2.4s linear 0s infinite;
}

@keyframes boundAni {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	5% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
	10% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	15% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}
	20% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

/*---------------
/* 03. Mode
---------------*/
.mode_txt{
	font-size: 20px;
	line-height: 2.1;
	font-weight: 700;
	text-align: center;
	margin-top: 20px;
}
.mode__imgList img{
	width: 100%;
}
#mode__imgWrap.nswp{
	padding-bottom: 40px;
}

@media screen and (max-width: 768px){
	.mode_txt{
		width: 94.667%;
		font-size: 1.2rem;
		margin: 20px auto 0;
	}
	#mode__imgWrap.nswp{
		padding-bottom: 30px;
	}
}

/*---------------
/* 03. crate
---------------*/
#crate .contIn{
	border: 14px solid #fff;
	background-color: #1b1b1b;
	padding-bottom: 0;
}
/*#crate .contIn{
	border: 14px solid #f2a900;
	background-color: #1b1b1b;
	padding-bottom: 38px;
}*/

.crate_txt{
	padding: 44px 48px;
	font-size: 16px;
	line-height: 2.625;
	text-align: center;
	font-weight: 700;
}
.crate_imgList img{
	width: 100%;
}
.crate_imgList{
	width: 390px;
	margin: 0 25px;
}
.crate_imgList p,.voice_imgList p{
	font-size: 16px;
	line-height: 1.75;
	text-align: center;
	padding: 0.8em 1em;
}
#voice__imgWrap {
	margin-bottom: 60px;
}
.voice_imgList img{
	width: 100%;
}
.voice_imgList{
	width: 390px;
	margin: 0 25px;
}
.voice_imgList p{
	font-size: 16px;
	line-height: 1.75;
	text-align: center;
}
.videoWrap{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.videoWrap video{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
@media screen and (max-width: 768px){
	#crate .contIn{
		width: 94.667%;
		border-width: 7px;
		padding-bottom: 0;
		margin: 0 auto;
	}
	/*#crate .contIn{
		width: 94.667%;
		border-width: 7px;
		padding-bottom: 14px;
		margin: 0 auto;
	}*/
	#crate .contInbnr{
		padding: 0;
	}
	.crate_txt{
		font-size: 1.2rem;
		padding: 16px 12px 24px;
		letter-spacing: 0.001em;
	}
	.crate_imgList{
		width: 56.0345%;
		margin: 0 3.592%;
	}
	.crate_imgList p,.voice_imgList p{
		font-size: 1.2rem;
	}
	.voice_imgList{
		width: 56.0345%;
		margin: 0 3.592%;
	}
	.voice_imgList p{
		font-size: 1.2rem;
	}
}


/*---------------
/* 04. event
---------------*/
#event .contIn{
	border: 14px solid #fff;
	background-color: #1b1b1b;
	padding-bottom: 48px;
}
.event_txtWrap{
	padding-top: 40px;
}
.event_txtWrap.eventpb.nswp{
	padding-top: 0px;
}
.event_txtWrap{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}
.event_txtWrap h3{
	font-size: 24px;
	font-weight: 700;
	padding-bottom: 42px;
	color: #f2a900;
}
.event_txtWrap p{
	font-size: 16px;
	font-weight: 400;
	line-height: 2;
	margin-bottom: 30px;
}
#event__imgWrap.eventpb.nswp{
	padding-bottom: 40px;
}
.event__imgList img{
	width: 100%;
}
@media screen and (max-width: 768px){
	#event .contIn{
		width: 94.667%;
		margin: 0 auto;
		padding-bottom: 32px;
		border-width: 7px;
	}
	.event_txtWrap{
		padding: 16px 12px 0;
	}
	.event_txtWrap.eventpb.nswp{
		padding-top: 0px;
	}
	.event_txtWrap h3{
		font-size: 1.6rem;
		padding-bottom: 16px;
	}
	.event_txtWrap p{
		font-size: 1.2rem;
	}
	#event__imgWrap.eventpb.nswp{
		padding-bottom: 30px;
	}
}


/*---------------
/* 05. twittercp
---------------*/
#twittercp{
	padding-bottom: 0;
}
#twittercp .contIn{
	border: 14px solid #29ccb1;
	background-color: #1b1b1b;
	padding-bottom: 48px;
}
#twittercp .cont_h2{
	color: #29ccb1;
}
.twcp_txt{
	padding: 0 48px 44px;
	font-size: 16px;
	line-height: 2.625;
	text-align: center;
	font-weight: 700;
}
.cp_presentWrap{
	width: 100%;
	padding: 0 54px;
}
.cp_presentWrap h3{
	font-size: 33px;
	font-weight: 900;
	line-height: 1;
	padding-bottom: 30px;
	color: #29ccb1;
	text-align: center;
}
.twcp_2nd{
	margin-top: 60px;
}
@media screen and (max-width: 768px){
	.twcp_2nd{
		margin-top: 32px;
	}
}
.cp_presentLists{
	width: 100%;
	position: relative;
	padding-bottom: 42px;
}
.cp_presentLists:after{
	content: '';
	width: 38px;
	height: 53px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 19px);
	background: url(../img/top/twittercp_arrow.svg) no-repeat center center / contain;
}
.cp_presentList{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 36px 20px;
	background-color: #29ccb1;
	margin-bottom: 12px;
}
.cp_presentList:last-child{
	margin-bottom: 0;
}
.cp_present_no{
	width: 150px;
	display: inline-block;
	background-color: #000;
	padding: 12px 0;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	color: #fff;
	font-size: 20px;
	line-height: 1;
}
.cp_present_detail{
	font-size: 20px;
	font-weight: 700;
	color: #000;
	width: calc(100% - 150px);
	padding-left: 24px;
}
.twcp_btn{
	width: 100%;
	padding-top: 15px;
}
.twcp_btn a{
	display: block;
	border: 10px solid #29ccb1;
	color: #29ccb1;
	padding: 32px 80px;
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	position: relative;
	transition: .3s ease-in-out;
}
.twcp_btn a:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: background-size .25s ease-in-out;
	background: linear-gradient(#29ccb1, #29ccb1) right bottom / 0 100% no-repeat;
}
.twcp_btn a:after{
	content: '';
	position: absolute;
	width: 16px;
	height: 11px;
	top: calc(50% - 5.5px);
	right: 32px;
	background: url(../img/top/twittercp_btn_arrow.svg)no-repeat center center / contain;
	transition: .3s ease-in-out;
}
.twcp_btn a span{
	display: inline-block;
	padding: 0 60px;
	position: relative;
}
.twcp_btn a span:before{
	content: '';
	width: 26px;
	height: 22px;
	position: absolute;
	top: calc(50% - 11px);
	left: 0;
	background: url(../img/top/twittercp_btn_twlogo.svg)no-repeat center center / contain;
	transition: .3s ease-in-out;
}

.twcp_btn a:hover{
	color: #fff;
}
.twcp_btn a:hover::before{
	background-position: left bottom;
	background-size: 100% 100%;
}
.twcp_btn a:hover::after{
	background: url(../img/top/twittercp_btn_arrow_wh.svg)no-repeat center center / contain;
	right: 27px;
}
.twcp_btn a:hover span:before{
	background: url(../img/common/sns_tw.svg)no-repeat center center / contain;
}

@media screen and (max-width: 768px){
	#twittercp {
		padding-bottom: 0px;
	}
	#twittercp .contIn{
		width: 94.667%;
		margin: 0 auto;
		border-width: 7px;
		padding: 12px 12px 32px;
	}
	.twcp_txt{
		padding: 0 0 20px;
		font-size: 1.2rem;
		letter-spacing: 0.001em;
		line-height: 2;
	}
	.cp_presentWrap{
		padding: 12px 0;
	}
	.cp_presentWrap h3{
		font-size: 1.8rem;
		padding-bottom: 16px;
	}
	.cp_presentLists{
		padding-bottom: 32px;
	}
	.cp_presentLists:after{
		width: 26px;
		height: 36px;
		left: calc(50% - 13px);
	}
	.cp_presentList{
		padding: 16px 10px;
		margin-bottom: 8px;
	}
	.cp_present_no{
		width: 75px;
		font-size: 1.2rem;
		padding: 6px 0;
	}
	.cp_present_detail{
		font-size: 1.2rem;
		padding-left: 12px;
		width: calc(100% - 75px);
	}
	.twcp_btn{
		padding-top: 8px;
	}
	.twcp_btn a{
		border-width: 5px;
		padding: 16px 32px;
		font-size: 1.4rem;
	}
	.twcp_btn a:after{
		width: 8px;
		height: 6px;
		top: calc(50% - 3px);
		right: 12px;
	}
	.twcp_btn a span{
		padding: 0 30px;
	}
	.twcp_btn a span:before{
		width: 13px;
		height: 11px;
		top: calc(50% - 5.5px);
	}
	.twcp_btn a:hover::after{
		right: 8px;
	}
}


/*---------------
/* 06. gachacp
---------------*/
#gacha {
	padding-top: 0;
	font-size: 16px;
}
#gacha .cont_h2 {
	width: 1200px;
	height: 447px;
	padding-bottom: 0;
	background: url(../img/top/gacha_bnr.jpg) no-repeat center center / contain;
}
.gacha_btn {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	margin-bottom: 56px;
}
.gacha_logo{
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: 200px;
	background: url(../img/top/gacha_logo.png) no-repeat center center / contain;
	z-index: 2;
}
.gacha_btn_bg {
	width: 100%;
	height: 480px;
	background-color: #000;
	display: flex;
	justify-content: center;
	transition: .3s ease-in-out;
}
.gacha_btn_bg::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 480px;
	transition: background-size .25s ease-in-out;
	background: linear-gradient(#f2a900, #f2a900) right bottom / 0 100% no-repeat;
}
.gacha_btn_vs{
	content: "";
	width: 450px;
	height: 545px;
	position: absolute;
	top: -30px;
	left: calc(50% - 225px);
	transition: transform .25s ease-in-out;
	z-index: 3;
}
.gacha_btn_vs span{
	width: 100%;
	height: 100%;
	display: block;
	background: url(../img/top/gacha_btn.png) no-repeat center center / contain;
}
.gacha_btn:hover{
	color: #fff;
}
.gacha_btn:hover .gacha_btn_vs{
	transform: translateY(-12px);
}
.gacha_btn:hover .gacha_btn_bg::before{
	background-position: left bottom;
	background-size: 100% 100%;
}

@media screen and (max-width: 768px){
	#gacha {
		font-size: 1.2rem;
	}
	#gacha .cont_h2{
		width: 100%;
		height: auto;
		padding-top: 56.8%;
		background: url(../img/top/gacha_bnr_sp.jpg) no-repeat center center / contain;
	}
	.gacha_btn {
		margin-bottom: 10.667%;
	}
	.gacha_logo{
		height: auto;
		padding-top: 26.667%;
		margin-top: 2.66667%;
		top: 0;
	}
	.gacha_btn_bg {
		height: auto;
		padding-top: 64%;
	}
	.gacha_btn_bg::before {
		height: 100%;
	}
	.gacha_btn_vs{
		width: 60%;
		height: auto;
		padding-top: 72.6667%;
		margin-top: -4%;
		top: 0;
		left: 20%;
	}
	.gacha_btn_vs span{
		position: absolute;
		top: 0;
	}
}


.gacha_resultWrap {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.gacha_resultLeft {
	width: 588px;
	height: 640px;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gacha_iconWrap {
	width: 510px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.gacha_iconWrap li{
	width: calc(100% / 3);
	padding: 10px;
}
.gacha_iconWrap li img{
	width: 100%;
}
.gacha_resultRight {
	width: 588px;
	/*height: 640px;*/
	background-color: #000;
	text-align: center;
	padding: 27px;
}
.gacha_wpWrap {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.gacha_wpWrap li{
	width: calc(100% / 4);
	padding: 5px;
}
.gacha_wpWrap li:nth-of-type(1){
	width: 100%;
}
.gacha_wpWrap img {
	width: 100%;
}

@media screen and (max-width: 768px){
	.gacha_resultWrap {
		flex-wrap: wrap;
		margin-bottom: 8%;
	}
	.gacha_resultList{
		width: 100%;
	}
	.gacha_resultLeft{
		width: 100%;
		height: auto;
		padding: 4% 0;
		margin-bottom: 5.6%;
	}
	.gacha_iconWrap {
		width: 89.6%;
	}
	.gacha_iconWrap li{
		padding: 1.7857%;
	}
	.gacha_resultRight{
		width: 100%;
		height: auto;
		padding: 3.2%;
	}
	.gacha_wpWrap li{
		padding: 0.8548%;
	}
}


.gacha_presentIMG{
	width: 100%;
	margin-bottom: 20px;
}
.gacha_presentIMG img{
	width: 100%;
}
.gacha_share p {
	text-align: center;
	margin-bottom: 32px;
	line-height: 2;
}

@media screen and (max-width: 768px){
	.gacha_share{
		width: 100%;
		padding: 0 5.334%;
	}
	.gacha_share p {
		margin-bottom: 16px;
	}
}


.gacha_attention {
	width: 1064px;
	margin-left: auto;
	margin-right: auto;
}
.gacha_attention ol {
	padding-left: 1.25em;
}
.gacha_attention ol li{
	text-indent: -1em;
	padding-left: 1em;
}
.cont_h4_frame {
	color: #f2a900;
	border: #f2a900 solid 8px;
	padding-top: 24px;
	margin-bottom: 30px;
}
.gacha_attention .cont_h4_frame{
	padding: 0;
}
.gacha_attention .cont_h4_frame button{
	width: 100%;
	display: block;
	padding: 32px 50px;
	position: relative;
	color: #f2a900;
	font-size: 24px;
	font-weight: 700;
	transition: .3s ease-in-out;
}
.gacha_attention .cont_h4_frame button:hover{
	color: #000;
}
.gacha_attention .cont_h4_frame button span{
	position: relative;
}
.gacha_attention .cont_h4_frame button:after{
	content: '';
	width: 11px;
	height: 16px;
	background: url(../img/top/gacha_attention_arrow.svg) no-repeat center center / contain;
	position: absolute;
	top: calc(50% - 8px);
	right: 38px;
	transition: .25s ease-in-out;
}
.gacha_attention .cont_h4_frame button:hover::after{
	background: url(../img/top/gacha_attention_arrow_hv.svg) no-repeat center center / contain;
}
.gacha_attention .cont_h4_frame button.is-show::after{
	transform: rotate(-180deg);
}
.gacha_attention .cont_h4_frame button:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: background-size .25s ease-in-out;
	background: linear-gradient(#f2a900, #f2a900) right bottom / 0 100% no-repeat;
}
.gacha_attention .cont_h4_frame button:hover::before{
	background-position: left bottom;
	background-size: 100% 100%;
}
@media screen and (max-width: 768px){
	.gacha_attention{
		width: 100%;
		padding: 0 8%;
	}
	.cont_h4_frame {
		border-width: 5px;
	}
	.gacha_attention .cont_h4_frame button{
		padding: 16px 24px;
		font-size: 1.4rem;
	}
	.gacha_attention .cont_h4_frame button:after{
		width: 7px;
		height: 9px;
		top: calc(50% - 4.5px);
		right: 28px;
	}
	.gacha_attention ol {
		padding-left: 1em;
	}
}



.gacha_attentionWrap{
	padding: 0 10px;
	line-height: 2;
	display: none;
}
.gacha_attentionWrap p{
	text-indent: -1em;
	padding-left: 1em;
}
.gachaLists li{
	mix-blend-mode: luminosity;
}
.gachaLists li.acquired{
	mix-blend-mode: unset;
}

@media screen and (max-width: 768px){
	.gacha_attentionWrap{
		padding: 0;
	}
}


.btn_gacha_shareWrap{
	width: 100%;
	text-align: center;
	padding-top: 16px;
	padding-bottom: 64px;
}
.btn_gacha_shareWrap a{
	display: inline-block;
	padding: 32px 50px;
	line-height: 1;
	background-color: #00b1ff;
	color: #fff;
	position: relative;
}
.btn_gacha_shareWrap a span{
	display: inline-block;
	padding: 0 18px 0 68px;
	font-size: 30px;
	font-weight: 700;
	position: relative;
}
.btn_gacha_shareWrap a span:before{
	content: '';
	width: 35px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/common/sns_tw.svg) no-repeat center center / contain;
}
.btn_gacha_shareWrap a:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: background-size .25s ease-in-out;
	background: linear-gradient(#000, #000) right bottom / 0 100% no-repeat;
}
.btn_gacha_shareWrap a:hover::before{
	background-position: left bottom;
	background-size: 100% 100%;
}
@media screen and (max-width: 768px){
	.btn_gacha_shareWrap{
		padding: 0 8%;
		padding-bottom: 32px;
	}
	.btn_gacha_shareWrap a{
		padding: 16px 24px;
	}
	.btn_gacha_shareWrap a span{
		padding: 0 9px 0 34px;
		font-size: 1.8rem;
	}
	.btn_gacha_shareWrap a span:before{
		width: 18px;
		height: 18px;
	}
}

/*---------------
/* 07. generatelink
---------------*/
.generatelink a{
	display: block;
	transition: .3s ease-in-out;
}
.generatelink a:hover{
	opacity: 0.75;
}
.generatelink a img{
	width: 100%;
}

@media screen and (max-width: 768px){
	.generatelink{
		padding:0 10px 10px;
	}
}

/*---------------
/* 08. movie
---------------*/
#movie{
	padding-bottom: 100px;
}
#movie .contIn{
	background-color: #ff9f00;
}
.movieWrap{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movieWrap .youtubeIn{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.movie_txt{
	padding: 44px 48px;
	font-size: 16px;
	line-height: 2.625;
	text-align: center;
	color: #000;
	font-weight: 700;
}

@media screen and (max-width: 768px){
	#movie{
		padding: 0 10px 60px;
	}
	.movie_txt{
		padding: 16px 20px 32px;
		font-size: 1.2rem;
		letter-spacing: 0.001em;
		line-height: 2;
	}
}

/* FadeIn */
.afi{
	opacity: 0;
	transition-duration: 400ms;
	transition-property: opacity, transform;
	transform: translate(0, 56px);
}
.afi.is-fi{
	opacity: 1;
	transform: translate(0,0);
}



/*---------------
/* 09. gacha_modal
---------------*/
#gacha_movieWrap{
	width: 80%;
	margin: 0 auto;
}
#js-gacha-movPlay{
	width: 100%;
}
.gacha_movieSkip{
	width: 100%;
	text-align: center;
	padding: 50px 0;
}
#js-gacha-movSkip{
	padding: 32px 130px;
	border: 10px solid #fff;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	position: relative;
	display: inline-block;
	text-decoration: none;
	transition: color .25s ease-in-out;
}
#js-gacha-movSkip:hover{
	color: #000;
}
#js-gacha-movSkip span{
	position: relative;
}
#js-gacha-movSkip:after{
	content: '';
	position: absolute;
	width: 16px;
	height: 11px;
	top: calc(50% - 5.5px);
	right: 32px;
	background: url(../img/top/twittercp_btn_arrow_wh.svg) no-repeat center center / contain;
	transition: background .25s ease-in-out;
}
#js-gacha-movSkip:hover::after{
	background: url(../img/top/arrow_bk.svg) no-repeat center center / contain;
}
#js-gacha-movSkip:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: background-size .25s ease-in-out;
	background: linear-gradient(#fff, #fff) right bottom / 0 100% no-repeat;
}
#js-gacha-movSkip:hover::before{
	background-position: left bottom;
	background-size: 100% 100%;
}


@media screen and (max-width: 768px){
	#gacha_movieWrap{
		width: 100%;
	}
	.gacha_movieSkip{
		padding: 5.334% 0;
	}
	#js-gacha-movSkip{
		padding: 5.334% 16%;
		border-width: 5px;
		font-size: 1.4rem;
	}
	#js-gacha-movSkip:after{
		width: 7px;
		height: 9px;
		top: calc(50% - 4.5px);
		right: 28px;
	}
}

#gacha_resultWrap{
	width: 960px;
	margin: 0 auto;
	display: none;
	transition-duration: 400ms;
	transition-property: transform;
	transform: translate(0, 56px);
}
#gacha_resultWrap.is-active{
	transform: translate(0,0);
}

.result_head{
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	border: 10px solid #fff;
	padding: 32px 0;
	text-align: center;
	margin-bottom: 30px;
}

.gacha_result_imgWrap{
	width: 100%;
	margin-bottom: 30px;
}

#gacha_result_btnLists{
	width: 100%;
	display: flex;
	justify-content: center;
}
.gacha_result_btnList{
	width: 430px;
	margin: 0 15px;
}
.gacha_result_btnList a{
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	position: relative;
	width: 100%;
	height: 120px;
	border-style: solid;
	border-width: 10px;
	transition: color .25s ease-in-out;
}
.gacha_result_btnList a:hover{
	color: #fff;
}
.gacha_result_btnList a:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: background-size .25s ease-in-out;
}
.gacha_result_btnList a:hover::before{
	background-position: left bottom;
	background-size: 100% 100%;
}
.gacha_result_btnList a span{
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
	position: relative;
	display: inline-block;
}

.grbl_tw{
	color: #71b9d9;
	border-color: #71b9d9
}
.grbl_tw:before{
	background: linear-gradient(#71b9d9, #71b9d9) right bottom / 0 100% no-repeat;
}
.grbl_tw:after{
	content: '';
	position: absolute;
	width: 16px;
	height: 11px;
	top: calc(50% - 5.5px);
	right: 32px;
	transition: .25s ease-in-out;
	background: url(../img/top/grbl_tw_arrow.svg) no-repeat center center / contain;
}
.grbl_tw:hover::after{
	background: url(../img/top/twittercp_btn_arrow_wh.svg) no-repeat center center / contain;
}
.grbl_tw span{
	padding: 0 20px 0 52px;
}
.grbl_tw span:before{
	content: '';
	width: 26px;
	height: 22px;
	position: absolute;
	top: calc(50% - 11px);
	left: 0;
	background: url(../img/top/grbl_tw.svg) no-repeat center center / contain;
	transition: .25s ease-in-out;
}
.grbl_tw:hover span:before{
	background: url(../img/common/sns_tw.svg) no-repeat center center / contain;
}



.grbl_dl{
	color: #f2a900;
	border-color: #f2a900
}
.grbl_dl:after{
	content: '';
	position: absolute;
	width: 16px;
	height: 11px;
	top: calc(50% - 5.5px);
	right: 32px;
	background: url(../img/top/grbl_dl.svg) no-repeat center center / contain;
	transition: .25s ease-in-out;
}
.grbl_dl:before{
	background: linear-gradient(#f2a900, #f2a900) right bottom / 0 100% no-repeat;
}
.grbl_dl:hover::after{
	background: url(../img/top/twittercp_btn_arrow_wh.svg) no-repeat center center / contain;
}

.gacha_close{
	width: 100%;
	padding: 90px 0;
}
.gacha_close a{
	width: 150px;
	height: 88px;
	background: url(../img/top/gacha_close.svg) no-repeat center center / contain;
	display: block;
	margin: 0 auto;
	opacity: 1;
	transition: .3s ease-in-out;
}
.gacha_close a:hover{
	opacity: 0.7;
}


@media screen and (max-width: 768px){
	#gacha_resultWrap{
		width: 100%;
	}
	.result_head{
		font-size: 1.4rem;
		padding: 4.667% 0;
		margin-bottom: 4%;
	}
	.gacha_result_imgWrap{
		margin-bottom: 4%;
	}
	#gacha_result_btnLists{
		flex-wrap: wrap;
	}
	.gacha_result_btnList{
		width: 89.667%;
		margin: 0 0 12px 0;
	}
	.gacha_result_btnList a{
		border-width: 5px;
		height: auto;
		padding: 4.7905% 0;
	}
	.gacha_result_btnList a span{
		font-size: 1.4rem;
	}
	.grbl_tw:after{
		width: 7px;
		height: 9px;
		top: calc(50% - 4.5px);
		right: 28px;
	}
	.grbl_tw span{
		padding:0 0 0 24px;
	}
	.grbl_tw span:before{
		width: 13px;
		height: 11px;
		top: calc(50% - 5.5px);
	}
	.grbl_dl:after{
		width: 7px;
		height: 9px;
		top: calc(50% - 4.5px);
		right: 28px;
	}
	.gacha_close{
		padding: 6.9334% 0;
	}
	.gacha_close a{
		width: 20%;
		padding-top: 11.7334%;
		height: auto;
	}
}

/* Gacha IMG */
.gacha_result_imgIn{
	margin: 0 auto;
}
.icon_01,.icon_02,.icon_03,.icon_04,.icon_05{
	width: 300px;
}
.twitter_header{
	width: 100%;
}
.wall01_1125_2436,
.wall02_1125_2436,
.wall03_1125_2536,
.wall04_1125_2436,
.wall05_1125_2436,
.wall06_1080_1920,
.wall07_1080_1920,
.wall08_1080_1920,
.wall09_1080_1920{
	width: 480px;
}
.gacha_result_imgIn img{
	width: 100%;
}


@media screen and (max-width: 768px){
	.icon_01,.icon_02,.icon_03,.icon_04,.icon_05{
		width: 31.25%;
	}
	.wall01_1125_2436,
	.wall02_1125_2436,
	.wall03_1125_2536,
	.wall04_1125_2436,
	.wall05_1125_2436,
	.wall06_1080_1920,
	.wall07_1080_1920,
	.wall08_1080_1920,
	.wall09_1080_1920{
		width: 50%;
	}
}