@charset "utf-8";


/*
---------------------------------------------
メインビジュアルのアニメーション設定
---------------------------------------------
*/
.nightwalk {
	position: fixed;
	margin: auto;
	overflow: hidden;
	z-index: 0;
	width: 100%;
	height: calc(100vh - 80px);
	top: 84px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 375px;
	background: linear-gradient(#5c697e 17%, #dbdedf 85%, #ae8e6e);
	will-change: animation;;
}
.sidewalk {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: calc(100% - 197px);
	top: 197px;
}
.fall {
	height: 120vh;
	position: relative;
	z-index: 2;
	background: linear-gradient(#b63c87, #000734 30%, #000734 70%);
	animation-name: fall;
	animation-duration: 4s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
	will-change: animation;;
}
@keyframes fall {
	0% {
			height: 120vh;
	}
	100% {
			height: 0;
	}
}
.sidewalk_outer {
	position: relative;
	display: block;
	z-index: -1;
	width: 100%;
	height: 100vh;
	top: 0;
}
@media screen and (max-width: 1024px) {
	.nightwalk {
			height: calc(100vh - 52px);
	}
}

.sidewalk_outer::before {
	content: "";
	position: absolute;
	z-index: 4;
	height: 2px;
	width: 100%;
	background: #000734;
	top: -1px;
}
.layer_02 {
	position: absolute;
	display: block;
	z-index: 2;
	width: 187.5px;
	height: auto;
	top: -33px;
}
.shop_L {
	left: 0;

}
.shop_R {
	right: 0;
}
.persons {
	position: absolute;
	z-index: 5;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	will-change: animation;;
}
.persons img {
	position: absolute;
	animation-iteration-count: infinite;
}
.right {
	filter: drop-shadow(-10px 40px 8px rgba(50, 50, 50, 0.2));
}
.left {
	filter: drop-shadow(10px 40px 8px rgba(50, 50, 50, 0.2));
}
.asset01 {
	top: 100px;
	right: 130px;
	height: 106px;
	animation: ticktock 1s ease, move11 10s linear;
}
.asset02 {
	top: 90px;
	left: 89px;
	height: 103px;
	animation: ticktock 1s ease, move05 10s linear;
}
.asset03 {
	top: 40px;
	right: 152px;
	height: 65px;
	animation: ticktock 1s ease, move01 10s linear;
}
.asset04 {
	top: 35px;
	left: 192px;
	height: 42px;
	animation: ticktock 1s ease, move06 10s linear;
}
.asset05 {
	top: 18px;
	left: 178px;
	height: 33px;
	animation: ticktock 1s ease, move07 10s linear;
}
.asset06 {
	top: -3px;
	right: 167px;
	height: 30px;
	animation: ticktock 1s ease, move01 10s linear;
	animation-delay: 2s
}
/*人物追加*/
.asset08 {
	top: 95px;
	left: 150px;
	height: 60px;
	animation: ticktock 1s ease;
}
.asset09 {
	top: 160px;
	height: 160px;
	animation: ticktock 1s ease, RtoL 10s linear;
}
.asset10 {
	top: 75px;
	right: 45%;
	height: 80px;
	animation: ticktock 1s ease;
	animation-delay: .5s
}
.asset11 {
	top: 145px;
	left: 120px;
	height: 120px;
	animation: ticktock 1s ease, move011 3s linear alternate;
	animation-delay: .5s
}
.asset12 {
	top: 90px;
	left: 40%;
	height: 90px;
	animation: ticktock 1s ease;
}
.asset13 {
	top: 95px;
	left: 30%;
	height: 60px;
	animation: ticktock 1s ease, BtoT 10s linear alternate;
}
.asset14 {
	top: 250px;
	height: 200px;
	animation: ticktock 1s ease, LtoR 10s linear;
}
.asset15 {
	top: 35px;
	right: 40%;
	height: 55px;
	animation: ticktock 1s ease, TtoB 11s linear alternate;
}
@keyframes move01 {
	0% {
			transform: scale(1, 1);
	}
	48% {
			transform: scale(1.2) translate(20px, 20px);
	}
	50% {
			transform: scale(1.2, 1.2) translate(20px, 20px);
	}
	98% {
			transform: scale(1, 1) translate(0);
	}
}
@keyframes move02 {
	0% {
			transform: scale(1, 1);
	}
	15% {}
	20% {}
	29% {
			transform: scale(1, 1);
	}
	30% {
			transform: scale(1, 1);
	}
	59% {
			transform: scale(1, 1);
	}
	60% {
			transform: scale(1, 1);
	}
	80% {}
	100% {
			transform: scale(1, 1);
	}
}
@keyframes ticktock {
	0% {
			transform: rotate(0deg);
	}
	25% {
			transform: rotate(3deg);
	}
	50% {
			transform: rotate(0deg);
	}
	75% {
			transform: rotate(-3deg);
	}
	100% {
			transform: rotate(0deg);
	}
}
@keyframes RtoL {
	0% {
			right: -50px
	}
	100% {
			right: 100vw
	}
}
@keyframes LtoR {
	0% {
			left: -50px
	}
	100% {
			left: 100vw
	}
}
@keyframes BtoT {
	0% {
			top: 95px;
			left: 30%;
			height: 80px;
	}
	100% {
			top: 45px;
			left: 40%;
			height: 60px;
	}
}
@keyframes TtoB {
	0% {
			top: 35px;
			right: 40%;
			height: 55px;
	}
	100% {
			top: 85px;
			right: 30%;
			height: 75px;
	}
}
@keyframes move011 {
	0% {}
	100% {
			left: 30%
	}
}
@keyframes move11 {
	0% {
			top: 100px;
			right: 130px;
			height: 106px;
	}
	25% {
			top: 80px;
			right: 140px;
			height: 85px;
	}
	26% {
			transform: scaleX(1)
	}
	27% {
			transform: scaleX(1);
	}
	50% {
			top: 90px;
			right: 80px;
			height: 95px;
			opacity: 1;
			transform: scaleX(1);
	}
	52% {
			opacity: 0;
	}
	73% {
			opacity: 0;
	}
	75% {
			top: 90px;
			right: 80px;
			height: 95px;
			opacity: 1;
			transform: scaleX(1)
	}
	100% {
			top: 100px;
			right: 130px;
			height: 106px;
	}
}
@keyframes move04 {
	0% {
			transform: scale(1, 1);
	}
	25% {
			transform: scale(.85) translate(-10px, -20px);
	}
	27% {
			transform: scale(-.85, .85) translate(10px, -20px);
	}
	50% {
			transform: scale(-.95, .95) translate(-50px, -10px);
	}
	52% {
			transform: scale(-.95, .95) translate(-50px, -10px);
			opacity: 1;
	}
	54% {
			transform: scale(-.95, .95) translate(-50px, -10px);
			opacity: 0;
	}
	75% {
			transform: scale(.95, .95) translate(50px, -10px);
			opacity: 0
	}
	77% {
			transform: scale(.95, .95) translate(50px, -10px);
			opacity: 1;
	}
	98% {
			transform: scale(1, 1) translate(0);
	}
}
@keyframes move12 {
	0% {
			top: 90px;
			left: 89px;
			height: 103px;
	}
	25% {
			top: 130px;
			left: 99px;
			height: 120px;
			transform: scaleX(1);
	}
	27% {
			transform: scaleX(-1);
	}
	50% {
			top: 90px;
			left: 89px;
			height: 103px;
			opacity: 1;
			transform: scaleX(-1);
	}
	52% {
			opacity: 0
	}
	73% {
			opacity: 0;
			transform: scaleX(1);
	}
	75% {
			opacity: 1
	}
}
@keyframes move05 {
	0% {
			transform: scale(1, 1);
	}
	25% {
			transform: scale(1.2) translate(10px, 40px);
	}
	27% {
			transform: scale(1.2, 1.2) translate(-10px, 40px);
	}
	50% {
			transform: scale(1, 1) translate(0px, 0px);
	}
	52% {
			transform: scale(1, 1) translate(0px, 0px);
			opacity: 1;
	}
	54% {
			transform: scale(1, 1) translate(0px, 0px);
			opacity: 0;
	}
	75% {
			transform: scale(1, 1) translate(0px, 0px);
			opacity: 0
	}
	77% {
			transform: scale(1, 1) translate(0px, 0px);
			opacity: 1;
	}
	98% {
			transform: scale(1, 1) translate(0);
	}
}
@keyframes move06 {
	0% {
			transform: scale(1, 1);
	}
	48% {
			transform: scale(1) translate(20px, 0);
	}
	50% {
			transform: scale(1, 1) translate(-20px, 0);
	}
	98% {
			transform: scale(1, 1) translate(0);
	}
}
@keyframes move07 {
	0% {
			transform: scale(1, 1);
	}
	38% {
			transform: scale(1) translate(5px, -20px);
			opacity: 1;
	}
	39% {
			transform: scale(1) translate(5px, -20px);
			opacity: 0;
	}
	50% {
			transform: scale(1, 1) translate(-5px, -20px);
			opacity: 0;
	}
	51% {
			transform: scale(1, 1) translate(-5px, -20px);
			opacity: 0;
	}
	62% {
			transform: scale(1, 1) translate(-5px, -20px);
			opacity: 1;
	}
	98% {
			transform: scale(1, 1) translate(0);
	}
}
.layer_03 {
	position: absolute;
	display: block;
	z-index: 3;
	width: 100%;
	height: 223.38px;
	top: 0;
}
.layer_04 {
	position: fixed;
	display: block;
	z-index: 4;
	width: 318.75px;
	height: auto;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	animation-name: flicker;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-delay: .8s;
	filter: grayscale(1)
}
@keyframes flicker {
	0% {
			filter: grayscale(0)
	}
	3% {
			filter: grayscale(1)
	}
	4% {
			filter: grayscale(0)
	}
	5% {
			filter: grayscale(1)
	}
	6% {
			filter: grayscale(0)
	}
	58.5% {
			filter: grayscale(0)
	}
	59.0% {
			filter: grayscale(1)
	}
	59.5% {
			filter: grayscale(0)
	}
	60% {
			filter: grayscale(1)
	}
	61% {
			filter: grayscale(0)
	}
	96% {
			filter: grayscale(0)
	}
	97.0% {
			filter: grayscale(1)
	}
	97.5% {
			filter: grayscale(0)
	}
	98.0% {
			filter: grayscale(1)
	}
	98.5% {
			filter: grayscale(0)
	}
	99.0% {
			filter: grayscale(1)
	}
	99.5% {
			filter: grayscale(0)
	}
	100% {
			filter: grayscale(1)
	}
}
.layer_05 {
	position: absolute;
	display: block;
	z-index: 5;
	min-height: 70px;
	max-height: 100px;
	height: 20%;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
.god_L1 {
	position: absolute;
	z-index: 6;
	min-height: 100px;
	max-height: 130px;
	top: 55vh;
	left: -100px;
	transform: translateX(-75vw);
	animation-name: fujin;
	animation-duration: 4s;
	animation-delay: 1s;
	animation-timing-function: ease-in;
	animation-direction: alternate;
	animation-fill-mode: forwards;
	will-change: animation;;
}
@keyframes fujin {
	0% {
			transform: rotate(0deg) translateX(-75vw) rotate(0deg);
	}
	50% {
			transform: rotate(360deg) translateX(-75vw) rotate(-360deg);
	}
	100% {
			transform: rotate(0deg) translateX(-75vw) rotate(0deg);
	}
}
.god_R1 {
	position: absolute;
	z-index: 6;
	min-height: 100px;
	max-height: 130px;
	top: 50vh;
	right: -100px;
	transform: translateX(60vw);
	animation-name: raijin;
	animation-duration: 4.5s;
	animation-delay: .5s;
	animation-timing-function: ease-out;
	animation-direction: alternate;
	animation-fill-mode: forwards;
	will-change: animation;;
}
@keyframes raijin {
	0% {
			transform: rotate(0deg) translateX(70vw) rotate(0deg);
	}
	50% {
			transform: rotate(360deg) translateX(70vw) rotate(-360deg);
	}
	100% {
			transform: rotate(0deg) translateX(70vw) rotate(0deg);
	}
}
.god_L2 {
	top: 170px;
	left: 3px;
	animation-name: move03;
	animation-timing-function: ease-in;
	animation-delay: 0;
	transition: opacity .5s
}
.god_R2 {
	top: 170px;
	right: -50px;
	animation-name: move03;
	animation-timing-function: ease-out;
	animation-delay: 3s;
	transition: opacity 1.5s
}
@keyframes move03 {
	0% {}
	50% {
			transform: translateY(-15%)
	}
	100% {}
}

/* 風神と雷神の初期表示nont */
.anime__none {
	opacity: 0;
}

.layer_06 {
	position: absolute;
	display: block;
	z-index: 6;
	width: 127.5%;
	max-width: 200%;
	height: 20%;
	min-height: 150px;
	max-height: 170px;
	opacity: 1;
	animation-name: cloud_L;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
	will-change: animation;;
}
.cloud_L1 {
	top: 60vh;
	right: 20%;
	animation-duration: 1.8s;
	animation-delay: .2s;
}

.cloud_L3 {
	top: 31%;
	right: 2%;
	animation-duration: 3s;
	animation-delay: 2s;
}
.layer_07 {
	position: absolute;
	display: block;
	z-index: 7;
	width: 122%;
	max-width: 200%;
	height: 20%;
	min-height: 150px;
	max-height: 170px;
	opacity: 1;
	animation-name: cloud_R;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-delay: .2s;
	animation-fill-mode: forwards;
	will-change: animation;
}
.cloud_R1 {
	top: 20vh;
	left: 30%;
	animation-duration: 1.8s;
	animation-delay: .2s;
}

.cloud_R3 {
	top: 43.5%;
	left: .5%;
	animation-duration: 3s;
	animation-delay: 2s;
}
@keyframes cloud_L {
	0% {}
	50% {
			opacity: 1;
	}
	100% {
			opacity: 0;
			transform: translateX(-100%)
	}
}
@keyframes cloud_R {
	0% {}
	50% {
			opacity: 1;
	}
	100% {
			opacity: 0;
			transform: translateX(100%)
	}
}

.layer_08 {
	position: absolute;
	z-index: 8;
	bottom: 0;
	text-align: center;
	width: 100%;
	letter-spacing: 0;
	background: rgba(255, 255, 255, .6);
	height: 244px;
}

.layer_08.thai {
	height: 270px;
}

.layer_09 {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 5;
	filter: blur(1px);
	/*mix-blend-mode: screen;*/
}
.light01 {
	position: absolute;
	width: 70px;
	height: 70px;
	background: rgba(255, 241, 0, .25);
	border-radius: 50%;
	top: 55px;
	left: -25px;
	transform: rotate(0);
	animation-name: light01;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
.light01:after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	background: rgba(255, 241, 0, .25);
	border-radius: 50%;
	top: 75%;
	left: 70%;
}
.light02 {
	position: absolute;
	width: 85px;
	height: 85px;
	background: rgba(46, 167, 224, .2);
	border-radius: 50%;
	top: 30px;
	right: -20px;
	transform: rotate(0);
	animation-name: light02;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
}
.light02:after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	background: rgba(46, 167, 224, .2);
	border-radius: 50%;
	top: 80%;
	left: 55%;
}
.light03 {
	position: absolute;
	width: 70px;
	height: 40px;
	background: rgba(92, 190, 199, .35);
	border-radius: 50%;
	top: 300px;
	left: 10px;
	transform: rotate(-45deg);
	animation-name: light03;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
.light03:after {
	content: "";
	position: absolute;
	width: 40px;
	height: 20px;
	background: rgba(92, 190, 199, .35);
	border-radius: 50%;
	top: -20%;
	left: 20%;
	transform: rotate(-45deg);
}
.light04 {
	position: absolute;
	width: 60px;
	height: 30px;
	background: rgba(255, 241, 0, .25);
	border-radius: 50%;
	top: 250px;
	right: -30px;
	transform: rotate(-45deg);
	animation-name: light02;
	animation-duration: 7s;
	animation-timing-function: linear;
	animation-delay: 3s;
	animation-iteration-count: infinite;
}
.light04:after {
	content: "";
	position: absolute;
	width: 25px;
	height: 10px;
	background: rgba(255, 241, 0, .25);
	border-radius: 50%;
	top: 80%;
	left: 55%;
	transform: rotate(-45deg);
}
.light05 {
	position: absolute;
	width: 50px;
	height: 20px;
	background: rgba(92, 190, 199, .35);
	border-radius: 50%;
	top: 190px;
	left: 230px;
	transform: rotate(-45deg);
	animation-name: light02;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
.light06 {
	position: absolute;
	width: 50px;
	height: 30px;
	background: rgba(255, 241, 0, .25);
	border-radius: 50%;
	top: 170px;
	left: 150px;
	transform: rotate(-45deg);
	animation-name: light01;
	animation-duration: 7s;
	animation-timing-function: linear;
	animation-delay: 3s;
	animation-iteration-count: infinite;
}
@keyframes light01 {
	25% {
			opacity: 0;
			transform: translate(0);
	}
	26% {
			opacity: 0;
			transform: translate(100px, 80px) rotate(45deg);
	}
	50% {
			opacity: 1;
			transform: translate(100px, 80px) scale(.8) rotate(45deg);
	}
	75% {
			opacity: 0;
			transform: translate(100px, 80px) rotate(45deg);
	}
	76% {
			opacity: 0;
			transform: translate(0);
	}
}
@keyframes light02 {
	25% {
			opacity: 0;
			transform: translate(0);
	}
	26% {
			opacity: 0;
			transform: translate(-100px, 60px) rotate(45deg);
	}
	50% {
			opacity: 1;
			transform: translate(-100px, 60px) scale(.9) rotate(45deg);
	}
	75% {
			opacity: 0;
			transform: translate(-100px, 60px) rotate(45deg);
	}
	76% {
			opacity: 0;
			transform: translate(0);
	}
}
@keyframes light03 {
	25% {
			opacity: 0;
			transform: translate(0);
	}
	26% {
			opacity: 0;
			transform: translate(50px, -100px) rotate(45deg);
	}
	50% {
			opacity: 1;
			transform: translate(50px, -100px) scale(1.1) rotate(45deg);
	}
	75% {
			opacity: 0;
			transform: translate(50px, -100px) rotate(45deg);
	}
	76% {
			opacity: 0;
			transform: translate(0);
	}
}



/* アニメーション部PC/SP切り替え */
.anime__500, .anime__750 {
	display: none;
}
.anime__sp {
	display: block;
}


/*
---------------------------------------------
PC表示とSP表示切替の設定
---------------------------------------------
*/
.pc__view,
.course__model--pc,
.pc__img__view {
	display: none;
}

.sp__view,
.course__model--sp,
.sp__img__view {
	display: block;
}

.sp__view--icon {
	display: inline-block;
}


@media screen and (min-width: 500px) {
	.anime__500 {
			display: block;
	}
	.anime__sp {
			display: block;
	}
	.layer_03 {
			height: 223.38px;
	}
	.asset04 {
			left: 30%;
	}
	.asset05 {
			left: 50%;
	}
	.asset06 {
			right: 30%;
	}
}

@media screen and (min-width: 500px) {
	.anime__500 {
			display: block;
	}
	.anime__sp {
			display: block;
	}
	.layer_03 {
			height: 223.38px;
	}
	.asset04 {
			left: 30%;
	}
	.asset05 {
			left: 50%;
	}
	.asset06 {
			right: 30%;
	}
}



/* タブレットサイズ以上 */
@media screen and (min-width: 750px) {
	.anime__750 {
		display: block;
	}
	.anime__sp {
			display: none;
	}
	.sidewalk {
			top: 230px
	}
	.layer_02 {
			width: 200px;
	}
	.layer_03 {
			height: 260px;
	}
	.persons {
			width: 85%
	}

	.asset02 {
		top: 120px;
		left: 119px;
	}

	

	/* 背景の建物 */
	.layer_02 {
		width: 50%;
		top: -56px;
	}
	.shop_L {
		left: -126px;
	
	}
	.shop_R {
		right: -134px;
	}

	.layer_08 {
		height: 230px;
	}




}







/* PCサイズ以上 */
@media screen and (min-width: 900px) {

	/* アニメーションの設定 */

	.layer_03 {
			height: 40%;
	}
	.layer_05 {
			max-height: unset;
	}
	.sidewalk {
			top: 30%;
	}
	.persons {
			height: 95%;
	}
	.asset09 {
			top: unset;
			bottom: 40%;
	}
	.asset14 {
			top: unset;
			bottom: 20%;
	}

	/* ロゴサイズ */
	.layer_04 {
		width: 40%;
	}

	.layer_02 {
		top: -110px;
	}

	/* 人物の大きさ調整 */
	.asset01,
	.asset03,
	.asset04,
	.asset05,
	.asset06,
	.asset07,
	.asset10,
	.asset11,
	.asset12 {
		height: 120px;
	}

	.asset02 {
	left: 160px;
	height: 120px;
	top: 102px;
	}

 .asset03 {
		right: 220px;
	}

	.asset04 {
		left: 26%;
		top: -35px;
	}

	.asset06 {
		top: -80px;
		right: 30%;
	}

	.asset08 {
		top: 47px;
		left: 220px;
		height: 120px;
	}

	.asset09 {
		top: 44%;
		height: 230px;
	}

	.asset13 {
		top: 20px;
	}

	.asset14 {
		height: 240px;
	}

	.asset15,
	.asset13 {
		height: 100px !important;
	}

	/* 背負っている男 */
	@keyframes move011 {
		0% {}
		100% {
				left: 40%
		}
	}

	/* 中央の飛脚 */
	@keyframes BtoT {
		0% {
				top: 0px;
				left: 30%;
				height: 120px;
		}
		100% {
				top: 45px;
				left: 40%;
				height: 80px;
		}
	}


	/* パチンコ女性 */
	@keyframes move11 {
		0% {
				top: 200px;
				right: 230px;
				height: 160px;
		}
		25% {
				top: 120px;
				right: 140px;
				height: 150px;
		}
		26% {
				transform: scaleX(1)
		}
		27% {
				transform: scaleX(1);
		}
		50% {
				top: 130px;
				right: 80px;
				height: 150px;
				opacity: 1;
				transform: scaleX(1);
		}
		52% {
				opacity: 0;
		}
		73% {
				opacity: 0;
		}
		75% {
				top: 160px;
				right: 80px;
				height: 160px;
				opacity: 1;
				transform: scaleX(1)
		}
		100% {
				top: 200px;
				right: 230px;
				height: 160px;
		}
	}


	.layer_08 {
		height: 290px;
	}



	/* 初回の風神と雷神の制御 */
	.god_L1 {
		transform: translateX(-30vw);
		animation-name: fujin;
		animation-duration: 10s;
		animation-timing-function: ease;
	}
	@keyframes fujin {
		0% {
				transform: rotate(0deg) translateX(-30vw) rotate(0deg);
		}
		50% {
				transform: rotate(360deg) translateX(-30vw) rotate(-360deg);
		}
		100% {
				transform: rotate(0deg) translateX(-30vw) rotate(0deg);
		}
	}
	.god_R1 {
		transform: translateX(30vw);
		animation-name: raijin;
		animation-duration: 10.5s;
		animation-delay: 1.5s;
		animation-timing-function: ease;
	}
	@keyframes raijin {
		0% {
				transform: rotate(0deg) translateX(30vw) rotate(0deg);
		}
		50% {
				transform: rotate(360deg) translateX(30vw) rotate(-360deg);
		}
		100% {
				transform: rotate(0deg) translateX(30vw) rotate(0deg);
		}
	}

		/* 背景の建物 */
		.layer_02 {
			width: 46%;
			top: -86px;
		}
		.shop_L {
			left: -182px;
		
		}
		.shop_R {
			right: -202px;
		}

	}

/* PCサイズ以上 */
@media screen and (min-width: 1024px) {


	/*
	---------------------------------------------
	メインビジュアルのアニメーション設定
	---------------------------------------------
	*/
	.nightwalk {
		top: 70px;
	}

	.nightwalk.on {
		top: 51px;
		padding-bottom: 100%;
 }


	/*
	---------------------------------------------
	PC表示とSP表示切替の設定
	---------------------------------------------
	*/
	.pc__view,
	.course__model--pc,
	.pc__img__view {
		display: block;
	}
	
	.sp__view,
	.course__model--sp,
	.sp__img__view {
		display: none;
	}
	
}

/* 1280px以上 */
@media screen and (min-width: 1280px) {

	.layer_04 {
		width: 40%;
	}

	.layer_02 {
		top: -110px;
	}

	/* 人物の大きさ調整 */
	.asset01,
	.asset03,
	.asset04,
	.asset05,
	.asset06,
	.asset07,
	.asset08,
	.asset10,
	.asset11,
	.asset12 {
		height: 120px;
	}

	.asset02 {
		left: 118px;
		height: 120px;
		top: 172px;
	}

 .asset03 {
		right: 220px;
	}

	.asset09 {
		top: 44%;
		height: 230px;
	}

	.asset14 {
		height: 240px;
	}

	.asset15,
	.asset13 {
		height: 100px !important;
	}

	/* 背負っている男 */
	@keyframes move011 {
		0% {}
		100% {
				left: 40%
		}
	}


	/* パチンコ女性 */
	@keyframes move11 {
		0% {
				top: 200px;
				right: 230px;
				height: 160px;
		}
		25% {
				top: 120px;
				right: 140px;
				height: 150px;
		}
		26% {
				transform: scaleX(1)
		}
		27% {
				transform: scaleX(1);
		}
		50% {
				top: 130px;
				right: 80px;
				height: 150px;
				opacity: 1;
				transform: scaleX(1);
		}
		52% {
				opacity: 0;
		}
		73% {
				opacity: 0;
		}
		75% {
				top: 160px;
				right: 80px;
				height: 160px;
				opacity: 1;
				transform: scaleX(1)
		}
		100% {
				top: 200px;
				right: 230px;
				height: 160px;
		}
	}


	.layer_08 {
		bottom: 0;
	}
	
	
}







/* 1280px以上 */
@media screen and (min-width: 1440px) {

		/* 背景の建物 */
		.layer_02 {
			top: -100px;
			max-width: 720px;
		}
		.shop_L {
			left: -217px;
		
		}
		.shop_R {
			right: -244px;
		}


	.layer_04 {
		width: 32%;
	}


	/* 人物の大きさ調整 */
	.asset01,
	.asset03,
	.asset04,
	.asset05,
	.asset07,
	.asset10,
	.asset11,
	.asset12 {
		height: 160px;
	}

	.asset02 {
		left: 168px;
		height: 170px;
		top: 172px;
	}

 .asset03 {
		right: 300px;
	}

	.asset04 {
		left: 27%;
	}

	.asset06 {
		top: -90px;
  right: 30%;
		height: 130px;
	}


	.asset08 {
		left: 310px;
		height: 160px;
	}

	.asset09 {
		top: 44%;
		height: 270px;
	}

	.asset11 {
		top: 215px;
		left: 290px;
	}

	.asset14 {
		bottom: 80px;
		height: 270px;
	}

	.asset15,
	.asset13 {
		height: 160px !important;
	}

	/* 背負っている男 */
	@keyframes move011 {
		0% {}
		100% {
				left: 50%
		}
	}


	/* パチンコ女性 */
	@keyframes move11 {
		0% {
				top: 240px;
				right: 270px;
				height: 210px;
		}
		25% {
				top: 160px;
				right: 180px;
				height: 150px;
		}
		26% {
				transform: scaleX(1)
		}
		27% {
				transform: scaleX(1);
		}
		50% {
				top: 170px;
				right: 120px;
				height: 150px;
				opacity: 1;
				transform: scaleX(1);
		}
		52% {
				opacity: 0;
		}
		73% {
				opacity: 0;
		}
		75% {
				top: 200px;
				right: 120px;
				height: 160px;
				opacity: 1;
				transform: scaleX(1)
		}
		100% {
			top: 240px;
			right: 270px;
			height: 190px;
		}
	}


	.layer_08 {
		bottom: 0;
	}
	
	
}