@charset "utf-8";

section.list {
    padding-block: var(--m8);
    background: var(--gray);
}
section.list .block {
    display: flex;
    flex-wrap: wrap;
    background: white;
}
section.list .block + .block {
    margin-top: var(--m6);
}
section.list .thumbnail {
    width: 30%;
}
section.list .text {
    flex: 1;
    padding-block: var(--m2);
    padding-inline: var(--m2);
    display: flex;
    flex-direction: column;
}
section.list .block .date {
    color: var(--blue-gray);
    padding-bottom: 0.5lh;
    border-bottom: 1px solid var(--dark-gray);
    margin-bottom: 0.5lh;
}
section.list .block h2 {
    font-size: var(--fs27);
    line-height: 1.5;
}
section.list .nav-post {
    margin-top: auto;
    margin-left: auto;
}
@media screen and (max-width: 767px) {
    section.list .thumbnail {
        width: 100%;
    }
    section.list .block h2 {
        font-size: var(--fs21);
    }
    section.list .nav-post {
        margin-top: var(--m2);
        margin-inline: auto;
    }
}

body.post section#hero {
    min-height: 400px;
    padding-block: 0;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
}
body.post section#hero::before {
    background: var(--navy);
}
section#hero .label {
    font-size: var(--fs48);
    font-weight: 600;
    color: var(--navy);
}
section#hero .eyecatch {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

article {
    padding-block: var(--m8);
}
article h1 {
    font-size: var(--fs39);
    font-weight: 600;
    padding-bottom: var(--m6);
    border-bottom: 2px solid var(--navy);
}
article :is(h2, h3, h4, h5, h6, strong) {
    font-weight: 600;
}
article :is(h2, h3, h4, h5, h6) {
    line-height: 1.5;
    margin-bottom: 0.5lh;
}
article * + :is(h2, h3, h4, h5, h6) {
    margin-top: 2.5lh;
}
article h2 {
    font-size: var(--fs33);
}
article h3 {
    font-size: var(--fs27);
}
article h4 {
    font-size: var(--fs24);
}
article h5 {
    font-size: var(--fs21);
}
article h6 {
    font-size: var(--fs18);
}
article :is(p, figcaption) {
    font-weight: 400;
}
article  {
    max-width: 70%;
    margin-inline: auto;
}
article :is(figure, img) {
    margin-block: var(--m5);
    max-width: 70%;
    margin-inline: auto;
}
article figure img {
    margin-block: 0;
    max-width: 100%;
    margin-inline: 0;
}
article figure figcaption {
    color: var(--blue-gray);
}
article :is(ul, ol) {
    margin-block: var(--m5);
    padding-inline: 3.5ic 2ic;
    padding-block: 1.5lh;
    background: var(--gray);
}
article ul {
    list-style: disc;
}
article ol {
    list-style: decimal;
}
article li + li {
    margin-top: 0.5lh;
}
article table {
    max-width: 100%;
    border: 1px solid var(--blue-gray);
}
article table caption {
    text-align: center;
    margin-bottom: 0.75lh;
}
article :is(th, td) {
    padding-block: 0.5lh;
    padding-inline: 2ic;
}
article tr:not(:first-of-type) :is(th, td) {
    border-top: 1px solid var(--blue-gray);
}
article :is(th, td):not(:first-child) {
    border-left: 1px solid var(--blue-gray);
}
article th {
    background: var(--gray);
    font-weight: 600;
}

/* 記事冒頭のアイキャッチ（一覧サムネイルと同じ画像を使う）
   article 配下の img は 70% 幅で中央寄せになるため、ここでは全幅で表示させる */
