:root {
	
	--mainColor: #E8053B;
	--logoWarm: #A09D95;
	--livePink: #ff6068;
	--fontColor: #000000;
	--fontColor-sub: #414141;
	--bg-gray: #f7f7f4;
	
	--width: 560px;
	--letter: 0.05em;
	
	--font-biz: 'BIZ UDPMincho', serif;
	--font-noto: 'Noto Serif JP', serif;
	--font-zen: 'Zen Kaku Gothic New', sans-serif;

	/* animation */
	--once: forwards ease;
	--once-ease: forwards cubic-bezier(0.87, 0, 0.13, 1);
	--loop: infinite linear;
	
}


/*--------------------------------------------------
    font file
=================================================*/

@font-face {
	font-family: 'BIZ UDPMincho';
	font-style: normal;
	font-weight: 400;
	src: url("/cnt_karyokulive/common/font/BIZUDPMincho-Regular.ttf") format('truetype');
}
@font-face {
	font-family: 'BIZ UDPMincho';
	font-style: normal;
	font-weight: 700;
	src: url("/cnt_karyokulive/common/font/BIZUDPMincho-Bold.ttf") format('truetype');
}
@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	src: url("/cnt_karyokulive/common/font/NotoSerifJP-Regular.otf") format('opentype');
}
@font-face {
	font-family: 'Zen Kaku Gothic New';
	font-style: normal;
	font-weight: 500;
	src: url("/cnt_karyokulive/common/font/ZenKakuGothicNew-Medium.ttf") format('truetype');
}

@media (min-width: 481px){ /* for PC */
	html{
		font-size: 16px;
	}
}
@media (max-width: 480px){ /* for SP */
	html{
		font-size: 3.6vw;
	}
}


/*--------------------------------------------------
    reset
=================================================*/
html,  body,  div,  dl,  dt,  dd,  ul,  ol,  li,  h1,  h2,  h3,  h4,  h5,  p,  th,  td, header, footer, article, figure, figcaption, section, nav {
	margin:0;
	padding:0;
	word-wrap:break-word;
	overflow-wrap:break-word;
	box-sizing:border-box;
}
html{
	overflow-y:scroll;
	height:100%;
	scroll-behavior: smooth;
}
body{
	height:100%;
	background: #bac3ca;
	color: var(--fontColor);
	font-family: var(--font-zen);
	font-size:16px;
	line-height:150%;
	text-align:left;
	margin:0;
}
img {
	border:0;
	vertical-align: top;
	max-width: 100%;
	height: auto;
	aspect-ratio: attr(width) / attr(height);
}
strong,b{
	font-weight:bold;
	font-size:100%;
}
ol,  ul {
	list-style:none;
}
h1,  h2,  h3,  h4,  h5 {
	font-size:100%;
	font-weight:normal;
}
a {
	color: var(--fontColor);
	text-decoration:none;
	outline:none;
}
i{
	font-style: normal;
}

/*--------------------------------------------------
    resposive
=================================================*/

#allWrap{
	display: block;
	width: 100%;
	max-width: var(--width);
	height: 100%;
	margin: 0 auto;
	background: #FFF;
	position: relative;
	z-index: 5;
}
.sub main{
	background: url("/cnt_karyokulive/common/images/bg-sub.png") repeat #FFF center top / 100% auto;
}
@media (min-width: 481px){ /* for PC */
	html{
		scroll-padding-top: 100px;
	}
	body{
		width: 100%;
		min-width: var(--width);
	}
}
@media (max-width: 480px){ /* for SP */
	html{
		scroll-padding-top: 20vw;
	}
	body{
		min-width: 320px;
	}
}

