/* <system section="theme" selected="17680117127203368731"> */
@charset "UTF-8";
/*
  Theme: focus
  Author: yamshta
  Responsive: yes
  Description:
    読み書きに集中できるワンカラムテーマです。
  Released under the MIT License.
*/
/*! 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 */
}

/* 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: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    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 */
    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 {
    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"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

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

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

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

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

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

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

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

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

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

html,
body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';
    color: #222;
    background-color: #fff;
    line-height: 1.6;
}

a {
    color: #444;
}

a:hover {
    color: #444;
}

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

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

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #222;
    text-decoration: none;
}

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

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

/* container */
#container,
#footer {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 768px) {
    #container,
    #footer {
        width: 720px;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    #container,
    #footer {
        width: 940px;
    }
}

/* 2カラムレイアウト*/
#content-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

@media (min-width: 768px) {
    #wrapper {
        width: 480px;
    }
}

@media (min-width: 992px) {
    #wrapper {
        width: 600px;
    }
}

@media (min-width: 768px) {
    #box2 {
        width: 200px;
    }
}

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

/* 下記のスタイルを適用するとテーマを1カラムレイアウトにできます。
利用するにはコメントアウトを解除してください。
（2カラムレイアウトの場合はコメントアウト全体が不要です）
---- END 1カラム */
#content-inner {
    flex-direction: column;
    align-items: center;
}

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

@media (min-width: 992px) {
    #wrapper {
        max-width: 720px;
    }
}

#box2 {
    width: 100%;
}

@media (min-width: 768px) {
    #box2 {
        width: 100%;
    }
}

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

#box2-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    #box2-inner {
        margin-left: -20px;
        flex-direction: row;
    }
}

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

.hatena-module {
    width: 100%;
}

@media (min-width: 768px) {
    .hatena-module {
        width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .hatena-module {
        padding-left: 30px;
    }
}

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

@media (min-width: 768px) {
    #blog-title {
        margin: 3em 0;
        text-align: left;
    }
}

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

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

#title a {
    color: #222;
}

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

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

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

.header-image-enable #blog-title-content {
    margin-left: 10px;
    margin-right: 10px;
}

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

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

/* entry */
.entry {
    position: relative;
    margin-bottom: 4em;
}

.entry-header {
    padding-bottom: 1em;
    margin-bottom: 2em;
    border-bottom: 1px solid #ddd;
    position: relative;
}

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

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

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

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

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

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

.categories a {
    margin-right: .5em;
}

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

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

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

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

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

.entry-content h2 {
    font-size: 1.4rem;
}

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

.entry-content h3 {
    font-size: 1.2rem;
}

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

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

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

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

.entry-content ul,
.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;
    display: block;
    font-size: .8rem;
    margin: 2em 0 0 0;
}

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

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

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

.entry-content blockquote {
    border: 1px solid #ddd;
    margin: 0 0 10px;
    padding: 20px;
}

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

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

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

.entry-content pre {
    background: #f5f5f5;
    border: none;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-size: .8rem;
    padding: 10px;
}

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

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

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

.entry-content .table-of-contents {
    padding: 1em 1em 1em 2em;
    margin: 1em 0;
    border: 1px solid #ddd;
}

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

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

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

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

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

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

.comment-box .entry-comment {
    padding: 10px 0 10px 60px;
    border-bottom: 1px solid #ddd;
    position: relative;
}

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

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

.comment-box .hatena-id-icon {
    position: absolute;
    top: 10px;
    left: 0;
    width: 50px !important;
    height: 50px !important;
    border-radius: 3px;
}

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

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

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

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

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

.leave-comment-title {
    padding: .6em 1em;
    font-size: .85rem;
    border: 1px solid #ddd;
}

/* Pager */
.pager {
    margin: 2em 0;
    display: flex;
    justify-content: space-between;
}

/* サイドバーモジュール */
.hatena-module {
    box-sizing: border-box;
    margin-bottom: 3em;
    font-size: .85rem;
}

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

.hatena-module-title {
    margin-bottom: .6em;
    padding-bottom: .2em;
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
    font-weight: bold;
}

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

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

/* Profile module */
.hatena-module-profile .profile-icon {
    float: left;
    margin: 0 10px 10px 0;
}

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

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

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

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

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

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

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

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

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

.hatena-urllist .urllist-entry-body {
    margin-top: .3em;
}

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

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

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

.hatena-module-search-box .search-module-button:hover {
    opacity: .85;
}

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

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

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

.page-archive .archive-entry {
    margin-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.page-archive .entry-title {
    margin: .3em auto;
}

.page-archive .entry-thumb {
    width: 80px;
    height: 80px;
    background-size: cover;
}

@media (min-width: 768px) {
    .page-archive .entry-thumb {
        width: 120px;
        height: 120px;
    }
}

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

@media (min-width: 768px) {
    .page-archive .entry-description {
        font-size: .9rem;
    }
}

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

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

#footer a {
    color: #666;
}

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

html,
body {
    letter-spacing: .05rem;
    line-height: 1.8;
    font-family: "Lato", Arial, Emoji, -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/* container */
#container,
#footer {
    padding: 0;
    margin: 0;
    width: 100%;
}

#content-inner {
    padding: 0 20px;
}

#wrapper,
#box2-inner {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

#box2-inner {
    justify-content: space-between;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.hatena-module {
    width: 100%;
    padding: 0;
}

@media (min-width: 768px) {
    .hatena-module {
        width: 48%;
    }
}

@media (min-width: 992px) {
    .hatena-module {
        width: 30%;
    }
}

/* ヘッダ */
#globalheader-container {
    background-color: #fff;
    color: #666;
}

#blog-title {
    text-align: center;
    width: 100%;
    margin: 6em 0;
}

@media (min-width: 768px) {
    #blog-title {
        text-align: center;
    }
}

#blog-title-content {
    margin: auto;
}

.header-image-enable #blog-title #blog-title-inner {
    background-position: center !important;
    background-size: cover;
}

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

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

.header-image-enable #blog-title #blog-description {
    font-weight: normal;
    padding: 0 2em;
    margin: 1.5em 0 0;
}

#title {
    font-size: 1.6rem;
    letter-spacing: 6px;
}

@media (min-width: 992px) {
    #title {
        font-size: 2.5rem;
        letter-spacing: 8px;
    }
}

@media (max-width: 480px) {
    #title {
        font-size: 1.4rem;
        letter-spacing: 4px;
    }
}

/* entry */
.entry-header {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 1em;
}

.date {
    margin-bottom: 2em;
}

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

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

.entry-title {
    font-size: 1.5rem;
}

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

.categories {
    margin: 2em 0 0;
}

.categories a {
    color: #000;
    text-decoration: none !important;
    font-size: .7rem;
    margin-right: 1em;
    background-color: #eee829;
    padding: 4px 6px;
}

