/* <system section="theme" selected="17179246901347596428"> */
@charset "UTF-8";
/*
  Theme: "Ten Days one"
  Author: saitoy05
  Responsive: yes
  Description: 
    全ページ１カラム、アーカイブページ カード型１列２枚横並び（画面幅768px以上）
    写真はより大きく（といっても大き過ぎない 横幅最大900px）
    記事本文の文字は少し大きめに（20px, 1行最大 全角45文字程度）
    ダークモード対応　レスポンシブデザイン対応
*/

/*! normalize.css v8.0.x | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%;}
body{margin:0;}
main{display:block;}
h1{font-size:2em;margin:0.67em 0;}
hr{box-sizing:content-box;height:0;overflow:visible;}
pre{font-family:monospace,monospace;font-size:1em;}
a{background-color:transparent;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
b,strong{font-weight:bolder;}
code,kbd,samp{font-family:monospace,monospace;font-size:1em;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-0.25em;}
sup{top:-0.5em;}
img{border-style:none;}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}
button,input{overflow:visible;}
button,select{text-transform:none;}
button,[type="button"],[type="reset"],[type="submit"]{appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}
fieldset{padding:0.35em 0.75em 0.625em;}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
progress{vertical-align:baseline;}
textarea{overflow:auto;}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}
[type="search"]{appearance:textfield;outline-offset:-2px;}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
details{display:block;}
summary{display:list-item;}
template{display:none;}
[hidden]{display:none;}

/* ===  Ten Days one  ======================================================= */
:root {
    --text: #454545;
    --base: #f5f5f5;
    --container: rgba(245,245,245,0.9);
    --trans-base: rgba(245,245,245,0.7);
    --bg-active: #ddd;
    --anchor: #008b8b;
    --hover: #0f668f;
    --h1-6: #333;
    --h1-6-a: #333;
    --h1-6-hover: #0f668f;
    --block-pre: rgba(237,237,237,0.8);
    --border: #c0c0c0;
    --shadow: #c0c0c0;
    --kword-border: #999;
}
@media (prefers-color-scheme: dark) {
    :root {
        --text: #ccc;
        --base: #272822;
        --container: rgba(39,40,34,0.9);
        --trans-base: rgba(39,40,34,0.7);
        --bg-active: #666;
        --anchor: #f5f5f5;
        --hover: #ffe295;
        --h1-6: #f2f2f2;
        --h1-6-a: #f2f2f2;
        --h1-6-hover: #fff;
        --block-pre: rgba(0,0,0,0.25);
        --border: #aaa;
        --shadow: #aaa;
        --kword-border: #999;
    }
}
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    font-family: 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Meiryo', sans-serif;
    color: var(--text);
    background-color: var(--base);
    line-height: 1.6;
}
a {
    color: var(--anchor);
    text-decoration: none;
    &:hover {
        color: var(--hover);
        text-decoration: underline;
    }
    &.keyword {
        color: var(--text);
        text-decoration: none;
        border-bottom: 1px dotted var(--kword-border);
    }
}
h1, h2, h3, h4, h5, h6 {
    color: var(--h1-6);
    line-height: 1.3;
    a {
        color: var(--h1-6-a);
        &:hover {
            color: var(--h1-6-hover);
            text-decoration: none;
        }
    }
}
#container, #footer {
    padding: 2em;
    width: auto;
    background-color: var(--container);
}
#blog-title {
    margin: 0.5em 0 2em;
    text-align: center;
    #title {
        margin: 0;
        padding: 1em 0 0;
        font-size: 1.7em;
        a {
            color: var(--h1-6);
        }
    }
    #blog-description {
        margin: 1em 0 0;
        font-size: 0.9em;
        font-weight: normal;
    }
    .header-image-enable & {
        margin: 0.5em 0;
    }
}
#top-editarea, #bottom-editarea {
    margin: 0 auto 1em;
    max-width: 900px;
}
#top-box {
    margin: 2em auto 0;
    max-width: 900px;
    font-size: 0.9em;
}
#content-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    #wrapper {
        width: 100%;
        max-width: 900px;
    }
    #box2 {
        width: 100%;
        max-width: 800px;
        margin-bottom: 1em;
        #box2-inner {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            padding: 0.7em 1em;
            border: 1px solid var(--border);
            border-radius: 8px;
        }
    }
}
#footer {
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 0.9em;
    color: var(--text);
    text-align: center;
    a {
        color: #999;
    }
    p {
        margin: .5em auto;
    }
}
.entry {
    position: relative;
    margin-bottom: 4em;
}
.entry-header {
    position: relative;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--border);
    .entry-header-menu {
        position: absolute;
        top: 0;
        right: 0;
    }
}
.entry-content {
    margin-bottom: 3em;
    font-size: 1.25rem;
}
.entry-content .table-of-contents {
    margin: auto;
    padding: 1em;
    font-size: 0.8em;
    overflow-wrap: break-word;
    border: 1px solid var(--border);
    border-radius: 6px;
    li {
        margin-left: 1em;
    }
    li ul li {
        margin-left: 0;
    }
}
@media (min-width: 768px) {
    .entry-content .table-of-contents {
        margin: 1em;
        column-count: 2;
        column-gap: 2em;
        column-rule: 2px dotted var(--border);
    }
}
.entry-content img, .entry-content video {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 800px;
}
.entry-content h1 {
    margin: 2em 0 1em;
    font-size: 1.3em;
}
.entry-content h2 {
    margin: 2em 0 1em -0.5em;
    padding: 0.3em 1em;
    font-size: 1.2em;
    border: 2px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 0 8px var(--shadow);
}
.entry-content h3 {
    margin: 2em 0 1em -0.5em;
    padding: 0.2em 1em;
    font-size: 1.2em;
    border-top: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 3px 3px var(--shadow);
    width: 85%;
}
.entry-content h4 {
    margin: 2em 0 1em -0.5em;
    padding: 0.1em 1em;
    font-size: 1.2em;
    border-radius: 4px;
    box-shadow: 0 2px 2px var(--shadow);
    width: 70%;
}
.entry-content h5 {
    margin: 1.3em 0 1em -0.2em;
    font-size: 1.1em;
}
.entry-content h6 {
    margin: 1.3em 0 1em -0.2em;
    font-size: 1em;
}
.entry-content ul, .entry-content ol, .entry-content dl {
    margin: 0 0 1em 2em;
    padding: 0;
}
.entry-content ul li ul, .entry-content ul li ol,
.entry-content ol li ul, .entry-content ol li ol,
.entry-content dd li ul, .entry-content dd li ol {
    margin-bottom: 0;
}
.entry-content table {
    display: block;
    margin: 1em;
    width: 100%;
    font-size: 0.9em;
    overflow: auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-bottom: 1em;
}
.entry-content th, .entry-content td {
    padding: 5px 10px;
    border: 1px solid var(--border);
}
.entry-content th {
    background: var(--block-pre);
}
.entry-content blockquote {
    margin: 1em 0.5em; 
    padding: 1em;
    background: var(--block-pre);
    border: 1px solid var(--border);
    & p:first-child {
        margin-top: 0;
    }
    & p:last-child {
        margin-bottom: 0;
    }
}
.entry-content pre, .entry-content code {
    font-family: 'Monaco', 'Consolas', 'Courier New', 'Courier', monospace, sans-serif;
}
.entry-content pre {
    margin: 1em;
    padding: 1em;
    font-size: 0.9em;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    background: var(--block-pre);
    border: none;
    > code {
        margin: 0;
        padding: 0;
        white-space: pre;
        background-color: transparent;
        border: none;
        font-family: 'Monaco', 'Consolas', 'Courier New', 'Courier', monospace, sans-serif;
    }
}
.entry-content code {
    margin: 0 2px;
    padding: 0px 5px;
    font-size: 0.9em;
    background-color: var(--block-pre);
    border-radius: 3px;
}
.entry-content hr {
    width: 50%;
    margin: 2em auto;
    box-sizing: content-box;
    border: none;
    border-top: 1px solid var(--border);
}
.entry-content .hatena-asin-detail {
    margin: 1em;
    border: none;
}
.entry-content {
    div.footnote {
        margin: 3em 0;
    }
    p.footnote {
        padding-left: 2em;
        text-indent: -0.7em;
    }
}
.entry-content {
    h1, h2, h3, h4, h5, h6, .footnote-number {
        scroll-margin-top: 0.5em;
        .page-entry:has(.navi) & {
            scroll-margin-top: 2.5em;
        }
    }
}
.entry-see-more {
    padding-left: 1em;
    font-size: 0.9em;
    &::before, &::after {
        content: ' 〜 ';
    }
}
.entry-fotter {
    margin-top: 3em;
}
.entry-footer-section {
    margin: 2em 0 1em;
    font-size: 0.9em;
    color: #999;
    a {
        color: #999;
    }
}
.entry-footer-subscribe {
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 3px;
}
.entry-footer, .entry-header {
    .social-buttons {
        margin: 1em;
    }
}
.comment-box {
    margin: 2em 1em;
}
.comment {
    margin: 0 0 0.9em 0;
    padding: 0;
    font-size: 0.9em;
    line-height: 1.7;
    list-style: none;
}
.entry-comment {
    padding: 1em 0 1em 3em;
    border-bottom: 1px solid var(--border);
    position: relative;
    &:first-child {
        margin-top: 1em;
        border-top: 1px solid var(--border);
    }
}
.comment-user-name {
    margin: 0 0 .4em 0;
    font-weight: bold;
    .hatena-id-icon {
        position: absolute;
        top: 10px;
        left: 0;
        width: 30px !important;
        height: 30px !important;
        border-radius: 3px;
    }
}
.comment-content {
    margin: 0 0 .4em 0;
    overflow-wrap: break-word;
    color: var(--text);
    p {
        margin: 0 0 .6em 0;
    }
}
.comment-metadata {
    margin: 0;
    font-size: 0.9em;
    color: #999;
    a {
        color: #999;
    }
}
.read-more-comments {
    padding: 0.5em 0;
}
.leave-comment-title {
    padding: .6em 1em;
    font-size: 0.9em;
    border: 1px solid var(--border);
}
.archive-header-category {
    margin-bottom: 1em;
    text-align: center;
}
.archive-entries {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.archive-entry {
    width: 100%;
    margin: 1em;
    line-height: 1.3;
    overflow: auto;
}
@media (min-width: 768px) {
    .archive-entry {
        width: 48%;
        margin: 1em auto;
        padding: 0.3em 1em;
        border: 1px solid var(--border);
        box-shadow: 2px 2px 4px var(--shadow);
        border-radius: 8px;
        .entry-thumb {
            margin-bottom: 0.5em;
            border-radius: 8px;
        }
    }
}
.archive-entry-body {
    font-size: 0.9em;
}
.date {
    margin-bottom: 0.5em;
    font-size: 0.9em;
}
.entry-title {
    .entry & {
        font-size: 1.5em;
    }
    .archive-entry & {
        margin: .3em auto;
        font-size: 1.2em;
    }
}
.categories {
    margin: .5em 0;
    font-size: 0.9em;
}
.entry-category-link, .archive-category-link {
    padding: 0 0.2em;
}
.pager {
    display: flex;
    margin: 2em 0;
    justify-content: space-between;
    .pager-next {
        margin-left: auto;
    }
}
.hatena-module {
    width: 100%;
    margin-bottom: 2em;
    padding: 0 10px;
}
@media (min-width: 480px) {
    .hatena-module {
        width: 50%;
    }
}
@media (min-width: 768px) {
    .hatena-module {
        width: 25%;
    }
}
.hatena-module-title {
    margin-bottom: .6em;
    padding-bottom: .2em;
    font-weight: bold;
    border-bottom: 1px solid var(--border);
    a {
        color: var(--text);
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}
.hatena-module-body {
    max-height:  200px;
    overflow: auto;
    p {
        margin: 0;
    }
    .archive-module-calendar {
        font-family: monospace;
    }
}
.hatena-module-profile {
    .profile-icon {
        margin: 0 10px 10px 0;
        width: 40px !important;
        height: 40px !important;
        float: left;
    }
    .id {
        margin-bottom: .5em;
        display: block;
        font-weight: bold;
    }
    .profile-description p {
        margin-top: 0;
    }
}
.hatena-module-search-box {
    .search-form {
        display: flex;
        align-items: center;
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 3px;
    }
    .search-module-input {
        flex: 1 0;
        width: 90%;
        padding: 5px;
        color: var(--text);
        background: none;
        border: none;
        outline: none;
        height: 20px;
    }
    .search-module-button {
        width: 24px;
        height: 24px;
        margin-right: 5px;
        background: #fff url(https://cdn.blog.st-hatena.com/images/theme/search.png) no-repeat center;
        background-size: 20px 20px;
        border: none;
        outline: none;
        color: transparent;
        overflow: hidden;
        opacity: .5;
        cursor: pointer;
        &:hover {
            opacity: .85;
        }
    }
}
.hatena-urllist {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hatena-urllist li {
    padding: 0.2em;
    &:last-child {
        padding-bottom: 0;
    }
    a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}
.urllist-category-link {
    padding: .1em .3em;
    a {
        color: #999;
    }
}
.urllist-entry-body {
    margin-top: .3em;
}
.archive-module-calendar {
    max-width: 200px;
    line-height: 1.2em;
    th {
        font-size: 0.7em;
    }
}
.entry-tag .entry-tag-link, .archive-entry-tag .archive-entry-tag-link {
    padding: 0 2px;
    color: var(--text);
    background-color: var(--base);
    &:hover {
        color: var(--hover);
        background-color: var(--bg-active);
    }
}
/* ===  ナビゲーションメニュー  === */
/* ヘッダ ブログタイトル下に HTML <div class="navi"><ul><li> を記述 */
#top-editarea {
    position: sticky;
    top: 0;
    z-index: 10;
}
.navi {
    margin: auto;
    max-width: 900px;
    background-color: var(--base);
    border-bottom: 4px double var(--border);
    overflow-x: auto;
}
.navi ul {
    display: flex;
    margin: auto;
    padding-left: 0;
    width: max-content;
    li {
        list-style: none;
        a {
            display: flex;
            padding: 3px;
            align-items: center;
            justify-content: center;
            color: var(--text);
            text-decoration: none;
            &:hover, &:focus {
                background-color: var(--bg-active);
            }
        }
    }
}
.navi button {
    margin-top: 0;
    padding: 2px;
    font-size: small;
    color: var(--text);
    background-color: var(--base);
    border: 2px var(--border) solid;
    border-radius: 5px;
    &:focus {
        outline: 1px var(--text) solid;
        outline-offset: 2px;
    }
    &.active {
        font-weight: bold;
        background-color: var(--bg-active);
    }
}

/* </system> */