@charset "UTF-8";

#screen {
	position: fixed;
	inset: 0;
	background-color: #0f0f0f;
	z-index: calc(infinity);
}

html {
	font-size: 16px;
}

@media screen and (max-width:768px) {
	html {
		font-size: 3.6458333333vw;
	}
}

body {
	width: 100%;
	background-color: #10100f;
	line-height: 1;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}

body.hidden {
	height: 100%;
	overflow: hidden;
}

@media screen and (min-width:769px) {
	body {
		min-width: 1200px;
	}
}

body img {
	max-width: 100%;
	height: auto;
}

#wrapper {
	position: relative;
}

#main {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

#main section {
	text-align: center;
	line-height: 1.6;
}

#main .inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@media screen and (max-width:768px) {
	#main .inner {
		padding: 10.4166666667vw 1.3020833333vw 0;
	}
}

#main .logo {
	position: absolute;
	top: 40px;
	left: 20px;
	left: 1%;
	width: 10%;
	max-width: 175px;
	z-index: calc(infinity);
}

@media screen and (max-width:768px) {
	#main .logo {
		top: 1.3020833333vw;
		left: 2.6041666667vw;
		width: 22.7864583333vw;
		max-width: 130px;
	}
}

@media (any-hover:hover) {
	#main .logo {
		-webkit-transition: opacity .3s;
		transition: opacity .3s;
	}
	
	#main .logo:hover {
		opacity: .5;
	}
}

#main .logo-gesoten {
	margin-top: 70px;
	display: block;
}

@media screen and (max-width:768px) {
	#main .logo-gesoten {
		margin-top: 9.1145833333vw;
	}
}

#main .share-btns {
	position: absolute;
	top: 50px;
	right: 40px;
	right: 2%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #fff;
	z-index: calc(infinity);
}

@media screen and (max-width:768px) {
	#main .share-btns {
		top: 2.6041666667vw;
	}
}

#main .share-btns__ttl {
	position: relative;
	padding-right: 40%;
	font-size: clamp(12px, 1vw, 16px);
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
	font-weight: 400;
}

@media screen and (max-width:768px) {
	#main .share-btns__ttl {
		font-size: 3.6458333333vw;
	}
}

#main .share-btns__ttl:before {
	content: "";
	position: absolute;
	top: -40%;
	right: 25%;
	width: 1px;
	height: 200%;
	background-color: white;
}

@media screen and (max-width:768px) {
	#main .share-btns__ttl:before {
		right: 5.2083333333vw;
	}
}

#main .share-list {
	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;
}

@media (any-hover:hover) {
	#main .share-list a {
		-webkit-transition: opacity .3s;
		transition: opacity .3s;
	}
	
	#main .share-list a:hover {
		opacity: .5;
	}
}

#main .share-list svg {
	width: 24px;
	fill: #fff;
}

@media screen and (max-width:768px) {
	#main .share-list svg {
		width: 3.90625vw;
	}
}

#main .share-list__item:first-of-type {
	margin-right: 1.7708333333vw;
}

@media screen and (max-width:768px) {
	#main .share-list__item:first-of-type {
		margin-right: 3.90625vw;
	}
}

/* --------------------------------------------------
	
	メインビジュアル

-------------------------------------------------- */
#visual {
	position: relative;
	/* margin-bottom: -160px;
	padding: 0 50px 95px; */
}

@media screen and (max-width:768px) {
	#visual {
		margin-bottom: -24.5520833333vw;
		padding: 19.53125vw 0 9.765625vw;
	}
}

#visual .main-ttl {
	position: relative;
	margin: auto;
	pointer-events: none;
	z-index: 1;
	/* max-width: 1200px; */
	max-width: 1920px;
	width: 100%;
	aspect-ratio: 1920 / 987;
}

@media screen and (min-width:769px) {
	#visual .main-ttl {
		overflow: hidden;
	}
}

@media screen and (max-width:768px) {
	#visual .main-ttl {
		width: 100%;
		height: 68.67vw;
	}
}

#visual .main-ttl__main01, #visual .main-ttl__part02, #visual .main-ttl__part07, #visual .main-ttl__sub {
	position: absolute;

}

