/* <system section="theme" selected="26006613659732769"> */
/* <system section="theme" selected="26006613652605202"> */
@charset "UTF-8";
/*
  Theme: Cuppuccino
  Author: fujiguchi
  Responsive: yes
  Description:
    大人可愛い（かっこいい）デザインのはてなブログテーマです。
    カスタマイズが苦手な方でもすぐに使えるようになっています。
*/
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
:root {
  --theme-color: #2a2922;
  --navigation-color: #7d5642;
  --navigation-hover-color: #9a725d;
  --main-color: #7d5642;
  --main-text-color: #fff;
  --font-color: #5f5750;
  --accent-color: #57a085;
  --shadow1-color: rgba(0,0,0,.1);
  --shadow2-color: rgba(0,0,0,.06);
}
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
    line-height: 1.15;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    scroll-behavior: smooth;
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
    /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
    margin: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
 a {
     background-color: transparent;
     /* 1 */
     -webkit-text-decoration-skip: objects;
     /* 2 */
 }

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
    display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
    display: none;
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
    color: #454545;
    background: #f3ebdd;
    line-height: 1.6;
}

a {
    color: #454545;
    text-decoration: none;
    -webkit-transition: .1s;
    transition: .1s;
}

a:hover {
    color: #0f668f;
}

a.keyword {
    text-decoration: none;
    border-bottom: 1px dotted #ddd;
    color: #454545;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    line-height: 1.3;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #5f5750;
    color: var(--font-color);
    text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #0f668f;
}

/* ヘッダ（グローバルヘッダ）
  グローバルヘッダの中はiframeですが、
  #globalheader-container に背景色や文字色を指定することでiframeの中にも色が反映されます。
*/
#globalheader-container {
    background-color: #454545;
    color: #fff;
}

#globalheader-container {
    background: var(--theme-color);  
}

/* container */
#content {
    margin-top: 2rem;
}

/* 2カラムレイアウト */
#content-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    #content-inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}

#top-box {
    max-width: 1200px;
    margin: 0 auto 1em;
    box-sizing: border-box;
}

#main {
    width: 100%;
}

#main-inner, #box2-inner, .breadcrumb {
    padding: 0 10px;
}

.page-entry #main-inner {
  padding: 0;
}

#box2 {
    word-wrap: break-word;
}
@media (min-width: 992px) {
    #box2 {
        width: 370px;
    }
}

/* ヘッダ */
#blog-title {
    margin: 0 ;
    text-align: center;
    padding: 1em;
}

@media (min-width: 768px) {
    #blog-title {
      padding: 3em;
    }
    #title {
        font-size: 2.5rem;
    }
    .page-archive #content {
        margin-top: 3rem;
    }
    .page-archive-category #content {
    margin-top: 0;
}
}

#title {
    margin: 0;
    font-weight: normal;
    font-family: 'Fredericka the Great', cursive;
}

@media (min-width: 992px) {
    #title {
        font-size: 3rem;
    }
    #wrapper {
        width: calc( 100% - 370px);
    }
    #box2-inner {
      padding: 0;
    }
}

#title a {
    color: #454545;
    color: #fff;
    text-shadow: 3px 3px 5px black;
}

#blog-description {
    font-weight: normal;
    font-size: .8rem;
    margin: .5em 0 0;
    text-shadow: 1px 1px 2px black;
    color: #fff;
}

/* ヘッダ画像を設定したとき */
.header-image-enable #blog-title {
    margin: 0 0 2em;
}

.header-image-enable #blog-title-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.header-image-enable #blog-title-content {
    margin: 0 auto;
}

/* タイトル下HTML */
#top-editarea {
    margin-bottom: 1em;
}

/* パンくず（カテゴリー、記事ページで表示されます） */
.breadcrumb {
    font-size: .9rem;
}
.breadcrumb-child:last-of-type {
    display: none;
}

/* entry */
.entry {
    position: relative;
    margin-bottom: 3em;
    line-height: 1.8;
    padding: 1rem 4.5vw;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 5px 10px var(--shadow-color);
    box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
    word-break: break-word;
}

.entry-header {
    margin-bottom: 2em;
    position: relative;
}


time[title*="-01-"] .date-month::before {
  content: 'JANUARY';
}

time[title*="-02-"] .date-month::before {
  content: 'FEBRUARY';
}

time[title*="-03-"] .date-month::before {
  content: 'MARCH';
}

time[title*="-04-"] .date-month::before {
  content: 'APRIL';
}

time[title*="-05-"] .date-month::before {
  content: 'MAY';
}

time[title*="-06-"] .date-month::before {
  content: 'JUNE';
}

time[title*="-07-"] .date-month::before {
  content: 'JULY';
}

time[title*="-08-"] .date-month::before {
  content: 'AUGUST';
}

time[title*="-09-"] .date-month::before {
  content: 'SEPTEMBER';
}

time[title*="-10-"] .date-month::before {
  content: 'OCTOBER';
}

time[title*="-11-"] .date-month::before {
  content: 'NOVEMBER';
}

time[title*="-12-"] .date-month::before {
  content: 'DECEMBER';
}

.date a {
    color: #999;
    text-decoration: none;
}

.date a:hover {
    text-decoration: underline;
}

.entry-title {
    margin: 0 0 .3em;
    padding-bottom: .5em;
    font-size: 1.5rem;
    border-bottom: solid 2px #5f5750;
    border-bottom: solid 2px var(--font-color);
}

.categories {
    margin: .5em;
    font-size: .9rem;
}

.page-archive .categories {
    position: absolute;
    bottom: 0;
    font-size: .75rem;
    z-index: 2;
}

 .archive-entry:nth-child(odd) .categories {
    right: 0;
}

.entry .categories a {
    margin-bottom: .2em;
}

.categories a, .urllist-categories a {
    text-decoration: none;
    padding: .1em .5em;
    background: #57a085;
    background: var(--accent-color);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
}

.urllist-title-link {
    font-size: .9rem;
}

@media (min-width: 992px) {
    .entry-title {
        font-size: 1.6rem;
    }
}

 @media (max-width: 767px) {
    .archive-entry:nth-child(even) .categories {
        left: 0;
    }
    .page-archive .archive-entry:nth-child(odd) .archive-date {
        left: 0;
    }

    .page-archive .archive-entry:nth-child(even) .archive-date {
        right: 0;
    }
}

/* 「編集する」ボタン */
.entry-header-menu {
    position: absolute;
    top: 0;
    right: 0;
}

/* 記事内の書式 */
.entry-content img,
.entry-content video {
    max-width: 100%;
    height: auto;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin: 1em 0 0.8em 0;
}

.entry-content h1 {
    font-size: 1.5rem;
}

@media (min-width: 992px) {
    .entry-content h1 {
        font-size: 1.7rem;
    }
}

