@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

* {
    box-sizing: border-box;
    font-family: "Noto Sans JP", serif;
}

.sp {
    display: none;
}
.pc {
    display: block;
}

@media screen and (max-width: 599px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
}

.header {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
}
.header .logo {
    padding: 0 0 0 1rem;
}
.header .menubutton {
    display: none;
}
.header .nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    height: 5rem;
    margin: 0 1rem 0 auto;
}
.header .nav a {
    height: 5rem;
    padding: 1.75rem 0;
    font-size: 1.2rem;
    margin-right: 1rem;
}
.header .nav a.showed {
    border-bottom: 3px solid #00f;
}
.header .tnav {
    position: absolute;
    top: calc(100% + 1px);left: 0;
    width: 100%;
    padding: 5rem;
    display: none;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
    border-bottom: 1px solid #eee;
    z-index: 9;
}

@media screen and (max-width: 599px) {
    .header {
        position: relative;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        box-shadow: 0 3px 6px rgba(0,0,0,0.05);
    }
    .header .logo {
        padding: 0 0 0 1rem;
    }
    .header .menubutton {
        display: block;
        width: fit-content;
        margin: 0 0 0 auto;
        padding: 0 1rem 0 0;
        height: 5rem;
    }
    .header .nav {
        position: absolute;
        top: calc(100% + 1px);
        width: 100%;
        display: none;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        height: 4rem;
        margin: 0;
        background: #fff;
        border-bottom: 1px solid #eee;
        box-shadow: 0 3px 6px rgba(0,0,0,0.05);
    }
    .header .nav a {
        display: block;
        height: 4rem;
        font-size: 1.2rem;
        margin: 0 1rem;
        padding: 1.27rem 0 .5rem 0;
    }
    .header .nav a.showed {
        border-bottom: 3px solid #00f;
    }
    .header .tnav {
        position: absolute;
        top: calc(100% + 5rem + 1px);left: 0;
        width: 100%;
        padding: 3rem 1rem;
        display: none;
        background: #fff;
        box-shadow: 0 3px 6px rgba(0,0,0,0.05);
        border-bottom: 1px solid #eee;
        z-index: 9;
    }
}

.home {
    width: 100%;
}
.home .head {
    /*width: 1000px;*/
    margin: 0 auto;
    padding: 5rem 0;
}
.home .head .title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #00f;
}

/*.home {
    width: 1000px;
    margin: 0 auto;
}*/

.home .category {
    /*width: 1000px;*/
    margin: 0 auto 3rem auto;
    border-top: 1px solid #eee;
}
.home .category .container {
    width: 1000px;
    margin: 3rem auto;
}
.home .category h2 {
    margin: 0 0 2rem 0;
    font-size: 1.25rem;
    font-weight: bold;
}
.home .category ul {
    display: flex;
    align-items: center;
}
.home .category li {
    margin-right: 1rem;
}

@media screen and (max-width: 599px) {
    .home {
        width: 100%;
    }
    .home .head {
        margin: 0 auto;
        padding: 5rem 0;
    }
    .home .head .title {
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        color: #00f;
        line-height: 2.5rem;
    }
    
    .home .category {
        margin: 0 auto 3rem auto;
        border-top: 1px solid #eee;
    }
    .home .category .container {
        width: 100%;
        margin: 3rem auto;
        padding: 0 1rem;
    }
    .home .category h2 {
        margin: 0 0 2rem 0;
        font-size: 1.25rem;
        font-weight: bold;
    }
    .home .category ul {
        display: flex;
        align-items: center;
    }
    .home .category li {
        margin-right: 1rem;
    }
}

/*????*/
.footer {
    position: relative;
    padding: 3rem 0;
    border-top: 1px solid #eee;
}
.footer .container {
    width: 1000px;
    margin: 0 auto;
}
.footer .footnav {
    display: flex;
    align-items: center;
    margin: 0 0 1rem 0;
}
.footer .footnav a {
    display: block;
    margin: 0 1rem 0 0;
}

@media screen and (max-width: 599px) {
    .footer {
        position: relative;
        padding: 3rem 0;
        border-top: 1px solid #eee;
    }
    .footer .container {
        width: 100%;
        margin: 0;
        padding: 0 1rem;
    }
    .footer .footnav {
        display: flex;
        align-items: center;
        margin: 0 0 1rem 0;
    }
    .footer .footnav a {
        display: block;
        margin: 0 1rem 0 0;
    }
}