#visual .main-ttl__main01 {
	top: 24.3%;
	right: 0;
	left: 0;
	margin: auto;
}

#visual .main-ttl__main01 img {
	width: 37%;
}

/*
@media screen and (max-width:1600px) {
	#visual .main-ttl__main01 img {
		min-width: 800px;
	}
}
*/

@media screen and (max-width:768px) {
	#visual .main-ttl__main01 img {
		min-width: auto;
	}
}

#visual .main-ttl__main02 {
	position: absolute;
	left: 0;
	bottom: 0;
}

#visual .main-ttl__part01 {
	position: absolute;
	bottom: 26.8%;
	left: 19.8%;
	width: 8.2%;
}

#visual .main-ttl__part03 {
	position: absolute;
	top: 9%;
	right: 17.8%;
	width: 10.5%;
}

#visual .main-ttl__part04 {
	position: absolute;
	bottom: 17%;
	right: 10%;
	width: 17.38%;
}

#visual .main-ttl__part05 {
	position: absolute;
	bottom: 25%;
	right: 22%;
	width: 11.15%;
}

#visual .main-ttl__part06 {
	position: absolute;
	top: 18.2%;
	left: 15.2%;
	width: 14.8%;
}

.main-ttl__bg {
	position: absolute;
	top: -36.07%;     /* -356 / 987 */
	right: -15.83%;   /* -304 / 1920 */
	width: 70.83%;    /* 1360 / 1920 */
}
@media screen and (max-width:768px) {
	.main-ttl__bg {
		top: 1.333333vw;
		left: 21vw;
		width: 58vw;
	}
}

.main-unit__img01 {
	position: absolute;
    top: -43.25%;
    right: -23.25%;
    width: 82.55%;
	z-index: 4;
}
@media screen and (max-width:768px) {
	.main-unit__img01 {
        top: -45.6vw;
        right: -57.4vw;
        width: 135%;
	}
}
.main-unit__img02 {
	position: absolute;
    top: -24.82%;
    left: -16.01%;
    width: 72.52%;
	z-index: 2;
}
@media screen and (max-width:768px) {
	.main-unit__img02 {
        top: -42.733333vw;
        left: -32.666666vw;
        width: 139%;
	}
}

.main-unit__img03 {
	position: absolute;
    top: -24%;
    left: -16.2%;
    width: 71%;
    z-index: 3;
}
@media screen and (max-width:768px) {
	.main-unit__img03 {
        top: -9.733333vw;
        left: -33.666666vw;
        width: 92%;
	}
}

.main-unit__img04 {
	position: absolute;
	top: -47.62%;     /* -470 / 987 */
	right: -22.60%;   /* -434 / 1920 */
	width: 78.13%;    /* 1500 / 1920 */
	z-index: 1;
}
@media screen and (max-width:768px) {
	.main-unit__img04 {
		top: -40.6vw;
        right: -29.4vw;
        width: 97%;
	}
}

.main-ttl__txt01 {
	position: absolute;
	top: 20.77%;      /* 205 / 987 */
	left: 35.42%;     /* 680 / 1920 */
	width: 27.45%;    /* 527 / 1920 */
	z-index: 5;
}
@media screen and (max-width:768px) {
.main-ttl__txt01 {
	top: 11vw;
	left: 25vw;
	width: 47vw;
	}
}

.main-ttl__txt02 {
	position: absolute;
	top: 28.87%;      /* 285 / 987 */
	left: 26.67%;     /* 512 / 1920 */
	width: 45.00%;    /* 864 / 1920 */
}
@media screen and (max-width:768px) {
	.main-ttl__txt02 {
		top: 17.166666vw;
		left: 21.2vw;
		width: 57.6vw;
	}
}

.main-ttl__txt03 {
	position: absolute;
	top: 62.92%;      /* 621 / 987 */
	left: 35.31%;     /* 678 / 1920 */
	width: 27.76%;    /* 533 / 1920 */
}
@media screen and (max-width:768px) {
	.main-ttl__txt03 {
		top: 39.533333vw;
		left: 32.233333vw;
		width: 35.533333vw;
	}
}

