@charset "utf-8";

/* ===================================================
   Blog Content (ブログ記事専用スタイル)
=================================================== */

/* ---------------------------------------------------
   1. 基本セクション・ヘッダー被り防止
--------------------------------------------------- */
/* PC画面：固定ヘッダー3段分（ロゴ・メイン・月別）を避けて1番目の記事を自動で下げる */
#cs section:first-of-type {
    padding-top: 220px !important;
}

section {
    background: #FFF;
    max-width: 1100px;
    width: 80%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 150px;
    box-sizing: border-box;
}

.space {
    padding: 100px 0 0 0;
}

.space1 {
    padding: 250px 0 0 0;
}

#space {
    min-height: 50px;
}

#space1 {
    min-height: 150px;
}

/* ---------------------------------------------------
   2. サブメニュー（menu1: 年代別・アーカイブなど）
--------------------------------------------------- */
#menu1 {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#menu1 li {
    display: block;
    float: left;
    width: 10%;
    margin: 0;
    padding: 0;
    color: #000;
}

#menu1 li a {
    font-size: 120%;
    color: #000;
    display: block;
    padding: 0 0 10px 0;
    background-color: #FFF;
    text-align: center;
}

#menu1 li:last-child a {
    border: none;
}

#menu-box1 li {
    font-size: 120%;
    display: block;
    float: left;
    width: 10%;
    margin: 0;
    padding: 10px 0 0 0;
    color: #000;
}

/* ---------------------------------------------------
   3. 見出し・日付・基本テキスト
--------------------------------------------------- */
h1 {
    width: 100%;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 180%;
    line-height: 1.3;
    background-color: #f3f3f3;
    color: #111;
    padding: 15px 20px 4px 20px;
    margin: 0 !important;
    box-shadow: none;
}

.update-time {
    width: 100%;
    box-sizing: border-box;
    background-color: #f3f3f3;
    margin: 0 0 25px 0 !important;
    padding: 0;
}

h4 {
    font-size: 90%;
    font-weight: 300;
    color: #767676;
    padding: 0;
    margin: 0;
    text-align: center;
}

h5 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 80%;
    line-height: 1.2;
    background-color: #f3f3f3;
    color: #555;
    margin: 0 !important;
    padding: 0 20px 12px 20px;
    box-shadow: none;
    text-shadow: none;
}

h6 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 70%;
    text-align: left;
    font-weight: 300;
}

p {
    font-size: 90%;
    line-height: 1.5em;
    padding: 0 10px;
}

#cs p1,
#cs p2 {
    font-size: 120%;
    line-height: 1.7 !important;
    padding: 0;
    margin: 0;
    text-align: left !important;
}

#cs p3 a {
    font-size: 100%;
    float: right;
    padding: 30px 0 0 0;
    text-decoration-line: underline;
}

#cs p4 {
    font-size: 120%;
    font-weight: bold;
}

.mgr-20 { margin-right: 20px; }
.mgr-30 { margin-right: 30px; }
.mgr-50 { margin-right: 50px; }

.link {
    font-size: 100%;
    line-height: 2em;
    padding: 30px 20px 0 50px;
}

/* ---------------------------------------------------
   4. 【パターンA】横並び記事（.side がない標準記事）
   PC・タブレットで美しい横並び（画像50% / 文章48%）
--------------------------------------------------- */
.row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    margin: 25px auto 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 横並び記事の中にある画像枠 */
.row .photo {
    flex: 0 0 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.row .photo .col,
.row .photo .col-md-one-half,
.row .photo .info-box-tan,
.row .photo .info-box-tan1,
.row .photo .info-box-tan2 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.row .photo img,
.row .photo s3 img,
.row .info-box-tan img {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 横並び記事の文章エリア */
.row .info-box-dark,
.row .info-box-dark1,
.row .info-box-dark2 {
    flex: 0 0 48% !important;
    width: 48% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    text-align: left !important;
}

.row .info-box-dark p3 a {
    font-weight: 300;
    font-size: 70%;
    float: right;
    color: #005698;
    padding: 10px 0 0 0;
}

.row .info-box-dark p1 a {
    text-decoration-line: underline;
    padding: 0;
}

/* ---------------------------------------------------
   5. 【パターンB】縦並び記事（.side がある記事）
   全画面で見出し（update-time）と同じ100%幅で「縦並び」
--------------------------------------------------- */
/* side を持っている親枠 photo、またはセクション直下の photo は100%全幅 */
.photo:has(.side),
section > .photo {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 縦並びの本文枠（見出しと同じ100%幅） */
.side {
    width: 100% !important;
    max-width: 100% !important;
    margin: 25px auto 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.8;
    text-align: left !important;
}

/* 縦並びの画像（見出し・update-time の幅いっぱいに100%表示） */
.side img,
.side s2 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 25px auto !important;
}

.side s3 img {
    width: 60% !important;
    max-width: 60% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 25px auto !important;
}

/* 縦並びのテキスト */
.side p1,
.side p2 {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.8;
}

/* ---------------------------------------------------
   6. ページトップへ戻るボタン
--------------------------------------------------- */
#page-top {
    position: fixed;
    bottom: 80px;
    right: 50px;
    font-size: 77%;
    z-index: 100;
}

#page-top a {
    background: rgba(220, 220, 220, 0.6);
    text-decoration: none;
    font-weight: 300;
    color: #666;
    width: 50px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 25px;
}

