@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Quicksand:700');

.en{font-family: 'Quicksand', sans-serif;}


#fanfunWrapper{
	color: #111;
	background: url(../img/pat.png) repeat center top / 600px auto;
	text-align: justify;
}

#fanfunWrapper > *{
	box-sizing: border-box;
}

#fanfunWrapper img{
	max-width: 100%;
	height: auto;
	width: 100%;
}

.intro {
	background: #fff;
	width: 92%;
	padding: 4%;
	margin: 4% auto;
	line-height: 1.5;
}

.intro strong{
	font-weight: bold;
	color: #B03DED;
}

.pointList {
	counter-reset: number 0;
	padding: 4%;
	overflow: hidden;
}

.pointList li{
	margin: 0 0 10%;
}

.pointTxt{
	position: relative;
}

.pointNo{
	font-size: 18px;
	position: relative;
}

.pointNo::before {
	counter-increment: number 1;
	content: counter(number);
	position: absolute;
	font-family: 'Quicksand', serif;
	color: #111;
	left: 60px;
	bottom: 0;
	font-size: 30px;
}

.pointNo::after,.pointTtl span::after {
	content: "";
	position: absolute;
	height: 10px;
	z-index: -1;
}

.pointNo::after {
	background: #FFFF31;
	left: 10px;
	bottom: 0;
	width: 70px;
}

.pointTtl {
	font-size: 26px;
	margin: 3% 0;
	position: relative;
	z-index: 1;
	font-weight: bold;
	line-height: 1.25;
	text-align: left;
}

.pointTtl span{
	position: relative;
}

.pointTtl span::after {
	background: #3FE3D7;
	left: 20px;
	top: 20px;
	width: 120px;
}

.pointTxt p{
	line-height: 1.5;
	min-height: 160px;
}

.pointList li:nth-child(2n+1) .pointTxt p {
	padding: 0 110px 0 0;
}

.pointList li:nth-child(2n) .pointTxt p {
	padding: 0 0 0 110px;
}

.checkInner {
	background: #FFFF31;
	width: 98%;
	height: 100px;
	position: relative;
	z-index: 2;
	padding: 15px 0 0 10px;
	box-shadow: -5px 5px 0 0 #fff;
}

.check {
	margin: 20px 0 0;
	position: relative;
}

.checkInner > span {
	position: absolute;
	top: -15px;
	left: -2%;
	font-size: 24px;
	text-shadow: 1px 1px 0 #fff;
	color: #B03DED;
}

.checkCap {
	margin: 5px 0 10px;
}

.checkBtn {
	display: block;
	position: relative;
	background: #42CFF0;
	padding: 20px 10px;
	width: 86%;
	transition: .2s all;
	font-weight: bold;
}

.checkBtn::before,
.checkBtn::after{
	content: "";
	position: absolute;
	background: #000;
	height: 2px;
}

.checkBtn::before {
	width: 50px;
	right: -20px;
	top: 50%;
}

.checkBtn::after {
	width: 15px;
	right: -22px;
	top: 41%;
	transform: rotate(45deg);
}

.checkBtn:hover{
	background: #fff;
	opacity: 1;
}

.checkImg {
	position: absolute;
	z-index: 1;
	width: 100px;
	top: -170px;
}

.pointList li:nth-child(2n+1) .checkImg {
	right: -10px;
	transform: rotate(15deg);
}

.pointList li:nth-child(even) .checkImg{
	left: -10px;
	transform: rotate(-15deg);
}

.end{
	padding-top: 5%;
	border-top: 10px double #3FE3D7;
	text-align: justify;
}

.end p {
	background: #fff;
	width: 85%;
	padding: 4%;
	margin: auto;
	line-height: 1.5;
}