/* 暫定的に画像を縮小 */
img {
    width: 200px;
}

/* カラーセット */
:root {
    --basecolor: #FDFFD3;
    --subcolor: #FDB569;
    --pointcolor: #008300;
    --text-color: #000;
    --text-subcolor: #fff;
    --text-color-hover: #484848;
    --text-subcolor-hover: #b0b0b0;
    --edging-color: #6CB2FC;
}

body {
    background-color: var(--basecolor);
}

header {
    position: relative;
    width: 100vw;
    height: 50px;
    background-color: var(--subcolor);
    display: flex;
    opacity: 0;
    animation: fadein2 2s ease forwards;
    /* animation-timeline: view();
        animation-range: contain 0% contain 50%; */
}

header h1 a {
    font-size: 60%;
    color: var(--text-subcolor);
    text-decoration: none;
}

header h1 img {
    width: 50px;
}

header nav {
    position: absolute;
    right: 0;
    margin-right: 50px;
}

header nav ul {
    display: flex;
    list-style: none;
}

header nav ul li {
    margin-right: 20px;
    margin-top: 10px;

}

header nav ul li a {
    color: var(--text-subcolor);
    text-decoration: none;
    font-size: 120%;
}

header nav ul li a:hover {
    color: var(--text-subcolor-hover);
}

#top-view {
    position: relative;
    opacity: 0;
    animation: fadein2 2s ease forwards;
    /* animation-timeline: view();
            animation-range: contain 0% contain 50%; */
}

#top-view img {
    width: 100vw;
}

.top-tittle {
    position: absolute;
    top: 30%;
    left: 10%;
}

.top-tittle h2 {
    font-size: 600%;
    color: var(--text-subcolor);
    text-shadow: 4px 4px 4px var(--edging-color);
}

#profile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    margin: 150px 50px;
    position: relative;
}

.profile-img {
    z-index: 1;
    opacity: 0;
    animation: slidein 1s ease forwards;
    animation-timeline: view();
    animation-range: contain 0% contain 50%;
}

.profile-main-img {
    width: 500px;
    margin: 0 auto;
}

.profile-illust {
    position: relative;
}

.profile-text {
    z-index: 1;
}

.profile-text h2 {
    color: var(--pointcolor);
    font-size: 200%;
    margin-bottom: 50px;
    text-align: center;
}

.profile-text p {
    margin-bottom: .5em;
}

#profile .profile-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 100vw;
}

#news {
    text-align: center;
    margin: 150px 50px;
    padding: 20px;
    background-color: var(--subcolor);
}

#news h2 {
    color: var(--pointcolor);
}

.news-article {
    margin-top: 20px;
}

.news-article ul {
    list-style: none;
}

.news-article ul li {
    max-width: 800px;
    margin: 0 auto 20px;
    border-bottom: 1px solid var(--edging-color);
}

#vision {
    position: relative;
    margin: 150px 100px;
}

.vision {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    z-index: 1;
}

.vision-text {
    margin: 0 50px;
    z-index: 1;
}

.vision-text h2 {
    color: var(--pointcolor);
    text-align: center;
    margin-bottom: 30px;
}

.vision-img {
    z-index: 1;
    opacity: 0;
    animation: slidein 1s ease forwards;
    animation-timeline: view();
    animation-range: contain 0% contain 50%;
}

.vision-img img {
    width: 500px;
}

.vision-bg {
    width: 100vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

#gym {
    position: relative;
    margin: 150px 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    background-color: var(--subcolor);
}

.gym-img img {
    width: 400px;
    opacity: 0;
    animation: slidein 1s ease forwards;
    animation-timeline: view();
    animation-range: contain 0% contain 50%;
}

.gym-text {
    padding: 50px;
}

.gym-text h2 {
    color: var(--pointcolor);
    text-align: center;
    margin-bottom: 50px;
}

.gym-btn {
    text-align: center;
    width: 200px;
    margin: 30px auto;
    background-color: var(--pointcolor);
    border-radius: 10px;
}

.gym-btn a {
    text-decoration: none;
}

.gym-btn h3 {
    text-align: center;
    margin: 0 auto;
    color: var(--text-subcolor);
    padding: 5px;
}

#gallery {
    text-align: center;
    margin: 50px;
}

#gallery h2 {
    color: var(--pointcolor);
}

/*スライドショー*/
#gallery {
    position: relative;
    margin: 150px 50px;
    opacity: 0;
    animation: fadein2 1s ease forwards;
    animation-timeline: view();
    animation-range: contain 0% contain 50%;
}

#gallery h2 {
    text-align: center;
    margin-top: 20px;
}

/* slickプラグイン
    スライドショー */
.slide-items {
    width: 600px;
    margin: 20px auto 0;
}

.slide-items img {
    width: 100%;
    object-fit: cover;
}

.slick-next {
    right: -50px;
}

.slick-prev {
    left: -100px;
}

.slick-prev::before,
.slick-next::before {
    color: #000;
    font-size: 50px;
}

.slick-prev:before,
.slick-next:before {
    color: var(--pointcolor);
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: var(--subcolor);
}

.slick-dots li button:before {
    font-size: 20px;
    top: 6px;
    color: var(--pointcolor);
}

/* slickここまで */

#contact {
    text-align: center;
    margin: 50px;
    position: relative;
    opacity: 0;
    animation: fadein2 1s ease forwards;
    animation-timeline: view();
    animation-range: contain 0% contain 50%;
}

#contact>img {
    width: 800px;
}

.sns-box {
    background-color: var(--subcolor);
    width: 300px;
    height: 150px;
    padding: 20px;
    text-align: center;
    justify-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sns-box h3 {
    color: var(--text-subcolor);
}

.sns-box .sns-btn {
    display: flex;
    margin: 20px;
}

.sns-box .sns-btn>div {
    width: 100%;
}

.sns-box .sns-btn img {
    width: 50px;
}

footer {
    background-color: var(--subcolor);
    width: 100vw;
    height: 50px;
    position: relative;
}

footer h5 {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    color: var(--text-subcolor);
}

@media screen and (max-width: 600px) {
    header h1 a {
        font-size: 40%;
    }


    nav {
        display: none;
    }

    .top-tittle h2 {
        font-size: 200%;
    }

    #profile {
        grid-template-columns: repeat(1, 1fr);
        margin: 50px 0;
    }

    .profile-main-img {
        width: 300px;
        margin: 0 auto;
    }

    .profile-text p {
        font-size: 70%;
        margin-bottom: .3em;
    }

    #news {
        margin: 50px 0;
    }

    .news-article ul li h3 {
        font-size: 80%;
    }

    .news-article ul li p {
        font-size: 70%;
    }

    #vision {
        margin: 50px 0px;
    }

    .vision {
        grid-template-columns: repeat(1, 1fr);
    }

    .vision-text p {
        font-size: 70%;
    }

    .vision-img img {
        width: 300px;
    }

    #gym {
        grid-template-columns: repeat(1, 1fr);
        margin: 50px 0px;
    }

    .gym-img img {
        width: 300px;
    }

    .gym-text p {
        font-size: 70%;
    }

    #gallery {
        margin: 50px 0px;
    }

    .slide-items {
        width: 250px;
    }

    .slick-next {
        right: -20px;
    }

    .slick-prev {
        left: -60px;
    }

    #contact {
        margin: 50px 0;
    }

    #contact>img {
        width: 300px;
    }

    .sns-box {
        width: 200px;
        height: 100px;
    }

    .sns-box h3 {
        font-size: 80%;
    }

    .sns-box .sns-btn img {
        width: 30px;
    }
}