.main-ttl__txt04 {
	position: absolute;
	top: 73.35%;      /* 724 / 987 */
	left: 41.09%;     /* 789 / 1920 */
	width: 16.46%;    /* 316 / 1920 */
}
@media screen and (max-width:768px) {
	.main-ttl__txt04 {
		top: 44.866666vw;
		left: 39.46666vw;
		width: 21.066666vw;
	}
}


#main .ttl {
	position: relative;
	margin: -30px auto 0;
	display: inline-block;
}

@media screen and (max-width:768px) {
	#main .ttl {
		width: 95%;
		margin-bottom: 6.5104166667vw;
	}
}

#main .frame {
	position: relative;
	width: 95%;
	max-width: 1216px;
	margin: auto;
}

@media screen and (max-width:768px) {
	#main .frame {
        width: 100%;
    }
}

#main .frame .note {
	width: 85%;
	margin: auto;
	font-weight: 400;
	font-size: 16px;
	color: #bbb;
}

@media screen and (max-width:768px) {
	#main .frame .note {
        width: 78%;
		font-size: 3.3854166667vw;
	}
}

#main .frame-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	pointer-events: none;
}
.frame-txt__left {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	width: 50px;
}
.frame-txt__right {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 50px;
}
@media screen and (max-width:768px) {
.frame-txt__left {
	left: 0vw;
	width: 5.333333vw;
}
.frame-txt__right {
	right: 0;
	width: 5.333333vw;
}
}

#main .frame-bg__middle {
	height: 100%;
	background: url("../img/frame_middle.webp") repeat-y top center;
	background-size: 100% auto;
}

#main .frame__inner {
	position: relative;
	width: 100%;
	padding: 120px 110px 180px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: 500;
	font-size: 18px;
	color: #fff;
	z-index: 1;
}

@media screen and (max-width:768px) {
	#main .frame__inner {
		padding: 15.625vw 0;
		font-size: 3.6458333333vw;
		text-align: left;
	}
}

#main .frame__ttl {
	width: 100%;
	margin: 0 auto 30px;
	filter: drop-shadow(0 0 10px rgba(255, 243, 139, 0.3));
}

#main .frame__ttl:not(:first-of-type) {
	margin-top: 70px;
}

@media screen and (max-width:768px) {
	#main .frame__ttl {
        width: 80%;
		margin-bottom: 3.90625vw;
	}
	
	#main .frame__ttl:not(:first-of-type) {
		margin-top: 9.1145833333vw;
	}
}

#main .frame__ttl img {
	width: 100%;
}

@media screen and (max-width:768px) {
	#main .frame__txt {
		width: 78%;
		margin: auto;
	}
}

#main .frame__txt .is--focus {
	font-size: 111%;
	/*
	background-image: url(../img/grad.jpg);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: transparent;
		*/
		color: #00beca;
}

#main .btn {
	position: relative;
	width: 466px;
	height: auto;
	margin: auto;
	display: block;
}

@media (any-hover:hover) {
	#main .btn {
		-webkit-transition: -webkit-filter .3s;
		transition: -webkit-filter .3s;
		transition: filter .3s;
		transition: filter .3s, -webkit-filter .3s;
	}
	
	#main .btn .btn__txt:after {
		-webkit-transition: -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
		transition: -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
		transition: transform .5s cubic-bezier(.25, 1, .5, 1);
		transition: transform .5s cubic-bezier(.25, 1, .5, 1), -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
	}
	
	#main .btn:hover {
		-webkit-filter: drop-shadow(0px 0 .5rem rgba(0, 0, 0, .5)) brightness(140%);
		filter: drop-shadow(0px 0 .5rem rgba(0, 0, 0, .5)) brightness(140%);
	}
	
	#main .btn:hover .btn__txt:after {
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
	}
}

@media screen and (max-width:768px) {
	#main .btn {
		width: 75%;
		height: auto;
		padding: 4.5572916667vw 2.6041666667vw;
	}
}

#main .btn.is--back {
	margin-top: 100px;
}

@media screen and (max-width:768px) {
	#main .btn.is--back {
		margin-top: 13.0208333333vw;
	}
}

