// 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;
}