/* ==================== 1_base.css ==================== */

@media (max-width: 768px) {
	main,
	main img {
		font-size: 4vw;
	}
}


@media (min-width: 769px) {
	main,
	main img {
		font-size: 20px;
	}
}


main img {
	max-width: 100%;
	vertical-align: bottom;
}


main ul {
	padding: 0;
	list-style-type: none;
}


/* ==================== 2_images.css ==================== */

img[src$="/features_back_pc.png"] {width: 68em}
img[src$="/features_back_sp.png"] {width: 25em}
img[src$="/features_caption1_pc.svg"] {width: 25.05em}
img[src$="/features_caption1_sp.svg"] {width: 17.15em}
img[src$="/features_caption2_pc.svg"] {width: 25.65em}
img[src$="/features_caption2_sp.svg"] {width: 17.8em}
img[src$="/features_figure1.png"] {width: 21.04em}
img[src$="/features_image1.jpg"] {width: 23.3em}
img[src$="/features_image2.jpg"] {width: 23.3em}
img[src$="/features_scene_back.jpg"] {width: 125.27em}
img[src$="/features_scene_caption.svg"] {width: 24.3em}
img[src$="/features_scene_image_pc.png"] {width: 53.57em}
img[src$="/features_scene_image_sp.png"] {width: 23.7em}
img[src$="/features_title_pc.svg"] {width: 38.65em}
img[src$="/features_title_sp.svg"] {width: 22.5em}
img[src$="/finish_buy_pc.svg"] {width: 20.11em}
img[src$="/finish_buy_sp.svg"] {width: 23em}
img[src$="/finish_text_pc.svg"] {width: 19.86em}
img[src$="/finish_text_sp.svg"] {width: 11.6em}
img[src$="/invitation_back_pc.jpg"] {width: 60em}
img[src$="/invitation_back_sp.jpg"] {width: 25em}
img[src$="/invitation_copy_pc.svg"] {width: 24.4em}
img[src$="/invitation_copy_sp.svg"] {width: 13.4em}
img[src$="/top_back_pc.jpg"] {width: 47.5em}
img[src$="/top_back_sp.jpg"] {width: 14.9em}
img[src$="/top_buy_pc.svg"] {width: 20.11em}
img[src$="/top_buy_sp.svg"] {width: 25em}
img[src$="/top_copy_pc.svg"] {width: 27.1em}
img[src$="/top_copy_sp.svg"] {width: 13em}
img[src$="/top_itempic.png"] {width: 7.07em}
img[src$="/top_logo.svg"] {width: 8.31em}
img[src$="/top_point_pc.svg"] {width: 29.5em}
img[src$="/top_point_sp.svg"] {width: 8.5em}
img[src$="/trouble_back_pc.jpg"] {width: 60em}
img[src$="/trouble_back_sp.jpg"] {width: 25em}
img[src$="/trouble_body_pc.svg"] {width: 36.8em}
img[src$="/trouble_body_sp.svg"] {width: 23em}
img[src$="/trouble_foot.svg"] {width: 60em}
img[src$="/trouble_title_pc.svg"] {width: 27em}
img[src$="/trouble_title_sp.svg"] {width: 14.85em}


/* ==================== features.css ==================== */

.Features {
	display: flex;
	flex-direction: column;
	align-items: center;
}


@media (max-width: 768px) {
	.Features {
		background:
			url(../img/spwater/features_back_sp.png) no-repeat left top,
			url(../img/spwater/features_scene_back.jpg) repeat center bottom;
		background-size:
			100% 91.5em,
			400% auto;
	}
}


@media (min-width: 769px) {
	.Features {
		background:
			url(../img/spwater/features_back_pc.png) no-repeat left top,
			url(../img/spwater/features_scene_back.jpg) repeat center bottom;
		background-size:
			100% 66em,
			125.3em auto;
	}
}


/* ==================== features_detail.css ==================== */

.Features .detail {
	margin-top: 1em;
}

.Features .detail .body .content {
	background: no-repeat;
	background-size: 100% 100%;
}

.Features .detail .body figure {
	margin-top: 1em;
}

.Features .detail .body p {
	margin-top: 1.5em;
	color: white;
	font-size: 90%;
}


@media (max-width: 768px) {
	
	.Features .detail .body {
		margin: 2em 1em 0;
	}
	
	.Features .detail .body > img {
		display: block;
		margin: 0 auto;
		width: 18em;
	}
	
	.Features .detail .body .content {
		padding: 1em;
		padding-top: 12em;
		margin-top: -11em;
		background : linear-gradient(180deg, rgba(125, 204, 243, 1) 3.88%, rgba(84, 194, 240, 1) 20.7%, rgba(0, 146, 211, 1) 46.1%, rgba(0, 133, 205, 1) 83.09%);
	}
	
	.Features .detail .body h4 {
		padding-left: 1em;
	}
	.Features .detail .body p br {
		display: none;
	}

}


