@charset "utf-8";

/* 00.USUAL
--------------------------------------------------- */
html {
    scroll-behavior: smooth;
}
article#smart {
    font-family: "M PLUS 1p";
    font-size: 125%;
	letter-spacing: 0.04em;
    color: #1a1a1a;
    overflow: hidden;
    background-color: #4da7e9;
}
article#smart * {
	margin: 0;
	padding: 0;
}
article#smart img {
	max-width: 100%;
	height: auto;
}
article#smart div.inner {
    margin: 0 auto;
}
article#smart .floL,
article#smart .floR { display:inline; }
article#smart .floL { float:left; }
article#smart .floR { float:right; }


/* 01.MV
--------------------------------------------------- */
section#mv {
    background-color: #fff200;
    position: relative;
    margin-top: -150px;
    transform: skew(0deg, -7deg);
}
section#mv div.inner {
    width: 850px;
    padding: 230px 0 85px;
    transform: skew(0deg, 7deg);
}
section#mv div.inner p#lead {
    margin-bottom: 3%;
    padding: 0 5%;
}
section#mv div.inner div.floL {
    width: 65%;
    padding-top: 1%;
}
section#mv div.inner div.floL p {
    text-align: right;
    margin-bottom: 5%;
    padding-right: 12%;
}
section#mv div.inner div.floL p img {
    width: 70%;
    height: auto;
}
section#mv div.inner div.floL h1 {
    animation: mvcopy 0.5s ease-in 0s both;
}
    @keyframes mvcopy {
        from { transform:translateX(250px) skew(0deg, -5deg); }
        90%  { transform:skew(0deg, -5deg); }
        to   { transform:translateX(0px) skew(0deg, 0deg); }
    }
section#mv div.inner div.floR {
    width: 35%;
    text-align: center;
}
section#mv div.inner div.floR p {
    margin-bottom: 4%;
}
section#mv div.inner div.floR p img {
    width: 60%;
    height: auto;
}
section#mv div.inner div.floR figure {
    animation: zero 1.2s ease-in 0s 1 both;
    opacity: 0;
}
    @keyframes zero {
      70%  { transform:scale(0.0,0.0) translate(0%, 0%); opacity:0; }
      85% { transform:scale(1.1,1.1) translate(0%, 0%); opacity:1; }
      95% { transform:scale(0.9,0.9) translate(0%, 0%); opacity:1; }
      100% { transform:scale(1.0,1.0) translate(0%, 0%); opacity:1; }
    }

section#mv div.inner div.movieWrap {
    position: relative;
    margin-top: 2em;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
section#mv div.inner div.movieWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* 02.CAMPAIGN-LEAD
--------------------------------------------------- */
section#campaignLead {
    background: url("../img/bg_speedline.png") no-repeat center / 120% auto;
    transform: skew(0deg, -7deg);
    padding: 2em 0;
}
section#campaignLead div.inner {
    width: 850px;
    margin: 0 auto;
}
section#campaignLead div.inner p {
    animation: gyun 0.8s ease-in-out 0s both infinite;
}
    @keyframes gyun {
        from { transform:scale(1.0,1.0) skew(0deg, 0deg); }
        50%  { transform:scale(1.1,1.1) skew(0deg, -5deg); }
        to   { transform:scale(1.0,1.0) skew(0deg, 0deg); }
    }
section#campaignLead div.inner div.campaignBtn {
    text-align: center;
    margin-top: 0.8em;
}
section#campaignLead div.inner div.campaignBtn img {
    width: 28%;
}

/* 03.FLOW
--------------------------------------------------- */
section#flow {
    background: linear-gradient(90deg, #ec4b58 50%, #4da7e9 50%);
    transform: skew(0deg, -7deg);
}
section#flow div.inner {
    width: 940px;
    transform: skew(0deg, 7deg);
    padding: 2em 0;
}
section#flow div.floL,
section#flow div.floR {
    width: 45%;
}
section#flow div.floL {
    padding-top: 6%;
}
section#flow .payment{
    display: block;
    text-align: center;
}
section#flow h3 {
    text-align: center;
}
section#flow div.floR h3 {
    margin-top: 27%;
}
@media only screen and (max-width: 898px){
    section#flow div.floR h3 {
        margin-top: 31%;
    }
}
section#flow h3 img {
    width: 75%;
    height: auto;
}
section#flow ol {
    list-style: none;
}
section#flow ol li {
    padding-bottom: 13.5%;
}
section#flow div.floL ol li {
    margin-bottom: 4%;
    padding-bottom: 8%;
    background: url("../img/flow3.gif") no-repeat center bottom / 5px auto;
}
    section#flow div.floL ol li:last-child { background:none; text-align: center;}
    section#flow div.floL ol li:nth-last-child(2) { background:none; padding-bottom: 0; }
    section#flow div ol li:last-child { padding-bottom:0; }

