@charset "utf-8";
/*==================================================

Global Default
==================================================*/
@import url(https://db.onlinewebfonts.com/c/e880dd7c6ab5731cbb5db5df70330509?family=DIN+2014+Bold);
body {
    font-family:
    "Noto Sans JP", YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 1.2;
    font-size:16px;
 color: #333;
    counter-reset: number 0;
  min-width:1200px;
}

.din{font-family: "DIN 2014 Bold",Meiryo;}

a {
    color: inherit;
    transition: .5s ease;
}
a:hover {
    opacity: .8;
}
::placeholder {
  color: #999;
}
.pc{display:block;}
.sp{display:none;}
.flex{display: flex;align-items:center;}
.viewport{
    width: 100%;
    padding: 0 2%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    max-width: 1024px;
}
.yl{color:#FAEA5A;}
.bl{
    color: #389BF1;
}
.grd{
    background: linear-gradient(90deg, #FEB433 0%, #FD881C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.slash:before{content:'＼';margin-right: 1rem;}
.slash:after{content:'／';margin-left: 1rem;}
.btn-dl{
    background: #FF9F02;
    color: #fff;
    font-weight: bold;
    display: block;
    padding: 1rem 0;
    border-radius: 200px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .15);
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.btn-dl span{color:#FF9F02;background:#fff;border-radius:100px;padding:.2rem .5rem;margin-right:.5rem}
.btn-dl img{
    width: 15px;
    margin-left: 8px;
}
section{
    padding: 4rem 2%;
}
#main-header{
    box-shadow: 0 4px 4px rgba(0,0,0,.15);
    position: sticky;
    top: 0;
    background: #ffffffde;
    z-index: 999;
}
#main-header .viewport{display:flex;justify-content:space-between;align-items:center;padding: 15px 2%;}

#main-header .btn-dl{
    margin: 0;
    max-width: 300px;
    padding: .8rem 0;
}

#main-footer{
    text-align: center;
    padding: 3rem 0 5rem;
}
#copyright{letter-spacing: 1px;margin:1rem 0 0;font-weight: bold;font-size: .9rem;}
#pageTop a:before{}

.mv .viewport{max-width:1200px;}
.mv{background: url(../img/bg-mv.jpg) no-repeat center center;padding: 4rem 0;background-size: cover;}
.mv-txt1{
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 2px;
}
.mv-txt1 span{margin:0 5px}
.mv-txt1 strong{ font-size:2.5rem;}
.mv .flex{
    margin: 2.5rem 0;
    align-items: flex-start;
}
.mv .mv-img{width: 46%;margin-right: 4%;box-sizing: border-box;}
.mv-img{
    position: relative;
    margin-bottom: 5%;
}
.mv-img img{
    width: 90%;
    max-width: 355px;
    object-fit: contain;
    box-shadow: 5px 5px 3px rgba(0, 0, 0, .1);
}
.mv .mv-img img{max-width: inherit;}

.mv-img img:nth-child(2){
    position: absolute;
    right: 0;
    bottom: -18%;
}
.mv-txt{width:50%;letter-spacing: 2px;}
.mv-txt2{
    color: #fff;
    font-size: 1.7rem;
    font-weight: bold;
}
.mv-txt2 strong{
    font-size: 2.5rem;
    letter-spacing: 4px;
}
.mv h1{
    font-size: 2rem;
    color: #fff;
    line-height: 1.5;
    margin: 1.5rem 0;
    letter-spacing: 1px;
}
.mv h1 span{display:block;margin-bottom:.5rem;font-size: 3.8rem;}
.mv h1 i{font-style:normal;padding: 0 .8rem 3px;background: #fff;color: #41a4ed;border-radius: 50px;font-size: 1.5rem;letter-spacing: 1px;margin-right: .5rem;position: relative;top: -1px;}
.logo__wrap{margin:3rem auto;}
.logo__img{margin: 0 20px;}

.points{
    background: #E9F4FE;
}
.points h2{font-size: 1.6rem;text-align: center;position:relative;letter-spacing: 2px;}
.points h2:after{content:'POINT';position:absolute;font-size: 5rem;letter-spacing: 12px;color:#cfe8ff;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;}
.points h2 span{
    font-size: 3rem;
}
.points h2 strong{z-index:2;position:relative;}
.points ul{
    margin: 4rem 0 1rem;
}
.points li{
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    position: relative;
    width: 30%;
    margin: 1%;
    text-align: center;
    padding: 2rem 1rem;
}
.points li span{
    background: #389BF1;
    color: #fff;
    font-weight: bold;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 100px;
    font-family: "DIN 2014 Bold";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1.5rem;
}
.points li img{
    max-height: 240px;
    width: auto;
    border-radius: 0;
    margin: 1rem 0 1rem;
    object-fit: cover;
}
.points li h3{
    color: #042D61;
    font-size: 1.3rem;
}
.points li p{margin: 1rem 0 2rem;line-height: 1.6;font-size: .95rem;}

.problems {
    background: #f5f5f5;
    padding: 4rem 2%;
}

.problems h2 {
    font-size: 1.6rem;
    text-align: center;
    position: relative;
    letter-spacing: 2px;
    margin-bottom: 3rem;
}

.problems h2:after {
    content: 'PROBLEMS';
    position: absolute;
    font-size: 5rem;
    letter-spacing: 12px;
    color: #dcdcdc;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.problems h2 strong {
    z-index: 2;
    position: relative;
}

.problems ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
    gap: 1rem;
}

.problems li {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    width: 23%;
    text-align: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
    position: relative;
}

.problems li img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.problems li h3 {
    font-size: 1.3rem;
    color: #042D61;
    margin-bottom: 0.5rem;
}

.problems li p {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.result{
    padding: 4rem 2%;
    text-align: center;
}
.result h2{
    text-align: center;
    margin-bottom: 1rem;
}
.result h2 img{
    max-width: 500px;
    width: 100%;
}
.result p{
    color: #042D61;
    border-bottom: 2px solid #042D61;
    display: inline;
    padding-bottom: .6rem;
    line-height: 2.5;
    font-size: 1.7rem;
    font-weight: bold;
}
.result p span{
    font-size: 2.5rem;
}

.data{background: url(../img/bg-data.jpg) no-repeat center center fixed;}
.data>p{
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 2px;text-align:center;
}
.data .viewport{background:#fff;border-radius:20px;box-shadow:0 0 12px rgba(0,0,0,.1);margin: 1rem auto;padding: 1rem 0 2rem;text-align: center;}
.data h2{
    text-align: center;
    font-size: 1.8rem;
    color: #042D61;
    line-height: 1.5;
    letter-spacing:1px;
    max-width: 600px;
    margin: 2rem auto 2.5rem;
    position:relative;
    padding-bottom: .7rem;
}
.data h2:before,.data h2:after{content:'';background:url(../img/ico-kakko.png) no-repeat;background-size:contain;width: 23px;height:100%;display:block;position:absolute;}
.data h2:after{right:0;transform:rotate(180deg);top:0;}
.data span{display: inline-block;letter-spacing: 0px;}
.data .mv-img img:nth-child(2){
    right: -3%;
    bottom: -30%;
}
.data strong{
    font-size: 3rem;
    margin: 0 .3rem;
}
.data .flex{
    justify-content: center;
}
.data .mv-img{
    margin: 0 1.5% 9%;
}
#contact .submit:hover{opacity:.8;}
#contact{
    background: #E9F4FE;
    padding: 5rem 2% 3rem;
}
#contact h2{
    color: #042D61;
    position:relative;
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.5;
    letter-spacing: 2px;
}
#contact h2 span{
    display: block;
    font-size: 1.5rem;
    letter-spacing: 1px;
}
#contact h2:after{content:'DOWNLOAD';position: absolute;font-size: 5rem;letter-spacing: 12px;color: #cfe8ff;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;}
#contact h2 strong{
    position: relative;
    z-index: 2;
}
#contact .flex{
    margin: 3rem 0;
    align-items: flex-start;
}
#contact .flex>div{
    width: 53%;
    margin-right: 5%;
}
#contact .txt-recommend{
    background: #fff;
    border-radius: 5px;
    padding: 1.5rem;
    margin: 5rem 0 0;
    font-size: 1rem;
    font-weight: bold;
}
#contact .txt-recommend ul{margin-top:1rem;}
#contact .txt-recommend li{padding-left:1rem;color: #042d61;line-height: 1.5;margin: 1.5% 0 0;position: relative;}
#contact .txt-recommend li:before{content:'';width: 6px;height: 6px;background: #042d61;display:inline-block;border-radius:50px;position: absolute;left: .5%;top: 9px;}
#contact .flex form{
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, .1);
    border-radius: 5px;
    padding: 1.5rem 1rem 1rem;
    width: 40%;
}
#contact .flex form p{
    background: #FFF9D9;
    text-align: center;
    font-weight: bold;
    color: #042d61;
    padding: .8rem 0;
    font-size: 1.1rem;
    margin-bottom: .5rem;
    position:relative;
}
#contact .privacy{text-align:center;font-size: .85rem;margin: 30px 0 15px;}
#contact .privacy a{
    color: #042d61;
    text-decoration: underline;
}
#contact .flex form p:after{
  content:'';
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid #FFF9D9;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  }
#contact .flex form dt{
    font-weight: bold;
    color: #042d61;
    padding: 1rem 0 .5rem;
}
#contact .flex form dt.required:after{content:'*';color:#f00;}
#contact .flex form dd{display: flex;justify-content: space-between;}
#contact .flex form dd input{
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    width: 100%;
}
#contact .flex form dd.name input{
    width: 46%;
}
#contact .flex form .submit{
    background: #f49e31;
    position: relative;
    border-radius: 3px;
    transition: .3s;
}
#contact .flex form .submit span{color:#fff;font-size:.8rem;position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;top: .55rem;z-index: 1;}
#contact .flex form .submit input{
    border: none;
    color: #fff;
    background: none;
    display: block;
    width: 100%;
    padding: 1.6rem 0 .5rem;
    font-weight: bold;
    text-indent: -15px;
    font-size: 1.15rem;
    position: relative;
    z-index: 2;
}
#contact .flex form .submit img{
    max-width: 15px;
    position: absolute;
    right: 15%;
    top: 46%;
}
#contact .mv-img img:nth-child(1){position:relative;right: -10%;top: 60px;max-width: inherit;}
#contact .mv-img img:nth-child(2){
    left: 0;
    top: 0;
    max-width: inherit;
}

