@charset "utf-8";
/*
====================================================
MAINVISUAL
====================================================
*/

:root {
	--base-size: 171px;
	--double-base-size: calc(var(--base-size) * 2);
	--perspective-distance: calc(var(--base-size) * 2);
	--transform-distance: calc(var(--base-size) / 2);
	--large-transform-distance: var(--base-size);
	--baseline-offset: -260px;
}

#mainvisual{
	width: 100%;
	height: var(--double-base-size);
	overflow: hidden;
	background: #FFF;
	position: relative;
    margin-top: -30px;
}
#mainvisual ul{
	width: calc(var(--base-size) * 4);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#mainvisual ul li{
	position: absolute;
	width: var(--base-size);
	height: var(--base-size);
	overflow: hidden;
}
#mainvisual ul li .slide{
	position: absolute;
	left: 0px;
	top:0px;
	width: var(--base-size);
	height: var(--base-size);
}
#mainvisual ul li a{
	position: absolute;
	left: 0px;
	top:0px;
	display: block;
}
#mainvisual ul li#mainvisual_L{ width:var(--double-base-size); height: var(--double-base-size);  left:var(--baseline-offset); }
#mainvisual ul li#mainvisual_L .new{ height: calc(var(--double-base-size) - 1px); }
#mainvisual_S_1{ left:calc(var(--double-base-size) + var(--baseline-offset)); top: 0px; }
#mainvisual_S_2{ left:calc(var(--double-base-size) + var(--baseline-offset)); top: var(--base-size); }
#mainvisual_S_3{ left:calc(var(--base-size) * 3 + var(--baseline-offset)); top: 0px; }
#mainvisual_S_4{ left:calc(var(--base-size) * 3 + var(--baseline-offset)); top: var(--base-size); }
#mainvisual_S_5{ left:calc(var(--base-size) * 4 + var(--baseline-offset)); top: 0px; }
#mainvisual_S_6{ left:calc(var(--base-size) * 4 + var(--baseline-offset)); top: var(--base-size); }
#mainvisual_S_7{ left:calc(var(--base-size) * 5 + var(--baseline-offset)); top: 0px; }
#mainvisual_S_8{ left:calc(var(--base-size) * 5 + var(--baseline-offset)); top: var(--base-size); }
#mainvisual_S_9{ left:calc(var(--base-size) * 6 + var(--baseline-offset)); top: 0px; }
#mainvisual_S_10{ left:calc(var(--base-size) * 6 + var(--baseline-offset)); top: var(--base-size); }



#mainvisual img{
	width: 100%;
	height: auto;
	object-fit: cover;
}

#mainvisual *{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
    transition: none;
}

#mainvisual ul li {
	position: absolute;
	-webkit-perspective: var(--perspective-distance);
	-moz-perspective: var(--perspective-distance);
	-ms-perspective: var(--perspective-distance);
	perspective: var(--perspective-distance);
}

#mainvisual .box-rotate {
	position: relative;
	-webkit-transition: all 1.0s ease;
	-moz-transition: all 1.0s ease;
	-ms-transition: all 1.0s ease;
	transition: all 1.0s ease;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0, 0, calc(var(--transform-distance) * -1));
	-moz-transform: translate3d(0, 0, calc(var(--transform-distance) * -1));
	-ms-transform: translate3d(0, 0, calc(var(--transform-distance) * -1));
	transform: translate3d(0, 0, calc(var(--transform-distance) * -1));
}
#mainvisual .box-rotate.stop{
	-webkit-transition: all 0s ease;
	-moz-transition: all 0s ease;
	-ms-transition: all 0s ease;
	transition: all 0s ease;
}

#mainvisual ul li .slide {
	width: var(--base-size);
	height: var(--base-size);
	margin: 5px;
}
#mainvisual ul li .slide .new{
	height: calc(var(--base-size) - 2px);
}


#mainvisual ul li:not(#mainvisual_L) .slide img{
	max-width: var(--base-size);
}

#mainvisual .box-rotate .old {
	z-index: 2;
	-webkit-transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--transform-distance));
	-moz-transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--transform-distance));
	-ms-transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--transform-distance));
	transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--transform-distance));
}

#mainvisual .box-rotate .new {
	display: none;
	-webkit-transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--transform-distance));
	-moz-transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--transform-distance));
	-ms-transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--transform-distance));
	transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--transform-distance));
}
#mainvisual .new, #spcampaignbox .new{
	display: none;
}