/* 記事内の書式 */
.entry-content {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

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

.entry-content p {
    margin: 1.6em 0;
}

.entry-content img {
    padding: 10px;
    border: 1px solid #ddd;
    max-width: 99%;
    box-sizing: border-box;
    max-height: 500px;
    width: auto !important;
}

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

.entry-content h1,
.entry-content h2 {
    padding-bottom: .6em;
    border-bottom: 1px solid #ddd;
}

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

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

.entry-content pre,
.entry-content blockquote {
    background-color: #f7f7f7;
    border: none;
    padding: 1.6em;
    border-radius: 8px;
}

.entry-content pre,
.entry-content blockquote,
.entry-content .hatena-asin-detail,
.entry-content .embed-wrapper {
    margin: 2em 0;
}

.entry-content ul,
.entry-content ol,
.entry-content dd {
    margin: 1.6em 0 1.6em 1.5em;
}

.entry-content iframe {
    margin: 2em 0 0 !important;
}

.entry-content code {
    word-break: break-all;
}

.leave-comment-title {
    border-radius: 4px;
}

.hatena-urllist {
    line-height: 1.5;
}

.hatena-urllist li a {
    word-break: break-all;
}

.hatena-urllist .urllist-entry-body {
    display: none;
}

@media (min-width: 768px) {
    .hatena-urllist .urllist-entry-body {
        display: -webkit-box;
    }
}

.recent-entries li,
.entries-access-ranking li {
    padding: .5em 0 1em;
    font-size: .8rem;
}

.recent-entries li a,
.entries-access-ranking li a {
    display: block;
}

.entry-list .list-entry-article {
    padding: 15px 0;
}

.entry-list .list-entry-article .entry-title {
    margin: .5em 0;
}

/* Archive */
.page-archive .archive-entries {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.page-archive .archive-entry {
    background: #fff;
    margin: 0 0 8px 0;
    padding: 15px 0;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .page-archive .archive-entry {
        width: 48%;
    }
}

.page-archive .date {
    margin: 0;
}

.page-archive .entry-title {
    font-size: 1.3rem;
    overflow: hidden;
    height: 54px;
}

.page-archive .entry-title .entry-title-link {
    display: block;
    max-height: 52px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.page-archive .entry-thumb {
    width: 100%;
    height: 175px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 8px 0px;
    border-radius: 5px;
}

.page-archive .entry-description {
    font-size: .8rem;
    line-height: 1.6;
    color: #666;
}

.page-archive .categories {
    margin: 2em 0;
    position: absolute;
    right: 0;
    z-index: 2;
    background: #eee829;
    white-space: nowrap;
    max-width: 349px;
    overflow: hidden;
    padding: 0 6px;
}

.page-archive .categories a {
    color: #000;
    display: inline-block;
    line-height: 2;
    margin: 0 .2em;
    padding: 0;
}

.page-archive .bookmark-widget-counter {
    text-decoration: none;
    display: none;
}

.page-archive .urllist-title-link {
    display: -webkit-box;
}

/*# sourceMappingURL=boilerplate.css.map */

.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-top: 0;
    margin-bottom: 0;
}

.entry-content pre {
    text-overflow: inherit;
}

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

.requote-button {
    display: none !important;
}
/* </system> */

/* ==========================================================================
   1. 基本設定・フォント・背景・パンくず
   ========================================================================== */
/* 外部リソース集約 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

/* 全体構造：アーキテクト・グリッド */
body {
    font-family: 'Noto Sans JP', "Helvetica Neue", "Hiragino Sans", sans-serif;
    color: #333;
    background-color: #fcfcfc !important;
    line-height: 1.9;
    background-image: 
        linear-gradient(rgba(0, 86, 179, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 86, 179, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    background-attachment: scroll !important;
}

/* リンク定義 */
a {
    color: #0056b3;
    text-decoration: none;
    transition: all 0.3s ease;
}
a:hover {
    color: #003d80;
    opacity: 0.8;
}

/* スクロールバー：Seta River Scroll */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f5f5f5; border-left: 1px solid #e0e0e0; }
::-webkit-scrollbar-thumb { 
    background-color: #0056b3; 
    border-radius: 5px; 
    border: 2px solid #f5f5f5; 
}
::-webkit-scrollbar-thumb:hover { background-color: #003d80; }

/* パンくずリスト：テクニカル・パス形式 */
.breadcrumb {
    margin: 30px 0 0 5% !important;
    padding: 0 !important;
}
.breadcrumb-inner {
    font-family: 'Courier New', monospace !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    color: #888 !important;
    display: flex !important;
    align-items: center !important;
}
.breadcrumb-inner::before {
    content: 'SYSTEM_PATH://' !important;
    color: #0056b3 !important;
    font-weight: bold !important;
    margin-right: 8px !important;
}
.breadcrumb-link { color: #0056b3 !important; text-decoration: none !important; }
.breadcrumb-link:hover { border-bottom: 1px solid #0056b3 !important; }
.breadcrumb-gt { margin: 0 10px !important; color: #ccc !important; }
.breadcrumb-child span {
    color: #1a252f !important;
    font-weight: 700 !important;
    background: rgba(0, 86, 179, 0.05) !important;
    padding: 2px 8px !important;
    border-radius: 2px !important;
}

/* ==========================================================================
   2. ヘッダー：Structural Unity（ページャー統合デザイン）
   ========================================================================== */
#blog-title-inner {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 130px 20px 110px !important;
    text-align: center !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 1;
}

/* レイヤー1：方眼紙エフェクト */
#blog-title-inner::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1 !important;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    background-color: rgba(26, 37, 47, 0.45) !important; 
    backdrop-filter: blur(2px) !important;
}

/* レイヤー2：下部装飾ライン */
#blog-title-inner::after {
    content: 'REF. HEAD-01 // GEOGRAPHICAL_LAYER_TOP' !important;
    position: absolute !important;
    bottom: 12px !important; /* 位置を下げ、図面枠の隅に配置 */
    right: 15px !important;  /* 中央から右端へ寄せ、建築図面の形式に則る */
    left: auto !important;   /* 左基点の解除 */
    text-align: right !important;
    font-family: monospace !important;
    font-size: 8px !important; /* 最小サイズにして精密感を出す */
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 0.2em !important; /* 精密機械のような字間 */
    border-top: none !important; /* 重なりを避けるため、不要な線を排除 */
    padding-top: 0 !important;
    z-index: 10 !important;
}

#blog-title-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 900px !important;
}

#title {
    margin: 0 0 30px 0 !important;
    line-height: 1.1 !important;
}

#title a {
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    font-size: 3.8rem !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 5px 15px rgba(0,0,0,0.4), 0 0 40px rgba(0, 86, 179, 0.5) !important;
    display: block !important;
}

#blog-description {
    display: inline-block !important;
    position: relative !important;
    font-family: "Helvetica Neue", "Noto Sans JP", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    background: #1a252f !important;
    padding: 15px 40px !important;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px) !important;
    border-left: 5px solid #EEE829 !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)) !important;
    margin: 0 auto !important;
}

#blog-description::after {
    content: 'SEQ.01';
    position: absolute;
    top: 5px; right: 10px;
    font-size: 9px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.1em;
}
/* 個別記事ページのみヘッダーをスリム化し、タイトルを露出させる */
.page-entry #blog-title-inner {
    padding: 60px 20px 40px !important; /* 130px/110px から大幅縮小 */
}
.page-entry #title a {
    font-size: 2.2rem !important; /* 3.8rem から縮小 */
}
.page-entry #blog-description {
    padding: 8px 25px !important; /* 15px/40px から縮小 */
    font-size: 0.8rem !important;
}
/* ==========================================================================
   3. ナビゲーション：Architectural Structural Bar
   ========================================================================== */
#top-editarea {
    margin: 0 0 60px 0 !important;
    padding: 30px 0 !important;
    position: relative !important;
    z-index: 100 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* 座標ラベル & 滲み線（PCのみ） */
@media (min-width: 768px) {
    #top-editarea::before {
        content: '00 // SYSTEM_NAVIGATION // SEQUENCE_AXIS' !important;
        position: absolute; top: 50%; left: 1%; transform: translateY(-370%);
        font-family: monospace; font-size: 10px; color: rgba(26, 37, 47, 0.7);
        letter-spacing: 0.3em; white-space: nowrap; z-index: 2; pointer-events: none;
    }
    #top-editarea::after {
        content: '' !important;
        position: absolute; top: 50%; left: 0; width: 100%; height: 1.2px;
        background-image: linear-gradient(90deg, transparent, rgba(26, 37, 47, 0.5) 40%, rgba(26, 37, 47, 0.5) 60%, transparent);
        z-index: 1;
    }
}

.custom-nav {
    position: sticky;
    top: 10px;
    width: auto !important;
    min-width: 60%;
    max-width: 1080px;
    margin: 0 auto;
    z-index: 100 !important;
    overflow: visible !important; /* ドロップダウンのはみ出しを許可 */
}