/*--------------------------------------------------
    animation
=================================================*/
		@keyframes commonFadeIn {
			0% {
				opacity: 0;
				transform: translateY(10px);
			}
			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
		@keyframes clipFadeInRow {
			0% {
				transform: translateY(15px);
				clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
			}
			100% {
				transform: translateY(0);
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
			}
		}
		@keyframes clipFadeInTategaki {
			0% {
				clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
			}
			100% {
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
			}
		}
		@keyframes clipFadeInColumn {
			0% {
				clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
			}
			100% {
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
			}
		}
		@keyframes commonSlideUp {
			0% {
				opacity: 0;
				transform: translateY(15px);
			}
			40% {
				transform: translateY(-10px);
			}
			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
		@keyframes imgScaleIn {
			0% {
				scale: 0;
			}
			100% {
				scale: 1;
			}
		}

/*--------------------------------------------------
    style
=================================================*/

/* ¹²Í¨ */
button{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	transition:all 0.3s ease;
}
.sepalate{
	display: block;
}
.sepalate img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 30px;
}
#loading{
	display: grid;
	place-content: center;
	place-items: center;
	background-color: hsla(16, 93%, 58%,1);
	background-image:
		radial-gradient(at 15% 78%, hsla(11,100%,50%,1) 0px, transparent 50%),
		radial-gradient(at 85% 95%, hsla(68,100%,50%,1) 0px, transparent 50%),
		radial-gradient(at 0% 0%, hsla(319,100%,50%,1) 0px, transparent 50%),
		radial-gradient(at 100% 3%, hsla(358,100%,50%,1) 0px, transparent 30%);
	color: #FFF;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
#loading img{
	width: 80px;
	z-index: 1000;
}

@media (min-width: 481px){ /* for PC */
	.sp{
		display: none;
	}
}
@media (max-width: 480px){ /* for SP */
	.pc{
		display: none;
	}
	#loading{
		background: #ff050c;
		overflow: hidden;
	}
	#loading::before{
		content: "";
		display: block;
		width: 300vw;
		height: 300vw;
		background-image: radial-gradient(circle, hsla(319,100%,50%,1) 0px, transparent 70%);
		position: absolute;
		top: -150vw;
		left: -150vw;
	}
	#loading::after{
		content: "";
		display: block;
		width: 300vw;
		height: 300vw;
		background-image: radial-gradient(circle, hsla(68,100%,50%,1) 0px, transparent 70%);
		position: absolute;
		right: -150vw;
		bottom: -130vw;
	}
	#loading img{
		width: 20vw;
	}
}


/* header */
header{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	background: #FFF;
	width: 100%;
	max-width: var(--width);
	height: 100px;	
	padding-top: 8px;
	padding-left: 32px;
	padding-right: 35px;
	position: fixed;
	top: 0;
	left: calc((100% - var(--width)) / 2);
	z-index: 50;
}
.sub header{
	background: url("/cnt_karyokulive/common/images/bg-sub.png") repeat #FFF center top / 100% auto;
}
.live-logo{
	max-width: 60px;
}
.live-logo a{
	color: var(--livePink);
}
.live-logo svg{
	width: 100%;
	aspect-ratio: 1/1;
	fill: currentColor;
}
#navKey{
	display: block;
	width: 100%;
	max-width: 48px;
	cursor: pointer;
}
#navKey span{
	display: block;
	width: 100%;
	height: 2px;
	background: var(--fontColor);
	border-radius: 3px;
	transition: all 0.3s ease;
}
#navKey span:nth-child(1){
	max-width: 24px;
	margin-left: auto;
	margin-bottom: 12px;
}
#navKey span:nth-child(2){
	margin-bottom: 12px;
}
#navKey span:nth-child(3){
	max-width: 24px;
}

