@charset "UTF-8";

.main-wrap {
	background-color: white;
	display: block;
	margin: 0 auto;
	width: 960px;
	height: 100vh;
}

/*------------------------------------------------*/

.content-wrap {
	background-color: transparent;
	/*padding: 32px 64px 32px 64px;*/
	/*width: calc(100% - 128px);*/
	/*height: calc(100vh - 184px); /* 64px(padding)+120px(menu)=184px */
	width: 100%;
	height: calc(100% - 140px);
}

.content-back {
	background-color: transparent;
	position: relative;
	width:  100%;
	height: 100%;
	
}

.backimg5, .backimg6, .backimg7, .backimg8 {
	position: absolute;
	width:  100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
}

.backimg5 {
	background-image: url(../img/background_show1.png);
	animation: fade2-x4 40s ease 0s infinite;
}

.backimg6 {
	background-image: url(../img/background_show2.png);
	animation: fade2-x4 40s ease 10s infinite;
}

.backimg7 {
	background-image: url(../img/background_show1.png);
	animation: fade2-x4 40s ease 20s infinite;
}

.backimg8 {
	background-image: url(../img/background_show4.png);
	animation: fade2-x4 40s ease 30s infinite;
}

@keyframes fade2-x4 {
	  0% { opacity: 0; }
	  5% { opacity: 1; }
	 25% { opacity: 1; }
	 30% { opacity: 0; }
	100% { opacity: 0; }
}

/*------------------------------------------------*/

/*　チェックボックス非表示　*/
#popup-switch1 { display: none; }
#popup-switch2 { display: none; }
#popup-switch3 { display: none; }
#popup-switch4 { display: none; }
#popup-switch5 { display: none; }
#popup-switch6 { display: none; }
#popup-switch7 { display: none; }
#popup-switch8 { display: none; }
#popup-switch9 { display: none; }
#popup-switch10 { display: none; }
#popup-switch11 { display: none; }
#popup-switch12 { display: none; }


.popup-background {
	position: fixed;
	top:  0;
	left: 0;
	z-index: 100;

	background-color: rgba(10,10,10,0.1);
	width:  100vw;
	height: 100vh;
}

.popup-content {
	position: absolute;
	top:  0;
	left: 0;
	z-index: 200;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: rgba(10,10,10,0.5);
	width:  100vw;
	height: 100vh;
	overflow: hidden;
}

.popup-content iframe {
	position: absolute;
	z-index: 300;

	width:  400px;
	height: 300px;
}

.popup-close {
	position: absolute;

	background-color: transparent;
	width:  100%;
	height: 100%;
}

.popup-close p {
	position: absolute;
	top:   0;
	right: 0;

	color: white;
	padding: 10px 20px 0px 0px;
}

/*　処理　*/
#popup-switch1:checked ~ .popup-background,
#popup-switch1:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch2:checked ~ .popup-background,
#popup-switch2:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch3:checked ~ .popup-background,
#popup-switch3:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch4:checked ~ .popup-background,
#popup-switch4:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch5:checked ~ .popup-background,
#popup-switch5:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch6:checked ~ .popup-background,
#popup-switch6:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch7:checked ~ .popup-background,
#popup-switch7:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch8:checked ~ .popup-background,
#popup-switch8:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch9:checked ~ .popup-background,
#popup-switch9:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch10:checked ~ .popup-background,
#popup-switch10:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch11:checked ~ .popup-background,
#popup-switch11:checked ~ .popup-wrap
{
	display: none;
}

#popup-switch12:checked ~ .popup-background,
#popup-switch12:checked ~ .popup-wrap
{
	display: none;
}

/*------------------------------------------------*/

.scroll-wrap {
	background-color: transparent;
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0px;
	width:  960px;
	height: 140px;
}

@keyframes mugen-scroll{
	from{ transform: translatex(0); }
	  to{ transform: translatex(-100%); }
}
.scroll-wrap{
	display: flex;
	overflow: hidden;
}
.scroll-list{
	display: flex;
	list-style: none;
}
.scroll-list-anim{
	animation: mugen-scroll 180s infinite linear 0.5s both;
}
.scroll-item{
	width: calc(100vm / 6);
}
.scroll-item img{
	padding: 0 0 0 90px;
	filter: drop-shadow(2px 2px 5px rgba(60,60,60,0.7));
}
.scroll-wrap:hover .scroll-list{
	animation-play-state: paused;
}

/*------------------------------------------------*/