@charset "utf-8";

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

@media(min-width:1000px){

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

.cts {
    width:1000px;
}

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

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

.titles .icon {
    width:60px;
    margin:0 auto 10px;
}

.maintitles .icon {
    width:60px;
    margin:0 auto 10px;
}

.titles .copy {
    font-size:110%;
    font-weight:600;
}



/*FIXED CTA*/
.fixed_cta {
    position:fixed;
    top:0;
    right:0;
    z-index:9999;
}

.fixed_cta a {
    width:auto;
    background:#00b900;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}

.fixed_cta a img {
    width:50px;
    margin-right:15px;
}

.fixed_cta a p {
    font-weight:600;
    line-height:100%;
    color:#fff;
    text-align:center;
}




/*MV*/
#mv {
width:100%;
height:600px;
background:linear-gradient(#26B7C5,#86D8E3,#C9E9F2);
overflow:hidden;
}

#mv .logo {
width:200px;
position:absolute;
top:20px;
left:20px;
z-index:1000;
}

#mv .cts {
position:relative;
width:1000px;
height:600px;
display:flex;
justify-content:space-between;
align-items:center;
}

#mv .images {
position:absolute;
top:0;
right:0;
width:700px;
height:600px;
}

#mv .images .mv {
position:absolute;
bottom:0;
right:0;
width:540px;
}

#mv .copies {
display:flex;
flex-direction:column;
align-items:center;
padding-top:50px;
}

#mv .copies .maincopy {
}

#mv .copies .maincopy .maincopies {
width:480px;
position:relative;
}

#mv .copies .maincopy .maincopies .copy {
position:relative;
}



/*TOP CTA*/
.top_cta {
    width:100%;
    padding:20px 0 35px;
    background:#f5f5f5;
}

.top_cta .cts {
}

.top_cta .btns {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:50px;
}

.top_cta .cta_lead_img {
    width:500px;
}

.top_cta .cta_lead_img img {
    width:100%;
    height:auto;
    display:block;
}

.top_cta .btns .btn {
    margin:0;
}

.top_cta .btns .btn a {
    width:400px;
    height:80px;
    border-radius:6px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.top_cta .btns .btn a img {
    width:40px;
    margin-right:15px;
}

.top_cta .btns .btn a p {
    font-size:120%;
    font-weight:600;
    color:#fff;
}

.top_cta .btns .btn.line a {
    background:#00b900;
}



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

#intro .titles .icon {
    width:70px;
    margin-bottom:5px;
}

#intro .titles h2 {
    font-size:250%;
}

#intro .details {
    display:flex;
    justify-content:space-between;
    margin-bottom:50px;
}

#intro .details .detail {
    width:300px;
}

#intro .details .detail .photo {
    margin-bottom:15px;
}

#intro .details .detail h3 {
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:135%;
    font-weight:600;
    line-height:135%;
    text-align:center;
    padding-bottom:10px;
}

#intro .details .detail h3 img {
    width:30px;
    margin-right:5px;
}

#intro .messages {
}

#intro .messages .message {
    font-weight:600;
    text-align:center;
}



/*FEATURE*/
#feature {
    padding:70px 0;
    background:#f2fbfc;
}

#feature .titles .icon {
    width:70px;
    margin-bottom:5px;
}

#feature .maintitles {
    text-align:center;
    margin-bottom:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

#feature .maintitles h1 {
    width:50%;
    margin-bottom:10px;
}

#feature .maintitles .copy {
    font-size:120%;
    font-weight:600;
}

#feature .kickbacks {
}

#feature .kickbacks .kickback {
    display:flex;
    justify-content:center;
    align-items:center;
}

#feature .kickbacks .kickback img {
    width:800px;
}

#feature .systems {
    margin-bottom:70px;
}

#feature .systems .system {
    margin-bottom:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#fff;
    padding:20px;
}

#feature .systems .system img {
    width:800px;
}

#feature .systems .system .attention {
    text-align:center;
    font-size:80%;
    color:#aaa;
}

#feature .features {
}

#feature .features .feature {
    margin-bottom:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row-reverse;
    background:#fff;
    padding:20px 20px 0;
}

#feature .features .feature .photo {
    width:300px;
}

#feature .features .feature .detail {
    width:450px;
}

#feature .features .feature .detail h3 {
    font-size:150%;
    font-weight:600;
    line-height:135%;
    padding-bottom:10px;
}

#feature .features .feature .detail .answers {
}

#feature .features .feature .detail .answers .answer {
display:flex;
background:#C9E9F2;
padding:10px 15px;
margin-bottom:10px;
}

#feature .features .feature .detail .answers .answer img {
width:22px;
}

#feature .features .feature .detail .answers .answer p {
font-size:90%;
padding-left:10px;
}

#feature .supports {
}

#feature .supports .support {
    margin-bottom:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    padding:20px 20px 0;
}

#feature .supports .support .photo {
    width:300px;
}

#feature .supports .support .detail {
    width:450px;
}

#feature .supports .support .detail h3 {
    font-size:150%;
    font-weight:600;
    line-height:135%;
    padding-bottom:10px;
}

#feature .supports .support .detail .answers {
}

#feature .supports .support .detail .answers .answer {
display:flex;
background:#C9E9F2;
padding:10px 15px;
margin-bottom:10px;
}

#feature .supports .support .detail .answers .answer img {
width:22px;
}

#feature .supports .support .detail .answers .answer p {
font-size:90%;
padding-left:10px;
}



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

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

#result .maintitles h1 {
    font-size:300%;
    font-weight:bold;
    line-height:100%;
    margin-bottom:10px;
}

#result .titles {
}

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

#result .results {
display:flex;
justify-content: space-between;
padding-top:70px;
margin-bottom:30px;
}

