@charset "UTF-8";

/* ==========================================================================
   寝取られ・NTR大全 — custom.css
   D1 ファセット図鑑案
   白 + ネイビー(#1b4f8a) + グレー。強い色は1種類だけ出す。
   本文最小 14px / コンテナ最大 1200px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. リセットと基本
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ink: #16181d;
  --sub: #5f636e;
  --mute: #8a8d99;
  --line: #e4e6ec;
  --hair: #eef0f4;
  --bg: #ffffff;
  --soft: #f7f8fa;
  --key: #1b4f8a;
  --key-dark: #153f6f;
  --key-soft: #eaf1f9;
  --warn-bg: #fffdf3;
  --warn-line: #ece2c0;
  --warn-ink: #6b5c2a;
  --container: 1400px;   /* 2026-08-13: 1200px は1440px画面で左右に120pxずつ余り、MVが狭く見えたため広げた */
  --radius: 10px;
}

html {
  scroll-behavior: smooth;
  /* 固定ヘッダー分だけアンカー位置を下げる */
  scroll-padding-top: 84px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input,
select {
  font-family: inherit;
  font-size: inherit;
}

table {
  border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   2. レイアウト共通
   -------------------------------------------------------------------------- */
.l-wrap {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.l-narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.l-sec {
  padding-top: 54px;
  padding-bottom: 54px;
}

.l-sec--alt {
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.l-sec--tight {
  padding-top: 38px;
  padding-bottom: 38px;
}

/* --------------------------------------------------------------------------
   3. グローバルヘッダー
   -------------------------------------------------------------------------- */
.c-gheader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(8px);
}

.c-gheader__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
}

.nz-logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  line-height: 1.25;
}

.c-logo span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sub);
  letter-spacing: .18em;
  margin-top: 3px;
}

.c-gnav {
  display: flex;
  gap: 22px;
  font-size: 14px;
  font-weight: 700;
}

.c-gnav a {
  display: block;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.c-gnav a:hover,
.c-gnav a.is-current {
  color: var(--key);
  border-bottom-color: var(--key);
}

.c-gsearch {
  margin-left: auto;
  display: flex;
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
  height: 38px;
  min-width: 230px;
}

.c-gsearch__icon {
  color: var(--mute);
  font-size: 15px;
  margin-right: 8px;
  line-height: 1;
}

.c-gsearch input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  width: 100%;
}

/* ハンバーガー（SPのみ表示） */
.c-hamburger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.c-hamburger span {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
}

.c-hamburger span:nth-child(1) { top: 14px; }
.c-hamburger span:nth-child(2) { top: 20px; }
.c-hamburger span:nth-child(3) { top: 26px; }

.c-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.c-hamburger.is-open span:nth-child(2) { opacity: 0; }
.c-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ドロワー */
.c-drawer {
  display: none;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: #fff;
  padding: 24px;
  overflow-y: auto;
}

.c-drawer.is-open {
  display: block;
}

.c-drawer a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. パンくず
   -------------------------------------------------------------------------- */
.c-breadcrumb {
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  font-size: 12.5px;
  color: var(--sub);
}

.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.c-breadcrumb li::after {
  content: "／";
  color: #c3c7d0;
  margin-left: 8px;
}

.c-breadcrumb li:last-child::after {
  content: none;
}

.c-breadcrumb a:hover {
  color: var(--key);
}

/* --------------------------------------------------------------------------
   5. ヒーロー（TOP）
   -------------------------------------------------------------------------- */
.p-hero {
  padding-top: 52px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}

.p-hero__grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 44px;
  align-items: center;
}

.p-hero h1 {
  font-size: 31px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .01em;
  margin-bottom: 16px;
}

.p-hero h1 em {
  font-style: normal;
  color: var(--key);
}

.p-hero__lead {
  font-size: 15px;
  color: var(--sub);
  line-height: 2;
  max-width: 44em;
}

.p-hero__visual img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.p-stat {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.p-stat div {
  border-left: 3px solid var(--key-soft);
  padding-left: 14px;
}

.p-stat b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.4;
}

.p-stat small {
  font-size: 12.5px;
  color: var(--sub);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. ファセット（3軸絞り込み）
   -------------------------------------------------------------------------- */
.c-facet {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px 28px;
  margin-top: 34px;
}

.c-facet__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--key);
  margin-bottom: 4px;
}

.c-facet__desc {
  font-size: 13.5px;
  color: var(--sub);
  margin-bottom: 20px;
}

.c-facet__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.c-facet__col h3 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}

.c-facet__hint {
  font-size: 12.5px;
  color: var(--sub);
  margin-bottom: 11px;
}

.c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.c-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 700;
  color: #33363f;
}

.c-chip:hover,
.c-chip.is-on {
  border-color: var(--key);
  color: var(--key);
  background: var(--key-soft);
}

.c-chip--more {
  color: var(--key);
  border-style: dashed;
}

.c-facet__go {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   7. ボタン
   -------------------------------------------------------------------------- */
.c-btn {
  display: inline-block;
  background: var(--key);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: 8px;
  text-align: center;
}

.c-btn:hover {
  background: var(--key-dark);
  color: #fff;
}

.c-btn--ghost {
  background: #fff;
  color: var(--key);
  border: 1px solid var(--key);
}

.c-btn--ghost:hover {
  background: var(--key-soft);
  color: var(--key);
}

.c-btn--wide {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. セクション見出し
   -------------------------------------------------------------------------- */
.c-shead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.c-shead h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.5;
}

.c-shead__all {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--key);
  white-space: nowrap;
}

