@charset "utf-8";


/**************************************************50
 * intro
 **************************************************/
#intro{
	position: relative;
	text-align: center;
}
#intro picture{
}
#intro picture img{
	width: 100%;
}
#intro h1{
	position: absolute;
	top: 0;
}
#intro h1 img{
	width: 100%;
}
#intro img[src$="text.svg"]{
	position: absolute;
	top: 0;
	-ms-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#intro img[src$="campaign.svg"]{
}
@media screen and (max-width:767px){
	#intro{
		padding-bottom: 6.25%;
	}
/*
	#intro picture{
		margin-bottom: 3.125%;
		margin-left: -20%;
		width: 140%;
	}
	#intro h1{
		margin-top: 15%;
		right: 3%;
		width: 66%;
	}
	#intro img[src$="text.svg"]{
		margin-top: 6%;
		left: 10.25%;
		width: 17%;
	}
*/
	#intro img[src$="campaign.svg"]{
		margin-left: 3%;
		width: 93.75%;
	}
}
@media screen and (min-width:768px){
	#intro h1{
		margin-top: 9.21875%;
		left: 51.40625%;
		width: 33.4375%;
	}
	#intro img[src$="text.svg"]{
		margin-top: 12.8125%;
		left: 20.78125%;
		width: 8.125%;
	}
	#intro img[src$="campaign.svg"]{
		position: absolute;
		margin-bottom: 2.65625%;
		left: 44.0625%;
		width: 38.75%;
		bottom: 0;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#intro{
		margin-left: -15%;
		width: 130%;
	}
}


/**************************************************50
 * worry
 **************************************************/
#worry{
	background-color: #F8F8F8;
	color: #333333;
	position: relative;
	text-align: center;
}
#worry:before{
	background: -webkit-linear-gradient(left, #D7EBFA 0%, #D7EBFA 50%, #FBF9C9 50%, #FBF9C9 100%);
	background: linear-gradient(to right, #D7EBFA 0%, #D7EBFA 50%, #FBF9C9 50%, #FBF9C9 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%);
	content: "";
	display: block;
	pointer-events: none;
	width: 100%;
}
#worry:after{
	background-color: #B5E5EC;
	content: "";
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	display: block;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: 50%;
	-ms-transform: translate(-50%, 50%);
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
}
#worry h2{
	margin-top: -3.125%;
}
#worry h2 img{
	width: 75%;
	max-width: 700px;
}
#worries{
}
#worries .worries{
	display: inline-block;
	vertical-align: top;
}
#worries .worries picture{
}
#worries .worries picture img{
	width: 80%;
}
#worries .worries figcaption{
}
@media screen and (max-width:319px){
	#worries .worries{
		width: 100%;
	}
}
@media screen and (min-width:320px) and (max-width:479px){
	#worries .worries figcaption{
		font-size: 2.9296875vw;
		font-size: 2.9296875dvw;
	}
}
@media screen and (min-width:320px) and (max-width:767px){
	#worries .worries{
		width: 50%;
	}
}
@media screen and (max-width:767px){
	#worry{
		padding-bottom: 12.5%;
	}
	#worry:before{
		padding-top: 12.5%;
	}
	#worry:after{
		height: 3.046875em;
		width: 3.65625em;
	}
	#worry h2{
	}
	#worry h2 img{
	}
	#worries{
	}
	#worries .worries{
		margin-top: 6.25%;
	}
	#worries .worries picture{
		margin-bottom: 0.5em;
	}
	#worries .worries figcaption{
	}
}
@media screen and (min-width:768px){
	#worry{
		padding-bottom: 100px;
	}
	#worry:before{
		padding-top: 100px;
	}
	#worry:after{
		height: 4.0625em;
		width: 4.875em;
	}
	#worry h2{
	}
	#worry h2 img{
	}
	#worries{
	}
	#worries .worries{
		margin-top: 50px;
	}
	#worries .worries picture{
		margin-bottom: 1.5em;
	}
	#worries .worries figcaption{
		padding: 0 0.5em;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#worries .worries{
		width: 40%;
	}
}
@media screen and (min-width:1024px){
	#worries .worries{
		width: 25%;
	}
}