/* 多角形背景レイヤー（共通） */
.custom-nav::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #1a252f !important;
    z-index: -1 !important;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px) !important;
}

.custom-nav ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 0 !important; padding: 0 30px !important;
    list-style: none !important;
}

.custom-nav li { margin: 0 !important; position: relative !important; }

/* ドロップダウン設定（共通） */
.sub-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #1a252f !important;
    min-width: 160px !important;
    padding: 10px 0 !important;
    z-index: 1000 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-top: 2px solid #EEE829 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.custom-nav li.has-sub:hover .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.sub-menu::before {
    content: 'SUB_COMPONENT_LAYER' !important;
    display: block !important;
    font-family: monospace !important;
    font-size: 8px !important;
    color: rgba(255,255,255,0.3) !important;
    padding: 0 15px 5px !important;
}

.sub-menu li { width: 100% !important; }
.sub-menu li::after { display: none !important; }
.sub-menu a {
    padding: 12px 20px !important;
    font-size: 0.8rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: none !important;
}

/* PC用仕切り線 */
@media (min-width: 768px) {
    .custom-nav li::after {
        content: '' !important;
        position: absolute !important;
        right: 0; top: 25%; height: 50%; width: 1px;
        background: rgba(255, 255, 255, 0.15) !important;
    }
    .custom-nav li:last-child::after { display: none !important; }
}

.custom-nav a {
    display: block !important;
    padding: 20px 25px !important;
    color: #b0c4de !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.custom-nav a:hover { color: #fff !important; }

/* PC用ホバーアクセント */
.custom-nav a::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 0; width: 100%; height: 4px;
    background: #0056b3 !important; 
    transform: scaleX(0) !important;
    transition: transform 0.4s ease !important;
}
.custom-nav a:hover::before { transform: scaleX(1) !important; background: #EEE829 !important; }

html { scroll-padding-top: 60px; }

/* ==========================================================================
   4. コンテンツ・記事スタイル（見出し・画像・マップ）
   ========================================================================== */

/* h3 大見出し */
.entry-content h3 {
    position: relative;
    font-size: 24px;
    font-weight: 700;
    color: #1a252f;
    padding: 10px 0 10px 20px;
    margin: 40px 0 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #1a252f;
    box-shadow: none;
}
.entry-content h3::before {
    content: '';
    position: absolute;
    left: 0; bottom: 0; width: 8px; height: 100%;
    background: #0056b3;
}
.entry-content h3::after {
    content: '';
    position: absolute;
    left: 8px; bottom: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0, 86, 179, 0.05), transparent);
    z-index: -1;
}

/* h4 中見出し */
.entry-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0056b3;
    padding: 6px 0 6px 15px;
    margin: 30px 0 15px;
    border: none;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.entry-content h4::before {
    content: '';
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 70%;
    background: #4da3ff;
}

/* h5 小見出し */
.entry-content h5 {
    font-size: 17px;
    margin: 20px 0 10px;
    padding-left: 12px;
    border-left: 3px solid #ccc;
    color: #555;
}

/* 画像とキャプション */
.entry-content figure {
    display: table !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    position: relative;
}
.entry-content figure img,
.entry-content figure .hatena-fotolife {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px -10px rgba(26, 37, 47, 0.3), 0 4px 10px -2px rgba(26, 37, 47, 0.1) !important;
    margin-top: 3.5em !important;
    margin-bottom: 0.8em !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease !important;
    filter: brightness(1) contrast(1) !important;
}
.entry-content figure:hover img {
    transform: translateY(-6px) scale(1.015) !important;
    box-shadow: 0 25px 50px -12px rgba(26, 37, 47, 0.5), 0 10px 20px -5px rgba(0, 86, 179, 0.35) !important;
    filter: brightness(1.03) contrast(1.02) !important;
}
.entry-content figure p:last-child {
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: fit-content !important;
    max-width: 80% !important;
    text-align: left !important;
    font-size: 0.7rem !important;
    color: #999 !important;
    padding-left: 14px !important;
    position: relative !important;
    margin-bottom: 1.5em !important;
}
.entry-content figure p:last-child::before {
    content: ''; position: absolute; top: 9px; left: 0; width: 4px; height: 4px;
    background-color: #b0c4de; border-radius: 1px;
}