#main .btn.is--back .btn__txt:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -6%;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #2a210c;
	-webkit-filter: drop-shadow(0px 2px 0 #f0e356);
	filter: drop-shadow(0px 2px 0 #f0e356);
}

@media screen and (max-width:768px) {
	#main .btn.is--back .btn__txt:after {
		border-width: 1.3020833333vw 0 1.3020833333vw 2.0833333333vw;
		-webkit-filter: drop-shadow(0px 1px 0 #f0e356);
		filter: drop-shadow(0px 1px 0 #f0e356);
	}
}

#main .btn.is--disabled {
	-webkit-filter: brightness(50%);
	filter: brightness(50%);
	pointer-events: none;
}

#main .btn__txt {
	position: relative;
	font-size: 24px;
	font-weight: 900;
	color: #2a210c;
	text-shadow: 0px 2px 0 #f0e356;
}

@media screen and (max-width:768px) {
	#main .btn__txt {
		width: 100%;
		font-size: 3.6458333333vw;
		text-shadow: 0px 1px 0 #f0e356;
	}
}

@media screen and (max-width:768px) {
	#main .pc-only {
		display: none;
	}
}

@media screen and (min-width:769px) {
	#main .sp-only {
		display: none;
	}
}

#main .notice {
	font-size: 1.2rem;
	line-height: 1.4;
	color: #fff;
	text-align: center;
}

#attention {
	position: relative;
	background-color: #10100f;
	color: #bbb;
	z-index: 1;
}

#attention .inner {
	padding: 115px 50px 100px;
}

@media screen and (max-width:768px) {
	#attention .inner {
		padding: 14.9739583333vw 5.2083333333vw 13.0208333333vw;
	}
}

#attention .ttl {
	font-size: 24px;
	margin-bottom: 75px;
	text-align: center;
}

@media screen and (max-width:768px) {
	#attention .ttl {
		font-size: 5.2083333333vw;
		margin-bottom: 9.765625vw;
	}
}

#attention .attention-list {
	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;
	text-align: left;
}

#attention .attention-list__ttl {
	width: 21%;
	min-width: 200px;
	padding: 20px 0;
	border-bottom: solid 2px #8f8d89;
	font-weight: 500;
}

#attention .attention-list__ttl:first-of-type {
	border-top: solid 2px #8f8d89;
}

@media screen and (max-width:768px) {
	#attention .attention-list__ttl {
		width: 100%;
		padding: 3.90625vw 0;
		border-bottom: dashed 1px #8f8d89;
		text-align: center;
	}
}

#attention .attention-list__detail {
	width: 76%;
	padding: 20px 0;
	border-bottom: dashed 1px #8f8d89;
}

@media screen and (min-width:769px) {
	#attention .attention-list__detail:first-of-type {
		border-top: dashed 1px #8f8d89;
	}
}

@media screen and (max-width:768px) {
	#attention .attention-list__detail {
		width: 100%;
		padding: 3.90625vw 0;
		border-bottom: solid 2px #8f8d89;
	}
}

#attention .attention-list__txt {
	margin-left: 1rem;
	text-indent: -.5rem;
}

#attention .note {
	margin-left: 1rem;
	text-indent: -1rem;
}

#attention a {
	color: inherit;
	text-decoration: underline;
}

@media (any-hover:hover) {
	#attention a:hover {
		text-decoration: none;
	}
}

#swiper {
	position: relative;
}

#swiper .swiper-button-next, #swiper .swiper-button-prev {
	position: absolute;
	top: 40%;
	max-width: 113px;
	z-index: 10;
}

@media screen and (min-width:769px) {
	#swiper .swiper-button-next, #swiper .swiper-button-prev {
		left: 0;
		right: 0;
		margin: auto;
	}
}

@media screen and (max-width:768px) {
	#swiper .swiper-button-next, #swiper .swiper-button-prev {
		top: 37%;
		width: 15%;
	}
}

@media (any-hover:hover) {
	#swiper .swiper-button-next, #swiper .swiper-button-prev {
		-webkit-transition: -webkit-filter .3s;
		transition: -webkit-filter .3s;
		transition: filter .3s;
		transition: filter .3s, -webkit-filter .3s;
	}
	
	#swiper .swiper-button-next:hover, #swiper .swiper-button-prev:hover {
		-webkit-filter: brightness(140%);
		filter: brightness(140%);
		-webkit-animation: none !important;
		animation: none !important;
	}
}

