body{
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100%;
    margin-right: auto;
    margin-left : auto;
    margin-top: 0;
    margin-bottom: 0;
    color: #2d2d2d;
}


header{
    z-index: 10000;
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    height: 8vw;
    img{
        height: 10vw;
        width: auto;
        margin: 0.5vw;
        margin-left: 3vw;
    }
    a{
        text-decoration: none;
    }
    ul{
        margin: 0vw;
        padding: 0;
        margin-top: 1.5vw;
        margin-left: 1vw;
    }
    li{
        list-style: none;
        display: inline;
        font-size: 1.5vw;
        font-weight: bold;
        margin-left: 3vw;
        line-height: 8vw;
        color: #2d2d2d;
    }
}

footer{
    width: 100%;
    img{
    height: 4vw;
    width: auto;
    margin-top: 2.5vw;
    margin-left: 3vw;
    }
    a{
    text-decoration: none;
    color: inherit;
    height: 6vw;
    }
    h1{
        font-size: 1vw;
        font-weight: lighter;
        margin-left: 3vw;
        color: #2d2d2d;
    }
    .company{
        margin-bottom: 2vw;
    }
}

#first-view{
    height: 60vw;
    img{
        width: 100vw;
        height: auto;
        margin-top: -8vw;
        margin-right: 0vw;
    }
    h1{
        position: absolute;
        font-size: 5.5vw;
        font-weight: lighter;
        width: 50vw;
        margin-top: -42vw;
        margin-left: 10vw;
    }
    h3{
        position: absolute;
        font-size: 2.5vw;
        font-weight: lighter;
        margin-top: -7vw;
        margin-left: 9.2vw;
    }
    .hexagon-yoko{
        position: absolute;
        display: flex;
        margin-top: -20vw;
        margin-left: 8vw;
        .hexagon {
        /* pointy-top 六角形用：幅と高さを入れ替え */
        width: 12vw;    /* もともとの height */
        height: 13.5vw;     /* もともとの width */

        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        background-color: #0070c0;
        color: #fff;
        margin: 0 2vw;
        margin-top: -2vw;
        font-size: 2vw;
        font-weight: 600;
        line-height: 1.2;

        /* 頂点が上下になる六角形のクリッピング */
        clip-path: polygon(
            50% 0%,    /* 上頂点 */
            100% 25%,  /* 右上辺 */
            100% 75%,  /* 右下辺 */
            50% 100%,  /* 下頂点 */
            0% 75%,    /* 左下辺 */
            0% 25%     /* 左上辺 */
        );
        -webkit-clip-path: polygon(
            50% 0%,
            100% 25%,
            100% 75%,
            50% 100%,
            0% 75%,
            0% 25%
        );
        }
    }
    .button{
    position: absolute;
    width: 40vw;
    height: 5vw;
    text-align: center;
    font-size: 3vw;
    color: #fff;
    background-color: #0070c0;
    border-radius: 5px;
    margin-top: 0.5vw;
    margin-left: 30vw;
    line-height: 5.5vw;
    }
}

#client{
    img{
        width: 95vw;
        height: auto;
    }
    .white{
        margin: 8vw auto;
        text-align: center;
        h1{
            font-size: 2vw;
            font-weight: lighter;
            margin-bottom: 0;
        }
        h2{
            font-size: 3.5vw;
            font-weight: lighter;
            margin: 0;
        }
        hr{
            margin-top: 0vw;
        }
        .text-yoko{
            display: flex;
            margin-top: 5vw;
            margin-left: 8vw;
            .text-tate{
                width: 22vw;
                margin: 0 3vw;
                h3-1{
                    font-size: 1.5vw;
                    font-weight: bold;
                    color: #fff;
                    background-color: #2d2d2d;
                    border-radius: 30px;
                    padding: 0.5vw 0.6vw;
                }
                h3-2{
                    font-size: 3.5vw;
                    font-weight: bold;
                }
                h3-3{
                    font-size: 1.5vw;
                    font-weight: bold;
                    width: 20vw;
                }
                h3-4{
                    font-size: 1vw;
                    text-align: left;
                    padding: 0 2vw;
                }
            }
        }
    }
    .glay{
        text-align: center;
        padding: 3vw;
        h1{
            font-size: 3.5vw;
            font-weight: lighter;
            margin-bottom: 0;
        }
        h2{
            font-size: 2.5vw;
            font-weight: lighter;
            margin-top: 0;
        }
    }
}

