/* 変数 */
:root {
    --inner_max_width: 1400px;
    --theme-color: #a30116;
    --point-color: #FF798E;
    --point-font: 'M PLUS 1 Code', sans-serif;
    --font-code: Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;
    --type-code-regular: 400 0.875rem/1.5 var(--font-code);
}

/* 全体 */
* {
    box-sizing: border-box;
    color: #333;
    font: inherit;
}
html, body {
    color: inherit;
    font-size: 16px;
    background-color: #f1f1f1;
    font-family: 'M PLUS 1 Code', Verdana, Geneva, Tahoma, sans-serif;
}
a {
    font-size: inherit;
    color: var(--point-color);
}

/* 枠 */
.container {
    display: flex;
    flex-direction: column;
}
.header_inner,
.main_inner,
.footer_inner {
    width: 98%;
    max-width: var(--inner_max_width);
    margin: 0 auto;
}

/* ヘッダー */
.header {
    width: 100%;
    background-color: #FFF;
    padding: .5em;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.header a {
    text-decoration: none;
}
.header_inner {
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    padding-left: .5em;
    padding-right: .5em;
}
.header_title {
    font-family: var(--point-font);
    font-weight: normal;
    letter-spacing: .1em;
    color: #111;
    padding: 0;
    margin-block-start: .2em;
    margin-block-end: .2em;
    font-size: 1.8em;
}
.header_title_emphasis {
    color: #111;
    font-weight: bold;
    font-size: inherit;
}

/* ハンバーガー */
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 8px;
    top   : 8px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}
.hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #BBBBBB;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
    top: 10px;
}
.hamburger span:nth-child(2) {
    top: 20px;
}
.hamburger span:nth-child(3) {
    top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.global-menu {
    position: fixed;
    z-index : 2;
    top: 0;
    left: 0;
    color: #fff;
    background-color: #333;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    display: none;
    transition: opacity .6s ease, visibility .6s ease;
}
nav.global-menu ul.menu {
    padding: .5em;
    width: 100%;
    list-style-type: none;
}
nav.global-menu ul.menu > li {
    padding: .5em;
    display: block;
    transition: all 0.2s 0s ease;
    background-color: #333;
    color: #FFF;
    border-radius: 2px;
}
nav.global-menu ul.menu > li > a {
    font-weight: bold;
    font-size: 1.5em;
    display: flex;
    cursor: pointer;
    text-decoration :none;
    padding: .5em;
    letter-spacing: .1em;
    color: inherit;
}
nav.global-menu ul.menu ul {
    background-color: #FFF;
    border-radius: 4px;
    margin-left: .5em;
    padding: 0;
    list-style-type: none;
}
nav.global-menu ul.menu ul > li {
    padding: 1em;
    border-bottom: solid 1px #333;
}
nav.global-menu ul.menu ul > li > a {
    font-size: 1.2em;
    color: inherit;
    display: block;
}
nav.global-menu.active {
    opacity: 100;
    display: block;
}

/* アイコン */
.withFile::before {
    font-family: 'Material Icons';
    content: "\e226";
    margin-right: 4px;
}
.withBook::before {
    font-family: 'Material Icons';
    content: "\e865";
    margin-right: 4px;
}
.withDl::before {
    font-family: 'Material Icons';
    content: "\e2c4";
    margin-right: 2px;
}
.withFlower::before {
    font-family: 'Material Icons';
    content: "\e3e3";
    margin-right: 2px;
}
.withPen::before {
    font-family: 'Material Icons';
    content: "\e3c9";
    margin-right: 2px;
}
.withArrowUp::before {
    font-family: 'Material Icons';
    content: "\e5d8";
    margin-right: 2px;
}
.withHome::before {
    font-family: 'Material Icons';
    content: "\e88a";
    margin-right: 2px;
}
.withChild::after {
    font-family: 'Material Icons';
    content: "\e5cf";
    margin-right: 2px;
    display: block;
    position: relative;
    top: 2px;
}

/* メイン */
.main {
    padding: .2em 0;
    margin-top: 70px;
}
.main_title {
    display: block;
    margin: 1rem;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: .1em;
}
.main_section {
    width: 100%;
    padding: 0.5em;
}
.main_section_title {
    width: 100%;
    max-width: 1000px;
    position: relative;
    display: block;
    margin: .5em auto;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: .1em;
    padding: .5em;
    border-bottom: solid 1px var(--theme-color);
}
.main_section_content {
    margin: 1em auto;
    padding: .5em;
    max-width: 1000px;
}
.main_section_content.note_content {
    max-width: 800px;
    background-color: #FFF;
    border-radius: 8px;
}
.main_section_content > p {
    margin: 1em .5em;
    line-height: 1.7em;
}
.main_section_content > p:first-child {
    margin-top: 0;
}
.main_section_content > p:last-child {
    margin-bottom: 0;
}
.main_section_list {
    list-style: none;
    padding-left: 0;
}

/* ダウンロード */
.download_box {
    margin: 0em 1em;
    display: inline-block;
    padding: .8em 2em;
    background-color: var(--theme-color);
    border: solid 1px var(--theme-color);
    color: #FFF;
    border-radius: 8px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: all 0.2s 0s ease;
    text-decoration: none;
}
.download_box::after {
    font-family: 'Material Icons';
    content: "\e2c4";
    margin-right: 2px;
    position: relative;
    top: .2em;
}

/* サイド */
.main-toc {
    padding: .5em;
    margin: 2em 1em;
    border: solid 1px #aaa;
    border-radius: 8px;
}
.main-toc header {
    margin: .2em;
    margin-left: 0;
    padding-bottom: 0;
    font-weight: bold;
}
.main-toc-heading {
    margin: 0;
    color: var(--theme-color);
    letter-spacing: .1em;
    display: flex;
    align-items: center;
}
.main-toc-heading::before {
    font-family: 'Material Icons';
    content: "\e5d2";
    margin-right: .2em;
    font-size: 1.5em;
}
.main-toc-heading::after {
    content: "IN THIS ARTICLE";
}
.main-toc ul {
    margin-left: .5em;
    padding-left: 0;
    margin-top: .5em;
    margin-block-end: 0;
    margin-inline-start: 0;
}
.main-toc .main-toc-list {
    padding-top: .5em;
    padding-bottom: .5em;
    padding: .5em;
}
.main-toc .main-toc-child-list {
    margin-left: 1em;
}
.main-toc li {
    list-style-type: none;
    padding: .3em;
}
.main-toc a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.main-container {
    margin: 1em 0;
}
.main-toc-container {
    display: none;
}

/* ページ内リンクのズレ解消用（ヘッダー固定分） */
.toc-target {
    margin-top: -70px;
    padding-top: 70px;
}

/* フッター */
.footer {
    width: 100%;
    background-color: #000;
}
.footer_inner {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
small {
    color: #FFF;
}

/* 上へボタン */
.upButton {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 1em;
    right: 1.5em;
    border-radius: 50%;
    background-color: var(--point-color);
    width: 3.5em;
    height: 3.5em;
    color: #FFF;
    opacity: .4;
    cursor: pointer;
    z-index: 100;
}
.upButton::before {
    font-family: 'Material Icons';
    font-size: 2em;
    content: "\e5d8";
    display: block;
}
.upButton.active {
    display: flex;
}

/* PC用 */
@media screen and (min-width:1025px) {

    /* 全体用 */
    a:hover {
        position: relative;
        top: 1px;
        left: 1px;
    }

    /* メニュー */
    .hamburger {
        display: none;
    }
    nav.global-menu {
        position: relative;
        background: none;
        width: fit-content;
        height: fit-content;
        display: block;
        color: #000;
        opacity: 1;
        padding: 0;
        margin: 0;
    }
    nav.global-menu ul.menu {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 6px;
    }
    nav.global-menu ul.menu > li {
        background: inherit;
        position: relative;
        padding: .5em;
        display: block;
        cursor: pointer;
        transition: all 0.2s 0s ease;
        border: none;
    }
    nav.global-menu ul.menu > li > a {
        font-size: inherit;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
        letter-spacing: .1em;
    }
    nav.global-menu ul.menu > li:hover > a {
        color: var(--point-color);
        text-decoration: none;
    }
    nav.global-menu ul.menu > li ul {
        display: none;
        list-style-type: none;
        position: absolute;
        top: 3.2em;
        padding: 0;
        margin: 0;
        z-index: 5;
        border: solid 1px #333;
    }
    nav.global-menu ul.menu > li ul::after,
    nav.global-menu ul.menu > li ul::before {
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        pointer-events: none;
        position: absolute;
        bottom: 100%;
        left: 32%;
    }
    nav.global-menu ul.menu > li ul::after {
        border-color: rgba(255, 255, 255, 0);
        border-top-width: 15px;
        border-bottom-width: 15px;
        border-left-width: 13px;
        border-right-width: 13px;
        margin-left: -13px;
        border-bottom-color: #FFF;
    }
    nav.global-menu ul.menu > li ul::before {
        border-color: rgba(51, 51, 51, 0);
        border-top-width: 16px;
        border-bottom-width: 16px;
        border-left-width: 14px;
        border-right-width: 14px;
        margin-left: -14px;
        margin-bottom: 1px;
        border-bottom-color: #333;
    }
    nav.global-menu ul.menu > li:hover ul {
        display: block;
    }
    nav.global-menu ul.menu > li ul > li {
        padding: .4em;
        border: none;
    }
    nav.global-menu ul.menu > li ul > li > a {
        display: flex;
        font-size: inherit;
        justify-content: center;
        align-items: center;
        padding: .8em 2.5em;
        background-color: #333;
        color: #FFF;
        border-radius: 4px;
    }
    nav.global-menu ul.menu > li ul li:hover > a {
        background-color: var(--point-color);
        text-decoration: none;
    }
    nav.global-menu ul.menu * {
        white-space: nowrap;
    }

    /* メイン */
    .main {
        padding: 1em 0;
        margin-top: 60px;
    }
    .main_inner {
        display: flex;
        gap: 1em;
        justify-content: center;
    }
    .main-toc-heading::after {
        content: "IN THIS ARTICLE";
    }
    .main-container {
        order: 1;
    }
    .main-toc-container {
        display: block;
        order: 2;
    }
    .main-toc {
        border: none;
        margin-top: 20px;
        padding: 1em;
        position: sticky;
        top: 56px;
        font-size: 0.9em;
    }
    .main-toc ul {
        margin-left: .5em;
        padding-left: 0;
        margin-top: .5em;
    }
    .main-toc header {
        margin: .2em;
        margin-left: 0;
        padding: 0 .5em ;
        font-weight: bold;
        border: none;
    }
    .main-toc-list {
        border-top: solid 3px var(--theme-color);
        border-bottom: solid 3px var(--theme-color);
    }
    .main-toc a[aria-current] {
        font-weight: bold;
        color: var(--theme-color);
    }
    .main-toc a:hover {
        color: var(--point-color);
    }
    .main-container .main-toc {
        display: none;
    }
    .main_title {
        text-align: left;
        font-size: 2.5em;
    }

    /* ダウンロード */
    .download_box:hover {
        background-color: var(--point-color);
    }

    /* 上へボタン */
    .upButton {
        border-radius: 16px;
        width: 4em;
        height: 4em;
        right: max(calc(((100% - var(--inner_max_width)) / 2)), 2%);
    }
    .upButton:hover {
        opacity: 1;
    }

}