@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : intro.css
Description :
===================================================================== */

/* =====================================================================
*    intro_wrap
* =================================================================== */
.main {
	position: relative;
}

.main {
	background: #b9f5f0;
	background: -webkit-gradient(linear, left top, left bottom, from(#b9f5f0), color-stop(50%, #fffaeb), to(#ffc1e7));
	background: linear-gradient(to bottom, #b9f5f0 0%, #fffaeb 50%, #ffc1e7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9f5f0', endColorstr='#ffc1e7', GradientType=0);
	overflow: hidden;
}

.main::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: calc(800 / 750 * 100%);
	background: url(../images/common/bg_grade_green.png) repeat-x center top/calc(360 / 750 * 100%) auto;
}

.main::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: calc(800 / 750 * 100%);
	background: url(../images/common/bg_grade_pink.png) repeat-x center bottom/calc(360 / 750 * 100%) auto;
	-webkit-transform: scale(1, -1);
	transform: scale(1, -1);
}

.intro_wrap::before {
	content: '';
	position: absolute;
	width: 100%;
	padding-top: calc(387 / 750 * 100%);
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../images/common/bg_silhouette.png) no-repeat bottom right -100vw/calc(2500 / 750 * 100%) auto;
}

.intro_wrap .outer::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: calc(321 / 750 * 100%);
	padding-top: calc(320 / 750 * 100%);
	background: url(../images/common/bg_deco2.png) no-repeat center/contain;
	opacity: .2;
	margin: calc(-92 / 750 * 100%) calc(-33 / 750 * 100%) 0 0;
}

.intro_wrap .outer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(240 / 750 * 100%);
	padding-top: calc(240 / 750 * 100%);
	background: url(../images/common/bg_deco1.png) no-repeat center/contain;
	opacity: .15;
	margin: calc(-52 / 750 * 100%) 0 0 calc(-52 / 750 * 100%);
}

/*回転アニメーション*/
.intro::before,
.intro_inner::after {
	-webkit-animation: 70s linear infinite rotation1;
	animation: 70s linear infinite rotation1;
}

.intro_wrap .outer::before,
.intro::after {
	-webkit-animation: 60s linear infinite rotation1;
	animation: 60s linear infinite rotation1;
}

.intro_wrap .outer::after,
.intro_inner::before {
	-webkit-animation: 30s linear infinite rotation1;
	animation: 30s linear infinite rotation1;
}

@-webkit-keyframes rotation1 {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotation1 {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotation1 {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@media screen and (min-width: 768px) {

	.main::before,
	.main::after {
		padding-top: calc(800 / 1600 * 100%);
		background-size: calc(360 / 1600 * 100%) auto;
	}

	.intro_wrap::before {
		padding-top: calc(387 / 1600 * 100%);
		background-size: cover;
		background-position: center;
	}

	.intro_wrap .outer::before {
		width: calc(320 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		opacity: .2;
		margin: calc(233 / 1600 * 100%) calc(-182 / 1600 * 100%) 0 0;
	}

	.intro_wrap .outer::after {
		width: calc(240 / 1600 * 100%);
		padding-top: calc(240 / 1600 * 100%);
		opacity: .15;
		margin: calc(-96 / 1600 * 100%) 0 0 calc(164 / 1600 * 100%);
	}
}

@media screen and (min-width: 1600px) {

	.main::before,
	.main::after {
		padding-top: 800px;
		background-size: 360px auto;
	}

	.intro_wrap::before {
		padding-top: 387px;
	}
}


/* =====================================================================
*    intro
* =================================================================== */
.intro {
	padding: calc(100 / 750 * 100%) 0 calc(200 / 750 * 100%);
}

.intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(403 / 750 * 100%);
	padding-top: calc(402 / 750 * 100%);
	background: url(../images/common/bg_deco2.png) no-repeat center/contain;
	opacity: .2;
	margin: calc(250 / 750 * 100%) 0 0 calc(-135 / 750 * 100%);
}

.intro::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: calc(320 / 750 * 100%);
	padding-top: calc(320 / 750 * 100%);
	background: url(../images/common/bg_deco1.png) no-repeat center/contain;
	opacity: .1;
	margin: calc(237 / 750 * 100%) calc(-216 / 750 * 100%) 0 0;
}

.intro_inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(242 / 750 * 100%);
	padding-top: calc(241 / 750 * 100%);
	background: url(../images/common/bg_deco3.png) no-repeat center/contain;
	opacity: .3;
	margin: calc(840 / 750 * 100%) 0 0 calc(-54 / 750 * 100%);
}

.intro_inner::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: calc(403 / 750 * 100%);
	padding-top: calc(402 / 750 * 100%);
	background: url(../images/common/bg_deco3.png) no-repeat center/contain;
	opacity: .3;
	margin: calc(1043 / 750 * 100%) calc(-150 / 750 * 100%) 0 0;
}

