@charset "utf-8";
body{   
font-family: "nobel","Noto Sans JP", sans-serif;
font-weight: 400;
color: var(--dark-color);
}

a{
    text-decoration: none; 
    color: var(--dark-color);
}
ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.up{
    text-transform: uppercase;
}

img{
    width: 100%;
}


    /* --------------
    共通部分
    -------------- */
    main{
        position: relative;
    }

    .main-bg{
        /* background-color: #c3f1f6; */
        background-image: url(../images/グレープフルーツa.jpg),url(../images/フルーツ.jpg);
        background-size: 50% auto,50% auto;
    /*1枚目の画像を左上、2枚目の画像を右下に配置*/
    background-position: left top,right bottom;
    /*2枚の画像をいずれも繰り返さないよう指定*/
    background-repeat: no-repeat,no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: -1;
    }
    .main-contents{
        width: min(100vw, 600px);
        background: #fff;
        max-width: 100%;
        margin: 0 auto;
    }

    .container{
        width: 84%;
        margin: 0 auto;
    }

    :root{
        --dark-color:#161a14;
        --blue-color:#e5f1f9;
        --gray-color:#f2f0ed;
        --bold-color:#525252;
        --heading:50px;
    }

    h2{
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding-bottom: 8px;
    }
    h3{
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.05em;
    }

    h4{
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.06em;
        padding-left: 6px;
        color: var(--bold-color);
    }

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

    .heading p{
        font-size: 14px;
        letter-spacing: 0.05em;
    }

    .subheading{
        font-size: 14px;
        letter-spacing: 0.08em;
        font-weight: 600;
        color:var(--bold-color);
        }

    .text{
        font-size: 12px;
        letter-spacing: 0.09em;
        line-height: 1.75;
        padding-top: 15px;
    }

    small{
        font-size: 10px;
        letter-spacing: 0.04em;
        font-weight: 200;
        display: flex;
        justify-content: center;
    }

    .pc{
        display: none;
    }

    /*----------------------jQuery----------------------*/

    .fade-in{
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        transition: opacity 1s ease .1s, transform 1s ease .1s, -webkit-transform 1s ease .1s;
    }

    .fade-right{
        transform: translate3d(30px, 0, 0);
    }

    .scroll-in{
        opacity: 1;
        transform: translate(0,0);
    }
    
    .show {
        transition: 1s;
        transform: translate3d(0, 0, 0);
    }

    /* --------------
    ヘッダー
    -------------- */
    header{
        width: 100%;
        background-color: #fff;
    }
    
    header > .container{
        display: flex;
        justify-content: space-between;
        padding: 25px 0;
    }
    
    header img{  /* ロゴ */
        height: 19px;
        width: auto;
        
    }

    .hamburger{
        width: 40px;
        height: 20px;
        cursor: pointer;
        z-index: 9999;
        position: relative;
    }

    .hamburger span{
        display: inline-block;
        width: 100%;
        height: 1.3px; /* 三本線の太さ */
        border-radius: 10px;
        background-color: var(--dark-color); /* 三本線の色 */
        position: absolute;
        transition: all .6s;
    }

    .hamburger span:nth-of-type(1) {
        top:0px
    }

    .hamburger span:nth-of-type(2) {
        top:10px
    }

    .hamburger span:nth-of-type(3) {
        top:20px
    }

 /* --------------
    ナビゲーション
    -------------- */
   .menu{
    width: 100%;
    height: 100%;
    background-color: #DFE9F0;
    z-index: 999;
    position: fixed;
    top: -100%;
    left: 0;
    transition: all .6s;
    color: var(--dark-color);
   } 

   .menu .container{
    padding-top: 35%;
    width: max(77vw, 315px); 
    margin: 0 auto;
     }

   .menu li{
    padding-bottom: 35px;
   }

   .menu li:nth-of-type(5){
    padding-bottom: 0px;
   }

   .menu a{
    font-size: max(4.2vw, 21px);
    letter-spacing: 0.05em;
    line-height: 1;
   }

   .menu span{
    font-size: max(2.0vw, 11px);
    padding-left: max(4vw, 15px);
   }

    .menu .sns{
        padding-top: 90px;
        padding-bottom: 50px;
        display: flex;
        justify-content: space-between;
        width: 150px;
        /* margin: 0 auto; */
    }
    .menu img{
        height: 35px;
        width: 35px;
    }

   
    /* activeが付いているとき */
    .menu.active{
        top: 0;
        z-index: 9990;
    }

    .hamburger.active span:nth-of-type(1) {
        transform: translate(-11px,10px) rotate(-45deg);
    }

    .hamburger.active span:nth-of-type(2) {
        display: none;
    }

    .hamburger.active span:nth-of-type(3) {
        transform: translate(-11px,-10px) rotate(45deg);
    }

    /* --------------
    ファーストビュー
    -------------- */
    .hero{
        position: relative;
    }
    .hero img{
        width: 100%;
        height: auto;
    }

    .copy{
        writing-mode: vertical-rl; /* 縦書き設定（右から左に行が流れる） */
        position: absolute;
        top: 18%;
        left: 8%;   
    }

    h1{
        font-size: max(5.4vw, 20px);
        letter-spacing: 0.08em;
        line-height:1.8;
        font-weight: 500;
    }

    .text-bgc{
        background: #fffdfd;
        padding: 10px 4px 10px 0px;
    }

    /* --------------
    固定バー
    -------------- */

    .fixed{
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index:1000;
    }

    .fixed a {
        width: 100%;
        height: 67px;
        display: block;
        position: relative;
        background-image: linear-gradient(
        90deg,
        hsl(325deg 67% 90%) 0%,
        hsl(313deg 53% 87%) 6%,
        hsl(295deg 45% 84%) 13%,
        hsl(277deg 53% 83%) 24%,
        hsl(261deg 60% 82%) 41%,
        hsl(261deg 60% 82%) 61%,
        hsl(277deg 53% 83%) 76%,
        hsl(295deg 45% 84%) 86%,
        hsl(313deg 53% 87%) 94%,
        hsl(325deg 67% 90%) 100%
    );
    }

    .fixed a .label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50%), -50%);
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.03em; 
        width: 100%;
        display: block;
        text-align: center
    }

    /* --------------
    メリット紹介
    -------------- */
    .advantage .container{
        padding-top: var(--heading);
    }

    .advantage .wrapper{
        width: 315px;
        margin: 0 auto;
    }

    .advantage .item{
        display: flex;
        font-size: 16px;
        padding:20px 0px;
        border-top: 1px solid #666666 ;
    }

    .advantage .item:nth-of-type(3){
        border-bottom: 1px solid #666666 ;
    }

    .advantage .numbar{
        font-family: "nobel";
        font-weight: 500;
        letter-spacing: 0.08em;
        padding-left: 19px;
    }
   
    .advantage h4{
        letter-spacing: 0.04em;
        font-weight: 400;
        line-height: 1.5;
        padding-left: 20px;
        width: 75%;
    }




    /* --------------
    こんな方にオススメ
    -------------- */

    .recommend .container{
        padding-top: var(--heading);
    }

    .recommend .heading{
        padding-bottom: 10px;
    }

    .recommend .wrapper{
        width: 260px;
        margin: 0 auto;
    }

    .recommend .item{
        padding-bottom: 20px;
        text-align: center;
    }

    .recommend .item:nth-of-type(3){
        padding-bottom: 0;
    }

    .img-center {
        display: flex;
        justify-content: center;
        padding-top: 35px;
        padding-bottom: 20px;
    }

    .recommend .subheading{
        font-weight: 500;
        letter-spacing: 0.07em;
        font-size: 15px;
    }

    .recommend .point{
        font-size: 12px;
        background-color: #be92c9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border-radius: 20px;
        padding: 4px 20px;
        margin-top: 15px;
    }
    
    .recommend .point p{
        line-height: 1.9;
        letter-spacing: 0.08em;
        color: #fff;
    }

    .recommend .text{
        letter-spacing: 0.05em;
        line-height: 1.7;
        padding-top: 10px;
    }

