/* <system section="theme" selected="14945776032049560458"> */
@charset "UTF-8";
/*
  Theme: No.26
  Author: takchaso
  Responsive: yes
  Description: No.26 (www.takchaso.com) 専用自作テーマ。公式Boilerplate(MIT)ベース。
*/
/* ===== Boilerplate (MIT) ===== */
/*! normalize.css v8.0.1 | 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 iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  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
   ========================================================================== */
/**
 * 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
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 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 */
}
/**
 * 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 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
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 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;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
 * 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 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
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 in Chrome and Safari on macOS.
 */
[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 Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * 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: #454545;
  background-color: #fff;
  line-height: 1.6;
}
a {
  color: #1487bd;
}
a:hover {
  color: #0f668f;
}
a.keyword {
  text-decoration: none;
  border-bottom: 1px dotted #ddd;
  color: #454545;
}
h1, h2, h3, h4, h5, h6 {
  color: #333;
  line-height: 1.3;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #333;
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: #0f668f;
}
/* 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: 1080px;
  }
}
/* 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: 700px;
  }
}
@media (min-width: 768px) {
  #box2 {
    width: 200px;
  }
}
@media (min-width: 992px) {
  #box2 {
    width: 340px;
  }
}
/* 下記のスタイルを適用するとテーマを1カラムレイアウトにできます。
利用するにはコメントアウトを解除してください。
（2カラムレイアウトの場合はコメントアウト全体が不要です）

#content-inner {
    flex-direction: column;
    align-items: center;
}
#wrapper {
    @media (min-width: 768px) {
        width: 100%;
    }
    @media (min-width: 992px) {
        max-width: 720px;
    }
}
#box2 {
    width: 100%;
    @media (min-width: 768px) {
        width: 100%;
    }
    @media (min-width: 992px) {
        width: 100%;
    }
}

#box2-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    @media (min-width: 768px) {
        margin-left: -20px;
        flex-direction: row;
    }
    @media (min-width: 992px) {
        margin-left: -30px;
    }
}
.hatena-module {
    width: 100%;
    @media (min-width: 768px) {
        width: 33.3333%;
    }
    @media (min-width: 992px) {
        padding-left: 30px;
    }
}

---- END 1カラム */
/* ヘッダ */
#title {
  margin: 0;
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  #title {
    font-size: 1.7rem;
  }
}
#title a {
  color: #454545;
}
#blog-description {
  font-weight: normal;
  font-size: 0.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: 0.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: 0.5em;
  font-size: 0.9rem;
}
.date a {
  color: #999;
  text-decoration: none;
}
.date a:hover {
  text-decoration: underline;
}
.entry-title {
  margin: 0 0 0.3em;
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  .entry-title {
    font-size: 1.6rem;
  }
}
.categories {
  margin: 0.5em 0;
  font-size: 0.9rem;
}
.categories a {
  margin-right: 0.5em;
}
/* 「編集する」ボタン */
.entry-header-menu {
  position: absolute;
  top: 0;
  right: 0;
}
/* 記事内の書式 */
.entry-content img,
.entry-content video {
  max-width: 100%;
  height: auto;
}
.entry-content iframe,
.entry-content embed {
  max-width: 100%;
}
.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: 0.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: 0.8rem;
}
@media (min-width: 992px) {
  .entry-content table {
    font-size: 0.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-of-type {
  margin-top: 0;
}
.entry-content blockquote p:last-of-type {
  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: 0.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: #999;
  font-size: 0.9rem;
}
.entry-footer-section a {
  color: #999;
}
/* コメント */
.comment-box {
  margin: 1em 0;
}
.comment-box .comment {
  list-style: none;
  margin: 0 0 15px 0;
  padding: 0;
  line-height: 1.7;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .comment-box .comment {
    font-size: 0.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 0.4em 0;
  font-weight: bold;
}
.comment-content {
  margin: 0 0 0.4em 0;
  word-wrap: break-word;
  color: #454545;
  font-size: 0.85rem;
}
.comment-content p {
  margin: 0 0 0.6em 0;
}
.comment-metadata {
  color: #999;
  margin: 0;
  font-size: 0.8rem;
}
.comment-metadata a {
  color: #999;
}
.leave-comment-title {
  padding: 0.6em 1em;
  font-size: 0.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: 0.85rem;
}
@media (min-width: 768px) {
  .hatena-module {
    font-size: 0.9rem;
  }
}
.hatena-module-title {
  margin-bottom: 0.6em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #ddd;
  font-size: 1rem;
  font-weight: bold;
}
.hatena-module-title a {
  color: #454545;
  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: 0.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: 0.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: 0.7rem;
  padding: 0.1em 0.3em;
}
.hatena-urllist .urllist-date-link a {
  color: #999;
}
.hatena-urllist .urllist-entry-body {
  margin-top: 0.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: #454545;
  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: 0.5;
  cursor: pointer;
}
.hatena-module-search-box .search-module-button:hover {
  opacity: 0.85;
}
/* About ページ */
.page-about .entry-content dt {
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0.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: 0.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: 0.85rem;
}
@media (min-width: 768px) {
  .page-archive .entry-description {
    font-size: 0.9rem;
  }
}
.page-archive .social-buttons {
  display: block;
  margin-top: 0.3em;
}
/* footer */
#footer {
  margin-top: 2em;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
}
#footer a {
  color: #999;
}
#footer p {
  margin: 0.5em auto;
}


