/* var */
:root{
    --background-color: #fafafa;
    --text-color: #333;
    --primary-color: #60a;
    --border-color: #ddd;
    --codeblock-color: #f0f0f0; 
    --tag-background-color: #fafafa;
    --tag-border-color: #333;
    --selection-background-color: #b3d4fc;
    --blockquote-border-color: #60a;
}
:root[theme = "dark"] {
    --background-color: #111;
    --text-color: #ddd;
    --primary-color: #9f7ac5;
    --border-color: #333;
    --codeblock-color: #333;
    --tag-background-color: #222;
    --tag-border-color: #222;
    --selection-background-color: #666;
    --blockquote-border-color: #ddd;
}

/* General */
body {
    font-family: Noto Sans JP, sans-serif;
    font-weight: 300;
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.4;
    font-size: 16px;
    padding: 20px;
    transition: 0.3s;}
a{
    color: var(--primary-color);
    text-decoration: none;
    word-break: break-word;}
a:hover {
    text-decoration: underline;
    opacity: 0.8;
}
.darkmode a:hover {
    text-decoration: none;
}
a img {
    border:none;}
html,button,input,select,textarea {
    color: #333;}
::-moz-selection {
    background: var(--selection-background-color);
    text-shadow: none;
}
::selection {
    background: var(--selection-background-color);
    text-shadow: none;}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
    padding: 0;}
img {
    margin: 10px auto 10px auto;
    max-width: 100%;
    display: block;}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;}
textarea {
    resize: vertical;}
blockquote {
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: 1rem;
    font-style: italic;
    border-left: 3px solid;
    border-color: var(--blockquote-border-color);
    padding-left: 20px;}
    blockquote cite {
        font-size: 70%;
        opacity: .8;}
    blockquote em {
        font-weight: 600;}

h1,h2,h3,h4,h5,h6 {
    font-family: raleway, Noto Sans JP, sans-serif;
    line-height: 1.2;
    font-weight: 300;}

table th {
    background-color: #f4f4f4;
}
.darkmode table th {
	background-color: #333;
}
table th, table td {
    padding: 10px 20px;
    border: 1px solid #dddddd;
}
.darkmode table th, .darkmode table td {
    padding: 10px 20px;
    border: 1px solid #666;
}



ul {
    list-style: disc;
    padding-left: 15px;}
    ul.flat {
        margin: 0;
        padding: 0;}
        ul.flat li {
            list-style: none;
            margin-left: 0;}

/* 記事の要素 */
.post ul li {
    margin-bottom: 10px;}
    .post ul li p {
        display: inline;}

.post .meta {
    font-size: 0.725rem;
    color: #999;
    margin-bottom: 4px;
}

.post .post-header {
    margin-bottom: 30px;}
    .post .post-header .title {
        margin: 0;}
    .post .post-header .meta {
        margin-top: 10px;}

.post .draft-label {
    color: var(--primary-color);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    margin-left: 6px;
}

.highlight {
    background: 0 0;
    background-color: var(--codeblock-color);}     
    .highlight pre {
        margin-bottom: 0;
        margin-top: 0;
        padding: 20px;
        background-color: transparent !important;}

pre code {
  display: inline-block;
}
  
.wrapper {
    max-width: 1280px;
    margin: 0 auto;}
.container {
    margin-top: 20px;
    max-width: 1280px;
    position: static;}
.section {
    margin-top: 40px;}
.section-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    margin-bottom: 10px;
    letter-spacing: 1px;}


/*
共通の要素
ヘッダー
*/
.header{
    margin: auto;}
    .header .site-title {
        font-weight: 200;
        margin: 0;}
    .header .menu-bar {
        display: flex;
        justify-content: space-between;}
    .header .toggle {
        margin-top: 10px;
        margin-right: 10px;
        width: 24px;
        height: 24px;
    }
    .header .toggle input {
        display: none;}
    .header nav ul.flat li {
        display: inline-block;
        list-style: none;
        margin-left: 0;
        margin-right: 10px;
        margin-top: 10px;
        text-transform: capitalize;}
    .header .site-description {
        display: flex;
        justify-content: space-between;}
        .header .site-description nav {
            margin: 0;
            padding: 0;
            border: none;
            min-width: 50px;
            margin-left: 15px;}
            .header .site-description nav ul svg {
                max-height: 15px;}