.entry-content h2 {
    font-size: 1.4rem;
    padding: 0 .7em;
    background: linear-gradient(-45deg,transparent 25%, #7d5642 25%, #7d5642 50%,transparent 50%,transparent 75%, #7d5642 75%)left bottom/ 7px 7px repeat-y; 
    background: linear-gradient(-45deg,transparent 25%,var(--main-color) 25%,var(--main-color) 50%,transparent 50%,transparent 75%,var(--main-color) 75%)left bottom/ 7px 7px repeat-y;
}

@media (min-width: 992px) {
    .entry-content h2 {
        font-size: 1.5rem;
    }
}

.entry-content h4 {
    font-size: 1.2rem;
    padding: .6em 0;
    background: linear-gradient(-45deg,transparent 25%, #7d5642 25%, #7d5642 50%,transparent 50%,transparent 75%, #7d5642 75%)left bottom/ 7px 7px repeat-x; 
    background: linear-gradient(-45deg,transparent 25%,var( --main-color) 25%,var(--main-color) 50%,transparent 50%,transparent 75%,var(--main-color) 75%)left bottom/ 7px 7px repeat-x;
}
@media (min-width: 992px) {
    .entry-content h3 {
        font-size: 1.3rem;
    }
}

.entry-content h4 {
    font-size: 1.1rem;
}

.entry-content h5 {
    font-size: 1rem;
}

.entry-content h6 {
    font-size: .9rem;
}

.entry-content a {
    color: #3583b0;
    text-decoration: underline;
}
.entry-content a:hover {
    color: #1d6a96;
    text-decoration: none;
}
.entry-content ul:not(.table-of-contents),
.entry-content ol,
.entry-content dd {
    margin: 0 0 1em 1.5em;
    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 {
    border-collapse: collapse;
    border-spacing: 0;
    border-bottom: 1em;
    margin-bottom: 1em;
    width: 100%;
    overflow: auto;
    font-size: .8rem;
}

@media (min-width: 992px) {
    .entry-content table {
        font-size: .9rem;
    }
}

.entry-content table th,
.entry-content table td {
    border: 1px solid #ddd;
    padding: 5px 10px;
}

.entry-content table th {
    background: #f5f5f5;
}

.entry-content blockquote {
    border: 1px solid #ddd;
    margin: 0 0 10px;
    padding: 25px 20px;
    position: relative;
    background: #fbfbfb;
    margin: 2em 0;
}

.entry-content blockquote p:first-child {
    margin-top: 0;
}

.entry-content blockquote 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 {
    background: #f5f5f5;
    border: none;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    font-size: 100%;
    line-height: 1.3;
    font-size: .8rem;
    padding: 10px;
}

.entry-content pre > code {
    margin: 0;
    padding: 0;
    white-space: pre;
    border: none;
    background-color: transparent;
    font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}

.entry-content code {
    font-size: 90%;
    margin: 0 2px;
    padding: 0px 5px;
    background-color: #f5f5f5;
    border-radius: 3px;
}

.entry-content hr {
    width: 50%;
    border: 0;
    border: none;
    border-top: 1px solid #ddd;
    margin: 2em auto;
}

.table-of-contents {
    padding: 2.5em 1em 1em 2em;
    margin: 1em 0;
    border: 1px solid #ddd;
    position: relative;
    background: #343434;
    border: solid 5px #b58c6a;
    border-radius: 4px;
    color: #fff;
    list-style: decimal;
}

.table-of-contents::before {
    content: "CONTENTS";
    display: inline-block;
    padding: 0 1em;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120%;
    font-family: 'Fredericka the Great', cursive;
    letter-spacing: .05em;
    color: #fff;
    background: #343434;
    white-space: nowrap;
    z-index: 1;
}

.table-of-contents::after {
    content: "";
    display: block;
    position: absolute;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2em);
    height: 10px;
    background: linear-gradient(-45deg,transparent 25%, #8e7250 25%, #8e7250 50%,transparent 50%,transparent 75%, #8e7250 75%)left bottom/ 7px 7px repeat-x;
}

.table-of-contents a {
    color: #fff;
    text-decoration: none;
}

.table-of-contents li {
    margin: .3em 0;
    position: relative;
}

.table-of-contents li ul {
    margin: 0 0 .3em 2em;
}

.table-of-contents ul {
    list-style: none;
}

.table-of-contents ul li::before {
    content: "";
    width: 4px;
    height: 10px;
    border-left: solid 2px #fff;
    border-bottom: solid 2px #fff;
    position: absolute;
    top: 2px;
    left: -12px;
}

/* 記事下 */
.entry-footer .social-buttons {
    margin-bottom: 1em;
}

.entry-footer-section {
    color: #999;
    font-size: .9rem;
}

.entry-footer-section a {
    color: #999;
}

/* コメント */
.comment-box {
    margin: 1em 0;
}

.comment-box .comment {
    list-style: none;
    margin: 2em 0 15px 0;
    padding: 0;
    line-height: 1.7;
    font-size: .85rem;
}

.comment-box .entry-comment {
    padding: 1em;
    border: solid #ddd 1px;
    border-radius: 6px;
    margin: 10px 0 10px 65px;
}

ul.comment li::before {
    content: "";
    display: block;
    height: calc(100% - 45px);
    width: 2px;
    background: #eee;
    position: absolute;
    left: -45px;
    bottom: -10px;
}

.comment-box .entry-comment::after {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: #fff;
    border-left: solid 1px #ddd;
    border-top: solid 1px #ddd;
    position: absolute;
    top: 20px;
    left: -6px;
    transform: rotate(-45deg);
}

.comment-box .hatena-id-icon {
    position: absolute;
    top: 0;
    left: -70px;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    border: solid #ddd 1px;
}
ul.comment li:nth-last-child(2)::before, ul.comment li:last-child::before {
    display: none;
}

@media (min-width: 768px) {
    .comment-box .comment {
        font-size: .9rem;
    }
}

.comment-box .entry-comment:first-child {
    border-top: 1px solid #ddd;
}

.comment-box .read-more-comments {
    padding: 10px 0;
}

.read-more-comments a {
    cursor: pointer;
    text-decoration: underline;
}

.comment-user-name {
    margin: 0 0 .4em 0;
    font-weight: bold;
}

.comment-content {
    margin: 0 0 .4em 0;
    word-wrap: break-word;
    color: #454545;
    font-size: .85rem;
}

.comment-content p {
    margin: 0 0 .6em 0;
}

.comment-metadata {
    color: #999;
    margin: 0;
    font-size: .8rem;
}

.comment-metadata a {
    color: #999;
}

.leave-comment-title {
    font-size: .85rem;
    padding: .8em 1.3em;
    border-radius: 2em;
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    box-shadow: 0 4px 15px 0 #d2c2ac;
}

.leave-comment-title:hover {
    color: #fff;
    color: var(--main-text-color);
    text-decoration: underline;
    box-shadow: 0 0 5px 0 #ccaa7d;
}

/* Pager */
.pager {
    margin: 2em 1em 3em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

/* サイドバーモジュール */
.hatena-module {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 2em;
    padding: 1rem;
    background: #fff;
    font-size: .85rem;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,.1) 0px 4px 6px -1px, rgba(0,0,0,.06) 0px 2px 4px -1px;
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
}

@media (min-width: 768px) {
    .hatena-module {
        font-size: .9rem;
    }
}

.hatena-module-title {
    margin-bottom: 1em;
    padding-top: .3em;
    color: #5f5750;
    color: var(--font-color);
    font-size: 1rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    letter-spacing: .1em;
    border-bottom: solid 2px;
}

.hatena-module-title a {
    text-decoration: none;
    color: #5f5750;
    color: var(--font-color);
}

.hatena-module-title a:hover {
    text-decoration: underline;
}

/* Profile module */
.hatena-module-profile .profile-icon {
    display: block;
    width: 100px;
    margin: 0 auto;
    border: solid 1px #ddd;
    border-radius: 50%;
}

.hatena-module-profile .id {
    display: block;
    font-weight: bold;
    margin-bottom: .5em;
    text-align: center;
}

.hatena-module-profile .profile-description p {
    margin-top: 0;
}

/* urllist module */
.hatena-urllist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hatena-urllist li {
    padding: .5em 0;
}

.hatena-urllist li:last-child {
    padding-bottom: 0;
}

.hatena-urllist li a {
    text-decoration: none;
}

.hatena-urllist li a:hover {
    /*text-decoration: underline;*/
}

.hatena-urllist .urllist-category-link {
    font-size: .7rem;
    padding: .1em .3em;
}

.hatena-urllist .urllist-date-link a {
    color: #999;
}

.hatena-urllist .urllist-entry-body {
    margin-top: .3em;
}
.hatena-urllist .archive-module-year .archive-module-month {
    margin: .2em 0 .1em 2.5em;
    padding: 0;
    border: none;
    list-style-type: none!important;
    background: none;
}

.hatena-module-category .hatena-urllist li {
    padding: 0;
    display: inline-block;
}

.hatena-module-category .hatena-urllist li a {
    display: inline-block;
    font-size: .8rem;
    margin: 0 .2rem .8rem;
    padding: .3rem 1rem;
    border: solid 1px #7d5642;
    border: solid 1px var(--main-color);
    border-radius: 2rem;
    transition: .3s;
}

.hatena-module-category .hatena-urllist li a:hover {
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    text-decoration: none;
}

.hatena-module-related-entries .hatena-module-title {
    padding: 1em 0 .5em;
}

.entry .hatena-module-related-entries {
    box-shadow: none;
    border: none;
    padding: 0;
}


/***階層化デザイン修正コード***/
.hatena-module-category ul li.on-border {
    border: none!important;
}

.recent-entries li:not(:last-child), .entries-access-ranking li:not(:last-child) {
    border-bottom: solid 1px #ddd;
}


/*サイドバーもっと見るボタン*/
.urllist-see-more-link {
    display: inline-block;
    padding: .3em .8em;
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    border-radius: 2em;
}

.urllist-see-more-link:hover {
    color: #fff;
    text-decoration: underline;
}

.urllist-with-thumbnails li .urllist-image {
    margin: 0 .7em .7em 0;
    float: left;
    border-radius: 6px;
    box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
    transition: .3s;
}

.urllist-with-thumbnails li .urllist-image:hover {
    transform: translateY(4px);
    box-shadow: none;
}

.archive-module-calendar-highlight {
    background: var(--accent-color);
    color: #fff;
    padding: .2em .8em;
    border-radius: 1em;
}

.archive-module-calendar, .archive-module-calendar .archive-module-calendar-selector {
    font-family: 'Fredericka the Great', cursive;
}

/* Search module */
.search-form {
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.search-module-input {
    -webkit-box-flex: 1;
        -ms-flex: 1 0;
            flex: 1 0;
    padding: 5px;
    color: #454545;
    background: none;
    border: none;
    outline: none;
    height: 20px;
}

.search-module-button {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat center;
    background-size: 20px 20px;
    border: none;
    outline: none;
    color: transparent;
    overflow: hidden;
    opacity: .5;
    cursor: pointer;
}

.search-module-button:hover, .search-result-button:hover {
    opacity: .85;
}

/* About ページ */
.page-about .entry-content dt {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    margin-bottom: .5em;
}

.page-about .entry-content dd {
    margin-left: 0;
    margin-bottom: 2em;
}

/* Archive */
.entry-thumb-link {
    order: 0;
    width: 100%;
    margin: -4vw auto 1vw;
}

.entry-thumb-link::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.archive-entry-header {
    order: 1;
    width: 100%;
}

.page-archive .entry-title {
    font-size: calc(1rem - 1px);
    position: relative;
}

.page-archive .archive-entry:nth-child(odd) .entry-title {
    margin: 0 0 1.6em 1em;
}

.page-archive .archive-entry:nth-child(even) .entry-title {
    margin: 0 1em 1.6em 0;
}

.archive-header-category {
    text-align: center;
}

.archive-entry-body {
    display: none;
}

.page-archive .archive-entry {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: relative;
    padding: 3vw;
    margin: 0 auto 6vw;
    background: #fff;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
    width: 100%;
    transition: .5s;
    box-sizing: border-box;
}

.page-archive .entry-thumb {
    position: relative;
    background-size: cover;
    width: 100%;
    transition: .5s;
    height: 0;
    padding-top: 56.25%;
    border-radius: 4px 4px 0 0;
    box-shadow: rgba(0,0,0,.2) 0px 10px 10px -4px, rgba(0,0,0,.01) 0px 4px 6px -2px;
}

.page-archive .entry-description {
    margin: 0;
    font-size: .85rem;
}


.page-archive .social-buttons {
    display: none;
    margin-top: .3em;
}

.page-index .archive-date, .page-archive .archive-date {
    position: absolute;
    display: inline-block;
}

.page-index .archive-date a, .entry-date a, .page-archive .archive-date a {
    color: #5f5750;
    color: var(--font-color);
    font-family: 'Fredericka the Great', cursive;
    position: relative;
    display: inline-block;
    text-decoration: none;
    pointer-events: none;
}

.page-index .archive-date a .hyphen, .entry-date a .hyphen, .page-archive a .hyphen {
    display: none;
}

.page-index .archive-date time, .entry-date time, .page-archive time {
    display: flex;
    align-items: flex-end;
}

.entry-date .date-day {
    order: 1;
    font-size: 7vw;
    line-height: 1;
}
.page-index .archive-date .date-day, .page-archive .date-day {
    order: 1;
    font-size: 5vw;
    line-height: 1;
}

.page-index .archive-date .date-year, .entry-date .date-year, .page-archive .date-year {
    display: none;
}

.page-index .archive-date .date-month, .entry-date .date-month, .page-archive .date-month {
    order: 2;
    font-size: 0;
}

.entry-date .date-month::before {
    font-size: 3vw;
    display: inline-block;
    margin: 0 .5em;
    letter-spacing: .1em;
}

.page-index .archive-date .date-month::before, .page-archive .date-month::before {
    font-size: 2vw;
    display: inline-block;
    margin: 0 .5em;
    letter-spacing: .1em;
}

.page-archive .archive-entry .archive-date {
    position: absolute;
    bottom: 0;
    padding: .2em 1em .2em 1em;
    border-radius: 2px;
    background: rgba(255,255,255,.8);
    z-index: 1;
}

.page-archive .archive-entry:nth-child(n+3):nth-child(2n) .archive-date {
    right: 0;
}

.page-archive .archive-entry:nth-child(n+3):nth-child(2n+1) .archive-date {
    left: 0;
}

.page-archive .archive-entry:nth-child(even) {
    flex-direction: row-reverse;
}

.archive-entry-tags-wrapper {
    display: none;
}

@media (min-width: 768px) {
    .page-archive .entry-description {
        font-size: .9rem;
    }
}
@media (min-width: 992px) {
    .page-index .archive-date .date-month::before, .entry-date .date-month::before {
        font-size: 1vw;
    }
    .page-index .archive-date .date-day, .entry-date .date-day {
        font-size: 3vw;
    }
    .page-archive .archive-entry .date-day {
        font-size: 3vw;
        font-size: min(3vw, 46px);
    }
    .page-archive .archive-entry .date-month::before {
        font-size: 1vw;
        font-size: min(1vw, 18px);
    }
}

/* footer */
#footer {
    margin-top: 2em;
    padding: 2rem 0;
    text-align: center;
    font-size: .8rem;
    color: #999;
}

#footer a {
    color: #999;
}

#footer p {
    margin: .5em auto;
}

@media (min-width: 768px) {
  #main-inner, .breadcrumb {
      padding: 0 2vw;
  }
  .archive-entries {
      display: flex;
      flex-wrap: wrap;
  }
  .page-archive .archive-entry {
    margin-bottom: 4vw;
    padding: 2vw;
  }
  .page-archive .archive-entry:nth-child(-n+2) {
    flex-direction: column;
    width: calc(50% - 10px);
  }
  .page-archive .archive-entry:nth-child(2) {
      margin-left: 20px;
  }
  .page-archive .archive-entry:nth-child(-n+2) .entry-title {
      margin: .3em 0 1.6em;
  }
  .entry-thumb-link {
      margin: -3vw auto 1vw;
  }

  .page-archive .archive-entry:nth-child(2) .categories {
      right: 0;
  }
  .archive-entry:nth-child(even).archive-entry:nth-child(n+3) .categories {
      left: 0;
  }
  .page-archive .archive-entry:nth-child(-n+2) .archive-date {
      left: 0;
  }
  .page-archive .archive-entry:nth-child(even) .archive-entry:nth-child(n+3) .archive-date {
      right: 0;
  }
  .page-archive .archive-entry:nth-child(-n+2) .archive-date {
      padding: .15em 1em;
  }
  .page-archive .entry-title {
      font-size: 2vw;
  }
  .archive-entry:nth-child(n+3) .entry-title-link::before {
      content: "READ MORE";
      display: inline-block;
      position: absolute;
      bottom: -3em;
      font-family: 'Fredericka the Great', cursive;
      font-weight: normal;
      font-size: .8em;
      padding: .5em 1em;
      background: #7d5642;
      background: var(--main-color);
      color: #fff;
      color: var(--main-text-color);
      border-radius: 2em;
      z-index: 2;
  }
  .archive-entry:nth-child(even):nth-child(n+3) .entry-title-link::before {
      right: 0;
  }
  .archive-entry:nth-child(odd):nth-child(n+3) .entry-title-link::before {
      left: 0;
  }
}