/* ===== No.26 design layer ===== */
/* レスポンシブモードON → @media 使用可 (SPブレークポイント目安: 680px) */

/* ===== tokens & base ===== */
body{
  --ink:#141414;
  --sub:#9b9b9b;
  --hair:#f0f0f0;
  --accent:#6f7d72;
  background:#ffffff;
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
#container{
  background:#ffffff;
  max-width:1080px;
}
a{
  color:inherit;
}
img{
  max-width:100%;
}

/* ===== header ===== */
header#blog-title{
  margin:0;
  text-align:left;
  border-bottom:1px solid var(--hair);
  padding:clamp(24px,5vw,40px) 0 clamp(16px,3vw,24px);
}
#blog-title-inner{
  max-width:1080px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,40px);
}
/* #blog-title-content というIDはフッター自作要素(#footer #blog-title-content)にも
   重複して存在するため、ヘッダー側のマストヘッドflexルールがフッターへ波及しないよう
   header#blog-title 配下に限定する */
header#blog-title #blog-title-content{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:16px 32px;
}
.brand-block{
  flex:1 1 160px;
  min-width:0;
}
header#blog-title #blog-title-content h1#title{
  font-weight:700;
  font-size:clamp(20px,3vw,26px);
  letter-spacing:0.2em;
  margin:0;
}
header#blog-title #blog-title-content h1#title a{
  color:var(--ink);
}
#blog-description{
  margin:10px 0 0;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--sub);
  font-weight:400;
}

/* グローバルナビ(#n-menu): moveNav()で#blog-title-content内に移設済み前提 */
#n-menu{
  flex:0 1 auto;
  min-width:0;
  margin-left:auto;
  border-left:1px solid var(--hair);
  padding-left:clamp(16px,3vw,28px);
  padding-top:4px;
  background:none;
}
#n-menu .btn-content{
  display:none !important;
}
#n-menu .menu-inner{
  display:block;
  background:none;
}
#n-menu ul.menu-content{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px 20px;
  list-style:none;
  margin:0;
  padding:0;
  max-width:560px;
}
#n-menu li{
  flex:none;
  float:none;
  margin:0;
  padding:0;
  position:static;
  background:none;
}
#n-menu li a{
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--ink);
  white-space:nowrap;
  display:block;
  padding:2px 0;
  text-decoration:none;
  background:none;
}
#n-menu li a:hover{
  color:var(--accent);
}
#n-menu li ul{
  display:none !important;
}

#top-editarea{
  margin:0;
}

@media (max-width:680px){
  #n-menu{
    padding-left:12px;
  }
  #n-menu ul.menu-content{
    gap:8px 12px;
  }
}

/* ===== 1カラムレイアウト ===== */
#content-inner{
  display:flex;
  flex-direction:column;
}
#wrapper{
  width:100% !important;
  float:none;
}
#box2{
  width:100% !important;
  float:none;
}
#main{
  width:auto;
  float:none;
}

