/* ========================================
   PAPAN PUIPUI
   ======================================== */


/* ========================================
   フォント
   ======================================== */

@font-face {
    font-family: "Zighead";
    src: url("/myblog/fonts/Zighead.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Mincho";
    src: url("/myblog/fonts/ZenOldMincho-Medium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}


/* ========================================
   基本設定
   ======================================== */

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    background: #FDFDFD !important;
    color: #333333;

    font-family: "Mincho", serif;

    /* 横スクロール防止 */
    overflow-x: clip;
}


/* PaperMod標準幅解除 */

.header,
.main,
.footer,
.nav {
    max-width: none !important;
    box-sizing: border-box;
}


/* ========================================
   ロゴ共通
   ======================================== */

.logo,
.logo a {
    font-family: "Zighead", sans-serif !important;

    color: #333333 !important;

    font-weight: normal !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;
}


/* ========================================
   ヘッダー基本
   ======================================== */

.header {
    width: 88%;
    max-width: 1400px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 18px;
    padding-bottom: 0;
}


/* ========================================
   上段
   ロゴ左・メニュー右
   ======================================== */

header .nav {
    width: 100%;
    max-width: none !important;

    display: flex;
    align-items: flex-start;

    box-sizing: border-box;
}


/* ========================================
   ロゴ
   ======================================== */

.logo,
.logo a {
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Zighead", sans-serif !important;

    font-size: 48px;
    line-height: 1;

    color: #333333 !important;

    text-decoration: none !important;
}


/* ========================================
   PaperMod 上部メニュー
   記事・タグ・検索
   ======================================== */

header #menu {
    margin-left: auto !important;
    padding-top: 8px;

    display: flex;
    align-items: center;

    gap: 28px;

    /* PaperMod標準の横スクロールを無効化 */
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;

    white-space: nowrap;
}

header #menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* ========================================
   カテゴリ
   ======================================== */

.tag-nav {
    width: 88%;
    max-width: 1400px;

    margin: 28px auto 0;
    padding: 0;

    display: flex;

    flex-direction: row;

    justify-content: flex-start;
    align-items: center;

    flex-wrap: wrap;

    gap: 34px;

    box-sizing: border-box;

    font-family: "Mincho", serif;
}


/* カテゴリリンク */

.tag-nav a {
    display: inline-block;

    margin: 0 !important;
    padding: 0 !important;

    color: #333333;

    text-decoration: none;
}


/* 区切り文字なし */

.tag-nav a:not(:last-child)::after {
    content: none;
}


.tag-nav a:hover {
    text-decoration: underline;
}


/* ========================================
   MAIN
   ======================================== */

.main {
    padding-top: 70px;
}


/* ========================================
   記事一覧
   ======================================== */

.post-entry,
.first-entry,
.main > article {
    width: 100% !important;

    margin: 0 !important;
    padding: 30px 0 !important;

    box-sizing: border-box;

    background: transparent !important;

    border: none !important;
    border-bottom: 1px solid #333333 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: "Mincho", serif;
}


/* ========================================
   記事一覧タイトル
   ======================================== */

.post-entry .entry-header,
.first-entry .entry-header {
    margin: 0 !important;
    padding: 0 !important;
}


.post-entry .entry-header h2,
.first-entry .entry-header h1,
.first-entry .entry-header h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;

    font-family: "Mincho", serif;

    font-size: 36px;
    font-weight: normal;

    line-height: 1.15;
}


.post-entry .entry-header h2 a,
.first-entry .entry-header h1 a,
.first-entry .entry-header h2 a {
    color: #333333 !important;

    text-decoration: none;
}


.post-entry .entry-header h2 a:hover,
.first-entry .entry-header h1 a:hover,
.first-entry .entry-header h2 a:hover {
    color: #333333 !important;
}


/* ========================================
   記事プレビュー
   ======================================== */

.entry-content {
    max-width: 760px;

    margin: 15px 0 0 !important;
    padding: 0 !important;

    font-size: 16px;
    line-height: 1.8;
}


/* ========================================
   メタ情報
   ======================================== */

