/* 全ページに適用 -html- */
html {
    font-size: 2vw;
    font-family: sans-serif;
    scroll-behavior: smooth;
    max-width: 100%;
}
* {
    box-sizing: border-box;
    /*outline: solid 2px blue;*/
}
body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color: #ffffff;
}
p, li, td {
    line-height: 1.7;
}
a:link {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
}
a:visited {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
}
a:active {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
}
img {
    max-width: 100%;
}
.wrapper {
    width: 92vw;  
    margin: 0 4vw 0 4vw;
}
h1 {
   font-size: 3vw;
   margin: 0 0 0 0;
   width: 98vw;
}
h2 {
    font-size: 3vw;
}
h3 {
    font-size: 3vw;
}
h4 {
    font-size: 2vw;
}

/* 全ページに適用 -header- */
.header {
    padding-top: 1vw;
    background-color: #f9f8f4;
    height: 14vw;
}
.logo {
    width: 98vw;
    height: 12vw;
}
.logo img {
    width: 5vw;
    position: relative;
    top: 2vw;
    left: 5vw;
}
.logo h1 {
    text-align: center;
    position: relative;
    top: -2.5vw;
}
main {
    height: clamp(calc(100vh - 50vw), 60vw, 450px);
}
main .main_link {
    margin:  5vw 11vw 5vw 11vw;
    padding-top: 10vw;
    width: 75vw;
}
main .main_link ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5vw;
    padding: 0 0 0 0;
}
main .main_link ul li {
    width: 70vw;
    list-style: none;
    padding: 0 0 0 0;
}

/* 全ページに適用 -footer- */
footer {
    background-color: #DBDBDB;
    height: 30vw;
    padding: 1vw 0 0 0;
    margin: 5vw 0 0 0;
}
.footer_nav_sp {
    display: flex;
    justify-content: center;
}
.footer_nav_sp_1 {
    display: flex;
    justify-content: center;
    gap: 12.5vw;
    padding: 0 5vw 0 5vw;
}
.footer_nav_sp_1 li {
    list-style: none;
    line-height: 2.5;
}
.sns_flex {
    display: flex;
    justify-content: center;
}
.portfolio {
    text-align: left;
    padding-left: 6vw;
}
.sns_link {
    display: flex;
    padding: 0 0 0 0;
    gap: 5vw;
}
.sns_flex li {
    list-style: none;
}
.copyright {
    margin-top: 1vw;
    margin-bottom: 0;
    padding-top: 1vw;
    padding-bottom: 1vw;  
    color: #253958;
    text-align: center;
}

/* 全ページに適用 -.pagetop- */
.pagetop {
    height: 12.5vw;
    width: 12.5vw;
    position: fixed;
    right: 7.5vw;
    bottom: 20vw;
    background: #fff;
    border: solid 0.13vw #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 0.3;
}
.pagetop_arrow {
    height: 5vw;
    width: 5vw;
    border-top: 0.75vw solid #000;
    border-right: 0.75vw solid #000;
    transform: translateY(20%) rotate(-45deg);
}

/* レスポンシブ対応 メディアクエリ */
@media(min-width: 768px) {
    /* 全ページに適用 -html- */
    html {
        font-size: clamp(16px, 1vw, 32px);
    }
    .wrapper {
        width: calc(100% - 20px);
        margin: 0 clamp(10px, calc(50% - 975px), calc(50% - 975px)) 0 clamp(10px, calc(50% - 975px), calc(50% - 975px));
    }
    h1 {
        font-size: clamp(1.6rem, 3vw, 3rem);
        margin: 0 0 0 0;
        width: clamp(450px, 65vw, 1248px);
    }
    h2 {
        font-size: 1.1rem;
    }
    h3 {
        font-size: 0.9rem;
    }
    h4 {
        font-size: 0.7rem;
    }
    #container {
        display: flex;
    }

    /* 全ページに適用 -header- */
    .header {
        padding-top: 20px;
        height: auto;
    }
    .logo {
        width: calc(100% - 20px);
        height: clamp(30px, 10vw, 250px);
    }
    .logo img {
        width: clamp(40px, 5vw, 100px);
        top: 0;
        left: clamp(0px, calc(50% - 960px), calc(50% - 960px)); /*clamp(最小値, 推奨値, 最大値);*/
    }
    .logo h1 {
        top: clamp(-100px, -5vw , -40px);
        left: clamp(40px, 17vw, 1248px);
    }
    
    /* 全ページに適用 -main- */
    main {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        height: auto;
        width: 100%;
    }
    main h2 {
        margin: 10px 0 0 0;
        font-size: clamp(0.9rem, 1.5vw, 1.5vw);
    }
    main h3 {
        margin: 5px 0 5px 0;
        font-size: clamp(0.9rem, 1.5vw, 1.5vw);
    }
    main h4 {
        margin: 5px 0 5px 0;
        font-size: clamp(0.7rem, 1.3vw, 1.3vw);
    }
    main .main_link {
        margin:  clamp(40px, 8vw, 240px) 0 clamp(40px, 8vw, 240px) 0;
        width: 100%;
        padding-top: 0;
        }
    main .main_link ul {
        flex-wrap: nowrap;
        gap: clamp(45px, 5vw, 96px);
        padding: 0 clamp(135px, 15vw, 288px) 0 clamp(135px, 15vw, 288px);
        }
    main .main_link ul li {
        width: clamp(300px, 40vw, 768px);
        }

    /* 全ページに適用 -footer- */
    footer {
        padding: 20px 0 0 0;
        margin: 10px 0 0 0;
        height: auto;
    }

    .footer_nav_sp_1 {
        gap: clamp(60px, 6vw, 150px);
        padding: 0 20px 0 20px;
    }
    .portfolio {
        padding-left: 0;
    }
    .sns_link {
        gap: clamp(20px, 4vw, 100px);
    }
    .copyright {
        margin-top: 20px;
        padding-top: 20px;
        padding-bottom: 20px;  
    }

    /* 全ページに適用 -.pagetop- */
    .pagetop {
        height: clamp(30px, 4vw, 100px);
        width: clamp(30px, 4vw, 100px);
        right: clamp(20px, 4vw, 100px);
        bottom: clamp(50px, 4vw, 150px);
        border: solid 0.5px #000;
    }
    .pagetop_arrow {
        height: clamp(12px, 2vw, 40px);
        width: clamp(12px, 2vw, 40px);
        border-top: 2px solid #000;
        border-right: 2px solid #000;
    }
}