#result .results .result {
width:480px;
background:#fff;
border-radius:20px;
position:relative;
padding:30px 25px 20px;
}

#result .results .result .item {
width:240px;
height:40px;
background: #26B7C5;
border-radius:10vw;
color:#fff;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:-20px;
left:0;
right:0;
margin:auto;
}

#result .attention {
    width:700px;
    margin:auto;
}

#result .attention p {
    display:flex;
    font-size:80%;
    justify-content:center;
    color:#aaa;
}



/*PROCESS*/
#process {
    padding:70px 0;
}

#process .titles {
    padding-bottom:40px;
}

#process .titles .icon {
    width:45px;
    margin-bottom:5px;
}

#process .conditions {
display:flex;
flex-direction: column;
align-items: center;
background:#26B7C5;
padding:10px 20px 10px 20px;
margin-bottom:70px;
}

#process .conditions .title {
    text-align:center;
    margin-bottom:10px;
}

#process .conditions .title h2 {
    font-size:200%;
    color:#fff;
    font-weight:bold;
    line-height:135%;
}

#process .conditions .condition {
width:80%;
text-align:center;
padding:0 0 10px 0;
}

#process .conditions .condition .item {
font-size:120%;
font-weight:600;
background:#fff;
color:#26B7C5;
}

#process .steps {
    display:flex;
    justify-content:space-between;
    position:relative;
    margin-bottom:70px;
}

#process .steps .flowline {
    width:100%;
    height:20px;
    background:#e1e1e1;
    position:absolute;
    top:100px;
    left:0;
}

#process .steps .step {
    width:300px;
    position:relative;
}

#process .steps .step .number {
    width:40px;
    height:40px;
    background:#26B7C5;
    color:#fff;
    border-radius:20vw;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:absolute;
    top:-20px;
    left:0;
    right:0;
    margin:auto;
}

#process .steps .step .illust {
    width:300px;
    height:220px;
    background:#fff;
    border:#ccc 1px solid;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
}

#process .steps .step .illust img {
    width:150px;
}

#process .steps .step .detail {
    text-align:center;
}

#process .steps .step .detail .status {
    font-weight:600;
}

#process .attention h2 {
    font-size:200%;
    font-weight:bold;
    line-height:135%;
    text-align: center;
    margin-bottom: 25px;
}

#process .attention {
    width:700px;
    margin:auto;
}

#process .attention p {
    display:flex;
    font-size:120%;
    font-weight:600;
    justify-content:center;
    background: #26B7C5;
    color:#fff;
}

#process .attention .arrow {
    display:flex;
    font-size:120%;
    font-weight:600;
    justify-content:center;
    color:#26B7C5;
}





/*LINE BTN*/
.linebtn {
    width:350px;
    position:fixed;
    bottom:0;
    right:0;
    z-index:1000;
}



/*PRIVACY POLICY*/
#privacypolicy {
    padding:70px 0 100px;
    position:relative;
    background:#e1e1e1;
}

#privacypolicy .cts {
    width:900px;
}

#privacypolicy .titles {
    padding-bottom:15px;
}

#privacypolicy .privacypolicies {
    position:relative;
    background:#fff;
    box-shadow:0 0 20px rgba(0,0,0,0.1);
}

#privacypolicy .privacypolicies .privacypolicy_cts {
    padding:30px 60px 50px;
}

#privacypolicy .privacypolicies .privacypolicy {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: #333 1px solid;
}

#privacypolicy .privacypolicies .privacypolicy .item {
    font-size:110%;
    font-weight:900;
}

#privacypolicy .backbtn {
    margin-top:50px;
    text-align:center;
}

#privacypolicy .backbtn .btn {
    display:inline-block;
}

#privacypolicy .backbtn .btn a {
    display:flex;
    justify-content:center;
    align-items:center;
    border:#000 1px solid;
    padding:10px 20px;
}

#privacypolicy .backbtn .btn a p {
    font-weight:500;
    color:#000;
    padding-left:10px;
}

#privacypolicy .backbtn .btn a .arrow {
    width:10px;
    height:10px;
    border-top:#000 1px solid;
    border-right:#000 1px solid;
    transform:rotate(-135deg);
}



/*CTA*/
.cta {
    width:100%;
    background:linear-gradient(#26B7C5,#86D8E3,#C9E9F2);
    background-size:cover;
    overflow:hidden;
}

.cta .cts {
    width:860px;
    height:280px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    position:relative;
}

.cta .copies {
    width:450px;
    text-align:center;
}

.cta .copies .photos {
    width:360px;
    height:280px;
    position:absolute;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.cta .copies .photos .photo {
    width:300px;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    bottom:0;
}

.cta .cta_btn {
    width:100%;
    display:inline-block;
    animation:cta linear 1s infinite alternate;
    -webkit-animation:cta linear 1s infinite alternate;
}

.cta .cta_btn a {
    width:100%;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    background:#00b900;
    border-radius:5px;
    padding:25px 50px;
}

.cta .cta_btn a p {
    font-size:125%;
    font-weight:bold;
    line-height:100%;
    color:#fff;
}

.cta .cta_btn a img {
    width:50px;
    position:relative;
    right:25px;
}



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



/*FOOTER*/
footer {
padding:30px 0;
}

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

footer .info .logo {
    width:180px;
    margin:0 auto 10px;
}

footer .info .company {
    font-size:100%;
    font-weight:bold;
}

footer .info .address {
    font-size:80%;
}

footer .info .tel {
    font-size:80%;
}

footer .info .mail {
    font-size:80%;
}

footer .privacypolicy {
    font-size:60%;
    text-align:center;
    color:#aaa;
}

footer .copyright {
    font-size:60%;
    text-align:center;
    color:#aaa;
}








}