.c-shead__all:hover {
  color: var(--key-dark);
  text-decoration: underline;
}

.c-sdesc {
  font-size: 14px;
  color: var(--sub);
  max-width: 52em;
  margin-bottom: 26px;
  line-height: 1.95;
}

/* --------------------------------------------------------------------------
   9. タブ
   -------------------------------------------------------------------------- */
.c-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.c-tab {
  font-size: 14px;
  font-weight: 800;
  padding: 11px 18px;
  color: var(--sub);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.c-tab.is-on {
  color: var(--key);
  border-bottom-color: var(--key);
}

.c-tab small {
  font-weight: 700;
  font-size: 11.5px;
  color: var(--mute);
  margin-left: 5px;
}

/* --------------------------------------------------------------------------
   10. 作品カード
   -------------------------------------------------------------------------- */
.c-works {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

.c-works--4 {
  grid-template-columns: repeat(4, 1fr);
}

.c-work {
  display: flex;
  flex-direction: column;
}

.c-work__thumb {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #f0f1f4;
  aspect-ratio: 3 / 4;
}

.c-work__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.c-work:hover .c-work__thumb img {
  transform: scale(1.04);
}

.c-work__media {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(22, 24, 29, .86);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.c-work h3,
.c-work h4 {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.65;
  margin-top: 11px;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-work:hover h3,
.c-work:hover h4 {
  color: var(--key);
}

.c-work__meta {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.7;
}

.c-work__price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 4px;
}

.c-work__tags {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.c-work__tags i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--key);
  background: var(--key-soft);
  border-radius: 3px;
  padding: 2px 6px;
}

/* --------------------------------------------------------------------------
   11. シチュエーションカード
   -------------------------------------------------------------------------- */
.c-sits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.c-sit {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 18px 19px 19px;
  display: flex;
  flex-direction: column;
}

.c-sit:hover {
  border-color: var(--key);
  box-shadow: 0 4px 16px rgba(27, 79, 138, .08);
}

.c-sit__no {
  font-size: 11px;
  font-weight: 800;
  color: #b6bcc6;
  letter-spacing: .1em;
}

.c-sit h3 {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.6;
  margin-top: 6px;
  margin-bottom: 8px;
}

.c-sit:hover h3 {
  color: var(--key);
}

.c-sit p {
  font-size: 12.5px;
  color: var(--sub);
  line-height: 1.8;
  flex: 1;
}

.c-sit__cnt {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--key);
  margin-top: 11px;
}

/* 画像つきの大きめカード */
.c-sit--img {
  padding: 0;
  overflow: hidden;
}

.c-sit--img .c-sit__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f0f1f4;
}

.c-sit--img .c-sit__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.c-sit--img:hover .c-sit__thumb img {
  transform: scale(1.04);
}

.c-sit--img .c-sit__body {
  padding: 18px 19px 19px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* --------------------------------------------------------------------------
   12. 3軸カード（画像つき）
   -------------------------------------------------------------------------- */
.c-axis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.c-axis__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.c-axis__item:hover {
  border-color: var(--key);
  box-shadow: 0 4px 16px rgba(27, 79, 138, .08);
}

.c-axis__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f0f1f4;
}

.c-axis__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.c-axis__item:hover .c-axis__thumb img {
  transform: scale(1.04);
}

.c-axis__body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c-axis__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--key);
}

.c-axis__body h3 {
  font-size: 17px;
  font-weight: 800;
  margin-top: 8px;
  margin-bottom: 8px;
}

.c-axis__body p {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.95;
  flex: 1;
}

.c-axis__list {
  margin-top: 14px;
  font-size: 13.5px;
}

.c-axis__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hair);
  padding-top: 6px;
  padding-bottom: 6px;
}

.c-axis__list li:last-child {
  border-bottom: none;
}

.c-axis__list a {
  font-weight: 700;
}

.c-axis__list a:hover {
  color: var(--key);
}

.c-axis__list span {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. 段階テーブル（堕ち方）
   -------------------------------------------------------------------------- */
.c-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-mx {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 13.5px;
  min-width: 640px;
}

.c-mx th,
.c-mx td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.85;
}

.c-mx th {
  background: #f0f2f5;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.c-mx tr:last-child td {
  border-bottom: none;
}

.c-mx__num {
  font-weight: 800;
  color: var(--key);
  white-space: nowrap;
}

.c-mx a:hover {
  color: var(--key);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. 記事カード
   -------------------------------------------------------------------------- */
.c-arts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.c-art {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.c-art:hover {
  border-color: var(--key);
  box-shadow: 0 4px 16px rgba(27, 79, 138, .08);
}

.c-art__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f0f1f4;
}

.c-art__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.c-art:hover .c-art__thumb img {
  transform: scale(1.04);
}

.c-art__body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c-art__cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--key);
}

.c-art__body h3 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 9px;
}

.c-art:hover h3 {
  color: var(--key);
}

.c-art__body p {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.9;
  flex: 1;
}

.c-art__read {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--key);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   15. 記事本文
   -------------------------------------------------------------------------- */
.p-article {
  padding-top: 44px;
  padding-bottom: 60px;
}

.p-article__head {
  margin-bottom: 30px;
}

.p-article__cat {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--key);
  background: var(--key-soft);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 14px;
}

.p-article h1 {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: .01em;
  margin-bottom: 14px;
}

