@charset "utf-8";

@media (width >=600px) {

    body {
        background-color: #0a163b;
    }

    .inner {
        width: 26.35%;
        max-width: 360px;
        margin-right: auto;
        margin-left: auto;
        font-size: 16px;
    }

    img {
        width: 100%;
        vertical-align: middle;
    }

    .hidari {
        display: grid;
    }

    .migi {
        display: grid;
    }

    .zenntai {
        display: grid;
        grid-template-columns: 690fr 495fr;
        column-gap: 90px;
    }


}

body {
    background-color: #0a163b;
}


/*6
dP                               dP
88                               88
88d888b. .d8888b. .d8888b. .d888b88 .d8888b. 88d888b.
88'  `88 88ooood8 88'  `88 88'  `88 88ooood8 88'  `88
88    88 88.  ... 88.  .88 88.  .88 88.  ... 88
dP    dP `88888P' `88888P8 `88888P8 `88888P' dP    */



header {
    margin-bottom: 20px;
}


/*                    oo

88d8b.d8b. .d8888b. dP 88d888b.
88'`88'`88 88'  `88 88 88'  `88
88  88  88 88.  .88 88 88    88
dP  dP  dP `88888P8 dP dP    dP*/


main .inner {
    width: 92.6%;
    max-width: 1265px;
    margin-left: auto;
    margin-right: auto;
}

.top_main {


    /* アニメーション名、時間、タイミング、アニメーション終了後の状態を定義 */
    animation: slideInUp 1.5s ease-out forwards;
    transform: translateX(100%);
    /* 右側に要素を隠す */
    opacity: 0;
    /* 透明にしておく */
    animation: slideInFromRight 1s ease-out forwards;
}






/*
                     dP   oo          dP
                    88               88
.d8888b. 88d888b. d8888P dP .d8888b. 88 .d8888b. .d8888b.
88'  `88 88'  `88   88   88 88'  `"" 88 88ooood8 Y8ooooo.
88.  .88 88         88   88 88.  ... 88 88.  ...       88
`88888P8 dP         dP   dP `88888P' dP `88888P' `88888P'   */


.articles h2 {
    text-align: center;
    background-color: #fff;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bold;
    margin-bottom: 30px;
    /*margin-top: 30px;*/
    border-radius: 5px;
    line-height: 1.7;
}

.articles-grid {
    display: grid;
    /* 1frは「利用可能なスペースを1つの単位として割り当てる」という意味 */
    grid-template-columns: 1fr 1fr;
    /* grid-gap は古いプロパティなので gap を使うのが一般的 */
    gap: 20px;
    /* カード間の余白 */
}

.articlesetc {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 15px;
}

.articlesetc h3 {
    font-size: 20px;
    color: #2163e9;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 0.8rem;
    /* 以下を追加 */
    height: 3em;
    /* タイトルの高さを固定 */
    overflow: hidden;
    /* はみ出た部分を非表示に */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 2行で表示を制限 */
}

.articles ul {
    color: #fff;
    margin-bottom: 5px;
}

.articles ul li {
    font-size: 12px;
    padding: 3px;
    display: inline-block;
    background-color: gray;
    border-radius: 5px;
    /* 角を5px丸くする */

}

.img-wrapper {
    margin-bottom: 0.8rem;
}




.article-list-button {
    display: block;
    /* ボタンをブロック要素のように扱い、幅や高さを設定できるようにする */
    padding: 10px;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 5px;
    /* 角を丸くする */
    text-align: center;
    cursor: pointer;
    /* マウスカーソルを指の形にする */
    font-weight: bold;
    margin: 30px auto;
    /* 上下の余白と、左右を自動にして中央揃えにする */
    width: 150px;
    font-size: 15px;
}

.articles-container {
    display: flex;
    /* Flexboxを使って記事を横並びにする場合 */
    flex-wrap: wrap;
    /* 画面幅に応じて折り返す */
    justify-content: center;
    /* 記事を中央揃えにする */
    gap: 20px;
    /* 記事間の隙間を設定 */
    max-width: 900px;
    /* コンテナの最大幅を設定 */
    margin: 0 auto;
    /* コンテナ自体を中央に配置する */
}