/* Google Maps */
.entry-content iframe,
.hatena-iframe-embed {
    border: none !important;
    border-left: 5px solid #0056b3 !important;
    border-top: 1px solid #f0f0f0 !important;
    border-right: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100% !important;
    margin: 3em 0;
    display: block;
    filter: saturate(0.8);
    transition: all 0.3s ease;
}
.entry-content iframe:hover,
.hatena-iframe-embed:hover {
    filter: saturate(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-left-color: #4da3ff !important;
}
/* マップ直下のキャプション */
.entry-content p:has(iframe) + p {
    margin-top: -3em !important;
    margin-bottom: 3em !important;
    display: block !important;
    background-color: #f4f7f9 !important;
    width: auto !important;
    border-left: 5px solid #0056b3 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    padding: 12px 20px !important;
    text-align: left !important;
    color: #1a252f !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    position: relative !important;
}
.entry-content p:has(iframe) + p::before {
    content: 'AREA INFO'; display: block; font-size: 0.6rem; color: #4da3ff; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.1em;
}

/* 記事内テーブル（3行まとめ等） */
.entry-content table {
    width: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    border-left: 6px solid #0056b3 !important;
    border-top: 1px solid #f0f0f0 !important;
    border-right: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    margin: 3em 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.entry-content table td { padding: 30px !important; vertical-align: top !important; }
.entry-content table td > div {
    text-align: left !important;
    color: #1a252f !important;
    background: transparent !important;
    margin-bottom: 20px !important;
    font-family: "Zen Kaku Gothic New", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
}
.entry-content table td > div::before {
    content: 'POINT'; display: inline-block; background: #0056b3; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; margin-right: 15px; border-radius: 2px; letter-spacing: 0.1em; font-family: sans-serif;
}
.entry-content table ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.entry-content table li {
    font-family: inherit !important; color: #333 !important; font-size: 0.95rem !important; line-height: 1.8 !important; margin-bottom: 12px !important; padding-left: 1.8em !important; text-indent: -1.8em !important;
}
.entry-content table li span {
    color: #0056b3 !important; font-weight: bold !important; font-size: 1.1em !important; margin-right: 10px !important; font-family: Arial, sans-serif !important;
}

/* 記事末注記（NOTE） */
.entry-content div[style*="border-top: 1px solid #e0e0e0"] {
    border: none !important;
    background: #f9f9f9 !important;
    border-top: 2px solid #1a252f !important;
    border-bottom: 1px solid #ddd !important;
    padding: 25px 30px !important;
    margin-top: 60px !important;
    margin-bottom: 20px !important;
    font-family: "Zen Kaku Gothic New", sans-serif !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
    position: relative !important;
}
.entry-content div[style*="border-top: 1px solid #e0e0e0"]::before {
    content: 'NOTE'; position: absolute; top: -12px; left: 20px; background: #1a252f; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 2px 12px; letter-spacing: 0.1em;
}
.entry-content div[style*="border-top: 1px solid #e0e0e0"] p:first-of-type {
    margin: 0 0 15px 0 !important; font-size: 0.85rem !important; line-height: 1.8 !important; color: #555 !important; text-align: left !important;
}
.entry-content div[style*="border-top: 1px solid #e0e0e0"] p:first-of-type strong {
    display: block !important; color: #0056b3 !important; font-size: 0.95rem !important; margin-bottom: 8px !important; padding-bottom: 5px !important; border-bottom: 1px dashed #ccc !important; padding-left: 20px !important; position: relative !important;
}
.entry-content div[style*="border-top: 1px solid #e0e0e0"] p:first-of-type strong::before {
    content: '!'; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background: #0056b3; color: #fff; font-size: 11px; text-align: center; line-height: 16px; border-radius: 50%; font-weight: bold;
}
.entry-content div[style*="border-top: 1px solid #e0e0e0"] p:last-child {
    font-size: 0.75rem !important; color: #999 !important; text-align: right !important; margin: 0 !important; font-family: "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0.05em !important; border-top: 1px solid #eee !important; padding-top: 10px !important;
}

/* 日付とカテゴリ */
/* --- 4. 記事ヘッダー：タイポグラフィの独立化（PC・共通） --- */
/* PC版：REFラベルとの距離を最適化（75px→45px） */
@media (min-width: 768px) {
    .page-entry .entry-header { padding-top: 45px !important; }
}

.date {
    display: table !important;
    font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.85rem; color: #555; background: #fff; border: 1px solid #e0e0e0; border-left: 4px solid #0056b3; padding: 4px 12px; border-radius: 2px; 
    margin-bottom: 12px !important; /* 25px から 12px へ短縮 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.entry-title {
    line-height: 1.5 !important; /* タイトル複数行時の文字重なり防止 */
    margin-top: 0 !important;
}

.categories a {
    background: #EEE829 !important; color: #1a252f !important; border-bottom: 2px solid #d4ce24 !important;
    display: inline-block !important; font-size: 0.75rem !important; font-weight: 700 !important; text-decoration: none !important; padding: 4px 12px !important; border-radius: 4px !important; margin-left: 10px !important; transition: all 0.3s ease !important;
}
.categories a:hover {
    background: #1a252f !important; color: #EEE829 !important; border-bottom-color: #1a252f !important;
}
/* ==========================================================================
   4-2.　Nautical Legend (既存の .related-box を自動判別して一括変換)
   ========================================================================== */

/* 1. ボックス外枠（共通：海図・等高線のベース） */
.entry-content .related-box {
    /* インラインスタイルを強制上書き */
    background-color: #ffffff !important;
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(0, 86, 179, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 100% 0%, transparent 40%, rgba(0, 86, 179, 0.02) 40.5%, transparent 41%) !important;
    padding: 30px 25px !important;
    margin: 3.5em 0 !important;
    border: 1px solid #f0f0f0 !important;
    border-left: 6px solid #0056b3 !important; /* 湖の青 */
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

/* 2. 背景装飾（等高線サークル） */
.entry-content .related-box::after {
    content: '' !important;
    position: absolute; top: -30px; right: -30px;
    width: 150px; height: 150px;
    border: 1px solid rgba(0, 86, 179, 0.08);
    border-radius: 50%; pointer-events: none;
}

/* 3. 【比較版】のみに適用：1行目を見出し化 */
/* (段落が2つ以上ある場合のみ、1つ目を太字にするロジック) */
.entry-content .related-box p:first-of-type:not(:only-of-type) {
    margin: 0 0 18px 0 !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: #1a252f !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px dashed #eee !important;
    padding-bottom: 12px !important;
}
.entry-content .related-box p:first-of-type:not(:only-of-type)::before {
    content: '' !important;
    width: 8px; height: 8px; background: #0056b3;
    display: inline-block; margin-right: 12px;
    transform: rotate(45deg);
}

/* 4. 【単記事版】または【比較版の本文】のデザイン */
.entry-content .related-box p {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    color: #333 !important;
    margin: 0 !important;
    background: transparent !important; /* 万が一の背景指定を消去 */
}

/* 5. 【単記事版】のみに適用：先頭に小さな凡例マーク */
.entry-content .related-box p:only-of-type::before {
    content: 'REF' !important;
    font-family: monospace !important;
    font-size: 9px !important;
    color: #fff !important;
    background: #1a252f !important;
    padding: 1px 6px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    font-weight: bold !important;
}

/* 6. リンク・強調の装飾 */
.entry-content .related-box a {
    color: #1a252f !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(26, 37, 47, 0.15) !important;
    transition: 0.3s !important;
}
.entry-content .related-box a:hover {
    color: #0056b3 !important;
    border-bottom-color: #0056b3 !important;
}

/* 既存の「彦根：」などの強勢文字をテクニカルに */
.entry-content .related-box strong {
    color: #0056b3 !important;
    font-family: monospace !important;
    letter-spacing: 0.05em;
}
/* ==========================================================================
   5. アーカイブ・グリッドレイアウト（トップ・カテゴリ・タグ共通）
   ========================================================================== */
.page-index #container, .page-index #content-inner, .page-index #wrapper, .page-index #main,
.page-archive #container, .page-archive #content-inner, .page-archive #wrapper, .page-archive #main {
    width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important;
}

/* カテゴリ・タグページの見出し装飾（建築図面タイトルブロック風） */
.archive-header-category {
    text-align: center !important;
    padding: 80px 20px 40px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}
.archive-header-category::before {
    content: 'GEOGRAPHICAL_SEARCH // LAYER_ID: CATEGORY_TAG' !important;
    font-family: monospace !important;
    font-size: 11px !important;
    color: #0056b3 !important;
    letter-spacing: 0.4em !important;
    display: block !important;
    margin-bottom: 15px !important;
    font-weight: bold;
}
/* --- 5. アーカイブセクション：リッチ・グラフィカル見出し --- */

.archive-header-category {
    text-align: center !important;
    padding: 120px 20px 80px !important;
    position: relative !important;
    background: transparent !important;
}

/* 見出し本体：レイヤード・アーキテクチャ */
.archive-heading {
    all: unset !important;
    display: inline-block !important;
    position: relative !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.8rem !important;
    color: #ffffff !important;
    padding: 30px 100px !important;
    background: #1a252f !important;
    /* 建築図面のグリッドを背景に合成 */
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important;
    background-size: 10px 10px !important;
    /* 幾何学的なカッティング */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%) !important;
    box-shadow: 25px 25px 0 rgba(0, 86, 179, 0.15) !important;
    z-index: 1 !important;
    line-height: 1.2 !important;
}

/* 左端の太いアクセント（綴じ代イメージ） */
.archive-heading::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 15px; height: 100%;
    background: #EEE829 !important;
}

/* 右下の寸法線とシリアルラベル */
.archive-heading::after {
    content: 'GEOG-DATA_VER.3.0 // SHIGA_REF' !important;
    position: absolute !important;
    bottom: 10px; right: 40px;
    font-family: monospace !important;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 0.2em !important;
}

/* 外側の装飾：寸法線（L字の線） */
.archive-header-category::before {
    content: '' !important;
    position: absolute !important;
    top: 80px; left: 50%;
    transform: translateX(-50%);
    width: 400px; height: 180px;
    border-top: 1px solid #0056b3 !important;
    border-right: 1px solid #0056b3 !important;
    opacity: 0.3 !important;
    z-index: 0 !important;
}

/* 外側の装飾：座標ラベル */
.archive-header-category::after {
    content: 'X-AXIS: 35.1847 / Y-AXIS: 136.0125' !important;
    position: absolute !important;
    top: 60px; left: calc(50% + 200px);
    font-family: monospace !important;
    font-size: 9px !important;
    color: #0056b3 !important;
    white-space: nowrap !important;
    letter-spacing: 0.1em !important;
}

/* 記事一覧グリッド */
.archive-entries {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
    gap: 50px 40px !important; padding: 80px 5% 40px 5% !important; max-width: 1600px !important; margin: 0 auto !important;
    position: relative; z-index: 10;
    background-image: 
        linear-gradient(rgba(0, 86, 179, 0.04) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 86, 179, 0.04) 2px, transparent 2px) !important;
    background-size: 400px 400px !important; background-position: center top !important;
}