/* ===== breadcrumb ===== */
.breadcrumb,
.breadcrumb-inner{
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--sub);
}
.breadcrumb a:hover{
  color:var(--ink);
}

/* ===== 一覧(トップ/純粋アーカイブ共通): archive list -> photo grid =====
   page-indexはpage-archiveも併せ持つが、明示のため両方書く */
body.page-index .archive-entries,
body.page-archive .archive-entries{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px 28px;
  max-width:1080px;
  margin:0 auto;
  padding:clamp(40px,6vw,64px) clamp(16px,4vw,40px) 0;
  list-style:none;
}
body.page-index .archive-entries::before,
body.page-index .archive-entries::after,
body.page-archive .archive-entries::before,
body.page-archive .archive-entries::after{
  content:none !important;
}

body.page-index section.archive-entry,
body.page-archive section.archive-entry{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:none;
  padding:0;
  margin:0;
}

/* サムネを先頭に、4:5カバー */
body.page-index section.archive-entry a.entry-thumb-link,
body.page-archive section.archive-entry a.entry-thumb-link{
  order:1;
  display:block;
  width:100%;
}
body.page-index section.archive-entry a.entry-thumb-link div.entry-thumb,
body.page-archive section.archive-entry a.entry-thumb-link div.entry-thumb{
  /* 一覧ページはpage-archiveクラスを持ち、Boilerplateの80px固定(width/height)が残るため両方!importantで解除。
     heightが固定だとaspect-ratioは無効になる(テストブログで実証) */
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/5 !important;
  overflow:hidden;
  background:var(--hair);
  background-size:cover !important;
  background-position:center !important;
  transition:opacity .2s ease;
}
body.page-index section.archive-entry a.entry-thumb-link:hover div.entry-thumb,
body.page-archive section.archive-entry a.entry-thumb-link:hover div.entry-thumb{
  opacity:.85;
}

/* ヘッダー(日付+タイトル)をサムネの下に */
body.page-index section.archive-entry div.archive-entry-header,
body.page-archive section.archive-entry div.archive-entry-header{
  order:2;
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
body.page-index section.archive-entry div.date.archive-date,
body.page-archive section.archive-entry div.date.archive-date{
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--sub);
  font-variant-numeric:tabular-nums;
  order:1;
}
body.page-index section.archive-entry div.date.archive-date a,
body.page-archive section.archive-entry div.date.archive-date a{
  color:var(--sub);
}
body.page-index section.archive-entry h1.entry-title,
body.page-archive section.archive-entry h1.entry-title{
  order:2;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  margin:0;
}
body.page-index section.archive-entry h1.entry-title a.entry-title-link,
body.page-archive section.archive-entry h1.entry-title a.entry-title-link{
  color:var(--ink);
}

/* カテゴリ(11px サブ色) をタイトル下に */
body.page-index section.archive-entry div.categories,
body.page-archive section.archive-entry div.categories{
  order:3;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--sub);
  margin-top:2px;
}
body.page-index section.archive-entry div.categories a.archive-category-link,
body.page-archive section.archive-entry div.categories a.archive-category-link{
  color:var(--sub);
}
body.page-index section.archive-entry div.categories a.archive-category-link:hover,
body.page-archive section.archive-entry div.categories a.archive-category-link:hover{
  color:var(--accent);
}

/* 写真に語らせる: 要約・ソーシャルボタン・タグは非表示 */
body.page-index section.archive-entry p.entry-description,
body.page-index section.archive-entry span.social-buttons,
body.page-index section.archive-entry div.archive-entry-tags-wrapper,
body.page-index section.archive-entry div.archive-entry-tags,
body.page-archive section.archive-entry p.entry-description,
body.page-archive section.archive-entry span.social-buttons,
body.page-archive section.archive-entry div.archive-entry-tags-wrapper,
body.page-archive section.archive-entry div.archive-entry-tags{
  display:none !important;
}
/* archive-entry-body はコンテナとしてのみ残し、中の子要素はorderで並べる想定だが
   description/social/tags を消した後は空になるため潰す */
