/* タイトル周り */

#maincol h1 {
    font-size: 2rem;
    margin: 10px 0;
    line-height: 1.4;
}

@media screen and (max-width: 1100px) {
    #maincol h1 {
        font-size: 1.6rem;
    }
}

.tags {
    margin: 15px 0;
}

/* イベントバナー */

.event-banner-link-wrapper {
    text-decoration: none;
    display: block;
    width: fit-content;

    &:hover {
        text-decoration: none;
    }

    &:active {
        text-decoration: none;
    }
}

.event-banner {
    display: flex;
    align-items: center;
    background: #418d45;
    padding: 5px 10px;
    color: #eee;
    border-radius: 10px;
    width: fit-content;
    transition-duration: .2s;

    &:hover {
        background-color: #3a7f3e;
        transition-duration: .2s;
    }

    p {
        margin: 0;
    }

    img {
        display: block;
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }
}

/* 記事本文 */

#maincol article {
    >* {
        margin-top: 15px;
    }

    h2 {
        font-size: 1.5rem;
        margin-top: 40px;
    }

    h3 {
        font-size: 1.2rem;
        margin-top: 30px;
    }

    h2+h3 {
        margin-top: 15px;
    }

    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }

    figure img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }
}

.code-filename {
    /* ファイル名のやつ */
    font-family: "Source Code Pro", "M PLUS 1 Code", Consolas, monospace;
    background-color: #555;
    width: fit-content;
    padding: 0 10px;
    border-radius: 10px 10px 0 0;
    color: #eee;
}

pre {
    overflow: auto;
}

div.code-filename+pre {
    margin-top: 0;
}

code {
    font-family: "Source Code Pro", Consolas, monospace;
    color: #eee;
    background-color: #333;
    font-size: 90%;
    margin: 0 5px;
    padding: 2px 4px;
    border-radius: 6px;
    display: inline;
    vertical-align: 1px;
    word-break: break-all;
}

pre code {
    padding: 2px;
    margin: 0;
    padding: 0;
    border-radius: 20px;
    word-break: break-all;
    line-height: 1.5;
}

/* ファイル名があるなら 0 20px 20px; */
div.code-filename+pre code {
    border-radius: 0 20px 20px;
}

table {
    border-collapse: collapse;
    width: 100%;
    border: 2px solid #999;
    margin: 10px 0;
}

#maincol table p {
    margin: 0;
}

td,
th {
    border: 1px solid #999;
    padding: 0 5px;
}

th {
    background-color: #ccc;
}

.iframely-embed {
    margin: 10px 0;
}

/* カスタムclass */

.spoiler {
    background-color: #333;
    color: #333;
    padding: 0 5px 2px;
    transition-duration: .2s;
    user-select: none;

    &:hover,
    &:active {
        color: #eee;
        transition-duration: .2s;
    }
}

/* information-block */
.warning,
.caution,
.info,
#time-course-warning {
    display: flex;
    margin: 10px 0;
    padding: 20px;
    border-radius: 10px;
}

.warning {
    background-color: #fdd;
    border: 2px solid rgb(223, 86, 86);
}

.caution {
    background-color: #fdb;
    border: 2px solid rgb(235, 140, 28);
}

.info {
    background-color: #dfd;
    border: 2px solid rgb(11, 177, 34);
}

#time-course-warning {
    background-color: rgb(170, 204, 255);
    border: 2px solid rgb(51, 128, 245);
}

.warning::before,
.caution::before,
.info::before,
#time-course-warning::before {
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    flex-shrink: 0;
}

.warning::before {
    content: url("/assets/warning.svg");
}

.caution::before {
    content: url("/assets/caution.svg");
}

.info::before {
    content: url("/assets/info.svg");
}

#time-course-warning::before {
    content: url("/assets/time-course.svg");
}

#time-course-warning {
    display: none;
}


/* シェアボタン周りのウィジェットラッパー */

.widget-wrapper {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}

.widget-child-wrapper {
    margin: 3px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

#misc-share {
    background-color: #dfd;
    border: 2px solid rgb(11, 177, 34);
    border-radius: 5px;
    padding: 0 5px;

    img {
        display: inline-block;
        margin-right: 5px;
    }

    &:hover {
        background-color: #cfc;
    }
}

/* 目次（横） */
.toc-side {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    display: flex;
    flex-direction: column;

    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }

    #toc-side-wrapper {
        list-style-type: none;
        margin: 0;
        font-weight: bold;

        a {
            display: block;
            width: 100%;
            text-decoration: none;

            color: #666;
            font-size: 0.95rem;
            line-height: 1.5;
            padding: 3px 5px;
            border-radius: 0 5px 5px 0;
            transition-duration: .2s;

            &:hover {
                background-color: #ddd;
                box-shadow: -4px 0 #418d45;
                transition-duration: .2s;
            }
        }

        .toc-side-item-h3 {
            font-size: 0.85rem;
            margin-left: 20px;
            width: calc(100% - 20px);
            font-weight: normal;
        }
    }
}

/* 目次（記事内トップ） */
#toc-atcbody-wrapper {
    padding: 20px;
    border-radius: 20px;
    background-color: #ddd;

    display: flex;
    flex-direction: column;
    gap: 5px;

    .toc-atcbody-title {
        font-size: 1.1rem;
        font-weight: bold;
        line-height: 1;
        
        &:before {
            content: "▶";
            margin-right: 5px;
        }
    }

    &[open] .toc-atcbody-title:before {
        content: "▼";
    }

    ul {
        line-height: 1.5;
        list-style-type: none;
        margin-left: 0;
        margin-top: 10px;

        a {
            display: block;
            width: 100%;
            color: #555;
            text-decoration: none;
            padding: 3px 5px;
            border-radius: 0 5px 5px 0;
            transition-duration: .2s;
            font-size: 0.95rem;
            font-weight: bold;

            &:hover {
                background-color: #ccc;
                box-shadow: -4px 0 #418d45;
                transition-duration: .2s;
            }
        }

        .toc-atcbody-item-h3 {
            font-size: 0.85rem;
            margin-left: 20px;
            width: calc(100% - 20px);
            font-weight: normal;
        }
    }
}

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

    /* 狭いときは横目次を非表示 */
    .toc-side {
        display: none;
    }
}