/* 記事タイル */
.archive-entry {
    background: #ffffff !important; border: none !important; border-radius: 16px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; height: 100% !important; width: auto !important; margin: 0 !important; position: relative !important; 
    cursor: pointer; /* タイル全体がクリック可能であることを示す指マークを追加 */
}
.archive-entry:hover { transform: translateY(-12px) !important; box-shadow: 0 30px 60px rgba(0, 86, 179, 0.15) !important; }

/* タイトルエリア：テーマの「50%ズレ」を完全にリセット */
.archive-entry-header { padding: 25px 30px 0px 30px !important; order: 2 !important; }
.archive-entry .entry-title { 
    font-size: 1.3rem !important; line-height: 1.5 !important; font-weight: 700 !important; margin: 0 !important; 
    height: auto !important; max-height: none !important; overflow: visible !important; display: block !important; 
}
.archive-entry .entry-title a,
.archive-entry .entry-title .entry-title-link { 
    color: #1a252f !important; text-decoration: none !important; 
    display: block !important; position: static !important; top: auto !important; transform: none !important; max-height: none !important;
}

/* タイル全体リンク化 */
.archive-entry .entry-title a::after {
    content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 10 !important;
}

/* カテゴリタグ */
.archive-entry .categories { position: absolute !important; top: 15px !important; right: 15px !important; left: auto !important; z-index: 20 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
.archive-entry .categories a { background: #EEE829 !important; color: #1a252f !important; font-weight: 700 !important; padding: 4px 12px !important; font-size: 0.7rem !important; border-radius: 4px !important; border-bottom: 2px solid #d4ce24 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }

/* サムネイル */
.entry-thumb-link { display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; order: 1 !important; }
.entry-thumb { height: 100% !important; background-size: cover !important; background-position: center !important; }

/* 概要 */
.archive-entry-body { padding: 10px 30px 30px 30px !important; flex-grow: 1 !important; order: 3 !important; }
.entry-description { font-size: 0.9rem !important; color: #555 !important; line-height: 1.8 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

/* 不要要素削除 */
.archive-entry .social-buttons, .archive-entry-tags-wrapper, .archive-entry .star-container, .archive-entry .archive-date { display: none !important; }

/* ==========================================================================
   6. サイドバー・モジュール（建築大判インデックス：整理統合版）
   ========================================================================== */
#box2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 80px 0 120px !important;
    padding: 0 !important;
    position: relative !important;
    border-top: 1px solid rgba(26, 37, 47, 0.1) !important;
    clear: both !important;
    z-index: 10 !important;
}
#box2::before {
    content: '02 // SITE INDEX' !important;
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a252f !important;
    color: #fff !important;
    padding: 2px 24px;
    font-size: 10px;
    font-family: monospace !important;
    font-weight: 700;
    letter-spacing: 0.45em;
    border-radius: 1px;
    z-index: 100 !important;
}
#box2-inner {
    display: grid !important;
    max-width: 1300px !important;
    margin: 80px auto 0 !important;
    padding: 0 3% !important;
    gap: 40px !important;
    grid-template-areas: "recent popular" "prof prof" "search search" !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
}
.hatena-module-recent-entries { grid-area: recent !important; }
.hatena-module-entries-access-ranking { grid-area: popular !important; }
.hatena-module-profile { grid-area: prof !important; }
.hatena-module-search-box { grid-area: search !important; }