@media (min-width: 481px){ /* for PC */
	#logo{
		display: none;
	}
	#navKey:hover span:nth-child(1),
	#navKey:hover span:nth-child(3){
		max-width: 100%;
		transition: all 0.3s ease;
	}
}
@media (max-width: 480px){ /* for SP */
	header{
		height: 17vw;	
		padding-top: 1.2vw;
		padding-left: 5vw;
		padding-right: 5vw;
		left:  0;
	}
	#logo{
		max-width: 10.5vw;
	}
	#logo a{
		color: var(--logoWarm);
	}
	#logo svg{
		width: 100%;
		aspect-ratio: 301/307;
		fill: currentColor;
	}
	.live-logo{
		max-width: 10vw;
		margin-right: 4.5vw;
	}
	#navKey{
		max-width: 8vw;
	}
	#navKey span{
		height: 2px;
	}
	#navKey span:nth-child(1){
		max-width: 4vw;
		margin-bottom: 1.8vw;
	}
	#navKey span:nth-child(2){
		margin-bottom: 1.8vw;
	}
	#navKey span:nth-child(3){
		max-width: 4vw;
	}
	
}

/* main */
@media (min-width: 481px){ /* for PC */
	main{
		margin-top: 100px;
	}
}
@media (max-width: 480px){ /* for SP */
	main{
		margin-top: 17vw;
	}
}

