/* <system section="theme" selected="26006613652605202"> */
@charset "UTF-8";
/*
  Theme: neumorphism
  Author: fujiguchi
  Responsive: yes
  Description: ニューモーフィズムデザインのはてなブログテーマです。
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root {
  --theme-color: #e9edf0;
  --shadow-darkcolor: #c6c9cc;
  --shadow-brightcolor: #fff;
}
/*! 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;
}

#content-inner {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

@media (min-width: 992px) {
    #content-inner {
        flex-direction: row;
    }
}

.entry-header {
    display: flex;
    flex-flow: column;
}

.entry-header .entry-title {
    order: 0;
}

.entry-header .date {
    order: 1;
}

.entry-header .categories {
    order: 2;
}

.entry-header .customized-header {
    order: 3;
}

.entry-header .social-buttons {
    order: 4;
}

.archive-entries {
    display: flex;
    flex-wrap: wrap;
}

.page-archive .archive-entry {
    display: flex;
    flex-flow: column;
}

.page-archive .archive-entry .entry-thumb-link {
    order: 0;
}

.page-archive .archive-entry .archive-entry-header {
    order: 1;
}

.page-archive .archive-entry .archive-entry-body {
    order: 2;
}

.page-archive .archive-entry .categories {
    order: 3;
}

.archive-entry-header {
    display: flex;
    flex-flow: column;
}

.archive-entry-header .entry-title {
    order: 0;
}

.archive-entry-header .date {
    order: 1;
}

.pager {
    display: flex;
    justify-content: space-between;
}

html,
body {
    font-family: 'Roboto', sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
    color: #333;
    background: var(--theme-color);
    line-height: 1.7;
    letter-spacing: 0.05em;
}

a {
    color: #333;
    text-decoration: none;
    transition: .1s ease-out;
}

a:hover {
    color: #4ab7ea;
    text-decoration: none;
}

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

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #333;
    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 に背景色や文字色を指定することで中にも色が反映されます
*/
#globalheader-container {
    background-color: #454545;
    color: #f5f5f5;
}

#content-inner {
    max-width: 1200px;
    margin: auto;
}

#blog-title {
    margin: auto;
    max-width: 1200px;
    padding: 3em 20px 2em;
    text-align: center;
}

@media (min-width: 992px) {
    #blog-title {
        margin: 0 auto;
        padding: 3em 40px;
        box-sizing: border-box;
        text-align: left;
    }
}

#title {
    margin: 0;
    font-size: 1.5rem;
}

@media (min-width: 992px) {
    #title {
        font-size: 2rem;
    }
}

#title a {
    color: #555;
}

#blog-description {
    font-weight: normal;
    font-size: .8rem;
    margin: 1em 0 0;
}

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

@media (min-width: 768px) {
    .header-image-enable #blog-title {
        padding: 0 40px;
    }
}

.header-image-enable #blog-title-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 30px 0 0;
}

@media (min-width: 992px) {
    .header-image-enable #blog-title-inner {
        background-size: cover;
    }
}

.header-image-enable #blog-title-content {
    margin: auto;
    text-align: center;
}

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

@media (min-width:768px) {
#top-editarea {
    margin-bottom: 2.5em;
}
}

.breadcrumb {
    padding: 0 20px;
    font-size: .78rem;
}

@media (min-width: 768px) {
    .breadcrumb {
        padding: 0 40px;
    }
}

@media (min-width: 992px) {
    #wrapper {
        width: calc( 100% - 350px);
    }
}

#main {
    width: 100%;
}

#main-inner {
    max-width: 1140px;
    margin: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    #main-inner {
        padding: 0 40px;
    }
}

.entry {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: inset 1px 1px 3px #e0e0e0, inset -1px -1px 3px var(--shadow-brightcolor), 5px 5px 10px var(--shadow-darkcolor), -5px -5px 10px var(--shadow-brightcolor);
}

@media (min-width: 768px) {
    .entry {
        padding: 30px 40px;
    }
}

.entry-header {
    position: relative;
    margin: 10px 0 30px;
}

.entry-header .social-buttons {
    margin: 1em 0 0;
    padding: 1em 0;
    border-top: 1px solid #ddd;
}

.date {
    font-size: .9rem;
}

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

.entry-title {
    margin: 0 0 .3em;
    font-size: 1.5rem;
}

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

.categories a {
    font-size: .86rem;
    display: inline-block;
    margin: 8px 4px 0 0;
    padding: .2em 1em;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.categories a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}


.entry-footer .social-buttons {
    margin-bottom: 1em;
}

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

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

.comment-box {
    margin: 2em 0 1em;
    padding: 2em 0 1em;
    border-top: 2px solid #555;
}

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

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

.entry-comment {
    margin: 0 0 1.2em 0;
    padding: 1.2em;
    border-radius: 10px;
    position: relative;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

.read-more-comments a {
    margin: 1em 0;
    padding: .5em 1em;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
    display: inline-block;
}

.read-more-comments a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.entry-comment .hatena-id-icon {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 50px !important;
    height: 50px !important;
    padding: 7px;
    background: var(--theme-color);
    border-radius: 50%;
    box-shadow: 3px 3px 6px 0 var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.entry-tag .entry-tag-link {
    background: none;
    border: none;
    border-radius: 20px;
    box-shadow: 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.entry-tag .entry-tag-link:hover {
    background: var(--theme-color);
    box-shadow: inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

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

.comment-content {
    margin: 2em 0 1em;
    word-wrap: break-word;
    color: #555;
    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 {
    padding: .6em 1em;
    font-size: .85rem;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 7px 7px 14px var(--shadow-darkcolor), -7px -7px 14px var(--shadow-brightcolor);
}

.leave-comment-title:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

@media (min-width: 992px) {
    #box2 {
        width: 377px;
    }
}

#box2-inner {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #box2-inner {
        padding: 0;
    }
}

@media (min-width: 992px) {
    #box2-inner {
        padding-left: 0;
    }
}

.hatena-module {
    box-sizing: border-box;
    margin-bottom: 2em;
    font-size: .85rem;
}

.entry .hatena-module {
    padding: 0;
}

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

.hatena-module-title {
    margin: 0 0 1em;
    padding: 0;
    font-size: 1.2rem;
    font-weight: bold;
}

.hatena-module-title a {
    color: #555;
    text-decoration: none;
}

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

.hatena-urllist {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

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

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

.urllist-category-link {
    display: inline-block;
    margin: .2em .2em .2em 0;
    padding: .2em 1em;
    color: #555;
    font-size: .7em;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor);
}

.urllist-date-link a {
    display: block;
    margin: 0 0 .4em;
    color: #555;
}

.urllist-entry-body {
    margin-top: .3em;
    color: #555;
}

.urllist-with-thumbnails li .urllist-image {
    margin: 0 1em 0 0;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor);
}

.urllist-categories {
    margin: .4em 0 0;
}

.hatena-module-profile .profile-icon {
    display: block;
    margin: 0 auto 1em;
    padding: .5em;
    border-radius: 50%;
    box-shadow: 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor), inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor), 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor);
    transition: .15s;
}

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

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

.search-form, .search-result-form {
    display: flex;
    align-items: center;
    border: 2px solid #ddd;
    border-radius: 3px;
    width: 100%;
    padding: 4px 0 2px 6px;
    box-sizing: border-box;
}

.search-module-input, .search-result-input {
    flex: 1 0;
    padding: 5px;
    color: #333;
    background: none;
    border: none;
    outline: none;
    height: 20px;
}

.search-module-button, .search-result-button {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: transparent url("https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=f55d41c1f1e9d553c20fd41f441dc0") 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;
}

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

.archive-module-month-title::before {
    content: "\f006";
    font-family: blogicon;
    font-size: .8em;
    color: #555;
    margin-right: .2em;
    vertical-align: middle;
}

.archive-module-month-title:hover::before {
    color: #4ab7ea;
}

.archive-module-calendar .archive-module-calendar-selector {
    border: none;
    border-radius: 15px;
    background: var(--theme-color);
    box-shadow: 1px 1px 2px var(--shadow-darkcolor), -1px -1px 2px var(--shadow-brightcolor);
    padding: 0 1em;
    cursor: pointer;
}

.archive-module-calendar .archive-module-calendar-selector:hover {
    box-shadow: inset 1px 1px 2px var(--shadow-darkcolor), inset -1px -1px 2px var(--shadow-brightcolor);
}

.archive-module-calendar a {
    display: block;
    margin: .2em;
    padding: .2em 0 0;
    color: #79b4c5;
    font-weight: bold;
    border-radius: 1em;
    box-shadow: 1px 1px 2px var(--shadow-darkcolor), -1px -1px 2px var(--shadow-brightcolor);
}

.archive-module-calendar a:hover {
    box-shadow: inset 1px 1px 2px var(--shadow-darkcolor), inset -1px -1px 2px var(--shadow-brightcolor);
}

.hatena-module-category li {
    padding: 0!important;/***階層化対策***/
    display: inline-block;
}