#page-top a:hover {
    text-decoration: none;
    background: rgba(150, 150, 150, 0.4);
}

/* ===================================================
   Responsive (max-width: 2000px)
   ※一般的なPC・大画面タブレット
=================================================== */
@media only screen and (max-width: 2000px) {
    section {
        max-width: 1100px;
        width: 85%;
        margin: 0 auto;
        padding-top: 60px !important;
        padding-bottom: 130px !important;
    }

    #menu1 {
        width: 90%;
    }

    #menu1 li a {
        padding: 0 0 5px 0;
    }

    #menu-box1 li {
        font-size: 100%;
        display: block;
        float: left;
        width: 10%;
        margin: 0;
        padding: 10px 0 0 0;
        color: #000;
    }

    #space {
        min-height: 0;
    }

    #space1 {
        min-height: 150px;
    }

    h1 {
        font-size: 140%;
        line-height: 120%;
        padding: 10px 0 10px 20px;
    }

    h4 {
        font-size: 80%;
        padding: 0;
    }

    /* PC・大画面の文字サイズ固定 */
    #cs p1,
    #cs p2 {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    .photo1 s1 img {
        width: 80%;
        height: auto;
        padding: 20px 0 0 0;
    }

    .photo s3 img {
        width: 100%;
        height: auto;
        padding: 0;
    }
}

/* ===================================================
   Responsive (max-width: 840px)
   ※iPad mini 等の中型タブレット
=================================================== */
@media only screen and (max-width: 840px) {
    /* タブレット画面：1番目の記事を自動で押し下げる */
    #cs section:first-of-type {
        padding-top: 150px !important;
    }

    #menu1 {
        width: 100%;
        padding: 16px 0 0 0;
    }

    #menu-box1 li {
        font-size: 90%;
        line-height: 1em;
        padding: 10px 0 0 0;
    }

    section {
        width: 90%;
        margin: 0 auto;
        padding-top: 60px !important;
        padding-bottom: 120px !important;
        box-sizing: border-box;
    }

    .row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }

    h1 {
        font-size: 120%;
        padding: 10px 20px;
    }

    h1,
    .update-time {
        width: 100% !important;
    }

    h4 {
        font-size: 80%;
    }

    h5 {
        padding: 0 0 10px 20px;
    }

    p {
        font-size: 90%;
        line-height: 1em;
    }

    /* タブレット画面の文字サイズ固定 */
    #cs p1,
    #cs p2 {
        font-size: 15px !important;
        line-height: 1.8 !important;
        padding: 0 !important;
        display: block !important;
    }

    .row .photo {
        width: 48% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .row .info-box-dark {
        width: 48% !important;
        height: auto !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        left: auto !important;
        text-align: left !important;
    }

    #page-top {
        bottom: 60px;
        right: 20px;
    }
}

