// html{
// 	position: relative;
// 	min-height: 100%;
// }
body{
	// background-color: #fff;
	background-color: $brand-base;
	font-size: 16px;
	font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.container-fluid{
	max-width: 1200px;
}
img{
	max-width: 100%;
	height: auto;
}

@for $i from 1 through 5 {
	.mb-#{$i}em { margin-bottom: #{$i}em; }
}
@for $i from 1 through 5 {
	.mt-#{$i}em { margin-top: #{$i}em; }
}
h1,h2,h3,h4{
	margin-bottom: 1em;
	font-family: 'Ubuntu', sans-serif;
}
h2{
	font-size: 2.4em;
	}
h3{
	font-size: 1.5em;
}

section{
	padding: 3em 0;
	@media screen and (min-width:$screen-sm){
		padding: 5em 0;
	}
}

#mainVisual{
	position: relative;
	min-height: 100vh;
	// padding: 0 1em;
	background-color: #fff;
	background: #fff url(../img/bg_main.jpg) center center no-repeat fixed;
	background-size: cover;
	.mainVisual-inner{
		display: table;
		width: 100%;
		height: 100%;
	}
	.container-fluid{
		display: table-cell;
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}
	h1{
		margin-top: -200px;
		margin-bottom: 0;
		color: #123379;
		font-size: 100px;
	}
	.lead{
		margin-bottom: 0;
		line-height: 1.2;
		font-size: 40px;
		color: #333;
		font-family: 'Covered By Your Grace', cursive;
		// + p{
		// 	background-color: $brand-primary;
		// 	color: #fff;
		// 	font-size: 2em;
		// }
	}
	.btn-fb, .btn-login{
		font-size: 16px;
		margin-bottom: 10px;
	}
	// .form-control{
	// 	display: inline-block;
	// 	width: auto;
	// }
	.input-group{
		font-family: 'Pathway Gothic One', sans-serif;
		#mce-EMAIL{
			font-family: 'Arial';
		}
	}
	.btn-arrow-down{
		position: absolute;
		bottom: 10px;
		width: 100%;
		text-align: center;
		i{
			width: 50px;
			height: 50px;
			border: 2px solid #fff;
			border-radius: 50%;
			font-size: 30px;
			line-height: 50px;
			color: #fff;
			cursor: pointer;
			&:hover{
				border-color: $brand-primary;
				color: $brand-primary;
			}
		}
	}
	@media screen and (min-width:$screen-sm){
		.lead{
			font-size: 50px;
		}
		.input-newsletter{
			max-width: 500px;
			margin: 0 auto;
		}
		.btn-fb, .btn-login{
			margin: 0 5px 1.5em;
			padding: 8px 20px;
		}
	}
}

.sectionFeature{
	// border-bottom: 1px solid #e9ceb0;
	p + h3{
		margin-top: 2em;
	}
}
#img-partner{
	position: relative;
	height: 0;
	padding-bottom: 100%;
	img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		&:first-child{
			z-index: 100;
		}
	}
}
@media screen and (min-width:$screen-sm){
	#img-partner{
		padding-bottom: 41.66667%;
	}
}

.sectionMerit{
	border-bottom: 1px solid #fff;
	background-color: #F0F3F7;
	// padding-top: 5em;
	// padding-bottom: 5em;
	// h2{
	// 	line-height: 3;
	// }
	.merit{
		text-align: center;
		// display: table-cell;
		// float: none;
		// padding: 3em 1em;
		// background-color: #fff;
			// background-color: $brand-success;
		// &:nth-of-type(odd){
			// background-color: $brand-success;
	}
	@media screen and (min-width:$screen-sm){
		.merit{
			padding-left: 20px;
			padding-right: 20px;
		}
	}
}

.sectionPrice{
	background: $brand-primary url(../img/bg_price.jpg) fixed;
	background-size: cover;
	color: #fff;
	.price-free{
		width: 150px;
		height: 150px;
		margin: 0 auto 16px;
		border: 2px solid #fff;
		border-radius: 50%;
		line-height: 150px;
		text-align: center;
		font-size: 2.5em;
		font-family: 'Pathway Gothic One', sans-serif;
	}
}



.sectionFaq{
	h3{
		+ p{
			margin-bottom: 2em;
		}
	}
}
.sectionCreator{
	background-color: #F0F3F7;
	.creator-tsukuribe{
		margin-bottom: 1em;
		img{
			width: 150px;
		}
	}
	.creator-pic{
		margin-bottom: .5em;
		border-radius: 50%;
	}
	.creator-prof{
		margin-bottom: 1.5em;
		font-size: 14px;
	}
	.creator-message{
		max-width: 600px;
		margin: 0 auto;
		font-size: 14px;
		quotes: "\201C""\201D";
		&::before{
			content: open-quote;
			font-family: serif;
		}
		&::after{
			content: close-quote;
			font-family: serif;
		}
	}
	@media screen and (min-width:$screen-sm){
		.creator-tsukuribe{
			img{
				width: 200px;
			}
		}
	}
}

.list-sns{
	margin-bottom: 3em;
	text-align: center;
	li{
		margin: 0 10px;
		a{
			display: inline-block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			&.twitter{
				background-color: #55acee;
			}
			&.facebook{
				background-color: #3b5998;
			}
			color: #fff;
			i{
				font-size: 30px;
				line-height: 50px;
			}

		}
	}
}

footer{
	padding: 3em 0 1em;
	// background-color: #F0F3F7;
	background-color: $brand-info;
	color: #fff;
	text-align: center;
	@media screen and (min-width:$screen-sm){
		padding: 5em 0 3em;
	}
	a,
	a:hover{
		color: inherit;
	}
}

#pageTop {
	position: fixed;
	right: 10px;
	bottom: -50px;
	width: 50px;
	height: 50px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.4);
	transition: bottom .6s ease-out 0s;
}
#pageTop a {
	font-size: 40px;
	line-height: 50px;
	text-decoration: none;
	color: $brand-primary;
	transition: color .4s ease-out 0s;
}
	#pageTop a :hover {
	color: #333;
}