.p-article__meta {
  font-size: 12.5px;
  color: var(--sub);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.p-article__eyecatch {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 34px;
}

.p-body h2 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.6;
  margin-top: 46px;
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 4px solid var(--key);
}

.p-body h3 {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.7;
  margin-top: 34px;
  margin-bottom: 12px;
}

.p-body p {
  font-size: 15.5px;
  line-height: 2.05;
  margin-bottom: 20px;
}

.p-body strong {
  font-weight: 800;
}

.p-body a {
  color: var(--key);
  text-decoration: underline;
  font-weight: 700;
}

.p-body a:hover {
  color: var(--key-dark);
}

.p-body ul,
.p-body ol {
  margin-bottom: 22px;
  padding-left: 1.4em;
}

.p-body ul li {
  list-style: disc;
  font-size: 15px;
  line-height: 2;
  margin-bottom: 8px;
}

.p-body ol li {
  list-style: decimal;
  font-size: 15px;
  line-height: 2;
  margin-bottom: 8px;
}

/* 目次 */
.c-toc {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px 26px;
  margin-bottom: 40px;
}

.c-toc__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.c-toc ol {
  counter-reset: toc;
}

.c-toc ol li {
  counter-increment: toc;
  font-size: 14.5px;
  line-height: 2.15;
}

.c-toc ol li::before {
  content: counter(toc) ".";
  color: var(--key);
  font-weight: 800;
  margin-right: 8px;
}

.c-toc a:hover {
  color: var(--key);
  text-decoration: underline;
}

/* 引用・囲み */
.c-quote {
  background: var(--soft);
  border-left: 3px solid var(--key);
  padding: 20px 24px;
  font-size: 14.5px;
  color: #3f424c;
  line-height: 2.05;
  margin-top: 24px;
  margin-bottom: 26px;
  border-radius: 0 8px 8px 0;
}

.c-note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 13px;
  color: var(--warn-ink);
  line-height: 1.95;
  margin-top: 24px;
  margin-bottom: 26px;
}

.c-point {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-top: 24px;
  margin-bottom: 26px;
}

.c-point__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--key);
  margin-bottom: 10px;
}

.c-point ul li {
  list-style: none;
  font-size: 14.5px;
  line-height: 2;
  padding-left: 1.3em;
  position: relative;
  margin-bottom: 6px;
}

.c-point ul li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--key);
  font-size: 9px;
  top: .65em;
}

/* 関連リンク */
.c-related {
  border-top: 1px solid var(--line);
  margin-top: 46px;
  padding-top: 32px;
}

.c-related h2 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 18px;
}

.c-related__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.c-related__item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  display: block;
}

.c-related__item:hover {
  border-color: var(--key);
  background: var(--soft);
}

.c-related__item span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--key);
}

.c-related__item p {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  margin-top: 6px;
}

/* 著者 */
.c-author {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-top: 40px;
  font-size: 13.5px;
  color: var(--sub);
  line-height: 1.95;
}

.c-author strong {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   16. 一覧ページのフィルタ
   -------------------------------------------------------------------------- */
.c-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.c-filter__btn {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sub);
  background: #fff;
}

.c-filter__btn.is-on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.c-filter__btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.c-filter__btn.is-on:hover {
  color: #fff;
}

.c-count {
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 20px;
  font-weight: 700;
}

.c-count b {
  color: var(--key);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   17. 固定ページ本文
   -------------------------------------------------------------------------- */
.p-page {
  padding-top: 44px;
  padding-bottom: 60px;
}

.p-page h1 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 26px;
}

.p-page h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.6;
  margin-top: 40px;
  margin-bottom: 14px;
  padding-left: 13px;
  border-left: 4px solid var(--key);
}

.p-page p {
  font-size: 15px;
  line-height: 2.05;
  margin-bottom: 18px;
}

.p-page dl {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 22px;
}

