:root {
    --tokyo-blue: #00A9EA;
    --background-blue: #ECF9FF;
    --main-red: #C8161D;
    --tokyo-white: #f5f5f5;
    --border-radius: 8px;
}

#tokyotokyo-about.container {
    width: 100%;
    background: var(--background-blue);
    padding: 0 0 80px;
}

#tokyotokyo-about {
    font-family: 'roboto';

    .tokyotokyo__title {

        max-width: 800px;
        height: 350px;
        position: relative;
        margin: 40px auto;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: top;
            border-radius: 5px;
        }
    }

    h1,
    h2,
    h3,
    h4 {
        color: var(--tokyo-blue);
        font-family: 'oswald';
    }

    p {
        font-family: 'roboto';
    }

    h1 {
        padding: 0;
        margin: 48px 0 0;
        font-size: 6rem;
        font-weight: 700;
        text-align: center;
        display: block;
        color: var(--tokyo-blue);
    }

    .tokyotokyo__title:after {
        content: "©︎TCVB";
        display: block;
        position: absolute;
        bottom: 16px;
        left: 16px;
        color: #fff;
        font-weight: normal;
    }

    .tokyotokyo__article-section {
        max-width: 800px;
        margin: 0 auto 48px;
        background: #fff;
        padding: 48px 80px;
        border-radius: 5px;

        h2 {
            text-align: center;
            margin: 0 0 32px;
            font-size: 48px;

        }

        h3 {
            margin: 0 0 16px 0;
            font-size: 32px;
        }

        h4 {
            font-family: 'roboto';
        }

        h3.tokyotokyo-article__circle-num {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        h3.tokyotokyo-article__circle-num span {
            font-size: 70%;
            padding: 0;
            width: 3rem;
            height: 3rem;
            background: var(--tokyo-blue);
            line-height: 1;
            border-radius: 50%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h3.tokyotokyo-article__circle-num span.two-digit {
            font-size: 60%;
        }

        p {
            font-weight: normal;
            line-height: 1.7;
        }

        p:not(:last-of-type) {
            margin: 0 0 32px 0;
        }

        a {
            color: var(--tokyo-blue);
            text-decoration: underline;
            word-wrap: break-word;
        }

        img {
            border-radius: 5px;
            height: auto;
            width: auto;
        }

        .tokyotokyo__index {
            margin: 40px 0px 0;
            border: 2px solid var(--tokyo-blue);
            padding: 32px;
            border-radius: 5px;
            position: relative;

            span {
                position: absolute;
                top: calc(-50% + 32px);
                background: var(--tokyo-blue);
                padding: 4px 24px;
                border-radius: 14px;
                transform: translateY(50%);
                left: 16px;
                color: #fff;
                line-height: 1;
            }

            ul {
                padding: 0 0 0 2rem;
                margin: 0;

                li {
                    a {
                        color: #353535;
                        font-weight: normal;
                    }
                }
            }
        }
    }
}

div#tokyotokyo-about+.footer {
    margin: 0;
}

@media (max-width: 768px) {

    #tokyotokyo-about {
        .tokyotokyo__title {
            height: 200px;
            padding: 0 16px;
        }

        .tokyotokyo__title:after {
            bottom: 5%;
            left: 8%;
        }

        .tokyotokyo__title {
            h1 {
                font-size: 6rem;
                text-align: center;
            }
        }

        .tokyotokyo__article-section {
            padding: 48px 32px;
            margin: 8vw 16px 0;

            h2 {
                font-size: 38px;
            }


            h3 {
                font-size: 24px;
            }
        }
    }

    #tokyotokyo-about {
        .tokyotokyo__articssle-section {
            h3.tokyotokyo-article__circle-num span {
                font-size: 80%;
                width: 2.5rem;
                height: 2.5rem;
            }

            h3.tokyotokyo-article__circle-num span {
                font-size: 70%;
            }
        }
    }
}