body.page-index section.archive-entry div.archive-entry-body,
body.page-archive section.archive-entry div.archive-entry-body{
  order:4;
  display:contents;
}

/* サムネなし記事(entry-thumb-linkが無い)はプレースホルダなしでタイトルのみ、グリッドを崩さない */
body.page-index section.archive-entry:not(:has(a.entry-thumb-link)) div.archive-entry-header,
body.page-archive section.archive-entry:not(:has(a.entry-thumb-link)) div.archive-entry-header{
  margin-top:0;
}

.pager{
  max-width:1080px;
  margin:clamp(40px,6vw,64px) auto 0;
  padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,72px);
  font-size:11px;
  letter-spacing:0.1em;
}
.pager a:hover{
  color:var(--accent);
}

/* ===== article page ===== */
body.page-entry .entry-inner{
  max-width:700px;
  margin:0 auto;
  padding:clamp(32px,5vw,56px) clamp(16px,4vw,24px) clamp(56px,8vw,96px);
}

body.page-entry header.entry-header{
  margin-bottom:clamp(40px,6vw,56px);
}
body.page-entry header.entry-header div.date.entry-date{
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--sub);
  font-variant-numeric:tabular-nums;
  margin-bottom:14px;
}
body.page-entry header.entry-header h1.entry-title{
  font-size:clamp(22px,3.2vw,28px);
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.5;
  margin:0 0 14px;
}
body.page-entry header.entry-header h1.entry-title a.entry-title-link{
  color:var(--ink);
}

/* カテゴリ・日付は11pxチップ(ヘアライン枠・hover accent) */
body.page-entry div.entry-categories.categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
body.page-entry a.entry-category-link{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--ink);
  border:1px solid var(--hair);
  padding:4px 10px;
}
body.page-entry a.entry-category-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* 本文 */
body.page-entry div.entry-content{
  font-size:15px;
  line-height:1.9;
}
body.page-entry div.entry-content img{
  max-width:100%;
  height:auto;
  display:block;
  margin:clamp(24px,4vw,40px) auto;
}
/* 本文内の実質見出し: h3=大見出し / h4=中見出し / h5=小見出し */
body.page-entry div.entry-content h3{
  font-size:18px;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.6;
  margin:48px 0 16px;
}
body.page-entry div.entry-content h3:first-child{
  margin-top:0;
}
body.page-entry div.entry-content h4{
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  margin:36px 0 12px;
}
body.page-entry div.entry-content h5{
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  margin:28px 0 10px;
}

/* footer / tags */
body.page-entry footer.entry-footer{
  margin-top:clamp(40px,6vw,56px);
}
body.page-entry div.entry-tags-wrapper{
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--sub);
}

/* ネイティブ共有ウィジェット(はてブ/FB/X iframe)は非表示、代わりにno26-shareをJSで生成 */
body.page-entry .entry-header .social-buttons,
body.page-entry .entry-footer > .social-buttons{
  display:none;
}
.no26-share{
  display:flex;
  gap:20px;
  align-items:baseline;
  margin-top:24px;
}
.no26-share-label{
  font-size:11px;
  letter-spacing:0.15em;
  color:var(--ink);
  font-weight:700;
}
.no26-share a{
  font-size:11px;
  color:var(--sub);
  text-decoration:none;
}
.no26-share a:hover{
  color:var(--accent);
}

/* pager (前後記事) */
.pager.pager-permalink{
  max-width:700px;
  margin:clamp(40px,6vw,56px) auto 0;
  font-size:11px;
  letter-spacing:0.1em;
}
.pager.pager-permalink a:hover{
  color:var(--accent);
}

/* ===== related entries -> photo grid =====
   実DOM: li > div.urllist-item-inner > a.urllist-image-link(img.urllist-image)
          + div.urllist-date-link(a) + a.urllist-title-link + div.urllist-entry-body */
