@charset "utf-8";

/* ===================================================================== */
/* Main Visual * /
/* ===================================================================== */
#main-visual {
	background: transparent;
	overflow: hidden;
}
#main-visual::before {
	background: url("img/mv-02.jpg") no-repeat center center;
	background-size: cover;
	filter: grayscale(1.0) brightness(.5);
	mix-blend-mode: normal;
}
#main-visual::after {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #0c7d84;
	mix-blend-mode: color;
}

.top-img {
	position: absolute;
	top: 0;
	left: 20%;
	width: calc(95vh * 2);
	height: 90vh;
	transform: skewY(-45deg);
	mix-blend-mode: lighten;
	filter: opacity(.7);
	overflow: hidden;
	position: absolute;
	z-index: 1;
}
.top-img img {
	width: 100%;
	height: 100%;
	transform: skewY(45deg);
	object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
}
.top-img::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0c7d84;
	mix-blend-mode: hue;
}

.top-catch {
	text-align: left;
}
.top-catch h1 {
	font-size: 4.2rem;
	font-style: italic;
}
.top-catch p {
	font-style: italic;
}

.top-catch .link-box {
	margin-left: 0;
}

.scroll-down a {
	font-family: 'Oswald', sans-serif;
	letter-spacing: .16rem;
	margin-right: 0;
}

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

	.top-img {
		left: -20%;
	}

	.top-catch {
		width: 100%;
		text-align: center;
	}
	.top-catch p {
		text-align: center;
	}
	.top-catch .link-box {
		margin-left: auto;
	}

}

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

	.top-catch h1 {
		font-size: 4.2vw;
	}
	.top-catch p {
		font-size: 3.2vw;
	}

}

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

	.top-img {
		left: -50%;
	}

	.top-catch h1 {
		font-size: 6vw;
	}
	.top-catch p {
		font-size: 5vw;
	}

}

/* ===================================================================== */
/* Intro * /
/* ===================================================================== */
#intro {
	padding-bottom: 12.8rem;
}
#intro .title-1 {
	margin-bottom: 2.4rem;
}
#intro .img-box {
	width: 100%;
	max-width: 480px;
	margin: 0 auto 4.8rem;
}

.merit-list {
	position: relative;
}
.merit-list::before {
	background-color: #006b85;
	background-image: none;
	transform: skewX(-30deg);
}
.merit-list li {
	border-radius: 0;
}

/* ===================================================================== */
/* Trouble * /
/* ===================================================================== */
#trouble .title-2 {
	font-family: 'Oswald', sans-serif;
}

/* ===================================================================== */
/* About * /
/* ===================================================================== */
#about .title-2 {
	font-family: 'Oswald', sans-serif;
}

.about-list li h3::before {
	font-family: 'Oswald', sans-serif;
	top: -6rem;
}

/* ===================================================================== */
/* Solution * /
/* ===================================================================== */
.solution-list li::before {
	font-family: 'Oswald', sans-serif;
}
.solution-list li {
	border-radius: 0;
}

/* ===================================================================== */
/* Case * /
/* ===================================================================== */
.case-list li {
	border-radius: 0;
}
.case-list li p {
	font-family: 'Oswald', sans-serif;
	top: -4rem;
}
.case-list li img {
	border-radius: 0;
}

/* ===================================================================== */
/* FAQ * /
/* ===================================================================== */
.accordion dt {
	border-radius: 0;
}

/* ===================================================================== */
/* Flow * /
/* ===================================================================== */
.flow-list p.step {
	font-family: 'Oswald', sans-serif;
}

/* ===================================================================== */
/* CTA * /
/* ===================================================================== */
.cv-area h2 {
	font-style: italic;
}

/* ===================================================================== */
/* Thanks * /
/* ===================================================================== */
.sub-header {
	background: transparent;
	overflow: hidden;
}
.sub-header::before,
.sub-header::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.sub-header::before {
	background: url("img/mv-02.jpg") no-repeat center center;
	background-size: cover;
	filter: grayscale(1.0) brightness(.5);
	mix-blend-mode: normal;
}
.sub-header::after {
	background-color: #0c7d84;
	mix-blend-mode: color;
}