.p-page dt {
  background: var(--soft);
  font-size: 13.5px;
  font-weight: 800;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.p-page dd {
  font-size: 14.5px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  line-height: 1.95;
}

.p-page dl > *:last-child {
  border-bottom: none;
}

.p-page a {
  color: var(--key);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   18. フッター
   -------------------------------------------------------------------------- */
.c-gfooter {
  background: #16181d;
  color: rgba(255, 255, 255, .72);
  padding-top: 44px;
  padding-bottom: 40px;
  font-size: 13.5px;
  margin-top: 0;
}

.c-gfooter__cols {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.c-gfooter h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: 11px;
}

.c-gfooter ul li {
  line-height: 2.1;
}

.c-gfooter a:hover {
  color: #fff;
  text-decoration: underline;
}

.c-gfooter__copy {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 20px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.9;
}

.c-r18 {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  margin-right: 10px;
}

/* --------------------------------------------------------------------------
   19. 年齢確認モーダル
   -------------------------------------------------------------------------- */
.c-agegate {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(22, 24, 29, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.c-agegate.is-hidden {
  display: none;
}

.c-agegate__box {
  background: #fff;
  border-radius: 14px;
  padding: 38px 34px 34px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.c-agegate__box h2 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 14px;
  line-height: 1.6;
}

.c-agegate__box p {
  font-size: 14px;
  color: var(--sub);
  line-height: 1.95;
  margin-bottom: 24px;
}

.c-agegate__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.c-agegate__btns .c-btn {
  min-width: 150px;
}

/* --------------------------------------------------------------------------
   20. ユーティリティ
   -------------------------------------------------------------------------- */
/* 日本語の泣き別れ防止。意味のまとまりごとに囲って使う */
.u-nobreak {
  display: inline-block;
}

.u-mt0 { margin-top: 0; }
.u-mb0 { margin-bottom: 0; }
.u-center { text-align: center; }
.u-hidden { display: none; }

.u-more {
  text-align: center;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   21. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .c-works {
    grid-template-columns: repeat(4, 1fr);
  }

  .p-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .p-hero__visual {
    order: -1;
  }
}

@media (max-width: 900px) {
  .c-gnav,
  .c-gsearch {
    display: none;
  }

  .c-hamburger {
    display: block;
  }

  .c-facet__cols {
    grid-template-columns: 1fr;
  }

  .c-sits {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-axis,
  .c-arts {
    grid-template-columns: 1fr;
  }

  .c-related__list {
    grid-template-columns: 1fr;
  }

  .p-hero h1 {
    font-size: 24px;
  }

  .p-article h1 {
    font-size: 22px;
  }

  .l-sec {
    padding-top: 42px;
    padding-bottom: 42px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 15px;
  }

  .l-wrap,
  .l-narrow {
    padding-left: 18px;
    padding-right: 18px;
  }

  .c-works {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-sits {
    grid-template-columns: 1fr;
  }

  .c-facet {
    padding: 20px 18px 22px;
  }

  .p-stat {
    gap: 20px;
  }

  .p-stat b {
    font-size: 20px;
  }

  .p-body h2 {
    font-size: 19px;
  }

  .p-body p {
    font-size: 15px;
  }

  .c-toc {
    padding: 20px 20px 22px;
  }

  .c-gfooter__cols {
    gap: 30px;
  }

  .c-facet__go .c-btn {
    width: 100%;
  }
}

/* ==========================================================================
   22. WordPress（Arkhe子テーマ）向けの調整
   静的版（html/）には無い、Arkhe と同居するための追記。
   ========================================================================== */

/* Arkhe 既定のヘッダー余白を打ち消す。ヘッダー自体は template-parts/header.php で置換済み */
.l-header,
.l-header__body {
  display: none;
}

/* 🔴 Arkhe の .l-article は max-width:860px + padding が入っている。
   記事は 860px のままでよいが、軸ページ（固定ページ）は全幅で使う。 */
.nz-wide-page .l-article {
  max-width: none !important;
  padding: 0 !important;
}

.nz-wide-page .l-main {
  padding-top: 0;
  padding-bottom: 0;
}

/* 固定ページ・投稿でサイドバーを使わない前提。本文が左に寄るのを防ぐ */
.l-content {
  display: block;
}

/* 🔴 本文の包みは .c-postContent。.post_content にCSSを当てても効かない。
   静的版の .p-body に当てていたスタイルを、そのまま .c-postContent にも効かせる。 */
.c-postContent h2 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.6;
  margin-top: 46px;
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 4px solid var(--key);
  background: none;
}

.c-postContent h3 {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.7;
  margin-top: 34px;
  margin-bottom: 12px;
}

.c-postContent p {
  font-size: 15.5px;
  line-height: 2.05;
  margin-bottom: 20px;
}

.c-postContent a {
  color: var(--key);
  text-decoration: underline;
  font-weight: 700;
}

.c-postContent ul li,
.c-postContent ol li {
  font-size: 15px;
  line-height: 2;
  margin-bottom: 8px;
}

.c-postContent strong {
  font-weight: 800;
}

/* 記事タイトル */
.l-article .entry-title {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.65;
}

/* 🔴 固定ヘッダーぶんアンカーが潜るのを防ぐ */
.c-postContent h2[id],
.c-postContent h3[id] {
  scroll-margin-top: 84px;
}

/* 本文末尾の導線 */
.nz-after-entry {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding-top: 30px;
  text-align: center;
}

.nz-after-entry p {
  font-size: 14.5px;
  color: var(--sub);
  margin-bottom: 16px;
}

/* フッター */
.nz-ftnav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.nz-ftnav a {
  color: rgba(255, 255, 255, .78);
}

.nz-ftnav a:hover {
  color: #fff;
  text-decoration: underline;
}

.nz-ftnote {
  font-size: 12.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  max-width: 60em;
  margin: 0 auto;
}

/* 一覧ページ（カテゴリアーカイブ） */
.archive .l-article,
.search .l-article {
  max-width: var(--container);
}


/* --------------------------------------------------------------------------
   23. Arkhe の既定パーツを止める
   実測で見つかった重なり（2026-08-13）：
     - .l-header … 自作ヘッダーと二重になる
     - .l-pageTitle / .p-pageHeader … ページ上部に黒い帯とタイトルが出る
     - .c-breadcrumb（Arkhe側） … 自作パンくずと二重になる
   -------------------------------------------------------------------------- */
.l-header,
.l-header__body,
.l-fixHeader {
  display: none !important;
}

/* 🔴 Arkhe のページ上部（.l-content__top .p-topArea）は完全に止める。
   2026-08-13：独自の下層ページヘッダー（.nz-phead / functions.php の nz_page_header）を
   作ったため、残すとタイトル帯が二重に出る。 */
.l-content__top,
.p-topArea {
  display: none !important;
}

/* 🔴 Arkhe の .l-container は max-width:1296px / margin-left:72px / padding-left:48px を持ち、
   ページ全体を120px内側へ押し込む。ヘッダーは .l-content の外なので影響を受けず、
   結果として「ヘッダーだけ広くMVが狭い」状態になっていた（実測 ロゴx=52 / MVテキストx=152）。
   このサイトは幅の制御を .l-wrap 側で一元管理するので、.l-container は素通しにする。 */
.l-container {
  margin-left: auto;
  margin-right: auto;
  max-width: unset;
  padding-left: unset;
  padding-right: unset;
  width: 100%;
}

.l-content__body {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 🔴 サイドバーを使わない。残すと本文が左に寄る（gotcha-arkhe-sidebar-left-shift） */
.l-sidebar,
.l-content__sidebar {
  display: none !important;
}

.l-main {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
}

/* アイキャッチが縦に伸びすぎるのを抑える */
.l-article .eyecatch img,
.p-entry__thumb img {
  max-height: 420px;
  object-fit: cover;
  width: 100%;
}

/* Arkhe のパンくずは1本だけ残す（本文側には入れていない） */
.p-breadcrumb + .p-breadcrumb {
  display: none;
}

/* 🔴 カード全体を <a> にしているため、Arkhe の本文リンク色（青・下線）が
   カード内の見出しや本文まで青くする。カード内では打ち消す。 */
.c-postContent a.c-sit,
.c-postContent a.c-work,
.c-postContent a.c-art,
.c-postContent a.c-axis__item,
.c-postContent a.c-related__item,
.c-postContent a.c-chip,
.c-postContent a.c-btn {
  color: inherit;
  text-decoration: none;
}

.c-postContent a.c-btn {
  color: #fff;
}

.c-postContent a.c-btn--ghost {
  color: var(--key);
}

.c-postContent a.c-chip {
  color: #33363f;
}

.c-postContent a.c-chip:hover,
.c-postContent a.c-chip.is-on {
  color: var(--key);
}

.c-postContent .c-sit h3,
.c-postContent .c-work h3,
.c-postContent .c-art h3 {
  color: var(--ink);
  text-decoration: none;
}

.c-postContent .c-sit:hover h3,
.c-postContent .c-work:hover h3,
.c-postContent .c-art:hover h3 {
  color: var(--key);
}

/* 本文内に置いたセクションは、記事本文の余白ルールを受けない */
.c-postContent .l-sec {
  padding-top: 0;
  padding-bottom: 34px;
}

.c-postContent .l-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* 🔴 Arkhe の関連記事リスト（.p-postList）が横にはみ出す。実測 1464px > 1440px */
.p-entry__foot,
.p-entry__related,
.p-postList {
  max-width: 100%;
  overflow-x: hidden;
}

.l-wrapper {
  overflow-x: hidden;
}

/* 記事・法的ページは読み幅に戻す（軸ページは nz-wide-page で全幅のまま） */
.single .l-article,
.page:not(.nz-wide-page) .l-article {
  max-width: 880px !important;
  margin-left: auto;
  margin-right: auto;
}

.single .l-content__top .l-container,
.page:not(.nz-wide-page) .l-content__top .l-container {
  max-width: 880px;
}

/* ==========================================================================
   24. ブラッシュアップ（2026-08-13）
   実測で判明した不具合の修正と、視認性・押せる感の強化。
   ========================================================================== */

/* --------------------------------------------------------------------------
   24-1. テーブル：白文字問題と padding が効かない問題
   🔴 Arkhe の `:where(thead) :is(td,th){ background-color:var(--ark-color--main); color:#fff }`
      が th の文字色を白にしていた。こちらは背景しか指定していなかったため、
      薄いグレー背景＋白文字で読めない状態になっていた。色も必ずセットで指定する。
   🔴 padding は Arkhe が em 指定で後勝ちする（指定13px→実測6.25px）。
      セレクタを重ねたうえで !important で確定させる。
   -------------------------------------------------------------------------- */
.c-mx thead th,
.c-mx thead td,
.c-postContent .c-mx thead th,
.c-postContent .c-mx thead td {
  background-color: #eef1f6 !important;
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  border-bottom: 2px solid var(--line) !important;
}

.c-mx th,
.c-mx td,
.c-postContent .c-mx th,
.c-postContent .c-mx td {
  padding: 15px 18px !important;
  line-height: 1.7 !important;
  border-left: none !important;
  text-align: left;
  vertical-align: top;
}

/* 🔴 tbody の th も Arkhe が灰色背景にする。こちらは通常セルとして扱う */
.c-mx tbody th,
.c-postContent .c-mx tbody th {
  background-color: transparent !important;
  color: var(--ink) !important;
}

/* ゼブラ：横長の表でも行の対応が追える */
.c-mx tbody tr:nth-child(odd),
.c-postContent .c-mx tbody tr:nth-child(odd) {
  background-color: #fbfcfd;
}

.c-mx tbody tr:hover,
.c-postContent .c-mx tbody tr:hover {
  background-color: var(--key-soft);
}

.c-mx__num {
  font-size: 15px;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   24-2. ヘッダーを全幅にする
   -------------------------------------------------------------------------- */
/* 🔴 背景は全幅のまま、中身は l-wrap と同じ基準に揃える。
   padding だけ広げるとロゴとMVテキストの左端がズレる（実測 40px vs 145px）。 */
/* ヘッダーは横幅100%。中身も画面端まで使う */
.c-gheader__inner {
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
  height: 74px;
}

.c-gheader {
  box-shadow: 0 1px 0 rgba(22, 24, 29, .04);
}

/* --------------------------------------------------------------------------
   24-3. ファーストビュー：キャッチの強化と数値のカード化
   -------------------------------------------------------------------------- */
.p-hero h1 {
  font-size: 34px;
  line-height: 1.55;
  letter-spacing: -.01em;
}

/* キーフレーズにマーカー線を引いて視線を誘導する。
   🔴 em 全体に引くと inline-block の語間の空白にも線が乗って不格好になる。
      語のまとまり（.u-nobreak）ごとに引く。 */
.p-hero h1 em .u-nobreak {
  background-image: linear-gradient(transparent 60%, rgba(27, 79, 138, .18) 60%);
  padding-bottom: 2px;
}

.p-stat {
  gap: 10px;
  margin-top: 30px;
  flex-wrap: nowrap;
}

/* 数値はミニカードにまとめて、データ量が一目で伝わるようにする */
.p-stat div {
  background: var(--soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--key);
  border-radius: 10px;
  padding: 13px 14px 12px;
  min-width: 0;
  flex: 1 1 0;
  white-space: nowrap;
}

.p-stat b {
  font-size: 24px;
  letter-spacing: -.03em;
}

.p-stat small {
  color: var(--sub);
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   24-4. 絞り込みチップ：選択中と未選択の差を明確にする
   -------------------------------------------------------------------------- */
.c-chip {
  border-width: 1.5px;
  padding: 8px 15px;
  background: #fff;
  color: #4a4d59;
}

.c-chip:hover {
  border-color: var(--key);
  color: var(--key);
  background: var(--key-soft);
}

/* 選択中は青ベタ＋白文字。押せること・選ばれていることを一目で伝える */
.c-chip.is-on {
  background: var(--key) !important;
  border-color: var(--key) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(27, 79, 138, .25);
}

.c-chip.is-on::before {
  content: "✓ ";
  font-weight: 800;
}

.c-filter__btn {
  border-width: 1.5px;
  padding: 9px 18px;
}

/* --------------------------------------------------------------------------
   24-5. カード：押せる感（ホバーで浮き上がる）
   -------------------------------------------------------------------------- */
.c-work,
.c-sit,
.c-art,
.c-axis__item {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.c-work:hover,
.c-sit:hover,
.c-art:hover,
.c-axis__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(22, 24, 29, .10);
}

.c-work__thumb {
  box-shadow: 0 1px 3px rgba(22, 24, 29, .06);
}

/* タグは小さすぎると押しづらい。余白を広げる */
.c-work__tags i {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   24-6. シチュエーションカード：画像の上に分類ラベルを固定表示
   図鑑としてのインデックス性を上げる。data-label は front-page.php で付ける。
   -------------------------------------------------------------------------- */
.c-sit--img .c-sit__thumb {
  position: relative;
}

.c-sit--img .c-sit__thumb[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(22, 24, 29, .82));
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 26px 14px 10px;
}

/* --------------------------------------------------------------------------
   24-7. CTA：最重要アクションは青ベタで埋もれさせない
   -------------------------------------------------------------------------- */
.c-btn {
  padding: 14px 30px;
  box-shadow: 0 2px 8px rgba(27, 79, 138, .22);
}

.c-btn:hover {
  box-shadow: 0 4px 14px rgba(27, 79, 138, .32);
  transform: translateY(-1px);
}

.c-btn--ghost {
  box-shadow: none;
}

.c-btn--ghost:hover {
  box-shadow: 0 2px 8px rgba(27, 79, 138, .14);
}

.c-shead__all {
  padding: 6px 2px;
}

/* --------------------------------------------------------------------------
   24-8. 本文の可読性
   -------------------------------------------------------------------------- */
.c-postContent p,
.p-body p {
  line-height: 2.1;
}

.c-sdesc {
  line-height: 2;
}

/* --------------------------------------------------------------------------
   24-9. スマホ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .c-gheader__inner {
    padding-left: 20px;
    padding-right: 20px;
    height: 64px;
  }

  /* 絞り込みチップは折り返さず横スクロールさせる（縦に伸びて操作しづらくなるため） */
  .c-facet__col .c-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .c-facet__col .c-chip {
    flex: 0 0 auto;
  }

  .c-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .c-filter__btn {
    flex: 0 0 auto;
  }

  /* 表は横スクロール。スクロールできることを右端の影で示す */
  .c-table-wrap {
    position: relative;
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat,
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(22, 24, 29, .12), transparent) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(22, 24, 29, .12), transparent) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  .c-mx th,
  .c-mx td,
  .c-postContent .c-mx th,
  .c-postContent .c-mx td {
    padding: 12px 14px !important;
  }

  .p-hero h1 {
    font-size: 26px;
  }

  .p-stat div {
    min-width: 0;
    flex: 1 1 44%;
    padding: 12px 14px 11px;
  }

  /* 🔴 「50,000+」「シチュエーション分類」が折り返して2行になっていた */
  .p-stat b {
    font-size: 21px;
    white-space: nowrap;
  }

  .p-stat small {
    font-size: 11px;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 横スクロールできることを右端のフェードで示す */
  .c-facet__col .c-chips,
  .c-filter {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}

/* --------------------------------------------------------------------------
   24-10. ロゴ（SVGマーク＋ロゴタイプ）
   🔴 日本語のロゴタイプはSVGでパス化していない（フォント依存で崩れるため）。
      マークだけSVGにして、文字はHTML側で組む。
   -------------------------------------------------------------------------- */
.nz-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nz-logo__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.nz-logo__text {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
}

.nz-logo__text span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sub);
  letter-spacing: .18em;
  margin-top: 3px;
}

@media (max-width: 600px) {
  .nz-logo__mark {
    width: 30px;
    height: 30px;
  }

  .nz-logo__text {
    font-size: 17px;
  }
}

/* ==========================================================================
   25. フッター（自作。template-parts/footer.php と対）
   Arkhe 既定はコピーライト1行だけで、サイトの導線が完全に切れていた。
   上段＝ブランド＋サイトマップ4列、下段＝法的表記に作り替えている。
   ========================================================================== */
.nz-footer {
  margin-top: 72px;
  background: #12141a;
  color: rgba(255, 255, 255, .68);
  font-size: 13.5px;
  line-height: 1.9;
}

.nz-footer__main {
  padding-top: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.nz-footer__grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 44px;
  align-items: start;
}

/* --- ブランド --- */
.nz-footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.nz-footer__logo img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.nz-footer__logo span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
}

.nz-footer__logo small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .45);
  margin-top: 4px;
}

.nz-footer__desc {
  font-size: 12.5px;
  line-height: 2;
  color: rgba(255, 255, 255, .55);
  margin-top: 18px;
}

.nz-footer__age {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .62);
}

.nz-footer__age strong {
  color: #fff;
  font-weight: 800;
}

.nz-footer__ageicon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: rgba(255, 255, 255, .7);
}

/* --- サイトマップ4列 --- */
.nz-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.nz-ftcol__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.nz-ftcol__icon {
  width: 17px;
  height: 17px;
  color: #7fa8d8;
  flex: 0 0 auto;
}

.nz-ftcol ul {
  list-style: none;
}

.nz-ftcol li {
  margin-bottom: 3px;
}

.nz-ftcol a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  line-height: 1.7;
  padding: 5px 0;
}