.entry-footer,
.post-meta {
    margin-top: 15px !important;

    color: #333333 !important;

    font-family: "Mincho", serif;

    font-size: 13px;
}


/* ========================================
   個別記事
   ======================================== */

.post-single {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 30px 0 !important;

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    font-family: "Mincho", serif;
}


.post-header {
    margin: 0 !important;
    padding: 0 !important;
}


/* ========================================
   個別記事本文
   ======================================== */

.post-content {
    max-width: 850px;

    margin: 35px 0 0 !important;
    padding: 0 !important;

    font-family: "Mincho", serif;

    font-size: 17px;
    line-height: 2;
}


.post-content h1,
.post-content h2,
.post-content h3 {
    font-family: "Mincho", serif;
}


.post-content h2 {
    margin-top: 60px;

    color: #333333;

    font-size: 32px;
    font-weight: normal;
}


.post-content a {
    color: #333333 !important;

    text-decoration: underline;
}


.post-content img {
    max-width: 100%;

    margin: 30px 0;

    border-radius: 0 !important;
}


/* ========================================
   タグ一覧
   ======================================== */

.tag-entry {
    width: 100% !important;

    margin: 0 !important;
    padding: 22px 0 !important;

    background: transparent !important;

    border: none !important;
    border-bottom: 1px solid #333333 !important;

    border-radius: 0 !important;
}


/* タグカード */

.terms-tags li {
    background: #FDFDFD !important;

    border: 1px solid #333333 !important;
    border-radius: 8px !important;
}


.terms-tags li a {
    background: transparent !important;
}


body .terms-tags a,
body .terms-tags li a,
body ul.terms-tags li a {
    background: #FDFDFD !important;
    background-color: #FDFDFD !important;

    box-shadow: none !important;

    border: 1px solid #FDFDFD !important;
}


/* ========================================
   フッター基本
   ======================================== */

.footer {
    width: 100% !important;
    max-width: none !important;

    margin-top: 60px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-top: 20px !important;
    padding-bottom: 30px !important;

    box-sizing: border-box;

    color: #333333;
}


/* ==================================================
   PC
   1001px以上
   ================================================== */

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


    /* ========================================
       ヘッダー
       ======================================== */

    .header {
        position: relative;

        width: 100% !important;

        margin: 0 !important;

        padding: 28px 32px 30px !important;

        background: #FDFDFD !important;
    }


    .header .nav,
    header .nav {
        position: relative !important;

        width: 100% !important;
        min-height: 65px;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }


    /* ========================================
       ロゴ
       ======================================== */

    .header .nav .logo,
    .logo {
        position: absolute !important;

        left: 20px !important;
        top: 18px !important;

        transform: none !important;
    }


    .header .nav .logo a,
    .logo a {
        display: block !important;

        font-size: 48px !important;
        line-height: 1 !important;
    }


    /* ========================================
       左カラム
       ゲーム・旅行・映画・読書
       ======================================== */

    .tag-nav {
        position: fixed !important;

        left: 40px !important;
        top: 100px !important;

        width: 160px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;

        gap: 12px !important;

        border: none !important;

        background: transparent !important;

        z-index: 100;

        text-align: left !important;
    }


    .tag-nav a {
        display: block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #333333 !important;

        font-family: "Mincho", serif;

        font-size: 20px !important;

        line-height: 1.35;

        text-decoration: none;
    }


    .tag-nav a:hover {
        text-decoration: underline;
    }


    .tag-nav a:not(:last-child)::after {
        content: none !important;
    }


    /* ========================================
       記事・タグ・検索
       ======================================== */

    #menu,
    header #menu,
    .header .nav #menu {
        position: fixed !important;

        left: 40px !important;
        top: 310px !important;

        width: 160px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;

        gap: 15px !important;

        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;

        white-space: normal !important;

        z-index: 100;
    }


    #menu::-webkit-scrollbar,
    header #menu::-webkit-scrollbar,
    .header .nav #menu::-webkit-scrollbar {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    #menu li,
    header #menu li,
    .header .nav #menu li {
        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #menu a,
    header #menu a,
    .header .nav #menu a {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #333333 !important;

        font-family: "Mincho", serif;

        font-size: 20px !important;

        line-height: 1.35;

        text-decoration: none;
    }


    #menu a:hover {
        text-decoration: underline;
    }


    /* ========================================
       メイン記事領域
       ======================================== */

    .main {
        position: relative !important;

        width: auto !important;

        margin-left: 210px !important;
        margin-right: 210px !important;

        padding: 0 0 0 30px !important;

        border-left: none !important;
    }


    /* ========================================
       左カラムと本文の縦線
       ======================================== */

    .main::before {
        content: "";

        position: fixed;

        left: 210px;
        top: 110px;
        bottom: 0;

        width: 1px;

        background: #333333;

        pointer-events: none;
    }


    /* ========================================
       PC H1
       ======================================== */

    h1,
    .post-title,
    .post-single .post-title,
    .page-header h1 {
        font-size: 40px !important;

        line-height: 1.15 !important;
    }


    /* ========================================
       PCフッター
       ======================================== */

    .footer {
        width: auto !important;

        margin-left: 210px !important;
        margin-right: 210px !important;

        padding-left: 30px !important;
        padding-right: 0 !important;
    }
}