.hatena-module-related-entries .hatena-module-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.15em;
  color:var(--ink);
  margin-bottom:20px;
}
.hatena-module-related-entries ul.related-entries{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  gap:28px 20px !important;
  list-style:none;
  margin:0;
  padding:0;
}
.hatena-module-related-entries li.urllist-item{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:none;
}
.hatena-module-related-entries .urllist-item-inner{
  display:block;
}
.hatena-module-related-entries a.urllist-image-link{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--hair);
  margin-bottom:10px;
}
.hatena-module-related-entries img.urllist-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}
.hatena-module-related-entries .urllist-date-link{
  font-size:11px;
  color:var(--sub);
  letter-spacing:0.1em;
  display:block;
  margin-bottom:4px;
}
.hatena-module-related-entries .urllist-date-link a{
  color:var(--sub);
  text-decoration:none;
}
.hatena-module-related-entries a.urllist-title-link{
  font-size:11px;
  letter-spacing:0.04em;
  line-height:1.6;
  color:var(--ink);
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hatena-module-related-entries .urllist-entry-body{
  display:none !important;
}
.hatena-module-related-entries{
  max-width:700px;
  margin:0 auto;
}

/* ===== #box2 -> フッターゾーン化 (全ページ表示・ページ最下部の全幅バンド) ===== */
#box2{
  border-top:1px solid var(--hair);
  margin-top:clamp(56px,8vw,96px);
  padding:clamp(40px,6vw,64px) clamp(16px,4vw,40px) clamp(24px,4vw,40px);
  /* width:100%(1カラム化)+左右paddingでcontent-boxだと右にはみ出すため border-box 必須 */
  box-sizing:border-box;
}
#box2 *{
  box-sizing:border-box;
}
#box2-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  max-width:1080px;
  margin:0 auto;
}
/* #box2-inner が実DOMに無い場合の保険: box2直下がモジュール直列でも3カラム化 */
#box2:not(:has(#box2-inner)){
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
#box2:not(:has(#box2-inner)) > *{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:680px){
  #box2-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  #box2:not(:has(#box2-inner)){
    grid-template-columns:1fr;
    gap:36px;
  }
}

/* 表示する3モジュールのみ・並び順を profile -> archive -> search に固定 */
#box2 .hatena-module-profile{
  order:1;
}
#box2 .hatena-module-archive{
  order:2;
}
#box2 .hatena-module-search-box{
  order:3;
}
/* フッターゾーンはホワイトリスト方式: 表示は profile/archive/search-box の3つのみ。
   それ以外(html/links/category/ranking/recent-entries等、将来追加されるモジュール含む)は非表示。
   category と entries-access-ranking はフッタJSのclone元としてDOMには残る(display:noneでOK) */
#box2 .hatena-module{
  display:none;
}
#box2 .hatena-module-profile,
#box2 .hatena-module-archive,
#box2 .hatena-module-search-box{
  display:block;
}

/* モジュール共通 */
#box2 .hatena-module-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.15em;
  color:var(--ink);
  margin-bottom:12px;
}
#box2 a{
  color:var(--ink);
}
#box2 a:hover{
  color:var(--accent);
}
/* 既存カテゴリ階層化JS出力(親太字/└子)と衝突しないよう、素のリスト整えのみ */
#box2 .hatena-urllist{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  line-height:1.9;
}

/* Profile module: アイコンfloat解除して小さく */
#box2 .hatena-module-profile .profile-icon{
  float:none;
  margin:0 0 12px;
}
#box2 .hatena-module-profile .profile-icon img{
  width:56px !important;
  height:56px !important;
  border-radius:50%;
}
#box2 .hatena-module-profile .id{
  font-size:13px;
  margin-bottom:0.6em;
}
#box2 .hatena-module-profile .profile-description{
  font-size:13px;
  line-height:1.9;
  color:var(--ink);
}
#box2 .hatena-module-profile .profile-description p{
  margin:0;
}
#box2 .hatena-module-profile .hatena-follow-button{
  margin-top:12px;
}

