@charset "UTF-8";
/* ==========================================================================
   Tech Design — tech.ks-product.com「Webサイト制作の教科書」
   白ベース × 青アクセント。Cocoon（cocoon-master）の上に mu-plugin から読み込む。
   すべて body.td-design 配下に限定（mu-plugin を外せば元に戻る）。ライト固定。
   ========================================================================== */
:root {
  --td-bg: #ffffff;
  --td-surface: #f8fafc;      /* パネル・表の見出し */
  --td-soft: #eff6ff;         /* 青の淡色面 */
  --td-soft-2: #dbeafe;
  --td-border: #e2e8f0;
  --td-border-strong: #cbd5e1;
  --td-text: #0f172a;         /* 本文 17.85:1 */
  --td-text-2: #334155;       /* 副テキスト 10.4:1 */
  --td-muted: #475569;        /* 日付など 7.6:1 */
  --td-primary: #1d4ed8;      /* リンク・ボタン 6.7:1（白地） */
  --td-primary-600: #2563eb;  /* 装飾・ホバー 5.2:1 */
  --td-primary-800: #1e40af;  /* 淡色面上の文字 8.0:1（#eff6ff 上） */
  --td-navy: #0b1f5c;         /* 見出しの濃紺 */
  --td-code-bg: #0b1220;
  --td-code-text: #e2e8f0;    /* 15.2:1 */
  --td-radius: 12px;
  --td-radius-s: 8px;
  --td-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .06);
  --td-shadow-hover: 0 2px 4px rgba(29, 78, 216, .08), 0 12px 28px rgba(29, 78, 216, .14);
  --td-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --td-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "BIZ UDGothic", "Noto Sans Mono CJK JP", monospace;
  /* Cocoon の変数も青系に寄せる */
  --cocoon-text-color: #0f172a;
  --cocoon-xx-thin-color: #eff6ff;
  --cocoon-xxx-thin-color: #f8fafc;
  --cocoon-x-thin-color: #e2e8f0;
  --cocoon-thin-color: #dbeafe;
  --cocoon-middle-thickness-color: #2563eb;
}

/* ---------- ベース ---------- */
html { color-scheme: light; }
body.td-design,
body.td-design .container,
body.td-design .content,
body.td-design .main,
body.td-design .sidebar {
  background: var(--td-bg);
  color: var(--td-text);
}
body.td-design { font-family: var(--td-font); -webkit-text-size-adjust: 100%; }
body.td-design a { color: var(--td-primary); text-underline-offset: .18em; }
body.td-design a:hover { color: var(--td-primary-800); }
body.td-design :focus-visible { outline: 3px solid var(--td-primary-600); outline-offset: 2px; border-radius: 4px; }
body.td-design .td-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.td-design img { max-width: 100%; height: auto; }
body.td-design .content { margin-top: 28px; }
body.td-design .main { border: 0; padding: 0 8px 24px; border-radius: 0; }

/* ---------- ヘッダー ---------- */
body.td-design .header-container { background: #fff; border-bottom: 1px solid var(--td-border); }
body.td-design .header { background: #fff; }
body.td-design .header-in { min-height: 0; padding: 18px 0 14px; }
body.td-design .tagline { color: var(--td-muted); font-size: 12px; letter-spacing: .04em; margin: 0 0 4px; }
body.td-design .logo-header { padding: 0; margin: 0; }
body.td-design .logo-text { padding: 0; }
body.td-design .logo .site-name-text-link,
body.td-design .logo .site-name-text-link:hover { color: var(--td-navy); text-decoration: none; }
body.td-design .logo-header .site-name-text { font-size: 28px; font-weight: 800; letter-spacing: .02em; }
body.td-design .logo-header .site-name-text::before,
body.td-design .logo-footer .site-name-text::before {
  content: "</>"; display: inline-block; font-family: var(--td-mono); font-size: .62em; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--td-primary), var(--td-primary-600));
  border-radius: 8px; padding: .28em .45em; margin-right: .5em; vertical-align: .18em; letter-spacing: 0;
}
/* グローバルナビ */
body.td-design .navi { background: #fff; border-top: 1px solid var(--td-border); }
body.td-design .navi-in > ul.menu-pc { display: flex; flex-wrap: wrap; justify-content: center; }
body.td-design .navi-in > ul > li { width: auto; height: auto; line-height: 1.4; }
body.td-design .navi-in > ul > li > a { color: var(--td-text-2); font-size: 14px; font-weight: 600; padding: 14px 16px 12px; border-bottom: 2px solid transparent; background: transparent; }
body.td-design .navi-in > ul > li > a:hover,
body.td-design .navi-in > ul > li.current-menu-item > a { color: var(--td-primary); border-bottom-color: var(--td-primary-600); background: transparent; }
body.td-design .navi-in > ul > li.current-menu-ancestor > a { color: var(--td-primary); border-bottom-color: var(--td-primary-600); background: transparent; }
body.td-design .navi .item-description { display: none; }
/* サブメニュー（CSS / JavaScript / PHP / Webデザイン の下の各カテゴリ） */
body.td-design .navi-in > ul > li { position: relative; }
body.td-design .navi-in > ul > li > a .top-has-sub { display: inline-block; margin-left: 4px; color: var(--td-muted); }
body.td-design .navi-in > ul.menu-pc > li.menu-item-has-children > a > .caption-wrap { display: inline-flex; }
body.td-design .navi-in > ul.menu-pc > li.menu-item-has-children > a { display: flex; align-items: center; justify-content: center; }
body.td-design .navi-in > ul.menu-pc li:focus-within > .sub-menu { display: block; }
body.td-design .navi-in > ul .sub-menu {
  width: 260px; padding: 6px; background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius-s); box-shadow: var(--td-shadow-hover);
}
body.td-design .navi-in > ul .sub-menu li { height: auto; line-height: 1.5; }
body.td-design .navi-in > ul .sub-menu a { display: block; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--td-text-2); background: transparent; border-radius: 6px; text-align: left; }
body.td-design .navi-in > ul .sub-menu a:hover,
body.td-design .navi-in > ul .sub-menu li.current-menu-item > a,
body.td-design .navi-in > ul .sub-menu li.current-menu-parent > a { color: var(--td-primary-800); background: var(--td-soft); }
/* Cocoon の .wrap は 1256px 固定のため、スクロールバー分（ビューポート 1256〜1271px）だけ横にはみ出す。画面幅を超えないようにする */
body.td-design .wrap { max-width: 100%; box-sizing: border-box; }
body.td-design .navi-in > ul .menu-item-has-description > a > .caption-wrap { height: auto; }