.hatena-module {
    width: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-top: 4px solid #1a252f !important;
    border-radius: 2px !important;
    padding: 30px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.hatena-module-title {
    font-family: "Zen Kaku Gothic New", sans-serif !important;
    font-weight: 700;
    font-size: 1.05rem !important;
    color: #1a252f !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    letter-spacing: 0.15em !important;
}
.hatena-urllist {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
    padding: 0 !important;
    list-style: none !important;
}
.urllist-item-inner { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.urllist-image { width: 100% !important; height: 140px !important; object-fit: cover !important; border-radius: 4px !important; }
.urllist-title-link { font-size: 0.95rem !important; line-height: 1.6 !important; font-weight: 700 !important; color: #1a252f !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

.hatena-module-profile { padding: 20px 35px !important; }
.hatena-module-profile .hatena-module-title { text-align: left !important; font-size: 0.75rem !important; opacity: 0.7; margin-bottom: 12px !important; }
.hatena-module-profile .hatena-module-body { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 25px !important; }
.hatena-module-profile .profile-icon { width: 65px !important; height: 65px !important; border-radius: 50% !important; flex-shrink: 0 !important; border: 1px solid #ddd !important; }
.profile-description { flex: 1 !important; font-size: 0.82rem !important; line-height: 1.7 !important; color: #333 !important; }
.profile-about a { display: inline-block !important; padding: 4px 12px !important; color: #0056b3 !important; border: 1.5px solid #0056b3 !important; font-family: monospace !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-decoration: none !important; }
.profile-about a::before { content: 'INDEX_REF. ' ; opacity: 0.5; }
.profile-about a:hover { background: #0056b3 !important; color: #fff !important; }

.hatena-module-search-box { padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; max-width: 500px !important; margin: 10px auto 0 !important; }
.hatena-module-search-box .hatena-module-title { display: none !important; }
.hatena-module-search-box::before { content: 'DATABASE_QUERY_POINT // SEQ.02_INDEX' !important; display: block !important; font-family: monospace !important; font-size: 9px !important; color: #0056b3 !important; letter-spacing: 0.25em !important; margin-bottom: 10px !important; text-align: center !important; opacity: 0.7; }
.hatena-module-search-box .search-form { border: 1px solid #1a252f !important; border-bottom: 3px solid #1a252f !important; background: #fff !important; padding: 10px 18px !important; display: flex !important; }
.search-module-input { width: 100% !important; border: none !important; font-family: monospace !important; font-size: 0.95rem !important; color: #1a252f !important; outline: none !important; }
.search-module-input::-webkit-input-placeholder { color: #eee !important; font-size: 0.75rem !important; letter-spacing: 0.4em !important; font-family: monospace !important; text-transform: uppercase !important; }
.search-module-button { filter: grayscale(1) opacity(0.4) !important; cursor: pointer !important; }

/* ==========================================================================
   7. 装飾・演出（ルーラー、ラベル：トップと個別で役割を分離）
   ========================================================================== */
body::before, body::after { display: block !important; content: '' !important; position: fixed !important; z-index: 0 !important; pointer-events: none !important; }

/* 垂直目盛り線：デフォルト */
body::before { 
    top: 0 !important; bottom: 0 !important; 
    left: calc(50% - 580px) !important; 
    border-left: 1px dashed #bbb !important; width: 0 !important; background: none !important; 
}

/* 青い点（測量起点）：デフォルト */
body::after { 
    top: 80px !important; width: 7px !important; height: 7px !important; 
    background: #0056b3 !important; border-radius: 50% !important; 
    left: calc(50% - 583px) !important; 
}

/* --------------------------------------------------
   トップページおよびアーカイブページでの配置最適化
   -------------------------------------------------- */

/* 1. 目盛り線を左端 30px に固定 */
body.page-index::before, body.page-archive::before { left: 30px !important; opacity: 0.4 !important; }
body.page-index::after, body.page-archive::after { left: 27px !important; top: 55px !important; }

/* 2. L字ルーラーを垂直線（30px）に合わせる */
body.page-index #content-inner::before, body.page-archive #content-inner::before {
    left: 30px !important; /* 2%から30pxへ固定 */
    top: -15px !important;
}

/* 3. テキストラベルをL字の右側（100px）へ逃がして余白を作る */
#content { position: relative !important; }
body.page-index #content::before, body.page-archive #content::before {
    content: 'REF. LAKE-INDEX // GEOGRAPHICAL_FILTER_LAYER' !important;
    position: absolute !important;
    top: 15px !important; 
    left: 100px !important; /* 45pxから100pxへ広げ、L字との干渉を解消 */
    font-size: 9px !important; font-family: monospace; color: #aaa; letter-spacing: 0.2em; z-index: 10;
}

/* 個別記事ページのラベル位置（維持） */
.page-entry #content::before {
    content: 'REF. ENTRY_METADATA // GEOG-ANALYSIS 3.0' !important;
    position: absolute; top: 10px; left: 4%; font-size: 10px; font-family: monospace; color: #bbb; letter-spacing: 0.2em; z-index: 10;
}

/* L字ルーラーの共通定義 */
#content-inner::before, #content-inner::after {
    content: '' !important; position: absolute !important; width: 60px !important; height: 60px !important;
    border-color: rgba(0, 86, 179, 0.2) !important; border-style: solid !important; pointer-events: none !important; z-index: 5 !important;
}
#content-inner::before { top: -15px; left: 2%; border-width: 2px 0 0 2px !important; }
#content-inner::after { bottom: -40px; right: 2%; border-width: 0 2px 2px 0 !important; }
/* ==========================================================================
   8. 構造的ページャー：Architectural Pager
   ========================================================================== */
.pager a {
    background: #1a252f !important; color: #ffffff !important; border: none !important; box-shadow: none !important; text-decoration: none !important; box-sizing: border-box !important; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important; display: flex !important;
}

/* 一覧ページ（トップ・カテゴリ）： Read More に一本化 */
.page-index .pager, .page-archive .pager {
    display: flex !important; justify-content: flex-end !important; align-items: center !important; margin: 100px auto !important; padding: 0 5% !important; max-width: 1200px !important; height: 120px !important; position: relative !important;
}
/* アーカイブでの「前のページ」を非表示にしてPC/SPの挙動を統一 */
.page-index .pager-prev, .page-archive .pager-prev { display: none !important; }

.page-index .pager::before, .page-archive .pager::before {
    content: '01-A // GENERAL_ARCHIVE_ACCESS // SEQUENCE_COORD' !important;
    position: absolute; top: 50%; left: 5%; width: 90%; height: 1px;
    background: linear-gradient(90deg, #0056b3, rgba(0, 86, 179, 0.2), transparent);
    font-family: monospace; font-size: 10px; color: #0056b3; letter-spacing: 0.3em; line-height: 24px;
}
.page-index .pager-next, .page-archive .pager-next {
    width: 60% !important; max-width: 600px !important; height: 60px !important; z-index: 5; display: block !important;
}
.page-index .pager-next a, .page-archive .pager-next a {
    align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 100% !important; padding: 0 40px !important; font-family: 'Zen Kaku Gothic New', sans-serif !important; font-weight: 900 !important; letter-spacing: 0.2em !important;
    clip-path: polygon(0% 0%, 95% 0%, 100% 30%, 100% 100%, 5% 100%, 0% 70%) !important; box-shadow: 20px 20px 0 rgba(0, 86, 179, 0.1) !important;
}
.page-index .pager-next a::before, .page-archive .pager-next a::before { content: 'READ MORE / NEXT ARCHIVE' !important; font-size: 0.65rem; font-family: monospace; opacity: 0.6; }
.page-index .pager-next a::after, .page-archive .pager-next a::after { content: '→' !important; font-size: 1.4rem; }

/* 個別記事：地勢移動 */
.page-entry .pager { display: flex !important; justify-content: space-between !important; align-items: stretch !important; gap: 20px !important; margin: 100px auto !important; max-width: 1100px !important; padding: 0 5% !important; position: relative !important; }
.page-entry .pager::before { content: '01-B // DETAILED_TRANSIT_MAP // REF.LAKE-SEQ' !important; position: absolute; top: -40px; left: 5%; font-family: monospace; font-size: 10px; color: #0056b3; letter-spacing: 0.2em; }
.page-entry .pager-prev, .page-entry .pager-next { flex: 1 1 calc(50% - 10px) !important; min-width: 280px !important; display: flex !important; }
.page-entry .pager-prev a, .page-entry .pager-next a { flex-direction: column !important; justify-content: center !important; padding: 20px 30px !important; min-height: 100px !important; width: 100% !important; font-size: 0.9rem !important; line-height: 1.5 !important; font-weight: 700 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.page-entry .pager-prev a::before { content: 'REF. 01-B1 // NORTHBOUND'; display: block; font-family: monospace; font-size: 0.6rem; color: #4da3ff; margin-bottom: 8px; letter-spacing: 0.1em; }
.page-entry .pager-next a::before { content: 'REF. 01-B2 // SOUTHBOUND'; display: block; font-family: monospace; font-size: 0.6rem; color: #4da3ff; margin-bottom: 8px; letter-spacing: 0.1em; text-align: right; }
.page-entry .pager-prev a { clip-path: polygon(0 0, 100% 0, 100% 80%, 92% 100%, 0 100%, 0 20%) !important; box-shadow: -12px 12px 0 rgba(0, 86, 179, 0.1) !important; }
.page-entry .pager-next a { text-align: right; clip-path: polygon(0 0, 92% 0, 100% 20%, 100% 100%, 8% 100%, 0 80%) !important; box-shadow: 12px 12px 0 rgba(0, 86, 179, 0.1) !important; }
.pager a:hover { background: #0056b3 !important; transform: translate(-4px, -4px) !important; box-shadow: 25px 25px 0 rgba(0, 86, 179, 0.2) !important; }
/* ==========================================================================
   8.5 記事内目次：Architectural Spec Sheet (最終完成版 v9.4)
   ========================================================================== */
.custom-toc {
    margin: 4em 0 !important;
    padding: 40px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: 4px solid #1a252f !important;
    position: relative !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.03) !important;
    counter-reset: toc-counter;
    overflow: hidden;
}

.custom-toc::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#d1d1d1 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    opacity: 0.3; pointer-events: none;
}

.custom-toc::after {
    content: 'SPEC_ID: TOC-001 / SHIGA_HOUSING_DOC';
    position: absolute; top: 12px; right: 20px;
    font-family: monospace; font-size: 9px; color: #bbb; letter-spacing: 0.1em;
}

.toc-main-header {
    display: block;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: #1a252f;
    margin-bottom: 35px;
    padding-left: 15px;
    border-left: 5px solid #0056b3;
    line-height: 1.2;
}

.toc-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0 10px !important;
    position: relative;
    z-index: 1;
    border-left: 1px solid #eee !important;
    padding-left: 25px !important;
}

.toc-content li { margin-bottom: 1em !important; line-height: 1.7 !important; }
.toc-section-title { display: block; font-size: 1.1rem; font-weight: 700; color: #1a252f; margin-bottom: 12px; }

.toc-content > ul > li { counter-increment: toc-counter; margin-bottom: 2.2em !important; }
.toc-section-title::before {
    content: counter(toc-counter, decimal-leading-zero) ". ";
    color: #0056b3; font-family: monospace; margin-right: 12px; font-size: 1.1rem;
}

.toc-content a { color: #333 !important; text-decoration: none !important; transition: all 0.2s; font-weight: 500; }
.toc-content a:hover { color: #0056b3 !important; border-bottom: 1px solid #0056b3; }
.toc-tag { font-family: monospace; font-size: 0.7rem !important; color: #888 !important; background: #f4f4f4; padding: 2px 6px; margin-left: 10px; border-radius: 2px; }

/* --------------------------------------------------
   折りたたみ・展開制御 (v9.4 視線誘導強化)
   -------------------------------------------------- */
#toc-trigger { display: none; }

.custom-toc .toc-content {
    max-height: 3000px;
    transition: max-height 1s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
}

.custom-toc.truncated .toc-content {
    max-height: 420px;
    overflow: hidden;
}

/* 展開時の動き */
#toc-trigger:checked ~ .toc-content {
    max-height: 3000px !important;
    animation: mechanical-slide 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes mechanical-slide {
    0% { transform: translateY(-20px); opacity: 0.8; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 霧消グラデーション：ロック状態を暗示するラベル */
.custom-toc.truncated .toc-content::after {
    content: '[ ACCESS_LOCKED: TAP_BUTTON_BELOW ]' !important;
    position: absolute; bottom: 0; left: 0; width: 100%; height: 180px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9) 70%, #ffffff 100%) !important;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 10px;
    font-family: monospace; font-size: 9px; color: #bbb;
    letter-spacing: 0.1em; font-weight: bold;
    pointer-events: none;
    z-index: 10 !important;
}
#toc-trigger:checked ~ .toc-content::after { display: none !important; }

/* 展開ボタン：アテンション（パルス）追加 */
.toc-expander {
    display: none; cursor: pointer; margin: 20px auto 0; /* 30pxから20pxへ詰め、ユニット感を出す */
    background: #1a252f; color: #ffffff;
    font-family: monospace; font-size: 11px; font-weight: 700;
    padding: 12px 40px; border-radius: 2px; letter-spacing: 0.15em;
    transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    text-align: center; width: fit-content;
    position: relative; z-index: 5;
    border: 1px solid #1a252f;
    /* 常に「動くパーツ」であることを示すアニメーション */
    animation: button-pulse 2s infinite ease-in-out;
}

@keyframes button-pulse {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
    50% { transform: scale(1.02); box-shadow: 0 4px 25px rgba(0, 86, 179, 0.4); border-color: #0056b3; }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
}

.custom-toc.truncated .toc-expander { display: block; }
.toc-expander:hover { background: #0056b3; border-color: #0056b3; animation: none; }

.toc-expander::before { content: '[+] OPEN_FULL_CONTENTS'; }
#toc-trigger:checked ~ .toc-expander::before { content: '[-] CLOSE_DATA_VIEW'; }
#toc-trigger:checked ~ .toc-expander { animation: none; opacity: 0.6; }
/* ==========================================================================
   9. スマホ対応（統合・整理済：レイアウト・重なり防止・装飾最適化）
   ========================================================================== */
@media (max-width: 767px) {
    /* --- 全体レイアウト --- */
    body::before, body::after { display: none !important; } /* 背景の固定ルーラーを非表示 */
    #blog-title-inner { padding: 50px 15px 30px !important; } /* 上下の余白を圧縮 */
    #title a { font-size: 1.8rem !important; margin-bottom: 8px !important; } /* 文字を適正化 */
    /* --- 9. スマホ対応：サブタイトル内のSEQラベル重なり修正 --- */
    #blog-description { 
        padding: 8px 35px 8px 15px !important; /* 右側の余白(35px)を広げ、ラベル用の「安全圏」を確保 */
        font-size: 0.75rem !important;
        position: relative !important;
    }

    #blog-description::after {
        content: 'SEQ.01' !important;
        position: absolute !important;
        top: 4px !important; 
        right: 8px !important;
        font-size: 7px !important; /* ラベルをさらに小さくし、文字との衝突を物理的に避ける */
        color: rgba(255, 255, 255, 0.4) !important; /* 透明度を上げ、背景の「刻印」としての質感を出す */
        letter-spacing: 0.1em !important;
        pointer-events: none !important; /* テキスト選択の邪魔をしない */
    }
    #title a { font-size: 2.2rem !important; margin-bottom: 10px !important; }

    /* --- 装飾テキスト調整（トップ・個別共通） --- */
    /* 1. 個別記事：表示位置の最適化（引き上げ） */
    .page-entry #content-inner { padding-top: 35px !important; }
    .page-entry .entry-header { padding-top: 30px !important; }
    
    /* 2. 個別記事：装飾テキスト */
    .page-entry #content::before {
        top: 15px !important;
        left: 5% !important;
        font-size: 8px !important;
        letter-spacing: 0.1em !important;
        white-space: nowrap !important;
        content: 'REF. ENTRY_METADATA // GEOG-ANALYSIS 3.0' !important;
    }

    /* 3. トップページ・アーカイブ：装飾テキスト（重なり修正版） */
    .page-index #content::before, .page-archive #content::before {
        top: 20px !important;
        left: 5% !important;
        font-size: 8px !important;        /* 個別記事と同じサイズ感 */
        letter-spacing: 0.1em !important; /* 個別記事と同じ字間 */
        white-space: nowrap !important;   /* 折り返し禁止 */
        /* コンテンツ内容はPC版を継承 */
    }

    #content-inner::before {
        top: 5px !important;
        left: 3% !important;
        width: 40px !important;
        height: 40px !important;
        border-width: 1px 0 0 1px !important; /* L字定規を細くして圧迫感を軽減 */
    }

    /* 日付・最終更新日の整理（折り返し対応） */
    .date {
        margin-bottom: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }
    .date-last-updated svg { width: 14px !important; height: 14px !important; vertical-align: middle; }

/* --- 9.5 スマホナビ：多角形アーキテクチャ実装 --- */
    #top-editarea { padding: 5px 0 !important; margin-bottom: 10px !important; min-height: auto !important; }

    .custom-nav { 
        width: 100% !important; 
        background: transparent !important; /* 本体を透明にして、子要素（サブメニュー）の隠れを防止 */
        position: relative !important;
        overflow: visible !important; /* プルダウンのはみ出しを許可 */
        top: 0 !important; 
    }

    /* 背景レイヤーのみを多角形にする（干渉防止ロジック） */
    .custom-nav::before { 
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: 0; left: 0; width: 100%; height: 100%;
        background: #1a252f !important; /* 鉄紺 */
        z-index: -1 !important; /* 文字より後ろ、背景として配置 */
        /* 幾何学的なカッティング：建築図面のインデックス風 */
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    }

    .custom-nav a { padding: 10px 12px !important; font-size: 0.7rem !important; }

    /* INFOをタップした時のサブメニュー挙動の最適化 */
    .custom-nav li.has-sub:hover .sub-menu {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 140px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        background: #1a252f !important;
        border-top: 2px solid #EEE829 !important; /* 黄色いアクセント線を維持 */
        box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
        z-index: 1000 !important;
    }

    /* --- パンくずリスト --- */
    .breadcrumb { margin: 15px 4% !important; }
    .breadcrumb-inner { font-size: 0.6rem !important; flex-wrap: wrap !important; }

    /* --- アーカイブ見出し（リッチ装飾） --- */
    .archive-header-category { padding: 80px 10px 50px !important; }
    .archive-header-category::before, .archive-header-category::after { display: none !important; }
    .archive-heading { 
        font-size: 1.8rem !important; 
        padding: 20px 40px 25px 30px !important; 
        width: 85% !important;
        box-shadow: 12px 12px 0 rgba(0, 86, 179, 0.1) !important;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%) !important;
    }
    .archive-heading::before { width: 8px !important; }
    .archive-heading::after { font-size: 8px !important; bottom: 6px !important; right: 25px !important; }

    /* --- 記事一覧グリッド（1カラム化） --- */
    .page-index #main, .page-archive #main { height: auto !important; }
    
    /* 文字被り防止のため上部余白を拡張 */
    .page-index .archive-entries, .page-archive .archive-entries { 
        display: flex !important; flex-direction: column !important; 
        padding: 65px 4% 40px !important; /* 上部65px確保 */
        gap: 30px !important; height: auto !important;
    }
    
    .archive-entry { width: 100% !important; height: auto !important; margin: 0 !important; position: relative !important; top: auto !important; left: auto !important; }
    .archive-entry-header { padding: 30px 20px 0 20px !important; }
    .archive-entry .entry-title { font-size: 1.15rem !important; }
    .archive-entry-body { padding: 0 20px 30px 20px !important; }

    /* --- ページャー（距離短縮調整済） --- */
    .page-index .pager, .page-archive .pager { 
        height: auto !important; justify-content: center !important; 
        margin: 30px auto !important; /* 40px→30pxに短縮 */
        padding: 0 4% !important; 
    }
    .page-index .pager-prev, .page-archive .pager-prev { display: none !important; visibility: hidden !important; }
    .page-index .pager-next, .page-archive .pager-next { width: 100% !important; max-width: 100% !important; }
    .page-index .pager::before, .page-archive .pager::before { display: none; }
    
    .page-entry .pager { 
        flex-direction: column !important; gap: 30px !important; 
        margin: 30px auto !important; /* 40px→30pxに短縮 */
    }
    .page-entry .pager-prev, .page-entry .pager-next { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }

    /* --- サイドバー（大判インデックス：距離短縮調整済） --- */
    #box2 { 
        width: 100% !important; 
        margin: 30px 0 60px !important; /* 上部100px→30pxに大幅短縮 */
        padding: 0 !important; 
        position: relative !important;
        border-top: 1px solid rgba(26, 37, 47, 0.1) !important;
    }
    
    #box2::before { top: -11px !important; }

    #box2-inner { 
        display: grid !important;
        grid-template-areas: "popular" "recent" "prof" "search" !important; 
        grid-template-columns: 100% !important; 
        width: 100% !important;
        margin: 0 auto !important;
        padding: 50px 0 !important; 
        gap: 30px !important; 
        box-sizing: border-box !important;
    }

    .hatena-module { 
        width: 94% !important; 
        margin: 0 auto !important; 
        padding: 30px 25px !important; 
        box-sizing: border-box !important;
    }

    .hatena-urllist { grid-template-columns: 1fr 1fr !important; gap: 15px !important; }
    .hatena-module-profile .hatena-module-body { flex-direction: column !important; text-align: left !important; }
    
    /* --- トップページのタイルをタップ時の浮き上がり（ズレ）防止 --- */
    .archive-entry:hover {
        transform: none !important; /* 上への移動をキャンセル */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; /* 影の変化も最小限に抑制 */
    }
    
    /* ---  目次 --- */
    .custom-toc { padding: 30px 20px !important; margin: 2.5em 0 !important; }
    .toc-main-header { font-size: 1.15rem !important; margin-bottom: 25px !important; }
    .toc-content ul { margin-left: 0 !important; padding-left: 15px !important; }

    /* 展開時の高さ制限解除 */
    .custom-toc.truncated #toc-trigger:checked ~ .toc-content {
    max-height: 5000px !important;
    }

    /* --- 9.3 目次：スマホ最適化（v9.4 誘導強化版） --- */
.custom-toc { padding: 30px 20px !important; margin: 2.5em 0 !important; }
.toc-main-header { font-size: 1.15rem !important; margin-bottom: 25px !important; }
.toc-content ul { margin-left: 0 !important; padding-left: 15px !important; }

.custom-toc.truncated #toc-trigger:checked ~ .toc-content {
    max-height: 5000px !important;
}

/* スマホ版霧消効果：ラベルを変更 */
.custom-toc.truncated .toc-content::after {
    content: '▼ TAP_BLUE_BUTTON_TO_EXPAND' !important;
    height: 220px !important;
    background: linear-gradient(
        to bottom, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.7) 30%, 
        rgba(255,255,255,0.95) 70%, 
        #ffffff 100%
    ) !important;
    z-index: 20 !important;
    padding-bottom: 5px !important; /* ボタンに寄せる */
    color: #0056b3 !important;
    font-size: 10px !important;
}

/* スマホ用ボタン：青色で強調し、パルスを維持 */
.toc-expander { 
    width: 94% !important; 
    padding: 18px 0 !important;
    font-size: 12px !important;
    background: #0056b3 !important; 
    border: none !important;
    margin-top: 10px !important; /* 霧との距離をさらに縮める */
}

#toc-trigger:checked ~ .toc-expander {
    background: #eee !important;
    color: #888 !important;
    width: 94% !important;
}
    /* --- 中盤リンクボックス Nautical Legend (既存の .related-box を自動判別して一括変換) --- */
    .entry-content .related-box {
        padding: 25px 20px !important;
        margin: 2.5em 0 !important;
    }
    .entry-content .related-box p:first-of-type:not(:only-of-type) {
        font-size: 1.05rem !important;
    }
    /* --- 9.6 Google Maps スマホ版バランス最適化 --- */
    .entry-content iframe,
    .hatena-iframe-embed {
        height: auto !important; /* 固定高さを解除 */
        aspect-ratio: 4 / 3 !important; /* スマホで最も美しいとされる4:3の比率に固定 */
        margin: 2em 0 !important; /* 前後の余白をスマホ用に微調整 */
    }

    /* マップ直下のキャプション（AREA INFO）もスマホ用に最適化 */
    .entry-content p:has(iframe) + p {
        margin-top: -2em !important; /* マップのmargin変更に合わせて調整 */
        padding: 10px 15px !important;
        font-size: 0.75rem !important;
    }
    
    /* --- 9.7 フッタ：スマホ最適化（最小記述） --- */
    .spec-grid { grid-template-columns: 1fr !important; } /* 1列に変更 */
    .spec-box { 
        border-right: none !important; 
        border-bottom: 1px solid #1a252f !important; 
    }
    .spec-box:last-child { border-bottom: none !important; }
    .spec-box.link { flex-direction: row !important; gap: 15px; } /* リンクを横並びに */
    
    /* --- 9.8 スマホ個別記事：ヘッダーのスリム化 --- */
.page-entry #blog-title-inner {
    padding: 30px 15px 20px !important; /* 汎用50px/30pxからさらに圧縮 */
}
.page-entry #title a {
    font-size: 1.5rem !important; /* 汎用1.8rem〜2.2remから縮小 */
}
.page-entry #blog-description {
    padding: 6px 25px 6px 12px !important; /* 汎用8pxから縮小 */
    font-size: 0.7rem !important;
}
}


/* ==========================================================================
   10. スペックフッタ
   ========================================================================== */
#site-footer {
    padding: 100px 20px 80px; 
    background-color: #f9f9f9 !important; /* グリッドを隠して「白地」にする */
    border-top: 2px solid #1a252f;      /* 強い境界線で情報の流出を止める */
    clear: both;
    position: relative;
    z-index: 10;
}

/* フッターの「外側」に、少しだけ影を落として「紙が重なっている感」を出す */
#site-footer::before {
    content: '';
    position: absolute;
    top: -10px; left: 0; width: 100%; height: 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.02), transparent);
    pointer-events: none;
}