/* --------------
    ご利用の流れ
    -------------- */

    .usageflow{
        padding-bottom: 46px;
    }

    .usageflow .container{
        padding-top: var(--heading);
        width: 80%;
    }

    .usageflow .heading{
        padding-bottom: 30px;
    }

    .usageflow .wrapper{
        width: 92%;
        margin: 0 auto;
    }

    .flow-ct{
        height: 300px; /* コンテンツ背景の高さ */
        margin-bottom: 25px;
    }

    .flow-ct:nth-of-type(3){
        margin-bottom: 0;
    }

    .flow-bgt{ /* 上部分白背景 */
        height: 57%;
        width: 100%;
        border-top-left-radius: 36px;
        border-top-right-radius:36px;
        padding-top: 15%;
        border: 1px solid #ddd;
    }

    .flow-bgb{ /* 下部分グラデ背景 */
        height: 42%;
        width: 100%;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius:36px;
        border: 1px solid #ddd;
        background-color: #efefef;
    }

    .flow-wp{
        width: 78%;
        margin: 0 auto;
    }

    .flow-sh{
        display: flex;
        align-items: center; 
        background-color: #efefef;
        border-radius: 15px;
        padding: 3px 0 3px 15px;
        color: #6e6e6e;
    }

    .flow-sh span{
        font-size: 16px;
        font-weight: 500;
        background-color: #f9f9f9;
        border-radius: 50%;
        height: 21px;
        width: 21px;
        text-align: center;
        line-height: 1.45;
    }

    .flow-sh p{
        font-size: 14px;
        letter-spacing: 0.1em;
        padding-top: 3px;
        padding-left: 10px;
        font-weight: 600;
    }

    .flow-img{
        width: 30%;
        margin: 0 auto;
        padding-top: 8%;
    }

    .flow-text{
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.1em;
        line-height: 1.7;
        color: #6e6e6e;
        width: 77%;
        margin: 0 auto;
        padding-top: 10%;
    }

    .ct2 .flow-img{ /* 2番目のコンテンツ */
        width: 70%;
        padding-top: 12%;
    }

    .ct2 .flow-bgb{ /* 下部分グラデ背景 */
        height: 43%;
    }

    .ct3 .flow-img{ /* 3番目のコンテンツ */
        width: 67%;
        padding-top: 12%;
    }
    .ct3 .flow-bgb{ /* 下部分グラデ背景 */
        height: 58%;
    }

    /* --------------
    料金プラン
        -------------- */
    .priceplan {
        padding-top: var(--heading);
    }

    .priceplan .heading{
        padding-bottom: 20px;
    }

    .priceplan .bgc{
        background-color: #d9dadb;
        padding: 50px 0;
    }

    /* --------------
    ご登録方法
        -------------- */
    /* .howtoregister .container{
        padding-top: 40px;
    }

    .howtoregister .heading{
        padding-bottom: 45px;
    }

    .howtoregister .wrapper{
        width: 315px;
        margin: 0 auto;
    }

    .howtoregister .item{
        display: flex;
        padding-bottom: 35px;
    }

    .howtoregister .item:nth-of-type(3){
        padding-bottom: 0;
    }

    .howtoregister .left{
        width: 160px;
        padding-top: 3px;
    }

    .howtoregister .subheading{
        display: flex;
        font-size: 16px;
        line-height: 1.1;
    }

    .howtoregister .text{ 
        font-size: 12px;
        letter-spacing: 0.07em;
        line-height: 1.7;
        width: 150px;
        padding-top: 15px;
    }

    .howtoregister .right{
        padding-left: 20px;
    }

    .howtoregister img{
        width: 125px;
    } */

  /* --------------
    よくあるご質問
    -------------- */