/* ---------- ヒーロー（トップのみ） ---------- */
body.td-design .td-hero {
  position: relative; overflow: hidden; color: var(--td-text);
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(37, 99, 235, .14), transparent 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(29, 78, 216, .08), transparent 60%),
    linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--td-border);
}
body.td-design .td-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(37, 99, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
body.td-design .td-hero-in { position: relative; padding: 56px 24px 48px; box-sizing: border-box; max-width: 1256px; }
body.td-design .td-hero-eyebrow { margin: 0 0 14px; font-family: var(--td-mono); font-size: 13px; font-weight: 600; color: var(--td-primary-800); letter-spacing: .02em; }
body.td-design .td-hero-mark { display: inline-block; background: var(--td-primary); color: #fff; border-radius: 6px; padding: 2px 7px; margin-right: 10px; font-size: 12px; }
body.td-design .td-hero-title { margin: 0 0 12px; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.25; font-weight: 800; letter-spacing: .01em; color: var(--td-navy); }
body.td-design .td-hero-lead { margin: 0 0 26px; max-width: 760px; font-size: 16px; line-height: 1.85; color: var(--td-text-2); }
body.td-design .td-hero-search { display: flex; gap: 8px; max-width: 640px; margin: 0 0 26px; }
body.td-design .td-hero-search input[type="search"] {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px; font-size: 16px; color: var(--td-text);
  background: #fff; border: 1px solid var(--td-border-strong); border-radius: 10px; box-shadow: var(--td-shadow); box-sizing: border-box;
}
body.td-design .td-hero-search input[type="search"]::placeholder { color: #64748b; }
body.td-design .td-hero-search input[type="search"]:focus { outline: 3px solid rgba(37, 99, 235, .35); border-color: var(--td-primary-600); }
body.td-design .td-hero-search button {
  flex: none; height: 52px; padding: 0 24px; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--td-primary); border: 0; border-radius: 10px; box-shadow: var(--td-shadow);
}
body.td-design .td-hero-search button:hover { background: var(--td-primary-800); }
body.td-design .td-hero-cats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.td-design .td-hero-cats li { margin: 0; padding: 0; }
body.td-design .td-hero-cats a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 14px; font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--td-primary-800); background: #fff; border: 1px solid var(--td-soft-2); border-radius: 999px; text-decoration: none; transition: .15s;
}
body.td-design .td-hero-cats a:hover { color: #fff; background: var(--td-primary); border-color: var(--td-primary); }
body.td-design .td-chip-count { min-width: 1.6em; padding: 1px 6px; font-size: 12px; text-align: center; color: var(--td-primary-800); background: var(--td-soft); border-radius: 999px; font-family: var(--td-mono); }
body.td-design .td-hero-cats a:hover .td-chip-count { color: var(--td-primary-800); background: #fff; }

/* ---------- トップ導入文・一覧見出し ---------- */
body.td-design .td-intro {
  margin: 0 0 40px; padding: 8px 28px 4px; background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius); box-shadow: var(--td-shadow);
}
body.td-design .td-list-heading,
body.td-design .related-entry-heading {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; font-size: 22px; font-weight: 800; color: var(--td-navy); background: none; border: 0;
}
body.td-design .td-list-heading::before,
body.td-design .related-entry-heading::before { content: ""; width: 6px; height: 1.1em; border-radius: 3px; background: linear-gradient(180deg, var(--td-primary-600), var(--td-primary)); }
body.td-design .related-entry-heading .main-caption { font-size: inherit; }

/* ---------- 記事カード一覧（トップ・カテゴリ・検索） ---------- */
body.td-design .list.ect-entry-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
body.td-design .list.ect-entry-card > .entry-card-wrap { margin: 0; }
body.td-design .entry-card-wrap,
body.td-design .related-entry-card-wrap {
  display: block; height: 100%; padding: 0; color: var(--td-text); text-decoration: none; background: #fff;
  border: 1px solid var(--td-border); border-radius: var(--td-radius); overflow: hidden; box-shadow: var(--td-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-sizing: border-box;
}
body.td-design .entry-card-wrap:hover,
body.td-design .related-entry-card-wrap:hover { background: #fff; border-color: #bfdbfe; box-shadow: var(--td-shadow-hover); transform: translateY(-2px); }
body.td-design .entry-card { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; }
body.td-design .entry-card-thumb {
  position: relative; float: none; width: 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--td-soft);
}
body.td-design .entry-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
body.td-design .entry-card-wrap:hover .entry-card-thumb img { transform: scale(1.03); }
body.td-design .entry-card-content { display: flex; flex-direction: column; flex: 1; margin: 0; padding: 16px 18px 14px; }
body.td-design .entry-card-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.55; color: var(--td-navy); }
body.td-design .entry-card-wrap:hover .entry-card-title { color: var(--td-primary); }
body.td-design .entry-card-snippet { margin: 0 0 12px; font-size: 13.5px; line-height: 1.75; color: var(--td-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.td-design .entry-card-meta { position: static; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.td-design .entry-card-info { position: static; margin: 0; }
body.td-design .entry-card-info > * ,
body.td-design .post-date, body.td-design .post-update { font-size: 12.5px; color: var(--td-muted); padding: 0; }
/* カテゴリラベル */
body.td-design .cat-label {
  top: 10px; left: 10px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .02em;
  color: #fff; background: rgba(11, 31, 92, .88); border: 0; border-radius: 999px; max-width: calc(100% - 20px);
}

/* サムネイル上のラベルはアイキャッチ内のカテゴリ表示と重なるので、カード下部のカテゴリに置き換える */
body.td-design .entry-card-thumb .cat-label { display: none; }
body.td-design .e-card-meta .e-card-categorys { display: block; }
body.td-design .entry-card-categorys .entry-category {
  display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--td-primary-800); background: var(--td-soft); border-radius: 999px;
}

/* 関連記事（横並びの小カード） */
body.td-design .related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.td-design .related-entry-card-wrap { margin: 0; }
body.td-design .related-entry-card { display: flex; gap: 0; margin: 0; padding: 0; }
body.td-design .related-entry-card-thumb { position: relative; flex: 0 0 42%; width: 42%; margin: 0; float: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--td-soft); align-self: flex-start; }
body.td-design .related-entry-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.td-design .related-entry-card-thumb .cat-label { display: none; }
body.td-design .related-entry-card-content { flex: 1; min-width: 0; margin: 0; padding: 10px 12px; }
body.td-design .related-entry-card-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--td-navy); }
body.td-design .related-entry-card-snippet { display: none; }

