@charset "utf-8";

/*アコーディオン*/
.accordion-area {
	list-style: none;
	width: 96%;
	max-width: 900px;
	margin: 0 auto;
}

.accordion-area li {
	margin: 10px 0;
	background: #ffffff85;
}

.accordion-area section {
	border: 1px solid #ccc;
}

.title {
	position: relative;
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
	padding: 3% 3% 3% 50px;
	transition: all .5s ease;
}

@media screen and (max-width:768px) {
	.title {
		font-size: 0.9rem;
	}
}

.title::before,
.title::after {
	position: absolute;
	content: '';
	width: 15px;
	height: 2px;
	background-color: #024e84;

}

.title::before {
	top: 48%;
	left: 15px;
	transform: rotate(0deg);

}

.title::after {
	top: 48%;
	left: 15px;
	transform: rotate(90deg);

}


.title.close::before {
	transform: rotate(45deg);
}

.title.close::after {
	transform: rotate(-45deg);
}

.box {
	display: none;
	background: #000080;
	margin: 0 3% 3% 3%;
	padding: 3%;
	color: #fff;
}

/*シャッ（左から）*/
.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	/*　はみ出た色要素を隠す　*/
	opacity: 0;
}

.vision .bgextend {
	position: static;
}

@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.bgappear {
	animation-name: bgextendAnimeSecond;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.bgLRextend::before {
	animation-name: bgLRextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000080;
}

@keyframes bgLRextendAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}

	50% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/* ふわっ（下から） */
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadeUpSlow {
	animation-name: fadeUpAnime;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeUpAnimeSlow {
	from {
		opacity: 0;
		transform: translateY(200px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* パタッ（左へ） */
.flipLeft {
	animation-name: flipLeftAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	perspective-origin: left center;
	opacity: 0;
}

@keyframes flipLeftAnime {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
	}

	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}

#vision,
.service-area {
	transform: translate3d(0, 0, 0);
}

.bgLRextendTrigger,
.bgappearTrigger,
.fadeUpTrigger,
.flipLeftTrigger {
	opacity: 0;
}

/*  ふわっ（左から）*/
.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-500px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ふわっ（右から） */
.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(500px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
	opacity: 0;
}


/* ボタン共通設定 */
.btn04 {
	position: relative;
	display: inline-block;
	padding: 30px 100px;
	color: #333;
	border: 1px solid #ccc;
	text-decoration: none;
	outline: none;
	overflow: hidden;
}

.btn04:hover {
	color: #fff;
	border-color: transparent;
	transition-delay: .6s;
}

.btn04 span {
	display: block;
	z-index: 2;
}

.bordertop span::before,
.bordertop span::after {
	content: '';
	position: absolute;
	width: 1px;
	height: 0;
	background: #00a6ff;
	transition: all .3s;
}

.bordertop span::before {
	left: 0;
	top: 0;
}

.bordertop span::after {
	right: 0;
	top: 0;
}

.bordertop:hover span::before,
.bordertop:hover span::after {
	height: 100%;
}

.bordertop::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 0;
	background: #000080;
	transition: all .3s;
}

.bordertop:hover::before {
	height: 100%;
	transition-delay: .4s;
}