.nz-ftcol a:hover {
  color: #fff;
}

.nz-ftcol__arrow {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .3);
  transition: transform .15s ease, color .15s ease;
}

.nz-ftcol a:hover .nz-ftcol__arrow {
  transform: translateX(2px);
  color: #7fa8d8;
}

/* --- 下段 --- */
.nz-footer__bottom {
  padding-top: 20px;
  padding-bottom: 24px;
}

.nz-footer__bottominner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.nz-footer__note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
}

.nz-footer__note .c-r18 {
  border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .78);
  flex: 0 0 auto;
  margin-right: 0;
}

.nz-footer__copy {
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .04em;
}

@media (max-width: 1000px) {
  .nz-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .nz-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .nz-footer {
    margin-top: 48px;
  }

  .nz-footer__main {
    padding-top: 40px;
    padding-bottom: 36px;
  }

  .nz-footer__cols {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* SPは列を畳んで、見出しをタップで開く形にはせず、素直に並べる。
     リンク数が多くないので、開閉より一覧のほうが速い */
  .nz-ftcol {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 14px;
    margin-bottom: 10px;
  }

  .nz-ftcol:last-child {
    border-bottom: none;
  }

  .nz-footer__bottominner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* フッターのリンク：ラベルと件数を左右に分ける（件数込みだと2行に折り返していた） */
/* 🔴 「プライバシーポリシー」が2行に割れていた。列内では折り返さない */
.nz-ftcol__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nz-ftcol__count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .38);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.nz-ftcol a:hover .nz-ftcol__count {
  color: rgba(255, 255, 255, .6);
}

/* 年齢注意の囲みは行内で折り返させない */
.nz-footer__age span {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   26. 下層ページの共通ヘッダー（nz-phead）
   全幅・薄いグラデ・センター寄せ。アイコン＋英語サブ＋日本語タイトル。
   🔴 Arkhe 既定の .l-content__top は 24-1 で非表示にしてある（濃いグレー帯だったため）。
   ========================================================================== */
.nz-phead {
  width: 100%;
  padding: 52px 0 46px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1100px 260px at 50% -60px, rgba(27, 79, 138, .10), transparent 70%),
    linear-gradient(180deg, #f4f7fb 0%, #fafbfd 55%, #fff 100%);
}

.nz-phead__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nz-phead__icon {
  width: 30px;
  height: 30px;
  color: var(--key);
  margin-bottom: 14px;
  stroke-width: 1.6;
}

.nz-phead__sub {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .26em;
  color: var(--key);
  text-indent: .26em;
  margin-bottom: 10px;
}

.nz-phead__title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink);
  max-width: 24em;
}