.site-title a {
    color: var(--text-color);
    text-decoration: none !important;}

/*
共通の要素
タグ一覧
*/
li.tag {
    margin: 0.25em;
    display: inline-flex;
    align-items: center;
    border-radius: 1.25em;
    border: 0.5px solid var(--tag-border-color);
    background-color: var(--tag-background-color);}
    li.tag img {
        height: 1.5em;
        width: auto;
        margin: 0.25em;
        display: unset;
        border-radius: 50%;}
    li.tag a {
        font-size: 1em;
        margin: 0.25em 0.5em 0.375em 0em;}

/*
共通の要素
次ページ/前ページ
*/
.pagination {
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    justify-content: space-between;}
    .pagination li {
        list-style: none;
        display: inline-block;
        margin: 0;
        padding: 0;}
    .pagination .page-item.page-prev {
        text-align: left;}
    .pagination .page-item.page-next {
        text-align: right;}

/*
共通の要素
フッター
*/
.footer {
    text-align: right;
    font-size: 0.75em;
    color: #999;
    padding: 20px 0;
    margin-top: 20px;
}



/*
モバイル用レイアウト
上下分割,サマリー無
*/
@media (max-width: 480px) {
    .description {
        display: none;
    }
    .side .author p {
        text-align: center;
    }

    .side .author img {
        margin: auto;
        padding: 10px;
        border-radius: 50%;
        max-height: 96px;
        object-fit: contain;
    }

    .side .tag {
        display: flex;
        width: fit-content;
        margin-bottom: 10px
    }
}

/*
タブレット用レイアウト
上下分割,サマリー有
*/
@media (min-width:480px) and (max-width: 1024px) {
    .side {
        max-width: 768px;
    }

    .side .author img {
        margin: 0;
        padding: 10px 10px 10px 0;
        border-radius: 50%;
        max-height: 96px;
        object-fit: contain;
    }
}

/*
PC用レイアウト
左右分割,サマリー有
*/
@media (min-width: 1024px) {
    .with-side-section {
        display: flex;
    }
    .main {
        width: calc(100% - 320px);
        display: block;
    }

    .side {
        width: 296px;
        margin-left: 24px;
    }
    .side .author img {
        margin: auto;
        padding: 10px;
        border-radius: 50%;
        max-height: 128px;
        object-fit: contain;
    }
    .side .author p {
        text-align: center;
    }
    .side .tag {
        display: flex;
        width: fit-content;
        margin-bottom: 10px
    }
}

/*
ページ別
single.html用
*/
.markdown img {
    max-width: 100%;
    max-height: 420px;}
.eyecatch {
    position: relative;
    max-width: 600px;
    margin: auto;
    margin-bottom: 40px;}
.eyecatch-credit {
    position:absolute;
    width: 100%;
    text-align: end;
    font-size: 12px;}
.post-tags a {
        margin-right: 5px;}    
    .post-tags .tags li {
        margin-bottom: 0;
        margin-top: 20px;}
.icon-and-title {
    display: flex;
}
.icon-and-title img {
    width: 3.5em;
    height: 3.5em;
    margin: 0.5em 1em 0.5em 0;
    background-color: var(--tag-background-color);
    border: 1px solid var(--tag-border-color);
    border-radius: 50%;
    object-fit: contain;
}

/*
ページ別
posts/index.html用(記事一覧)
*/
.section .posts {
    margin: 0 0 2em;}
    .section .posts .post {
        padding: 1em 0;}
    .section .posts .flex {
        display: flex;}
        .section .posts .post a {
            width: 25%;
            object-fit: cover;}
            .section .posts .post a img {
                flex: auto;
                margin: auto;
                width: 100%;
                height: 100%;
                object-fit: contain;}
            .section .posts .post .text {
                width: 75%;
                margin-left: 1em;
                margin-bottom: 0.5em;}

/*
ページ別
トップページ
*/              
.profile img {
    margin: auto;
    border-radius: 50%;
    max-height: 128px;
    object-fit: contain;
}

@media (min-width:512px){
    .profile img {
        margin: unset;
        max-height: 128px;
        border-radius: 50%;
        object-fit: contain;
    }
}


/*js用(多分)*/
.align-center {
    text-align: center;}
.align-left {
    text-align: left;}
.align-right {
    text-align: right;}