@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html {
	width: 100%;
	font-size: 62.5%;
	background: #fff;
}

/** {background: rgba(255,0,255,0.02);}*/

body {
	width: 100%;
	max-width: 1920px;
	font-family: 'Noto Sans JP', sans-serif, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	color: #1a2635;
	line-height: 1.7;
	letter-spacing: 0.05em;
	font-weight: 500;
	font-feature-settings: "palt";
	margin: auto;
	background: #fff;
}

#wrap {
	min-width: 1024px;
	overflow: hidden;
}

a {
	color: #1a2635;
	text-decoration: none;
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}

.showPc {}

.showSp {
	display: none;
}

.showLandscape {}

.showPortrait {
	display: none;
}

/*--- Responsive ---*/
@media (orientation: portrait) {
	.showLandscape {
		display: none;
	}

	.showPortrait {
		display: block;
	}
}

@media only screen and (max-width:640px) {

	html,
	body {
		width: 640px;
		min-width: 640px;
		font-size: 106.67%;
	}

	#wrap {
		width: 640px;
		min-width: 640px;
		overflow: hidden;
	}

	.showPc {
		display: none !important;
	}

	.showSp {
		display: block;
	}
}



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

fonts

---------------------------------------------- */
.ff-serif {
	font-family: 'Arvo', serif;
}



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

animation

---------------------------------------------- */
.anime,
.animest {
	opacity: 0;
}