#feature{
    height: 125vw;
    text-align: center;
    margin: 8vw 0;
    .white{
        height: 90vw;
        img{
        width: 90vw;
        height: auto;
        position: absolute; 
        margin-left: -46vw; 
        margin-top: -10vw;
    }
    }
    h1{
        font-size: 3.5vw;
        width: 97vw;
        background-color: #4a92c5;
        color: #fff;
        padding: 1.5vw;
    }
    h2{
        font-size: 5vw;
        margin-top: 7vw;
        margin-bottom: 2vw;
    }
    h3{
        font-size: 2.5vw;
        font-weight: lighter;
        margin-bottom: 7vw;
    }
    h4{
        font-size: 3.5vw;
        margin-top: 10vw;
    }
    h5{
        font-size: 2vw;
        font-weight: lighter;
        margin-top: 33vw;
    }
    .text-yoko{
        display: flex;
        margin-left: 19.5vw;
        h3{
            margin: auto 5vw;
        }
    }
    .glay{
        height: 80vw;
        img{
            width: 90vw; 
            height: auto; 
            margin-top: 10vw;
        }
    .yoko{
        display: flex;
        position: relative;
        margin-left: 32vw;
        margin-top: 15vw;
        img{
            width: 8vw;
            height: auto;
            margin: 5vw;
        }
    }
    .yoko2{
        display: flex;
        position: relative;
        margin-top: -30vw;
    }
    .reason-glay{
        width: 30vw;
        margin: 0 5vw;
        h1{
            font-size: 2vw;
            font-weight: lighter;
            background-color: #aaaaaa;
            color: #fff;
            width: 20vw;
            padding: 0.5vw 1.5vw;
        }
        h2{
            text-align: left;
            font-size: 1.5vw;
            font-weight: lighter;
            margin: 0;
        }
        h3{
            text-align: left;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-color: #d5d5d5;
            text-decoration-thickness: 5px;
            font-size: 1.8vw;
            font-weight: lighter;
            margin: 0;
        }
    }
    .reason-blue{
        width: 30vw;
        margin: 0vw;
        margin-left: 28vw;
        h1{
            font-size: 2vw;
            font-weight: lighter;
            background-color: #0070c0;
            color: #fff;
            width: 20vw;
            padding: 0.5vw 1.5vw;
        }
        h2{
            text-align: left;
            font-size: 1.5vw;
            font-weight: lighter;
            margin: 0;
        }
        h3{
            text-align: left;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-color: #70a6cc;
            text-decoration-thickness: 5px;
            font-size: 1.8vw;
            font-weight: lighter;
            margin: 0;
        }
    }
    }
}

