@charset 'utf-8';
/**
 * シングルページのみ読み込むCSS
 */
.stl-main{
    display: grid;
    gap: 0 4em;
}
.stl-singular-header{
    display: grid;
    padding: calc(50% + var(--header-max-h)) 0 1em;
}
.stl-singular-header .stl-article-title-wrap{padding: 0 0 1em;}
.stl-singular-header .stl-article-title{
    min-height: auto;
    font-size: 1.25em;
    -webkit-line-clamp: unset;
}
.stl-singular-header .stl-article-meta-info{padding: 1em 0;}
.stl-article-thumbnail{
    position: absolute;
    width: 100%;
    padding-top: 56.28%;
    top: var(--header-max-h);
    left: 0;
    overflow: hidden;
    z-index: 1;
}
.stl-article-thumbnail:before, .stl-article-thumbnail:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.stl-article-thumbnail:before{
    background-image: var(--thumbnail);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.stl-article-thumbnail:after{
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.stl-article-thumbnail .stl-article-img-wrap{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.stl-article-content p, .stl-article-content ul, .stl-article-content ol{
    line-height: 2;
    margin: 2em 0;
}
.stl-article-content h2, .stl-article-content h3, .stl-article-content h4, .stl-article-content h5, .stl-article-content h6,
.stl-aside-h2{
    font-weight: 700;
}
.stl-article-content h2{
    font-size: 1.25em;
    margin-top: 2.75em;
}
.stl-article-content h3{
    font-size: 1.2em;
    margin-top: 2.5em;
}
.stl-article-content h4{
    font-size: 1.15em;
    margin-top: 2.25em;
}
.stl-article-content h5{
    font-size: 1.1em;
    margin-top: 2.25em;
}
.stl-article-content h6{
    font-size: 1.05em;
    margin-top: 2.25em;
}
.stl-article-content ul li, .stl-article-content ol li{
    position: relative;
    padding-left: 1.5em;
}
.stl-article-content ul li:before{
    content: "";
    position: absolute;
    width: .4em;
    height: .4em;
    top: .9em;
    left: .5em;
    background: rgb(var(--stl-accent-rgb));
}
.stl-article-content ol{counter-reset: ol-counter;}
.stl-article-content ol li{counter-increment: ol-counter;}
.stl-article-content ol li:before{
    content: counter(ol-counter) ".";
    position: absolute;
    color: rgb(var(--stl-accent-rgb));
    top: 0;
    left: .3em;
    font-weight: 700;
    transform: skewX(-15deg);
}
.stl-article-content blockquote{
    position: relative;
    background: #f5f5f5;
    padding: 1em;
    margin: 2em 0;
    z-index: 1;
}
.stl-article-content blockquote:before{
    content: "”";
    position: absolute;
    font-size: 5em;
    font-weight: 700;
    top: .1em;
    right: .25em;
    line-height: 1;
    color: rgb(var(--stl-accent-rgb));
    opacity: .2;
    z-index: -1;
}

/* toc */
.stl-toc-section{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.5em;
    margin: 3em 1em;
    padding: 2em 1em;
    z-index: 1;
    counter-reset: toc-h2-count;
}
.stl-toc-section:before{
    content: "";
    position: absolute;
    height: 100%;
    width: 5em;
    background: rgba(var(--stl-accent-rgb),.2);
    top: 0;    
    left: 0;
    z-index: -1;
}
h2.stl-toc-title{
    margin: 0;
    line-height: 2;
    padding: 1em 0;
}
.stl-toc-toggle-label{
    position: relative;
    width: 5em;
    height: 1.5em;
    border: 1px solid rgb(var(--stl-accent-rgb));
    border-radius: 99px;
}
.stl-toc-toggle-label:before{
    position: absolute;
    content: attr(data-close-label);
    font-size: .8em;
    color: rgb(var(--stl-accent-rgb));
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - .5em), -50%);
}
.stl-toc-toggle-label:after{
    content: "";
    position: absolute;
    width: .4em;
    height: .4em;
    border-top: 2px solid;
    border-right: 2px solid;
    border-color: rgb(var(--stl-accent-rgb));
    top: 50%;
    right: .5em;
    transform: translate(0,-25%) rotate(-45deg);
    transition: .5s;
}
#stlTocSwitch:checked ~ .stl-toc-toggle-label:before{content: attr(data-open-label);}
#stlTocSwitch:checked ~ .stl-toc-toggle-label:after{transform: translate(0, -55%) rotate(135deg);}
.stl-toc-nav-wrap{
    width: 100%;
    max-height: 3000px;
    overflow: hidden;
    transition: .5s;
}
#stlTocSwitch:checked ~ .stl-toc-nav-wrap{max-height: 0;}
ul.stl-toc-list{margin: 0;}
.stl-toc-list .stl-toc-level-2{
    margin-bottom: 1em;
    padding-left: 2.5em;
    counter-increment: toc-h2-count;
}
li.stl-toc-level-2:before{display: none;}
li.stl-toc-level-2:after{
    content: "0" counter(toc-h2-count);
    position: absolute;
    font-size: 1.7em;
    color: rgb(var(--stl-accent-rgb));
    font-weight: 700;
    top: 0;
    left: 0;
    opacity: .25;
    transform: translateY(-.4em);
    z-index: -1;
}
li.stl-toc-level-2:after:nth-of-type(n+10):after{content: counter(toc-h2-count);}
.stl-toc-list .stl-toc-level-3:before{
    width: 1em;
    height: 2px;
    top: 1em;
    left: 0;
}
.stl-toc-link{transition: .3s;}
.stl-toc-link:hover{color: rgb(var(--stl-accent-rgb));}
li.stl-toc-level-2 > .stl-toc-link{
    margin-bottom: 1em;
    font-weight: 700;
}

/* side */
.stl-aside-section{padding: 1em 0;}
.stl-aside-section:first-of-type{padding-top: 0;}
.stl-aside-h2{
    position: relative;
    display: inline-block;
    font-size: 1.15em;
    padding: 1em 1.5em 1em .5em;
}
.stl-aside-h2:before{
    content: "";
    position: absolute;
    width: 1em;
    height: 2px;
    background: rgb(var(--stl-accent-rgb));
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.stl-related-list .stl-article-card{border-bottom: 1px solid #ddd;}
.stl-related-list .stl-article-card:first-of-type{border-top: 1px solid #ddd;}
.stl-related-list .stl-article-card-grid{
    grid-template-columns: 6.5em 1fr;
    gap: 0 .5em;
}
.stl-related-list .stl-article-title-wrap{padding: 0 .5em;}
.stl-related-list .stl-article-title{-webkit-line-clamp: 3;}
.stl-related-list .stl-article-img-wrap{padding-top: 100%;}

/* Tab & PC */
@media(min-width: 576px){
    .stl-singular-header, .stl-singular-aside{padding-top: 26.5em;}
    .stl-article-thumbnail{
        padding-top: 0;
        height: 25em;
    }
    .stl-article-thumbnail .stl-article-img-wrap{
        width: 75%;
        max-width: 750px;
    }
    .stl-article-content h2{font-size: 1.5em;}
    .stl-article-content h3{font-size: 1.4em;}
    .stl-article-content h4{font-size: 1.3em;}
    .stl-article-content h5{font-size: 1.2em;}
    .stl-article-content h6{font-size: 1.1em;}
}

/* PC */
@media(min-width: 992px){
    .stl-main{grid-template-columns: calc(100% - (30% + 4em)) 30%;}
    .stl-singular-header .stl-article-title{font-size: 1.6em;}
    .stl-related-list .stl-article-title{font-size: 1.1em;}
}