/* Archive module: 年月リストの意匠整理 */
#box2 .hatena-module-archive .hatena-urllist{
  font-size:13px;
}
#box2 .hatena-module-archive .hatena-urllist li{
  padding:4px 0;
}
#box2 .hatena-module-archive .hatena-urllist a{
  color:var(--ink);
  text-decoration:none;
}
#box2 .hatena-module-archive .hatena-urllist a:hover{
  color:var(--accent);
}
/* コアCSSがulをflex横並びにするため縦リストを強制(実ページ検証で確定) */
#box2 .hatena-module-archive .hatena-urllist{
  display:block !important;
  text-align:left;
}
#box2 .hatena-module-archive li.archive-module-year{
  display:block;
  width:100%;
  float:none;
  text-align:left;
  padding:3px 0;
}
#box2 .archive-module-button{
  display:inline-block;
  width:1.2em;
  color:var(--sub);
  cursor:pointer;
  float:none;
  text-align:left;
}
#box2 a.archive-module-year-title{
  display:inline;
  color:var(--ink);
}
#box2 ul.archive-module-months{
  list-style:none;
  margin:2px 0 8px 1.4em;
  padding:0;
  display:block;
  column-count:auto;
  text-align:left;
}
#box2 ul.archive-module-months li{
  display:block;
  float:none;
  text-align:left;
  padding:2px 0;
  margin:0;
  width:auto;
}
#box2 li.archive-module-year-hidden ul.archive-module-months{
  display:none;
}

/* Search module: 白地+ヘアライン枠、角丸0 */
#box2 .hatena-module-search-box .search-form{
  border:1px solid var(--hair);
  border-radius:0;
  background:#ffffff;
}
#box2 .hatena-module-search-box .search-module-input{
  color:var(--ink);
}

/* #footer(© 表記) はフッターゾーンの直後に自然に続く */
#footer{
  margin-top:1em;
}

/* ===== フッター最下部(#footer > #footer-menu: フッタHTML内の自作要素・構造変更不可) =====
   #blog-title-content というIDがヘッダーと重複するため、このブロックのセレクタは
   すべて #footer 配下に限定すること。ヘッダー側の #blog-title-content flexルールは
   header#blog-title 限定に直してあるのでここには波及しない。 */
#footer{
  border-top:1px solid var(--hair);
  padding-top:32px;
  padding-bottom:32px;
  text-align:center;
}
#footer #footer-menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px;
}
#footer #blog-title-content{
  display:inline;
}
#footer #blog-title-content a{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.2em;
  color:var(--ink);
}
#footer .footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px;
}
/* 中のul/liがblock/list-itemのままだと縦積み+discマーカーが残る(本番検証で確認) */
#footer .footer-links ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}
#footer .footer-links li{
  display:block;
  list-style:none;
  margin:0;
  padding:0;
}
#footer .footer-links a{
  font-size:11px;
  color:var(--sub);
  text-decoration:none;
}
#footer .footer-links a:hover{
  color:var(--accent);
}
#footer p.copyright{
  font-size:11px;
  color:var(--sub);
  margin:0;
}

/* ===== ↑ボタン(#page-top-area / #page-top-button) ===== */
#page-top-area{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:100;
}
#page-top-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid #ddd;
  text-decoration:none;
}
#page-top-button i.blogicon-chevron-up{
  /* Font Awesome CDNの .fa-3x(3em) に負けるため !important 必須(本番検証で確認) */
  font-size:16px !important;
  color:var(--ink);
}
#page-top-button:hover{
  border-color:var(--accent);
}
#page-top-button:hover i.blogicon-chevron-up{
  color:var(--accent);
}
@media (max-width:680px){
  #page-top-area{
    right:16px;
    bottom:16px;
  }
}

/* ===== accents / links generated by JS ===== */
.top-more,
.series-cta{
  color:var(--accent);
}
.top-more:hover,
.series-cta:hover{
  color:var(--ink);
}

/* ============================================================
   トップ組み替えセクション (footer-top-sections.html が生成)
   ============================================================ */
.top-sec{
  max-width:1080px;
  margin:0 auto;
  padding:clamp(48px,7vw,72px) clamp(16px,4vw,40px) 0;
}
.top-sec-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  letter-spacing:0.15em;
  color:var(--ink);
  font-weight:700;
  margin-bottom:clamp(20px,3vw,28px);
}
.top-sec-heading .top-more{
  font-size:11px;
  letter-spacing:0.04em;
  font-weight:400;
  white-space:nowrap;
}