.hatena-module-category a {
    display: inline-block;
    margin: .4em;
    padding: .3em .8em!important;/***階層化対策***/
    font-size: .8rem;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.hatena-module-category a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

/* 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-header-category {
    margin: 30px;
    text-align: center;
}

.archive-entry {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .page-archive #main-inner {
        padding: 0 40px;
    }
}


@media (min-width: 768px) {
    .page-archive .entry-thumb-link {
        margin: -20px 0 20px -20px;
    }
}

.page-archive .entry-thumb {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    background-position: center;
    transition: .4s;
}

.page-archive .archive-entry .categories {
    position: absolute;
    top: 8px;
    left: 25px;
}

.page-archive .categories a {
    margin: 0 5px 0.3em 0;
    display: inline-block;
    padding: .2em 1em;
    background: var(--theme-color);
    color: #555;
    font-size: .7em;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.page-archive .categories a:hover {
    color: #4ab7ea;
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}


.archive-entry-header .entry-title {
    font-size: 1rem;
}

.archive-entry-header .date {
    font-size: .8rem;
}

.archive-entry-body .entry-description {
    font-size: .7em;
    display: none;
}

.archive-entry-body .social-buttons {
    display: block;
    margin: .5em 0;
}

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

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

.page-entry .breadcrumb {
    margin-bottom: 1em;
}

#footer-inner {
    margin-top: 2em;
    padding: 10px 0;
    text-align: center;
    font-size: .8rem;
    color: #555;
}

#footer-inner a {
    color: #555;
}

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

@media (min-width: 768px) {
    #footer-inner {
        max-width: 1200px;
        margin: auto;
        padding: 20px 40px;
    }
}

.entry-content img,
.entry-content video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

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

.entry-content h2 {
    padding-left: .5em;
    border-left: solid 5px;
}

.entry-content h3 {
    font-size: 1.5rem;
    border-bottom: solid 2px;
}

.entry-content h4 {
    margin: 2em 0 1em 0;
    font-size: 1.4rem;
    padding: .2em .5em;
    border-radius: 4px;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

.entry-content h5 {
    margin: 1.6em 0 1em 0;
    font-size: 1.2rem;
}

.entry-content h6 {
    margin: 1em 0 1em 0;
    font-size: .9rem;
}

.entry-content a {
    color: #1487bd;
    text-decoration: underline;
}

.entry-content a:hover {
    color: #4ab7ea;
    text-decoration: none;
}

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

.entry-content .entry-see-more {
    display: inline-block;
    padding: .5em 1em;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 7px 7px 14px var(--shadow-darkcolor), -7px -7px 14px var(--shadow-brightcolor);
    transition: .1s ease-out;
}

.entry-content .entry-see-more:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.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: #fff;
}

.entry-content blockquote {
    margin: 2em 0 1.6em;
    padding: 1.5em;
    border-radius: 15px;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

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

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote::before {
    content: "\f704";
    font-family: 'blogicon';
    position: absolute;
    top: -44px;
    left: -12px;
    font-size: 4em;
    color: var(--theme-color);
    text-shadow: 2px 2px 4px #a8a8a8, -2px -2px 4px var(--shadow-brightcolor);
}

.entry-content pre,
.entry-content code {
    font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}

.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;
    font-size: 1em;
    text-overflow: unset;
    border-radius: 4px;
    background: #e9edf0;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

.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;
    border-radius: 4px 0 0 0;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor);
}

.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: #fff;
    border-radius: 3px;
}

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

.table-of-contents {
    margin: 0;
    padding: 1.2em;
    font-size: .9em;
    border-radius: 6px;
    box-shadow: inset 4px 4px 8px var(--shadow-darkcolor), inset -4px -4px 8px var(--shadow-brightcolor);
}

.table-of-contents::before {
    content: "目次";
    display: block;
    margin: 0 0 .8rem;
    padding: 0 0 .4rem;
    border-bottom: 2px solid #777;
    font-size: 1.2rem;
}

.table-of-contents a {
    color: #333;
}

.table-of-contents li {
    margin: 0 0 0 1.4em;
    list-style-type: decimal;
}

.table-of-contents li ul {
    margin: 0 0 1em .5em;
}

.table-of-contents li ul li {
    margin: 4px;
}

.pager {
    margin: 2em 0;
}

.pager-arrow {
    display: none;
}

.pager .pager-prev, .pager .pager-next {
    display: block;
    width: 50%;
}

.pager .pager-next {
    text-align: right;
}

.pager .pager-prev a, .pager .pager-next a {
    display: inline-block;
    width: 96%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

.pager .pager-prev a::before, .pager .pager-next a::after {
    display: inline-block;
    font-family: 'blogicon';
    color: #555;
}

.pager .pager-prev a::before {
    content: "\f005";
    left: -10px;
}

.pager .pager-next a::after {
    content: "\f006";
    margin-left: .5em;
    vertical-align: middle;
}

.pager .pager-prev a:hover::before, .pager .pager-next a:hover::after {
    color: #4ab7ea;
}

div.footnote {
    padding: 1em 0;
    border-top: #ddd 1px solid;
}

#footer .guest-footer {
    margin: 20px;
    padding: 25px 30px 10px;
    max-width: 700px;
    background: #fff;
    border-radius: 6px;
}

@media (min-width: 768px) {
    #footer .guest-footer {
        margin: 30px auto;
    }
}

.page-index .pager, .page-archive .pager {
    margin: 2em 0;
}

.entry-header-menu a {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 10px;
    border-radius: 6px;
    transition: .1s ease-out;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.entry-header-menu a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor),inset 3px 3px 6px var(--shadow-darkcolor),inset -3px -3px 6px var(--shadow-brightcolor);
}

.entry-header-html a, .entry-footer-html a {
    color: #1487bd;
    text-decoration: underline;
}

.entry-header-html a:hover, .entry-footer-html a:hover {
    text-decoration: none;
    color: #0f668f;
}

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

.page-archive a .hyphen {
    display: none;
}

.page-archive .date-day {
    order: 1;
}

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

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

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

.page-archive .date-month::before {
    font-size: 14px;
}

.page-archive .archive-entry .archive-date {
    top: 15px;
    right: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
.archive-entry {
    width: 48%;
}
.archive-entry:nth-child(even) {
    margin-left: 4%;
}
}

.archive-entry-tag .archive-entry-tag-link {
    background: none;
    margin: 0;
}

.archive-entry-tag .archive-entry-tag-link:hover {
    background: none;
    box-shadow: inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.page-archive .entry-thumb-link {
    margin: 0 0 20px;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.page-archive .entry-thumb:hover {
    transform: scale(1.05);
}

.archive-entry {
    padding: 45px 25px 0;
    margin-bottom: 25px;
    border-radius: 25px;
    box-shadow: 0 0 2px 2px var(--shadow-brightcolor), inset 2px 2px 4px var(--shadow-darkcolor), 0 0 9px var(--shadow-darkcolor), 4px 4px 6px var(--shadow-darkcolor), -4px -4px 6px var(--shadow-brightcolor), 5px 16px 14px var(--shadow-darkcolor), -8px -11px 13px var(--shadow-brightcolor);
}

.entry-title {
    padding: 0 0 1em;
    margin: 0;
}

span.social-buttons {
    margin-top: .8em;
}

archive-category-link {
    background: #f7f8f8;
    border-radius: 10px;
    box-shadow: 5px 7px 5px #e0e0e0, -7px -5px 7px var(--shadow-brightcolor);
    display: block;
}

@media (min-width: 768px) {
#box2-inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 40px;
    border-radius: 20px;
    box-shadow: inset 1px 1px 3px var(--shadow-darkcolor), inset -1px -1px 3px var(--shadow-brightcolor), 5px 5px 10px var(--shadow-darkcolor), -5px -5px 10px var(--shadow-brightcolor);
}
}

@media (min-width: 992px) {
    #box2-inner {
        margin: 0 0 40px;
        padding: 20px;
    }
    .hatena-module {
        width: 100%;
        padding: 0;
    }

}

.hatena-module-title {
    color: #555;
    border-bottom: solid 2px;
}

.star-container {
    padding-right: .5em;
}

.page-archive .archive-entry .archive-date a:hover {
    text-decoration: underline;
    color: #555;
}

.entry-title-link {
    color: #555;
    display: block;
}

.entry-title-link:hover {
    text-decoration: underline;
    color: #555;
}
.archive-entry-tag .archive-entry-tag-link {
    margin-bottom: .5em;
    padding: .2em 1em;
    color: #555;
    font-size: .75em;
    border-radius: 20px;
    box-shadow: 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.page-archive .categories a:nth-child(n+2) {
    display: none;
}

/***グローバルナビゲーション***/
.g-nav {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

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

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

.g-nav li a:hover {
  color: #4ab7ea;
  box-shadow: inset  5px 5px 10px var(--shadow-darkcolor),inset  -5px -5px 10px var(--shadow-brightcolor);
}

@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: var(--theme-color);
    padding: .5em;
    border-radius: 6px;
    color: #2a2922;
    font-weight: bold;
    box-shadow: 0 0 2px 2px var(--shadow-brightcolor), inset 2px 2px 4px var(--shadow-darkcolor), 0 0 9px var(--shadow-darkcolor), 4px 4px 6px var(--shadow-darkcolor), -4px -4px 6px var(--shadow-brightcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.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;
      box-shadow: 0 0 2px 2px var(--shadow-brightcolor), inset 0 2px 4px var(--shadow-darkcolor), 0 0 9px var(--shadow-darkcolor), 0 4px 6px var(--shadow-darkcolor), 0 -4px 6px var(--shadow-brightcolor), 0 10px 12px var(--shadow-darkcolor), 0 -8px 11px var(--shadow-brightcolor);
  }
  #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: #555;
      font-size: .85rem;
      box-shadow: inset 0 0 0 1px var(--shadow-darkcolor);
  }
}
/***シェアボタン***/

.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;
    box-sizing: border-box;
}

.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_item a:not(:hover) {
    box-shadow: 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor);
}

.sharebtn a:hover {
    color: #fff;
}