@media (min-width: 769px) {

	.Features .detail .body {
		position: relative;
		margin-top: 2em;
		width: 53.25em;
	}

	.Features .detail .body .content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 23.75em;
		padding: 0
	}

	.Features .detail .body1 .content {
		margin-left: 5.65em;
		width: 45.8em;
		padding-left: 20em;
		padding-right: 3em;
		background-image: linear-gradient(90deg, rgba(125, 204, 243, 1) 3.88%, rgba(84, 194, 240, 1) 20.7%, rgba(0, 146, 211, 1) 46.1%, rgba(0, 133, 205, 1) 83.09%);
	}
	.Features .detail .body2 .content {
		width: 47.15em;
		padding-left: 3em;
		padding-right: 20em;
		background-image: linear-gradient(-89.91deg, rgba(125, 204, 243, 1) 3.88%, rgba(84, 194, 240, 1) 20.7%, rgba(0, 146, 211, 1) 46.1%, rgba(0, 133, 205, 1) 83.09%);
	}

	.Features .detail .body > img {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.Features .detail .body1 > img {
		left: 0;
	}
	.Features .detail .body2 > img {
		right: 0;
	}
	
	.Features .detail h4 img {
		transform: translateX(-0.5em);
	}

}


/* ==================== features_scene.css ==================== */

.Features .scene {
	padding-bottom: 2em;
}


@media (max-width: 768px) {
	
	.Features .scene {
		margin-top: 7em;
	}
	
	.Features .scene h4 {
		width: 90%;
		margin: 0 auto;
	}
	
	.Features .scene figure {
		margin-top: -6.5em;
		text-align: center;
	}
}


@media (min-width: 769px) {

	.Features .scene {
		margin-top: 1.5em;
		position: relative;
		z-index: 1;
	}

	.Features .scene h4 {
		margin-top: 6em;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

}


/* ==================== finish.css ==================== */

.Finish {
	padding: 4em 0;
	background: #efefef;
}

.Finish .body {
	width: 50.84em;
	margin: 0 auto;
	position: relative;
}

.Finish h3 {
	position: absolute;
	top: 1.5em;
	left: 3em;
}

@media (max-width: 768px) {
	.Finish .body {
		width: 23em;
	}

	.Finish h3 {
		left: 1.5em;
	}
}

@media (min-width: 769px) {
	.Finish a {
		position: absolute;
		bottom: 1.5em;
		left: 3em;
	}
}


/* ==================== invitation.css ==================== */

.Invitation {
	display: flex;
	align-items: center;
	background: no-repeat right center;
	background-size: contain;
}


@media (max-width: 768px) {
	.Invitation {
		padding-left: 1.5em;
		height: 23.25em;
		background-color: #f0f5f1;
		background-image: url(../img/spwater/invitation_back_sp.jpg);
	}
}

@media (min-width: 769px) {
	.Invitation {
		justify-content: flex-end;
		height: 30.9em;
		padding-right: 50%;
		background-image: url(../img/spwater/invitation_back_pc.jpg);
	}
}


/* ==================== top.css ==================== */

.Top {
	position: relative;
}

.Top::before {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: no-repeat right center;
	background-size: cover;
}

.Top h2 {
	font-size: inherit;
}

.Top .body {
	display: flex;
	flex-direction: column;
	position: relative;
}

.Top .body > * {
	position: relative;
}

.Top .body::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: #3e3a39;
	opacity: 0.9;
	mix-blend-mode: multiply;
}


@media (max-width: 768px) {

	.Top::before {
		width: 14.9em;
		background-image: url(../img/spwater/top_back_sp.jpg);
	}

	.Top h2 {
		padding: 1em;
	}

	.Top figure {
		position: absolute;
		right: 1em;
		top: 3em;
	}
	.Top figure img {
		width: 6.5em;
	}

	.Top .body::before {
		width: 16.15em;
	}

	.Top .body h3,
	.Top .body p {
		padding: 1.25em;
	}

	.Top .body p {
		padding-top: 0;
	}
	.Top .body p img {
		margin-left: 2.5em;
	}

}


@media (min-width: 769px) {

	.Top::before {
		width: calc((100% - 60em) / 2 + 47.5em);
		background-image: url(../img/spwater/top_back_pc.jpg);
	}

	.Top h2 {
		text-align: right;
		padding-right: calc((100% - 60em) / 2 + 47.5em);
	}

	.Top h2 img {
		display: inline-block;
		margin: 1.25em 1em;
	}

	.Top figure {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(15em, -50%);
	}

	.Top .body {
		width: calc((100% - 60em) / 2 + 40em);
		padding: 2em;
		padding-left: calc((100% - 60em) / 2 + 4em);
	}

	.Top .body p {
		margin-top: 2em;
	}

	.Top .body a {
		margin-left: 4.5em;
		margin-top: 2em;
	}

	.Top .body::before {
		width: 100%;
	}

}


/* ==================== trouble.css ==================== */

.Trouble {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: no-repeat center top;
	background-size: cover;
}

.Trouble::after {
	content: '';
	display: block;
	width: 100%;
	height: 3.8em;
	background:
		url(../img/spwater/trouble_foot.svg) no-repeat center center,
		linear-gradient(0deg, white, white) no-repeat left top,
		linear-gradient(0deg, white, white) no-repeat right top;
	background-size:
		auto 100%,
		calc(50vw - 8em) 100%,
		calc(50vw - 8em) 100%;
}

.Trouble h3 {
	margin: 1.5em 0;
}

.Trouble p {
	margin-bottom: 3em;
	position: relative;
}

.Trouble p img {
	position: relative;
}

.Trouble p::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #595757;
	mix-blend-mode: multiply;
}


@media (max-width: 768px) {
	.Trouble {
		background-image: url(../img/spwater/trouble_back_sp.jpg);
	}
}


@media (min-width: 769px) {
	.Trouble {
		background-image: url(../img/spwater/trouble_back_pc.jpg);
	}
}