<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>硝子細工の管理室</title>

<style>
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background: #101810;
    color: #e9eadf;
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        "Noto Serif JP",
        "MS PMincho",
        serif;
}

/* =================================
   森の入口
================================= */

.forest {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(170, 190, 140, 0.18),
            transparent 35%
        ),
        linear-gradient(
            #17271c,
            #081008
        );
}

/* 木漏れ日 */

.forest-light {
    position: absolute;

    width: 500px;
    height: 500px;

    top: -180px;
    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(220, 230, 180, 0.20),
            transparent 70%
        );

    filter: blur(10px);
}

/* =================================
   木
================================= */

.tree {
    position: absolute;

    bottom: -30px;

    width: 100px;
    height: 330px;

    background: #0b170e;

    clip-path: polygon(
        50% 0%,
        72% 25%,
        63% 25%,
        83% 48%,
        68% 48%,
        93% 72%,
        61% 72%,
        61% 100%,
        39% 100%,
        39% 72%,
        7% 72%,
        32% 48%,
        17% 48%,
        37% 25%,
        28% 25%
    );
}

.tree1 {
    left: 2%;
    transform: scale(1.35);
}

.tree2 {
    left: 16%;
    transform: scale(.85);
}

.tree3 {
    right: 3%;
    transform: scale(1.4);
}

.tree4 {
    right: 18%;
    transform: scale(.8);
}

/* =================================
   扉
================================= */

.door-container {
    position: relative;
    z-index: 5;

    text-align: center;
}

/* 扉 */

.door {
    width: 190px;
    height: 350px;

    margin: auto;

    position: relative;

    cursor: pointer;

    background:
        linear-gradient(
            90deg,
            #392619,
            #573a25 48%,
            #342116
        );

    border: 6px solid #21150e;

    box-shadow:
        0 0 0 3px rgba(200, 180, 130, .15),
        0 25px 70px rgba(0,0,0,.75);

    transition:
        transform .4s ease,
        filter .4s ease;
}

.door:hover {
    transform: scale(1.025);
    filter: brightness(1.15);
}

/* 扉の枠 */

.door::before {
    content: "";

    position: absolute;

    top: 30px;
    bottom: 30px;
    left: 28px;
    right: 28px;

    border:
        2px solid
        rgba(190,160,100,.35);
}

/* ドアノブ */

.door::after {
    content: "";

    position: absolute;

    right: 22px;
    top: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #c1aa73;

    box-shadow:
        0 0 10px
        rgba(255,220,150,.35);
}

.door-name {
    margin-top: 22px;

    font-size: 14px;

    letter-spacing: .2em;

    color: #c7d0b5;
}

.door-hint {
    margin-top: 8px;

    font-size: 12px;

    color: #8f9c83;

    opacity: 0;

    transition: opacity .4s;
}

.door-container:hover .door-hint {
    opacity: 1;
}


/* =================================
   管理室
================================= */

.room {
    display: none;

    min-height: 100vh;

    padding:
        60px 25px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(240,220,170,.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #414838,
            #282d23 55%,
            #1c2119
        );
}

.room.show {
    display: block;

    animation:
        roomAppear 1.4s ease;
}

@keyframes roomAppear {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =================================
   タイトル
================================= */

.room-inner {

    max-width: 900px;

    margin: auto;

    text-align: center;
}

.room-title {

    font-size: 42px;

    font-weight: normal;

    letter-spacing: .12em;

    margin-bottom: 8px;
}

.room-subtitle {

    font-size: 13px;

    color: #aeb5a0;

    letter-spacing: .15em;
}

.line {

    width: 140px;

    height: 1px;

    margin: 30px auto;

    background:
        rgba(210,210,180,.45);
}


/* =================================
   ようこそ
================================= */

.welcome {

    line-height: 2;

    color: #d1d3c5;
}


/* =================================
   メニュー
================================= */

.menu {

    max-width: 850px;

    margin:
        50px auto 0;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 16px;
}

.menu a {

    padding: 24px;

    text-decoration: none;

    color: #e9e8dc;

    border:
        1px solid
        rgba(220,220,190,.2);

    background:
        rgba(10,15,10,.22);

    transition:
        transform .3s,
        background .3s,
        border .3s;
}

.menu a:hover {

    transform:
        translateY(-4px);

    background:
        rgba(210,220,170,.08);

    border-color:
        rgba(220,220,190,.5);
}

.menu-title {

    display: block;

    font-size: 18px;

    margin-bottom: 8px;
}

.menu-description {

    font-size: 12px;

    color: #aeb4a1;
}


/* =================================
   キリ番
================================= */

.counter {

    margin-top: 60px;

    font-size: 11px;

    letter-spacing: .12em;

    color: #7f8775;
}


/* =================================
   スマホ
================================= */

@media(max-width:600px) {

    .door {

        width: 150px;
        height: 280px;
    }

    .room-title {

        font-size: 29px;
    }

    .menu {

        grid-template-columns: 1fr;
    }
}

</style>
</head>


<body>


<!-- =================================
     森
================================= -->

<section
    class="forest"
    id="forest"
>

    <div class="forest-light"></div>

    <div
        class="tree tree1">
    </div>

    <div
        class="tree tree2">
    </div>

    <div
        class="tree tree3">
    </div>

    <div
        class="tree tree4">
    </div>


    <!-- 扉 -->

    <div class="door-container">

        <div
            class="door"
            onclick="enterRoom()"
        >
        </div>

        <div class="door-name">
            森の奥
        </div>

        <div class="door-hint">
            扉を開ける
        </div>

    </div>

</section>



<!-- =================================
     硝子細工の管理室
================================= -->

<section
    class="room"
    id="room"
>

    <div class="room-inner">


        <h1 class="room-title">
            硝子細工の管理室
        </h1>


        <div class="room-subtitle">
            GLASSWORK MANAGEMENT ROOM
        </div>


        <div class="line"></div>


        <div class="welcome">

            <p>
                ようこそ。
            </p>

            <p>
                森の中にある、
                小さな管理室です。
                <br>
                見つけてくれてありがとうございます。
            </p>

            <p>
                どうぞ、ゆっくりしていってください。
            </p>

        </div>



        <!-- =================================
             メニュー
        ================================= -->

        <div class="menu">


            <a href="#">
                <span class="menu-title">
                    📖 記録室
                </span>

                <span class="menu-description">
                    この家で起きたこと。
                </span>
            </a>


            <a href="#">
                <span class="menu-title">
                    💬 つぶやき
                </span>

                <span class="menu-description">
                    日々のどうでもいいこと。
                </span>
            </a>


            <a href="#">
                <span class="menu-title">
                    📚 作品保管庫
                </span>

                <span class="menu-description">
                    いくつかの物語と、その登場人物。
                </span>
            </a>


            <a href="#">
                <span class="menu-title">
                    🌲 観測窓
                </span>

                <span class="menu-description">
                    森の様子を見に行く。
                </span>
            </a>


            <a href="#">
                <span class="menu-title">
                    🖼️ 展示室
                </span>

                <span class="menu-description">
                    絵や写真など。
                </span>
            </a>


            <a href="#">
                <span class="menu-title">
                    🔍 ????
                </span>

                <span class="menu-description">
                    何でしょう、これ。
                </span>
            </a>


        </div>


        <!-- =================================
             キリ番
        ================================= -->

        <div class="counter">

            visitor : 000000

            <br><br>

            キリ番は破壊されました。

        </div>


    </div>

</section>



<script>

function enterRoom() {

    document
        .getElementById("forest")
        .style
        .display = "none";


    document
        .getElementById("room")
        .classList
        .add("show");

}







