@font-face {
    font-family: 'mis';
    src: url(/MIS.ttf);
    font-display:block;
}

@font-face {
    font-family: 'ns';
    src: url(/NS.ttf);
    font-display:block;
}

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

::selection {
    color: #f1f1f1;
    background: #222;
}
img::selection {
    background: #f1f1f188;
    filter: contrast(.8);
}

a {
    color: currentColor;
    text-underline-offset: .2rem;
}
a:hover {
    filter: contrast(.8);
}

:root {
    --default-padding: max(calc(50vw - 640px), 4rem);
    --min-padding: 2rem;
    --middle-padding: 4rem;
    font-family: "Noto Sans JP",
    "Noto Sans CJK JP",
    
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    
    "BIZ UDPGothic",
    "Meiryo",

    'ns',
     Arial, Helvetica, sans-serif;
}

header {
    padding: var(--min-padding) var(--default-padding);
    display: grid;
    place-items: center end;
    font-size: .7em;
}

body {
    color: #222;
    background: #f1f1f1;
    width: 100%;
}

button {
    border: none;
    background: none;
    color: currentColor;
}

.icon {
    font-family: 'mis';
    height: 1em;
    width: 1em;
    font-size: 1em;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.logo {
    display: inline-block;
    height: 2em;
    width: 6em;
    mask-image: url("data:image/svg+xml,%3Csvg width='436' height='127' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='fill:%23f0f;stroke:none' aria-label='fkaoi_'%3E%3Cpath d='m24.624 115.2c0.864 0 1.584-0.576 1.584-1.728v-64.224h21.744c1.008 0 1.584-0.576 1.584-1.44v-7.92c0-1.008-0.576-1.584-1.584-1.584h-21.744v-9.792c0-11.664 4.464-17.28 12.384-17.28 5.184 0 9.072 2.304 11.808 7.92 0.432 0.864 1.152 1.152 2.16 0.864l7.056-2.88c1.008-0.432 1.296-1.152 1.008-2.16-4.752-10.08-12.384-14.976-22.752-14.976-14.112 0-23.904 9.936-23.904 28.224v10.08h-12.24c-1.152 0-1.728 0.576-1.728 1.584v7.92c0 0.864 0.576 1.44 1.728 1.44h12.24v64.224c0 1.152 0.576 1.728 1.728 1.728z'/%3E%3Cpath d='m81.072 115.2c1.008 0 1.584-0.576 1.584-1.728v-25.92l13.248-12.528 26.64 39.168c0.432 0.576 1.008 1.008 2.016 1.008h10.8c1.152 0 1.584-0.864 1.008-2.016l-31.536-46.656 27.792-26.208c1.008-1.008 0.576-2.016-0.864-2.016h-11.664c-0.72 0-1.296 0.144-2.016 0.864l-35.424 34.272v-70.848c0-1.008-0.576-1.584-1.584-1.584h-8.928c-1.008 0-1.728 0.576-1.728 1.584v110.88c0 1.152 0.72 1.728 1.728 1.728z'/%3E%3Cpath d='m177.84 116.78c12.24 0 22.896-6.048 28.368-15.552l0.432 12.24c0 1.296 0.72 1.728 1.728 1.728h7.776c1.008 0 1.584-0.576 1.584-1.728v-73.584c0-1.008-0.576-1.584-1.584-1.584h-7.776c-1.008 0-1.728 0.432-1.728 1.584l-0.432 12.24c-5.472-9.36-16.128-15.264-28.368-15.264-22.32 0-36.72 16.56-36.72 39.888 0 23.328 14.4 40.032 36.72 40.032zm2.304-11.376c-15.696 0-26.496-11.52-26.496-28.656s10.8-28.656 26.496-28.656 26.496 11.52 26.496 28.656-10.8 28.656-26.496 28.656z'/%3E%3Cpath d='m275.04 116.78c23.616 0 39.168-16.992 39.168-40.032 0-23.184-15.552-39.888-39.168-39.888s-39.024 16.704-39.024 39.888c0 23.04 15.408 40.032 39.024 40.032zm0-11.376c-15.696 0-26.496-11.52-26.496-28.656s10.8-28.656 26.496-28.656 26.496 11.52 26.496 28.656-10.8 28.656-26.496 28.656z'/%3E%3Cpath d='m338.4 21.024c4.464 0 8.064-3.168 8.064-7.776 0-4.608-3.6-7.776-8.064-7.776-4.608 0-8.064 3.168-8.064 7.776 0 4.608 3.456 7.776 8.064 7.776zm4.464 94.176c1.008 0 1.584-0.576 1.584-1.728v-73.584c0-1.008-0.576-1.584-1.584-1.584h-8.928c-1.008 0-1.728 0.576-1.728 1.584v73.584c0 1.152 0.72 1.728 1.728 1.728z'/%3E%3Cpath d='m433.73 126.11c0.72 0 1.584-0.72 1.584-1.584v-8.352c0-0.864-0.864-1.728-1.584-1.728h-69.12c-0.576 0-1.44 0.864-1.44 1.728v8.352c0 0.864 0.864 1.584 1.44 1.584z'/%3E%3C/g%3E%3C/svg%3E%0A");
    mask-size: contain;
    mask-position: left;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

.svgIcon {
    display: inline-block;
    height: 2rem;
    width: 2rem;
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}

.svgIcon.tw {
    mask-image: url("data:image/svg+xml,%3Csvg width='492' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m154.73 400c185.67 0 287.2-153.88 287.2-287.31 0-4.37-0.089-8.72-0.286-13.052a205.3 205.3 0 0 0 50.352-52.29c-18.087 8.044-37.55 13.458-57.968 15.899 20.841-12.501 36.84-32.278 44.389-55.852a202.42 202.42 0 0 1-64.098 24.511c-18.42-19.628-44.644-31.904-73.682-31.904-55.744 0-100.95 45.222-100.95 100.96 0 7.925 0.887 15.631 2.619 23.025-83.895-4.223-158.29-44.405-208.07-105.5a100.74 100.74 0 0 0-13.668 50.754c0 35.034 17.82 65.961 44.92 84.055a100.17 100.17 0 0 1-45.716-12.63c-0.015 0.424-0.015 0.837-0.015 1.29 0 48.903 34.794 89.734 80.982 98.986a101.04 101.04 0 0 1-26.617 3.553c-6.493 0-12.821-0.639-18.971-1.82 12.851 40.122 50.115 69.319 94.296 70.135-34.549 27.089-78.07 43.224-125.37 43.224a204.9 204.9 0 0 1-24.078-1.399c44.674 28.645 97.72 45.359 154.73 45.359' fill='%23fff'/%3E%3C/svg%3E");
}

.svgIcon.gh {
    mask-image: url("data:image/svg+xml,%3Csvg width='98' height='96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z' fill='%23fff'/%3E%3C/svg%3E");
}

.ArticleTop {
    position: relative;
    padding: 0 var(--default-padding);
    margin: var(--middle-padding) 0;
    width: 100%;
    margin-bottom: 10rem;
}

.ArticleTop:has(.top_img) {
    margin-bottom: var(--middle-padding);
    min-height: 80vh;
}


.ArticleTop .top_img {
    position: absolute;
    top: 30%;
    right: var(--default-padding);
    width: min(80%, 1000px);
    z-index: -1;
}
.ArticleTop .top_img > img {
    width: 100%;
}

main {
    padding: 0 var(--default-padding);
    margin: var(--middle-padding) 0;
}

:is(article, .styled) {
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.5;
}

:is(article, .styled) p {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .16px;
    line-height: 2;
    padding-top: 2rem;
    margin: 0
}

h1 {
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: .44px;
}

h1+p {
    padding-top: 1rem;
}

:is(article, .styled) :is(h2, h3) {
    font-size: 2rem;
    font-weight: 700;
    padding-top: 4.5rem
}


:is(article, .styled) h3 {
    font-size: 1.6rem;
    padding-top: 4.5rem
}

:is(article, .styled)  :is(ul, ol) {
    margin-left: 2rem;
}

:is(article, .styled) > :is(ul, ol) {
    padding-top: 2rem;
}
:is(article, .styled) li {
    padding-top: 1rem;
}

:is(article, .styled) > :is(ul,ol) > li:first-child {
    padding: 0;
}

:is(article, .styled)> :first-child {
    padding-top: 0;
}

footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--middle-padding);
    padding: var(--middle-padding) var(--default-padding);
    margin-top: 6rem;
    line-height: 2;
    background-color: #e6e6e6;
}