/*                    dP
                    88
.d8888b. .d8888b. d8888P .d8888b. .d8888b. .d8888b. 88d888b. dP    dP
88'  `"" 88'  `88   88   88ooood8 88'  `88 88'  `88 88'  `88 88    88
88.  ... 88.  .88   88   88.  ... 88.  .88 88.  .88 88       88.  .88
`88888P' `88888P8   dP   `88888P' `8888P88 `88888P' dP       `8888P88
                                       .88                        .88
                                   d8888P                     d8888P*/

.category {
    /*background-color: #37a1c8;*/
    text-align: center;
    border-radius: 5px;
    padding: 10px;
}

.top-category {
    background-color: #37a1c8;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
}

.category h2 {
    font-weight: bold;
    font-size: 18px;
}

.category ul {
    color: #fff;
    line-height: 1.7;
}


.box6 p {
    margin: 0;
    padding: 0;
}


.inner.side_bar {
    width: 100%;
}


.sarticlesetc {
    border-radius: 5px;
    /* 角を5px丸くする */
}


/*                           .8888b oo dP
88   "    88
88d888b. 88d888b. .d8888b. 88aaa  dP 88 .d8888b.
88'  `88 88'  `88 88'  `88 88     88 88 88ooood8
88.  .88 88       88.  .88 88     88 88 88.  ...
88Y888P' dP       `88888P' dP     dP dP `88888P'
88
dP*/

.profile {
    background-color: #fff;
    border-radius: 5px;
    line-height: 1.7;
    padding: 10px;
}

.profile h2 {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

.profile p {
    text-align: center;
}

.profile-div {
    margin-top: 30px;
}

/* --------------------------------- */

/* 検索フォーム全体を囲むコンテナ */
.top_search {
    width: 100%;
    margin-top: 20px;
}

/* 検索フォーム本体のデザイン */
.top_search .search-form {
    display: flex;
    /* Flexboxを有効にする */
    align-items: center;
    /* 子要素を垂直方向の中央に配置 */
    gap: 10px;
    /* 検索バーとボタンの間に隙間を設ける */
    background-color: #2163e9;
    /* 提供された画像から推測 */
    padding: 10px;
    box-sizing: border-box;
}

/* 検索入力フォームのデザイン */
.top_search .search-field {
    flex-grow: 1;
    /* 親要素の残りのスペースを全て占める */
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
}

/* 検索ボタンのデザイン */
.top_search .search-submit {
    flex-shrink: 0;
    /* 縮小しないように設定 */
    border: none;
    background-color: #0a163b;
    /* 提供された画像から推測 */
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}



/* --------------------------------- */



/*
.8888b                     dP
88   "                     88
88aaa  .d8888b. .d8888b. d8888P .d8888b. 88d888b.
88     88'  `88 88'  `88   88   88ooood8 88'  `88
88     88.  .88 88.  .88   88   88.  ... 88
dP     `88888P' `88888P'   dP   `88888P' dP   */

footer {
    /*background-color: #3583dc;*/
    background-color: #0a163b;
    padding-bottom: 10px;
    padding-top: 50px;
    text-align: center;
    margin-bottom: 20px;
}

/*----------------------------------------------------*/



/*----------------------------------------------------*/

.articles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.articlesetc {
    flex: 1 1 calc(50% - 10px);
    box-sizing: border-box;
    word-break: break-all;
}

@media (max-width: 768px) {
    .articlesetc {
        flex-basis: 100%;
    }


}

.img-wrapper {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4/3;
    justify-content: center;
    align-items: center;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
    }
}

