@charset "utf-8";
/* サイト全体のフォント指定 */
body {
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    }
       /* h2を細字に設定 */
       h1,h2,h3 {font-weight:normal;} 
           /* リスト点なし */
    ul {list-style-type: none;}
    * {
        margin: 0;
        padding: 0;
    }
header img {
    width: 100%;
}
.sec01 {
    width: 100vw;
    padding: 5% 0;
    background: linear-gradient(to top,rgb(0, 2, 117),rgb(25, 27, 180));
    color: white;
    text-align: center;
    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
}
.sec01 h2 {
    width: 70vw;
    text-align: center;
    margin: 5% auto;
    line-height: 2em;
    font-size: 1.8rem;
}
.desc {
    text-align: center;
    align-items: center;
    margin: auto;
    display: grid;
    width: 30vw;
    grid-template-columns: repeat(2,auto);
    row-gap: 20%;
    column-gap: 2%;
}
.desc p {
    font-size: 1.5rem;
}
.text_large {
    font-size: 2rem;
    font-weight: 500;
}
.article {
    width: 65vw;
    margin: 5% auto 0 auto;
    text-align: center;
    display: block;
}
.article p {
    text-align: left;
    margin: 0 0 5% 0;
    font-size: 1.8rem;
    line-height: 1.8em;
    display: inline-block;
}
.hide-tex {
    width: 65vw;
    margin: 0 auto 5% auto;
    text-align: center;
    display: block;
}
.hide-tex p {
    text-align: left;
    margin: 0 0 5% 0;
    line-height: 1.8em;
    display: inline-block;
}
.offer {
    width: 70vw;
    margin: 7% auto 5% auto;
    text-align: center;
}
.offer h2 {
    margin: 5% auto;
    font-family: "Klee One", cursive;
    font-size: 2.4rem;
}
.product {
    object-fit: cover;
    margin: 5% 0 0 auto;
}
.product img {
    width: 100%;
}
.wrap {
    width: 75vw;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1%;
}
.price {
    width: 55vw;
    margin: 5% auto 0 auto;
}
.group {
    width: 55vw;
    margin: 5% auto;
    align-items: center;
    display: flex;
}
.group p {
    width: 20vw;
    font-size: 1.8rem;
    margin: 0 3%;
}
.teiki {
    width: 50vw;
    margin: 0 auto 5% auto;
    display: flex;
}
.teiki p {
    width: 20vw;
    margin: 5% 3%;
    font-size: 1.6em;
    text-align: left;
}
.text_red {
    color: red;
    font-weight: bold;
}
.btn_cv {
    width: 30vw;
    margin: 5% auto;
    text-align: center;
}
.btn {
    width: 30vw;
    margin: 5% auto;
    text-align: center;
}
.btn_cv a,.btn a {
    display: block;
    border: 1px solid rgb(2, 2, 128);
    border-radius: 5px;
    background: rgb(2, 2, 128);
    padding: 2.5%;
    color: white;
    width: 60%;
    font-size: 1.6rem;
    text-decoration: none;
}
.teiki_link {
    width: 50vw;
    margin: 0 auto;
    text-align: center;
    font-size: 1.6rem;
}
.wave {
    width: 100vw;
    text-align: center;
    margin: 5% 0;
}
.sec02 {
    width: 100vw;
    text-align: center;
    color: rgb(6, 77, 170);
    margin: 0 auto;
    padding-bottom: 5%;
}
.sec02 h2,h3,p {
    font-family: "Klee One", cursive;
    font-style: normal;
}
.sec02 h2 {
    font-size: 3rem;
    font-weight: 600;
    margin: 5% auto;
}
.sec02 h3 {
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 2.0em;
    margin: 3% auto;
}
.sec02 p {
    margin: 5% auto;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.0em;
}
.sec03 {
    width: 100vw;
    background-color: rgb(238, 242, 247);
    text-align: center;
    display: flex;
    flex-direction: column;
}
.detail {
    width: 70vw;
    margin: 10% auto 5% auto;
    text-align: center;
}
.detail img {
    width: 80%;
}
.mv {
    margin: 0 0 15% 0;
}
.more {
    width: 50vw;
    margin: 5% auto;
    text-align: center;
}
.more img {
    width: 100%;
}
.video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 20%;
    width: 60%;
    height: 60%;
}
.howto {
    width: 100vw;
    text-align: center;
}
.howto img {
    width: 100%;
}
.step {
    display: block;
}
.step img {
    width: 40vw;
    margin: 5% auto;
    text-align: center;
}
.user {
    width: 100vw;
    text-align: center;
    /* margin: 10% auto 35% auto; */
    margin-bottom: 35%;
}
.user_voice {
    width: 100%;
    margin: 5% auto;
}
.voice_group {
    text-align: center;
    margin: auto;
    display: grid;
    width: 55vw;
    grid-template-columns: repeat(2,auto);
    grid-template-rows: repeat(3,auto);
    row-gap: 15%;
    column-gap: 18%;
}
.voice_left {
    border: 2px solid rgb(6, 77, 170);
    border-radius: 35px;
    padding: 15% 5%;
    height: 70%;
    position: relative;
    top: 35%;
    /* left: 15%; */
}
.voice_right {
    border: 2px solid rgb(6, 77, 170);
    border-radius: 35px;
    padding: 15% 5%;
    height: 70%;
    position: relative;
    top: 35%;
    /* right: -15%; */
}
.voice_text {
    color: rgb(6, 77, 170);
    font-size: 1.4rem;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-top: 5%;
    margin: 5%;
    line-height: 1.8em;
    text-align: left;
}
.user01,.user03,.user05 {
    width: 40%;
    position: absolute;
    top: -5%;
    left: -15%;
}
.user02,.user04,.user06 {
    width: 40%;
    position: absolute;
    top: -2%;
    left: -20%;
}
.era_age {
    float: right;
}
.inquiry {
    text-align: center;
    margin: 10% auto;
}
.inquiry img {
    margin: 10% auto 2% auto;
}
footer {
    width: 88%;
    text-align: center;
    margin: 0 auto 5% auto;
}
footer p {
    font-size: 0.8rem;
}
  .icon {
    width: 35vw;
    text-align: center;
    margin: 10% auto;
    display: flex;
    justify-content: space-around;
  }
  .logo_co {
    width: 40vw;
    text-align: center;
    margin: 2% auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
  }
  .logo_co img {
    width: 100%;
  }
  .link {
    width: 50vw;
    margin: 5% auto;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-around;
  }
  .link a {
    color: rgb(78,78,80);
    text-decoration: none;
  }
  .img_sp {
    display: none;
}
@media screen and (max-width:1290px) {
    .sec01 h2 {
        width: 90vw;
        }
    .desc {
        width: 60vw;
    }
    .article {
        width: 85vw;
    }
    .hide-tex {
        width: 85vw;
    }
    .user {
        margin: 10% auto 50% auto;
    }
    .voice_group {
        width: 85vw;
        row-gap: 10%;
        column-gap: 20%;
    }
}
   /* SP */
   @media screen and (max-width:768px) {
    .img_pc {
        display: none;
    }
    .img_sp {
        display: block;
    }
    .sec01 h2 {
        width: 85vw;
        font-size: 0.8rem;
    }
    .desc {
        width: 70VW;
        display: block;
    }
    .desc p {
        font-size: 0.8rem;
    }
    .text_large {
        font-size: 1.0rem;
    }
    .article p,.hide-tex p {
        font-size: 0.8rem;
    }
    .offer h2 {
        font-size: 1.2rem;
    }
    .wrap {
        grid-template-columns: repeat(1,1fr);
        width: auto;
    }
    .product img {
        width: 70%;
    }
    .price {
        width: 60vw;
        margin: 5% 0;
        text-align: center;
    }
    .group {
        width: 60vw;
        display:block;
    }
    .group p, .teiki p {
        width: 60vw;
        text-align: center;
        font-size: 1.4rem;
    }
    .teiki_link {
        font-size: 0.8rem;
    }
    .teiki {
        width: 60vw;
        margin: 0;
        display: block;
    }
    .btn_cv, .btn {
        width: 50vw;
        text-align: center;
    }
    .btn_cv a, .btn a {
        width: 50vw;
        font-size: 1.0rem;
    }
    .sec02 {
        width: 90vw;
    }
    .sec02 h2, .sec02 h3 {
        font-size: 1.0rem;
        font-weight: 700;
    }
    .sec02 p {
        font-size: 0.8rem;
        font-weight: 600;
    }
    .detail {
        width: 85vw;
    }
    .detail img {
        width: 100%;
    }
    .step img {
        width: 60vw;
    }
    .voice_group {
        width: 85vw;
        margin: 0 auto;
        column-gap: 10%;
    }
    .voice_text {
        font-size: 0.8rem;
    }
    .voice_left,.voice_right {
        left: 0;
        right: 0;
        height: 80%;
    }
    .voice img {
        width: 50%;
    }
    .user01,.user03,.user05 {
        top: -10%;
        left: -15%;
    }
    .user02,.user04,.user06 {
        top: -10%;
        left: -20%;
    }
    .inquiry img {
        width: 50%;
        margin: 15% auto 2% auto;
    }
    .icon,.logo_co,.link {
        width: 70vw;
    }
    .icon img {
        width: 50%;
    }
    footer p, .link {
        font-size: 0.5rem;
    }
   }