.animest.animeFadeIn,
.animest .animeFadeIn {
	animation-name: anime_fadeIn;
	animation-delay: 0.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

.animest.animeFadeInBottomTop,
.animest .animeFadeInBottomTop {
	animation-name: fadeInBottomTop;
	animation-delay: 0.0s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

.animest.animeFadeInRightLeft,
.animest .animeFadeInRightLeft {
	animation-name: fadeInRightLeft;
	animation-delay: 0.0s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

.animest.animeFadeInLeftRight,
.animest .animeFadeInLeftRight {
	animation-name: fadeInLeftRight;
	animation-delay: 0.0s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

.animest.animeFadeInScale,
.animest .animeFadeInScale {
	animation-name: fadeInScale;
	animation-delay: 0.0s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

.animest.animeHeaderLogo {
	animation-name: headerlogo;
	animation-delay: 0.0s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes anime_fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeInBottomTop {
	0% {
		opacity: 0;
		transform: translateY(4rem) translateX(0) scale(1);
	}

	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) scale(1);
	}
}

@keyframes fadeInScale {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeInRightLeft {
	0% {
		opacity: 0;
		transform: translateX(5rem) scale(1.05);
	}

	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes fadeInLeftRight {
	0% {
		opacity: 0;
		transform: translateX(-5rem) scale(1.05);
	}

	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes headerlogo {
	0% {
		opacity: 0;
		transform: translateY(0rem) translateX(0) scale(1.5);
	}

	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) scale(1);
	}
}

@keyframes gradient {
	0% {
		background-position: 100% 100%
	}

	50% {
		background-position: 0% 0%
	}

	100% {
		background-position: 100% 100%
	}
}


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

#main

---------------------------------------------- */
#main {
	opacity: 0;
	animation: anime_fadeIn 1.8s ease 0.5s 1 forwards;
	-webkit-animation: anime_fadeIn 1.8s ease 0.5s 1 forwards;
}


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

header

---------------------------------------------- */
#header {
	width: 100vw;
	height: calc(100vh - 0px);
	position: relative;
	overflow: hidden;
}

#headerBar {
	width: 160px;
	padding: 8px 12px 10px;
	position: absolute;
	top: 25px;
	left: 25px;
	z-index: 9000;
	background: #fff;

	animation-delay: 3s;
	animation-duration: 1s;
}

.header__inner {
	width: 1920px;
	height: 1920px;
	margin-left: -960px;
	margin-top: -960px;
	/*	background: url(/vision/_image/index/header-bg.svg) no-repeat, linear-gradient(45deg, #f19a8c 32%, #e51c58 80%) left top / 49.2% 100% no-repeat, linear-gradient(45deg, #ef8867 40%, #f8ba00 100%) right top / 50.8% 100% no-repeat;*/
	position: relative;
	top: calc(50vh - 0px);
	left: 50%;
}


.header__inner::before {
	content: "";
	width: 1920px;
	height: 1920px;
	background: url(/vision/_image/index/header-bg.svg) no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 997;
}

.header__inner::after {
	content: "";
	width: 64%;
	height: 100%;
	background: linear-gradient(14deg, #5275b8 10%, #00adc9 40%, #00adc9 60%, #5275b8 90%);
	background-position: 100% 100%;
	background-size: 400%;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: rotate(44deg);
	transform-origin: bottom left;
	z-index: 998;
	animation: gradient 6s ease-in 1s infinite;
}

.header__white {
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;

	animation-name: fadeOut;
	animation-delay: 3s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.header__inner img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

.header__inner .header__logo img:nth-of-type(1) {
	animation-delay: 1.8s;
	animation-duration: 0.7s;
}

.header__inner .header__logo img:nth-of-type(2) {
	animation-delay: 1.0s;
	animation-duration: 1s;
}

.header__inner .header__logo img:nth-of-type(3) {
	animation-delay: 1.8s;
	animation-duration: 0.7s;
}

.header__inner div.gradation-pk {
	width: 49.2%;
	height: 100%;
	background: linear-gradient(45deg, #e51c58 5%, #f1898c 45%, #f1898c 55%, #e51c58 95%);
	background-position: 100% 100%;
	background-size: 400%;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	animation: gradient 10s ease-in 1s infinite;
}

.header__inner div.gradation-og {
	width: 50.8%;
	height: 100%;
	background: linear-gradient(45deg, #f8ba00 0%, #ef8867 35%, #ef8867 65%, #f8ba00 100%);
	background-position: 100% 100%;
	background-size: 400%;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	animation: gradient 7s ease-in 1s infinite;
}

/*--- Responsive ---*/
@media only screen and (max-width:1500px) {
	.header__inner {
		width: 1536px;
		height: 1536px;
		margin-left: -768px;
		margin-top: -768px;
	}

	.header__inner::before {
		width: 1536px;
		height: 1536px;
	}
}

@media (orientation: portrait) {
	.header__inner {
		width: 100vw;
		height: 214.28vw;
		margin-left: 0;
		margin-top: -107.14vw;
		/*		background: url(/vision/_image/index/header-bg-sp.svg) left bottom / 100% no-repeat, linear-gradient(45deg, #f19a8c 32%, #e51c58 89.3%) left top / 49.2% 100% no-repeat, linear-gradient(45deg, #ef8867 51.6%, #f8ba00 100%) right top / 50.8% 100% no-repeat;*/
		position: relative;
		top: 50vh;
		left: 0;
	}

	.header__inner::before {
		content: "";
		width: 100%;
		height: 100%;
		background: url(/vision/_image/index/header-bg-sp.svg) no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 997;
	}

	.header__inner::after {
		width: 80%;
	}

	.header__inner div.gradation-pk {
		width: 49.2%;
		height: 100%;
		background: linear-gradient(45deg, #f19a8c 32%, #e51c58 89.3%);
		background-position: 0% 50%;
		background-size: 400%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		animation: gradient 10s ease infinite;
	}

	.header__inner div.gradation-og {
		width: 50.8%;
		height: 100%;
		background: linear-gradient(45deg, #ef8867 51.6%, #f8ba00 100%);
		background-position: 0% 50%;
		background-size: 400%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		right: 0;
		animation: gradient 10s ease infinite;
	}
}

@media (orientation: portrait) and (max-width: 1200px) {
	.header__inner img {
		width: 80%;
		margin: 20% 10% 0;
	}

}

@media (orientation: portrait) and (max-width: 640px) {
	#header {
		height: 86vh;
	}

	#headerBar {
		width: 206px;
	}

	.header__inner {
		top: 43vh;
	}

	.header__inner img {
		width: 100%;
		margin: 0;
	}

}



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

scroll

---------------------------------------------- */
.scroll {
	display: flex;
	align-items: center;
	width: 130px;
	height: 13px;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3rem;
	position: absolute;
	bottom: 6%;
	left: calc(50% - 136.5px);
	transform: rotate(90deg);
	transform-origin: right bottom;
	z-index: 998;
}

.scroll i {
	width: 75px;
	height: 3px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.scroll i::before,
.scroll i::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.scroll i::before {
	background-color: #e73361;
	z-index: 1;
	animation: scroll 1.5s infinite linear;
}

.scroll i::after {
	background-color: #fff;
	opacity: .1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}

@keyframes scroll {
	0% {
		left: -100%
	}

	80% {
		left: 100%
	}

	100% {
		left: 100%
	}
}

/*--- Responsive ---*/
@media (orientation: portrait) {
	.scroll {
		bottom: 12%;
	}
}

@media only screen and (max-width:640px) {
	.scroll {
		width: 150px;
		font-size: 1.0rem;
		left: calc(50% - 156.5px);
		bottom: calc(50% - 400px);
	}
}


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

lead

---------------------------------------------- */
.leadWrap {
	padding: 22.5rem 0;
	/*
	background: url(/vision/_image/index/lead-bg.png) no-repeat, -moz-linear-gradient(30deg, #f8ba00 13.7%, #f19458 64.5%) left top / 51% auto no-repeat, -moz-linear-gradient(-135deg, #f19a8c 39.5%, #e51c58 92.5%) right top / 49% auto no-repeat;
	background: url(/vision/_image/index/lead-bg.png) no-repeat, -webkit-linear-gradient(30deg, #f8ba00 13.7%, #f19458 64.5%) left top / 51% auto no-repeat, -webkit-linear-gradient(-135deg, #f19a8c 39.5%, #e51c58 92.5%) right top / 49% auto no-repeat;
*/
	background: url(/vision/_image/index/lead-bg.png) no-repeat, linear-gradient(30deg, #f8ba00 13.7%, #f19458 64.5%) left top / 51% 100% no-repeat, linear-gradient(-135deg, #f19a8c 39.5%, #e51c58 92.5%) right top / 49% 100% no-repeat;
}

.lead__inner {
	width: 90%;
	max-width: 1200px;
	margin: auto;
	position: relative;
}

.lead__inner::before {
	content: "";
	width: 305px;
	height: 625px;
	background: url(/vision/_image/index/lead-photo1.png);
	background-size: cover;
	position: absolute;
	left: 0;
	top: -74px;
	z-index: 1;
	opacity: 0;
}

.lead__inner::after {
	content: "";
	width: 307px;
	height: 264px;
	background: url(/vision/_image/index/lead-photo2.png);
	background-size: cover;
	position: absolute;
	left: calc(50% - 510px);
	top: 580px;
	opacity: 0;
}

.animest.lead__inner {
	opacity: 1;
}

.animest.lead__inner::before {
	animation-name: fadeInLeftRight;
	animation-delay: 0.7s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

.animest.lead__inner::after {
	animation-name: fadeInLeftRight;
	animation-delay: 1.2s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

.lead__text {
	width: 840px;
	max-width: 70%;
	min-height: 80em;
	margin-left: auto;
	margin-right: 0;
	padding: 13% 8%;
	background: #fff;
	position: relative;
	opacity: 0;
}

.lead__text::before {
	content: "";
	width: 100%;
	height: 50%;
	background: #fff;
	position: absolute;
	top: -37px;
	left: 0;
	transform: skewY(-5deg);
	z-index: -1;
}

.lead__text::after {
	content: "";
	width: 100%;
	height: 50%;
	background: #fff;
	position: absolute;
	bottom: -37px;
	left: 0;
	transform: skewY(-5deg);
	z-index: -1;
}

.lead__text h2 {
	font-size: 3.2rem;
	font-weight: 700;
	margin-bottom: 30px;
}

.lead__text > p,
.lead__text__more > p {
	padding-bottom: 0.8em;
	font-size: 1.6rem;
	line-height: 2;
	text-indent: 1em;
	letter-spacing: 0.06em;
}

.lead__text__more > p:last-child {
	text-align: right;
	padding-bottom: 2em;
}


/*--- Responsive ---*/
@media only screen and (max-width:1280px) {
	/*.lead__inner::after {
		left: 0;
	}*/
}

@media only screen and (max-width:1199px) {
	/*	.lead__text {
		padding: 100px 80px 100px 150px;
	}*/

	.lead__inner::before {
		width: calc(305px * 0.85);
		height: calc(625px * 0.85);
		/*left: calc(50% - 500px);
		top: 0;*/
	}

	.lead__inner::after {
		width: calc(307px * 0.85);
		height: calc(264px * 0.85);
		left: calc(50% - 430px);
	}
}

@media only screen and (max-width:640px) {
	.leadWrap {
		padding: 200px 0 200px;
	}

	.lead__inner {
		width: 95%;
	}

	.lead__inner::before {
		width: calc(300px * 0.9);
		height: calc(476px * 0.9);
		background: url(/vision/_image/index/lead-photo1-sp.png);
		background-size: cover;
		left: 288px;
		top: -170px;
	}

	.lead__inner::after {
		width: calc(245px * 1.5);
		height: calc(211px * 1.5);
		top: auto;
		bottom: -160px;
		left: 40px;
	}

	.lead__text {
		max-width: 100%;
		min-height: auto;
		padding: 260px 40px;
		position: relative;
	}

	.lead__text h2 {
		font-size: 2rem;
		margin-bottom: 30px;
	}

	.lead__text > p,
	.lead__text__more > p {
		font-size: 1.5rem;
		line-height: 1.8;
	}
}


/* ------------- ボタン ------------- */
.lead__openBtn,
.lead__closeBtn {
	position: relative;
	height: 20rem;
	margin-top: -10rem;
	cursor: pointer;
	/*background: rgba(245, 255, 0, 0.8);*/
}

.lead__openBtn {
	background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
	background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(to top, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 2550, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}

.lead__openBtn .readmore,
.lead__closeBtn .readmore {
	width: 240px;
	height: 4rem;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	line-height: 4rem;
	border: 1px solid #1a2635;
	position: absolute;
	bottom: 0rem;
	left: calc(50% - 120px);
	transition: 0.8s;
}


/*--- Responsive ---*/
@media only screen and (max-width:640px) {

	.lead__openBtn,
	.lead__closeBtn {
		height: 15rem;
		margin-top: -10rem;
	}

	.lead__openBtn .readmore,
	.lead__closeBtn .readmore {
		width: 50%;
		height: 2.5em;
		font-size: 1.2rem;
		line-height: 2.5em;
		left: calc(50% - 25%);
	}
}





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

about

---------------------------------------------- */
.about {
	width: 90%;
	margin: auto;
	padding: 15rem 0;
}

.about h2 {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 4.5rem;
}

.about h2 em {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42rem;
	padding: 0.0em 0 0.05em;
	font-size: 3.4rem;
	text-align: center;
	line-height: 6rem;
	letter-spacing: 0.05em;
	margin: 0 auto 3.5rem;
	position: relative;
}

.about h2 em::before {
	content: "";
	width: 100%;
	height: 2px;
	background: #1a2635;
	position: absolute;
	top: 0;
	left: 0;
}

.about h2 em::after {
	content: "";
	width: 100%;
	height: 2px;
	background: #1a2635;
	position: absolute;
	bottom: 0;
	left: 0;
}

.about h2 em span {
	display: inline-block;
	font-size: 3.8rem;
	line-height: 5.6rem;
	margin-left: 5px;
	padding-top: 4px;
}

.aboutWrap01 {
	max-width: 770px;
	margin: 0 auto 11rem;
}

.aboutWrap01__item {
	width: 100%;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	line-height: 11.1rem;
	margin-bottom: 1.7rem;
	padding-left: 12rem;
	background: #1a2635;
	position: relative;
}

.aboutWrap01__item:last-child {
	margin-bottom: 0;
}

.aboutWrap01__item::before {
	content: "";
	width: 111px;
	height: 111px;
	position: absolute;
	top: 0;
	left: 4.5rem;
}

.aboutWrap01__item:nth-child(1)::before {
	background: url(/vision/_image/index/about01.svg) no-repeat;
}

.aboutWrap01__item:nth-child(2)::before {
	background: url(/vision/_image/index/about02.svg) no-repeat;
}

.aboutWrap01__item:nth-child(3)::before {
	background: url(/vision/_image/index/about03.svg) no-repeat;
}

.aboutWrap01 + p {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 4.5rem;
}

.aboutWrap02 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1080px;
	margin: auto;
}

.aboutWrap02__item {
	display: table;
	width: 49.2%;
	margin-bottom: 1.6%;
	padding: 8.5rem 2.5rem 6rem;
	background: #e9eded;
	position: relative;
}

.aboutWrap02__item:nth-child(3),
.aboutWrap02__item:nth-child(4) {
	margin-bottom: 0;
}

.aboutWrap02__item h3 {
	width: 81%;
	min-width: 40rem;
	padding: 0 0 0.07em;
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	line-height: 3rem;
	background: #1a2635;
	border-radius: 15px;
	position: absolute;
	top: 3rem;
	left: 9.5%;
}

.aboutWrap02__item p {
	display: table-cell;
	font-size: 1.8rem;
	text-align: center;
	vertical-align: middle;
}

.aboutWrap02__item a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0%;

	transition: 0.3s;
}

.aboutWrap02__item a::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 2.5rem;
	left: calc(50% - 10px);

	border: 1px solid #404040;
	border-width: 0 2px 2px 0;

	transform: rotate(45deg) scale(0.8);
	transition: 0.3s;
}

.aboutWrap02__item a:hover {
	background: rgba(233, 237, 237, 0.23);
}

.aboutWrap02__item a:hover::before {
	transform: rotate(45deg) translateY(0.3rem) translateX(0.3rem) scale(0.8);
}


/*--- Responsive ---*/
@media only screen and (max-width:640px) {
	.about {
		padding: 100px 0;
	}

	.about h2 {
		font-size: 1.6rem;
		margin-bottom: 40px;
	}

	.about h2 em {
		width: 460px;
		font-size: 2.2rem;
		line-height: 4rem;
		margin: 0 auto 30px;
	}

	.about h2 em span {
		font-size: 2.4rem;
		line-height: 3.6rem;
	}

	.aboutWrap01 {
		margin: 0 auto 60px;
	}

	.aboutWrap01__item {
		font-size: 1.8rem;
		line-height: 1.5;
		margin-bottom: 10px;
		padding: 4.5em 0 30px 0;
	}

	.aboutWrap01__item::before {
		width: 4em;
		height: 4em;
		top: 0.5em;
		left: calc(50% - 2em);
	}

	.aboutWrap01 + p {
		font-size: 1.6rem;
		margin-bottom: 40px;
	}

	.aboutWrap02 {
		display: flex;
		flex-wrap: wrap;
	}

	.aboutWrap02__item {
		width: 100%;
		margin-bottom: 10px;
		padding: 105px 2px 80px;
	}

	.aboutWrap02__item:nth-child(3) {
		margin-bottom: 10px;
		order: 1;
	}
	
	.aboutWrap02__item:nth-child(2) {
		margin-bottom: 10px;
		order: 2;
	}
	
	.aboutWrap02__item:last-child{
		margin-bottom: 10px;
		order: 3;
	}

	.aboutWrap02__item h3 {
		width: 90%;
		min-width: auto;
		color: #fff;
		font-size: 1.6rem;
		line-height: 1.5em;
		border-radius: 30px;
		position: absolute;
		top: 35px;
		left: 5%;
	}

	.aboutWrap02__item p {
		font-size: 1.5rem;
	}

	.aboutWrap02__item a::before {
		width: 25px;
		height: 25px;
		bottom: 2.2rem;
		left: calc(50% - 14px);

		transform: rotate(45deg) scale(1);
	}

	.aboutWrap02__item a:hover::before {
		transform: rotate(45deg) translateY(0.3rem) translateX(0.3rem) scale(1);
	}

}

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

vision

---------------------------------------------- */
.vision {
	padding: 10rem 0;
}

.vision01 {
	background: linear-gradient(45deg, #f5aa00, #ed7d63);
}

.vision02 {
	background: linear-gradient(45deg, #56bdb0, #5bb431);
}

.vision03 {
	background: linear-gradient(45deg, #00a2c9, #5275b8);
}

.vision04 {
	background: linear-gradient(45deg, #f19a8c, #e51c58);
}

.vision__inner {
	width: 90%;
	max-width: 1200px;
	margin: auto;
}

.vision__inner h2 {
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	padding: 5rem 0;
}

.vision01 .vision__inner h2 {
	background: url(/vision/_image/index/vision01-1.svg) top left no-repeat, url(/vision/_image/index/vision01-2.svg) top right no-repeat, rgba(229, 0, 18, 0.3);
}

.vision02 .vision__inner h2 {
	background: url(/vision/_image/index/vision02-1.svg) top left no-repeat, url(/vision/_image/index/vision02-2.svg) top right no-repeat, rgba(3, 110, 183, 0.3);
}

.vision03 .vision__inner h2 {
	background: url(/vision/_image/index/vision03-1.svg) top left no-repeat, url(/vision/_image/index/vision03-2.svg) top right no-repeat, rgba(95, 25, 133, 0.3);
}

.vision04 .vision__inner h2 {
	background: url(/vision/_image/index/vision04-1.svg) top left no-repeat, url(/vision/_image/index/vision04-2.svg) top right no-repeat, rgba(164, 11, 94, 0.3);
}

.vision__inner h2 em {
	display: block;
	font-size: 3.2rem;
	text-align: center;
	margin-bottom: 1rem;
}

.visionWrap {
	display: flex;
	flex-wrap: wrap;
	padding: 6rem 0;
	background: #fff;
	position: relative;
}

.vision01 .vision__item,
.vision02 .vision__item {
	width: 33.3%;
}

.vision03 .vision__item,
.vision04 .vision__item {
	width: 50%;
}

.vision__item {
	padding: 0 4rem 10rem;
	position: relative;
	cursor: pointer;
}

.vision04 .vision__item:nth-child(1),
.vision04 .vision__item:nth-child(2) {
	padding-bottom: 14rem;
}

.vision04 .vision__item:nth-child(3),
.vision04 .vision__item:nth-child(4) {
	padding-top: 6rem;
}

.vision__item:nth-child(2) {
	animation-delay: 0.2s;
}

.vision__item:nth-child(3) {
	animation-delay: 0.4s;
}

.vision04 .vision__item:nth-child(3) {
	animation-delay: 0.0s;
}

.vision04 .vision__item:nth-child(4) {
	animation-delay: 0.2s;
}


.vision__item::after {
	content: "";
	width: 2px;
	height: 100%;
	position: absolute;
	top: 0;
	right: -1px;
}

.vision01 .vision__item::after {
	background: linear-gradient(135deg, #f5aa00, #ed7d63);
}

.vision02 .vision__item::after {
	background: linear-gradient(135deg, #56bdb0, #5bb431);
}

.vision03 .vision__item::after {
	background: linear-gradient(135deg, #00a2c9, #5275b8);
}

.vision04 .vision__item:first-child::after {
	height: 200%;
	background: linear-gradient(135deg, #f19a8c, #e51c58);
}

.vision04 .vision__item:first-child::before {
	content: "";
	width: calc(200% - 8rem);
	height: 2px;
	background: linear-gradient(135deg, #f19a8c, #e51c58);
	position: absolute;
	bottom: -1px;
	left: 4rem;
}

.vision__item:last-child::after {
	display: none;
}

.vision__item a {
	display: block;
	transition: 0.3s;
}

.vision__item span:not(.readmore) {
	display: block;
	width: 159px;
	height: 55px;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	text-align: center;
	line-height: 5.5rem;
	margin: 0 auto 3rem;
}

.vision__item span:not(.readmore) b {
	display: inline-block;
	font-weight: 700;
	transform: scaleX(0.95);
}

.vision01 .vision__item span:not(.readmore) {
	background: linear-gradient(45deg, #f5aa00, #ed7d63);
}

.vision02 .vision__item span:not(.readmore) {
	background: linear-gradient(45deg, #56bdb0, #5bb431);
}

.vision03 .vision__item span:not(.readmore) {
	background: linear-gradient(45deg, #00a2c9, #5275b8);
}

.vision04 .vision__item span:not(.readmore) {
	background: linear-gradient(45deg, #f19a8c, #e51c58);
}

.vision__item span em {
	font-size: 4rem;
	font-weight: 500;
	font-style: italic;
	vertical-align: middle;
	margin-left: 10px;
}

.vision__item h3 {
	font-size: 1.8rem;
	font-weight: 700;
	text-align: justify;
	letter-spacing: 0.06em;
	margin: auto;
}

.vision__item span.readmore {
	display: block;
	width: 240px;
	height: 4rem;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	line-height: 4rem;
	border: 1px solid #1a2635;
	position: absolute;
	bottom: 2rem;
	left: calc(50% - 120px);
	transition: 0.8s;
}

.vision__item:hover a span.readmore {
	color: #fff;
	background: #1a2635;
}

.vision04 .vision__item:nth-child(1) span.readmore,
.vision04 .vision__item:nth-child(2) span.readmore {
	bottom: 6rem;
}

/*remodal*/
.remodal {
	padding: 70px 50px !important;
	position: relative;
}

.visionWrap01__remodal {
	background: linear-gradient(45deg, #f5aa00, #ed7d63) !important;
}

.visionWrap02__remodal {
	background: linear-gradient(45deg, #56bdb0, #5bb431) !important;
}

.visionWrap03__remodal {
	background: linear-gradient(45deg, #00a2c9, #5275b8) !important;
}

.visionWrap04__remodal {
	background: linear-gradient(45deg, #f19a8c, #e51c58) !important;
}

.remodal::after {
	content: "";
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background: #fff;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: -1;
}

.remodal span {
	display: block;
	width: 159px;
	height: 55px;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	line-height: 5.5rem;
	margin: 0 auto 3rem;
}

.visionWrap01__remodal span {
	background: linear-gradient(45deg, #f5aa00, #ed7d63);
}

.visionWrap02__remodal span {
	background: linear-gradient(45deg, #56bdb0, #5bb431);
}

.visionWrap03__remodal span {
	background: linear-gradient(45deg, #00a2c9, #5275b8);
}

.visionWrap04__remodal span {
	background: linear-gradient(45deg, #f19a8c, #e51c58);
}

.remodal span em {
	font-size: 4rem;
	font-weight: 500;
	font-style: italic;
	vertical-align: middle;
	margin-left: 10px;
}

.remodal h3 {
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.06em;
	margin: 0 auto 2rem;
}

.remodal p {
	font-size: 1.6rem;
	text-indent: 1em;
}

/*--- Responsive ---*/
@media only screen and (max-width:640px) {
	.vision {
		padding: 100px 0;
	}

	.vision__inner h2 {
		font-size: 1.6rem;
		padding: 30px 0;
	}

	.vision01 .vision__inner h2 {
		background: url(/vision/_image/index/vision01-1.svg) top left -20% / 50% no-repeat, url(/vision/_image/index/vision01-2.svg) top right -20% / 50% no-repeat, rgba(229, 0, 18, 0.3);
	}

	.vision02 .vision__inner h2 {
		background: url(/vision/_image/index/vision02-1.svg) top left -20% / 50% no-repeat, url(/vision/_image/index/vision02-2.svg) top right -20% / 50% no-repeat, rgba(3, 110, 183, 0.3);
	}

	.vision03 .vision__inner h2 {
		background: url(/vision/_image/index/vision03-1.svg) top left -20% / 45% no-repeat, url(/vision/_image/index/vision03-2.svg) top right -20% / 45% no-repeat, rgba(95, 25, 133, 0.3);
	}

	.vision04 .vision__inner h2 {
		background: url(/vision/_image/index/vision04-1.svg) top left -10% / 50% no-repeat, url(/vision/_image/index/vision04-2.svg) top right -10% / 50% no-repeat, rgba(164, 11, 94, 0.3);
	}

	.vision__inner h2 em {
		font-size: 2.4rem;
		margin-bottom: 10px;
	}

	.visionWrap {
		padding: 0;
		background: none;
	}

	.vision01 .vision__item,
	.vision02 .vision__item {
		width: 100%;
	}

	.vision03 .vision__item,
	.vision04 .vision__item {
		width: 100%;
	}

	.vision__item {
		margin-bottom: 10px;
		padding: 40px;
		background: #fff;
		animation-delay: 0.0s !important;
	}

	.vision04 .vision__item:nth-child(1),
	.vision04 .vision__item:nth-child(2) {
		padding-bottom: 40px;
	}

	.vision04 .vision__item:nth-child(3),
	.vision04 .vision__item:nth-child(4) {
		padding-top: 40px;
	}

	.vision__item::after {
		display: none;
	}

	.vision__item span:not(.readmore) {
		width: 180px;
		height: 60px;
		font-size: 1.5rem;
		line-height: 60px;
		margin: 0 auto 30px;
	}

	.vision__item span em {
		font-size: 2.6rem;
		margin-left: 5px;
	}

	.vision__item h3 {
		font-size: 1.5rem;
		margin-bottom: 30px;
	}

	.vision__item span.readmore {
		width: 50%;
		height: 2.5em;
		margin: auto;
		font-size: 1.2rem;
		line-height: 2.5em;
		position: static;
	}

	/*remodal*/
	.remodal {}

	.remodal span {
		width: 180px;
		height: 60px;
		font-size: 1.5rem;
		line-height: 60px;
		margin: 0 auto 20px;
	}

	.remodal span em {
		font-size: 2.6rem;
		margin-left: 5px;
	}

	.remodal h3 {
		font-size: 1.6rem;
		margin-bottom: 15px;
	}

	.remodal p {
		font-size: 1.5rem;
	}
}

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

footer

---------------------------------------------- */
#footer {
	margin-top: -1px;
	width: 100%;
	height: 550px;
	/*	height: 22.197vw;*/
	overflow: hidden;
	position: relative;
}

.footer__inner {
	width: 1920px;
	height: 550px;
	margin-left: -960px;
	/*	background: url(/vision/_image/index/footer-bg.svg) no-repeat, linear-gradient(45deg, #f19a8c 32%, #e51c58 89.3%) left top / 36.5% 100% no-repeat, linear-gradient(45deg, #ef8867 51.6%, #f8ba00 100%) left 45% top / 30.9% 100% no-repeat;*/
	position: relative;
	left: 50%;
}

.footer__inner::before {
	content: "";
	width: 1950px;
	height: 550px;
	background: url(/vision/_image/index/footer-bg.svg) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 997;
}

.footer__inner::after {
	content: "";
	width: 45.1%;
	height: 220%;
	background: linear-gradient(14deg, #5275b8 10%, #00adc9 40%, #00adc9 60%, #5275b8 90%);
	background-position: 100% 100%;
	background-size: 400%;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: rotate(44deg);
	transform-origin: bottom left;
	z-index: 998;
	animation: gradient 8s ease-in 1s infinite;
}

.footer__inner img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
}

.footer__inner div.gradation-pk {
	width: 36.5%;
	height: 100%;
	background: linear-gradient(45deg, #e51c58 5%, #f1898c 45%, #f1898c 55%, #e51c58 95%);
	background-position: 100% 100%;
	background-size: 400%;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	animation: gradient 15s ease-in 1s infinite;
}

.footer__inner div.gradation-og {
	width: 30.9%;
	height: 100%;
	background: linear-gradient(45deg, #f8ba00 0%, #ef8867 35%, #ef8867 65%, #f8ba00 100%);
	background-position: 100% 100%;
	background-size: 400%;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 36%;
	animation: gradient 8s ease-in 1s infinite;
}

.footer__inner .pamphlet {
	position: absolute;
	top: 320px;
	left: calc(50% - 120px);
	transition: 0.8s;
	z-index: 9999;
}

.footer__inner .pamphlet p {
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	text-align: center;
}

.footer__inner .pamphlet .download {
	display: block;
	width: 240px;
	height: 4rem;
	margin-top: 10px;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	text-indent: 1.5em;
	line-height: 4rem;
	border: 1px solid #1a2635;
	transition: 0.8s;
}

.footer__inner .pamphlet {
	position: absolute;
	top: 320px;
	left: calc(50% - 120px);
	transition: 0.8s;
	z-index: 9999;
}

.pamphlet:hover .download {
	color: #fff;
	background: #1a2635;
}

.footer__inner .pamphlet .download::before {
	background: url(/vision/_image/index/icon_pdf.svg) no-repeat;
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-size: 100%;
	background-position: 0px 0px;
	position: absolute;
	overflow: hidden;
	bottom: 9px;
	left: 50px;
	transition: 0.8s;
}

.footer__inner .pamphlet:hover .download::before {
	filter: invert(100);	
}




/*--- Responsive ---*/
@media only screen and (max-width:640px) {
	#footer {
		height: 620px;
	}

	.footer__inner {
		height: 620px;
	}

	.footer__inner::before {
		height: 620px;
		left: -150px;
	}

	.footer__inner div.gradation-pk {
		width: 46.5%;
	}

	.footer__inner div.gradation-og {
		width: 20.9%;
		left: 46%;
	}

	.footer__inner .pamphlet p {
		font-size: 1.2rem;
	}

	.footer__inner .pamphlet .download {
		height: 2.5em;
		font-size: 1.2rem;
		line-height: 2.5em;
		margin: 10px auto;
	}
	
	.footer__inner .pamphlet .download::before {
	width: 30px;
	height: 30px;
	bottom: 22px;
	left: 40px;
}
}


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

footerBar

---------------------------------------------- */
#footerBar {
	position: relative;
	width: 1000px;
	margin: auto;
	bottom: 100px;
	left: 0;
	z-index: 1001;
	font-size: 1.2rem;
}

#footerBar img {
	height: 70px;
	width: auto;
	margin-bottom: 3px;
	margin-right: 1em;
}

/*--- Responsive ---*/
@media only screen and (max-width:640px) {
	#footerBar {
		width: 100%;
		bottom: 140px;
		font-size: 0.9rem;
		text-align: center;
	}

	#footerBar a {
		display: block;
	}

	#footerBar img {
		display: block;
		margin: auto;
		margin-bottom: 5px;
	}
}




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

pageTop

---------------------------------------------- */
#pageTop {
	display: none;
	font-size: 1.3rem;
	font-weight: 700;
	position: fixed;
	right: 50px;
	bottom: 49px;
	transform-origin: top right;
	transform: rotate(90deg);
	z-index: 9999;
}

#pageTop.fixed {
	display: block;
	opacity: 0;
	transform: translateY(100px);
	animation-name: pageTopFixed;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes pageTopFixed {
	0% {
		opacity: 0;
		transform: translateY(100px) translateX(0) rotate(90deg);
	}

	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) rotate(90deg);
	}
}

#pageTop::before {
	content: '';
	width: 75px;
	height: 3px;
	display: inline-block;
	background-color: #f5f5f5;
	background-image: linear-gradient(#e73361 0, #e73361 100%);
	background-size: 40% 100%;
	background-position: top right;
	background-repeat: no-repeat;
	transition: .4s cubic-bezier(.19, 1, .22, 1);
	margin-bottom: 3px;
	margin-right: 12px;
}

#pageTop:hover::before {
	background-size: 100% 100%;
}

/*--- Responsive ---*/
@media only screen and (max-width:640px) {
	#pageTop {
		right: 20px;
		font-size: 1.0rem;
	}
}