@charset "UTF-8";
@import url("./hamburger.css?v=1");

:root {
    --main_color: white;
    --sub_color: rgb(254, 240, 222);
    --font_color: black;
    --theme_color: #554738;
    --font_family: 'NotoSerifJP', '游明朝', 'Yu Mincho';
    --header_font_color: #f5ecdf;
}

@font-face {
    font-display: swap;
    font-family: "NotoSerifJP";
    src: url("./../font/NotoSerifJP-VariableFont_wght.ttf") format("truetype");
}

body {
    font-family: var(--font_family);
    margin: 0.0em;
    padding-top: 2.5em;
}
header {
    background-color: var(--theme_color);
    color: var(--header_font_color);
    display: flex;
    height: 2.5em;
    min-height: 2.5em;
    position: sticky;
    top: 0;
    z-index: 10;
}
header.fixed-header {
    left: 0;
    position: fixed;
    top: 0;
    width: calc(100% - 2em);
    z-index: 1000;
}
header h1 a {
    align-items: center;
    color: var(--header_font_color);
    display: flex;
    text-decoration: none;
}
header h1 {
    align-items: center;
    display: flex;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0.4em;
}
header h1 img {
    margin-right: 8px;
    width: 1.8em;
}
h1 {
    font-family: var(--font_family);
}
.header_img {
    width: 100%;
}
@media (max-width: 800px) {
    header h1 {
        font-size: 1.3em;
        margin-block: 0;
    }
}

.body {
    background-color: rgb(255, 255, 255);
    margin: 3em auto 1em;
    margin-bottom: 5.0em;
    max-width: 1200px;
    padding: 0.6em;
}
.body h1 {
    color: rgb(63, 56, 1);
    font-size: 2em;
    font-weight: bold;
    margin-top: 2em;
    text-align: center;
}
.body h2 {
    color: rgb(63, 56, 1);
    text-align: center;
    font-size: 1.6em;
    font-weight: normal;
    margin-top: 1.6em;
}
.body iframe {
    text-align: center;
    width: 90%;
}
@media (max-width: 800px) {
    .body h1 {
        font-size: 1.6em;
    }
    .body h2 {
        font-size: 1.4em;
    }
}
section {
    margin-top: 6em;
}
#concept {
    font-size: 1.4em;
    margin-top: 2em;
}
#about article {
    margin: 0 auto;
    padding: 0 2em;
    text-align: left;
    width: fit-content;
}
#about .image {
    align-content: center;
    width: 30%;
}
#about .image img {
    width: 100%;
}
#about .overview {
    padding: 12px;
    width: 70%;
}

.copyright {
    color: var(--header_font_color);
    text-align: center;
    width: 100%;
}

/* フッター */
.sp-menu {
    display: none;
}

#sns img.pc_view {
    width: 150px;
}

#sns img.sp_view {
    width: 75px;
}

.pc_view {
    display: inline-block;
}
.sp_view {
    display: none;
}
@media (max-width: 800px) {
    .pc_view {
        display: none;
    }
    .sp_view {
        display: inline-block;
    }
}

#sns iframe {
    opacity: 0;
}

footer {
    background-color: var(--theme_color);
    color: var(--header_font_color);
    padding: 1em;
}
@media (max-width: 800px) {
    footer {
        font-size: 0.75em;
        padding-top: 0.5em;
    }
}

.anchor-offset {
    display: block;
    height: 1em;
    margin-top: -1em;
    visibility: hidden;
}