.page-archive .entry-title::before {
    content: "";
    width: 15%;
    border-top: solid 2px #5f5750;
    border-top: solid 2px var(--font-color);
    position: absolute;
    bottom: .2em;
    right: 0;
}

@media screen and (min-width:768px) and ( max-width:991px) {
    #box2 {
        word-wrap: break-word;
        background: none;
        padding: 0;
    }
    #box2-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 40px;
    }
    .page-entry #main-inner {
        padding: 0 2vw;
    }
    .page-archive .archive-entry .date-day {
        font-size: 3.5vw;
    }
    .page-archive .archive-entry .date-month::before {
        font-size: 1.5vw;
    }
    .hatena-module {
        width: 49%;
        background: #fff;
        margin-bottom: 2rem;
    }
}

@media (min-width: 992px) {
  .page-archive .archive-entry {
      margin-bottom: 3vw;
  }
  .page-archive .archive-entry:nth-child(-n+2) {
      padding: 1vw;
  }
  .page-archive .archive-entry:nth-child(-n+2) .entry-title {
      margin: .3em 0 2em;
  }
  .page-archive .archive-entry:nth-child(-n+2) .entry-thumb-link {
      margin-top: -2vw;
  }
  .page-archive .entry-title {
      font-size: 17px;
}
}