.sharebtn .blogicon-bookmark {
    font-size: 33px;
    line-height: 1.3em;
    vertical-align: -11%;
}

.sharebtn_list {
    padding: 0;
    list-style: none;
    display: flex;
    margin: 1em 0 2em;
}

.sharebtn_item:not(:last-child) {
    margin-right: 8px;
}


/***ボーダーボタン***/

.sharebtn .bd:not(:hover) {
    background: none;
    border: solid 1px;
    box-shadow: 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.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;
}

.sharebtn .btn_li:hover {
    box-shadow: inset 5px 5px 9px #05a948, inset -5px -5px 9px #07e562;
}

.sharebtn .btn_po:hover {
    box-shadow: inset 5px 5px 9px #ca3649, inset -5px -5px 9px #ff4a63;
}

.sharebtn .btn_tw:hover {
    box-shadow: inset 5px 5px 9px #1989ce, inset -5px -5px 9px #21b9ff;
}

.sharebtn .btn_fb:hover {
    box-shadow: inset 5px 5px 9px #1465ce, inset -5px -5px 9px #1c89ff;
}

.sharebtn .btn_hb:hover {
    box-shadow: inset 5px 5px 9px #008bbd, inset -5px -5px 9px #00bdff;
}

/***おすすめ記事***/
.c_recommend-container {
    margin: 0;
    padding: 0 2.5vw 1em;
}
#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%;
    padding: .7em;
    border-radius: 10px;
    box-sizing: border-box;
}
.c_recommend-thumb {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 10px;
    box-shadow: 5px 5px 10px var(--shadow-darkcolor), -5px -5px 10px var(--shadow-brightcolor);
}
.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;
}
.entry .c_recommend-link {
    text-decoration: none;
}

.c_recommend-item-title {
    display: block;
    color: #555;
    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-container {
    padding-top: 2em;
}
  .c_recommend-item {
    width: 25%;
    padding-bottom: 0;
}
  .entry .c_recommend-item {
    width: 33.3%;
    padding: .7em;
}
}
.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%;
    padding-bottom: 1em;
}

.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: 10px 10px 0 0;
    box-shadow: none;
}
.c_recommend-item-body.card {
    padding: 0 .5em .5em;
}
.c_recommend-item.card, .entry .c_recommend-item.card {
    padding: 0;
    width: 47%;
    margin: 0 1.5% 1.5em;
    box-shadow: 5px 5px 10px var(--shadow-darkcolor), -5px -5px 10px var(--shadow-brightcolor);
}
@media (min-width:768px) {
.c_recommend-item.card {
    margin: 0 1% 2em;
    width: 23%;
}
.entry .c_recommend-item.card {
    width: 30%;
    margin: 0 1.66% 2em;
}
#top-editarea .c_recommend-item {
    margin-bottom: 0;
}
}
.hatena-module-html .c_recommend {
    justify-content: space-between;
}
.hatena-module-html .c_recommend-item.card {
    width: 46%;
    margin-bottom: 1.5em;
}

.urllist-item.recent-entries-item, .urllist-item.entries-access-ranking-item, .urllist-item.related-entries-item {
    position: relative;
    margin-bottom: 1em;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
    transition: .15s;
}

.urllist-see-more-link {
    display: inline-block;
    margin: .5em 0;
    padding: .3em 1em;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor);
}

.search-form {
    padding: 0 1em;
    border: none;
    border-radius: 20px;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

.search-module-input {
    padding: .5em;
}

.hatena-module-profile .hatena-module-body {
    padding: 2em;
    border-radius: 6px;
    box-shadow: inset 4px 4px 8px var(--shadow-darkcolor), inset -4px -4px 8px var(--shadow-brightcolor);
}

.urllist-item.recent-entries-item:hover, .urllist-item.entries-access-ranking-item:hover, .urllist-item.related-entries-item:hover {
    box-shadow: inset -3px -3px 6px var(--shadow-brightcolor), inset 3px 3px 6px var(--shadow-darkcolor);
}

.urllist-item.recent-entries-item:hover .urllist-image, .urllist-item.entries-access-ranking-item:hover .urllist-image, .urllist-item.related-entries-item:hover .urllist-image {
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.urllist-item.recent-entries-item .urllist-image:hover, .urllist-item.entries-access-ranking-item .urllist-image:hover, .urllist-item.related-entries-item .urllist-image:hover {
    box-shadow: none;
}

.urllist-item.recent-entries-item:hover .urllist-category-link, .urllist-item.entries-access-ranking-item:hover .urllist-category-link, .urllist-item.related-entries-item:hover .urllist-category-link {
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.urllist-see-more-link:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.hatena-module-profile .profile-icon:hover {
    box-shadow: 2px 2px 4px var(--shadow-darkcolor), -2px -2px 4px var(--shadow-brightcolor), inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor), 2px 2px 4px var(--shadow-darkcolor), -2px -2px 4px var(--shadow-brightcolor);
}

.hatena-urllist .urllist-item .urllist-category-link:hover {
    box-shadow: none;
}

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

/* ================================================================
   oka-vrc旅行記：全体CSS 最適化版 v2
   方針：
   - スマホ / タブレット / PC を明確に分離
   - タブレットではPCナビを出さず、ハンバーガーへ寄せる
   - はてな標準ヘッダー画像領域の高さを端末別に制御し、隙間を抑える
   - ハンバーガーの表示方式は right 方式に統一
   - サイドバー専用CSSはサイドバーHTML側に同梱
================================================================ */

/* ================================================================
   1. Design Tokens
================================================================ */
:root {
  --bg-color:#f4f6f8;
  --text-color:#111827;
  --muted-color:#667085;
  --heading-color:#0b1220;

  --link-color:#1a6fa8;
  --link-hover-color:#0e4f7a;

  --title-link-color:#111827;
  --title-link-hover:#667085;

  --card-bg:#ffffff;
  --card-border:#d0d7de;
  --card-text:#344054;

  --accent:#1a7fd4;
  --accent-dark:#135fa0;
  --accent-light:#e8f4fd;

  --profile-btn-bg:#1a7fd4;
  --profile-btn-text:#fff;

  --main-accent-color:#1a7fd4;
  --active-text-color:#fff;
  --default-text-color:#444;
  --tab-background-default:#eef2f7;
  --container-background:#fff;
  --container-border:#d0d7de;

  --transition-fast:.15s ease;
  --transition-base:.25s ease;
  --transition-slow:.35s ease;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-pill:999px;

  --header-z:9998;
  --hamburger-z:10001;
  --drawer-z:10000;
  --overlay-z:9999;
}

body.dark-mode {
  --bg-color:#111827;
  --text-color:#e6e8ee;
  --muted-color:#a7b0bd;
  --heading-color:#f3f4f6;

  --link-color:#8ab4f8;
  --link-hover-color:#c7d9ff;

  --title-link-color:#f3f4f6;
  --title-link-hover:#cbd5e1;

  --card-bg:#1b2233;
  --card-border:rgba(255,255,255,.12);
  --card-text:#d1d5db;

  --accent:#8ab4f8;
  --accent-dark:#c7d9ff;
  --accent-light:rgba(138,180,248,.16);

  --profile-btn-bg:#8ab4f8;
  --profile-btn-text:#0f172a;

  --main-accent-color:#2a5f9e;
  --container-background:#1b2233;
  --container-border:rgba(255,255,255,.12);
  --tab-background-default:#252c3f;
  --default-text-color:#a7b0bd;
}

/* ================================================================
   2. Base
================================================================ */
html { scroll-behavior:smooth; }

body {
  background:var(--bg-color);
  color:var(--text-color);
  font-size:16px;
  line-height:1.65;
  transition:background-color var(--transition-base), color var(--transition-base);
}

a,
a:visited {
  color:var(--link-color);
  text-decoration:none;
  transition:color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast);
}

a:hover {
  color:var(--link-hover-color);
  text-decoration:underline;
}

img,
video {
  max-width:100%;
  height:auto;
}

[tabindex="-1"]:focus { outline:0; }

/* 不要な標準表示 */
.hatena-module-related-entries,
.archive-entry-tags,
.page-archive .archive-entry .archive-entry-body,
.entry-categories,
#blog-description,
.top_hatena-module {
  display:none;
}

body.dark-mode #container,
body.dark-mode #container-inner,
body.dark-mode #wrapper,
body.dark-mode #content,
body.dark-mode #main,
body.dark-mode #main-inner {
  background-color:var(--bg-color);
  color:var(--text-color);
}

body.dark-mode article,
body.dark-mode .entry,
body.dark-mode .entry-inner,
body.dark-mode .entry-content {
  background-color:transparent;
  color:var(--text-color);
}

body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
  border-color:rgba(255,255,255,.16);
  color:var(--text-color);
}

body.dark-mode th { background:rgba(255,255,255,.07); }
body.dark-mode tr:nth-child(even) { background:rgba(255,255,255,.035); }

body.dark-mode blockquote {
  background:#182033;
  color:var(--text-color);
  border-color:rgba(138,180,248,.35);
}

body.dark-mode pre,
body.dark-mode code {
  background:#0f172a;
  color:#e5e7eb;
  border-color:rgba(255,255,255,.14);
}

body.dark-mode .breadcrumb,
body.dark-mode .pager a,
body.dark-mode .date,
body.dark-mode .hatena-module,
body.dark-mode .entry-footer,
body.dark-mode .customized-footer,
body.dark-mode .hatena-star-container {
  color:var(--muted-color);
}

