@charset "utf-8";

:root {
    --door-color: black;
    --door-shadow: gray;
    --nano-white: rgba(247, 251, 254, 1);
    --paint-1: #F9EEF4;
    --paint-2: #FFFBC8;
    --paint-3: #ECF2FA;
    --paint-4: #E0E0F0;
    --paint-5: #DBEAD7;
    --font-zen: 'Zen Maru Gothic', sans-serif;
}

body {
    background-color: #DAECF3;
    background-image: url(../img/bg/mainbg4.png);
    background-size: 330px;
}

main,
main * {
    margin-left: auto;
    margin-right: auto;
}

/* ヘッダー */
.lead-box {
    position: relative;
}

.lead-box h1 {
    z-index: 2;
    position: absolute;
    width: max-content;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    color: #D788AF;
    padding: 0px 10px 5px;
    border-radius: 6px;
    border: 2px solid #D788AF;
    background-color: var(--nano-white);
    box-shadow: 1px 2px 5px var(--door-shadow);
    font-family: var(--font-zen);
    font-size: 2rem;
    font-weight: 700;
}

/* メイン */
/* リード文 */
.lead {
    z-index: 1;
    color: #927EAF;
    margin-top: 40px;
    margin-bottom: 94px;
    width: 660px;
    max-width: 100%;
    padding: 3em 0;
    text-align: center;
    background-color: rgba(247, 251, 254, 0.7);
    border-radius: 11px;
    border: 2px solid #927EAF;
    box-shadow: 1px 1px 4px var(--door-shadow);
    font-family: var(--font-zen);
    line-height: 1.65;
}

.exitp {
    position: relative;
    margin-top: 5px;
    width: max-content;
}

.exitp::before {
    content: '→';
    position: absolute;
    left: -1em;
}

.exit {
    text-decoration: underline;
}

/* ナビゲーション */
main nav {
    margin-bottom: 50px;
}

.door ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 30px;
    justify-content: center;
}

.door ul li {
    width: 100%;
    aspect-ratio: 5/8;
    border-radius: 44% 44% 0 0/27.5% 27.5% 0 0;
    background-color: black;
}

.door ul li a {
    display: block;
    perspective: 800px;
}

.door ul li a>div {
    position: relative;
    width: 100%;
    aspect-ratio: 5/8;
    border: 2px solid var(--door-color);
    border-radius: 44% 44% 0 0/27.5% 27.5% 0 0;
    box-shadow: 0px 1px 4px var(--door-shadow);
    transform-origin: right;
    transition: 0.5s ease-in;
}

.door ul li a>div:hover {
    transform: rotateY(22deg);
}

/* ドアノブ */
.door ul li a>div::after {
    content: '';
    position: absolute;
    width: 11%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 2px solid var(--door-color);
    top: 52%;
    left: 3.7%;
    background-color: #EAC287;
    box-shadow: 1px 2px 4px var(--door-shadow);
}

.dWin {
    margin-top: 17%;
    width: 66%;
    height: 40%;
    border-radius: 43% 43% 1% 1%;
    border: 2px solid var(--door-color);
    overflow: hidden;
    box-shadow: inset 0 0 4px var(--door-shadow);
    background-size: cover;
    background-position: center;
}

.dInner {
    position: absolute;
    width: 66%;
    height: 30%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
    border-radius: 1%;
    border: 2px solid var(--door-color);
    box-shadow: inset 0 0 4px var(--door-shadow);
    background-size: contain;
    background-position: center;
}

.dInner p {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 30px;
}

.about {
    background-color: var(--paint-1);
}

.about .dWin {
    background-image: url(../img/door/hito2.png);
}

.about .dInner {
    background-image: url(../img/door/about.png);
}

.diary {
    background-color: var(--paint-2);
}

.diary .dWin {
    background-image: url(../img/door/neko2.png);
}

.diary .dInner {
    background-image: url(../img/door/diary.png);
}

.photo {
    background-color: var(--paint-3);
}

.photo .dWin {
    background-image: url(../img/door/usa.png);
}

.photo .dInner {
    background-image: url(../img/door/photo.png);
}

.special {
    background-color: var(--paint-5);
}

.special .dWin {
    background-image: url(../img/door/kuma.png);
}

.special .dInner {
    background-image: url(../img/door/special.png);
}

.link {
    background-color: var(--paint-4);
}

.link .dWin {
    background-image: url(../img/door/hituji.png);
}

.link .dInner {
    background-image: url(../img/door/link.png);
}

@media (max-width: 800px) {
    body {
        background-size: 220px;
    }

    .lead-box h1 {
        font-size: 1.9rem;
        top: -20.7px;
    }

    .lead {
        margin-top: 30px;
        padding: 2.2em 0 1.7em;
        margin-bottom: 42px;
    }

    .door ul {
        display: flex;
        flex-wrap: wrap;
        column-gap: 5%;
        row-gap: 24px;
    }

    .door ul li {
        margin: 0;
        width: 30%;
    }

    /* ボックスシャドウ*/
    .door ul li a>div {
        box-shadow: 0px 1px 2px var(--door-shadow);
    }

    .door ul li a>div::after {
        box-shadow: 1px 1px 2px var(--door-shadow);
    }

    .dWin,
    .dInner {
        box-shadow: inset 0 0 2px var(--door-shadow);
    }
}