#mainvisual .box-rotate-right.motion {
	-webkit-transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
	-moz-transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
	-ms-transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
	transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
}

#mainvisual .box-rotate-up.motion {
	-webkit-transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
	-moz-transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
	-ms-transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
	transform: translate3d(0, 0, calc(var(--transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
}

#mainvisual ul li#mainvisual_L .box-rotate {
	-webkit-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1));
	-moz-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1));
	-ms-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1));
	transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1));
}

#mainvisual ul li#mainvisual_L .slide{
	width: var(--double-base-size);
	height: var(--double-base-size);
}

#mainvisual ul li#mainvisual_L  .box-rotate .old {
	z-index: 2;
	-webkit-transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--large-transform-distance));
	-moz-transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--large-transform-distance));
	-ms-transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--large-transform-distance));
	transform: rotate3d(-1, 0, 0, 0deg) translate3d(0, 0, var(--large-transform-distance));
}

#mainvisual ul li#mainvisual_L  .box-rotate .new {
	display: none;
	-webkit-transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--large-transform-distance));
	-moz-transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--large-transform-distance));
	-ms-transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--large-transform-distance));
	transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, var(--large-transform-distance));
}

#mainvisual ul li#mainvisual_L  .box-rotate-right.motion {
	-webkit-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
	-moz-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
	-ms-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
	transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(0, 1, 0, -90deg);
}

#mainvisual ul li#mainvisual_L  .box-rotate-up.motion {
	-webkit-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
	-moz-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
	-ms-transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
	transform: translate3d(0, 0, calc(var(--large-transform-distance) * -1)) rotate3d(-1, 0, 0, -90deg);
}

/*LOADING*/
.loading{
	position: absolute;
	width: 100%;
	height: var(--double-base-size);
	background: #FCFCFC;
	z-index: 1;
	text-align: center;
	overflow: hidden;
}
.loading span{
	padding-top: 280px;
	display: inline-block;
	color: gray;
	font-size: 74px;
}

#mainvisual_loading img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
  min-width: 1920px;
  min-height: 342px;
  overflow: hidden;
}
/* footerbnr */
#footerbnr{
	position: relative;
	width: 100%;
	height: 300px;
	margin-bottom: 54px;
	overflow: hidden;
	margin-top: 75px;
}
#footerbnr ul li {
  list-style: none;
}

#footerbnr ul li a{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
#spfooterbnr{
  display: none;
}
@media screen and (max-width:667px) {
  #footerbnr{
    display: none;
  }
  #spfooterbnr{
    display: flex;
		line-height: 0;
		padding-bottom: 10px;
  }
		#spfooterbnr ul{
			margin:0px;
		}
	#spfooterbnr ul li {
		margin: 0px;
	  list-style: none;
		float:left;
		width: 50%;
	}
	#spfooterbnr ul li .alphaover{
		width: 100%;
		height: auto;
	}
  #mainvisual {
    width: auto;
    height: 100%;
	padding-top: 80px;
  }
  #mainvisual ul:before {
    content:"";
    display: block;
    padding-top: 100%;
  }
  #mainvisual ul {
    width: auto;
    height: 100%;
  }
  #mainvisual ul li:not(#mainvisual_L) {
    display: none;
  }
  #mainvisual ul li#mainvisual_L {
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  #mainvisual ul li#mainvisual_L .slide {
    width: 100%;
    height: auto;
	margin: 0;
  }
  #mainvisual ul li#mainvisual_L img {
    max-width: 100%;
    height: auto;
  }

  #mainvisual ul li a{
	width: 100%;
	height: 100%;
	}

	#mainvisual_loading{
	min-height: 100vw;
	margin-top: 80px;
	}
	#mainvisual_loading img{
	min-height: 100vw;
	}

	#page-top h3{
		width: 270px !important;
	}

	.btn-topicon img.window-blank{
		bottom: 0px !important;
		right: 5px !important;
		width: 20px !important;
		height: 20px !important;
	}
}

#page-top h3{
	width: 300px;
	text-align: center;
	border-bottom: 5px solid orange;
	margin: 20px auto;
}

.btn-topicon{
	position: relative;
}

.btn-topicon img.window-blank{
	position: absolute;
	bottom: 15px;
	right: 20px;
	width: 25px;
	height: 25px;
	z-index: 1;
	display: block;
}