.spec-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    border: 1px solid #1a252f;
    background-color: #ffffff; /* ボックス内も白 */
}
.spec-box {
    padding: 20px; border-right: 1px solid #1a252f;
    display: flex; flex-direction: column; justify-content: center;
}
.spec-box:last-child { border-right: none; }

.spec-id { font-family: monospace; font-size: 12px; font-weight: bold; color: #0056b3; }
.spec-title { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 1rem; color: #1a252f; line-height: 1.2; }

.spec-box.link a {
    color: #1a252f !important; font-family: monospace; font-size: 0.8rem; font-weight: bold;
    text-decoration: none; border-bottom: 1px solid #eee; margin-bottom: 5px;
}
.spec-box.note { font-family: monospace; font-size: 8px; color: #999; line-height: 1.6; }

/* リンクの装飾を完全に無効化 */
.invisible-link {
    color: inherit;          /* 親要素の文字色を引き継ぐ */
    text-decoration: none;   /* 下線を消す */
    cursor: default;         /* カーソルを指（ポインタ）にしたくない場合はdefault、リンクだと分からせたい場合はpointer */
}

/* 万が一のホバー時の装飾も防止 */
.invisible-link:hover {
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   11.マップ＋キャプションを1ブロックとして扱い、広告の割り込みを抑制
   ========================================================================== */
.entry-content p:has(iframe),
.entry-content p:has(iframe) + p {
    contain: layout paint;
}