.thanks{    background: #E9F4FE;text-align:center;}
.thanks .viewport{box-shadow: 0 0 12px rgba(0, 0, 0, .05);background:#fff;padding: 3rem;border-radius:10px;max-width:768px;line-height:2;margin: 50px auto 20px;}
.thanks h1{
    color: #042D61;
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 2px;
    }
.thanks h1 span{position:relative;z-index:2;}
.thanks h1:after{content: 'THANKYOU';
    position: absolute;
    font-size: 5rem;
    letter-spacing: 12px;
    color: #cfe8ff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;}
.thanks a{color:#6ab9b3;}
.thanks .back-btn{background: #6ab9b3;color:#fff;font-weight:bold;padding: 20px 0;font-size:1.2rem;display:block;max-width:300px;margin: 30px auto;border-radius:50px;letter-spacing:1px;}

@media only screen and (max-width: 1024px) {
html{font-size: 14px}
body{  min-width:inherit;}
    .sp{display:block;}

.pc{display:none;}
    .viewport {
    padding: 0 4%;
    max-width: 500px;
    }

    .flex{flex-wrap:wrap;}
     #main-header{position:relative;}
    #main-header .viewport .logo{width:100%;text-align: center;}
    #main-header .viewport{justify-items:center;}
#main-header .btn-dl{position:fixed;bottom: 1%;max-width: inherit;width: 96%;}
    #main-header .viewport .logo img{max-width:180px;}
.mv .flex{flex-direction:column-reverse;margin: 1.2rem 0 3rem;}
    .mv .mv-img{width:100%;}
    .mv .mv-txt{width:100%;}
    .mv .mv-txt2{font-size: 1.4rem;letter-spacing: 1px;margin: 1.2rem auto 2rem;}
    .mv .mv-txt2 strong{font-size:2rem;}
    .mv-txt1 strong {
    font-size: 2rem;
}
.mv .viewport{max-width:500px;}

.mv h1 span{
    font-size: 2.45rem;
}
.mv h1 i{
    font-size: 1rem;
    padding: 2px .5rem;
}

    .mv-txt1{text-align:left;line-height: 1.3;letter-spacing: .5px;font-size: 1.35rem;}
    .points li{width:100%;margin-bottom:3rem;}
.result {
    padding: 4rem 4%;
}
.points{    padding: 4rem 2% 2rem;}
    #contact .flex>div{width:100%;margin-right: 0;}
    #contact .flex form{width:100%;padding: 1.5rem;}
    #contact .flex>div .mv-img{display:none;}
    #contact .txt-recommend{
    margin: 0 0 2rem;
}
    .data{        background: url(../img/bg-mv-sp.jpg) no-repeat center center;
        background-size: cover;}
    .mv {padding: 2rem 0;background: url(../img/bg-mv-sp.jpg) no-repeat center center;background-size: cover;}
    .mv h1{margin: 0 0 1rem;font-size: 1.2rem;letter-spacing: 1px;}
    .points li span {
    font-size: 2.5rem;
    width:4rem;
    height:4rem;
    top: -2rem;
    line-height: 2;
    }
    .points h2:after{
    font-size: 3rem;
    top: 70%;
    }
    .problems {
        padding: 4rem 2% 2rem;
    }
    .problems h2:after {
        font-size: 3rem;
        top: 70%;
    }
    .problems li {
        width: 100%;
        margin-bottom: 3rem;
    }
    .result p {
    padding-bottom: .6rem;
    line-height: 2.3;
    font-size: 1.4rem;
}
    .result p span {
    font-size: 1.8rem;
}
.data .viewport {
    padding: .3rem 1.3rem 2rem;
    overflow: hidden;
    }
    .data .mv-img {
    margin: 0 1.5% 80px;
    left: -3%;
}
    .data h2 {
    font-size: 1.4rem;
    letter-spacing: 0;
    }.data strong {
    font-size: 2.3rem;
    margin: 0 .2rem;
}#contact .flex form dd.name input {
    width: 45%;
}#contact .flex form .submit img {
    right: 9%;
    top: 45%;
}#contact {
    padding:4rem 2% 1rem;
}
    #contact h2:after{font-size:3rem;top: 80%;letter-spacing: 6px;}
.slick-slide img {
   max-height:30px;
   max-width: inherit;
}.logo__img {
    margin: 0 10px;
}
#fixbtn{display: none;}
#fixbtn.hide{display: block;}
    .thanks h1{font-size:1.6rem;}
.thanks h1:after{font-size:3rem;}
.thanks .viewport {margin:20px auto;padding:3rem 1rem;}





}