@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:1000px){

/*STYLE*/
.sp {
    display:none;
}

.cts {
    width:1000px;
}

.titles {
    padding-bottom:35px;
    text-align:center;
}

.titles h2 {
    font-size:250%;
    font-weight:bold;
    line-height:135%;
}

.titles .subtitle {
    font-size:120%;
    font-weight:bold;
}

.titles .kana {
    font-size:100%;
}

.movie .youtube {
    margin:auto;
    padding-top: 56.25%;
    position:relative;
    background:#000;
}
    
.movie .youtube iframe {
    position: absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
}

.fl{font-size:125%;}
.fll{font-size:160%;}

.next {
    position:relative;
    top:-1px;
    margin:-1px;
}



/*MV*/
#mv {
    width:100%;
    height:635px;
    background:url(../img/mv_bg.jpg) center;
    background-size:cover;
    position:relative;
}

#mv .copies {
    height:490px;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    position:relative;
    z-index:1;
}

#mv .copies .cts {
}

#mv .copies .maincopy {
    width:700px;
}

#mv .copies .subcopy {
    width:580px;
    margin-bottom:15px;
}

#mv .copies h1 {
    width:100%;
    margin-bottom:15px;
}

#mv .copies .subtitle {
    width:600px;
}

#mv .summary {
    background:#46aadc;
    height:145px;
}

#mv .summary .cts {
    display:flex;
    align-items:flex-start;
    height:145px;
    padding-top:25px;
}

#mv .summary .cts .copy {
    width:620px;
    position:relative;
}

#mv .photos {
    position:absolute;
    bottom:0;
    right:calc(50% - 480px);
}

#mv .photos .photo {
    width:375px;
    height:620px;
}

#mv .photos .position {
    position:absolute;
    right:0;
    bottom:78px;
    background:#b29b69;
    line-height:100%;
    color:#fff;
    padding:5px 7px 3px;
}

#mv .photos .position .atn {
    font-size:50%;
}

#mv .photos .name {
    position:absolute;
    right:0;
    bottom:40px;
    font-size:150%;
    font-weight:500;
    line-height:100%;
    background:#b29b69;
    color:#fff;
    padding:3px;
}

#mv .photos .attention {
    position:absolute;
    bottom:15px;
    right:0;
    font-size:50%;
    color:#fff;
}



/*START*/
#start {
    position:relative;
    background:#f4f0e9;
}

#start .bg {
    width:100%;
    height:250px;
    background:#46aadc;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}





/*CTA*/
.cta {
    padding:35px 0 90px;
    background:#f4f0e9;
    text-align:center;
}

.cta.re {
    background:#fa4678;
}

.cta .icon {
    width:50px;
    margin:0 auto 7px;
}

.cta .item {
    text-align:center;
    margin-bottom:20px;
}

.cta .item p {
    font-size:180%;
    font-weight:600;
    color:#1b78c8;
    border-bottom:#1b78c8 1px solid;
    display:inline-block;
}

.cta .subcopy {
    font-size:150%;
    font-weight:bold;
}

.cta h2 {
    font-size:250%;
    font-weight:bold;
    line-height:135%;
    color:#fa4678;
    padding-bottom:10px;
}

.cta.re h2 {
    color:#f5e100;
}

.cta .copy {
    font-size:125%;
    font-weight:500;
    margin-bottom:15px;
}

.cta.re .copy {
    color:#fff;
}

.cta .cta_btn {
    text-align:center;
    animation:cta 1s infinite alternate;
    -webkit-animation:cta 1s infinite alternate;
}

.cta .cta_btn .btn {
    width:600px;
    margin:auto;
    display:inline-block;
}

.cta .cta_btn .btn a {

}

.cta .cta_btn .btn a img {
    border-radius:30vw;
    border:#fff 5px solid;
}





/*BENEFIT*/
.benefit {
    padding:55px 0 0;
    background:#46aadc;
    position:relative;
}

.benefit .cts {
}

.benefit .item {
    width:500px;
    position:absolute;
    top:-30px;
    left:0;
    right:0;
    margin:auto;
}

.benefit .title {
    font-size:300%;
    font-weight:bold;
    line-height:120%;
    color:#fae132;
    text-align:center;
    margin-bottom:10px;
}

.benefit .copy {
    font-size:110%;
    font-weight:500;
    color:#fff;
    text-align:center;
    margin-bottom:10px;
}

.benefit .illust {
    width:400px;
    margin:auto;
}



/*SECRET*/
#secret {
    padding:70px 0;
    background:#ecf6fb;
}

#secret .movie {
    margin-bottom:30px;
}

#secret .result {
    width:600px;
    margin:auto;
}

#secret .result li {
    display:flex;
    align-items:center;
    border-bottom:#d2d2d2 1px solid;
    padding:0 0 12px 12px;
    margin-bottom:12px;
}

#secret .result li:last-child {
    margin-bottom:0;
}

#secret .result li img {
    width:30px;
    margin-right:10px;
}

#secret .result li p {
    font-size:150%;
    font-weight:600;
}

#secret .attention {
    font-size:80%;
    text-align:right;
}



/*INTRO*/
#intro {
    background:#fff;
    padding:70px 0 30px;
}

#intro .illust {
    width:500px;
    margin:0 auto 30px;
}

#intro .ex {
    width:850px;
    margin:auto;
}

#intro .ex p {
    font-size:100%;
    line-height:200%;
}

#intro .summary {
    margin-top:50px;
    text-align:center;
    font-size:180%;
    font-weight:bold;
    line-height:150%;
}



/*SENTENCE*/
#sentence {
    background:#ecf6fb;
    padding-bottom:70px;
}