/* ================================================================
   3. Title Link Color Control
================================================================ */
.entry-title,
.entry-title a,
.entry-title a:link,
.entry-title a:visited,
.entry-title-link,
.entry-title-link:link,
.entry-title-link:visited,
.archive-entry-title,
.archive-entry-title a,
.archive-entry-title a:link,
.archive-entry-title a:visited,
.page-archive .archive-entry-title,
.page-archive .archive-entry-title a,
.page-index .archive-entry-title,
.page-index .archive-entry-title a,
.archive-entry-header .entry-title,
.archive-entry-header .entry-title a,
.recommend-title,
.recommend-link,
.recommend-link:link,
.recommend-link:visited,
.hatena-module-title,
.hatena-module-title a,
.hatena-module-title a:link,
.hatena-module-title a:visited,
.hatena-module-entries a,
.hatena-module-entries a:link,
.hatena-module-entries a:visited,
.urllist-title-link,
.urllist-title-link:link,
.urllist-title-link:visited,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color:var(--title-link-color) !important;
  text-decoration:none !important;
}

.entry-title a:hover,
.entry-title-link:hover,
.archive-entry-title a:hover,
.page-archive .archive-entry-title a:hover,
.page-index .archive-entry-title a:hover,
.archive-entry-header .entry-title a:hover,
.recommend-link:hover .recommend-title,
.hatena-module-title a:hover,
.hatena-module-entries a:hover,
.urllist-title-link:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color:var(--title-link-hover) !important;
  text-decoration:none !important;
}

body.dark-mode .entry-title,
body.dark-mode .entry-title a,
body.dark-mode .entry-title-link,
body.dark-mode .archive-entry-title,
body.dark-mode .archive-entry-title a,
body.dark-mode .recommend-title {
  color:var(--heading-color) !important;
}

/* ================================================================
   4. Hatena Header Image Area
   ヘッダー画像の空白・リンク領域のズレ対策
================================================================ */
#blog-header {
  position:relative;
  margin:0 !important;
  padding:0 !important;
  border-bottom:0 !important;
  overflow:hidden !important;
}

#blog-header a {
  color:inherit;
  text-decoration:none;
}

#blog-title,
#blog-title-inner,
#blog-title-content {
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#title,
#title a {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  overflow:hidden !important;
}

#blog-title-inner {
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}

/* PC：画像を大きく見せ、PCナビを使う */
@media screen and (min-width:1024px) {
  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #title,
  #title a {
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
  }
}

/* タブレット：PCナビは出さず、ヘッダー画像は見せる */
@media screen and (min-width:768px) and (max-width:1023px) {
  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #title,
  #title a {
    height:210px !important;
    min-height:210px !important;
    max-height:210px !important;
  }
}

/* スマホ：ファーストビュー圧迫を抑える */
@media screen and (max-width:767px) {
  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #title,
  #title a {
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
  }
}

@media screen and (max-width:380px) {
  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #title,
  #title a {
    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;
  }
}

/* ================================================================
   5. Header / Global Navigation
================================================================ */
.oka-site-header {
  position:sticky !important;
  top:0 !important;
  z-index:var(--header-z) !important;
  height:62px !important;
  min-height:62px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 !important;
  padding:0 18px 0 72px !important;
  background:rgba(255,255,255,.94) !important;
  border-top:1px solid rgba(208,215,222,.5) !important;
  border-bottom:1px solid var(--card-border) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  box-shadow:0 2px 10px rgba(15,23,42,.05) !important;
  box-sizing:border-box !important;
}

body.dark-mode .oka-site-header {
  background:rgba(17,24,39,.94) !important;
  border-top-color:rgba(255,255,255,.08) !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
  box-shadow:0 2px 12px rgba(0,0,0,.35) !important;
}

.oka-site-brand,
.oka-site-brand:link,
.oka-site-brand:visited,
.oka-site-brand:hover {
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.2;
  color:var(--text-color) !important;
  text-decoration:none !important;
}

.oka-site-brand-main {
  color:var(--heading-color) !important;
  font-size:18px !important;
  font-weight:850 !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
}

.oka-site-brand-sub {
  margin-top:2px;
  color:var(--muted-color) !important;
  font-size:11px !important;
  white-space:nowrap !important;
}

.oka-pc-nav {
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
}

.oka-pc-nav a,
.oka-pc-nav a:link,
.oka-pc-nav a:visited {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:38px !important;
  padding:0 13px !important;
  border-radius:var(--radius-pill) !important;
  color:var(--text-color) !important;
  font-size:14px !important;
  font-weight:700 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

.oka-pc-nav a:hover,
.oka-pc-nav a.oka-nav-primary:hover {
  background:var(--accent-light) !important;
  color:var(--accent) !important;
  text-decoration:none !important;
}

.oka-pc-nav a.oka-nav-primary {
  background:transparent !important;
  color:var(--text-color) !important;
  box-shadow:none !important;
  transform:none !important;
}

body.dark-mode .oka-pc-nav a,
body.dark-mode .oka-pc-nav a.oka-nav-primary {
  color:#e4e6eb !important;
}

body.dark-mode .oka-pc-nav a:hover,
body.dark-mode .oka-pc-nav a.oka-nav-primary:hover {
  background:rgba(138,180,248,.16) !important;
  color:#c7d9ff !important;
}

/* タブレット以下はハンバーガー優先。PCナビとの併用崩れを防ぐ */
@media screen and (max-width:1023px) {
  .oka-site-header {
    height:56px !important;
    min-height:56px !important;
    justify-content:center !important;
    padding-left:66px !important;
    padding-right:66px !important;
  }

  .oka-site-brand {
    width:100% !important;
    align-items:center !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  .oka-site-brand-main {
    max-width:100% !important;
    overflow:hidden !important;
    font-size:16px !important;
    text-align:center !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .oka-site-brand-sub {
    display:none !important;
  }

  .oka-pc-nav {
    display:none !important;
  }
}

/* PCだけPCナビを出す */
@media screen and (min-width:1024px) {
  .hamburger-button,
  .hamburger-nav,
  .hamburger-overlay {
    display:none !important;
  }
}

/* ================================================================
   6. Dark Toggle / Hamburger
================================================================ */
#dark-toggle {
  position:fixed;
  left:12px;
  top:10px;
  z-index:10002;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px;
  background:rgba(88,64,135,.92) !important;
  color:#fff !important;
  font-size:17px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(88,64,135,.28) !important;
  transform:none !important;
  transition:background var(--transition-fast), box-shadow var(--transition-fast);
}

#dark-toggle:hover {
  background:rgba(104,76,160,.96) !important;
  box-shadow:0 5px 16px rgba(88,64,135,.34) !important;
}

body.dark-mode #dark-toggle {
  background:rgba(196,181,253,.95) !important;
  color:#20123a !important;
  border-color:rgba(255,255,255,.28) !important;
}

body.dark-mode #dark-toggle:hover { background:#ddd6fe !important; }

.hamburger-button {
  position:fixed;
  top:10px;
  right:12px;
  z-index:10003;
  width:44px;
  height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px;
  background:rgba(64,68,76,.92) !important;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(31,41,55,.25) !important;
  transform:none !important;
  transition:background var(--transition-fast), box-shadow var(--transition-fast);
}

.hamburger-button:hover {
  background:rgba(82,88,99,.96) !important;
  box-shadow:0 5px 16px rgba(31,41,55,.32) !important;
}

.hamburger-line {
  display:block;
  width:22px;
  height:2.5px;
  border-radius:2px;
  background:#fff !important;
  transition:transform var(--transition-base), opacity var(--transition-fast);
}

.hamburger-button.is-active .hamburger-line:nth-child(1) { transform:translateY(8.5px) rotate(45deg); }
.hamburger-button.is-active .hamburger-line:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger-button.is-active .hamburger-line:nth-child(3) { transform:translateY(-8.5px) rotate(-45deg); }

body.dark-mode .hamburger-button {
  background:rgba(229,231,235,.94) !important;
  border-color:rgba(255,255,255,.28) !important;
}

body.dark-mode .hamburger-line { background:#1f2937 !important; }

body.menu-open {
  overflow:hidden !important;
  touch-action:none;
}

/* Mobile / Tablet Drawer */
.hamburger-nav {
  display:block !important;
  position:fixed !important;
  top:0 !important;
  right:-100vw !important;
  left:auto !important;
  z-index:10001 !important;
  width:min(344px,90vw) !important;
  max-width:344px !important;
  height:100dvh !important;
  max-height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  transform:none !important;
  background:var(--card-bg) !important;
  color:var(--text-color) !important;
  box-shadow:-2px 0 16px rgba(0,0,0,.18);
  box-sizing:border-box !important;
  transition:right .28s cubic-bezier(.4,0,.2,1) !important;
  will-change:right;
}

.hamburger-nav.is-active {
  right:0 !important;
  transform:none !important;
}

.hamburger-nav-inner {
  width:100% !important;
  padding:0 0 calc(56px + env(safe-area-inset-bottom)) !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

.hamburger-nav-header {
  position:sticky;
  top:0;
  z-index:1;
  height:56px !important;
  min-height:56px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 52px !important;
  border-bottom:1px solid var(--card-border) !important;
  background:var(--card-bg) !important;
  box-sizing:border-box;
}

.hamburger-nav-title,
.hamburger-nav-title:link,
.hamburger-nav-title:visited,
.hamburger-nav-title:hover {
  color:var(--text-color);
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-decoration:none !important;
  white-space:nowrap;
}

.hamburger-close-btn {
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:38px !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid var(--card-border) !important;
  border-radius:10px !important;
  background:var(--bg-color) !important;
  color:var(--text-color) !important;
  font-size:20px !important;
  cursor:pointer !important;
}

.hamburger-search {
  padding:12px 16px !important;
  border-bottom:1px solid var(--card-border) !important;
  background:var(--card-bg) !important;
}

.hamburger-search form {
  min-height:44px !important;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--card-border) !important;
  border-radius:14px !important;
  background:var(--bg-color) !important;
}

.hamburger-search input {
  flex:1;
  min-width:0;
  min-height:44px !important;
  height:44px !important;
  padding:9px 12px !important;
  border:0;
  outline:0;
  background:transparent !important;
  color:var(--text-color) !important;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
}

.hamburger-search input::placeholder { color:var(--muted-color) !important; }

.hamburger-search button {
  width:44px !important;
  height:44px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--text-color) !important;
  font-size:16px !important;
  cursor:pointer;
}

