:root {
	/* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
	scroll-behavior: smooth;
}



/*
動くグラデーション
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@-webkit-keyframes AnimationName {
    0%{background-position:0% 58%}
    50%{background-position:100% 43%}
    100%{background-position:0% 58%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 58%}
    50%{background-position:100% 43%}
    100%{background-position:0% 58%}
}
@keyframes AnimationName {
    0%{background-position:0% 58%}
    50%{background-position:100% 43%}
    100%{background-position:0% 58%}
}

.promo-front {
	position: relative;
	z-index: 2;
	padding: 0%;
}
@media screen and (min-width: 1200px) {
	.promo-front {
		/*padding: 2%;*/
	}
}

.promo-h1 {
	font-weight: 700;
	margin: 0;
	font-size: 2.5em;
	color: #FFF;
}
.promo-h2 {
	font-weight: 700;
	margin: 1em 0;
	font-size: 0.3em;
	color: #FFF;
}

.wrap-original-transform-1 {
	perspective: 600px;
	transform-style: preserve-3d;
}

.original-transform-1 {
	transform: translateX(15px) translateY(80px) scale(0.9);
}
@media screen and (min-width: 1200px) {

	.original-transform-1 {
		transform: translateX(-50px) translateY(25px) scale(1.2);
	}
}


.conclusion{
	width:100%;
	max-width: 450px;
	margin-top: -80px;

}

@media screen and (min-width: 1200px) {
	.conclusion{
		width:100%;
		max-width: 600px;
	}	
}

.right{
	text-align: right;
}
/*
ボタン
–––––––––––––––––––––––––––––––––––––––––––––––––*/

.btn {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 0.5rem;
}

a.simplebutton {
	color: #fff;
	border: 2px solid #fff;
	border-radius: 0;
	margin-top: 25px;
  }
  
a.simplebutton:hover {
	color: #fff;
	background: #00000044;
  }

/*
ボタン
–––––––––––––––––––––––––––––––––––––––––––––––––– */

  a.masterbutton {
	font-size: 1.8rem;
	border-radius: 100vh;
	background: linear-gradient(90deg, var(--black-back-color1) 0, var(--black-back-color2) 100%);
	color: #fff;
  }
  
  a.masterbutton:hover {
	background: linear-gradient(90deg, var(--black-back-color3) 0, var(--black-back-color4) 100%);
}

/*
.background {
	background-image: url(./img/center_1.jpg);
}
*/

/*トップ*/

.banner1 {
	position: absolute;
	width: 35%;
	top: 3rem;
  	left: 3rem;

}

.banner2 {
	position: absolute;
	width: 50%;
	top: 35rem;
  	left: 3rem;
}

.banner3 {
	position: absolute;
	width: 30%;
	top: 3rem;
  	right: 3rem;

}

.banner4 {
	position: absolute;
	width: 60%;
	top: 46rem;
	right: 3rem;
}