/* 新着記事・カテゴリブロック共通の写真グリッド */
.top-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px 28px;
  list-style:none;
  margin:0;
  padding:0;
}
.top-grid > section.archive-entry{
  display:flex;
  flex-direction:column;
}

/* ランキング意匠 (実DOM: li > div.urllist-item-inner > a.urllist-image-link(img) + a.urllist-title-link) */
.top-ranking{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  margin:0 !important;
  padding:0 !important;
  max-width:640px;
  counter-reset:rank;
}
.top-ranking li{
  counter-increment:rank;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--hair);
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box;
}
.top-ranking li:first-child{
  padding-top:0;
}
.top-ranking li::before{
  content:counter(rank);
  flex:none;
  width:1.6em;
  font-size:1.2rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  text-align:center;
}
.top-ranking li:first-child::before{
  color:var(--accent);
}
.top-ranking .urllist-item-inner{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1;
  min-width:0;
  text-align:left;
}
.top-ranking .urllist-item-inner > a{
  flex:none;
}
.top-ranking img{
  width:96px !important;
  height:96px !important;
  object-fit:cover;
  background:var(--hair);
}
.top-ranking .urllist-date-link{
  display:none;
}
.top-ranking a.urllist-title-link{
  flex:1;
  min-width:0;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
  text-decoration:none;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 連載バンド */
.top-sec-series .series-band{
  background:#fafafa;
  padding:clamp(20px,3.5vw,28px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.top-sec-series .series-eyebrow{
  font-size:11px;
  letter-spacing:0.15em;
  color:var(--sub);
  font-weight:700;
  margin:0 0 8px;
}
.top-sec-series .series-title{
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  margin:0;
}
.top-sec-series .series-cta{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  letter-spacing:0.04em;
  border-bottom:1px solid var(--accent);
  padding-bottom:1px;
}
.top-sec-series .series-cta:hover{
  color:var(--sub);
  border-color:var(--sub);
}

/* カテゴリチップ(すべてのカテゴリ) */
.top-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.top-chips a{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  border:1px solid var(--hair);
  padding:8px 14px;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--ink);
}
.top-chips a .top-chip-count{
  color:var(--sub);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.top-chips a:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.top-chips a:hover .top-chip-count{
  color:var(--accent);
}
/* 子カテゴリチップ: 親より控えめに(サブであることを視覚化) */
.top-chips a.top-chip--child{
  color:var(--sub);
}
.top-chips a.top-chip--child:hover{
  color:var(--accent);
}
.top-chips a .top-chip-branch{
  color:var(--sub);
}
.top-chips a:hover .top-chip-branch{
  color:var(--accent);
}

@media (max-width:680px){
  .top-sec{
    padding-top:clamp(36px,8vw,48px);
  }
  .top-grid{
    grid-template-columns:repeat(2,1fr);
    gap:28px 16px;
  }
}

@media (max-width:680px){
  body.page-index .archive-entries,
  body.page-archive .archive-entries{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ===== 一覧ページ(/archive, /archive/category/X)のヘッダ部 ===== */
.archive-header-category,
.archive-heading{
  text-align:left;
  max-width:1080px;
  margin:0 auto;
  padding:clamp(40px,6vw,64px) clamp(16px,4vw,40px) 0;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.15em;
  color:var(--ink);
}
/* 直後に本文グリッドが続くため、グリッド側の上paddingは重複させない */
.archive-header-category + .archive-entries,
.archive-heading + .archive-entries{
  padding-top:clamp(20px,3vw,28px);
}

/* ===== リンク下線の除去 (boilerplate/コアCSSのhover下線対策で通常時も明示) ===== */
body.page-index .archive-category-link,
.top-grid .archive-category-link,
.top-grid a.entry-title-link,
.top-more,
.top-chips a,
.series-cta,
.top-ranking a,
h1.entry-title a.entry-title-link{
  text-decoration:none;
}

/* ===== SP横スクロール安全網 =====
   個別要因(iframe/embed等)を修正した上での最終防波堤。
   clipはスクロールトラップを作らず、position:stickyは本テーマ未使用のため影響なし。 */
html,body{
  overflow-x:clip;
}
@supports not (overflow:clip){
  html,body{
    overflow-x:hidden;
  }
}

/* </system> */