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

/* ===== 本文写真: 縦写真の縮小 & キャプション位置 ===== */
/* 縦写真(photo-center)を75%幅で中央に(縦マージンはテーマ既定を使用) */
body.page-entry div.entry-content img.photo-center{
  width:auto !important;
  max-width:75% !important;
  height:auto !important;
}
/* はてな画像行(横並び)では縮小しない */
.entry-content .images-row img.photo-center{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
/* photo-full は常にフル幅 */
.entry-content .photo-full,
.entry-content .figure-image.photo-full img,
.entry-content figure.photo-full img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* キャプション付き画像(figure)共通:
   図に上下リズムを持たせ、画像の大きな縦マージンを殺す→キャプションが画像直下に来る。
   キャプションは小さめ・控えめ・中央で画像に寄せる。 */
.entry-content .figure-image{
  margin:clamp(24px,4vw,40px) auto;
}
.entry-content .figure-image img{
  margin:0 auto !important;
}
.entry-content .figure-image figcaption{
  margin-top:8px;
  font-size:0.8rem;
  line-height:1.6;
  color:var(--sub);
  text-align:center;
}
/* キャプション付きの縦写真: 図ごと75%に絞り、画像は図いっぱい・キャプションも同じ幅で直下 */
.entry-content .figure-image.has-photo-center{
  max-width:75%;
}
.entry-content .figure-image.has-photo-center img.photo-center{
  width:100% !important;
  max-width:100% !important;
}
@media (max-width:480px){
  .entry-content .figure-image figcaption{margin-top:6px;}
}

/* 本文内の実質見出し: 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;
  }
}

/* ===== 記事ヘッダー刷新(hero) ===== */
body.page-entry header.entry-header.no26-has-hero > div.date.entry-date,
body.page-entry header.entry-header.no26-has-hero > div.entry-categories.categories{
  display:none;
}
/* h1はスクリーンリーダー/SEOのため消さず視覚のみ非表示 (見た目のタイトルはプレート内のp) */
body.page-entry header.entry-header.no26-has-hero > h1.entry-title{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
.no26-dup-eyecatch{
  display:none !important;
}
.no26-hero{
  margin:0 0 8px;
}
.no26-hero-photo img{
  display:block;
  width:100%;
  object-fit:cover;
}
.no26-hero-plate{
  box-sizing:border-box;
  background:var(--accent);
  color:#f4f4f1;
  padding:18px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.no26-hero-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:11px;
  letter-spacing:.08em;
  opacity:.9;
}
.no26-hero-title{
  font-size:clamp(19px,2.8vw,22px);
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.75;
  margin:0;
  color:#fff;
}

/* --- 横 = 案D --- */
.no26-hero--land .no26-hero-photo img{
  aspect-ratio:21/10;
}
.no26-hero--land .no26-hero-plate{
  max-width:68%; /* モック比率。82%だと左右に半端な余りが出る(2026-08-09修正) */
  margin:-72px 0 0 36px;
  position:relative;
}
@media (max-width:680px){
  .no26-hero--land .no26-hero-photo img{
    aspect-ratio:3/2;
  }
  .no26-hero--land .no26-hero-plate{
    margin:-40px 0 0 16px;
    max-width:none;
    width:calc(100% - 16px);
  }
}

/* --- 縦 = 案F --- */
.no26-hero--port{
  display:flex;
  align-items:flex-end;
}
.no26-hero--port .no26-hero-photo{
  width:54%;
  flex:none;
}
.no26-hero--port .no26-hero-photo img{
  aspect-ratio:3/4;
}
.no26-hero--port .no26-hero-plate{
  flex:1;
  margin:0 0 36px -84px;
  position:relative;
}
@media (max-width:680px){
  .no26-hero--port{
    display:block;
  }
  .no26-hero--port .no26-hero-photo{
    width:100%;
  }
  .no26-hero--port .no26-hero-photo img{
    aspect-ratio:4/5;
  }
  .no26-hero--port .no26-hero-plate{
    margin:-56px 0 0 16px;
  }
}



/* ===== アフィリエイトリンクの再スタイル (2026-08-10) =====
   既存記事を1本も書き換えず、クラス名だけを頼りに商品リンクを案C(比較表リスト)の
   見た目に統一する。2026-07-04のテーマ全置換で旧テーマ側のCSSが消え、
   カエレバ系が素のdiv羅列になっていたのを直すのが目的。

   対象:
     1. 旧カエレバ  .kaerebalink-box  … インラインstyle付きで出力されている → !important 必須
     2. 新カエレバ  .cstmreba > .kaerebalink-box … インラインstyleなし
     3. ヨメレバ/トマレバ  .booklink-box / .tomarebalink-box … 実記事では未確認だが保険で同梱
     4. はてな標準Amazon  .freezed > .hatena-asin-detail

   トークン: ink #141414 / accent #6f7d72 / sub #9b9b9b / hair #f0f0f0
   モール色は幅2pxのバーとしてのみ使う。ベタ塗りは使わない。 */

/* ---------- 共通: 外枠 ---------- */
.entry-content .kaerebalink-box,
.entry-content .booklink-box,
.entry-content .tomarebalink-box,
.entry-content .hatena-asin-detail{
  display:block !important;
  float:none !important;
  width:auto !important;
  margin:28px 0 !important;
  padding:0 !important;
  border:0 !important;
  border-top:1px solid #141414 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:left !important;
  font-size:15px !important;
  line-height:1.9 !important;
  overflow:hidden !important;   /* 画像のfloatを内包する */
}
.entry-content .cstmreba{ margin:0 !important; padding:0 !important; }
.entry-content .freezed{
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
}

/* ---------- 共通: 商品画像 (左に72pxでfloat) ---------- */
.entry-content .kaerebalink-image,
.entry-content .booklink-image,
.entry-content .tomarebalink-image,
.entry-content .hatena-asin-detail > a.hatena-asin-detail-image-link,
.entry-content .hatena-asin-detail > a:first-child{
  float:left !important;
  display:block !important;
  width:72px !important;
  height:auto !important;
  line-height:0 !important;
  margin:18px 16px 8px 0 !important;
  padding:0 !important;
  border:0 !important;
}
.entry-content .kaerebalink-image img,
.entry-content .booklink-image img,
.entry-content .tomarebalink-image img,
.entry-content .hatena-asin-detail-image{
  display:block !important;
  width:72px !important;
  height:72px !important;
  max-width:72px !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#fff !important;
}

/* ---------- カエレバ系: 情報カラム ---------- */
/* インラインの overflow:hidden を打ち消してBFCを作らせない。
   こうするとモール行の clear:left が効き、行が画像の下で全幅になる。 */
.entry-content .kaerebalink-info,
.entry-content .booklink-info,
.entry-content .tomarebalink-info{
  overflow:visible !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.9 !important;
}
.entry-content .kaerebalink-name,
.entry-content .booklink-name,
.entry-content .tomarebalink-name{
  margin:0 !important;
  padding:18px 0 0 !important;
  line-height:1.65 !important;
  font-size:14.5px !important;
  font-weight:700 !important;
  overflow-wrap:anywhere;
}
.entry-content .kaerebalink-name a,
.entry-content .booklink-name a,
.entry-content .tomarebalink-name a{
  color:#141414 !important;
  text-decoration:none !important;
  border:0 !important;
  font-weight:700 !important;
}
.entry-content .kaerebalink-name a:hover,
.entry-content .booklink-name a:hover,
.entry-content .tomarebalink-name a:hover{ color:#6f7d72 !important; }

/* メーカー名・発売日 */
.entry-content .kaerebalink-detail,
.entry-content .booklink-detail,
.entry-content .tomarebalink-detail{
  margin:2px 0 0 !important;
  padding:0 !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  color:#767676 !important;
}
/* 「posted with カエレバ」= 提供元クレジット。消さずに最小限で残す */
.entry-content .kaerebalink-powered-date,
.entry-content .booklink-powered-date,
.entry-content .tomarebalink-powered-date{
  margin:4px 0 0 !important;
  padding:0 !important;
  font-family:inherit !important;
  font-size:10px !important;
  font-weight:400 !important;
  letter-spacing:0.08em !important;
  line-height:1.6 !important;
  color:#767676 !important;
}
.entry-content .kaerebalink-powered-date a,
.entry-content .booklink-powered-date a,
.entry-content .tomarebalink-powered-date a{
  color:#767676 !important; text-decoration:none !important; border:0 !important;
}

/* ---------- カエレバ系: モール行 ---------- */
/* clear は flex コンテナ自身に効くので、display:flex でも画像の下へ回り込む。
   flex にすることで order が使え、記事ごとにバラバラなモールの並び順を統一できる。 */
.entry-content .kaerebalink-link1,
.entry-content .booklink-link2,
.entry-content .tomarebalink-link1{
  clear:left !important;
  display:flex !important;
  flex-direction:column !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  border-bottom:1px solid #f0f0f0 !important;
}
.entry-content .kaerebalink-link1 > div,
.entry-content .booklink-link2 > div,
.entry-content .tomarebalink-link1 > div{
  display:block !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  border-top:1px solid #f0f0f0 !important;
  order:4;
}
/* 並び順は Amazon → 楽天 → Yahoo! に固定（ソース上の順序は記事ごとに違う） */
.entry-content .kaerebalink-link1 > div.shoplinkamazon,
.entry-content .booklink-link2 > div.shoplinkamazon,
.entry-content .tomarebalink-link1 > div.shoplinkamazon{ order:1; }
.entry-content .kaerebalink-link1 > div.shoplinkrakuten,
.entry-content .booklink-link2 > div.shoplinkrakuten,
.entry-content .tomarebalink-link1 > div.shoplinkrakuten{ order:2; }
.entry-content .kaerebalink-link1 > div.shoplinkyahoo,
.entry-content .booklink-link2 > div.shoplinkyahoo,
.entry-content .tomarebalink-link1 > div.shoplinkyahoo{ order:3; }

.entry-content .kaerebalink-link1 > div > a,
.entry-content .booklink-link2 > div > a,
.entry-content .tomarebalink-link1 > div > a{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:13px 2px !important;
  margin:0 !important;
  border:0 !important;
  background:none !important;
  color:#141414 !important;
  font-size:12px !important;
  font-weight:400 !important;
  letter-spacing:0.1em !important;
  line-height:1.5 !important;
  text-decoration:none !important;
  overflow-wrap:anywhere;
}
.entry-content .kaerebalink-link1 > div > a::before,
.entry-content .booklink-link2 > div > a::before,
.entry-content .tomarebalink-link1 > div > a::before{
  content:"";
  flex:0 0 2px;
  width:2px;
  height:14px;
  background:#9b9b9b;   /* 既定のモール色（下で個別に上書き） */
}
.entry-content .kaerebalink-link1 > div > a::after,
.entry-content .booklink-link2 > div > a::after,
.entry-content .tomarebalink-link1 > div > a::after{
  content:"\2197";      /* ↗ */
  margin-left:auto;
  color:#6f7d72;
  font-size:12px;
  letter-spacing:0;
}
.entry-content .kaerebalink-link1 > div > a:hover,
.entry-content .booklink-link2 > div > a:hover,
.entry-content .tomarebalink-link1 > div > a:hover{ color:#6f7d72 !important; }

/* モール識別は2pxバーの色だけで取る。他所の .shoplink* に波及しないよう配下に限定する */
.entry-content .kaerebalink-link1 > div.shoplinkamazon > a::before,
.entry-content .booklink-link2 > div.shoplinkamazon > a::before,
.entry-content .tomarebalink-link1 > div.shoplinkamazon > a::before{ background:#ff9900; }
.entry-content .kaerebalink-link1 > div.shoplinkrakuten > a::before,
.entry-content .booklink-link2 > div.shoplinkrakuten > a::before,
.entry-content .tomarebalink-link1 > div.shoplinkrakuten > a::before{ background:#bf0000; }
.entry-content .kaerebalink-link1 > div.shoplinkyahoo > a::before,
.entry-content .booklink-link2 > div.shoplinkyahoo > a::before,
.entry-content .tomarebalink-link1 > div.shoplinkyahoo > a::before{ background:#ff0033; }
.entry-content .kaerebalink-link1 > div.shoplinkkakaku > a::before,
.entry-content .booklink-link2 > div.shoplinkkakaku > a::before{ background:#0071c5; }

/* バリューコマースの1x1計測gif。読み込みと可視性を壊さないよう、
   display:none も opacity:0 も使わず、1pxのまま行内に置いておく。 */
.entry-content .kaerebalink-link1 a img[src*="valuecommerce"],
.entry-content .booklink-link2 a img[src*="valuecommerce"],
.entry-content .tomarebalink-link1 a img[src*="valuecommerce"]{
  flex:0 0 1px !important;
  width:1px !important;
  height:1px !important;
  margin:0 0 0 -10px !important;   /* 直前のgap分を相殺 */
  padding:0 !important;
  border:0 !important;
  vertical-align:baseline !important;
}

.entry-content .booklink-footer{ clear:both !important; height:0 !important; margin:0 !important; }

/* ---------- はてな標準Amazon ---------- */
.entry-content .hatena-asin-detail{ border-bottom:1px solid #f0f0f0 !important; }
/* 現行のはてな埋め込みは info が display:flex。flexのままだと子の clear が無視され、
   購入ボタンが画像の横に残ってしまうので block に戻す。 */
.entry-content .hatena-asin-detail-info{
  display:block !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}
/* 商品名の上のアイブロウ */
.entry-content .hatena-asin-detail-info::before{
  content:"AMAZON";
  display:block;
  margin:18px 0 5px;
  padding-left:8px;
  border-left:2px solid #ff9900;
  font-size:10px;
  letter-spacing:0.18em;
  line-height:1.4;
  color:#767676;
}
.entry-content .hatena-asin-detail-title{
  margin:0 0 6px !important;
  padding:0 !important;
  font-size:14.5px !important;
  font-weight:700 !important;
  line-height:1.65 !important;
  overflow-wrap:anywhere;
}
.entry-content .hatena-asin-detail-title a{
  color:#141414 !important;
  text-decoration:none !important;
  border:0 !important;
}
.entry-content .hatena-asin-detail-title a::after{
  content:"\00a0\2197";
  color:#6f7d72;
}
.entry-content .hatena-asin-detail-title a:hover{ color:#6f7d72 !important; }
/* 出版社・作者などのメタ。情報は残したまま1行の小さいグレーに畳む */
.entry-content .hatena-asin-detail-info ul{
  margin:0 0 18px !important;
  padding:0 !important;
  list-style:none !important;
  font-size:12px !important;
  line-height:1.7 !important;
  color:#767676 !important;
}
.entry-content .hatena-asin-detail-info ul li{
  display:inline !important;
  margin:0 !important;
  padding:0 8px 0 0 !important;
  background:none !important;
  border:0 !important;
}
.entry-content .hatena-asin-detail-label{ color:#9b9b9b !important; }
/* 2019年に終了した d.hatena.ne.jp への死にリンクだけ落とす */
.entry-content .hatena-asin-detail-info ul li:has(> a[href*="d.hatena.ne.jp"]){ display:none !important; }
.entry-content .hatena-asin-detail-info ul a{ color:#767676 !important; }
.entry-content .hatena-asin-detail-foot{
  clear:both !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* ---------- フォーカス可視化 ---------- */
.entry-content .kaerebalink-box a:focus-visible,
.entry-content .booklink-box a:focus-visible,
.entry-content .tomarebalink-box a:focus-visible,
.entry-content .hatena-asin-detail a:focus-visible{
  outline:2px solid #6f7d72 !important;
  outline-offset:-2px !important;
}

/* ---------- スマホ ---------- */
@media (max-width:680px){
  .entry-content .kaerebalink-image,
  .entry-content .booklink-image,
  .entry-content .tomarebalink-image,
  .entry-content .hatena-asin-detail > a.hatena-asin-detail-image-link,
.entry-content .hatena-asin-detail > a:first-child{
    width:60px !important;
    margin:16px 14px 6px 0 !important;
  }
  .entry-content .kaerebalink-image img,
  .entry-content .booklink-image img,
  .entry-content .tomarebalink-image img,
  .entry-content .hatena-asin-detail-image{
    width:60px !important; height:60px !important; max-width:60px !important;
  }
}

/* ---------- はてな標準Amazon: 現行の埋め込み形式 ----------
   2017年当時のソース(.hatena-asin-detail-foot 形式)と違い、現行のはてなAmazon埋め込みは
   購入ボタン `a.asin-detail-buy` を持ち、はてな側の既定CSSでグレーのベタ塗りボタンになる。
   カエレバと同じモール行に揃える。 */
.entry-content .hatena-asin-detail .asin-detail-buy{
  clear:left !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  margin:0 !important;
  padding:13px 2px !important;
  border:0 !important;
  border-top:1px solid #f0f0f0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#141414 !important;
  font-size:12px !important;
  font-weight:400 !important;
  letter-spacing:0.1em !important;
  line-height:1.5 !important;
  text-align:left !important;
  text-decoration:none !important;
}
.entry-content .hatena-asin-detail .asin-detail-buy::before{
  content:"";
  flex:0 0 2px;
  width:2px;
  height:14px;
  background:#ff9900;
}
.entry-content .hatena-asin-detail .asin-detail-buy::after{
  content:"\2197";
  margin-left:auto;
  color:#6f7d72;
  letter-spacing:0;
}
.entry-content .hatena-asin-detail .asin-detail-buy:hover{ color:#6f7d72 !important; }

/* 購入ボタンを持つ形式では、アイブロウとタイトル末尾の矢印は重複するので出さない */
.entry-content .hatena-asin-detail:has(.asin-detail-buy) .hatena-asin-detail-info::before{
  display:none;
}
.entry-content .hatena-asin-detail:has(.asin-detail-buy) .hatena-asin-detail-title a::after{
  content:none;
}