@charset "UTF-8";

#about-us-page {

    font-family: var(--font-family-gothic-noto);
    /* color: var(--color-dark-brown); */
    line-height: 1.75em;

    h2 {
        font-family: var(--font-family-mincho-noto);
        font-size: 1.8rem;
        margin: 5rem auto 2.75rem auto;
        display: block;
        border-bottom: solid 2px var(--color-orange);
        width: 13em;
        max-width: 100%;
        text-align: center;
        letter-spacing: 0.4em;
        padding-bottom: 0.4em;
    }


    /*
    #section-main-image {
    }
    */

    #section-ceo-message {

        margin-top : 8rem;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 44% 52%;
        gap: 0 4%;

        & > h2 {
            grid-column: 1 / 3;
            grid-row : 1 / 2;
        }

        & > img {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }

        & > div {
            grid-column: 2 / 3;
            grid-row: 2 / 3;

            & > p {
                margin-bottom: 2.3em;
            }

            img.ceo-signature {
                width: 25%;
                height: auto;
                display: inline-block;
            }
        }

    }

    #section-philosophy {
        background: var(--color-beige-2);

        margin-top : 8rem;
        padding : 6rem 0;

        h2 {
            margin-top: 0;
        }

        p {
            margin-top: 2rem;
            font-weight: bold;
            text-align: center;
            line-height: 3em;
            font-family: var(--font-family-mincho-noto);
        }
    }

    #section-company-info {

        margin-top : 8rem;

        & > ul {

            display: flex;
            flex-direction: column;
            width: fit-content;
            margin: 4em auto;

            & > li {

                margin-bottom: 0.8rem;
                border-bottom: solid 1px var(--color-light-black);

                & > span {
                    display: inline-block;
                }

                & > div {
                    display: inline-block;
                    vertical-align: top;
                }

            }
        }

    }

    #section-history {
        background-size: cover;
        background-position: top center;

        padding: 3rem 0;

        ul {

            list-style: "●";
            display: flex;
            flex-direction: column;
            width: fit-content;
            position: relative;
            margin: 4em auto;
            padding-left : 1em;


            &::before {
                content: "";
                background-color: var(--color-light-gray);
                width: 2px;
                height: calc(100% - 1em);
                position: absolute;
                top: 0.5em;
                left: 0.5em;
                z-index: 0;
            }

            & > li {
                padding-left: 1.15em;
                z-index: 1;

                &::marker {
                    color: var(--color-orange);
                }

                &:not(:last-child) {
                    margin-bottom: 2.5rem;
                }

                .year-month {
                    width: 6.5em;
                    min-width: 6.5em;
                    font-size: 1.15em;
                    font-weight: bold;
                }

            }

        }

    }

    #section-access {

        .map-container {
            position: relative;
            width: 100%;
            padding-top: 40%;
            height: 0;

            & > iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        }

    }

    footer {
        margin-top:10rem;
    }

}