.hamburger-list {
  margin:0;
  padding:0;
  list-style:none;
}

.hamburger-list > li,
.hb-sub-accordion-item,
.hamburger-accordion-content li,
.hb-sub-accordion-content li {
  border-bottom:1px solid rgba(208,215,222,.82);
}

.hamburger-list > li > a {
  min-height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:11px !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:14px 20px !important;
  color:var(--text-color) !important;
  font-size:14.5px !important;
  font-weight:750 !important;
  line-height:1.35 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  white-space:normal !important;
  overflow:visible !important;
  text-align:left !important;
}

.hamburger-list > li > a > i {
  flex:0 0 22px !important;
  width:22px !important;
  margin-right:0 !important;
  color:var(--link-color);
  text-align:center !important;
  font-size:16px !important;
}

.hamburger-accordion-btn,
.hb-sub-accordion-btn {
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  border:0;
  background:transparent;
  color:var(--text-color);
  text-align:left !important;
  text-decoration:none !important;
  cursor:pointer;
  box-sizing:border-box !important;
  white-space:normal !important;
  overflow:visible !important;
}

.hamburger-accordion-btn {
  min-height:58px !important;
  padding:14px 20px !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  letter-spacing:.01em !important;
}

.hamburger-accordion-btn > span,
.hb-sub-accordion-btn > span {
  min-width:0 !important;
  flex:1 1 auto !important;
  display:inline-flex !important;
  align-items:center !important;
}

.hamburger-accordion-btn > span {
  gap:11px !important;
}

.hamburger-accordion-btn > span > i {
  flex:0 0 22px !important;
  width:22px !important;
  margin-right:0 !important;
  color:var(--link-color);
  text-align:center !important;
  font-size:17px !important;
}

.hb-sub-accordion-btn {
  min-height:48px !important;
  padding:12px 20px 12px 32px !important;
  background:rgba(128,128,128,.04);
  font-size:13.5px !important;
  font-weight:750 !important;
  line-height:1.35 !important;
}

.hb-sub-accordion-btn > span {
  gap:8px !important;
}

.arrow-icon,
.hb-sub-accordion-btn .arrow-icon {
  flex:0 0 auto !important;
  margin-left:10px !important;
  color:var(--muted-color);
  font-size:11px !important;
  transition:transform var(--transition-base);
}

.hamburger-accordion-btn.is-open .arrow-icon,
.hb-sub-accordion-btn.is-open .arrow-icon {
  transform:rotate(180deg);
}

.hamburger-accordion-content,
.hb-sub-accordion-content {
  display:none;
  margin:0;
  padding:0 0 8px;
  list-style:none;
  background:rgba(128,128,128,.05);
}

.hamburger-accordion-content a,
.hb-sub-accordion-content a {
  min-height:42px !important;
  display:block !important;
  width:100% !important;
  padding:10px 20px 10px 46px !important;
  box-sizing:border-box !important;
  color:var(--text-color);
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  text-align:left !important;
  white-space:normal !important;
  text-decoration:none !important;
}

.hamburger-list a:hover,
.hamburger-accordion-btn:hover,
.hb-sub-accordion-btn:hover,
.hamburger-accordion-content a:hover,
.hb-sub-accordion-content a:hover {
  background:rgba(128,128,128,.08);
  text-decoration:none !important;
}

.hamburger-overlay {
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:10000 !important;
  width:100%;
  height:100vh;
  background:rgba(0,0,0,.55);
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity var(--transition-base), visibility var(--transition-base) !important;
}

.hamburger-overlay.is-active {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.dark-mode .hamburger-nav,
body.dark-mode .hamburger-nav-header,
body.dark-mode .hamburger-search {
  background:#1b2233 !important;
  color:#e6e8ee !important;
}

body.dark-mode .hamburger-search form,
body.dark-mode .hamburger-close-btn {
  background:#252c3f !important;
  border-color:rgba(255,255,255,.14) !important;
}

body.dark-mode .hamburger-search input,
body.dark-mode .hamburger-search button,
body.dark-mode .hamburger-close-btn,
body.dark-mode .hamburger-list a,
body.dark-mode .hamburger-accordion-btn,
body.dark-mode .hamburger-accordion-content a,
body.dark-mode .hb-sub-accordion-btn,
body.dark-mode .hb-sub-accordion-content a {
  color:#e6e8ee !important;
}

body.dark-mode .hamburger-list > li,
body.dark-mode .hb-sub-accordion-item,
body.dark-mode .hamburger-accordion-content li,
body.dark-mode .hb-sub-accordion-content li {
  border-color:rgba(255,255,255,.10) !important;
}

body.dark-mode .hamburger-accordion-content,
body.dark-mode .hb-sub-accordion-content {
  background:rgba(255,255,255,.035) !important;
}

body.dark-mode .hb-sub-accordion-btn {
  background:rgba(255,255,255,.04) !important;
}

@media screen and (max-width:380px) {
  .oka-site-header {
    padding-left:58px !important;
    padding-right:58px !important;
  }

  .oka-site-brand-main { font-size:15px !important; }

  #dark-toggle,
  .hamburger-button {
    width:42px !important;
    height:42px !important;
    top:8px !important;
  }

  #dark-toggle { left:10px !important; }
  .hamburger-button { right:10px !important; }

  .hamburger-nav {
    width:min(330px,91vw) !important;
    max-width:330px !important;
  }

  .hamburger-list > li > a {
    min-height:52px !important;
    padding:13px 18px !important;
    font-size:14px !important;
  }

  .hamburger-accordion-btn {
    min-height:56px !important;
    padding:13px 18px !important;
    font-size:14.5px !important;
  }

  .hb-sub-accordion-btn {
    padding-left:30px !important;
    font-size:13px !important;
  }

  .hamburger-accordion-content a,
  .hb-sub-accordion-content a {
    padding-left:42px !important;
    font-size:12.8px !important;
  }
}

/* ================================================================
   7. Article Content
================================================================ */
.article-content { line-height:1.65; }

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content p,
.article-content ul,
.article-content ol,
.article-content figure,
.article-content blockquote {
  margin-top:.1em;
  margin-bottom:.1em;
}

.article-content li { margin-bottom:.3em; }

.entry-content p {
  margin-bottom:1.8em;
  font-size:16px;
  line-height:1.75;
  letter-spacing:0;
}

.entry-content a,
.entry-content a:link {
  color:#000;
  text-decoration:underline;
}

.entry-content a:visited { color:#808080; }
.entry-content a:hover { color:#808080; text-decoration:none; }

body.dark-mode .entry-content a,
body.dark-mode .entry-content a:link {
  color:var(--link-color);
  text-decoration:underline;
  text-underline-offset:.15em;
}

body.dark-mode .entry-content a:visited { color:#b9c7f5; }
body.dark-mode .entry-content a:hover { color:var(--link-hover-color); text-decoration:none; }

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color:var(--heading-color);
}

body.dark-mode .entry-content h2,
body.dark-mode .entry-content h3,
body.dark-mode .entry-content h4,
body.dark-mode .entry-content h5,
body.dark-mode .entry-content h6 {
  color:var(--heading-color) !important;
  border-color:var(--accent) !important;
  background-color:transparent !important;
}

.entry-content h5 {
  margin:24px 0 12px;
  padding-left:.8em;
  border-left:4px solid var(--accent);
  color:#1a3a5c;
  line-height:1.4;
}

article u {
  text-decoration:none;
  background:linear-gradient(transparent 50%, #ffff00 50%);
}

p.double-bottom { border-bottom:double; }
p.double-top { border-top:double; }

/* ================================================================
   8. TOC / Utility UI
================================================================ */
#stoc-module,
#stoc {
  backface-visibility:hidden;
}

#stoc-module {
  position:sticky;
  top:76px;
}

#stoc ol {
  margin:0;
  padding:0 0 0 1em;
  list-style:none;
}

#stoc > ol { padding-left:0; }

#stoc a {
  display:block;
  padding:5px 6px;
  border-radius:6px;
  color:var(--text-color);
  font-size:13px;
  line-height:1.5;
  text-decoration:none;
}

#stoc a:hover,
#stoc a.active {
  background:rgba(26,127,212,.10);
  color:var(--accent);
  text-decoration:none;
}

body.dark-mode #stoc a:hover,
body.dark-mode #stoc a.active {
  background:rgba(138,180,248,.14);
}

.show-area {
  display:inline-block;
  margin-bottom:0;
  padding:10px;
  border-radius:var(--radius-sm);
  color:#22B5E6;
  cursor:pointer;
}

.pager-prev { margin:auto 0 0 0; }
.pager-next { margin:0 0 0 auto; }
.test-pager-prev { display:none; }