/* nav */
#mainNav{
	display: grid;
	grid-template-columns: 90px 1fr 1fr 80px;
	grid-template-rows: 70px 100px 1fr  65px;
	width: 100%;
	min-height: 100dvh;
	max-width: var(--width);
	color: #FFF;
	background: #000;
	position: fixed;
	top: 0;
	left: calc((100% - var(--width)) / 2);
	z-index: 50;
	transition: all 0.3s ease;
}
#mainNav.hide{
	opacity: 0;
	pointer-events: none;
}
#mainNav.top{
	grid-template-rows: 60px 200px 1fr  65px;
}
#mainNav.sub{
	grid-template-rows: 60px 130px 1fr  65px;
}
#navLogo{
	grid-column: 2;
	grid-row: 2;
	display: block;
}
#navLogo a{
	color: #FFF;
}
#navLogo svg{
	width: 62px;
	height: 66px;
	fill: currentColor;
}
#navCloseKey{
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	align-self: start;
	padding: 0;
	background: none;
	height: 50px;
	cursor: pointer;
}
#navCloseKey span{
	display: block;
	width: 50px;
	height: 3px;
	border-radius: 3px;
	background: #555;
}
#navCloseKey span:nth-child(1){
	rotate: 45deg;
	transform: translateX(3px);
}
#navCloseKey span:nth-child(2){
	rotate: -45deg;
}
#navWrap{
	grid-column: 2/4;
	grid-row: 3;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 55px;
	max-height: calc(100dvh - 260px);
	padding-bottom: 20px;
	text-align: left;
	overflow-x: auto;
	box-sizing: border-box;
	z-index: 1;
}
#mainNav.sub #navWrap{
	gap: 34px;
}
#navWrap hr{
	display: block;
	width: 30px;
	height: 2px;
	margin: 0;
	background: #808080;
	border-bottom: none;
}
#navWrap a{
	display: block;
	color: #FFF;
}
#navWrap a svg{
	display: block;
	fill: currentColor;
}
#navWrap .navTop svg{
	width: 40px;
	height: 32px;
}
#navWrap .navHighright svg{
	width: 128px;
	height: 32px;
}
#navWrap .navElements svg{
	width: 114px;
	height: 32px;
}
#navWrap .navGallery svg{
	width: 86px;
	height: 32px;
}
#navWrap .navPlants svg{
	width: 76px;
	height: 32px;
}
#navWrap .navAnan svg{
	width: 140px;
	height: 24px;
}
#navWrap .navTachibanawan svg{
	width: 142px;
	height: 24px;
}
#navWrap .navSaijyo svg{
	width: 140px;
	height: 24px;
}
#navWrap .navSakaide svg{
	width: 141px;
	height: 23px;
}
#navCopyright{
	grid-column: 2/4;
	grid-row: 4;
	display: border-left: ;
	font-size: 0.9375rem;
	text-align: center;
	font-family: var(--font-san);
	color: #5f5f5f;
}
#mainNav .nav_palntName{
	position: absolute;
	right: 30px;
	bottom: 100px;
	opacity: 0.7;
	z-index: 0;
}
@media (min-width: 481px){ /* for PC */
	#navCloseKey:hover span{
		background: #999;
		transition: all 0.3s ease;
	}
	#navWrap a:hover{
		color: #aaa;
		transition: all 0.3s ease;
	}
}
@media (max-width: 480px){ /* for SP */
	#mainNav{
		grid-template-columns: 16vw 1fr 1fr 14vw;
		left: 0;
	}
	#mainNav.top{
		grid-template-rows: 17vw 30vw 1fr  18vw;
	}
	#mainNav.sub{
		grid-template-rows: 17vw 20vw 1fr  18vw;
	}
	#navLogo svg{
		width: 11vw;
		height: 11vw;
	}
	#navCloseKey{
		height: 8vw;
	}
	#navCloseKey span{
		width: 10vw;
	}
	#navCloseKey span:nth-child(1){
		transform: translateX(0.8vw);
	}
	#navWrap{
		gap: 9vw;
		max-height: calc(100dvh - 30vw);
		padding-bottom: 10vw;
	}
	#mainNav.sub #navWrap{
		gap: 7vw;
	}
	#navWrap hr{
		width: 5vw;
	}
	#navWrap .navTop svg{
		width: 8vw;
		height: 6vw;
	}
	#navWrap .navHighright svg{
		width: 26vw;
		height: 6vw;
	}
	#navWrap .navElements svg{
		width: 23vw;
		height: 6vw;
	}
	#navWrap .navGallery svg{
		width: 18vw;
		height: 6vw;
	}
	#navWrap .navPlants svg{
		width: 16vw;
		height: 5vw;
	}
	#navWrap .navAnan svg{
		width: 27vw;
		height: 4.5vw;
	}
	#navWrap .navTachibanawan svg{
		width: 26.7vw;
		height: 4.5vw;
	}
	#navWrap .navSaijyo svg{
		width: 25.6vw;
		height: 4.5vw;
	}
	#navWrap .navSakaide svg{
		width: 27vw;
		height: 4.5vw;
	}
	#navCopyright{
		font-size: 0.75rem;
	}
}
#mainNav #navWrap > *{
	opacity: 0;
	transform: translateX(-10px);
}
#mainNav:not(.hide) #navWrap > :nth-child(1){
	animation: manuSlideIn .5s .1s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(2){
	animation: manuSlideIn .5s .2s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(3){
	animation: manuSlideIn .5s .3s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(4){
	animation: manuSlideIn .5s .4s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(5){
	animation: manuSlideIn .5s .5s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(6){
	animation: manuSlideIn .5s .6s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(7){
	animation: manuSlideIn .5s .7s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(8){
	animation: manuSlideIn .5s .8s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(9){
	animation: manuSlideIn .5s .9s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(10){
	animation: manuSlideIn .5s 1s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(11){
	animation: manuSlideIn .5s 1.1s forwards ease;
}
#mainNav:not(.hide) #navWrap > :nth-child(12){
	animation: manuSlideIn .5s 1.2s forwards ease;
}

@keyframes manuSlideIn {
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


/*footer*/
footer{
	display: block;
	width: 100%;
	padding-top: 56px;
	padding-bottom: 30px;
	background: #d78080;
	color: #FFF;
	position: relative;
}
footer::before{
	content: "";
	display: block;
	width: 100%;
	height: 110px;
	background: #d78080;
	clip-path: polygon(0 98%, 100% 0%, 100% 100%, 0% 100%);
	position: absolute;
	top: -108px;
	left: 0;
}
.foot_subMenu{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 15px;
	margin-bottom: 20px;
	color: #FFF;
}
.foot_subMenu i svg{
	width: 27px;
	height: 26px;
}
.foot_subMenu a{
	color: inherit;
	transition: all 0.3s ease;
}
.foot_subMenu.m1 a svg{
	width: 81px;
	height: 17px;
}
.foot_subMenu.m2 a svg{
	width: 63px;
	height: 17px;
	margin-right: 18px;
}
#backTop{
	display: grid;
	place-content: center;
	place-items: center;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: #414141;
	color: #FFF;
	position: absolute;
	right: 28px;
	bottom: 92px;
	cursor: pointer;
	transition: all 0.3s ease;
}
#backTop svg{
	width: 34px;
	aspect-ratio: 34/41;
	fill: currentColor;
}
#foot_snsList{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 36px;
	margin-bottom: 70px;
}
.sub #foot_snsList{
	margin-top: 80px;
}
#foot_snsList .title{
	max-width: 156px;
	margin-right: 5px;
}
#foot_snsList a{
	color: #FFF;
	transition: all 0.3s ease;
}
#foot_snsList svg{
	max-width: 100%;
	height: 34px;
	fill: currentColor;
}
#foot_yonden{
	display: block;
	text-align: center;
	color: #FFF;
	margin-bottom: 54px;
}
#foot_yonden a{
	transition: all 0.3s ease;
}
#foot_yonden svg{
	max-width: 178px;
	aspect-ratio: 4/1;
	fill: currentColor;
}
#copyright{
	display: block;
	font-size: 0.9375rem;
	text-align: center;
	font-family: var(--font-san);
}
@media (min-width: 481px){ /* for PC */
	
	.foot_subMenu a:hover{
		opacity: 0.65;
		transition: all 0.3s ease;
	}
	#backTop:hover{
		background: #333;
		transition: all 0.3s ease;
	}
	#foot_snsList .x{
		max-width: 26px;
	}
	#foot_snsList .fb{
		max-width: 33px;
	}
	#foot_snsList .youtube{
		max-width: 35px;
	}
	#foot_snsList .insta{
		max-width: 32px;
	}
	#foot_snsList a:hover{
		opacity: 0.65;
		transition: all 0.3s ease;
	}
	#foot_yonden a:hover{
		opacity: 0.65;
		transition: all 0.3s ease;
	}
}
@media (max-width: 480px){ /* for SP */
	footer{
		padding-top: 10vw;
		padding-bottom: 38vw;
	}
	footer::before{
		height: 19vw;
		top: -18.5vw;
	}
	.foot_subMenu{
		gap: 3vw;
		margin-bottom: 3vw;
	}
	.foot_subMenu i svg{
		width: 5vw;
		height: 5vw;
	}
	.foot_subMenu.m1 a svg{
		width: 16vw;
	}
	.foot_subMenu.m2 a svg{
		width: 12vw;
		margin-right: 4vw;
	}
	#backTop{
		width: 12vw;
		height: 12vw;
		right: 5vw;
		bottom: 32vw;
	}
	#backTop svg{
		width: 6vw;
		aspect-ratio: 34/41;
		fill: currentColor;
	}
	#foot_snsList{
		gap: 3.5vw;
		margin-bottom: 13vw;
	}
	.sub #foot_snsList{
		margin-top: 15vw;
	}
	#foot_snsList .title{
		max-width: 27vw;
		margin-right: 2vw;
	}
	#foot_snsList li:not(.title){
		max-width: 9vw;
	}
	#foot_snsList svg{
		height: 5vw;
	}
	#foot_yonden{
		margin-bottom: 8.3vw;
	}
	#foot_yonden svg{
		max-width: 32vw;
	}
	#copyright{
		font-size: 0.75rem;
	}
}