.nz-phead__lead {
  font-size: 14px;
  color: var(--sub);
  line-height: 1.9;
  margin-top: 12px;
  max-width: 40em;
}

/* 記事ページはカテゴリ名を出すだけなので低くする */
.nz-phead--slim {
  padding: 34px 0 28px;
}

.nz-phead--slim .nz-phead__icon {
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
}

.nz-phead--slim .nz-phead__title {
  font-size: 20px;
}

/* 下層ページはパンくずを詰めて、ページヘッダーと連続させる */
.nz-phead + .l-content .p-breadcrumb,
.nz-phead + .l-content .c-breadcrumb {
  margin-top: 0;
}

@media (max-width: 900px) {
  .nz-phead {
    padding: 38px 0 34px;
  }

  .nz-phead__title {
    font-size: 23px;
  }

  .nz-phead__icon {
    width: 26px;
    height: 26px;
  }

  .nz-phead__lead {
    font-size: 13px;
  }

  .nz-phead--slim {
    padding: 26px 0 22px;
  }
}

/* 🔴 h1 の重複を避ける。固定ページ・アーカイブのタイトルは .nz-phead が担うので、
   Arkhe が本文上に出すタイトルは消す（記事だけは entry-title を h1 として残す） */
.page .l-article .entry-title,
.archive .l-article .entry-title,
.search .l-article .entry-title,
.page .c-pageTitle,
.archive .c-pageTitle {
  display: none !important;
}