.show-button-block {
  margin:10px 0;
  text-align:left;
}

.show-button {
  display:inline-block;
  padding:8px 18px;
  border:2px solid var(--accent);
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.show-button:hover {
  background:var(--accent-light);
  color:var(--accent);
}

.hide-area { display:none; }

/* ================================================================
   9. Floating / Page Top
================================================================ */
.fixed-button {
  position:fixed;
  right:20px;
  bottom:78px;
  z-index:9999;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:0;
  border-radius:var(--radius-md);
  background:#f5f5f5 !important;
  box-shadow:3px 3px 8px rgba(0,0,0,.35);
  cursor:pointer;
  font-size:0;
  font-weight:700;
  white-space:nowrap;
  outline:0;
  animation:breathe 2.5s ease-in-out infinite;
  transition:all var(--transition-slow);
  color:#333 !important;
  text-decoration:none !important;
}

.fixed-button:hover,
.fixed-button:focus-visible {
  width:auto;
  min-width:160px;
  padding:0 12px;
  justify-content:flex-start;
  background:#e0e0e0 !important;
  box-shadow:4px 4px 10px rgba(0,0,0,.45);
  animation:none;
  font-size:16px;
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.fixed-button::before {
  content:"🌐";
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:24px;
  line-height:1;
}

@keyframes breathe {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.05); }
}

#custom-page-top {
  position:fixed;
  right:20px;
  bottom:15px;
  z-index:999999;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--radius-sm);
  background:rgba(100,100,100,.7);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:all var(--transition-base);
  -webkit-tap-highlight-color:transparent;
}

#custom-page-top.show {
  opacity:1;
  visibility:visible;
}

#custom-page-top:hover {
  background:rgba(80,80,80,.85);
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,.3);
}

@media screen and (max-width:1023px) {
  .fixed-button {
    display:none !important;
  }

  #custom-page-top {
    width:44px;
    height:44px;
    right:14px;
    bottom:14px;
  }
}

/* ================================================================
   10. Recommendation Cards / Ranking / Affiliate
================================================================ */
[class^="recommend"] {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.recommend-container {
  padding:0 1vw;
  background:transparent;
}

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

.recommend-item {
  width:50%;
  padding:4px;
  box-sizing:border-box;
}

.recommend-figure {
  position:relative;
  overflow:hidden;
  margin-bottom:0;
  padding-top:56%;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.recommend-img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--transition-slow);
}

.recommend-title {
  display:block;
  min-height:52px;
  margin:0;
  padding:8px 10px 10px;
  border:1px solid var(--card-border);
  border-top:0;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  background:var(--card-bg);
  color:var(--title-link-color);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  text-align:left;
}

.recommend-link {
  display:block;
  overflow:hidden;
  padding:0;
  border-radius:var(--radius-sm);
  color:var(--title-link-color);
  text-decoration:none;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}

.recommend-link:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  text-decoration:none;
}

.recommend-link:hover .recommend-title { color:var(--title-link-hover); }
.recommend-link:hover .recommend-img { transform:scale(1.04); }

.ranking-tabs {
  border:1px solid var(--container-border);
  border-radius:var(--radius-sm);
  padding-bottom:10px;
  background:var(--container-background);
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}

