@font-face {
    font-family: 'Times New Roman';
    font-style: italic;
    src: url('/fauna/story/interview/fonts/TimesNewerRoman-Italic.otf');
}

@font-face {
    font-family: Avenir;
    src: url('/fauna/story/interview/fonts/AvenirLTStd-Black.woff');
}

.container.header_area {
    width: 100%;
}


article {
    font-family: ten-mincho-text, serif;
    -webkit-font-smoothing: antialiased;
    font-size: 16.8px;
    letter-spacing: 0.02em;
    line-height: 2.14;
    background: #f5f5f5;
    
}
.container, .article_container {
    margin: auto;
    width: 95%;
}
.container {
    max-width: 1000px;
}
.interview_header {
    background: white;
    border-top: 12px solid;
    border-bottom: 10px solid;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.interview_header .address {
    font-family: 'Times New Roman';
    font-style: italic;
    font-size: 10.8px;
    line-height: 1.2;
}

.interview_header .interview_title_area {
    text-align: center;
    line-height: 1;
}

.interview_header .interview_title_area .interview_sub_title {
    font-family: Avenir;
    font-weight: 900;
    font-size: 10px;
}
.interview_header .interview_title_area .interview_sub_title span {margin-left: .8em;}

.interview_header .interview_title_area .interview_title {
    font-family: Amador;
    font-size: 78px;
    margin-top: .05em;
    margin-bottom: -.15em;
}

.interview_header .date {
    font-family: 'Bodoni 72 Oldstyle', bodoni-urw, serif;
    width: 80px; height: 80px;
    font-weight: bold;
    font-size: 10.8px;
    text-align: center;
    background: black;
    color: #fff;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.interview_header .date .month {
    margin-top: 3px;
}

.interview_header .date .vol {
    position: relative;
    margin-top: 8px;
    font-style: italic;
    font-size: 18px;
}

.interview_header .date .vol:before {
    content: '';
    position: absolute;
    height: 1px; width: 42px;
    top: 0; left: 50%;
    background: white;
    transform: translateX(-50%);
}

.interview_header .date .vol span {
    font-size: 1.67em;
}

.article_header {
    position: relative;
}
.article_container {
    max-width: 600px;
}
.article_title {
    position: absolute;
    left: 8%; top: 19%;
    font-family: 'Bodoni 72', bodoni-urw, serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
}

.article_title span {
    display: block;
}

.article_title span:nth-of-type(2) {font-size: 2em;}
.article_title span:last-of-type {
    font-size: 3.33em;
    padding-left: 1em;
}

.article_subtitle {
    position: absolute;
    left: 14%; top: 57.5%;
    font-size: 18px;
    line-height: 1.67;
    text-shadow: 0px 0px 2px white;
}

article section.lead {
    margin-top: 2.78571428571em;
}

article section.last {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    padding: 4.80357142857em 0;
}

article section + section,
article section .staff_credit {margin-top: 3.17857142857em;}
article section.lead + section {margin-top: 5.17857142857em;}
article section + section.last {margin-top: 5.80357142857em;}
article section.last + section.after_edit {margin-top: 4.80357142857em;}

article section p + p,
article section p + img,
article section.after_edit h1 + p {margin-top: 3.17857142857em;}

article section h1 + p {margin-top: 1em;}
article section.after_edit p + img {margin-top: 0;}

article section h1 {
    font-family: inherit;
    position: relative;
    font-weight: bold;
}

article section h1,
.article_subtitle {
    padding-left: 3em;
}

article section h1:before,
.article_subtitle:before {
    content: '';
    position: absolute;
    height: 1px; width: 2.5em;
    left: 0;
    top: calc((100% / 3) / 2); /* 3 行ある内の 1 行分の、さらに中間 */
    background: black;
}
article section h1:before {top: calc(2.14em / 2 - .5px);}

article section .indent_list {
    padding-left: 1em;
}


@media screen and (max-width: 1000px) {
    .article_title {
        font-size: 1.8vw;
    }

    .article_subtitle {
        font-size: 1.8vw;
    }
}

@media screen and (max-width: 820px) {
    header a {
        width: 180px;
    }

    footer .container {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    footer a,
    footer p {
        margin: 0;
    }

    footer a {
        width: 90px;
    }

    footer p {
        font-size: 10px;
    }

    article {
        font-size: 14px;
    }
}

@media screen and (max-width: 700px) {
    .interview_header {
        justify-content: center;
    }

    .interview_header .address,
    .interview_header .date {
        display: none;
    }

}

@media screen and (max-width: 600px) {
    .interview_header .interview_title_area .interview_title {
        font-size: calc(8vw + 30px);
    }

    article section h1,
    .article_subtitle {padding-left: 2.5em;}
    article section h1:before,
    .article_subtitle:before {width: 2em;}
}

@media screen and (max-width: 540px) {
    .article_subtitle {
        line-height: 1.4;
    }
}

@media screen and (max-width: 540px) {.article_subtitle {top: 59%;}}
@media screen and (max-width: 480px) {
    .article_title {top: 15%;}
    .article_subtitle {top: 57%;}
}
@media screen and (max-width: 410px) {.article_subtitle {top: 54%;}}
@media screen and (max-width: 350px) {
    .article_subtitle {
        line-height: 1.2;
    }

    .article_subtitle {top: 54%;}
}

@media screen and (max-width: 350px) {
    .interview_header .interview_title_area .interview_sub_title {
        text-align: left;
        line-height: 1.2;
    }

    .interview_header .interview_title_area .interview_sub_title span {
        margin-left: 0;
        display: block;
    }
}