/* ==========================================================================
   27. MV（作り直し）
   旧：左テキスト＋右に小さな角丸画像。要素が並んでいるだけで平凡だった。
   新：画像を画面右端までブリードさせ、左端をグラデでテキストに溶かす。
       ファセットパネルはMVに重ねて浮かせ、奥行きを作る。
   ========================================================================== */
.p-hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}

.p-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: 0;
}

.p-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
}

/* 画像の左端を背景色に溶かす。境界線を作らないことで一枚の絵に見せる */
.p-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #f6f8fb 0%, rgba(246, 248, 251, .86) 14%, rgba(246, 248, 251, 0) 48%),
    linear-gradient(to bottom, rgba(246, 248, 251, .40) 0%, rgba(246, 248, 251, 0) 26%);
}

.p-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 72px;
  padding-bottom: 96px;
}

.p-hero__text {
  max-width: 720px;
}

.p-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--key);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(27, 79, 138, .18);
  border-radius: 999px;
  padding: 7px 15px 7px 12px;
  margin-bottom: 22px;
}

.p-hero__eyebrowicon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.p-hero h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.48;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.p-hero__lead {
  font-size: 15px;
  color: #4a4d59;
  line-height: 2.05;
  max-width: 34em;
}

/* ファセットパネルはMVに重ねて浮かせる */
.p-hero__facetwrap {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}