/* ==================================================
   タブレット
   601px〜1000px
   ================================================== */

@media screen and (min-width: 601px) and (max-width: 1000px) {


    /* ========================================
       固定ヘッダー
       ======================================== */

    .header {
        position: sticky !important;

        top: 0 !important;

        z-index: 9999 !important;

        width: 100% !important;
        height: 108px !important;

        margin: 0 !important;

        padding: 10px 18px !important;

        background: #FDFDFD !important;

        border-bottom: 1px solid #333333 !important;

        box-sizing: border-box;
    }


    .header .nav,
    header .nav {
        position: relative !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: visible !important;
    }


    /* ========================================
       ロゴ
       ======================================== */

    .header .nav .logo,
    .logo {
        position: absolute !important;

        left: -2px !important;
        top: 5px !important;

        transform: none !important;
    }


    .header .nav .logo a,
    .logo a {
        display: block !important;

        font-size: 40px !important;
        line-height: 1 !important;
    }


    /* ========================================
       カテゴリ
       ======================================== */

    .tag-nav {
        position: fixed !important;

        left: 30px !important;
        top: 72px !important;

        width: auto !important;
        max-width: calc(100% - 250px) !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 13px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        border: none !important;

        background: transparent !important;

        z-index: 10000;
    }


    .tag-nav a {
        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 auto;

        color: #333333 !important;

        font-size: 18px !important;

        line-height: 1 !important;
    }


    /* ========================================
       記事・タグ・検索
       ======================================== */

    #menu,
    header #menu,
    .header .nav #menu {
        position: fixed !important;

        top: 72px !important;
        right:35px !important;
        left: auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 13px !important;

        white-space: nowrap !important;

        /* ここがスクロールバー対策 */
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;
        font-family: "Mincho", serif;

        z-index: 10000;
    }


    #menu::-webkit-scrollbar,
    header #menu::-webkit-scrollbar,
    .header .nav #menu::-webkit-scrollbar {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    #menu li,
    header #menu li,
    .header .nav #menu li {
        width: auto !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 auto !important;
    }


    #menu a,
    header #menu a,
    .header .nav #menu a {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #333333 !important;

        font-size: 18px !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }


    /* ========================================
       メイン
       ======================================== */

    .main {
        width: 94% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 20px 0 0 !important;

        border-left: none !important;
    }


    .main::before {
        display: none !important;

        content: none !important;
    }


    /* ========================================
       H1
       ======================================== */

    h1,
    .post-title,
    .post-single .post-title,
    .page-header h1 {
        font-size: 25px !important;

        line-height: 1.2 !important;
    }


    .post-entry .entry-header h2,
    .first-entry .entry-header h1,
    .first-entry .entry-header h2 {
        font-size: 28px !important;
    }


    /* ========================================
       フッター
       画面幅100%
       ======================================== */

    .footer {
        width: 94% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        border-bottom: 1px solid #333333 !important;

        box-sizing: border-box !important;
    }
}


/* ==================================================
   スマホ
   600px以下
   ================================================== */

