* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:#000022;
}

header {
    width:100vw;
}

#content-area {
    width:960px;
    margin:auto;
    padding:16px 32px;
    background:#f0f0ff;
    flex-grow:1;
    @media screen and (max-width:959px) {
        width:100%;
        padding:16px;
    }
}

footer {
    width:100vw;
    @media screen and (max-width:419px) {
        margin-bottom:48px;
    }
}



h1 {
    font-size:1.75rem;
    font-weight:bold;
    margin:32px 0;
}

h2 {
    font-size:1.5rem;
    font-weight:bold;
    margin:32px 0 24px 0;
}

h3 {
    font-size:1.3rem;
    font-weight:bold;
    margin:24px 0 16px 0;
}

p {
    margin:16px 0;
    line-height:1.5rem;
    text-align:justify;
}

ul {
    margin:16px 16px 16px 32px;
}

ol {
    margin:16px 16px 16px 32px;
}

li {
    line-height:1.5rem;
    text-align:justify;
}

.link-list li {
    @media screen and (max-width:419px) {
        margin:8px 0;
    }
}

dl {
    margin-left:16px;
}

dt {
    font-weight:bold;
    line-height:1.5rem;
    text-align:justify;
    margin:16px 0 0 0;
}

dd {
    line-height:1.5rem;
    text-align:justify;
    margin:0 0 16px 16px;
}

.image {
    float:right;
    margin-left:32px;
    @media screen and (max-width:419px) {
        float:none;
        display:block;
        margin:auto;
    }
}

.force-return {
    overflow-wrap:anywhere;
}

.two-columns {
    columns: 2;
    @media screen and (max-width:419px) {
        columns: 1;
    }
}

.box-blue {
    background:#ccddff;
    padding:16px 32px;
    margin:16px 0;
    @media screen and (max-width:959px) {
        margin:16px;
        padding:16px 16px 8px 16px;
    }
}

.box-title {
    margin:16px 0;
    font-weight:bold;
    font-size:1.75rem;
    border-bottom:1px solid black;
}

.page-menu {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:180px 180px;
    margin:16px 0;
    @media screen and (max-width:419px) {
        display:flex;
        flex-direction:column;
    }
}

.relate-contents {
    background:#ddddf9;
    padding:16px;
    margin:16px 0;
    @media screen and (max-width:959px) {
        margin:16px;
        padding:16px 16px 8px 16px;
    }
}

.relate-contents-title {
    margin:0 0 8px 0;
    font-weight:bold;
    font-size:1.5rem;
    border-bottom:1px solid black;
}

.menu-group-profile {
    grid-row:1/3;
    padding:16px;
    @media screen and (max-width:419px) {
        padding:0 16px;
    }
}

.relate-contents ul {
    margin:8px 16px 0 32px;
}

.menu-group {
    padding:16px;
    @media screen and (max-width:419px) {
        padding:0 16px;
    }
}

.menu-group-title {
    margin:16px 0;
    font-weight:bold;
    font-size:1.5rem;
    border-bottom:1px solid black;
}


.menu-group-title a {
    text-decoration:none;
}

#site-title {
    color:white;
    font-weight:bold;
    margin:16px;
    vertical-align:text-bottom;
}

#site-title-ja {
    font-size:2rem;
    display:inline-block;
    margin-right:16px;
}

#site-title-en {
    font-size:1.25rem;
    display:inline-block;
}

#top-navi {
    width:960px;
    margin:auto;
    @media screen and (max-width:959px) {
        width:100%;
    }
    @media screen and (max-width:419px) {
        display:none;
    }
}

#top-navi ul {
    margin:0;
}

#top-navi li {
    list-style-type:none;
    display:inline-block;
    margin:8px 16px;
    line-height:1rem;
}

#top-navi a {
    color:white;
    text-decoration:none;
    font-weight:bold;
}

#top-navi a:hover {
    color:yellow;
}

#bottom-info {
    width:960px;
    margin:auto;
    @media screen and (max-width:959px) {
        width:100%;
    }
}

#bottom-info ul {
    margin:0;
}

#bottom-info li {
    list-style-type:none;
    display:inline-block;
    margin:8px 16px;
    line-height:1rem;
    @media screen and (max-width:419px) {
        display:block;
        margin:16px;
    }
}

#bottom-info a {
    color:white;
    text-decoration:none;
    font-weight:bold;
}

#bottom-info a:hover {
    color:yellow;
}

#breadcrumb {
    margin:0 0 32px 0;
    @media screen and (max-width:419px) {
        display:none;
    }
}

#breadcrumb ul {
    margin:0;
}

#breadcrumb li {
    list-style-type:none;
    display:inline-block;
    font-size:0.9rem;
}

#breadcrumb li:after {
    content:" /";
}

#bottom-navi {
    width:100vw;
    display:grid;
    grid-template-columns:1fr 1fr;
    position:fixed;
    bottom:0;
    @media screen and (min-width:420px) {
        display:none;
    }
}

.bottom-menu {
    background:#000022;
    height:48px;
    padding-top:12px;
    text-align:center;
    border:1px solid #ccddff;
}

#bottom-navi a {
    text-decoration:none;
    color:white;
    font-weight:bold;
}