@charset "utf-8";
/* ====================================================
	common.css打消し
==================================================== */
.commonContents {
	margin: 0 auto;
}
.commonContents .commonWrapper {
	border: none;
}
/* ====================================================
	ファーストビュー
==================================================== */
.fvWrapper {
	background-image:
		url("/img/vision/fv.jpg?version=210331"),
		linear-gradient(to bottom, #212121 0%,#212121 13%,#212121 25%,#232323 38%,#272727 50%, #272727 63%, #272727 75%, #272727 88%, #272727 100%);
	background-position: center center;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	width: 100%;
	height: 1305px;
	color: #ffffff;
}
.fvWrapper .commonWrapper {
	padding-top: 80px;
	height: 1225px;
	position: relative;
}

.fvTitle {
    font-family: futura-pt-condensed, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    line-height: 1.25em;
    letter-spacing: 14px;
    font-size: 59px;
    margin: 161px 0 0 13px;
}
.en, .ja {
	font-family: Noto Sans JP, sans-serif;
	opacity: 0;
}
.en {
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 2.6px;
	margin-right: 5px;
}
.en.active {
	animation: fadeInUpShort 0.5s ease forwards;
}
.ja {
	font-size: 33px;
	letter-spacing: 3px;
}
.ja.active {
	animation: fadeInDownShort 0.8s ease forwards;
}
.ja span.largeText {
	font-size: 49px;
}
.visionCopy01 {
    margin-top: 148px;
    margin-left: 182px;
}
.visionCopy01 .ja {
    margin-top: 25px;
    line-height: 1.4;
}
.visionCopy02 {
    text-align: right;
    margin-top: 70px;
    margin-right: 186px;
}
.visionCopy02 .ja {
	margin: 36px 0 0 -2px;
	letter-spacing: 3.5px;
	line-height: 1.54em;
}
.visionCopy03 {
    margin-top: 80px;
    margin-left: 242px;
}
.visionCopy03 .ja {
	margin: 39px 0 0 -3px;
	letter-spacing: 4px;
	line-height: 1.5em;
}

.visionCopy01 .ja {
	transform-origin: 100px 50px;
}

.visionCopy02 .ja {
    transform-origin: 550px 60px;
}

.visionCopy03 .ja {
	transform-origin: 100px 50px;
}

.en {
	display: inline-block;
}
#line01Position {
	position: absolute;
	top: 570px;
	left: 213px;
	width: 500px;
}

#line02Position {
    position: absolute;
    top: 804px;
    right: 221px;
}
#line03Position {
	position: absolute;
    top: 1053px;
    left: 271px;
}
.en.active,
.ja.active {
	animation: ripple 1.8s cubic-bezier(0.69, 1.04, 0.85, 1) both !important;
	opacity: 0;
}

#line01, #line02, #line03 {
	background: linear-gradient(0deg, #E7A446 0%, #DAAF08 45%, #EBC774 70%, #DAAF08 85%, #E7A446 90% 100%);
	height: 2px;
border: none;
}

@keyframes ripple {
	0%{
		opacity: 0;
		transform: scale(0.7);
	}60%{
		transform: scale(1.1)
	}100%{
		opacity: 1;
		transform: scale(1)
	}
}

.linesWrapper hr {
	position: absolute;
	width: 0;
	transition: width 1s ease-out;
}
.linesWrapper hr {
	width: 0;
	opacity: 0;
}
.linesWrapper hr.active {
	opacity: 1;
}
#line01 {
	position: absolute;
	top: 0;
	left: 0;
}
#line02 {
	position: absolute;
	top: 0;
	right: 0;
}
#line03 {
	position: absolute;
	top: 0;
	left: 0;
}
#line01, #line02, #line03 {
	width: 0;
}
#line01.active, #line02.active, #line03.active {
	transition: width 3s ease-out;
}



hr.line01.active {
    width: 33.8vw;
}
hr.line02 {
	top: 231px;
    right: 0;
}
hr.line02.active {
	width: 30.4vw;
}
hr.line03 {
	top: 480px;
    left: 0;
}
hr.line03.active {
    width: 34vw;
}
/* ====================================================
	グラデーション
==================================================== */
.gradationWrapper {
	width: 100%;
	height: 15px;
	background: linear-gradient(90deg, #aaaaaa, #e4007f, #6cc6cb, #00479d, #8fc31f, #ff0000, #f1a42f);
	background-size: 200% 200%;
	-webkit-animation: gradAnimation 10s linear infinite alternate;
	animation: AnimationName 10s linear infinite alternate;
}
@-webkit-keyframes gradAnimation {
	 0% { background-position:0% 50% }
	 100% { background-position:100% 50% }
}
@keyframes AnimationName {
	0% { background-position:100% }
	100% { background-position:0% }
}
/* ====================================================
	本文
==================================================== */
.bgWrapper {
	position: absolute;
	top: -30px;
	left: 74px;
}
.bgWrapper img {
	position: absolute;
	transform: scale(1.2);
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.5s ease;
}
.bgWrapper.active img {
	opacity: 1;
	transform: scale(1);
}
.bg01 {
	top: 0px;
	left: -1px;
}
.bg02 {
	top: 0;
	left: 160px;
	transition-delay: 0.2s !important;
}
.bg03 {
	top: 144px;
	left: 214px;
	transition-delay: 0.4s !important;
}
.bg04 {
	top: 290px;
	left: 91px;
	transition-delay: 0.6s !important;
}
.bg05 {
	top: 290px;
	left: -76px;
	transition-delay: 0.8s !important;
}
.bg06 {
	top: 145px;
	left: -117px;
	transition-delay: 1.0s !important;
}
.bg07 {
	top: 0px;
	left: -117px;
	transition-delay: 1.2s !important;
}
.titleWrapper {
	margin-top: 165px;
	text-align: center;
	opacity: 0;
}
.titleWrapper.active {
	animation: zoomIn 1.2s linear forwards;
}
@keyframes zoomIn {
	0%{
		opacity: 0;
		transform: scale(2);
	}80%{
		opacity: 0;
		transform: scale(1.8);
	}90%{
			opacity: 1;
			transform: scale(1.6);
	}100%{
		opacity: 1;
		transform: scale(1);
	}
}
.titleWrapper p {
	font-size: 30px;
	font-family: Noto Sans JP, sans-serif;
	font-weight: bold;
	letter-spacing: 2.4px;
}
.titleWrapper p:after {
	content: "";
	position: absolute;
	top: 66px;
	left: 447px;
	width: 87px;
	border-top: 2px #000000 solid;
}
.titleWrapper h3 {
	margin-top: 85px;
	letter-spacing: 5px;
	font-size: 40px;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: bold;
}
.textWrapper {
	margin: 69px 30px 118px 30px;
	font-size: 17.6px;
	line-height: 1.95em;
	opacity: 0;
}
.textWrapper.active {
	animation: fadeInUpShort 1s ease forwards;
}
.textWrapper p {
	margin-bottom: 34px;
}
span.colorGr {
	color: #f19149;
}
span.colorFu {
	color: #ff0000;
}
span.colorEn {
	color: #8fc31f;
}
span.colorDi {
	color: #0068b7;
}
span.colorCo {
	color: #30aeea;
}
span.colorBi {
	color: #e4007f;
}
span.colorAr {
	color: #898989;
}
.textWrapper p.sign {
	text-align: right;
	padding-top: 21px;
	margin-right: -7px;
	margin-bottom: 0;
	font-size: 27.2px;
	letter-spacing: 3.9px;
}
.sign span {
	display: block;
	font-size: 16px;
	letter-spacing: 0.5px;
	margin-right: 6px;
}