.intro{
  background:url(../images/intro.png) no-repeat;
	background-size: cover;
	position: relative;
}
.intro::before{
	/* 透過した黒を重ねる */
	background-color: rgba(88,118,102,0.4);
	/* どの範囲に重ねるかを指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}
.intro h2{
  position: absolute;
  width: 100%;
  text-align: center;
  color: #ffffff;
}


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

.intro{
  min-height: 300px;
}
.intro h2{padding-top: 150px;}

}

@media screen and (min-width: 641px) and (max-width: 960px){

.intro{
  min-height: 400px;
}
.intro h2{padding-top: 250px;}

}


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

.intro{
  min-height: 500px;
}
.intro h2{
	padding-top: 320px;
	font-size: 2.5em;
}

}







/* @group intro_s */

.intro_s{
  background:url(../images/intro.png) no-repeat;
	background-size: cover;
	position: relative;
}
.intro_s::before{
	/* 透過した黒を重ねる */
	background-color: rgba(88,118,102,0.4);
	/* どの範囲に重ねるかを指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}
.intro_s h2{
  position: absolute;
  width: 100%;
  text-align: center;
  color: #ffffff;
}


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

.intro_s{
  min-height: 150px;
}
.intro_s h2{
	padding-top: 90px;
	font-size: 1.5em;
}

}

@media screen and (min-width: 641px) and (max-width: 960px){

.intro_s{
  min-height: 300px;
}
.intro_s h2{padding-top: 220px;}

}


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

.intro_s{
  min-height: 350px;
}
.intro_s h2{
	padding-top: 250px;
	font-size: 2.5em;
}

}



/* @end */