@media (min-width: 1200px) {
    .page-archive .archive-entry {
      margin-bottom: 36px;
      padding: 24px;
    }
    .entry-thumb-link {
      margin: -36px auto 12px;
    }
    .page-archive .archive-entry:nth-child(-n+2) {
      padding: 12px;
    }
    .page-archive .archive-entry:nth-child(-n+2) .entry-thumb-link {
      margin-top: -24px;
    }
}

.entry-content h3 {
    border-bottom: solid 3px;
    position: relative;
    margin: 2em 0 1.5em;
    padding: .3em 0;
}

.entry-content h3::brfore {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 15%;
    border-bottom: solid 3px #7dc3a3;
}

.page-archive .categories a:nth-child(n+2) {
    display: none;/*最初のカテゴリのみ表示*/
}

.archive-entry:hover .entry-thumb {
    transform: translateY(.5vw);
    box-shadow: none;
    opacity: .7;
}
.archive-entry:hover .entry-thumb-link::before {
    background: rgba(255,255,255,.3);
}

a.entry-see-more {
    display: inline-block;
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    padding: .3rem 1rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: .3s;
}

a.entry-see-more:hover {
    opacity: .8;
    text-decoration: underline;
    color: #fff;
}

.entry-categories {
    margin: 1em 0;
}

.pager-prev, .pager-next {
    position: relative;
    width: 40%;
    text-align: center;
}

.pager-next a, .pager-prev a {
    display: block;
}

.pager-prev a::before, .pager-next a::before {
    display: block;
    font-family: 'Fredericka the Great', cursive;
    font-size: 25px;
    font-style: italic;
    text-align: center;
    line-height: 1;
    margin-bottom: .3em;
    border-bottom: solid 1px #777;
}

.pager-prev a::before {
    content: "NEW";
}

.pager-next a::before {
    content: "OLD";
}

.pager-prev a::after, .pager-next a::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 1px;
    background: #777;
    position: absolute;
}

.pager-prev a::after {
    left: 0;
    top: 21px;
    transform: rotate(-30deg);
}

.pager-next a::after {
    right: 0;
    top: 21px;
    transform: rotate(30deg);
}

.pager-arrow {
    display: none;
}

.entry-title {
    position: relative;
}
.entry-title::before {
    content: "";
    width: 10%;
    border-top: solid 2px #5f5750;
    border-top: solid 2px var(--font-color);
    position: absolute;
    bottom: .2em;
    right: 0;
}

.entry-content ul:not(.table-of-contents), .entry-content ol, .entry-content dd {
    margin: 1em 0 1em 1.5em;
}


.archive-module-month {
    transition: .3s;
    text-decoration: none;
}

.archive-module-month:hover {
    transform: translateX(4px);
    text-decoration: none;
}

.archive-module-month-title {
    position: relative;
    transition: .3s;
}

.archive-module-month-title:hover {
    text-decoration: none;
}

.archive-module-month a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: solid 2px #777;
    border-right: solid 2px #777;
    transform: rotate(45deg);
    position: absolute;
    top: .4em;
    left: -1em;
}

@media (min-width: 768px) {
  .entry {
    padding: 2rem;
  }
  #main-inner, .page-entry #main-inner, .breadcrumb {
    padding: 0 40px;
  }
}

#blog-title, #footer, #header #header-body  {
    background: #2a2922;
    background: var(--theme-color);
}

#footer, #footer a {
    color: #fff;
}
.page-entry .breadcrumb {
    margin-bottom: 1em;
}

blockquote::before, blockquote::after {
    color: #eee;
    content: "\f704";
    font-family: 'blogicon';
    position: absolute;
    font-size: 3em;
}
blockquote::before {
    top: -35px;
    left: 10px;
}
blockquote::after {
    bottom: -35px;
    right: 10px;
    transform: rotate(180deg);
}

/***記事内コード用***/
.entry-content pre {
    background: #000;
    white-space: pre;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-size: .8rem;
    position: relative;
    padding: 1.5em 1em .5em;
    border: solid 1px #ddd;
    font-size: 1em;
    text-overflow: unset;
}

.entry-content pre.lang-html::before {
    content: " html ";
    position: absolute;
    top: 0;
    left: 0;
    background: #5e6bff;
    color: #fff;
}

.entry-content pre.lang-css::before {
    content: " CSS ";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff75e;
}

/***グローバルナビゲーション***/

.g-nav {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

.g-nav li a {
    display: block;
    padding: .8em 0;
    color: #555;
    font-weight: bold;
    transition: .3s;
}

.g-nav li {
    width: 100%;
}

.g-nav li a:hover {
  background: #9a725d;
    background: var(--navigation-hover-color);
}

@media (max-width: 767px) {
  #nav-drawer {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 9999;
  }

.nav-unshown {
  display:none;
}

#nav-open {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1;
    background: rgba(255,255,255,.7);
    padding: .5em;
    border-radius: 6px;
    color: #2a2922;
    font-weight: bold;
}

.g-nav-icon {
    font-size: 25px;
}

.mini-text {
    font-size: 10px;
}

#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 85%;
    max-width: 500px;
    height: 100%;
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-130%);
    transform: translateX(-130%);
}

#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.nav-close {
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 1em;
    font-size: .85rem;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1;
}

.nav-close i {
    font-size: 2rem;
}
}