.intro h2 {
	margin-bottom: calc(120 / 650 * 100%);
}

.intro_box {
	width: calc(750 / 650 * 100%);
	margin-left: calc(-50 / 650 * 100%);
}

.intro_txtImg {
	width: calc(673 / 750 * 100%);
	margin: 0 auto calc(65 / 750 * 100%);
	padding-bottom: calc(92 / 750 * 100%);
}

.intro_txtImg::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../images/intro/img_deco1.png) no-repeat center/contain;
	width: calc(96 / 750 * 100%);
	padding-top: calc(16 / 750 * 100%);
}

.intro_txt {
	width: calc(665 / 750 * 100%);
	margin: 0 auto;
}

.intro_txt p {
	color: #4a3a46;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.83;
	margin-bottom: 1.5em;
}

.intro_txt p:first-child {
	font-size: 3.4rem;
	text-align: center;
	margin-bottom: .3em;
}

.intro_txt .pink {
	font-size: 3.4rem;
	display: block;
	text-align: center;
	color: #ed5180;
}

.intro_txt small {
	font-size: 2rem;
}

.intro_txt .center {
	text-align: center;
	line-height: 2;
	margin: 3em 0 1.5em;
}

.intro_txt .pink_em span {
	display: block;
	font-size: 3.6rem;
	line-height: 1.25;
	color: #ed5180;
}

.intro_txt .pink_em span:nth-child(2) {
	text-align: right;
}


@media screen and (min-width: 768px) {
	.intro {
		padding: calc(100 / 1600 * 100%) 0 calc(340 / 1600 * 100%);
	}

	.intro::before {
		width: calc(403 / 1600 * 100%);
		padding-top: calc(402 / 1600 * 100%);
		margin: calc(37 / 1600 * 100%) 0 0 calc(-201 / 1600 * 100%);
	}

	.intro::after {
		width: calc(320 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		opacity: .1;
		margin: calc(-105 / 1600 * 100%) calc(-29 / 1600 * 100%) 0 0;
	}

	.intro_inner::before {
		width: calc(242 / 1600 * 100%);
		padding-top: calc(241 / 1600 * 100%);
		margin: calc(480 / 1600 * 100%) 0 0 calc(-106 / 1600 * 100%);
	}

	.intro_inner::after {
		width: calc(403 / 1600 * 100%);
		padding-top: calc(402 / 1600 * 100%);
		margin: calc(390 / 1600 * 100%) calc(-123 / 1600 * 100%) 0 0;
	}

	.intro h2 {
		margin-bottom: calc(100 / 1000 * 100%);
	}

	.intro_box {
		width: 100%;
		margin-left: 0;
	}

	.intro_txtImg {
		width: calc(866 / 1000 * 100%);
		margin: 0 auto calc(55 / 1000 * 100%);
		padding-bottom: calc(60 / 1000 * 100%);
	}

	.intro_txtImg::before {
		width: calc(48 / 1000 * 100%);
		padding-top: calc(8 / 1000 * 100%);
	}

	.intro_txt {
		width: calc(900 / 1000 * 100%);
	}

	.intro_txt p {
		font-size: 1.8rem;
		margin-bottom: 1.5em;
	}

	.intro_txt p:first-child {
		font-size: 2rem;
	}

	.intro_txt .pink {
		font-size: 2.2rem;
		margin-bottom: .2em;
	}

	.intro_txt small {
		font-size: 1.3rem;
	}

	.intro_txt .center {
		margin: calc(70 / 1000 * 100%) 0 calc(30 / 1000 * 100%);
		line-height: 1.625;
	}

	.intro_txt .pink_em {
		text-align: center;
	}

	.intro_txt .pink_em span {
		display: inline;
		font-size: 2.8rem;
	}

}

@media screen and (min-width: 1200px) {}