.inner.side_bar2 {
    /* 背景色をグラデーションに変更 */
    background: linear-gradient(180deg, #37a1c8 0%, #0a163b 100%);
    color: #fff;
    border-radius: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-style: italic;
    padding: 20px;
    /* グラデーションの境界線が見えないように余白を追加 */
}

/* リストアイテムの背景を透明にする */
.side_bar2 ul li {
    background-color: transparent;
    border: 1px solid #37a1c8;
    /* リストアイテムに枠線を追加 */
}

.profile p {
    color: #000;
}

/*----------------------------------------------------*/

/*----------------------------------------------------*/


.single_main {
    background-color: #fff;
    padding: 5px;
    width: calc(100% - 40px);
    margin: auto;
    padding-top: 10px;
    padding-block: 20px;
    border-radius: 5px;
    max-width: 690px;
}

.single_articles p {
    line-height: 1.5em;
}

.single_articles h1 {
    margin: 20px 0;
    font-size: 24px;
    font-weight: bold;
}

.single_articles h2 {
    margin: 10px 0;
    font-size: 22px;
    font-weight: bold;
}

.single_articles img {
    margin: 10px 0;
}

.single_articles ul {
    list-style: disc;
    margin-left: 1rem;
}

.single_articles ol {
    list-style-type: decimal;
    margin-left: 1rem;
}

table {
    border: 1px solid;
}

blockquote {
    position: relative;
    padding: 30px 15px 8px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before {
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    content: "“";
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888;
    font-size: 0.9em;
}

address {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;
}

.comment-area {
    margin-top: 30px;
}

.comment {
    background-color: #37a1c8;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    max-width: 690px;
    margin: 30px auto 0;
}

.comment .section-title {
    color: #fff;
    background-color: #0a163b;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.comment-form {
    text-align: left;
    display: inline-block;
}

.comment-form label {
    display: block;
    color: white;
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-form textarea,
.comment-form input {
    background-color: #fff;
    width: 100%;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    padding: o;
    box-sizing: border-box;
    display: block;
}


.submit-button {
    display: block;
    width: 70px;
    padding: 10px;
    margin: 10px auto 0;
    background-color: white;
    color: #37a1c8;
    border: 1px solid #37a1c8;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.comment-author img {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

small {
    color: #fff;
}

@media (width >=600px) {
    body {
        background-color: #0a163b;
    }
}

.single_main {
    background-color: #fff;
    /* この行を追加または変更 */
    max-width: 690px;
}

.single-inner {
    width: 80%;
    margin: 0 auto;
}


.comment-respond {
    color: honeydew;
    width: 12;
    max-width: 690px;
    text-align: center;
    margin: auto;
}

.breadcrumbs {
    background-color: #f5f5f5;
    text-align: center;
    font-size: 13px;
}

/* ------------------------------------ */


/* サイドバーのカテゴリ・アーカイブリストのスタイル */
.side_bar2 h2,
.side_bar2 h3 {
    color: #fff;
    /* 見出しの色を白に */
    font-size: 1.2em;
    margin-bottom: 10px;
    border-bottom: 2px solid #37a1c8;
    /* 見出しの下にボーダーを追加 */
    padding-bottom: 5px;
}

.side_bar2 ul {
    list-style: none;
    /* デフォルトのリストマーカーを削除 */
    margin: 0 0 20px 0;
    padding: 0;
}

.side_bar2 ul li {
    background-color: #0a163b;
    /* 各リストアイテムの背景色 */
    margin-bottom: 5px;
    padding: 10px 15px;
    border-radius: 5px;
    /* 角丸に */
    transition: background-color 0.3s ease;
    /* ホバー時のアニメーション効果 */
}

.side_bar2 ul li:hover {
    background-color: #37a1c8;
    /* ホバー時の背景色 */
}

.side_bar2 ul li a {
    color: #fff;
    /* リンクの文字色を白に */
    text-decoration: none;
    /* リンクの下線を削除 */
    display: block;
    /* リンクのクリック範囲をリストアイテム全体に広げる */
}

/* 投稿数のスタイル */
.side_bar2 .post-count {
    font-weight: bold;
    color: #fff;
    /* 投稿数の文字色を白に */
    background-color: #37a1c8;
    border-radius: 50%;
    /* 背景を円形に */
    padding: 3px 8px;
    float: right;
    /* 右端に配置 */
    font-size: 0.8em;
}



/* ------------------------------------ */

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 自己紹介タイトルの色を白から黒に変更 */
.profile h2 {
    color: #000;
}

.comment-form-comment {
    color: #000;
}

.comment-form input {
    color: #000;
}