#portfolio{
    height: 120vw;
    h1{
        text-align: center;
        margin-top: 5vw;
        margin-bottom: -35vw;
        font-size: 4vw;
        font-weight: lighter;
    }
    img{
        position: absolute;
        width: 50vw;
        height: auto;
        margin-top: -68vw;
        margin-left: 45vw;
    }
    a{
        text-decoration: none;
    }
    .button{
        width: 40vw;
        height: 5vw;
        text-align: center;
        font-size: 3vw;
        color: #fff;
        background-color: #0070c0;
        border-radius: 5px;
        margin-top: 63vw;
        margin-left: 30vw;
        margin-bottom: 8vw;
        line-height: 5.5vw;
    }
    hr{
        width: 80vw;
        color: transparent;
        size: 0.1px;
        box-shadow: 0px 3px 3px 0px #a6a6a6;
    }
    .example{
        width: 40vw;
        margin-top: 43vw;
        margin-left: 10vw;
        h1{
            text-align: left;
            font-size: 2.5vw;
            font-weight: lighter;
            background-color: #0070c0;
            width: fit-content;
            padding: 0 2vw;
            color: #fff;
            margin: 0;
            margin-bottom: 2vw;
        }
        h2{
            text-align: left;
            font-size: 1.8vw;
            font-weight: lighter;
            margin: 0;
        }
        h3{
            text-align: left;
            font-size: 2vw;
            font-weight: lighter;
            margin: 0;
        }
        h4{
            text-align: left;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-color: #70a6cc;
            text-decoration-thickness: 5px;
            font-size: 2vw;
            font-weight: lighter;
            margin: 0;
        }
        .example2{
            margin-top: 17vw;
        }
    }
    }

#plan{
    .glay{
        height: 65vw;
        h1{
            text-align: center;
            font-size: 3.5vw;
            font-weight: lighter;
            padding-top: 5vw;
            margin-bottom: -8vw;
        }
        img{
            width: 70vw;
            height: auto;
            margin-top: 12vw;
            margin-left: 15vw;
        }
    }
}

#flow{
    .white{
        height: 55vw;
        h1{
            text-align: center;
            font-size: 3.5vw;
            font-weight: lighter;
            padding-top: 3vw;
        }
        img{
            width: 80vw;
            height: auto;
            margin-top: 0vw;
            margin-left: 10.5vw;
        }
    }
}

#faq{
    .white{
        height: 72vw;
        margin: 15vw auto;
        h1{
            text-align: center;
            font-size: 3.5vw;
            font-weight: lighter;
            padding-top: 5vw;
            margin-top: -15vw;
        }
    }
    .question{
        width: 90vw;
        height: 13vw;
        background-color: #fff;
        border-radius: 40px;
        border: 2px solid;
        border-color: #0070c0;
        margin: 4vw 5vw;
        p{
            font-size: 3vw;
            margin-left: 4vw;
            margin-top: 2.8vw;
            margin-bottom: 0;
        }
        p1{
            font-size: 2vw;
            margin-left: 4.2vw;
        }
    }
}

#form{
    .glay{
        height: 90vw;
    }
}

.card{
    .white{
        background-color: #fff;
    }
    .glay{
        background-color: #f1f1f1;
    }
}


.form {
    margin-top: 8vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4.9vw;
    width: 90vw;
    h1{
        text-align: center;
        font-size: 3.5vw;
        font-weight: lighter;
        padding-top: 4vw;
    }
    p{
        font-size: 2vw;
        font-weight: lighter;
    }
}

.Form-Item {
padding-top: 24px;
padding-bottom: 24px;
margin: 0 auto;
width: 80%;
display: flex;
align-items: center;
}

.Form-Item-Sub{
text-align: left;
.check{
    margin: 1vw 0;
    margin-left: 3vw;
    margin-right: 1vw;
}
}

.Form-Item-Label {
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 18px;
text-align: left;
}

.Form-Item-Label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}

.Form-Item-Label-Required {
border-radius: 6px;
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
width: 48px;
display: inline-block;
text-align: center;
background: #b41f24;
color: #fff;
font-size: 14px;
}


.Form-Item-Input {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 5vw;
flex: 1;
width: 80%;
background: #fff;
font-size: 18px;
}

.Form-Item-Textarea {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 15vw;
flex: 1;
width: 80%;
background: #fff;
font-size: 18px;
}

.Form-Btn {
border-radius: 30px;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
width: 280px;
display: block;
letter-spacing: 0.05em;
background: #0070c0;
color: #fff;
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: bold;
font-size: 20px;
}