@media (min-width: 768px) {
  #nav-input, .nav-close {
      display: none;
  }
  #nav-content {
      position: relative;
      background: #7d5642;
      background: var(--navigation-color);
      box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
      box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
  }
  #nav-open {
    display: none;
  }
  .g-nav {
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
      padding: 0;
      max-width: 1200px;
  }
  .g-nav li a {
      color: #fff;
      font-size: .85rem;
  }
}
/***シェアボタン***/
.sharebtn{margin:0 0 1em 0;}
.sharebtn a{display: block;width: 48px;height: 48px;line-height: 48px;color: #fff;text-align: center;border-radius: 4px;background: #fff;box-sizing: border-box;transition: .2s;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/}
.sharebtn a i{margin: 0;font-size: 25px;line-height: 48px;}

.sharebtn .btn_fb{background:#1877f2;}
.sharebtn .btn_tw{background:#1da1f2;}
.sharebtn .btn_po{background:#ee4056;}
.sharebtn .btn_hb{background:#00a4de;}
.sharebtn .btn_li{background:#06c755;}
.sharebtn a:hover {opacity: .7;box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 10px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}
.sharebtn .blogicon-bookmark {font-size: 33px;line-height: 1.3em;vertical-align: -11%;}
.sharebtn_list {padding: 0;list-style: none;display: flex;margin: .5em 0 2em;}

.sharebtn_item:not(:last-child) {margin-right: 8px;}
/***ボーダーボタン***/
.sharebtn .bd:not(:hover) {background: none;border: solid 1px;}
.sharebtn a.bd:hover {color:#fff;opacity: 1;}
.sharebtn .btn_fb.bd{color: #1877f2;}
.sharebtn .btn_tw.bd{color: #1da1f2;}
.sharebtn .btn_po.bd{color: #ee4056;}
.sharebtn .btn_hb.bd{color: #00a4de;}
.sharebtn .btn_li.bd{color: #06c755;}

/***おすすめ記事***/
.c_recommend-container {
  margin: 0;
  padding: 2em 2.5vw 0;
  background: #fff;
}
#top-editarea .c_recommend-container {
    box-shadow: rgba(0,0,0,.1) 0px 4px 6px -1px, rgba(0,0,0,.06) 0px 2px 4px -1px;
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
}
.c_recommend {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0!important;
  list-style: none;
}
.c_recommend-item {
  width: 50%;
  margin-bottom: 1.5em;
  padding: 0 .5em;
  box-sizing: border-box;
  border-radius: 4px;
}
.c_recommend-thumb {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding-top: 56.25%;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.c_recommend-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    transition: .5s;
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.c_recommend-item:hover .c_recommend-img {
    transform: scale(1.06);
    opacity: .8;
}
.c_recommend-item-body {}

.c_recommend-item-title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    padding: .5em 0 0;
}
@media (min-width: 600px) {
  .c_recommend-item-title {
    font-size: 1rem;
}
}
@media (min-width: 768px) {
  .g-nav {
    margin: 0 auto;
}
  .c_recommend-item {
    width: 25%;
}
  .entry .c_recommend-item {
    width: 33.3%;
}
}
.entry .c_recommend-container {
    padding: 0;
    margin: 1em -.5em 0;
}

.hatena-module-html .c_recommend-container {
    padding: 0;
}

.hatena-module-html .c_recommend-item {
    width: 50%;
}

.hatena-module-html .c_recommend-item-title {
    font-size: 14px;
}

.hatena-module-html .c_recommend-item:nth-child(odd) {
    padding-left: 0;
}

.hatena-module-html .c_recommend-item:nth-child(even) {
    padding-right: 0;
}

/***おすすめ記事カード型***/
.c_recommend-thumb.card, .c_recommend-thumb .c_recommend-img {
    border-radius: 3px 3px 0 0;
    box-shadow: none;
}
.c_recommend-item-body.card {
    padding: 0 .5em .5em;
}
.c_recommend-item.card, .entry .c_recommend-item.card {
    border: solid 1px #acacac;
    padding: 0;
    width: 48%;
    margin: 0 1% 1.5em;
}
@media (min-width:768px) {
.c_recommend-item.card {
    margin: 0 .5% 2em;
    width: 24%;
}
.entry .c_recommend-item.card {
    width: 31%;
}
}
.hatena-module-html .c_recommend {
    justify-content: space-between;
}
.hatena-module-html .c_recommend-item.card {
    width: 48%;
    margin-bottom: 1.5em;
}

/* </system> */

/* <system section="background" selected="undefined"> */

/* </system> */


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

/* 最終更新：2025/6/2 */

/*---------------------------
  
  0. グローバル変数（:root）

  1. 全体の調整
    1.1 記事内の位置調整（pタグ・画像など）
    1.2 フォント・リンクの調整
    1.3 見出しのスタイル（h3・h5・h6）
    1.4 モバイル表示の調整
      1.4.1 検索バー非表示（スマホのみ）
      1.4.2 ハンバーガーメニュー位置（スマホ）

  2. 目次
    2.1 既存テンプレートのリセット
    2.2 カスタム目次（通常）
    2.3 長文用スクロール目次

  3. カテゴリ一覧
    3.1 デフォルトスタイル（urllist）
    3.2 サイドバーカテゴリの折りたたみ

  4. シリーズまとめ一覧
    4.1 全体レイアウト（.recommend 系）
    4.2 サムネイル・タイトル装飾
    4.3 リンク・ホバー効果
    4.4 レスポンシブ対応

  5. SNSシェアボタン
    5.1 各種SNSボタンのスタイル
    5.2 ホバー時のカラー反転

  6. シリーズ限定・記事補助パーツ
    6.1 著作権表記（右寄せ・小文字）
    6.2 あらすじ・ネタバレ開閉ボックス
    6.3 固定注意タグ（ネタバレ注意など）

  7. 囲みボックス（記事中装飾）
    7.1 ノート風囲み（lined notebox）
    7.2 タイトルつき枠（box01, box02）
    7.3 infobox（補足・注釈系）

  8. シリーズリンク・ラベルボックス
    8.1 共通リンクスタイル
    8.2 リンク構造・配置（group・row）
    8.3 ボタンスタイル（.series-btn）
    8.4 ラベルボックス（.labelbox）

  9. 削除予定：旧シリーズリンクボタン
    9.1 コンテナ・ボタン基本（.container, .btn-border）
    9.2 ヘッダー用リンク（.link_first_header など）
    9.3 前回・次回の話リンク
    9.4 シリーズ一覧リンク

  10. サイドバー
    10.1 プロフィール（.profile-wrap など）
    10.2 バッジ番号リスト（.cp_clist など）

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


/* ================================================
   0. グローバル変数（:root）
================================================ */

:root {
  /* ◇ 共通アクセントカラー */
  --accent2-color: #ffebf1; /* 薄ピンク：プロフィールなどに使用 */

  /* ◇ シリーズボタン・labelbox用リンク色（2025/6/2 新設） */
  --link-text: #1a2a55;
  --link-text-hover: #0f1b38;

  --link-bg: #f7fbfd;           /* 背景：ラベルと共通 */
  --link-hover-bg: #d8e9ff;

  --link-border: #c9d9e3;
  --link-hover-border: #8fb9e4;

  --label-link-bg: #e6f0ff;
  --label-link-hover: #d0e9ff;
  --label-link-text: #00529b;

  /* ◇ 削除予定の変数（2025/6/2以降見直し） */
  --link-box-color: #7599ff;    /* 蒼：囲み等に使用 → 削除予定 */
}


/* ================================================
   1. 全体の調整
================================================ */

/* -------- 1.1 記事内の位置調整 -------- */

/* 1.1.1 段落の余白（p） */
.entry-content p {
  margin: 1em .2em 1.5em .2em;
}

/* 1.1.2 中央寄せ画像・映像（img, video） */
.entry-content img,
.entry-content video {
  margin: 1em auto;
  display: block;
}


/* -------- 1.2 文字フォントの調整 -------- */

/* 1.2.1 ブログタイトル用フォント（#title, #blog-description） */
#title,
#blog-description {
  font-family: "DotGothic16", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* タイトルはやや大きめ＆間隔調整 */
#title {
  font-family: "DotGothic16", sans-serif;
  font-size: clamp(1.8rem, 5.5vw, 2.6rem); /* タイトルをやや大きめに */
  line-height: 1.2;
}

#blog-description {
  font-size: clamp(0.65rem, 1.6vw, 1rem); /* より小さめに調整 */
  line-height: 1.4;
 margin-top: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


/* -------- 1.3 記事内見出しのレイアウト -------- */

/* 1.3.1 見出し（h3） */
.entry-content h3 {
  border-bottom: 2px solid var(--main-color);
  padding: 0.5em 0 0.3em;
  margin-top: 2em;
  font-size: 1.3em;
  font-weight: bold;
  color: #2a2922; /* 視認性を上げるため少し濃く */
  letter-spacing: 0.03em;
}

/* 1.3.2 小見出し（h5） */
.entry-content h5 {
  border-bottom: 1px solid var(--navigation-color);
}
.entry-content h5::before {
  content: "■";
  color: var(--navigation-color);
  font-size: 0.8em;
  margin-right: 0.4em;
}

/* 1.3.3 小小見出し（h6） */
.entry-content h6 {
  border-bottom: 1px dotted var(--navigation-color);
}

/* 1.3.4 h5, h6 共通の余白 */
.entry-content h5,
.entry-content h6 {
  padding: 0.4em 0 0.2em;
}


/* -------- 1.4 モバイル表示の調整 -------- */

/* 1.4.1 検索バーをスマホのみ非表示 */
@media (max-width: 767.98px) {
  .hatena-module-search-box {
    display: none;
  }
}

/* 1.4.2 ハンバーガーメニューの位置調整（スマホ） */
@media (max-width: 767.98px) {
  #nav-drawer {
    top: auto !important;
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
  }
}


/* ================================================
   2. 目次
================================================ */

/* -------- 2.1 既存（テンプレート）リセット -------- */

.table-of-contents {
  list-style: inherit;
  color: inherit;
  background: none;
  position: static;
  border: none;
  border-radius: 0;
}
.table-of-contents::before,
.table-of-contents::after {
  content: none;
  transform: translate(0);
  position: static;
  background: none;
  font-size: inherit;
  letter-spacing: inherit;
  font-family: auto; /* スケッチフォントを使いたい場合はこの行を消してください */
  top: unset;
  height: auto;
  bottom: auto;
  left: unset;
  color: inherit;
}
.table-of-contents a {
  color: inherit;
  text-decoration: inherit;
}
.table-of-contents li {
  position: static;
}
.table-of-contents ul {
  list-style: inherit;
}
.table-of-contents ul li::before {
  content: none;
  border: none;
  position: static;
}


/* -------- 2.2 カスタム目次スタイル（[:contents] 用） -------- */

/* ▼ 通常の目次スタイル */
.entry-content .table-of-contents {
  background: #fdf7ef;
  border-radius: 10px;
  padding: 1em 1.2em;
  margin: 2em auto;
  border-left: 6px solid #a98262;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 通常は影あり */
  font-size: 95%;
  max-width: 34em;
}

/* タイトル（アイコン＋文字） */
.entry-content .table-of-contents::before {
  content: "\f725  目次";
  font-family: blogicon;
  display: block;
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 0.6em;
  color: #5c4632;
}

/* 各リンクの装飾 */
.entry-content .table-of-contents a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.25em 0;
  border-bottom: 1px dotted #c4b5a6;
  font-size: 0.95em;
}
.entry-content .table-of-contents a:hover {
  background-color: #f1eae1;
}

/* リスト構造 */
.entry-content .table-of-contents li {
  list-style-type: none;
  position: relative;
  margin: 0.2em 0 0.2em 1em;
  padding-left: 0.9em;
  line-height: 1.4;
}

/* マーカー（▶） */
.entry-content .table-of-contents li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0.8em;
  font-size: 0.75em;
  color: #a98262;
  line-height: 1;
}

/* 中・小見出し */
.entry-content .table-of-contents li li {
  margin-left: 0em;
  font-size: 0.95em;
}
.entry-content .table-of-contents li li li {
  margin-left: 0em;
  opacity: 0.95;
}

/* リストのまとまり感（段落調整） */
.entry-content .table-of-contents ul {
  margin: 0.4em 0 1em 1em;
  padding: 0;
}
.entry-content .table-of-contents li ul {
  margin: 0 0 0.4em 1em;
  padding: 0;
}

/* 最上位見出し：間隔追加 */
.entry-content .table-of-contents > li {
  font-size: 1em;
  margin-top: 0.8em;
}


/* -------- 2.3 長い目次だけに適用するスクロールデザイン -------- */

/* 外枠（中央寄せ） */
.entry-content .toc-outer {
  margin: 2em auto;
  max-width: 36em;
}

/* スクロール対象（目次本体） */
.entry-content .toc-outer .toc-wrapper .table-of-contents {
  max-height: 280px;
  overflow-y: auto;
  padding: 1em;
  font-size: 95%;
  box-shadow: none !important; /* ←ここで影を打ち消し */
}


/* ================================================
   3. カテゴリ
================================================ */

/* -------- 3.1 カテゴリ一覧（デフォルト表示） -------- */

.hatena-module-category ul li.on-border {
  /*display: block;*/
  border-top: 1px dashed #5f5750 !important;
}

.hatena-module-category .hatena-urllist {
  padding: 0 7px;
  border-bottom: dotted 1px #CCC;
}

.hatena-module-category .hatena-urllist li {
  display: block;
  border-top: dotted 1px #CCC;
}

.hatena-module-category .hatena-urllist li a {
  margin: 0.2rem;
  padding: 0.1rem;
  border: none;
  /*border-radius: 0;*/
}

.hatena-module-category .hatena-urllist li a:hover {
  color: #333;
  background-color: #fff;
  text-decoration: underline;
}


/* -------- 3.2 サイドバーのカテゴリ展開（トグル式） -------- */

.hatena-module-category ul {
  list-style: none;
  content: "12"; /* hide */
}

.hatena-module-category ul ul {
  display: none; /* サブカテゴリを非表示 */
}

.hatena-module-category ul input.category-toggle-checkbox:checked ~ ul {
  display: block; /* チェック時にサブカテゴリ表示 */
}

.hatena-module-category ul input.category-toggle-checkbox {
  display: none; /* チェックボックス自体は非表示 */
}

.hatena-module-category label.category-toggle-checkbox-label::before {
  content: "▶"; /* トグル未展開時アイコン */
  cursor: pointer;
}

.hatena-module-category input.category-toggle-checkbox:checked + .category-toggle-checkbox-label::before {
  content: "▼"; /* トグル展開時アイコン */
}

.hatena-module-category label.category-not-to-toggle::before {
  content: "-"; /* トグル対象外のラベルアイコン */
}

.hatena-module-category label.category-li-label {
  margin: 0;
}

.hatena-module-category label.category-li-label::before {
  margin-right: 0.2em;
}


/* ================================================
   4. シリーズまとめ
================================================ */

/* -------- 4.1 共通レイアウト -------- */

[class^="recommend"] {
  margin: 0;
  padding: 0 1px;
  box-sizing: border-box;
}

.recommend-container {
  padding: 20px 1vw 0;
  background: #fff;
}

.recommend-wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 !important;
  list-style: none;
}

.recommend-item {
  width: 50%;
}


/* -------- 4.2 サムネイル部分 -------- */

.recommend-figure {
  margin-bottom: 10px;
  padding-top: 56.15%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
              rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.recommend-img,
.recommend-figure img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  object-fit: cover;
  transition: 0.3s ease-in-out;
}


/* -------- 4.3 テキスト・リンク -------- */

.recommend-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 1.4;
  margin: 10px 0 20px;
}

.recommend-link {
  text-decoration: none;
  color: #454545 !important;
  display: block;
  padding: 0 1.2vw 1vw;
}


/* -------- 4.4 レスポンシブ対応 -------- */

@media (min-width: 992px) {
  .recommend-container {
    padding: 20px 20px 0;
  }

  .recommend-item {
    width: 25%;
  }

  .recommend-link {
    padding: 0 8px 8px;
  }
}


/* -------- 4.5 ホバー演出 -------- */

.recommend-link:hover .recommend-figure img {
  transform: scale(1.05);
  margin: 0;
}

.recommend-figure::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  transition: 0.2s ease-in-out;
}

.recommend-link:hover .recommend-figure::before {
  opacity: 1;
}


/* ================================================
   5. SNSシェアボタン
================================================ */

.sns-tag-cloud,
.sns-tag-cloud-under {
  padding-inline-start: 0px;
  font-size: 12px;
  font-weight: bold;
}

.sns-tag-cloud-under {
  text-align: center;
}

.sns-tag-cloud-all {
  display: inline-block;
  padding: 10px;
  margin: 3px;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid;
  border-radius: 3px;
}

.sns-tag-cloud-all:hover {
  color: #fff;
}

/* 各SNSごとの配色 */
a.sns-tag-cloud-hatenar {
  color: #4d4d4d;
  border-color: #4d4d4d;
}
a.sns-tag-cloud-hatenar:hover {
  background: #4d4d4d;
}

a.sns-tag-cloud-hatenab {
  color: #00A4DE;
  border-color: #00A4DE;
}
a.sns-tag-cloud-hatenab:hover {
  background: #00A4DE;
}

a.sns-tag-cloud-facebook {
  color: #4064AC;
  border-color: #4064AC;
}
a.sns-tag-cloud-facebook:hover {
  background: #4064AC;
}

a.sns-tag-cloud-twitter {
  color: #1DA1F2;
  border-color: #1DA1F2;
}
a.sns-tag-cloud-twitter:hover {
  background: #1DA1F2;
}

a.sns-tag-cloud-misskey {
  color: #84BF35;
  border-color: #84BF35;
}
a.sns-tag-cloud-misskey:hover {
  background: #84BF35;
}

a.sns-tag-cloud-mastodon {
  color: #563ACC;
  border-color: #563ACC;
}
a.sns-tag-cloud-mastodon:hover {
  background: #563ACC;
}

/* ================================================
   6. シリーズ限定・記事補助パーツ
================================================ */

/* -------- 6.1 著作権表記（右寄せ・小さめ文字） -------- */

/* 6.1.1 スクエニ表記などに使用 */
.right-80 {
  text-align: right;
  font-size: 80%;
}


/* -------- 6.2 あらすじ・ネタバレ開閉ボックス -------- */

/* 6.2.1 あらすじ用ボックス全体の装飾 */
.details-cust01 {
  border: 1px solid #d8b46c;
  border-radius: 8px;
  margin: 1.5em 0;
  padding: 0.5em 1em;
  background-color: #fffdf5;
  box-shadow: 2px 2px 0 #f2dfae inset;
  font-size: 90%;
}

.details-cust01[open] {
  padding-bottom: 1em;
}

/* 6.2.2 開閉タイトル部（summary） */
.summary-cust01 {
  cursor: pointer;
  font-weight: bold;
  color: #9c6b1b;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}

/* 6.2.3 アイコン切替（▶ / ▼） */
.details-cust01:not([open]) .summary-cust01::before {
  content: "▶";
  margin-right: 0.5em;
  font-size: 1em;
}
.details-cust01[open] .summary-cust01::before {
  content: "▼";
  margin-right: 0.5em;
  font-size: 1em;
}

/* 6.2.4 ネタバレ防止用：控えめ・地続きスタイル */
.details-cust02 {
  border-left: 3px solid #bbb;
  margin: 1.5em 0;
  padding: 0.5em 1em;
  background-color: transparent;
  font-size: 95%;
}

.details-cust02[open] {
  padding-bottom: 0.8em;
}

/* 6.2.5 ネタバレsummary：タップしやすくマーカー付き */
.details-cust02 summary {
  display: block;
  padding: 0.4em 0;
  padding-left: 1.5em;
  cursor: pointer;
  font-weight: normal;
  color: #555;
  position: relative;
}

.details-cust02 summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.9em;
  color: #888;
  transition: transform 0.2s ease;
}

.details-cust02[open] summary::before {
  content: "▼";
}


/* -------- 6.3 固定注意タグ（ネタバレなど） -------- */

/* 6.3.1 注意ラベル本体（右上固定） */
.tag-warning {
  color: #fff;
  font-size: 90%;
  background-color: #d32f2f;
  padding: 4px 10px;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 22px;
  z-index: 2;
  white-space: nowrap;
}

/* 6.3.2 モバイル時の調整 */
@media (max-width: 767.98px) {
  .tag-warning {
    right: 10px;
    top: 10px;
    font-size: 85%;
    padding: 3px 8px;
  }
}

/* 6.3.3 アイコン付加（blogicon） */
.tag-warning::before {
  content: "\f041";
  font-family: blogicon;
  margin-right: 5px;
}


/* ================================================
   7. 囲みボックス（記事中装飾）
================================================ */

/* 7.1.x 削除予定のノート風囲み（旧）2025/06/2移行後削除する */
.note4 {
  color: #696969;
  margin: 2em 0;
  border: solid 1px #e6e6e6;
  padding: 1em;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .1);
}
.sen4 {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%),
    linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
  background-size: 8px 100%, 100% 2em;
  line-height: 2em;
  padding: 0em 1em 0.2em 1em;
}


/* 7.1.1 ノート風囲み */
.notebox-lined {
  margin: 2em 0;
  border: solid 1px #e6e6e6;
  padding: 1em;
  background-color: #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
  color: #444;
}

/* タイトルがあるときだけ表示 */
.notebox-lined-title {
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 15px;
  display: flex;
  align-items: center;
  color: #666;
}

/* 🪶アイコンをタイトルの先頭にだけ付ける */
.notebox-lined-title::before {
  content: "🪶";
  margin-right: 0.4em;
  font-size: 1em;
  vertical-align: middle;
}

/* ノート風の背景部分 */
.notebox-lined-inner {
  background-image:
    linear-gradient(90deg, rgba(255, 100, 100, 0) 0%, rgba(255, 100, 100, 0) 50%, #fff 0%, #fff 100%),
    linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #999 100%);
  background-size: 8px 100%, 100% 2em;
  line-height: 2em;
  padding: 0em 1em 0.2em 1em;
}

/* inner内のpタグ用マージン */
.notebox-lined p {
  margin: 0.5em 0;
}

/* -------- 7.2 タイトル付きボックス -------- */

/* 7.2.0 青ボックス（※削除予定） */
.box01 {
  position: relative;
  margin: 1.5em .5em;
  padding: .5em 1em;
  border: solid 2px var(--link-box-color);
  border-radius: 8px;
}

.box01 .box-title {
  position: absolute;
  display: inline-block;
  top: -10px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF;
  color: var(--link-box-color);
  font-weight: bold;
}

.box-title::before {
  content: "\f720";
  font-family: blogicon;
  margin-right: 5px;
}

.box01 p {
  margin: 1em 0;
  padding: 0;
}



/* -------- 7.3 infobox（補足・注釈系） -------- */

/* 7.3.1 共通スタイル */
.infobox {
  margin: 1em 0;
  padding: 0.75em;
  border-radius: 10px;
  border-left: 5px solid;
  background: #f0f8ff;
}

.infobox-title {
  font-size: 1.05em;
  font-weight: bold;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}

.infobox p {
  margin: 0.25em 0 0.25em .5em;
}

/* 7.3.2 yellow：要約・補足 */
.infobox.yellow {
  background: #fffbe6;
  border-color: #f2c94c;
}
.infobox.yellow .infobox-title {
  color: #c29300;
}

/* 7.3.3 green：豆知識・参考情報 */
.infobox.green {
  background: #edf9f0;
  border-color: #6ac48c;
}
.infobox.green .infobox-title {
  color: #34875b;
}

/* 7.3.4 red：注意・リスク系 */
.infobox.red {
  background: #fff1f1;
  border-color: #e26d6d;
}
.infobox.red .infobox-title {
  color: #c23939;
}

/* ================================================
   8. シリーズリンク・ラベルボックス
================================================ */

/* -------- 8.1 リンク内共通スタイル -------- */
.entry-content .series-btn,
.entry-content .next-episode-soft,
.entry-content .infobox a,
.entry-content .labelbox a,
.entry-content .box01 a,
.entry-content .box02 a {
  color: var(--link-text) !important;
  text-decoration: none !important;
  transition: 0.2s ease;
}


/* -------- 8.2 シリーズリンク構造 -------- */
.series-links-group {
  text-align: center;
  margin: 1.5em auto;
  font-size: 90%;
}

.series-links-row {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: 0.5em;
  flex-wrap: wrap;
}

.series-links-list {
  margin-top: 0.3em;
}


/* -------- 8.3 ボタンスタイル -------- */
.series-btn {
  display: inline-block;
  padding: 0.4em 1em;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  color: var(--link-text);
  background-color: var(--link-bg);
  border: 1.5px solid var(--link-border);
  transition: 0.25s;
  white-space: nowrap;
}

.series-btn:hover {
  background-color: var(--link-hover-bg);
  border-color: var(--link-hover-border);
  color: var(--link-text-hover);
}


/* 8.3.1 次の話だけ強調 */
.series-btn.next {
  background-color: #f0faff;
  border-color: #5f99d9;
  color: #0d2a5a;
  font-weight: bold;
  box-shadow: 0 0 4px rgba(80, 140, 210, 0.2);
  position: relative;
}

.series-btn.next:hover {
  background-color: var(--link-hover-bg);
  border-color: var(--link-hover-border);
  color: var(--link-text-hover);
  transition: none;
}


/* 8.3.2 マーカー装飾（←→📚） */
.series-btn.prev::before {
  content: "← 前の話 ";
}
.series-btn.next::after {
  content: " 次の話 →";
}
.series-btn.list::before {
  content: "✦ ";
}
.series-btn.list::after {
  content: "シリーズ記事一覧";
}

/* -------- 8.4 ラベルボックス -------- */
.labelbox {
  margin: 1.5em 0;
  padding: 1em;
  border-radius: 6px;
}

.labelbox-title {
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 15px;
}

/* 8.4.1 ラベルリンク用 */
.labelbox-link {
  background: #f7fbfd;
  border: 1px solid #c9d9e3;
}

.labelbox-link .labelbox-title {
  color: #337ab7;
}

.labelbox-links a {
  display: block;
  font-weight: 500;
  padding: 0.6em 0.9em;
  background-color: var(--label-link-bg);
  color: var(--label-link-text) !important;
  border: 1px solid var(--link-border);
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 0.6em;
  text-decoration: none;
  line-height: 1.5;
  transition: background-color 0.2s ease;
}

.labelbox-links a:hover {
  background-color: var(--label-link-hover);
}

/* ================================================
   9. 削除予定：旧シリーズリンクボタン
   （※過去記事で使用中。移行後に削除予定）
================================================ */

/* -------- 9.1 ボタンの基本スタイル -------- */

/* 中央寄せコンテナ */
.container {
  text-align: center;
  margin: 15px 2px;
}

/* 枠線付きボタン（最大幅あり） */
.btn-border {
  display: inline-block;
  max-width: 180px;
  border: 2px solid var(--link-box-color);
  text-decoration: none !important;
  font-weight: bold !important;
  padding: 8px 16px;
  border-radius: 4px;
  transition: 0.4s;
  margin: 5px;
}

.btn-border:hover {
  background-color: var(--link-box-color);
  border-color: #c1caff;
  color: #FFF !important;
}


/* -------- 9.2 ヘッダー系リンク -------- */

.link_header {
  font-size: small;
}

/* 旧：最初から読む（※削除予定：2024/1/9付） */
.link_first_header {
  font-size: small;
}

.link_first_header::after {
  content: "最初から読む";
}


/* -------- 9.3 前回のお話リンク -------- */

.link_prev_header {
  font-size: small;
}

/* blogiconつきマーカー */
.link_prev::before,
.link_prev_header::before {
  content: "\f005";
  font-family: blogicon;
  margin-right: 10px;
}

.link_prev_header::after {
  content: "前回のお話はこちら";
  margin-left: 5px;
}

.link_prev::after {
  content: "前の話へ";
  margin-left: 5px;
}


/* -------- 9.4 次回のお話リンク -------- */

.link_next::before {
  content: "次の話へ";
  margin-right: 5px;
}

.link_next::after {
  content: "\f006";
  font-family: blogicon;
  margin-left: 10px;
}


/* -------- 9.5 一覧リンク -------- */

.link_series_list::after {
  content: "シリーズの記事一覧";
}


/* ================================================
   10. サイドバー（プロフィール・更新予定）
================================================ */


/* -------- 10.1 プロフィール -------- */

.profile-wrap {
  margin: 0 auto;
  padding: 0.5em 0;
  border: solid 1px #a0a0a0;
  background: #fff;
  position: relative;
  max-width: 350px;
}

.profile-inner {
  display: flex;
  padding: 1em;
  align-items: flex-start;
  gap: 0.8em;
}

.profile-icon {
  text-align: center;
}

.profile-icon img {
  width: 80px;
  height: 80px;
}

.profile-name {
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  margin-top: 0.3em;
  display: block;
}

.profile-tweet {
  flex: 1;
  position: relative;
}

.profile-tweet-time {
  display: block;
  font-size: 0.75em;
  text-align: right;
  color: #444;
  margin-bottom: 0.3em;
}

.profile-tweet-time::before {
  content: "つぶやき：";
}

.profile-balloon {
  position: relative;
  background: var(--accent2-color);
  border-radius: 10px;
  padding: 0.8em 1em;
  border: 1px solid #d9a3b3;
}

.profile-balloon::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -19px;
  border: 8px solid transparent;
  border-right: 10px solid #d9a3b3;
  z-index: 0;
}

.profile-balloon::after {
  content: "";
  position: absolute;
  top: 18px;
  left: -17px;
  border: 8px solid transparent;
  border-right: 10px solid var(--accent2-color);
  z-index: 1;
}

.profile-body {
  padding: 0 1em 1em;
  margin: 0 1.5em;
  border-top: dotted 3px #999;
}

.profile-body p {
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0;
}

.profile-text-center {
  text-align: center;
  margin-top: 1em;
  display: flex;
  justify-content: center;
}

.profile-about-link {
  display: inline-block;
  color: #4a4a4a !important;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  padding: 0.5em 1.2em;
  background: var(--accent2-color);
  border-radius: 30px;
  box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s;
}

.profile-about-link:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 10px 20px -10px rgba(0, 0, 0, 0.25);
}


/* -------- 10.2 更新予定リスト -------- */
.update-list {
  list-style: none;
  margin: 0;
  padding: 0.5em 1em;
}

.update-list li {
  position: relative;
  padding-left: 1.2em;
  margin: 0.4em 0;
  font-size: 0.95em;
}

.update-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
  font-size: 0.85em;
}

/* 色のバリエーション */
ul.update-list li.later {
  color: #999; /* 薄め（まだ先） */
}