footer ul {
    list-style: none;
    text-align: right;
}

footer .logo_w {
    display: grid;
    gap: .7rem;
    justify-items: start;
}

footer .logo_w .fl {
    display: flex;
    padding-top: .5rem;
    gap: 1rem;
    line-height: normal;
}

footer .logo_w .svgIcon {
    height: 1.5em;
    width: 1.5em;
}

@media screen and (max-width: 767px) {

    :root {
        --default-padding: 2rem;
        --min-padding: 1rem;
        --middle-padding: 2rem;
    }

    .ArticleTop .top_img {
        width: 100%;
        right: 0;
        top: 6em;
    }

    h1 {
        font-size: 2rem;
        font-weight: 700;
    }

    :is(article, .styled) h2 {
        font-size: 1.6rem;
        padding-top: 4rem
    }

    :is(article, .styled) h3 {
        font-size: 1.4rem;
        padding-top: 4rem
    }


    footer {
        grid-template-columns: 1fr;
        gap: 0;
    }

    footer ul {
        text-align: left;
    }

    footer .logo_w {
        margin-top: var(--middle-padding);
        order: 1;
        gap: .5rem;
    }
}

@media screen and (max-aspect-ratio:1/1) {
    .ArticleTop {
        margin-bottom: 5rem;
        min-height: auto;
    }

    .ArticleTop:has(.top_img) {
        margin-bottom: var(--middle-padding);
        min-height: 80vw;
    }
}