/*modal*/
.modal{
	display: grid;
	place-content: center;
	place-items: center;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	transition: all 0.3s ease;
}
.modal.hide{
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
}
.modalBg{
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	position: fixed;
	top: 0;
	left: 0;
}
.modalCont{
	display: block;
	width: 80vw;
	padding: 40px;
	background: #FFF;
	border-radius: 8px;
	position: relative;
	z-index: 31;
}
#imgModal .modalCont{
	max-width: 1000px;
	height: 76dvh;
	max-height: 1000px;
}
#imgModal .modalCont img{
	display: block;
	height: 100%;
	object-fit: scale-down;
	margin-left: auto;
	margin-right: auto;
}
#mvModal .modalCont{
	width: 80vw;
	max-width: 1200px;
}
#mvModal .modalCont iframe{
	width: 100%;
	aspect-ratio: 16/9;
}
#mvModal .modalCont.tate{
	width: 50vw;
	max-width: 550px;
	height: 100%;
	max-height: 80dvh;
	aspect-ratio: 9/16;
}
#mvModal .modalCont.tate iframe{
	max-height: 100%;
	aspect-ratio: 9/16;
}
.modalCloseKey{
	display: block;
	aspect-ratio: 1/1;
	width: 50px;
	position: absolute;
	top: -60px;
	right: 0;
	cursor: pointer;
}
.modalCloseKey span{
	display: block;
	width: 100%;
	height: 2px;
	background: #FFF;
	position: relative;
	top: 23px;
}
.modalCloseKey span:nth-child(1){
	rotate: 45deg;
}
.modalCloseKey span:nth-child(2){
	rotate: -45deg;
}
@media (min-width: 481px){ /* for PC */
}
@media (max-width: 480px){ /* for SP */
	#mvModal .modalCont{
		width: 94vw;
		max-width: none;
		padding: 3vw;
	}
	#mvModal .modalCont.tate{
		width: 94vw;
		max-width: none;
	}
	.modalCloseKey{
		width: 14vw;
		top: -16vw;
	}
	.modalCloseKey span{
		top: 7vw;
	}
}

