@charset "utf-8";

.wrap {
	max-width:none;
	background:url(../images/bg.jpg) center bottom -75px no-repeat #80b9c6;
	background-size:100%;
	color:#FFF;
}

/* conditions
---------------------------------------------- */

#conditions {
	position:relative;
	max-width:420px;
	width:75%;
	padding-top:130px;
	margin:0 auto 60px auto;
	text-align:center;
}
#conditions > div > header {
	margin-left:25px;
	margin-bottom:55px;
	text-align:left;
}
	@media(max-width:767px) {
		#conditions > div > header {
			margin-left:0;
		}
	}

#conditions > div > header > strong {
	font-size:17px;
	padding-bottom:12px;
	display:block;

	font-family: "Tsukimi Rounded", sans-serif;
	font-weight: 500;
	font-style: normal;

	display:inline-block;
	background:url(../images/icon1.png) left top no-repeat;
	background-size:52px 53px;
	padding-top:63px;
}
#conditions > div > header > span {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#2c66a0;
	font-size:35px;
	padding-bottom:8px;
	display:block;
}
	@media(max-width:767px) {
		#conditions > div > header > span {
			font-size:32px;
		}
	}

#conditions > div > header > h1 {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:48px;
	line-height:53px;
}
	@media(max-width:767px) {
		#conditions > div > header > h1 {
			font-size:38px;
		}
	}

#conditions > div > p {
	line-height:170%;
	margin-bottom:40px;
	text-align:left;
}
#conditions > div > figure {
	margin-bottom:20px;
}
#conditions > div > figure >img {
	width:100%;
	max-width:370px;
}
#conditions > div > a {
	font-size:21px;
	background-color:#f56600;
	padding:10px 12px;
	border-radius:10px;
	display:inline-block;
}
#conditions > img {
	width:282px;
	position:absolute;
	top:95px;
	right:-302px;
}
	@media(max-width:1279px) {
		#conditions > img {
			width:222px;
			right:-212px;
		}
	}
	@media(max-width:979px) {
		#conditions > img {
			width:180px;
			right:-150px;
		}
	}
	@media(max-width:767px) {
		#conditions > img {
			width:150px;
			right:10px;
			top:75px;
		}
	}
	@media(max-width:479px) {
		#conditions > img {
			width:100px;
			right:10px;
			top:100px;
		}
	}

#conditions > img {
  animation: anime1 2.5s infinite;
  opacity: 1;
}
@keyframes anime1 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
#method {
	padding-bottom:45%;
}

#method > ul {
	width:calc(100% - 60px);
	max-width:1600px;
	margin:0 auto;
}
	@media(max-width:479px) {
		#method > ul {
			width:75%;
		}
	}

#method > ul > li {
	width:30%;
	float:left;
	margin-right:5%;
}
	@media(max-width:767px) {
		#method > ul > li {
			width:auto;
			float:none;
			margin:0 auto 75px auto;
			width:100%;
			max-width:420px;
		}
	}

#method > ul > li:last-child {
	margin-right:0;
}
	@media(max-width:767px) {
		#method > ul > li:last-child {
				margin:0 auto 75px auto;
		}
	}

#method > ul > li > h2 {
	color:#2b66a0;
	background-color:#FFF;
	border-radius:16px;
	font-size:18px;
	line-height:32px;
	padding-left:1em;
	margin-bottom:1em;
}
	@media(max-width:979px) {
		#method > ul > li > h2 {
			letter-spacing:-1px;
			font-size:17px;
		}
	}

#method > ul > li > p {
	font-size:17px;
	line-height:1.8;
	margin-bottom:1em;
}
#method > ul > li > p > span {
	text-decoration:underline;
}
#method > ul > li > figure {
	text-align:center;
}
#method > ul > li:nth-child(1) > figure > img {
	width:90%;
}
#method > ul > li:nth-child(2) > figure > img {
	width:55%;
}