html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
menu,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background-color: rgba(0, 0, 0, 0)
}

body {
    line-height: 1
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}

ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
    content: none
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: rgba(0, 0, 0, 0)
}

hr {
    display: block;
    height: 1px;
    border: 0;
    margin: 0;
    padding: 0
}

input,
button,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border-radius: 0
}

select {
    outline: 0;
    border-radius: 0
}

input,
textarea {
    padding: 0;
    background-color: inherit;
    border: none
}

iframe[name=google_conversion_frame] {
    height: 0 !important;
    width: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    margin-top: -13px
}

.text {
    margin-inline: 15px;
    padding-top: 153px
}

.story-modal-wrapper {
    margin-bottom: 20px;
}

@media screen and (min-width: 835px) {
    .text {
        margin-inline: 30px auto;
        padding-top: 201px;
        width: 75%
    }

    .single-story-wrapper {
        background-color: #d9d9d9;
    }

    .story-modal-wrapper {
        background-color: #FFFFFF;
        padding: 40px 60px 40px 60px;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 1000px) {
    .text {
        min-width: 750px;
        width: 48.828125%
    }
}

.article {
    padding-bottom: 203px
}

.article__title {
    font-feature-settings: "palt";
    font-size: 1.6rem;
    letter-spacing: .05em;
    line-height: 2.72rem
}

@media screen and (min-width: 835px) {
    .article__title {
        font-size: 1.7rem;
        line-height: 2.89rem;
        letter-spacing: .03em
    }
}

.article__date {
    display: block;
    margin-top: 15px;
    font-size: 1.2rem;
    line-height: 1.65rem;
    color: #bfbfbf
}

@media screen and (min-width: 835px) {
    .article__date {
        margin-top: 18px;
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .03em
    }
}

.article__content {
    margin-top: 54px
}

@media screen and (min-width: 835px) {
    .article__content {
        margin-top: 84px
    }
}

.modal__open {
    display: block;
    width: 100%
}

.modal__open__imageWrapper {
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.modal__image {
    display: block;
    width: 100%
}

@media screen and (min-width: 835px) {
    .modal__image.resize {
        width: 100%;
        height: 100%;
    }
}

.modal__thumbnailWrapper {
    position: relative
}

.modal__thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    -o-object-fit: cover;
    object-fit: cover
}

.modal__thumbnailIcon {
    width: 6.6666666667%;
    max-width: 24px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

@media screen and (min-width: 835px) {
    .modal__thumbnailIcon {
        width: 5.3333333333%;
        max-width: 40px;
        left: 47.3333333333%;
        transform: translate(0, -50%)
    }
}

.modal__caption {
    margin-top: 18px;
    font-size: 1.1rem;
    line-height: 2.09rem;
    text-align: justify
}

@media screen and (min-width: 835px) {
    .modal__caption {
        font-size: 1.3rem;
        line-height: 2.47rem
    }
}

.modal-content {
    display: grid;
    grid-template-rows: 97px 1fr 98px;
    justify-items: center;
    width: 100vw;
    height: calc(var(--dvh, 1vh)*100);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    background-color: #f3f3f3;
    transition: opacity 1s
}

.modal-content[aria-hidden=true] {
    transition: opacity .8s, visibility 0s .8s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

@supports(height: 100dvh) {
    .modal-content {
        height: 100dvh
    }

    @media screen and (min-width: 835px) {
        .modal-content {
            height: 100%
        }
    }
}

.modal-content__inner {
    grid-row: 2/3;
    width: 100%;
    max-width: 1190px;
    min-height: 0
}

.modal-content__mediaWrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr minmax(0, auto) 1fr;
    justify-items: center;
    height: 100%
}

.modal-content__image {
    grid-row: 2;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.modal-content__movieWrapper {
    grid-row: 2;
    height: 100%
}

.modal-content__movie {
    display: block;
    width: 100%;
    height: 100%
}

.modal-content__vimeo {
    grid-row: 2;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9
}

.modal-content__vimeo iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%
}

.modal-content__youtube {
    grid-row: 2;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9
}

.modal-content__close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.3rem
}

@media screen and (min-width: 835px) {
    .modal-content__close {
        width: 98px;
        height: 59px;
        font-size: 1.4rem;
        transition: all .3s
    }

    .modal-content__close:hover {
        color: #8f8f8f
    }
}

.details__heading {

    font-feature-settings: "palt";
    font-size: 1.4rem;
    line-height: 2.66rem;
    letter-spacing: .05em
}

@media screen and (min-width: 835px) {
    .details__heading {
        font-size: 1.6rem;
        line-height: 3.04rem;
        letter-spacing: .03em
    }
}

.details__text p {
    font-feature-settings: "palt";
    font-size: 1.3rem;
    line-height: 2.47rem;
    letter-spacing: .03em
}

@media screen and (min-width: 835px) {
    .details__text p {
        font-size: 1.3rem;
        line-height: 2.431rem
    }
}

.details__text p strong {

    font-weight: 400
}

.details__text p a {
    color: #8f8f8f;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-wrap: break-word
}

@media screen and (min-width: 835px) {
    .details__text p a {
        transition: all .2s ease-out
    }

    .details__text p a:hover {
        color: #bfbfbf
    }
}

.details__text p+.twitter-tweet {
    margin-top: 15px !important
}

@media screen and (min-width: 835px) {
    .details__text p+.twitter-tweet {
        margin-top: 25px !important
    }
}

.details__text+.details__text {
    margin-top: 40px
}

.details__heading+.details__text {
    margin-top: 12px
}

@media screen and (min-width: 835px) {
    .details__heading+.details__text {
        margin-top: 29px
    }
}

.details__text+.details__heading {
    margin-top: 40px
}

@media screen and (min-width: 835px) {
    .details__text+.details__heading {
        margin-top: 60px
    }
}

.modal+.modal {
    margin-top: 15px
}

@media screen and (min-width: 835px) {
    .modal+.modal {
        margin-top: 30px
    }
}

.line {
    border-top: solid 1px #d5d1ca
}

.details+.details,
.details+.modal,
.details+.line,
.details+.sns,
.modal+.details,
.modal+.line,
.modal+.sns,
.line+.details,
.line+.modal,
.line+.sns,
.sns+.details,
.sns+.modal,
.sns+.line,
.sns+.sns {
    margin-top: 40px
}

@media screen and (min-width: 835px) {

    .details+.details,
    .details+.modal,
    .details+.line,
    .details+.sns,
    .modal+.details,
    .modal+.line,
    .modal+.sns,
    .line+.details,
    .line+.modal,
    .line+.sns,
    .sns+.details,
    .sns+.modal,
    .sns+.line,
    .sns+.sns {
        margin-top: 60px
    }
}

.footer-nav {
    padding: 0 15.7px 17px;
    display: flex;
    justify-content: space-between
}

@media screen and (min-width: 835px) {
    .footer-nav {
        box-sizing: border-box;
        padding: 0 29px 26px 30px;
        width: 100%;
        position: fixed;
        bottom: 0
    }
}

.footer-nav__index {
    font-size: 1.3rem
}

@media screen and (min-width: 835px) {
    .footer-nav__index .footer-nav__indexLink {
        text-align: center;
        transition: all .3s
    }

    .footer-nav__index .footer-nav__indexLink:hover {
        color: #8f8f8f
    }
}

.footer-nav__navList {
    display: flex;
    gap: 18px
}

@media screen and (min-width: 835px) {
    .footer-nav__navList {
        gap: 17px
    }
}

.footer-nav__navItem {
    font-size: 1.3rem;
    text-align: center
}

@media screen and (min-width: 835px) {
    .footer-nav__navItem .footer-nav__navLink {
        display: block;
        transition: all .3s
    }

    .footer-nav__navItem .footer-nav__navLink:hover {
        color: #8f8f8f
    }
}

.footer-nav__navItem.inactive {
    color: #bfbfbf
}