@charset "UTF-8";

@media screen and (max-width:700px){
    /*スマホ用CSSここから*/
    img {
        width: 100%; /* 親要素の幅いっぱいに */
        height: auto; /* 縦横比を維持 */
        object-fit: cover; /* はみ出す部分を切り取り */
    }
    .hero{
        /*background-color: aqua;*/
        background-image: url(../image/first\ view\ _s.png);
        background-position: 100%;
        text-align: center;
        padding: 30vh 7vh;
        max-width: 700px;
        min-height: 853px;
    }

    .first{
        width: 305px;
        height: 184px;
        outline: 1px solid #64495E; /* 枠線の太さ、種類、色を指定 */
        outline-offset: -15px;
        text-align: center;
    }
    
    .first .title{
        font-size: 32px;
        margin-bottom: 0;
        padding-top: 42px;
    }
    h4{
        font-size: 15px;
        margin-bottom: 5px;
    }
    .first h4{
        margin-bottom: 8px;
    }
    .first p{
        font-size: 14px;
    }    
    .btn1{
        width: 269px;
        height: 49px;
        font-size: 15px;
        /* 5.クリックできることを示すためのカーソルポインターを設定 */
        cursor: pointer;
        margin-top: 50px;
        margin-left: 12px;
    }

    .hero .btn1{
        margin-top: 45px;
    }

    .cta-btn{
        position: fixed;  /*ブラウザ画面に対して固定する。スクロールしない*/
        right: .5em;
        bottom: 6.4em;    /*下から*/
        opacity: 0.9; /*透明度*/
    }
    
    .gotoTop{
        display: block;
        /*text-decoration: none;*/
        position: fixed;
        right: .5em;
        bottom: .1em;
        opacity: 0.9;
    }

    .cta-btn img,
    .gotoTop img{
        width: 6em;
    }

    /*コンセプト*/

    .concept{
        height: 530px;
    }

    .wrapper{
        width: 80%;
        padding-top: 50px;
    }
    .row{
        display: block;
        padding-bottom: 50px;
    }

    h2{
        font-size: 32px;
    }

    .concept h5{
        font-size: 18px;
    }
    h5{
        padding-bottom: 15px;
    }

    p{
        font-size: 12px;
    }
    .concept-img{
        padding-left: 0px;
        padding-top: 20px;
    }

    /*プロダクト*/

    .product .wrapper{
        padding-top: 60px;
        width: 75%;
    }

    .product{
        outline: 2px solid #64495E; /* 枠線の太さ、種類、色を指定 */
        outline-offset: -30px;
        height: 1950px;
    }

    .product-t h5{
        font-size: 22px;
        padding-bottom: 35px;
    }
    .product-img{
        padding-right: 0px;
    }

    h3{
        font-size: 30px;
    }
    h5{
        font-size: 16px;   
    }

    .product .btn1{
        margin: 0px auto 40px;
    }

    /*活用シーン*/
    .use{
        height: 1250px;
    }
    .use .wrapper{
        width: 60%;
    }
    .use h2{
        padding-top: 40px;
        margin-bottom: 30px;
    }
    .use-img{
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .use-text{
        text-align: center;
        margin-left: 0px;
    }
    .use p{
        font-size: 15px;
        padding-bottom: 50px;
    }

    .note{
        width: 85%;
    }

    /*スマホ用CSSここまで*/
    }