/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
a{
	transition: all .3s;
}
a:hover{
	opacity: .7;
}
ul{
	list-style: inside none;
	padding: 0;
}
img{
	display: block;
	margin: 0 auto;
	max-width: 100%;
}
.center{
	text-align: center;
}
.center img{
	margin: 0 auto;
	text-align: center;
}
#wrapper{
	overflow: hidden;
	margin: 0 auto;
	max-width: 960px;
	width: 100%;
}
.ul{
	background: linear-gradient(transparent 50%, #ffff66 50%);
}
.ul_pink{
	background: linear-gradient(transparent 50%, #ffddff 50%);
}
.bold{
	font-weight: bold;
}
/*===============================================
 * header
===============================================*/
header img{
	display: block;
	width: 100%;
}
section{
	padding: 10% 0;
}
h2{
	text-align: center;
}
h2 img{
	display: block;
	margin: 0 auto;
}
#introduction{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8bbfd3+0,ffffff+50,ffffff+100 */
background: #8bbfd3; /* Old browsers */
background: -moz-linear-gradient(top,  #8bbfd3 0%, #ffffff 50%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #8bbfd3 0%,#ffffff 50%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #8bbfd3 0%,#ffffff 50%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bbfd3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
padding-bottom: 0;
}
#introduction h2{
	margin-bottom: 5%;
	text-align: center;
}
#introduction h2 img{
	display: block;
	margin: 0 auto;
}
#introduction > a{
	display: block;
	margin: 0 5%;
}
ul.probrem{
	display: flex;
	flex-wrap: wrap;
	margin: 0 10% -15%;
	position: relative;
	z-index: 1;
}
ul.probrem li{
	margin: 1%;
	width: 48%;
}
ul.probrem li:nth-child(even){
	position: relative;
	top: 5vh;
}
.arrow{
	margin: 15px 0;
	text-align: center;
}
.arrow img{
	displey: block;
	margin: 0 auto;
	width: 80px;
}
.cta{
	background-color: #fff;
	background-image: url(../img/bg_cta.jpg);
	background-position: right  center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 10% 5%;
	text-align: center;
}
#point{
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #fff4cd 30%, #fff4cd 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%,#fff4cd 30%,#fff4cd 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#fff4cd 30%,#fff4cd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fff4cd',GradientType=0 );
	padding: 5% 2%;
}
#point h2{
	margin-bottom: 5%;
}
#point h3{
	margin-bottom: 15px;
}
#point > a{
	display: block;
	margin: 5%;
}
.box_point > img{
	background: #fff;
	display: block;
	margin-bottom: 10px;
	padding: 5px;
}
#point > div + div{
	margin-top: 30px;
}
#voice{
	background: #ffd3ca;
	padding: 5%;
}
.box_voice{
	margin: 5% 0;
}

/*===============================================
 * footer
===============================================*/
footer{
	padding: 5px 0;
	text-align: center;
}
footer p{
	font-size: 10px;
}
/*===============================================
 * mediaquery
===============================================*/