section#flow div#point {
    background: url("../img/point_bg_pc.png") no-repeat center top / 100% auto;
    margin-top: 2em;
}
section#flow div#point h2 {
    text-align: center;
}
section#flow div#point h2 img {
    width: 66%;
}
section#flow div#point ul {
    width: 80%;
    margin: 0 auto;
    padding: 4.5% 0 13%;
    list-style: none;
}
section#flow div#point ul li  {
    display: inline-block;
    width: 33.3%;
}


/* 04.CAMPAIGN
--------------------------------------------------- */
section#campaign {
    background: url("../img/bg_speedline.png") no-repeat center;
    margin-top: -60px;
    padding: 160px 0 100px;
}
section#campaign div.inner {
    width: 940px;
}
section#campaign div.inner h2 {
    text-align: center;
    margin-bottom: 0.1em;
}
section#campaign div.inner h2 img {
    width: 88%;
}
section#campaign div.inner p#service {
    animation: dodon 2.5s linear 0s both infinite;
}
    @keyframes dodon {
      91%  { transform:scale(1.0,1.0); }
      94% { transform:scale(1.2,1.2); }
      97% { transform:scale(0.9,0.9); }
      100% { transform:scale(1.0,1.0); }
    }

section#campaign div.inner p#attention {
    margin-top: -6em;
    position: relative;
    text-align: center;
}
section#campaign div.inner p#attention img {
    width: 80%;
}

section#campaign div#note {
    background-color: #fff;
    border: 5px solid #1a1a1a;
    width: 90%;
    margin: 2em auto 0;
    padding: 1em 1.5em;
}
section#campaign div#note ul {
    list-style: none;
}
section#campaign div#note ul li {
    text-indent: -1em;
    margin-bottom: 0.5em;
    padding-left: 1em;
    font-size: 87%;
    font-weight: 600;
    line-height: 1.3;
}
section#campaign div#note ul li:last-child {
    margin-bottom: 0;
}
section#campaign div#note ul li::before {
    content: "※";
}

/* 05.NOTE
--------------------------------------------------- */
section#note {
    padding: 5em 0 1.5em;
}
section#note ul.attentionNote {
    width: 940px;
    margin: 0 auto;
}

/* RESERVE BUTTON
--------------------------------------------------- */
#page_top {
    bottom: 100px;
}
div#reservebtn {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    width: 350px;
    animation: kuikui 2.5s linear 0s infinite;
    transition: 0.3s;
}
    @keyframes kuikui {
      90%  { transform:translateX(0px); }
      95%  { transform:translateX(20px); }        
      100% { transform:translateX(0px); }        
    }


/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 959px) {
    section#mv div.inner,
    section#campaignLead div.inner,
    section#flow div.inner { width:90%; }
    section#campaign div.inner { width:98%; }
    section#campaign div.inner p#service img { max-width:110%; margin-left:-5%; }
    section#campaign div.inner p#attention { margin-top:-12%; }
    section#note { padding:3em 0 1.5em; }
    section#note ul.attentionNote { width:90%; }


}



/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:559px) {
    section#mv div.inner { padding:200px 0 60px; }
    section#mv div.inner div.floL { padding-top:4%; }
    section#flow div.floL ol li { background-size:2.5px auto; }
    section#flow div.floL ol li:last-child { padding-bottom:0; }
    section#flow div#point { background:url("../img/point_bg_sp.png") no-repeat center top / 100% auto; }
    section#flow div#point h2 img { width:78%; padding-left:5%; }
    section#flow div#point ul { width:65%; padding:6% 0 12%; }
    section#flow div#point ul li { display:block; width:auto; margin-bottom:10%; padding:0 0 0 8%; }
    section#campaign { padding:120px 0 60px; }
    section#campaignLead { padding:1.5em 0; }
    section#campaignLead div.inner div.campaignBtn img { width:40%; }
    div#reservebtn { width:75%; }
}




/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
    div#reservebtn { width:85%; }
}