@charset "UTF-8";

body,
html {
    height: 100%;
    margin: 0 auto;
    scroll-behavior: smooth;
}

.wrap {
    position: relative;
    background-attachment: fixed;
    background-image: url(../img/bg2.webp);
    background-size: cover;
    background-position: center;
}

nav {
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.nav1 {
    grid-area: 1 / 1 / 2 / 2;
}

.nav2 {
    grid-area: 1 / 2 / 2 / 3;
}

.nav3 {
    grid-area: 2 / 1 / 3 / 2;
}

.nav4 {
    grid-area: 2 / 2 / 3 / 3;
}

.nav1 img,
.nav2 img,
.nav3 img,
.nav4 img {
    cursor: pointer;
    transition-duration: 0.3s;
}

.nav1:hover img,
.nav2:hover img,
.nav3:hover img,
.nav4:hover img {
    opacity: 0.6;
    transition-duration: 0.3s;
}

.hidden {
    display: none;
}

.image-tab:hover img {
    opacity: 0.8;
}

.image-tab.active img {
    opacity: 1;
}

.entrytab {
    position: relative;
}

.entrytab_inner {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

.entrytab_inner img {
    cursor: pointer;
    transition-duration: 0.3s;
}

.entrytab_tab {
    grid-row-start: 3;
    opacity: 0.3;
}

.tab1:hover img,
.tab2:hover img {
    opacity: 0.6;
    transition-duration: 0.3s;
}

.sns {
    position: relative;
}

.sns_inner {
    position: absolute;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

.sns_inner img {
    cursor: pointer;
    transition-duration: 0.3s;
}

.sns1 {
    grid-column: span 2 / span 2;
}

.sns2 {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
}

.sns3 {
    grid-row-start: 3;
}

.sns4 {
    grid-row-start: 3;
}

.sns5 {
    grid-row-start: 4;
}

.sns6 {
    grid-row-start: 4;
}

.sns7 {
    grid-row-start: 5;
}

.sns8 {
    grid-row-start: 5;
}

.sns9 {
    grid-row-start: 6;
}

.sns1:hover img,
.sns2:hover img,
.sns3:hover img,
.sns4:hover img,
.sns5:hover img,
.sns6:hover img,
.sns7:hover img,
.sns8:hover img,
.sns9:hover img {
    opacity: 0.6;
    transition-duration: 0.3s;
}



.footer {
    position: relative;
}

.footer_inner {
    position: absolute;
    padding: 0 40px;
    text-align: center;
}

.footer_inner img {
    cursor: pointer;
    transition-duration: 0.3s;
}

.btn_foot {
    margin-bottom: 15px;
}

.btn_foot:hover {
    opacity: 0.6;
    transition-duration: 0.3s;
}

.bg_sp {
    margin: 0 auto;
    padding: 0 auto;
    max-width: 460px;
    position: relative;
    z-index: 2;
}

.bg_sp img {
    width: 100%;
}

.bg_sp_wrap {
    background-attachment: fixed;
    background-image: linear-gradient(0deg, rgba(220, 170, 219, 0.4), rgba(248, 241, 249, 0.4));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    position: relative;
    z-index: -10;
}

.bg_sp_inner .bg_sp_img {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 460px;
    z-index: -1;
}

.bg_sp_inner {
    background-color: rgba(255, 255, 255, 0.4);
}


@media screen and (min-width: 460px) {
    .bg_sp_inner {
        background-size: 460px;
    }

    .bg_sp_img {
        display: none;
    }
}

@media screen and (max-width: 459px) {
    .bg_sp_wrap {
        background-image: linear-gradient(0deg, rgba(220, 170, 219, 1), rgba(248, 241, 249, 1));

    }
}