/* ===================================================
   Responsive (max-width: 480px)
   ※スマートフォン画面
=================================================== */
@media only screen and (max-width: 480px) {

    /* スマホ画面：1番目の記事を自動で押し下げる */
    #cs section:first-of-type {
        padding-top: 100px !important;
    }

    #menu1 {
        display: none;
    }

    section {
        width: 90%;
        min-height: auto;
        display: block;
        margin: 0 auto;
        padding: 20px 0 10px 0;
    }

    /* スマホでは縦並び（1カラム）へ切り替え */
    .row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------
       ★.row の中の画像枠・文章枠を、見出し（h1）と同じ「幅100%」に広げる！
    --------------------------------------------------- */
    .row .photo,
    .photo {
        flex: none !important;                  /* PCの50%固定を完全解除 */
        width: 100% !important;                 /* ★h1見出しと同じ「幅100%」に広げる！ */
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .row .photo img,
    .row .photo s1 img,
    .row .photo s2 img,
    .row .photo s3 img,
    .row .photo s5 img,
    .row .info-box-tan img,
    .photo s3 img,
    .info-box-tan img {
        width: 100% !important;
        max-width: 320px !important;            /* スマホで一番見やすいサイズ */
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 10px 0 !important;
    }

    /* 文章枠も「幅100%」いっぱいに広げる */
    .row .info-box-dark,
    .row .info-box-dark1,
    .row .info-box-dark2,
    .info-box-dark {
        flex: none !important;                  /* PCの48%固定を完全解除 */
        width: 100% !important;                 /* ★h1見出しと同じ「幅100%」に広げる！ */
        max-width: 100% !important;
        margin: 15px auto 0 auto !important;
        padding: 0 15px !important;            /* 見出し（h1）と同じ左右15pxの余白 */
        box-sizing: border-box !important;
        text-align: left !important;
    }

    /* ---------------------------------------------------
       ★.side がある記事（縦並び記事）も同様に幅100%
    --------------------------------------------------- */
    .side {
        width: 100% !important;
        margin: 15px auto 0 auto !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .side img,
    .side s2 img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
    }

    .side p1,
    .side p2 {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* ---------------------------------------------------
       見出し・日付・文字サイズ設定
    --------------------------------------------------- */
    #cs h1 {
        font-size: 14px !important;
        line-height: 1.4;
        padding: 12px 15px 4px 15px !important;
        margin: 0 !important;
    }

    .update-time {
        margin: 0 0 20px 0 !important;
    }

    h5 {
        font-size: 70%;
        padding: 0 15px 10px 15px !important;
        margin: 0 !important;
    }

    #cs h6 {
        font-size: 75%;
    }

    #cs p1,
    #cs p2 {
        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    #cs p3 a {
        font-size: 80%;
        float: right;
        padding: 10px 10px 20px 0;
    }

    #cs p4 {
        font-size: 110%;
        font-weight: bold;
    }

    .link {
        font-size: 100%;
        line-height: 2em;
        padding: 10px 0;
    }

    /* ---------------------------------------------------
       ★アーカイブ目次（archives.html）専用の調整
    --------------------------------------------------- */
    /* ① 年号（2026、2025等）の文字を少し大きくする */
    #cs h1 a {
        font-size: 18px !important;             /* ★お好みに応じて 17px〜20px で微調整可能 */
        color: #111 !important;
        text-decoration: none !important;
    }

    /* ② リスト全体の幅を見出し（h1）と100%揃える */
    .link {
        width: 100% !important;
        padding: 5px 0 20px 0 !important;
        box-sizing: border-box !important;
    }

    .archive-list {
        list-style: none !important;
        padding: 0 !important;                  /* ★ブラウザ標準の左40px余白を消去し、100%全幅に広げる！ */
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* リスト各行の文字位置を見出しの文字位置（左右15px）とピタッと揃える */
    .archive-list li {
        width: 100% !important;
        padding: 8px 15px !important;           /* 見出しh1と同じ左右15pxの余白 */
        box-sizing: border-box !important;
        border-bottom: 1px solid #f5f5f5;       /* （お好みで）行の境目が分かりやすい薄い仕切り線 */
    }

    .archive-list li a {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    .archive-list .mgr-50 {
        margin-right: 12px !important;          /* 日付とタイトルのすき間 */
        color: #767676 !important;
        font-size: 11px !important;
    }

    #page-top {
        bottom: 40px;
        right: 10px;
    }
}
/* ===================================================
   Responsive (max-width: 320px)
   ※極小画面スマホ
=================================================== */
@media only screen and (max-width: 320px) {
    #section {
        max-width: 320px;
    }

    .photo s3 img {
        width: auto;
        height: 280px;
        display: block;
        margin: 0 auto;
        padding: 10px 0;
    }

    .info-box-tan {
        width: 100%;
        padding: 0;
    }

    .info-box-dark {
        width: 100%;
        height: auto;
        padding: 10px;
        line-height: 1.8;
    }
}

    /* ===================================================
   アーカイブ目次（archives.html）：画面1杯の縛りを解除して間隔を詰める
=================================================== */
section:has(.link),
section:has(.archive-list),
section[id^="archive-"] {
    min-height: auto !important;          /* ★852pxの画面1杯の縛りを完全消滅させる！ */
    height: auto !important;
    display: block !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;      /* ★前後の隙間を20pxにギュッと詰める */
    margin: 0 auto !important;
}

/* 1番上のセクションだけヘッダー被り防止 */
section:has(.link):first-of-type,
section:has(.archive-list):first-of-type,
section[id^="archive-"]:first-of-type {
    padding-top: 100px !important;
}