/* 前後の記事 */
body.td-design .pager-post-navi { gap: 12px; border: 0; }
body.td-design .pager-post-navi a { color: var(--td-text); background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius); padding: 12px; box-sizing: border-box; }
body.td-design .pager-post-navi a:hover { border-color: #bfdbfe; background: var(--td-soft); }
body.td-design .pager-post-navi a figure img { border-radius: 6px; }

/* ページネーション */
body.td-design .pagination { margin: 36px 0 12px; gap: 6px; }
body.td-design .page-numbers {
  width: 44px; height: 44px; line-height: 42px; margin: 0 3px; font-weight: 700; color: var(--td-primary-800);
  background: #fff; border: 1px solid var(--td-border); border-radius: 10px; box-sizing: border-box;
}
body.td-design .page-numbers:hover,
body.td-design .pagination a:hover { color: #fff; background: var(--td-primary); border-color: var(--td-primary); }
body.td-design .pagination .current { color: #fff; background: var(--td-primary); border-color: var(--td-primary); }
body.td-design .page-numbers.dots { border: 0; background: transparent; }
body.td-design .pagination-next-link {
  color: #fff; background: var(--td-primary); border: 0; border-radius: 10px; font-weight: 700; padding: 14px; text-decoration: none;
}
body.td-design .pagination-next-link:hover { color: #fff; background: var(--td-primary-800); }

/* ---------- 一覧ページの見出し・カテゴリ導入文 ---------- */
body.td-design .archive-title {
  margin: 0 0 18px; padding: 0 0 14px; font-size: 26px; font-weight: 800; line-height: 1.45; color: var(--td-navy); border-bottom: 2px solid var(--td-soft-2); background: none;
}
body.td-design .archive-title span.fa { color: var(--td-primary-600); margin-right: .35em; }
body.td-design .category-content { margin-bottom: 36px; padding: 28px 28px 8px; border: 1px solid var(--td-border); border-radius: var(--td-radius); box-shadow: var(--td-shadow); background: #fff; }
body.td-design .category-content .archive-title { font-size: 25px; }
body.td-design .search-form + .list,
body.td-design .archive-title + .search-box { margin-bottom: 26px; }

/* ---------- 記事本文 ---------- */
body.td-design .article { color: var(--td-text); }
body.td-design .entry-title { margin: 6px 0 18px; font-size: 30px; font-weight: 800; line-height: 1.45; letter-spacing: .01em; color: var(--td-navy); }
body.td-design .eye-catch-wrap { margin: 0 0 18px; }
body.td-design .eye-catch { margin: 0; border-radius: var(--td-radius); overflow: hidden; border: 1px solid var(--td-border); box-shadow: var(--td-shadow); }
body.td-design .eye-catch img { display: block; width: 100%; height: auto; }
body.td-design .eye-catch .cat-label { display: none; } /* アイキャッチ画像内にカテゴリ表示があるため */
body.td-design .date-tags { color: var(--td-muted); margin-bottom: 10px; }
body.td-design .date-tags .post-date, body.td-design .date-tags .post-update { font-size: 13px; }

body.td-design .entry-content { font-size: 16.5px; line-height: 1.9; overflow-wrap: break-word; }
body.td-design .entry-content > *,
body.td-design .td-intro > *,
body.td-design .article p,
body.td-design .article li { line-height: 1.9; }
body.td-design .entry-content p,
body.td-design .td-intro p { margin: 0 0 1.4em; }
body.td-design .entry-content ul,
body.td-design .entry-content ol,
body.td-design .td-intro ul,
body.td-design .td-intro ol { padding-left: 1.5em; margin: 0 0 1.6em; }
body.td-design .entry-content li,
body.td-design .td-intro li { margin: .3em 0; }
body.td-design .entry-content li::marker,
body.td-design .td-intro li::marker { color: var(--td-primary-600); font-weight: 700; }

/* 見出し */
body.td-design .article h2,
body.td-design .td-intro h2 {
  position: relative; margin: 2.4em 0 1em; padding: .7em .9em .7em 1.05em; font-size: 23px; font-weight: 800; line-height: 1.5; letter-spacing: .01em;
  color: var(--td-navy); background: var(--td-soft); border: 0; border-left: 5px solid var(--td-primary); border-radius: 0 var(--td-radius-s) var(--td-radius-s) 0;
}
body.td-design .td-intro h2:first-child { margin-top: 1em; }
body.td-design .article h3,
body.td-design .td-intro h3 {
  margin: 2em 0 .9em; padding: 0 0 .5em; font-size: 20px; font-weight: 800; line-height: 1.5; color: var(--td-navy); background: none; border: 0;
  border-bottom: 2px solid var(--td-border);
  background-image: linear-gradient(90deg, var(--td-primary-600), var(--td-primary-600)); background-size: 64px 2px; background-position: left bottom; background-repeat: no-repeat;
  margin-bottom: 1em;
}
body.td-design .article h3 { border-bottom: 2px solid var(--td-border); }
body.td-design .article h4 { margin: 1.8em 0 .8em; padding: 0 0 0 .7em; font-size: 18px; font-weight: 700; color: var(--td-primary-800); border: 0; border-left: 3px solid var(--td-soft-2); }
body.td-design .article h5, body.td-design .article h6 { color: var(--td-navy); font-weight: 700; border: 0; }
body.td-design .article h2 + h3 { margin-top: 1.2em; }

/* 目次（Table of Contents Plus / Cocoon 目次） */
body.td-design #toc_container,
body.td-design .toc {
  display: block; box-sizing: border-box; width: 100% !important; max-width: 100%; margin: 0 0 2.2em; padding: 18px 22px 16px;
  background: var(--td-surface); border: 1px solid var(--td-border); border-radius: var(--td-radius); font-size: 15px;
}
body.td-design #toc_container .toc_title,
body.td-design .toc .toc-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 0 10px; text-align: left; font-size: 15px; font-weight: 800; color: var(--td-navy); border-bottom: 1px solid var(--td-border);
}
body.td-design #toc_container .toc_title::before,
body.td-design .toc .toc-title::before { content: "≡"; display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 15px; color: #fff; background: var(--td-primary); border-radius: 6px; }
body.td-design #toc_container .toc_list { margin: 0; padding: 0; counter-reset: tdtoc; list-style: none; }
body.td-design #toc_container .toc_list > li { position: relative; margin: 0; padding: 5px 0 5px 2.2em; line-height: 1.6; counter-increment: tdtoc; }
body.td-design #toc_container .toc_list > li::before {
  content: counter(tdtoc, decimal-leading-zero); position: absolute; left: 0; top: 6px; font-family: var(--td-mono); font-size: 12px; font-weight: 700; color: var(--td-primary-800);
}
body.td-design #toc_container .toc_list ul { margin: 4px 0 0; padding-left: 1em; list-style: none; }
body.td-design #toc_container a,
body.td-design .toc a { color: var(--td-text-2); text-decoration: none; }
body.td-design #toc_container a:hover,
body.td-design .toc a:hover { color: var(--td-primary); text-decoration: underline; }

/* コード */
body.td-design .entry-content code,
body.td-design .td-intro code {
  font-family: var(--td-mono); font-size: .88em; padding: .15em .42em; color: var(--td-primary-800); background: var(--td-soft);
  border: 1px solid var(--td-soft-2); border-radius: 5px; word-break: break-word;
}
body.td-design .entry-content pre,
body.td-design .td-intro pre {
  position: relative; max-width: 100%; margin: 0 0 1.8em; padding: 18px 20px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--td-mono); font-size: 14px; line-height: 1.7; tab-size: 2; white-space: pre; word-wrap: normal;
  color: var(--td-code-text); background: var(--td-code-bg); border: 1px solid #1e293b; border-radius: var(--td-radius-s);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.td-design .entry-content pre code,
body.td-design .td-intro pre code { padding: 0; font-size: inherit; color: inherit; background: none; border: 0; border-radius: 0; word-break: normal; }
body.td-design .entry-content pre code[class*="language-"]::before {
  content: attr(class); display: block; margin: -6px 0 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #93c5fd;
}
body.td-design .entry-content pre code.language-html::before { content: "HTML"; }
body.td-design .entry-content pre code.language-css::before { content: "CSS"; }
body.td-design .entry-content pre code.language-js::before,
body.td-design .entry-content pre code.language-javascript::before { content: "JavaScript"; }
body.td-design .entry-content pre code.language-php::before { content: "PHP"; }
body.td-design .entry-content pre code.language-json::before { content: "JSON"; }
body.td-design .entry-content pre code.language-bash::before,
body.td-design .entry-content pre code.language-shell::before,
body.td-design .entry-content pre code.language-sh::before { content: "Shell"; }
body.td-design .entry-content pre code.language-vue::before { content: "Vue"; }
body.td-design .entry-content pre code.language-text::before,
body.td-design .entry-content pre code.language-plaintext::before { content: "Text"; }
body.td-design .entry-content pre code.language-sql::before { content: "SQL"; }

/* 表 */
body.td-design .entry-content table,
body.td-design .td-intro table {
  width: 100%; margin: 0 0 1.8em; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.7;
  border: 1px solid var(--td-border); border-radius: var(--td-radius-s); overflow: hidden;
}
body.td-design .entry-content table th,
body.td-design .entry-content table td { padding: .7em .9em; border: 0; border-bottom: 1px solid var(--td-border); text-align: left; vertical-align: top; }
body.td-design .entry-content table th + th,
body.td-design .entry-content table td + td { border-left: 1px solid var(--td-border); }
body.td-design .entry-content table thead th { color: var(--td-navy); background: var(--td-soft); font-weight: 700; border-bottom: 2px solid var(--td-soft-2); }
body.td-design .entry-content table tbody tr:nth-of-type(2n+1) { background: #fff; }
body.td-design .entry-content table tbody tr:nth-of-type(2n) { background: var(--td-surface); }
body.td-design .entry-content table tbody tr:last-child td,
body.td-design .entry-content table tbody tr:last-child th { border-bottom: 0; }
body.td-design .entry-content table tbody th { background: var(--td-surface); color: var(--td-navy); }

/* 引用・強調・区切り */
body.td-design .entry-content blockquote { margin: 0 0 1.8em; padding: 16px 20px; color: var(--td-text-2); background: var(--td-surface); border: 0; border-left: 4px solid var(--td-border-strong); border-radius: 0 var(--td-radius-s) var(--td-radius-s) 0; }
body.td-design .entry-content blockquote::before, body.td-design .entry-content blockquote::after { display: none; }
body.td-design .entry-content strong { font-weight: 700; color: var(--td-navy); background: linear-gradient(transparent 68%, #dbeafe 68%); }
body.td-design .entry-content hr { border: 0; border-top: 1px solid var(--td-border); margin: 2.4em 0; }

/* 見解・出典のボックス（記事・カテゴリ・トップ共通） */
body.td-design section.opinion {
  margin: 2.4em 0 1.8em; padding: 4px 22px 2px; background: #fff; border: 1px solid var(--td-soft-2); border-radius: var(--td-radius); box-shadow: inset 4px 0 0 var(--td-primary-600);
}
body.td-design section.opinion h2 { margin-top: 1.1em; padding: 0; font-size: 19px; background: none; border: 0; border-radius: 0; }
body.td-design section.sources { margin: 2.4em 0 1em; padding: 4px 22px 4px; background: var(--td-surface); border: 1px solid var(--td-border); border-radius: var(--td-radius); font-size: 14.5px; }
body.td-design section.sources h2 { margin-top: 1.1em; padding: 0; font-size: 17px; color: var(--td-navy); background: none; border: 0; border-radius: 0; }
body.td-design section.sources a::after { content: " ↗"; font-size: .85em; }

/* 記事下のカテゴリ・SNS */
body.td-design .entry-categories-tags { margin: 28px 0 16px; }
body.td-design .cat-link,
body.td-design .tag-link {
  display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--td-primary-800); background: var(--td-soft); border: 1px solid var(--td-soft-2); border-radius: 999px; text-decoration: none;
}
body.td-design .cat-link:hover, body.td-design .tag-link:hover { color: #fff; background: var(--td-primary); border-color: var(--td-primary); }
body.td-design .cat-link .tax-icon { color: inherit; }
body.td-design .sns-share-message, body.td-design .sns-follow-message { color: var(--td-muted); font-weight: 700; }
body.td-design .sns-buttons a { border-radius: 8px; }
body.td-design .sns-share.bc-brand-color a, body.td-design .sns-share.bc-brand-color a:hover,
body.td-design .sns-follow.bc-brand-color a, body.td-design .sns-follow.bc-brand-color a:hover { color: #fff; }
/* 白文字とのコントラスト 4.5 以上に（ブランド色を少し濃く） */
body.td-design .bc-brand-color .pocket-button { background-color: #d1203d; }
body.td-design .bc-brand-color .line-button { background-color: #06803a; }
body.td-design .author-info, body.td-design .footer-meta { color: var(--td-muted); font-size: 13px; }

/* パンくず */
body.td-design .breadcrumb { margin: 24px 0 8px; padding: 10px 14px; font-size: 13px; color: var(--td-muted); background: var(--td-surface); border: 1px solid var(--td-border); border-radius: var(--td-radius-s); }
body.td-design .breadcrumb a { color: var(--td-primary); text-decoration: none; }
body.td-design .breadcrumb a:hover { text-decoration: underline; }
body.td-design .breadcrumb .fa { color: #64748b; }

/* ---------- サイドバー ---------- */
body.td-design .sidebar { padding-top: 0; }
body.td-design .sidebar .widget { margin: 0 0 24px; padding: 18px 18px 14px; background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius); box-shadow: var(--td-shadow); }
body.td-design .sidebar h2,
body.td-design .sidebar h3,
body.td-design .widget-sidebar-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--td-navy); background: none; border: 0; border-bottom: 1px solid var(--td-border); border-radius: 0;
}
body.td-design .sidebar h2::before,
body.td-design .sidebar h3::before { content: ""; width: 4px; height: 1em; border-radius: 2px; background: var(--td-primary-600); }
body.td-design .sidebar ul { margin: 0; padding: 0; list-style: none; }
body.td-design .sidebar li { margin: 0; padding: 0; border-bottom: 1px dashed var(--td-border); }
body.td-design .sidebar li:last-child { border-bottom: 0; }
body.td-design .sidebar li a { display: block; padding: 9px 2px; font-size: 14px; line-height: 1.6; color: var(--td-text-2); text-decoration: none; }
body.td-design .sidebar li a:hover { color: var(--td-primary); background: transparent; }
body.td-design .widget_categories li a { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body.td-design .widget_categories .post-count { min-width: 2em; padding: 1px 8px; font-size: 12px; text-align: center; font-family: var(--td-mono); color: var(--td-primary-800); background: var(--td-soft); border-radius: 999px; }
body.td-design .wpp-meta, body.td-design .wpp-views { display: block; font-size: 12px; color: var(--td-muted); }
body.td-design .popular-posts li { padding: 2px 0 8px; }
body.td-design .popular-posts li a { padding-bottom: 0; }

/* 検索ボックス（サイドバー・検索結果・モバイル） */
body.td-design .search-box { position: relative; margin: 0; }
body.td-design .search-edit {
  width: 100%; height: 46px; padding: 0 48px 0 14px; font-size: 15px; color: var(--td-text); background: #fff; box-sizing: border-box;
  border: 1px solid var(--td-border-strong); border-radius: 10px;
}
body.td-design .search-edit::placeholder { color: #64748b; }
body.td-design .search-edit:focus { outline: 3px solid rgba(37, 99, 235, .3); border-color: var(--td-primary-600); }
body.td-design .search-submit { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; padding: 0; color: #fff; background: var(--td-primary); border: 0; border-radius: 8px; cursor: pointer; }
body.td-design .search-submit:hover { background: var(--td-primary-800); }
body.td-design .search-submit .fa { color: #fff; font-size: 15px; line-height: 38px; }
body.td-design .archive-title + .search-box { max-width: 560px; }

/* ---------- フッター ---------- */
body.td-design .footer { margin-top: 48px; padding: 0; color: #cbd5e1; background: var(--td-navy); border-top: 4px solid var(--td-primary-600); }
body.td-design .footer-in { padding: 36px 16px 28px; }
body.td-design .footer a { color: #e2e8f0; }
body.td-design .footer a:hover { color: #fff; }
body.td-design .footer-bottom { margin-top: 0; padding: 0; }
body.td-design .footer-bottom-logo .site-name-text-link,
body.td-design .footer-bottom-logo .site-name-text { color: #fff; font-weight: 800; }
body.td-design .copyright { color: #cbd5e1; font-size: 13px; }
body.td-design .navi-footer-in a { color: #e2e8f0; border: 0; }
body.td-design .navi-footer-in a:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ページ上部へ戻る */
body.td-design .go-to-top-button { width: 48px; height: 48px; color: #fff; background: var(--td-primary); border-radius: 50%; box-shadow: var(--td-shadow-hover); }
body.td-design .go-to-top-button:hover { background: var(--td-primary-800); color: #fff; }

/* ---------- 404 ---------- */
body.td-design.error404 .article .entry-title { font-size: 26px; }
body.td-design img.not-found { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 0 20px; border-radius: var(--td-radius); }
body.td-design .td-404-help { margin: 28px 0 0; padding: 22px 24px; background: var(--td-surface); border: 1px solid var(--td-border); border-radius: var(--td-radius); }
body.td-design .td-404-title { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--td-navy); background: none; border: 0; padding: 0; }
body.td-design .td-404-search { margin-bottom: 18px; }
body.td-design .td-404-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
body.td-design .td-404-cats a { display: inline-block; padding: 7px 12px; font-size: 14px; font-weight: 600; color: var(--td-primary-800); background: #fff; border: 1px solid var(--td-soft-2); border-radius: 999px; text-decoration: none; }
body.td-design .td-404-cats a:hover { color: #fff; background: var(--td-primary); border-color: var(--td-primary); }
body.td-design .td-404-home { margin: 0; font-weight: 700; }

/* ---------- タブレット以下 ---------- */
@media screen and (max-width: 1023px) {
  body.td-design .related-list { grid-template-columns: 1fr; }
}
@media screen and (max-width: 834px) {
  body.td-design .content { margin-top: 18px; }
  body.td-design .main { padding: 0 16px 20px; box-sizing: border-box; }
  body.td-design .header-in { padding: 14px 16px 12px; }
  body.td-design .logo-header .site-name-text { font-size: 22px; }
  body.td-design .td-hero-in { padding: 36px 16px 32px; }
  body.td-design .td-hero-lead { font-size: 15px; }
  body.td-design .td-intro { padding: 4px 18px 2px; }
  body.td-design .category-content { padding: 20px 18px 4px; }
  body.td-design .entry-title { font-size: 24px; }
  body.td-design .archive-title { font-size: 22px; }
  body.td-design .article h2, body.td-design .td-intro h2 { font-size: 20px; padding: .6em .8em .6em .9em; }
  body.td-design .article h3, body.td-design .td-intro h3 { font-size: 18px; }
  body.td-design .entry-content { font-size: 16px; }
  /* 表は横スクロール */
  body.td-design .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: normal; }
  body.td-design .entry-content table th, body.td-design .entry-content table td { min-width: 6.5em; }
  body.td-design .sidebar .widget { padding: 16px; }
}
@media screen and (max-width: 600px) {
  body.td-design .list.ect-entry-card { grid-template-columns: 1fr; gap: 16px; }
  body.td-design .entry-card-title { font-size: 16px; }
  body.td-design .entry-card-content { padding: 14px 16px 12px; }
  body.td-design .td-hero-title { font-size: 28px; }
  body.td-design .td-hero-search input[type="search"], body.td-design .td-hero-search button { height: 48px; }
  body.td-design .td-hero-search button { padding: 0 18px; }
  body.td-design .td-hero-cats a { font-size: 13px; padding: 7px 10px 7px 12px; }
  body.td-design .related-entry-card-thumb { flex-basis: 38%; width: 38%; }
  body.td-design .entry-content pre { font-size: 13px; padding: 14px 14px; border-radius: 6px; }
  body.td-design #toc_container { padding: 14px 16px; }
  body.td-design section.opinion, body.td-design section.sources { padding-left: 16px; padding-right: 16px; }
  body.td-design .page-numbers { width: 40px; height: 40px; line-height: 38px; margin: 0 2px; }
  body.td-design .pager-post-navi { flex-direction: column; }
  body.td-design .pager-post-navi a { width: 100%; }
}

/* モバイルのフッターボタン */
body.td-design .mobile-menu-buttons { background: #fff; border-top: 1px solid var(--td-border); box-shadow: 0 -2px 12px rgba(15, 23, 42, .08); }
body.td-design .mobile-menu-buttons .menu-button > a,
body.td-design .mobile-menu-buttons .menu-button-in { color: var(--td-text-2); }
body.td-design .mobile-menu-buttons .menu-icon { color: var(--td-primary); }
body.td-design .mobile-menu-buttons .menu-caption { opacity: 1; color: var(--td-text-2); font-size: 10px; }
body.td-design .menu-drawer a { color: var(--td-text); }
body.td-design .menu-drawer a:hover { color: var(--td-primary); }

@media (prefers-reduced-motion: reduce) {
  body.td-design .entry-card-wrap, body.td-design .entry-card-thumb img, body.td-design .related-entry-card-wrap { transition: none; }
  body.td-design .entry-card-wrap:hover, body.td-design .related-entry-card-wrap:hover { transform: none; }
  body.td-design .entry-card-wrap:hover .entry-card-thumb img { transform: none; }
}

/* 2026-10-06 fix_T: 旧記事のアイキャッチ（正方形・文字入り）が 16:9 枠の cover で上下が切れるため、記事画像は枠内に全体を収める（16:9 の画像は従来どおり枠いっぱい） */
body.td-design .entry-card-thumb img.wp-post-image,
body.td-design .related-entry-card-thumb img.wp-post-image { object-fit: contain; }

/* === theme-port BEGIN 2026-10-07 === */
/* =====================================================================
   theme-port（案）: cocoon-master/style.css 12445〜12518「2026-10-04 デザイン修正」を tech-design.css へ移す
   - 置き場所: tech-design.css の本体の後ろ、tech-sp.css ブロックの「前」（SP 側は tech-sp.css が同じ詳細度＋後勝ちで上書き）
   - 変数 --ac 等を使う宣言（12454 の border-left、12468、12470〜12480、12503〜12510）は移さない
     （12454・12468 は今も無効＝見た目に出ていない。12470〜12480・12503〜12510 は tech-sp.css 1-1・1-2 が担当）
   ===================================================================== */

/* 見出しの階層（全幅）  12447〜12456 */
body.td-design h1.entry-title { font-size: 1.75rem !important; line-height: 1.45; }
body.td-design .article h2 { font-size: 1.5rem !important; line-height: 1.5; }
body.td-design .article h3 { font-size: 1.25rem !important; line-height: 1.5; margin: 2em 0 .8em !important; border-bottom-width: 2px !important; }
body.td-design .article h4 { font-size: 1.15rem !important; line-height: 1.5; margin: 1.8em 0 .6em !important; padding: 0 !important; }
body.td-design .article h5,
body.td-design .article h6 { font-size: 1rem !important; line-height: 1.5; margin: 1.6em 0 .5em !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.td-design .article h2 + h3 { margin-top: 1.2em !important; }
body.td-design .article h3 + h4 { margin-top: 1.2em !important; }
body.td-design .related-entry-heading,
body.td-design .comment-title { font-size: 1.25rem !important; color: #0f172a !important; padding: 2px 0 2px 12px !important; margin: 2.4em 0 1em !important; }
body.td-design .comment-reply-title { font-size: 1.08rem !important; }
body.td-design .archive-title { font-size: 1.5rem !important; }

/* #main とサイドバーの上端・右端  12458〜12459 */
body.td-design #sidebar { padding: 0 !important; border: 0 !important; }
body.td-design #sidebar .widget:last-child { margin-bottom: 0; }

/* 記事カード  12461〜12465 */
body.td-design .entry-card-thumb,
body.td-design .entry-card-thumb.card-thumb { aspect-ratio: auto !important; height: auto !important; min-height: 135px; }
body.td-design .entry-card { min-height: 180px; }
body.td-design .entry-card-title,
body.td-design .related-entry-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (min-width: 835px) {
  body.td-design .entry-card-snippet { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}
body.td-design .entry-card-info .post-date,
body.td-design .entry-card-info .post-update { display: inline-flex !important; align-items: center; gap: 4px; white-space: nowrap; }

/* PC グローバルナビ  12467・12512〜12514・12517〜12518 */
body.td-design .navi-in > ul.menu-pc > li > a { padding: 0 18px !important; width: auto !important; white-space: nowrap; border-radius: 8px; }
/* 12468 の color:var(--ac2)!important は「未定義→unset→親の色を継承」として今も効いている（現在地の文字が青にならず濃紺）。
   今の PC の見た目を保つなら inherit で再現する。青にしたい（tech-design 本来の意図）なら、この 3 行を消す＝PC の見た目が変わるので別判断 */
body.td-design .navi-in > ul.menu-pc > li.current-menu-item > a,
body.td-design .navi-in > ul.menu-pc > li.current-post-ancestor > a,
body.td-design .navi-in > ul.menu-pc > li.current-menu-parent > a { color: inherit !important; }
@media (min-width: 1024px) and (max-width: 1279px) {
  body.td-design .navi-in > ul.menu-pc > li > a { padding: 0 10px !important; font-size: .9rem !important; }
}
body.td-design .navi-in .item-description { display: none !important; }
body.td-design #navi .navi-in > ul.menu-pc > li > a .caption-wrap { display: block !important; height: 60px !important; line-height: 60px !important; }

/* 「次のページ」ボタンを隠す（全幅）  12495 */
body.td-design .pagination-next { display: none !important; }

/* サイドバーの検索欄  12498〜12501 */
body.td-design #sidebar .widget_search { padding: 16px !important; }
body.td-design #sidebar .widget_search .search-box { margin: 0 !important; position: relative; }
body.td-design #sidebar .widget_search .search-edit { height: 48px !important; padding: 0 56px 0 14px !important; font-size: 1rem !important; width: 100% !important; margin: 0 !important; }
body.td-design #sidebar .widget_search .search-submit { top: 50% !important; right: 5px !important; transform: translateY(-50%); width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 8px !important; display: flex !important; align-items: center; justify-content: center; font-size: 16px !important; line-height: 1 !important; }

/* SP・タブレット（≤834）  12482〜12491（tech-sp.css 1-6・1-7・2-8・2-11 がさらに上書きする） */
@media (max-width: 834px) {
  body.td-design h1.entry-title { font-size: 1.5rem !important; }
  body.td-design .article h2 { font-size: 1.35rem !important; }
  body.td-design .article h3 { font-size: 1.15rem !important; }
  body.td-design .article h4 { font-size: 1.05rem !important; }
  body.td-design .related-entry-heading,
  body.td-design .comment-title { font-size: 1.13rem !important; }
  body.td-design .archive-title { font-size: 1.3rem !important; }
  body.td-design .entry-card { min-height: 0; }
  body.td-design .entry-card-thumb,
  body.td-design .entry-card-thumb.card-thumb { aspect-ratio: 16 / 9 !important; min-height: 0; border-right: 0 !important; }
  body.td-design .entry-card-content { padding: 14px 16px 34px !important; }
  body.td-design .entry-card-title,
  body.td-design .related-entry-card-title { -webkit-line-clamp: 3; }
}
/* ===================================================================== end of theme-port */
/* === theme-port END === */

/* === tech-sp BEGIN 2026-10-07 === */
/* tech.ks-product.com SP 最適化（merged/tech-sp.css をレビュー X・Y の指摘を反映して修正した版）
   - PC（1024px 以上）は変えない。1-0 の変数だけは全幅で定義（PC では誰も使っていないので見た目は変わらない）
   - 横スクロールナビのピル化（旧 1-1）は、ハンバーガー化で #navi を SP で隠すため削除した
   - ブロック2（推奨）は 1-0 の変数に依存。ブロック1 は外さないこと */

/* ##### ブロック1【必須】 ##### */

/* 1-0. 変数（テーマ追記の --ac 等の置き換え先）  X:Y-1 で全幅に */
body.td-design {
  --td-ac:  var(--td-primary);
  --td-ac2: var(--td-primary-800);
  --td-acl: var(--td-soft);
  --td-s1:  var(--td-surface);
  --td-s2:  #f1f5f9;
  --td-bd:  var(--td-border);
  --td-tx:  var(--td-text);
}

/* 1-2. ドロワー・閉じるボタン・影（開いたときだけ）  テーマ 12470〜12480 の移植＋R-1＋U-E＋U-F＋Y-14 */
@media screen and (max-width: 1023px) {
  body.td-design .menu-content { box-shadow: none; overscroll-behavior: contain; }
  body.td-design #navi-menu-input:checked ~ .menu-content,
  body.td-design #sidebar-menu-input:checked ~ .menu-content { box-shadow: 0 0 40px rgba(15, 23, 42, .2); }

  body.td-design .menu-close-button { display: flex !important; justify-content: flex-end; align-items: center; height: 60px !important; padding: 0 16px !important; }
  body.td-design .menu-close-button .fa {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--td-s2); border: 1px solid var(--td-bd); color: var(--td-tx);
  }

  body.td-design .menu-drawer { list-style: none; margin: 0 !important; padding: 6px 16px calc(96px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)) !important; }
  body.td-design .menu-drawer li { border: 0 !important; margin: 0 0 8px !important; background: transparent !important; }
  body.td-design .menu-drawer li a {
    display: flex !important; align-items: center; padding: 14px 16px !important; border-radius: 12px;
    background: var(--td-s1) !important; border: 1px solid var(--td-bd); color: var(--td-tx) !important; font-weight: 700; text-decoration: none;
  }
  body.td-design .menu-drawer li a::after { content: "\203A"; margin-left: auto; color: var(--td-ac); font-size: 1.4rem; line-height: 1; }
  body.td-design .menu-drawer li.current-menu-item > a { border-color: var(--td-ac); background: var(--td-acl) !important; color: var(--td-ac2) !important; }

  body.td-design .search-menu-content .search-box { border-radius: 14px; }
  body.td-design .sidebar-menu-button,
  body.td-design .mobile-menu-buttons li:has(label[for=sidebar-menu-input]) { display: none !important; }
  body.td-design .mobile-footer-menu-buttons .menu-button { flex: 1; }
}

/* 1-3. iOS の自動ズーム防止（検索欄 16px）  U-B */
@media screen and (max-width: 1023px) {
  body.td-design .search-edit,
  body.td-design .td-hero-search input[type="search"],
  body.td-design .td-404-search input { font-size: 16px; }
}

/* 1-4. フッター最下部が下部固定バーに隠れない（下部バー方式のときだけ効く） */
@media screen and (max-width: 1023px) {
  body.td-design.mblt-footer-mobile-buttons #footer::after {
    content: ""; display: block; height: calc(50px + env(safe-area-inset-bottom, 0px));
  }
}

/* 1-5. 記事のファーストビュー: タイトル→日付→アイキャッチ、上のシェアは SP で隠す  R-2 */
@media screen and (max-width: 834px) {
  body.td-design .article-header { display: flex; flex-direction: column; }
  body.td-design .article-header > .entry-title { order: -2; }
  body.td-design .article-header > .date-tags { order: -1; margin: 0 0 12px; text-align: left; line-height: 1.4; }
  body.td-design .sns-share.ss-top { display: none; }
}

/* 1-6. 記事の見出しを一段小さく  R-4（X:Y-4 で h2 直後の h3 の詰めを保つ） */
@media screen and (max-width: 834px) {
  body.td-design .article h2 { font-size: 1.2rem !important; line-height: 1.45; padding: .55em .75em .55em .85em; margin: 2em 0 .9em; }
  body.td-design .article h3 { font-size: 1.08rem !important; line-height: 1.5; margin: 1.8em 0 .8em !important; }
  body.td-design .article h2 + h3 { margin-top: 1.2em !important; }
  body.td-design .article h4 { font-size: 1rem !important; }
  body.td-design section.opinion h2 { font-size: 1.1rem !important; padding: 0; margin-top: 1em; }
  body.td-design section.sources h2 { font-size: 1rem !important; padding: 0; margin-top: 1em; }
}

/* 1-7. 一覧カードをコンパクト型に  L-1（Y-8: カテゴリラベル 12px・左寄せ） */
@media screen and (max-width: 600px) {
  body.td-design .list.ect-entry-card { gap: 12px; }
  body.td-design .list.ect-entry-card .entry-card { flex-direction: row; align-items: flex-start; }
  body.td-design .list.ect-entry-card .entry-card-thumb { flex: 0 0 128px; width: 128px; margin: 12px 0 12px 12px; border-radius: 6px; }
  body.td-design .list.ect-entry-card .entry-card-content { min-width: 0; align-self: stretch; padding: 10px 12px 10px !important; }
  body.td-design .list.ect-entry-card .entry-card-title { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
  body.td-design .list.ect-entry-card .entry-card-snippet { display: none; }
  body.td-design .list.ect-entry-card .entry-card-meta { flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; }
  body.td-design .list.ect-entry-card .entry-card-categorys { margin-left: 0; text-align: left; display: flex; flex-wrap: wrap; gap: 4px; }
  body.td-design .list.ect-entry-card .entry-card-categorys .entry-category { font-size: 12px; padding: 1px 8px; }
}

/* 1-8. TOP: ニュース → 新着記事 → 導入文 の順に（DOM 順は変えない）  L-3＋Y-2 */
@media screen and (max-width: 834px) {
  body.td-design.home #main { display: flex; flex-direction: column; }
  body.td-design.home #main > .ks-news { order: -3; margin-bottom: 32px; }
  body.td-design.home #main > .td-list-heading { order: -2; }
  body.td-design.home #main > #list { order: -1; }
  body.td-design.home #main > .pagination,
  body.td-design.home #main > .pagination-next { order: -1; margin-bottom: 40px; }
}
/* --- tech-sp block1 end --- */

/* ##### ブロック2【推奨】（1-0 の変数に依存） ##### */

/* 2-1. ドロワーの親項目を小見出し扱いに・記事のカテゴリを強調・「メニュー」ラベル  N-3
        Y-9: 小見出しはタップを受けない（行き先は子の 1 番目と同じ） / X:Y-5: content は文字コード表記
        Y-16: 閉じるラベルは丸いアイコンだけがタップを受ける */
@media screen and (max-width: 1023px) {
  body.td-design .menu-drawer > li.menu-item-has-children { margin-bottom: 12px !important; }
  body.td-design .menu-drawer > li.menu-item-has-children > a {
    background: transparent !important; border-color: transparent; padding: 10px 4px 6px !important;
    font-size: 13px; color: var(--td-muted) !important; letter-spacing: .04em; pointer-events: none;
  }
  body.td-design .menu-drawer > li.menu-item-has-children > a::after { content: none; }
  body.td-design .menu-drawer .sub-menu { margin: 0; padding-left: 0; }
  body.td-design .menu-drawer .sub-menu li { margin-bottom: 6px !important; }
  body.td-design .menu-drawer .sub-menu a { padding: 12px 16px !important; font-size: 15px; font-weight: 600; }
  body.td-design .menu-drawer li.current-post-ancestor > a { border-color: var(--td-ac); background: var(--td-acl) !important; color: var(--td-ac2) !important; }
  body.td-design .navi-menu-content .menu-close-button::before {
    content: "\30E1\30CB\30E5\30FC"; margin-right: auto; font-size: 15px; font-weight: 800; color: var(--td-navy);
  }
  body.td-design .navi-menu-content .menu-close-button { border-bottom: 1px solid var(--td-border); margin-bottom: 10px; pointer-events: none; }
  body.td-design .navi-menu-content .menu-close-button .fa { pointer-events: auto; cursor: pointer; }
}

/* 2-2. ドロワー／検索を開いている間だけ、ボタンバーの重なり順を上げる  N-4
        （10000 にとどめる。アンカー広告より上には出さない） */
@media screen and (max-width: 1023px) {
  body.td-design .mobile-menu-buttons:has(#navi-menu-input:checked, #search-menu-input:checked) { z-index: 10000; }
}

/* 2-3. 検索ポップアップ: 開いたときだけ画面の上から 30svh（上部・下部どちらのアンカー広告とも重なりにくい位置）
        閉じている間は見えない入力欄がタップ・読み上げを受けないよう visibility:hidden  X-1＋Y-1＋Y-3 */
@media screen and (max-width: 1023px) {
  body.td-design .search-menu-content { visibility: hidden; transition: transform .3s ease-in-out, opacity .3s, visibility 0s linear .3s; }
  body.td-design #search-menu-input:checked ~ .search-menu-content { visibility: visible; top: 30vh; transition: transform .3s ease-in-out, opacity .3s, visibility 0s; }
  @supports (height: 1svh) {
    body.td-design #search-menu-input:checked ~ .search-menu-content { top: calc(env(safe-area-inset-top, 0px) + 30svh); }
  }
  /* 閉じたドロワーにも読み上げ・Tab で入らない  Y-3 */
  body.td-design .navi-menu-content { visibility: hidden; transition: transform .3s ease-in-out, visibility 0s linear .3s; }
  body.td-design #navi-menu-input:checked ~ .navi-menu-content { visibility: visible; transition: transform .3s ease-in-out, visibility 0s; }
}

/* 2-4. メニューボタンのラベル 9px → 11px  N-6＋U-F */
@media screen and (max-width: 1023px) {
  body.td-design .mobile-menu-buttons .menu-caption { font-size: 11px; line-height: 1.3; }
  body.td-design .mobile-menu-buttons .menu-button-in { opacity: 1; }
}

/* 2-5. TOP ヒーロー・404 のカテゴリチップのタップ領域  U-E */
@media screen and (max-width: 834px) {
  body.td-design .td-hero-cats a,
  body.td-design .td-404-cats a { min-height: 40px; box-sizing: border-box; }
  body.td-design .td-404-cats a { display: inline-flex; align-items: center; }
}

/* 2-6. 一覧系（カテゴリ・検索・404）だけ、本文の下にサイドバー  L-2（X:Y-2 で Cocoon と同じ 1023px に） */
@media screen and (max-width: 1023px) {
  body.td-design.archive .sidebar,
  body.td-design.search .sidebar,
  body.td-design.error404 .sidebar { display: block; margin: 8px 16px 0; padding: 0; width: auto; }
  body.td-design.archive .sidebar .widget_search,
  body.td-design.search .sidebar .widget_search,
  body.td-design.error404 .sidebar .widget_search { display: none; }
  body.td-design.archive .sidebar li a,
  body.td-design.search .sidebar li a,
  body.td-design.error404 .sidebar li a { padding: 11px 2px; }
}

/* 2-7. ページ番号 44px  L-5 */
@media screen and (max-width: 600px) {
  body.td-design .page-numbers { width: 44px; height: 44px; line-height: 42px; margin: 0 2px; }
}

/* 2-8. 記事タイトルの左端を本文にそろえる  R-3 */
@media screen and (max-width: 834px) {
  body.td-design .article .entry-title { padding: 0; margin: 4px 0 14px; font-size: 1.375rem !important; line-height: 1.45; }
}

/* 2-9. 目次は SP では 2 階層目を畳む＋項目の高さ約 40px  R-6＋Y-7 */
@media screen and (max-width: 834px) {
  body.td-design #toc_container .toc_list ul { display: none; }
  body.td-design #toc_container .toc_list > li { padding-top: 8px; padding-bottom: 8px; }
  body.td-design #toc_container .toc_list > li > a { display: block; }
}

/* 2-10. 小さいアイキャッチは中央に  R-7 */
@media screen and (max-width: 834px) {
  body.td-design .eye-catch-wrap { justify-content: center; }
}

/* 2-11. 関連記事見出しの二重装飾をやめる  R-8 */
@media screen and (max-width: 834px) {
  body.td-design .related-entry-heading { border-left: 0 !important; padding: 0 !important; }
}

/* 2-12. コードブロックを画面端まで広げ、横スクロールの合図  R-5（X:Y-3 で直下の pre だけ、Y-4 で引っぱりを止める） */
@media screen and (max-width: 600px) {
  body.td-design .entry-content > pre {
    margin-left: -16px; margin-right: -16px; max-width: none; border-radius: 0; border-left: 0; border-right: 0; padding: 14px 16px;
    background:
      linear-gradient(to right, #0b1220 30%, rgba(11, 18, 32, 0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, #0b1220 30%, rgba(11, 18, 32, 0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(147, 197, 253, .45), rgba(147, 197, 253, 0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(147, 197, 253, .45), rgba(147, 197, 253, 0)) right center / 12px 100% no-repeat scroll,
      #0b1220;
    scrollbar-width: thin; scrollbar-color: #475569 transparent; overscroll-behavior-x: contain;
  }
  body.td-design .entry-content pre::-webkit-scrollbar { height: 6px; }
  body.td-design .entry-content pre::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
}

/* 2-13. 検索ポップアップ・検索結果ページの送信ボタンを 44px に（サイドバーは対象外）  Y-10 */
@media screen and (max-width: 1023px) {
  body.td-design .search-menu-content .search-edit,
  body.td-design.search #main .search-edit { height: 48px; padding-right: 54px; }
  body.td-design .search-menu-content .search-submit,
  body.td-design.search #main .search-submit { top: 2px; right: 2px; width: 44px; height: 44px; }
  body.td-design .search-menu-content .search-submit .fa,
  body.td-design.search #main .search-submit .fa { line-height: 44px; }
}

/* 2-14. タッチ端末ではホバーの見た目を残さない  Y-11 */
@media (hover: none) {
  body.td-design .entry-card-wrap:hover .entry-card-thumb img { transform: none; }
  body.td-design .entry-card-wrap:hover .entry-card-title { color: var(--td-navy); }
}

/* ##### ブロック3【任意】 ##### */
/* 3-2. 記事下のフォローボタンを SP では省く  R-9 */
@media screen and (max-width: 600px) {
  body.td-design .sns-follow.sf-bottom { display: none; }
}
/* 3-3. カテゴリ説明ボックスの下の空白を詰める  L-6 */
@media screen and (max-width: 834px) {
  body.td-design .category-content > :last-child,
  body.td-design .category-content .entry-content > :last-child { margin-bottom: 0; }
  body.td-design .category-content { padding-bottom: 18px; }
}

/* === tech-sp END === */

/* === tech-hamburger BEGIN 2026-10-07 === */
/* SP・タブレット（1023px 以下）のナビをハンバーガー（Cocoon のヘッダーモバイルボタン）に一本化する
   - Cocoon 設定 mobile_button_layout_type = header_mobile_buttons が前提（上部に ☰メニュー・サイト名・検索 のバー）
   - 通常ヘッダー（ロゴ）と横スクロールのグローバルナビ（#navi）は SP では出さない（バーと二重になるため）
   - PC（1024px 以上）は変えない */
@media screen and (max-width: 1023px) {
  body.td-design #header-container,
  body.td-design #navi { display: none !important; }

  /* 上部バー: 高さ 50px 固定（Cocoon の body margin-top:50px と合わせる）。サイト名は 1 行 */
  body.td-design .mobile-header-menu-buttons {
    height: 50px; min-height: 50px; background: #fff;
    box-shadow: 0 1px 0 var(--td-border), 0 2px 8px rgba(15, 23, 42, .06);
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  body.td-design .mobile-header-menu-buttons > .menu-button { flex: none; width: 64px; }
  body.td-design .mobile-header-menu-buttons > .logo-menu-button { flex: 1 1 auto; width: auto; min-width: 0; line-height: 50px; }
  body.td-design .mobile-header-menu-buttons .logo-menu-button .menu-button-in {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--td-navy); text-align: center;
  }
  body.td-design .mobile-header-menu-buttons .menu-icon { color: var(--td-navy); }
  /* 通常ヘッダーを隠した分、TOP 以外は本文がバーに貼り付かないよう上に余白（TOP はヒーローがすぐ下に来る） */
  body.td-design:not(.home) #content { padding-top: 16px; }
}
@media screen and (max-width: 359px) {
  body.td-design .mobile-header-menu-buttons .logo-menu-button .menu-button-in { font-size: 14px; }
}
/* === tech-hamburger END === */

/* === tech-close-subtle BEGIN 2026-10-07 ===
   ハンバーガー（ドロワー）の閉じるボタンを控えめに: 丸い塗り・枠を無くし、×を小さく細く・薄い色に。
   タップ領域は 44px のまま（見た目だけ小さくする）。1023px 以下のみ。 */
@media (max-width: 1023px) {
  body.td-design .menu-close-button .fa {
    position: relative; width: 44px; height: 44px; font-size: 0 !important; line-height: 0;
    background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none; color: var(--td-mu, #64748b) !important;
  }
  body.td-design .menu-close-button .fa::before,
  body.td-design .menu-close-button .fa::after {
    content: "" !important; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.25px; margin: -0.6px 0 0 -7px;
    background: currentColor; border-radius: 1px; font-size: 0;
  }
  body.td-design .menu-close-button .fa::before { transform: rotate(45deg); }
  body.td-design .menu-close-button .fa::after { transform: rotate(-45deg); }
  body.td-design .menu-close-button .fa:hover,
  body.td-design .menu-close-button .fa:focus-visible { color: var(--td-tx, #0f172a) !important; }
}
/* === tech-close-subtle END === */

/* === tech-amazonjs BEGIN 2026-10-07 : ks-product.com と同じAmazonカード（rem→px換算） === */
/* Modern Amazon affiliate link card (overrides plugins/amazonjs/css/amazonjs.css) */
.amazonjs_item { display: block; position: relative; box-sizing: border-box; margin: 1em 0; padding: 0; border: 1px solid #e6e6e6; border-radius: 12px; background: #ffffff; background-image: none; color: #222222; font-size: 14px; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.amazonjs_item:hover { border-color: #f0c14b; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.amazonjs_item * { box-sizing: border-box; margin: 0; padding: 0; border: 0; }
.amazonjs_item a { display: flex; gap: 16px; align-items: center; padding: 16px; color: inherit; text-decoration: none; }
.amazonjs_item .amazonjs_image { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 8px; border: 1px solid #f0f0f0; background: #fafafa; overflow: hidden; }
.amazonjs_item .amazonjs_image img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.amazonjs_item .amazonjs_info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; }
.amazonjs_item .amazonjs_info h4.amazonjs_title { display: -webkit-box; color: #1a1a1a; font-size: 1em; font-weight: 600; line-height: 1.5; overflow: hidden; transition: color 0.2s ease; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.amazonjs_item:hover .amazonjs_info h4.amazonjs_title { color: #e47911; }
.amazonjs_item .amazonjs_info::after { content: "Amazonで見る"; display: inline-flex; gap: 4px; align-items: center; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #f7ca4d, #f0ad2c); color: #ffffff; font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em; }


@media (max-width: 480px) {
  /* プラグイン本体のamazonjs.cssには、旧デザイン（画像をfloatさせてinfoをmargin-leftで
     逃がすレイアウト）向けの .amazonjs_info { margin-left: 70px !important; } が残っており、
     このflexboxベースの新デザインでは不要な左余白になっていたため打ち消す。 */
  .amazonjs_item .amazonjs_info { margin-left: 0 !important; }
  .amazonjs_item a { gap: 12px; padding: 12px; }
  .amazonjs_item .amazonjs_image { width: 64px; height: 64px; }
  .amazonjs_item .amazonjs_info h4.amazonjs_title { font-size: 0.92em; }
  .amazonjs_item .amazonjs_info::after { padding: 4px 10px; font-size: 0.75em; }
}
/* === tech-amazonjs END === */

/* === tech-amazonjs-fix BEGIN 2026-10-07 : 見出し(h4)装飾が商品名に付くのを打ち消す === */
body.td-design .amazonjs_item h4.amazonjs_title,
body.td-design .article .amazonjs_item h4.amazonjs_title,
.amazonjs_item .amazonjs_info h4.amazonjs_title {
  border: 0 !important; border-left: 0 !important; padding: 0 !important; margin: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
.amazonjs_item h4.amazonjs_title::before, .amazonjs_item h4.amazonjs_title::after { content: none !important; display: none !important; }
/* === tech-amazonjs-fix END === */