/*==========================
共通
============================*/
#h1{
    margin-left: -100vw;
    padding-left: 100vw;
}
main{
    display:grid;
    grid-template-columns: 1fr min( 100vw / 750 * 267 , 267px);
    gap: 0 min( 100vw / 750 * 120 , 120px);
    width:100%;
    max-width:1160px;
    margin:auto;
}

@media screen and (max-width:750px){
    main{
        grid-template-columns: 1fr;
    }
}


/*==========================
article
============================*/
article{
    line-height: calc(1em / 15 * 24);
}
article h2{
    font-size: min(100vw / 375 * ( 22 + 16 ) / 2 , 22px);
    margin-bottom: min( 100vw / 750 * 20 , 20px);
}

article h3{
    font-size: min(100vw / 375 * ( 16.5 + 16 ) / 2 , 16.5px);
    margin-bottom: min( 100vw / 750 * 15 , 15px);
}

article p{
    margin: min( 100vw / 750 * 15 , 15px) auto;
}
article ul li {
    list-style-type: none;
    position: relative;
    padding-left: 1em;
    margin: 0.5em auto;
    }
article ul li:before {
    border-radius: 10000px;
    width: 0.5em;
    height: 0.5em;
    display: block;
    position: absolute;
    left: 0;
    top: 0.65em;
    content: "";
    background: var(--col-accent);
}
article ul li li:before {
    border:2px solid var(--col-accent);
    background:transparent;
}

/*ol指定eole追加*/
article ol  {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
    }

article ol li {
    position: relative;
    padding-left: 1em;
    margin: 0.5em auto;
    }

article ol li:before {
    counter-increment: item;
    content: counter(item)'.';
    font-weight: bold;
    color: var(--col-accent);
    display: inline-block;
    text-align: right;
    position: absolute;
    left: -1.5em;
    width: 2.3em;
}
/*ol指定eole追加ここまで*/

article table{
    border:2px solid var(--bor-color);
    margin: 1em auto;
}
article table :is(th,td){
    padding: min( 100vw / 750 * 8 , 8px) min( 100vw / 750 * 16 , 16px);
    border:1px solid var(--bor-color);
}
article table th{
    background: var(--bac-accent);
    text-align:center;
}


/*==========================
table of contents
============================*/
#toc_container a{
    color: var(--col-main);
}
#toc_container .toc_toggle a{
    color: var(--col-accent);
}
#toc_container a:hover{
    text-decoration: underline;
}
#toc_container.no_bullets li,
#toc_container.no_bullets ul li{
    padding-left: 1em;
}
/*==========================
aside
============================*/
aside h2{
    font-weight:bold;
    margin-bottom: min( 100vw / 750 * 16 , 16px);
    margin-top: min( 100vw / 750 * 32 , 32px);
}

aside ul li a{
    color: var(--col-main);
    padding: min( 100vw / 750 * 10 , 10px);
    display:block;
}

aside ul :is(li:hover, li.current){
    background:var(--bac-accent);
}

@media screen and (max-width:750px){
    aside{
        margin-top: 20px;
        padding-bottom: 16px;
        border-top: 1px solid var(--bor-color);
        border-bottom: 1px solid var(--bor-color);
    }
}