.qa .container{
    padding-top: var(--heading);
    padding-bottom: var(--heading);
}

.qa .heading{
    padding-bottom: 20px;
}

.qa .wrapper{
    background-image: linear-gradient(55deg,
    hsl(202deg 21% 90%) 0%,
    hsl(202deg 21% 89%) 0%,
    hsl(202deg 22% 89%) 4%,
    hsl(202deg 23% 88%) 10%,
    hsl(202deg 23% 88%) 18%,
    hsl(202deg 24% 87%) 29%,
    hsl(202deg 24% 87%) 41%,
    hsl(202deg 25% 87%) 54%,
    hsl(202deg 25% 86%) 66%,
    hsl(202deg 25% 86%) 78%,
    hsl(202deg 26% 85%) 88%,
    hsl(202deg 26% 85%) 95%,
    hsl(202deg 27% 84%) 99%,
    hsl(202deg 27% 84%) 100%);
    max-width: 360px;
    margin: 0 auto;
    border-radius: 12px;
}

.qa dl{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.qa .item{
    background-color: #fff;
    width: min(72vw, 310px);
    height: 174px;
    margin-bottom: 30px;
    border-radius: 12px;
}

.qa .inner{
    width: 225px;
    margin: 0 auto;
}

.qa dt{
    display: flex;
    align-items: center;
    padding-top: 20px;
    
}

.qa span{
    font-size: 25px;
    padding-right: 18px;
}

.qa dd{
    display: flex;
    padding-top: 15px;
    line-height: 1.6;
}

.qa dd span{
    line-height: 1;
}

/* --------------
    フッター
    -------------- */
footer{
    background-color: #ededed;
    padding-bottom: 30px;
    margin-bottom: 66px;
}

footer .logo{
    width: 150px;
    margin: 0 auto;
    padding: 50px 0 35px 0;
}

footer nav{
    width: 285px;
    margin: 0 auto;
}

footer ul{
    font-size: 12px;
    letter-spacing: 0.09em;
    display: flex;
}
footer .line{
  width: 100px;
}

footer li{
    height: 25px;
}

footer .sns{
    padding-top: 20px;
    padding-bottom: 25px;
    display: flex;
    justify-content: space-between;
    width: 135px;
    margin: 0 auto;
}

footer .sns img{
    height: 30px;
    width: 30px;
}

/* ------------------------------------------
    レスポンシブ
    ------------------------------------------ */
     /* --------------画面サイズ374px以下のメディアクエリ --------------*/
     @media screen  and (max-width: 374px){

        /* --------------
        メリット紹介
        -------------- */

        .advantage .wrapper{
            width: 260px;
        }

        /* --------------
        ナビゲーション
        -------------- */

        .menu .container{
            width: max(72vw, 280px); 
            }

        .menu li{
            padding-bottom: 30px;
        }

        /* --------------
        ご利用の流れ
        -------------- */

        .flow-ct{
            height: 280px;
        }

        .flow-sh{
            padding: 4px 0 4px 10px;
        }

        .flow-sh p{
            font-size: 13px;
        }

        /* 下部分グラデ背景 */
        .ct3 .flow-bgb{
            height: 60%;
        }

     }

       /* --------------画面サイズ412px以上のメディアクエリ --------------*/
       @media screen  and (min-width: 412px){
        /* --------------
        ご利用の流れ
        -------------- */

        .flow-ct{
            height: 320px;
        }

        .flow-sh{
            width: 92%;
            margin: 0 auto;
            padding: 4px 0 4px 13px;
        }

        /* 下部分グラデ背景 */
        .ct3 .flow-bgb{ 
            height: 52%;
        }

    }
    

     /* --------------画面サイズ430px以上のメディアクエリ --------------*/
     @media screen  and (min-width: 430px){
        /* --------------
        ご利用の流れ
        -------------- */

        /* 下部分グラデ背景 */
        .flow-bgb{ 
            height: 44%;
        }

        .flow-sh{
            width: 92%;
            margin: 0 auto;
            padding: 4px 0 4px 20px;
        }

        .ct2 .flow-bgb{ /* 下部分グラデ背景 */
            height: 44%;
        }

        .ct3 .flow-bgb{ /* 下部分グラデ背景 */
            height: 53%;
        }
     }
    


     /* --------------画面サイズ720px以下のメディアクエリ --------------*/
     @media screen  and (max-width: 720px){
        .main-contents{
            width: 100%;
     }
    }
    /* --------------タブレットサイズ721px以上のメディアクエリ --------------*/
    @media screen  and (min-width: 721px){
        .main-contents{
            width: 600px;
        }


        /* --------------
        ファーストビュー
        -------------- */

        h1{
            font-size: 32px;
            letter-spacing: 0.08em;
            line-height:1.8;
            font-weight: 500;
        }

        /* --------------
        共通部分
        -------------- */

        h2{
            font-size: 40px;
            padding-bottom: 10px;
        }

        .heading p {
            font-size: 18px;
        }
    
        .text{
            font-size: 14px;
            letter-spacing: 0.09em;
            line-height: 1.75;
            padding-top: 15px;
        }
        
        small{
            font-size: 12px;
        }

        /* --------------
        ナビゲーション
        -------------- */
        .menu a{
            font-size: max(4.2vw, 21px);
            letter-spacing: 0.05em;
            line-height: 1; 
        }
        .menu .container{
            padding-top: 30%;
            width: max(72vw, 500px); 
            margin: 0 auto;
            }

        .menu li{
            padding-bottom: 40px;
        }


        .menu span{
            font-size: max(2.4vw, 15px);
            padding-left: max(5vw, 15px);
        }

        .menu .sns{
            padding-top: 150px;
            padding-bottom: 100px;
            display: flex;
            justify-content: space-between;
            width: 150px;
        }


        /* --------------
        メリット紹介
        -------------- */

        .advantage .wrapper{
            width: 370px;
        }

        .advantage .item{
            font-size: 18px;
            padding:22px 0px;
        }

        .advantage .numbar{
            padding-left: 25px;
        }

        .advantage h4{
            font-size: 18px;
            padding-left: 22px;
        }
        
        /* --------------
        こんな方にオススメ
        -------------- */
        
        .recommend .subheading{
            font-size: 18px;
            letter-spacing: 0.06em;
        }

        .recommend .wrapper{
            width: 330px;
        }

        .recommend .item{
            padding-bottom: 25px;
        }

        .recommend img{
            width: 100%;
        }

        .recommend .text {
                padding-top: 12px;
        }

        .recommend .point{
            font-size: 14px;
        }

        /* --------------
        ご利用の流れ
        -------------- */

        .usageflow{
            padding-bottom: 78px;
        }

        .usageflow .wrapper{
            width: 70%;
        }

        .flow-ct{
            margin-bottom: 63px;
        }

        /* 上部分白背景 */
        .flow-bgt{ 
            height: 63%;
            padding-top: 14%;
        }

        /* 下部分グラデ背景 */
        .flow-bgb{ 
            height: 44%;
        }

        .flow-sh{
            padding: 4px 0 4px 15px;
            width: 90%;
        }

        .flow-sh span{
            font-size: 18px;
            height: 22px;
            width: 22px;
            line-height: 1.25;
        }

        .flow-sh p{
            font-size: 16px;
            letter-spacing: 0.07em;
            padding-top: 3px;
            padding-left: 10px;
            font-weight: 600;
        }
        .flow-text{
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.08em;
            line-height: 1.6;
            color: #666464;
            width: 74%;
        }

        .ct2 .flow-bgb{ /* 下部分グラデ背景 */
            height: 44%;
        }

        .ct3 .flow-bgb{ /* 下部分グラデ背景 */
            height: 61%;
        }

        /* --------------
        よくあるご質問
        -------------- */

        .qa .wrapper{
            max-width: 380px;
        }

        .qa dl{
            font-size: 16px;
        }

        .qa .item{
            width: min(72vw, 320px);
            height: 183px;
            margin-bottom: 35x;
        }

        .qa .inner{
            width: 250px;
        }

        .qa dt{
            padding-top: 22px;

        }

        .qa span{
            font-size: 28px;
            padding-right: 20px;
        }

        /* --------------
        フッター
        -------------- */
        footer .container{
            width: 45%;
        }

        footer nav{
            width: 100%;
        }

        footer ul{
            font-size: 14px;
        }
        
        footer .line{
        width: 120px;
        }

        footer li{
            height: 28px;
        }

        footer .sns{
            padding-top: 25px;
            padding-bottom: 30px;
        }


    }
        
    /* --------------タブレットサイズ1024px以上のメディアクエリ --------------*/
    @media screen  and (min-width: 1024px){

        /* --------------
        ナビゲーション
        -------------- */
        .menu a{
            font-size: min(4.2vw, 34px);
            letter-spacing: 0.05em;
            line-height: 1; 
        }
        
        .menu .container{
            padding-top: 9%;
            width: max(62vw, 500px);
            }

        .menu span{
            font-size: min(2.4vw, 18px);
            padding-left: min(5vw, 40px);
        }

        .menu .sns{
            padding-top: 80px;
            padding-bottom: 100px;
        }

        /* --------------
        固定バー
        -------------- */

        .fixed{
            position: static;
            top: auto;
            right: 0;
            bottom: 0;
            left: 0;
            z-index:1000;
        }
            
        /* --------------
        フッター
        -------------- */

        footer{
            margin-bottom: 0;
        }

        footer .logo{
            width: 260px;
            margin: 0 auto;
            padding: 50px 0 35px 0;
        }

        footer .line{
        width: 160px;
        }
    } 

    /* --------------タブレットサイズ1280px以上のメディアクエリ --------------*/
    @media screen  and (min-width: 1280px){
        /* --------------
        共通部分
        -------------- */
    
        .sp-tb{
        display: none;
        }

        .pc{
            display: flex;
            justify-content: space-between
            ;
        }

        /* --------------
        フッター
        -------------- */

        footer .container{
            width: 50%;
        }
        footer .logo{
            width: 260px;
        }

        footer nav{
            width: 100%;
        }

        footer .sns{
            padding-top: 25px;
            padding-bottom: 45px;
        }
        
    }