#sentence .arrow {
    margin-bottom:70px;
}

#sentence .sentences {

}

#sentence .sentences .sentence {
    background:#fff;
    width:950px;
    margin:0 0 20px auto;
    display:flex;
    align-items:center;
    position:relative;
    padding:30px 30px 30px 80px;
}

#sentence .sentences .sentence:last-child {
    margin-bottom:0;
}

#sentence .sentences .sentence .items {
    width:100px;
    height:100px;
    background:#46aadc;
    border-radius:30vw;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:absolute;
    left:-50px;
}

#sentence .sentences .sentence .items .item {
    font-size:90%;
    line-height:100%;
    color:#fff;
    margin:7px 0 5px;
}

#sentence .sentences .sentence .items .number {
    font-size:200%;
    line-height:100%;
    color:#fff;
}

#sentence .sentences .sentence .detail {
}

#sentence .sentences .sentence .detail .subject {
    font-size:150%;
    font-weight:600;
    color:#1b78c8;
}

#sentence .sentences .sentence .detail .tx {

}



/*SITUATION*/
#situation {

}

#situation .cts {
    width:100%;
    display:flex;
}

#situation .image {
    width:50%;
}



/*RESULT*/
#result {
    background:#fff;
    padding:70px 0;
}

#result .copy {
    font-size:150%;
    font-weight:600;
    text-align:center;
    margin-bottom:30px;
}

#result .details {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

#result .details .illust {
    width:300px;
}

#result .details .ex {
    width:calc(100% - 350px);
}

#result .details .ex p {
    line-height:180%;
}

#result .text {
    text-align:center;
    margin-bottom:50px;
}

#result .text .ex p {
    line-height:200%;
}

#result .step_cts {
    margin-bottom:50px;
}

#result .step_cts .step_title {
    text-align:center;
    margin-bottom:35px;
}

#result .step_cts .step_title p {
    font-size:180%;
    font-weight:600;
    line-height:100%;
    color:#fff;
    padding:12px 30px;
    background:#fa4678;
    display:inline-block;
    border-radius:30vw;
}

#result .step_cts .steps {
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
}

#result .step_cts .steps .step {
    width:310px;
    border:#fa4678 1px solid;
    padding:30px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

#result .step_cts .steps .step:after {
    content:"";
    width:35px;
    height:30px;
    background:#fa4678;
    display:block;
    position:absolute;
    right:-36px;
}

#result .step_cts .steps .step:last-child:after {
    display:none;
}

#result .step_cts .steps .step .number {
    position:absolute;
    top:-20px;
    left:0;
    right:0;
    text-align:center;
}

#result .step_cts .steps .step .number p {
    border:#fa4678 1px solid;
    border-radius:30vw;
    background:#fff;
    width:120px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    color:#fa4678;
    font-size:90%;
    font-weight:600;
}

#result .step_cts .steps .step .item {
    font-size:150%;
    font-weight:600;
    color:#fa4678;
    text-align:center;
    margin-bottom:10px;
}

#result .step_cts .steps .step .illust {
    width:120px;
    margin:0 auto 10px;
}

#result .step_cts .steps .step .tx {
    font-size:90%;
    text-align:center;
}

#result .summary {
    text-align:center;
}

#result .summary .subcopy {
    font-size:150%;
    font-weight:600;
    margin-bottom:10px;
}

#result .summary .maincopy {
    display:flex;
    justify-content:center;
    margin-bottom:35px;
}

#result .summary .maincopy p {
    font-size:300%;
    font-weight:600;
    line-height:100%;
}

#result .summary .maincopy .st p {
    color:#fa4678;
    position:relative;
}

#result .summary .maincopy .st p:after {
    content:"";
    width:100%;
    height:5px;
    background:#fa4678;
    display:block;
    position:absolute;
    bottom:-10px;
}

#result .summary .invitation {
    font-size:180%;
    font-weight:600;
}








/*ROW*/
#row {
    padding:70px 0 100px;
}

#row .cts {
    width:850px;
}

#row .rows {
}

#row .rows .row {
    display:flex;
    border-bottom:#e1e1e1 1px solid;
    padding:20px 15px;
}

#row .rows .row:first-child {
    border-top:#e1e1e1 1px solid;
}

#row .rows .row:last-child {
    margin-bottom:0;
}

#row .rows .row .item {
    width:25%;
    font-weight:600;
}

#row .rows .row .tx {
    width:75%;
}



/*PRIVACY*/
#privacy {
    padding:70px 0 100px;
}

#privacy .cts {
    width:850px;
}

#privacy .privacies {
}

#privacy .privacies .privacy {
    border-bottom:#e1e1e1 1px solid;
    padding:20px 15px;
}

#privacy .privacies .privacy:first-child {
    border-top:#e1e1e1 1px solid;
}

#privacy .privacies .privacy:last-child {
    margin-bottom:0;
}

#privacy .privacies .privacy .item {
    font-weight:bold;
    padding-bottom:5px;
}

#privacy .privacies .privacy .tx {
}




/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:45px;
height:45px;
right:15px;
bottom:15px;
z-index:100;
display:none;
}

.BackToTop img {
    border-radius:10vw;
    border:#fff 1px solid;
}



/*FOOTER*/
footer {
    background:#fa4678;
    padding:50px 0;
}

footer .link {
    text-align:center;
    padding-bottom:30px;
}

footer .link a {
    font-size:100%;
    font-weight:600;
    color:#fff;
    margin:0 15px;
}

footer .copyright {
    font-size:80%;
    font-weight:300;
    color:#fff;
    text-align:center;
}








}