.p-hero__facetwrap .c-facet {
  margin-top: 0;
  background: #fff;
  border-color: rgba(22, 24, 29, .08);
  box-shadow: 0 14px 40px rgba(22, 24, 29, .10);
  padding: 28px 30px 30px;
}

.p-hero .p-stat {
  margin-top: 30px;
}

.p-hero .p-stat div {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(2px);
}

@media (max-width: 1100px) {
  .p-hero__bg {
    width: 50%;
  }

  .p-hero h1 {
    font-size: 34px;
  }
}

@media (max-width: 900px) {
  .p-hero {
    min-height: 0;
    display: block;
  }

  /* SPでは画像を上に全幅で置き、テキストを下に流す */
  .p-hero__bg {
    position: relative;
    width: 100%;
    height: 260px;
  }

  .p-hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(246, 248, 251, 0) 40%, #f4f7fb 100%),
      linear-gradient(to right, rgba(246, 248, 251, .35), rgba(246, 248, 251, 0) 40%);
  }

  .p-hero__inner {
    padding-top: 26px;
    padding-bottom: 74px;
  }

  .p-hero__text {
    max-width: none;
  }

  .p-hero h1 {
    font-size: 26px;
  }

  .p-hero__facetwrap {
    margin-top: -46px;
  }

  .p-hero__facetwrap .c-facet {
    padding: 20px 18px 22px;
  }
}


/* --------------------------------------------------------------------------
   28. セクション見出しのアイコン
   -------------------------------------------------------------------------- */
.c-shead h2 {
  display: flex;
  align-items: center;
  gap: 11px;
}

.c-shead__icon {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  color: var(--key);
  stroke-width: 1.6;
  padding: 4px;
  box-sizing: content-box;
  background: var(--key-soft);
  border-radius: 8px;
}

@media (max-width: 600px) {
  .c-shead__icon {
    width: 20px;
    height: 20px;
  }
}


/* --------------------------------------------------------------------------
   29. ヘッダーロゴ（nz-logo）
   🔴 .c-logo は Arkhe の既存クラス。同名で上書きしようとして負けていたので改名した。
   -------------------------------------------------------------------------- */
.c-gheader .nz-logo {
  display: flex !important;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}

.c-gheader .nz-logo__mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: block;
}

.c-gheader .nz-logo__text {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.c-gheader .nz-logo__text span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: .22em;
  margin-top: 4px;
  line-height: 1;
}

@media (max-width: 900px) {
  .c-gheader__inner {
    padding-left: 20px;
    padding-right: 20px;
    height: 64px;
  }

  .c-gheader .nz-logo__mark {
    width: 32px;
    height: 32px;
  }

  .c-gheader .nz-logo__text {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   30. 準備中の案内（審査前に作品カードの代わりに出す）
   -------------------------------------------------------------------------- */
.nz-prep {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px 32px 38px;
  text-align: center;
}

.nz-prep__icon {
  width: 34px;
  height: 34px;
  color: var(--key);
  margin-bottom: 14px;
  stroke-width: 1.5;
}

.nz-prep__title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--ink);
}

.nz-prep__lead {
  font-size: 14px;
  color: var(--sub);
  line-height: 2;
  max-width: 46em;
  margin: 0 auto;
}

.nz-prep__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.c-postContent .nz-prep {
  margin-top: 26px;
  margin-bottom: 26px;
}

@media (max-width: 600px) {
  .nz-prep {
    padding: 30px 20px 28px;
  }

  .nz-prep__btns .c-btn {
    width: 100%;
  }
}