@import url(reset.css);

/************************************************************
*/

/*	
*/

/***********************************************************/

/*==================================
*/

/*		
*/

/*================================*/

/*-------------------------
/*	
-------------------------*/

:root {
    --serif: 'PT Serif', 'Noto Serif JP', serif;
}

body {
    display: flex;
    > .sidebar {
        padding: 40px 20px;
        display: flex;
        writing-mode: vertical-lr;
        background: #fff;
        color: #0e253f;
        z-index: 10;
        > .logo {
            font-size: 1.75em;
        }
        > .name {
            font-size: 1.2em;
            margin: 10px auto;
            font-weight: normal;
            font-family: var(--serif);
            letter-spacing: 0.1em;
        }
    }
    > main {
        overflow: hidden auto;
        line-height: 1.5;
        > header {
            height: 4rem;
            position: fixed;
            display: flex;
            right: 0;
            background: #0e253f;
            padding: 0 4rem;
            z-index: 9;
            > nav {
                margin: auto 0 auto auto;
                > ul {
                    display: flex;
                    list-style: none;
                    > li {
                        > a {
                            display: block;
                            color: #fff;
                            font-size: 0.7em;
                            text-decoration: none;
                            &:after {
                                content: '/';
                                margin: 0 0.5em;
                            }
                        }
                        &:last-child > a:after {
                            display: none;
                        }
                    }
                }
            }
        }
        > #top {
            position: relative;
            > img {
                object-fit: cover;
                aspect-ratio: 1;
                width: calc(100% - 3rem);
                margin: 4rem 4rem 0 0;
                box-shadow: 4rem -4rem 0 #0e253f;
                z-index: -1;
            }
            > .introduction {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 2rem;
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
                > div {
                    background: #0e253f;
                    color: #fff;
                    padding: 0.25rem 2rem;
                    margin-right: auto;
                    font-family: var(--serif);
                    letter-spacing: 0.1em;
                }
            }
        }
        > #about {
            margin: 4rem 0 0 0;
            position: relative;
            > h2 {
                font-family: var(--serif);
                text-align: center;
                display: flex;
                flex-direction: column;
                letter-spacing: 0.25em;
                font-weight: 300;
                line-height: 1.25;
                > span:first-child {
                    font-size: 4em;
                }
                > span:last-child {
                    font-size: 0.75em;
                }
            }
            > .message {
                font-size: 1.5rem;
                text-align: center;
                color: #0e253f;
                letter-spacing: 0.25em;
                font-family: var(--serif);
                margin-top: 3.5em;
            }
            > .comment {
                font-size: 0.8em;
                text-align: center;
                margin-top: 0.75em;
                line-height: 1.75;
            }
            > .buttons {
                display: flex;
                > .button {
                    background: #fff;
                    color: #0e253f;
                    border: solid 1px #0e253f;
                    text-decoration: none;
                    padding: 0.5rem 2rem;
                    margin: 2rem auto 0 auto;
                    font-size: 0.8em;
                }
            }
            > .images {
                display: flex;
                gap: 2rem;
                width: 100%;
                overflow: hidden;
                padding: 3.5rem 3rem 0;
                margin: 0 auto;
                max-width: 1000px;
                box-sizing: border-box;
                > div {
                    flex-grow: 1;
                    > img {
                        display: block;
                        aspect-ratio: 642/430;
                        width: 100%;
                    }
                }
            }
            &:before {
                content: '';
                background: #f0f0f0;
                position: absolute;
                width: 100%;
                height: calc(100% - 4rem);
                top: 50%;
                transform: translateY(-50%);
                z-index: -1;
            }
        }
        > #news {
            margin: 4rem 0 0 0;
            position: relative;
            > h2 {
                font-family: var(--serif);
                text-align: center;
                display: flex;
                flex-direction: column;
                letter-spacing: 0.25em;
                font-weight: 300;
                line-height: 1.25;
                > span:first-child {
                    font-size: 4em;
                }
                > span:last-child {
                    font-size: 0.75em;
                }
            }
            > ul {
                list-style: none;
                margin: 4rem auto 0;
                padding: 0;
                max-width: 1000px;
                padding: 0 3rem;
                display: flex;
                flex-wrap: wrap;
                gap: 2rem;
                > li {
                    width: calc(50% - 1rem);
                    > a {
                        display: flex;
                        text-decoration: none;
                        > img {
                            height: 100px;
                            aspect-ratio: 800/600;
                            object-fit: cover;
                        }
                        > div {
                            padding: 0rem 1rem;
                            color: #0e253f;
                            > h3 {
                                font-family: var(--serif);
                                font-size: 1em;
                            }
                            > time {
                                font-size: 0.75em;
                                margin: 0.5rem 0 0 0;
                            }
                        }
                    }
                }
            }
            > .buttons {
                display: flex;
                > .button {
                    background: #fff;
                    color: #0e253f;
                    border: solid 1px #0e253f;
                    text-decoration: none;
                    padding: 0.5rem 2rem;
                    margin: 2rem auto 0 auto;
                    font-size: 0.8em;
                }
            }
        }
        > .double {
            display: flex;
            gap: 2rem;
            max-width: 1000px;
            margin: 4rem auto 0;
            > div {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                > h3 {
                    margin: 0 auto;
                    font-family: var(--serif);
                    text-align: center;
                    display: flex;
                    font-weight: 300;
                    align-items: baseline;
                    gap: 0.5rem;
                    > span:first-child {
                        letter-spacing: 0.1em;
                        font-size: 2em;
                    }
                    > span:last-child {
                        letter-spacing: 0.1em;
                        font-size: 0.75em;
                    }
                }
                > img {
                    display: block;
                    aspect-ratio: 486/225;
                    width: 100%;
                }
            }
        }
        > footer {
            background: #f0f0f0;
            text-align: center;
            font-size: 0.75em;
            padding: 4rem 0 0;
            margin-top: 4rem;
            > p {
                line-height: 2;
            }
            > iframe {
                width: 100%;
                aspect-ratio: 16/9;
                padding: 4rem 2rem;
                box-sizing: border-box;
            }
            > .copyright {
                background: #0e253f;
                color: #fff;
                padding: 0.5rem 0;
            }
        }
    }
    /* background: #0e253f; */
}

.serif {
    font-family: var(--serif);
}