@charset "utf-8";

/********************************************
detail ― 詳細ページ共通
（お知らせ／ブログ／施工事例／お客様の声）
********************************************/
.article{ padding: 70px 0 90px; }
.article .inner{ max-width: 1000px; }

/* 見出しエリア（タイトル・日時・カテゴリ・タグ） */
.article__head{ padding-bottom: 24px; margin-bottom: 40px; border-bottom: 1px solid #e2e8ed; }
.article__meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.article__date{ font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--color-text-note); }
.article__cat{
    display: inline-block;
    padding: 4px 14px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
}
.article__cat--tips{ background: var(--color-accent); }
.article__title{ font-size: 28px; font-weight: 700; line-height: 1.5; }

/* 施工事例のタグ（施工場所・施工内容）― タグボックス表示 */
.article__tags{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.article__tags > div{
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    overflow: hidden;
    font-size: 14px;
}
.article__tags dt{ background: var(--color-primary); color: #fff; padding: 8px 14px; font-weight: 700; white-space: nowrap; }
.article__tags dd{ display: flex; align-items: center; padding: 8px 16px; }

/* メイン画像（一覧と同じ画像） */
.article__hero{ margin-bottom: 40px; }
.article__hero img{ max-width: 100%; width: auto; height: auto; display: block; margin: 0 auto; border-radius: 4px; }

/* 本文（WordPress 出力想定：写真・文章） */
.article__body{ font-size: 16px; line-height: 2; }
.article__body > *:first-child{ margin-top: 0; }
.article__body p{ margin: 0 0 1.6em; }
.article__body img{ max-width: 100%; height: auto; margin: 1.6em 0; border-radius: 4px; }
.article__body h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
    margin: 2em 0 .8em;
    padding-left: 14px;
    border-left: 5px solid var(--color-primary);
}
.article__body h3{ font-size: 20px; font-weight: 700; line-height: 1.5; margin: 1.6em 0 .6em; }
.article__body ul, .article__body ol{ margin: 0 0 1.6em; padding-left: 1.4em; }
.article__body ul li{ list-style: disc; margin-bottom: .4em; }
.article__body ol li{ list-style: decimal; margin-bottom: .4em; }
.article__body a{ color: var(--color-primary); text-decoration: underline; }

/* 記事下ナビ：戻る（左・＜） / 一覧へ戻る（中央） / 次へ（右・＞） */
.article__nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 60px;
}
.article__nav-prev{ justify-self: start; }
.article__nav-next{ justify-self: end; }
.article__nav-prev,
.article__nav-next{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    transition: opacity .3s;
}
.article__nav-prev.is-disabled,
.article__nav-next.is-disabled{
    opacity: 0;
}
@media (min-width: 769px){ .article__nav-prev:hover, .article__nav-next:hover{ opacity: .6; } }
.article__nav-prev::before,
.article__nav-next::after{
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.article__nav-prev::before{ transform: rotate(-135deg); }  /* ＜ */
.article__nav-next::after{ transform: rotate(45deg); }     /* ＞ */

@media (max-width: 768px){
    .article{ padding: 9vw 0 13vw; }
    .article__head{ padding-bottom: 4vw; margin-bottom: 6vw; }
    .article__meta{ gap: 3vw; margin-bottom: 3vw; }
    .article__date{ font-size: 3.46vw; }
    .article__title{ font-size: 5.2vw; }
    .article__tags{ gap: 2.5vw; margin-top: 4vw; }
    .article__tags > div{ font-size: 3.46vw; }
    .article__tags dt, .article__tags dd{ padding: 2vw 3.5vw; }
    .article__hero{ margin-bottom: 6vw; }
    .article__body{ font-size: 3.73vw; }
    .article__body h2{ font-size: 5vw; }
    .article__body h3{ font-size: 4.4vw; }
    .article__nav{ gap: 2vw; margin-top: 9vw; }
    .article__nav-prev, .article__nav-next{ font-size: 3.2vw; gap: 1.5vw; }
    .article__nav-prev::before, .article__nav-next::after{ width: 1.8vw; height: 1.8vw; }
    .article__nav .btn{ width: auto; min-width: 0; padding: 0 10vw; height: 11vw; font-size: 3.2vw; }
}