#swiper .swiper-button-prev {
	left: -880px;
	-webkit-animation: arrow_prev 1s ease-in-out infinite alternate;
	animation: arrow_prev 1s ease-in-out infinite alternate;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes arrow_prev {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	
	to {
		-webkit-transform: translateX(-5%);
		transform: translateX(-5%);
	}
}

@keyframes arrow_prev {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	
	to {
		-webkit-transform: translateX(-5%);
		transform: translateX(-5%);
	}
}

@media screen and (max-width:768px) {
	#swiper .swiper-button-prev {
		left: -7%;
	}
}

#swiper .swiper-button-next {
	right: -880px;
	-webkit-animation: arrow_next 1s ease-in-out infinite alternate;
	animation: arrow_next 1s ease-in-out infinite alternate;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes arrow_next {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	
	to {
		-webkit-transform: translateX(5%);
		transform: translateX(5%);
	}
}

@keyframes arrow_next {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	
	to {
		-webkit-transform: translateX(5%);
		transform: translateX(5%);
	}
}

@media screen and (max-width:768px) {
	#swiper .swiper-button-next {
		right: -7%;
	}
}

#swiper .swiper-pagination {
	margin-top: 40px;
	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;
	gap: 10px;
}

@media screen and (max-width:768px) {
	#swiper .swiper-pagination {
        margin-top: 0;
        margin-bottom: 0;
		gap: 1.3020833333vw;
	}
}

#swiper .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
    border-radius: 10px;
	background-color: #fff;
	display: block;
	-webkit-transition: background-color .3s, -webkit-transform .3s;
	transition: background-color .3s, -webkit-transform .3s;
	transition: background-color .3s, transform .3s;
	transition: background-color .3s, transform .3s, -webkit-transform .3s;
	cursor: pointer;
}

@media screen and (max-width:768px) {
	#swiper .swiper-pagination-bullet {
		width: 1.3020833333vw;
		height: 1.3020833333vw;
	}
}

#swiper .swiper-pagination-bullet-active {
	background-color: #8df8ff;
	pointer-events: none;
    box-shadow: 0 0 5px #00beca, 0 0 5px #00beca, 0 0 10px #00beca, 0 0 15px #00beca;
}

.is--animation-opacity {
	opacity: 0;
	pointer-events: none;
	display: block;
}

.is--animation-opacity.is--animation {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}

.is--animation-opacity.is--animation#fixed-btn {
	-webkit-transition-delay: 2s;
	transition-delay: 2s;
}

.is--animation-bottom {
	opacity: 0;
	-webkit-transform: translateY(10%);
	transform: translateY(10%);
	pointer-events: none;
	display: block;
}

.is--animation-bottom.is--animation {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	pointer-events: auto;
	-webkit-transition: opacity .5s, -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .5s, -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .5s, transform .5s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .5s, transform .5s cubic-bezier(.25, 1, .5, 1), -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
}

.is--animation-left {
	opacity: 0;
	-webkit-transform: translateX(-30%);
	transform: translateX(-30%);
	-webkit-filter: brightness(140%);
	filter: brightness(140%);
	pointer-events: none;
	display: block;
	will-change: filter;
}

