@charset 'utf-8';
/**
 * 脚注ボックスのCSS
 */
.footnote-link{
    color: rgba(var(--blue));
    text-decoration: underline;
}
.footnote-wrap{
    position: relative;
    display: table;
    padding: 2em 1em;
    margin: 4em auto 0;
    background: rgba(var(--light-blue),.08);
    border: 2px solid rgba(var(--light-blue),.2);
    border-radius: 5px;
    line-height: 2;
    max-width: 900px;
}
.footnote-title{
    display: block;
    position: absolute;
    font-weight: 700;
    color: #fff;
    padding: 0 2em;
    background: rgb(var(--light-blue));
    border-radius: 99px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    white-space: nowrap;
}
.footnote-item{
    display: grid;
    grid-template-columns: 2em 1fr;
    margin: 2em;
    scroll-margin-top: 50vh;
}
.footnote-item:first-of-type{margin-top: .5em;}
.footnote-item:first-of-type, .footnote-item:nth-of-type(2),
.footnote-item:nth-of-type(3), .footnote-item:nth-of-type(4){scroll-margin-top: var(--header-height);}
.footnote-item:last-of-type{margin-bottom: .5em;}
@media(max-width: 991px){
    .footnote-link{line-height: 2.5;}
}
@media(max-width: 575px){
    .footnote-item{margin: 2em 0;}
}