article .blog-eyecatch {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-block: var(--m5);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* 記事冒頭の要約ボックス */
.blog-summary {
    margin-block: var(--m5);
    padding: var(--m3) var(--m4);
    background: var(--gray);
    border-left: 4px solid var(--navy);
}
.blog-summary > p:first-child strong {
    font-size: var(--fs21);
    color: var(--navy);
}
.blog-summary > p + p {
    margin-top: 0.75lh;
}

/* 記事末尾の案内ブロック */
.blog-cta {
    margin-block: var(--m5);
    padding: var(--m4);
    background: var(--navy);
    color: white;
}
.blog-cta strong {
    color: var(--accent);
    font-size: var(--fs21);
}
.blog-cta > p + p {
    margin-top: var(--m3);
    padding-top: var(--m3);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.blog-cta a {
    color: white;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
@media (hover: hover) {
    .blog-cta a:hover {
        color: var(--accent);
    }
}

/* 案内ブロック内の主CTA（ボタン表示）
   .blog-cta a の白文字・下線を打ち消し、サイト共通のボタン配色（緑→クリーム）に合わせる */
.blog-cta .cta-primary {
    --link: white;
    --hover: var(--black);
    --bg: var(--green);
    --hover-bg: var(--cream);

    display: inline-block;
    margin-top: 0.75lh;
    padding-block: 0.5lh;
    padding-inline: 3ic;
    color: white;
    text-decoration: none;
    letter-spacing: 0.1ic;
    line-height: 1.3;
}
@media (hover: hover) {
    .blog-cta .cta-primary {
        transition: var(--transition);
    }
    .blog-cta .cta-primary:hover {
        color: var(--black);
    }
}

/* 案内ブロック内の副次的な案内文（主CTAより一段弱く見せる） */
.blog-cta .cta-secondary {
    font-size: var(--fs15);
    color: rgba(255, 255, 255, 0.85);
}

/* 表などの下に添える注釈 */
.blog-note {
    margin-top: 0.5lh;
    font-size: var(--fs15);
    color: var(--blue-gray);
}

/* 著者情報 */
.blog-author {
    margin-top: var(--m5);
    padding: var(--m3) var(--m4);
    border: 1px solid var(--dark-gray);
}
.blog-author strong {
    color: var(--navy);
}
.blog-author a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
@media (hover: hover) {
    .blog-author a:hover {
        color: var(--hover);
    }
}

/* アイキャッチ画像が未支給の場合のプレースホルダ */
.eyecatch-placeholder {
    background: var(--strong-gray);
}
/* 一覧のサムネイルは img と違い中身を持たないため、元画像と同じ 3:2 で高さを確保する */
section.list .thumbnail.eyecatch-placeholder {
    aspect-ratio: 3 / 2;
}

.blog-footer {
    margin-top: var(--m6);
    border-top: 1px solid var(--dark-gray);
    padding-top: var(--m2);
}
.blog-footer .date {
    text-align: right;
    font-weight: 400;
    color: var(--blue-gray);
}

.nav-index {
    margin-top: var(--m6);
    margin-inline: auto;
}

@media screen and (max-width: 767px) {
    article {
        max-width: 100%;
        padding-block: var(--m3) var(--m5);
    }
    article h1 {
        font-size: calc(27 / var(--v));
        padding-bottom: var(--m3);
    }
    article h2 {
        font-size: calc(24 / var(--v));
    }
    article h3 {
        font-size: calc(22 / var(--v));
    }
    article h4 {
        font-size: calc(20 / var(--v));
    }
    article h5 {
        font-size: calc(18 / var(--v));
    }
    article h6 {
        font-size: calc(17 / var(--v));
    }
    article :is(figure, img) {
        margin-block: var(--m3);
        max-width: 90%;
    }
    /* 列数の多い表は画面幅に収まらず右端が見切れるため、横スクロールで読めるようにする */
    article table {
        display: block;
        overflow-x: auto;
    }
    .blog-summary,
    .blog-cta,
    .blog-author {
        margin-block: var(--m3);
        padding: var(--m2);
    }
    .blog-summary > p:first-child strong,
    .blog-cta strong {
        font-size: calc(18 / var(--v));
    }
    /* SPでは主CTAを全幅にしてタップ領域を確保する */
    .blog-cta .cta-primary {
        display: block;
        padding-block: 0.75lh;
        padding-inline: 2.5ic;
        text-align: center;
    }
    .blog-footer {
        margin-top: var(--m5);
    }
    .nav-index {
        width: 100%;
    }
}