.is--animation-left.is--animation {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-filter: brightness(100%);
	filter: brightness(100%);
	pointer-events: auto;
	-webkit-transition: opacity .3s, -webkit-filter 1s, -webkit-transform .5s cubic-bezier(.34, 1.56, .64, 1);
	transition: opacity .3s, -webkit-filter 1s, -webkit-transform .5s cubic-bezier(.34, 1.56, .64, 1);
	transition: opacity .3s, filter 1s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
	transition: opacity .3s, filter 1s, transform .5s cubic-bezier(.34, 1.56, .64, 1), -webkit-filter 1s, -webkit-transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.is--animation-left.is--animation.visual__unit.is--01 {
	-webkit-transition-delay: .4s, .4s, .4s;
	transition-delay: .4s, .4s, .4s;
}

.is--animation-left.is--animation.visual__unit.is--03 {
	-webkit-transition-delay: .6s, .6s, .6s;
	transition-delay: .6s, .6s, .6s;
}

.is--animation-right {
	opacity: 0;
	-webkit-transform: translateX(30%);
	transform: translateX(30%);
	-webkit-filter: brightness(140%);
	filter: brightness(140%);
	pointer-events: none;
	display: block;
	will-change: filter;
}

.is--animation-right.is--animation {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-filter: brightness(100%);
	filter: brightness(100%);
	pointer-events: auto;
	-webkit-transition: opacity .3s, -webkit-filter 1s, -webkit-transform .5s cubic-bezier(.34, 1.56, .64, 1);
	transition: opacity .3s, -webkit-filter 1s, -webkit-transform .5s cubic-bezier(.34, 1.56, .64, 1);
	transition: opacity .3s, filter 1s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
	transition: opacity .3s, filter 1s, transform .5s cubic-bezier(.34, 1.56, .64, 1), -webkit-filter 1s, -webkit-transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.is--animation-right.is--animation.visual__unit.is--02 {
	-webkit-transition-delay: .4s, .4s, .4s;
	transition-delay: .4s, .4s, .4s;
}

.is--animation-right.is--animation.visual__unit.is--04 {
	-webkit-transition-delay: .6s, .6s, .6s;
	transition-delay: .6s, .6s, .6s;
}

.is--animation-step {
	opacity: 0;
	pointer-events: none;
	display: block;
}

.is--animation-step:after {
	opacity: 0;
}

@media screen and (min-width:769px) {
	.is--animation-step {
		-webkit-transform: translateX(-10%);
		transform: translateX(-10%);
	}
	
	.is--animation-step:after {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@media screen and (max-width:768px) {
	.is--animation-step:after {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
}

.is--animation-step.is--animation {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition: opacity .3s, -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .3s, -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .3s, transform .5s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .3s, transform .5s cubic-bezier(.25, 1, .5, 1), -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
}

.is--animation-step.is--animation:after {
	opacity: 1;
	-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .5s .1s, -webkit-transform .5s .1s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .5s .1s, transform .5s .1s cubic-bezier(.25, 1, .5, 1);
	transition: opacity .5s .1s, transform .5s .1s cubic-bezier(.25, 1, .5, 1), -webkit-transform .5s .1s cubic-bezier(.25, 1, .5, 1);
}

.is--animation-step.is--animation:nth-of-type(2) {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}

@media screen and (min-width:769px) {
	.is--animation-step.is--animation {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	
	.is--animation-step.is--animation:after {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@media screen and (max-width:768px) {
	.is--animation-step.is--animation:after {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.is--animation-burst {
	opacity: 0;
	pointer-events: none;
	display: block;
}

.is--animation-burst.is--animation {
	pointer-events: auto;
	-webkit-animation: animation_burst .3s linear;
	animation: animation_burst .3s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.is--animation-burst.is--animation.pv-list__item:nth-of-type(2n) {
	-webkit-animation-delay: .1s;
	animation-delay: .1s;
}

@media screen and (min-width:769px) {
	.is--animation-burst.is--animation.prize-list__item:nth-of-type(3n+2) {
		-webkit-animation-delay: .1s;
		animation-delay: .1s;
	}
	
	.is--animation-burst.is--animation.prize-list__item:nth-of-type(3n) {
		-webkit-animation-delay: .2s;
		animation-delay: .2s;
	}
}

@media screen and (max-width:768px) {
	.is--animation-burst.is--animation.prize-list__item:nth-of-type(2n) {
		-webkit-animation-delay: .1s;
		animation-delay: .1s;
	}
}

@-webkit-keyframes animation_burst {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		transform: scale(.8);
	}
	
	40% {
		opacity: 1;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	
	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes animation_burst {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		transform: scale(.8);
	}
	
	40% {
		opacity: 1;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	
	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

#fixed-btn {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	z-index: calc(infinity);
}

@media screen and (min-width:769px) {
	#fixed-btn {
		width: 20%;
		max-width: 336px;
	}
}

@media (any-hover:hover) {
	#fixed-btn .btn-start {
		-webkit-transition: -webkit-filter .3s;
		transition: -webkit-filter .3s;
		transition: filter .3s;
		transition: filter .3s, -webkit-filter .3s;
	}
	
	#fixed-btn .btn-start .btn__txt:after {
		-webkit-transition: -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
		transition: -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
		transition: transform .5s cubic-bezier(.25, 1, .5, 1);
		transition: transform .5s cubic-bezier(.25, 1, .5, 1), -webkit-transform .5s cubic-bezier(.25, 1, .5, 1);
	}
	
	#fixed-btn .btn-start:hover {
		-webkit-filter: drop-shadow(0px 0 .5rem rgba(0, 0, 0, .5)) brightness(140%);
		filter: drop-shadow(0px 0 .5rem rgba(0, 0, 0, .5)) brightness(140%);
	}
	
	#fixed-btn .btn-start:hover .btn__txt:after {
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
	}
}

#fixed-btn img {
	width: 100%;
}

#yahoo_header {
	position: relative;
	height: 100px;
	min-width: 1200px;
	width: 100%;
	background: url("../img/common/header_bg.png") no-repeat top center;
	background-size: 100% 100%;
	margin-bottom: -48px;
	z-index: calc(infinity);
}

@media screen and (max-width:768px) {
	#yahoo_header {
		display: none;
	}
}

#yahoo_header .inner {
	width: 990px;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

#yahoo_header .inner .bno {
	position: absolute;
	top: 15px;
	left: 0px;
}

#yahoo_header .inner .ygame {
	position: absolute;
	top: 10px;
	right: 0;
}

#yahoo_header .inner .ygame img {
	width: auto;
	height: 34px;
}

#yahoo_header .inner .cp_logo {
	position: absolute;
	top: 93px;
	left: 213px;
}