.ranking-tab-header {
  display:flex;
  overflow:hidden;
  border-bottom:1px solid var(--container-border);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-button {
  flex:1;
  padding:10px 0;
  border:0;
  border-right:1px solid #d0d0d0;
  outline:0;
  background:var(--tab-background-default);
  color:var(--default-text-color);
  font-size:1.05em;
  font-weight:500;
  text-align:center;
  cursor:pointer;
}

.tab-button:last-child { border-right:0; }

.tab-button.active {
  background:var(--main-accent-color);
  color:var(--active-text-color);
}

.tab-content {
  display:none;
  padding:15px 10px;
  color:var(--text-color);
}

.tab-content.active { display:block; }

.easyLink-box {
  min-height:200px;
  border:2px solid #eaeaea;
}

.easyLink-info-name {
  font-size:15px;
  font-weight:700;
  line-height:1.5;
}

.easyLink-info-name a {
  color:#197dd2;
  text-decoration:none;
}

.easyLink-info-maker,
.easyLink-info-model {
  color:#999;
  font-size:13px;
}

.easyLink-info-btn a {
  width:auto;
  margin:5px;
  padding:.5em 1em;
  font-size:13px;
  line-height:1.5;
}

.easyLink-info-btn-amazon { background:#ffa724; }
.easyLink-info-btn-rakuten { background:#ff5f5f; }
.easyLink-info-btn-yahoo { background:#39c0e0; }

.easyLink-img-box {
  position:absolute;
  top:50%;
  width:160px;
  height:160px;
  margin:0 auto;
  transform:translateY(-50%);
}

.easyLink-img-box span > img { max-width:160px; max-height:160px; width:auto; }
.easyLink-img-box > a > img { width:30px; height:30px; }

/* ================================================================
   11. AI Summary
================================================================ */
.entry-ad-notice {
  margin:0 0 1em;
  color:var(--muted-color);
  font-size:12px;
  line-height:1.6;
}

.ai-summary-wrapper {
  margin:0 0 22px;
  overflow:hidden;
  border:2px solid #c8dff5;
  border-radius:var(--radius-md);
  transition:border-color var(--transition-base);
}

.ai-summary-wrapper:hover { border-color:var(--accent); }

.ai-summary-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:linear-gradient(135deg,#1a6fa8 0%,#0e4f7a 100%);
  cursor:pointer;
  user-select:none;
}

.ai-summary-title {
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:16px;
  font-weight:700;
}

.ai-icon {
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:14px;
}

.toggle-icon {
  color:#fff;
  font-size:20px;
  transition:transform var(--transition-base);
}

.ai-summary-content {
  max-height:0;
  overflow:hidden;
  background:#f4f8fd;
  transition:max-height .4s ease;
}

.ai-summary-inner { padding:0 20px; }

.ai-summary-text {
  padding:20px 0;
  color:#1a2a3a;
  font-size:15px;
  line-height:1.8;
}

.ai-disclaimer {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-top:1px solid #c8dff5;
  background:#eef5fc;
  color:#5a7a9a;
  font-size:13px;
}

.ai-disclaimer::before { content:"ℹ️"; font-size:14px; }

.summary-toggle { display:none; }
.summary-toggle:checked ~ .ai-summary-content { max-height:1000px; }
.summary-toggle:checked + .ai-summary-header .toggle-icon { transform:rotate(180deg); }
.ai-summary-wrapper:not(:has(.ai-summary-text *)) { display:none; }

body.dark-mode .ai-summary-wrapper {
  border-color:rgba(138,180,248,.35);
}

body.dark-mode .ai-summary-content {
  background:#182033;
}

body.dark-mode .ai-summary-text {
  color:var(--text-color);
}

body.dark-mode .ai-disclaimer {
  background:#20283a;
  color:var(--muted-color);
  border-top-color:var(--card-border);
}

/* ================================================================
   12. Article Bottom / Internal Links / Share
================================================================ */
#categories-bottom,
.oka-bottom-categories {
  display:flex !important;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0 20px;
}

#categories-bottom a,
.oka-bottom-categories a {
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-pill);
  background:var(--card-bg);
  color:var(--text-color);
  font-size:12px;
  font-weight:700;
  text-decoration:none !important;
}

#categories-bottom a:hover,
.oka-bottom-categories a:hover {
  background:var(--accent-light);
  color:var(--accent);
  text-decoration:none !important;
}

.oka-next-read-block {
  margin:40px 0 32px;
  padding:20px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  background:var(--card-bg);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.oka-next-read-label {
  margin:0 0 4px;
  color:var(--muted-color);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}

.oka-next-read-title {
  margin:0 0 16px;
  padding:0 0 10px;
  border-bottom:1px solid var(--card-border);
  color:var(--heading-color);
  font-size:18px;
  line-height:1.5;
}

.oka-next-read-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.oka-next-read-grid a {
  display:block;
  padding:14px 15px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-sm);
  background:#f8fafc;
  color:inherit !important;
  text-decoration:none !important;
}

.oka-next-read-grid a:hover {
  background:#eef5fb;
  border-color:var(--accent);
  text-decoration:none !important;
}

body.dark-mode .oka-next-read-block {
  background:var(--card-bg);
  border-color:var(--card-border);
}

body.dark-mode .oka-next-read-grid a {
  background:#20283a;
  border-color:var(--card-border);
}

body.dark-mode .oka-next-read-grid a:hover {
  background:#273149;
  border-color:var(--accent);
}

.oka-next-read-kicker {
  display:block;
  margin-bottom:4px;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}

.oka-next-read-grid strong {
  display:block;
  margin-bottom:5px;
  color:var(--title-link-color) !important;
  font-size:14px;
  line-height:1.5;
}

.oka-next-read-grid small {
  display:block;
  color:var(--muted-color);
  font-size:12px;
  line-height:1.6;
}

.oka-follow-after-article {
  margin:32px 0 28px;
  padding:18px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-sm);
  background:var(--card-bg);
  text-align:center;
}

.oka-follow-title {
  margin:0 0 8px;
  color:var(--heading-color);
  font-size:17px;
  font-weight:800;
}

.oka-follow-after-article p {
  color:var(--muted-color);
  font-size:14px;
  line-height:1.8;
}

.oka-follow-after-article a {
  display:inline-block;
  margin-top:6px;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  background:#111;
  color:#fff !important;
  font-size:14px;
  font-weight:800;
  text-align:center;
  text-decoration:none !important;
}

.oka-related-article { margin:28px 0; }
.oka-bottom-ad { margin:32px 0; }

/* PC fixed share rail */
.oka-vrc-share-fixed {
  position:fixed;
  left:6px;
  top:50%;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:6px;
  transform:translateY(-50%);
}

.oka-vrc-share-fixed .share-btn {
  position:relative;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:6px;
  color:#fff !important;
  text-decoration:none !important;
  font-size:13px;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  cursor:pointer;
  transition:transform var(--transition-fast), opacity var(--transition-fast);
}

.oka-vrc-share-fixed .share-btn:hover,
.oka-vrc-share-fixed .share-btn:focus-visible {
  transform:scale(1.12);
  opacity:.92;
  outline:none;
}

.oka-vrc-share-fixed .share-btn svg {
  width:13px;
  height:13px;
  fill:currentColor;
}

.oka-share-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  font-size:10px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.oka-share-x { background:#111111 !important; }
.oka-share-friend { background:#5865F2 !important; }
.oka-share-misskey { background:#86B300 !important; }
.oka-share-bluesky { background:#1185FE !important; }
.oka-share-mastodon { background:#6364FF !important; }
.oka-share-line { background:#06C755 !important; }
.oka-share-copy { background:#555 !important; }
.oka-share-copy.is-copied { background:#4caf50 !important; }

.oka-vrc-share-fixed .share-btn::after {
  content:attr(title);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  z-index:1;
  transform:translateY(-50%);
  padding:5px 8px;
  border-radius:6px;
  background:rgba(17,17,17,.9);
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}

.oka-vrc-share-fixed .share-btn:hover::after,
.oka-vrc-share-fixed .share-btn:focus-visible::after {
  opacity:1;
}

body.dark-mode .oka-vrc-share-fixed .share-btn::after {
  background:rgba(255,255,255,.94);
  color:#111;
}

/* Mobile / Tablet bottom share panel */
.oka-mobile-share-card {
  display:none;
  margin:30px 0 24px;
  padding:16px;
  border:1px solid var(--card-border);
  border-radius:16px;
  background:var(--card-bg);
  box-shadow:0 6px 20px rgba(15,23,42,.06);
}

.oka-mobile-share-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.oka-mobile-share-title {
  margin:0;
  color:var(--heading-color);
  font-size:16px;
  font-weight:850;
  line-height:1.45;
}

.oka-mobile-share-desc {
  margin:3px 0 0;
  color:var(--muted-color);
  font-size:12.5px;
  line-height:1.6;
}

.oka-mobile-share-primary {
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
  border:0;
  border-radius:12px;
  background:#5865F2;
  color:#fff;
  font-size:14.5px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(88,101,242,.22);
}

.oka-mobile-share-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.oka-mobile-share-btn {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}

.oka-mobile-share-btn svg {
  width:16px;
  height:16px;
  fill:currentColor;
}

.oka-mobile-share-btn.is-x { background:#111; }
.oka-mobile-share-btn.is-misskey { background:#86B300; }
.oka-mobile-share-btn.is-bluesky { background:#1185FE; }
.oka-mobile-share-btn.is-mastodon { background:#6364FF; }
.oka-mobile-share-btn.is-line { background:#06C755; }
.oka-mobile-share-btn.is-copy { background:#555; }
.oka-mobile-share-btn.is-copied { background:#4caf50; }

@media screen and (max-width:1023px) {
  .oka-vrc-share-fixed {
    display:none !important;
  }

  .oka-mobile-share-card {
    display:block;
  }
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .oka-mobile-share-grid {
    grid-template-columns:repeat(6,1fr);
  }
}

@media screen and (min-width:1024px) {
  .oka-next-read-grid {
    grid-template-columns:repeat(3,1fr);
  }

  .oka-mobile-share-card {
    display:none !important;
  }
}

/* ================================================================
   13. Footer
================================================================ */
.site-footer {
  width:100%;
  border-top:1px solid #d5dbe2;
  font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size:13px;
  text-align:center;
}

.footer-links {
  padding:30px 10px 20px;
  background:transparent;
}

.footer-links a {
  display:inline-block;
  margin:0 10px;
  color:#6c7a89;
  text-decoration:none;
}

.footer-links a:hover {
  color:var(--accent);
  text-decoration:underline;
}

.separator {
  color:#c0c8d1;
  user-select:none;
}

.footer-copyright {
  padding:15px 10px;
  background:#e1e6eb;
  color:#6c7a89;
  letter-spacing:.05em;
}

.footer-copyright p {
  margin:0;
  font-weight:400;
}

body.dark-mode .site-footer {
  background:var(--bg-color);
  border-top-color:var(--card-border);
}

body.dark-mode .footer-copyright {
  background:#0f172a;
  color:var(--muted-color);
}

/* ================================================================
   14. Responsive Misc
================================================================ */
@media screen and (max-width:767px) {
  input,
  select,
  textarea,
  button,
  .hamburger-search input,
  #freeInput-side,
  .free-search-input {
    font-size:16px !important;
    line-height:1.4 !important;
  }

  .desktop-sidebar,
  .large-banner {
    display:none !important;
  }

  body { font-size:16px; line-height:1.65; }

  .header-menu,
  .footer-links,
  .three-column-layout {
    display:block;
    padding:0 16px;
  }

  #footer { margin-bottom:48px; }

  #container,
  #container-inner,
  #wrapper,
  #content {
    margin-top:0 !important;
    padding-top:0 !important;
  }

  .oka-next-read-block {
    margin:32px 0 24px;
    padding:16px;
  }

  .footer-links a {
    margin:6px 8px;
  }

  .separator {
    display:none;
  }
}

@media screen and (max-width:480px) {
  .easyLink-box {
    max-width:280px;
    margin:20px auto 0;
  }

  .easyLink-img {
    overflow:hidden;
    height:180px;
  }

  .easyLink-img-box { width:226px; }
}

@media screen and (min-width:481px) {
  .easyLink-img {
    width:180px;
    height:auto;
    min-height:160px;
    margin:0;
  }

  .easyLink-info { width:calc(100% - 180px); }
}

@media screen and (min-width:704px) {
  .easyLink-info-name { font-size:16px; }
  .easyLink-info-btn { margin:20px -5px 0; }
  .easyLink-info-btn a { font-size:13.5px; }

  .easyLink-box:not(.easyLink-size-s) .easyLink-img {
    width:260px;
    min-height:240px;
  }

  .easyLink-box:not(.easyLink-size-s) .easyLink-img-box {
    width:240px;
    height:240px;
  }

  .easyLink-box:not(.easyLink-size-s) .easyLink-img-box span > img {
    max-width:240px;
    max-height:240px;
  }

  .easyLink-box:not(.easyLink-size-s) .easyLink-info {
    width:calc(100% - 280px);
  }

  .easyLink-box:not(.easyLink-size-s) .easyLink-info-name { font-size:18px; }

  .easyLink-box:not(.easyLink-size-s) .easyLink-info-btn a {
    width:calc(50% - 10px);
    padding:10px;
  }
}

@media screen and (min-width:992px) {
  .recommend-container { padding:0 20px; }
  .recommend-item { width:25%; }
  .recommend-title { font-size:14px; }
}


/* ================================================================
   RECOVERY PATCH v3
   目的：
   - 追尾目次を元フォーマット寄せに戻す
   - PCヘッダーの過剰な高さ/位置指定によるズレを抑える
   - スマホ/タブレットのハンバーガー最適化は維持
================================================================ */

/* 追尾目次：元フォーマット系に復帰 */
#stoc-module { backface-visibility:hidden; }
#stoc-module.tracking { margin-bottom:0; }
#stoc-module.fixed { position:fixed; }
#stoc-module.absolute { position:absolute; }
#stoc-module.sticky { position:sticky; position:-webkit-sticky; }
#stoc-module.fade-in { animation:stocFadeIn .3s ease; }

@keyframes stocFadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

#stoc { overflow-y:auto; }

#stoc ol {
  margin:0;
  padding:0 0 0 1em;
  list-style:none;
}

#stoc > ol { padding-left:0; }

#stoc a {
  display:block;
  padding:2px 2px 2px 6px;
  color:var(--text-color);
  text-decoration:none;
  font-size:13px;
  line-height:1.55;
}

#stoc .active,
#stoc:not(.touch) a:hover {
  background:rgba(0,0,0,.05);
}

body.dark-mode #stoc .active,
body.dark-mode #stoc:not(.touch) a:hover {
  background:rgba(255,255,255,.08);
}

#stoc::-webkit-scrollbar { width:8px; background:#ececec; }
#stoc::-webkit-scrollbar-button { display:none; }
#stoc::-webkit-scrollbar-thumb { background:#b1b1b1; }

/* PCヘッダー復旧：PCではバー位置を固定しすぎず、画像エリアのズレを抑える */
@media screen and (min-width:1024px) {
  #blog-header {
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* PCのヘッダー画像は大きすぎるとズレて見えるため、標準的な高さに戻す */
  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #title,
  #title a {
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #blog-title-inner {
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  .oka-site-header {
    top:0 !important;
    margin-top:0 !important;
    transform:none !important;
  }
}

/* タブレットは引き続きハンバーガー優先 */
@media screen and (min-width:768px) and (max-width:1023px) {
  .oka-pc-nav {
    display:none !important;
  }

  .hamburger-button {
    display:flex !important;
  }
}


/* ================================================================
   oka-vrc旅行記：ヘッダー画像 復旧・安定化パッチ v5
   目的：
   - PCでは、はてなテーマ本来のヘッダー画像サイズ・高さを極力維持する
   - PCでは「枠ぴったりに最大拡張する cover 指定」を解除する
   - PCでは中央寄せだけを補助する
   - タブレット / スマホだけ、表示崩れ防止のため高さを調整する
   設置：
   - デザインCSSの一番下
   - 既存のヘッダー中央寄せ/cover系パッチより後ろ
================================================================ */

/* ------------------------------------------------
   共通：背景位置だけ中央基準に寄せる
   ※ サイズ・高さは端末別で分ける
------------------------------------------------ */
#blog-header,
#blog-title,
#blog-title-inner,
#blog-title-content,
#blog-title-content-inner,
#title,
#title a,
.header-image,
.header-image a {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------
   PC：はてなテーマ本来のヘッダーフォーマットを優先
   - height固定を解除
   - background-size: cover を解除
   - imgの object-fit: cover を解除
------------------------------------------------ */
@media screen and (min-width: 1024px) {
  #blog-header {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    width: auto !important;
    height: revert !important;
    min-height: revert !important;
    max-height: revert !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: revert !important;
    overflow: revert !important;
    line-height: revert !important;
    font-size: revert !important;
    background-size: revert !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* revert が効きにくい古い環境向けの保険 */
  #blog-title[style],
  #blog-title-inner[style],
  #blog-title-content[style],
  #title a[style] {
    background-position: center center !important;
  }

  /* img形式のヘッダー画像は、最大拡張せずテーマ本来の比率へ戻す */
  #blog-header img,
  #blog-title img,
  #blog-title-inner img,
  #blog-title-content img,
  #title img,
  .header-image img {
    display: revert !important;
    width: revert !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .oka-site-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .oka-pc-nav {
    display: flex !important;
  }

  .hamburger-button,
  .hamburger-nav,
  .hamburger-overlay {
    display: none !important;
  }
}

/* ------------------------------------------------
   タブレット：ここだけ高さを明示して崩れを防ぐ
   - PCナビは出さない
   - ハンバーガー運用
------------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #blog-header {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #blog-header img,
  #blog-title img,
  #blog-title-inner img,
  #blog-title-content img,
  #title img,
  .header-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  .oka-pc-nav {
    display: none !important;
  }

  .hamburger-button {
    display: flex !important;
  }

  .oka-site-header {
    height: 56px !important;
    min-height: 56px !important;
    justify-content: center !important;
    padding-left: 66px !important;
    padding-right: 66px !important;
  }
}

/* ------------------------------------------------
   スマホ：従来どおり高さを抑える
------------------------------------------------ */
@media screen and (max-width: 767px) {
  #blog-header {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #blog-header img,
  #blog-title img,
  #blog-title-inner img,
  #blog-title-content img,
  #title img,
  .header-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }
}

@media screen and (max-width: 380px) {
  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }
}



/* ================================================================
   FINAL INTEGRATION PATCH v6
   全体統合デバッグ：
   - PCヘッダー画像は初期フォーマット寄せ
   - タブレット/スマホだけヘッダー画像高を制御
   - ハンバーガーは単一ボタン思想
   - サイドバー/メニューのhover反応を復旧
================================================================ */

/* ---------- PCヘッダー：cover拡張を解除し、中央寄せだけ補助 ---------- */
#blog-header,
#blog-title,
#blog-title-inner,
#blog-title-content,
#blog-title-content-inner,
#title,
#title a,
.header-image,
.header-image a {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 1024px) {
  #blog-header {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    width: auto !important;
    height: revert !important;
    min-height: revert !important;
    max-height: revert !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: revert !important;
    overflow: revert !important;
    line-height: revert !important;
    font-size: revert !important;
    background-size: revert !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #blog-header img,
  #blog-title img,
  #blog-title-inner img,
  #blog-title-content img,
  #title img,
  .header-image img {
    display: revert !important;
    width: revert !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .oka-site-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .oka-pc-nav {
    display: flex !important;
  }

  .hamburger-button,
  .hamburger-nav,
  .hamburger-overlay {
    display: none !important;
  }
}

/* ---------- タブレット：PCナビを出さず、画像高を安定化 ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #blog-header {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #blog-header img,
  #blog-title img,
  #blog-title-inner img,
  #blog-title-content img,
  #title img,
  .header-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  .oka-pc-nav {
    display: none !important;
  }

  .hamburger-button {
    display: flex !important;
  }

  .oka-site-header {
    height: 56px !important;
    min-height: 56px !important;
    justify-content: center !important;
    padding-left: 66px !important;
    padding-right: 66px !important;
  }
}

/* ---------- スマホ：画像高を抑えて安定化 ---------- */
@media screen and (max-width: 767px) {
  #blog-header {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #blog-header img,
  #blog-title img,
  #blog-title-inner img,
  #blog-title-content img,
  #title img,
  .header-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }
}

@media screen and (max-width: 380px) {
  #blog-title,
  #blog-title-inner,
  #blog-title-content,
  #blog-title-content-inner,
  #title,
  #title a {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }
}

/* ---------- ハンバーガー：単一ボタン・背景スクロール許可 ---------- */
body.menu-open {
  overflow: auto !important;
  touch-action: auto !important;
}

.hamburger-close-btn {
  display: none !important;
}

.hamburger-overlay {
  pointer-events: none !important;
  background: rgba(0, 0, 0, .34) !important;
}

.hamburger-button {
  z-index: 10004 !important;
}

.hamburger-nav {
  pointer-events: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

@media screen and (max-width: 1023px) {
  .hamburger-nav {
    width: min(348px, 90vw) !important;
    max-width: 348px !important;
    border-left: 1px solid var(--card-border) !important;
    box-shadow: -10px 0 28px rgba(15, 23, 42, .18) !important;
  }

  .hamburger-nav-inner {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .oka-drawer-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--card-border);
    background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.98) 28%, rgba(255,255,255,1) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .oka-drawer-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  }

  .oka-drawer-action:hover,
  .oka-drawer-action:focus-visible {
    transform: translateY(-1px);
    text-decoration: none !important;
  }

  .oka-drawer-action-primary {
    background: var(--accent);
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(26,127,212,.24);
  }

  .oka-drawer-action-secondary {
    border: 1px solid var(--card-border);
    background: var(--bg-color);
    color: var(--text-color) !important;
  }
}

body.dark-mode .oka-drawer-actions {
  background: linear-gradient(180deg, rgba(27,34,51,.76) 0%, rgba(27,34,51,.98) 28%, rgba(27,34,51,1) 100%);
  border-top-color: rgba(255,255,255,.12);
}

body.dark-mode .oka-drawer-action-primary {
  color: #0f172a !important;
}

body.dark-mode .oka-drawer-action-secondary {
  background: #252c3f;
  color: #e6e8ee !important;
}

/* ---------- hover反応復旧：ハンバーガー ---------- */
.hamburger-list > li > a,
.hamburger-accordion-btn,
.hb-sub-accordion-btn,
.hamburger-accordion-content a,
.hb-sub-accordion-content a {
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease !important;
}

.hamburger-list > li > a:hover,
.hamburger-accordion-btn:hover,
.hb-sub-accordion-btn:hover,
.hamburger-accordion-content a:hover,
.hb-sub-accordion-content a:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  text-decoration: none !important;
}

.hamburger-list > li > a:hover i,
.hamburger-accordion-btn:hover i,
.hb-sub-accordion-btn:hover i {
  color: var(--accent) !important;
}

.hamburger-list > li > a:active,
.hamburger-accordion-btn:active,
.hb-sub-accordion-btn:active,
.hamburger-accordion-content a:active,
.hb-sub-accordion-content a:active {
  transform: translateX(2px) !important;
}

/* ---------- hover反応復旧：サイドバー ---------- */
.oka-side-minimal .oka-side-card {
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease, background .18s ease !important;
}

.oka-side-minimal .oka-side-card:hover {
  border-color: rgba(30,155,215,.35) !important;
  box-shadow: 0 7px 22px rgba(15,23,42,.08) !important;
}

body.dark-mode .oka-side-minimal .oka-side-card:hover {
  border-color: rgba(96,165,250,.38) !important;
  box-shadow: 0 7px 24px rgba(0,0,0,.32) !important;
}

.oka-side-minimal .oka-main-route,
.oka-side-minimal .oka-side-about-links a,
.oka-side-minimal .oka-more-link a,
.oka-side-minimal .oka-popular-tags button,
.oka-side-minimal .oka-search-submit,
.oka-side-minimal .oka-search-reset,
.oka-side-minimal .oka-sidebar-ranking-button {
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

.oka-side-minimal .oka-main-route:hover {
  background: var(--oka-blue-soft) !important;
  border-top-color: transparent !important;
  border-radius: 12px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  transform: translateX(2px) !important;
}

.oka-side-minimal .oka-main-route:hover strong,
.oka-side-minimal .oka-side-about-links a:hover,
.oka-side-minimal .oka-more-link a:hover {
  color: var(--oka-blue-hover) !important;
}

.oka-side-minimal .oka-popular-tags button:hover,
.oka-side-minimal .oka-search-reset:hover,
.oka-side-minimal .oka-sidebar-ranking-button:hover:not(.active) {
  background: var(--oka-blue-soft) !important;
  border-color: var(--oka-blue) !important;
  color: var(--oka-blue-hover) !important;
  transform: translateY(-1px) !important;
}

.oka-side-minimal .oka-search-submit:hover {
  opacity: .92 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(30,155,215,.22) !important;
}

/* ================================================================