/*forPC background*/
@media (min-width: 481px){ /* for PC */
	#pcDomParts{
		display: block;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	#live-logo{
		display: block;
		position: fixed;
		top: 20px;
		left: 20px;
		z-index: 3;
	}
	#live-logo a{
		color: #FFF;
	}
	#live-logo svg{
		width: 60px;
		aspect-ratio: 301/307;
		fill: currentColor;
	}
	#pcBgList::after{
		content: "";
		display: block;
		width: 100vw;
		height: 100dvh;
		background: rgba(0,0,0,0.6);
		position: relative;
		top: 0;
		left: 0;
	}
	#pcBgList{
		display: grid;
		place-content: center;
		place-items: center;
		width: inherit;
		height: inherit;
	}
	#pcBgList li{
		grid-column: 1;
		grid-row: 1;
		width: inherit;
		height: inherit;
	}
	#pcBgList li img{
		width: inherit;
		height: inherit;
		object-fit: cover;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	#pcBgList li:nth-child(1) img{
		opacity: 1;
	}
	#pcBgList li:nth-child(1) img{
		animation: fadeSlide 64s 0s var(--loop) backwards;
	}
	#pcBgList li:nth-child(2) img{
		animation: fadeSlide 64s 8s var(--loop) backwards;
	}
	#pcBgList li:nth-child(3) img{
		animation: fadeSlide 64s 16s var(--loop) backwards;
	}
	#pcBgList li:nth-child(4) img{
		animation: fadeSlide 64s 24s var(--loop) backwards;
	}
	#pcBgList li:nth-child(5) img{
		animation: fadeSlide 64s 32s var(--loop) backwards;
	}
	#pcBgList li:nth-child(6) img{
		animation: fadeSlide 64s 40s var(--loop) backwards;
	}
	#pcBgList li:nth-child(7) img{
		animation: fadeSlide 64s 48s var(--loop) backwards;
	}
	#pcBgList li:nth-child(8) img{
		animation: fadeSlide 64s 56s var(--loop) backwards;
	}
}
@media (max-width: 480px){ /* for SP */
	#pcDomParts{
		display: none;
	}
}
		@keyframes fadeSlide {
			0%{
				visibility: visible;
				opacity: 0;
				transform: scale(1);
			}
			2%{
				opacity: 1;
			}
			15%{
				opacity: 1;
			}
			17%{
				opacity: 0;
				transform: scale(1.05);
			}
			100%{
				opacity: 0;
			}
		}