@media screen and (max-width: 600px) {


    /* ========================================
       固定ヘッダー
       ======================================== */

    .header {
        position: sticky !important;

        top: 0 !important;

        z-index: 9999 !important;

        width: 100% !important;
        height: 96px !important;

        margin: 0 !important;

        padding: 9px 8px !important;

        background: #FDFDFD !important;

        border-bottom: 1px solid #333333 !important;

        box-sizing: border-box;
    }


    .header .nav,
    header .nav {
        position: relative !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: visible !important;
    }


    /* ========================================
       ロゴ
       ======================================== */

    .header .nav .logo,
    .logo {
        position: absolute !important;

        left: 5px !important;
        top: 10px !important;

        transform: none !important;
    }


    .header .nav .logo a,
    .logo a {
        display: block !important;

        font-size: 34px !important;
        line-height: 1 !important;
    }


    /* ========================================
       カテゴリ
       ======================================== */

    .tag-nav {
        position: fixed !important;

        left: 25px !important;
        top: 65px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 7px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        border: none !important;

        background: transparent !important;

        z-index: 10000;
    }


    .tag-nav a {
        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #333333 !important;

        font-size: 16px !important;

        line-height: 1 !important;

        flex: 0 0 auto;
    }


    /* ========================================
       記事・タグ・検索
       ======================================== */

    #menu,
    header #menu,
    .header .nav #menu {
        position: fixed !important;

        top: 65px !important;
        right: 30px !important;
        left: auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 7px !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;
        font-family: "Mincho", serif;

        z-index: 10000;
    }


    #menu::-webkit-scrollbar,
    header #menu::-webkit-scrollbar,
    .header .nav #menu::-webkit-scrollbar {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    #menu li,
    header #menu li,
    .header .nav #menu li {
        width: auto !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 auto !important;
    }


    #menu a,
    header #menu a,
    .header .nav #menu a {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #333333 !important;

        font-size: 16px !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }


    /* ========================================
       メイン
       ======================================== */

    .main {
        width: 92% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 16px 0 0 !important;

        border-left: none !important;
    }


    .main::before {
        display: none !important;

        content: none !important;
    }


    /* ========================================
       H1
       ======================================== */

    h1,
    .post-title,
    .post-single .post-title,
    .page-header h1 {
        font-size: 22px !important;

        line-height: 1.2 !important;
    }


    .post-entry .entry-header h2,
    .first-entry .entry-header h1,
    .first-entry .entry-header h2 {
        font-size: 25px !important;
    }


    .entry-content {
        font-size: 14px;
    }


    .post-content {
        margin-top: 25px !important;

        font-size: 15px;
        line-height: 1.9;
    }


    /* ========================================
       フッター
       ヘッダー・本文と同じ幅
       ======================================== */

    .footer {
        width: 92% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        border-bottom: 1px solid #333333 !important;

        box-sizing: border-box !important;
    }
}


/* ==================================================
   スマホ・タブレット
   ヘッダーを本文・フッター幅に合わせる
   ================================================== */

@media screen and (min-width: 601px) and (max-width: 1000px) {

    .header {
        width: 94% !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }

    .header .nav,
    header .nav {
        width: 100% !important;
    }
}


/* ==================================================
   スマホ
   ヘッダーを本文・フッター幅に合わせる
   ================================================== */

@media screen and (max-width: 600px) {
    .header {
        width: 92% !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }

    .header .nav,
    header .nav {
        width: 100% !important;
    }
}

/* ==================================================
   個別記事：画像サイズ・フレーム
   ================================================== */

.post-content img {
    display: block !important;
    width: 60% !important;
    max-width: 60% !important;
    height: auto !important;

    margin: 30px 0 !important;

    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}


/* ==================================================
   個別記事：H2サイズ
   ================================================== */

.post-content h2 {
    font-size: 22px !important;
    line-height: 1.4 !important;
}


/* ==================================================
   タブレット：画像中央揃え
   ================================================== */

@media screen and (min-width: 601px) and (max-width: 1000px) {
    .post-content img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ==================================================
   スマホ
   ================================================== */

@media screen and (max-width: 600px) {
    .post-content img {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .post-content h2 {
        font-size: 20px !important;
    }
}