#dmm_ntgnavi {
	background: url("../img/common/dg/bg_navimain.gif") center center repeat-x;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	font-size: 12px;
	font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Verdana, sans-serif;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#dmm_ntgnavi a {
	outline: none;
}

#dmm_ntgnavi ul {
	list-style: none;
	margin: 2px 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 50%;
}

#dmm_ntgnavi ul li {
	margin: 0 6px 0 0;
	line-height: 15px;
}

#dmm_ntgnavi .navi_left li.dmm_top img {
	margin: 8px 5px 8px 0;
}

#dmm_ntgnavi .navi_left li.ntg_top {
	margin-left: 10px;
}

#dmm_ntgnavi .navi_left li.ntg_top span {
	background: url("../img/common/dg/bg_bt_olgtop.gif") 0 center no-repeat;
}

@media screen and (max-width:768px) {
	#dmm_ntgnavi .navi_left li.ntg_poi {
		display: none;
	}
}

#dmm_ntgnavi .navi_left li.ntg_poi span {
	background: url("../img/common/dg/bg_bt_point.gif") 0 center no-repeat;
}

#dmm_ntgnavi .navi_left li>a {
	display: block;
	padding: 0 3px 0 8px;
	text-decoration: none;
	border: 1px solid #eee;
	border-radius: 3px;
}

@media (any-hover:hover) {
	#dmm_ntgnavi .navi_left li>a:hover {
		background: #eee;
		border: 1px solid #666;
		border-radius: 3px;
	}
}

#dmm_ntgnavi .navi_left li>a span {
	display: block;
	padding: 9px 10px 7px 28px;
	color: #333;
	font-weight: bold;
}

#dmm_ntgnavi .navi_right {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	font-size: 10px;
}

#dmm_ntgnavi .navi_right li {
	margin: 0 10px 0 0;
	padding: 8px 5px;
}

#dmm_ntgnavi .navi_right a {
	color: #3c3c46;
	text-decoration: none;
}

#dmm_ntgnavi .arrow {
	padding-left: 14px;
	background: url("../img/common/dg/arrow_common.gif") no-repeat left center;
}

#dmm_ntgnavi .tx-point {
	font-size: 16px;
	font-weight: bold;
	color: #ff4b4b !important;
}

#dmm_ntgnavi p {
	margin: 0;
	line-height: 2.6em;
}

#dmm_ntgnavi .clear {
	clear: both;
}