html {
  scroll-behavior: smooth;
}
:root {
  --c-main: #1d3557;
  --c-main-lite-1: color-mix(
    in srgb,
    var(--c-main) 90%,
    white
  ); /* ほんの少し */
  --c-main-lite-2: color-mix(
    in srgb,
    var(--c-main) 85%,
    white
  ); /* ちょい明るめ */
  --c-main-lite-3: color-mix(
    in srgb,
    var(--c-main) 80%,
    white
  ); /* しっかり明るめ */
}
/* === 背景スタイル（.is-bg--*） === */
.is-bg--none {
  background: transparent;
}
.is-bg--gray {
  background: #f5f5f5;
}
.is-bg--red {
  background: #ffe5e5;
}
.is-bg--blue {
  background: #e7f0ff;
}
.is-bg--green {
  background: #e7f9ef;
}
.is-bg--yellow {
  background: #fff7d6;
}

.is-bg--gray,
.is-bg--red,
.is-bg--blue,
.is-bg--green,
.is-bg--yellow {
  padding: 1.25rem;
  border-radius: 0.5rem;
}
.p-column__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
}
.p-column__date {
  color: #666;
  font-size: 0.85rem;
}
.p-column__tags {
  font-size: 0.85rem;
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-column__tag {
  color: #85adca;
  text-decoration: none;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  transition: opacity 0.15s ease;
}
.p-column__tag .hash {
  margin-right: 0.25em;
  opacity: 0.75;
}
@media (hover: hover) {
  .p-column__tag:hover {
    opacity: 0.8;
  }
}
.p-column__title {
  text-align: left;
}
.p-column__title--center {
  text-align: center;
  font-weight: 500;
}
.m-heading {
  margin: 1.5rem 0;
  scroll-margin-top: 120px;
}
.m-heading__title {
  margin: 0;
  line-height: 1.3;
}
.m-heading__title.type-h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.m-heading__title.type-h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.m-heading__title.type-h4 {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
}

.m-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: left;
  margin: 2rem;
}
.m-strong {
  text-align: left;
}
.m-strong:not([class*="is-bg--"]) {
  padding: var(--space-5) var(--space-6);
  border-radius: 0.5rem;
  background: #f7f7f7;
  color: inherit;
}

.m-strong a {
  text-underline-offset: 0.15em;
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}
.is-bg--gray a,
.is-bg--blue a,
.is-bg--green a,
.is-bg--yellow a,
.is-bg--red a {
  color: var(--c-main);
  text-decoration-color: var(--c-main);
}
.is-bg--gray a:hover,
.is-bg--blue a:hover,
.is-bg--green a:hover,
.is-bg--yellow a:hover,
.is-bg--red a:hover {
  color: #264a7e;
  text-decoration-color: #264a7e;
}

@media (max-width: 48em) {
  .table th,
  .table td {
    padding: 0.6rem 0.75rem;
  }
}

.m-heading.pos-center {
  text-align: center;
}
.m-heading.pos-right {
  text-align: right;
}
.m-heading.pos-left {
  text-align: left;
}
/* === ボタン（.btn と .btn--*） === */
.btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* 塗り */
.btn--fill-blue {
  background: #2563eb;
  color: #fff;
}
.btn--fill-blue:hover {
  background: #1e4fd3;
}
.btn--fill-gray {
  background: #e5e7eb;
  color: #111827;
}
.btn--fill-gray:hover {
  background: #d6d8de;
}

/* 白抜き */
.btn--outline-blue {
  color: #2563eb;
  border: 2px solid #2563eb;
  background: transparent;
}
.btn--outline-blue:hover {
  background: rgba(37, 99, 235, 0.06);
}
.btn--outline-gray {
  color: #374151;
  border: 2px solid #9ca3af;
  background: transparent;
}
.btn--outline-gray:hover {
  background: rgba(156, 163, 175, 0.1);
}

/* テキストリンク風 */
.btn--link {
  background: transparent;
  color: #2563eb;
  padding: 0;
}
.btn--link:hover {
  text-decoration: underline;
}

/* === 表（.table と .table--*） === */
.table {
  --table-border: #e5e7eb;
  --table-stripe: #f9fafb;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
}

/* 枠なし（シンプル） */
.table--plain th {
  font-weight: 700;
}

/* 横線のみ */
.table--line-h th,
.table--line-h td {
  border-bottom: 1px solid var(--table-border);
}
.table--line-h tr:last-child td {
  border-bottom: 0;
}

/* 枠あり（グリッド） */
.table--grid th,
.table--grid td {
  border: 1px solid var(--table-border);
}
.table--grid {
  border: 1px solid var(--table-border);
}

/* シマシマ（交互背景） */
.table--stripe tbody tr:nth-child(odd) {
  background: var(--table-stripe);
}

.table td:last-child {
  white-space: nowrap;
}
@media (max-width: 48em) {
  .table {
    font-size: 0.9rem;
  }
  .table th,
  .table td {
    padding: var(--space-3) var(--space-4);
  }
}
.table a:hover {
  color: var(--c-main-lite-2);
}

/* === Image module === */
.m-image {
  max-width: 751px;
  width: min(92vw, 751px);
  margin: 1.5rem auto;
}
.m-image__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* === movie module === */
.m-movie {
  display: grid;
  place-items: center;
  margin: 1.25rem 0;
}
.m-movie > iframe,
.m-movie > embed,
.m-movie > object,
.m-movie .wp-video,
.m-movie .wp-embed,
.m-movie .wp-block-embed,
.m-movie figre {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* === toc module === */
.m-toc {
  margin: 2rem auto;
  max-width: 750px;
  background: #fff;
  border: 1px solid #d1e8f3;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.m-toc__title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.m-toc__list {
  list-style: disc outside !important;
  padding-left: 1.25rem;
  margin: 0;
}
.m-toc__item + .m-toc__item {
  margin-top: 0.25rem;
}
.m-toc__link {
  color: #111827;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}
.m-toc__link:visited {
  color: #111827;
  text-decoration-color: #111827;
}
.m-toc .m-toc__link:hover,
.m-toc .m-toc__link:focus-visible {
  color: var(--c-main-lite-2);
  text-decoration-color: var(--c-main-lite-2);
}
.m-toc__link.is-active {
  font-weight: 700;
  text-decoration: underline;
}
.m-toc__item.is-h3 {
  margin-left: 1rem;
}
.m-toc__item.is-h4 {
  margin-left: 2rem;
}
.m-toc__list li::marker {
  color: var(--c-main-lite-2);
  font-size: 0.9em;
}
.m-quote.align-left {
  text-align: left;
}
.m-quote.align-center {
  text-align: center;
}
.m-quote.align-right {
  text-align: right;
}
.m-quote__cite {
  display: block;
  margin-top: var(--space-3);
  font-style: italic;
}
.m-quote__cite a {
  text-decoration: underline;
}
.m-quote__cite a:hover {
  color: var(--c-main-lite-2);
}

/* === 区切り線ブロック=== */
.m-separator {
  border: 0;
  border-top: 1px solid var(--c-main-lite-3);
  margin-block: var(--space-6);
}
/* 太線 */
.m-separator.sep-bold {
  border-top-width: 2px;
}
/* 破線・点線 */
.m-separator.sep-dashed {
  border-top-style: dashed;
}
.m-separator.sep-dotted {
  border-top-style: dotted;
}
/* 薄線（より控えめ） */
.m-separator.sep-thin {
  border-top-color: color-mix(in srgb, var(--c-main) 75%, white);
}
/* スペーサー（線なしで余白だけ欲しいとき） */
.m-separator.sep-space {
  border-top: 0;
  height: 0;
}
/* 余白の微調整 */
.m-separator.is-tight {
  margin-block: var(--space-4);
}
.m-separator.is-loose {
  margin-block: var(--space-8);
}

/* ===余白ブロック=== */
.m-spacer {
  block-size: var(--spacer-size, var(--space-6));
}
.m-spacer--xs {
  --spacer-size: calc(var(--space-6) * 0.5);
}
.m-spacer--sm {
  --spacer-size: calc(var(--space-6) * 0.75);
}
.m-spacer--md {
  --spacer-size: calc(var(--space-6) * 1);
}
.m-spacer--lg {
  --spacer-size: calc(var(--space-6) * 1.5);
}
.m-spacer--xl {
  --spacer-size: calc(var(--space-6) * 2);
}

.m-spacer.is-tight {
  --spacer-size: calc(var(--spacer-size) * 0.75);
}
.m-spacer.is-loose {
  --spacer-size: calc(var(--spacer-size) * 1.25);
}

/* ===関連記事ブロック=== */
.m-related__list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  display: grid;
  gap: var(--space-4);
}

.m-related__item {
  list-style: none;
  background: #fff;
}

.m-related__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid #d1e8f3;
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.m-related__thm {
  inline-size: clamp(72px, 12vw, 112px);
  block-size: clamp(54px, 9vw, 84px);
  margin: 0;
  border-radius: 0.02rem;
  overflow: hidden;
  background: #f3f4f6;
}
.m-related__thm img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.m-related__ph {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.m-related__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  font-weight: 700;
}

.m-related__chev::before {
  content: "›";
  font-size: 2.5rem;
  line-height: 1;
  opacity: 0.5;
}
.m-related__link:hover {
  border-color: var(--c-main-lite-2);
}
.m-related__link:hover .m-related__chev::before {
  opacity: 1;
  color: var(--c-main-lite-2);
}

@media (max-width: 48em) {
  .m-related__link {
    grid-template-columns: auto 1fr auto;
    padding: var(--space-4);
    gap: var(--space-3);
  }
}

/*=== 監修者ブロック ===*/
.c-writer {
  border: 1px solid #9ca3af;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 2.5rem;
  background: #fff;
}
.c-writer__heading {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.75rem;
  position: relative;
  padding-left: 0.9rem;
}
.c-writer__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 0.18rem;
  height: 1rem;
  background: #5fb094;
  border-radius: 0.25rem;
}
.c-writer__inner {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 3rem;
  align-items: center;
}
.c-writer__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: #f2f5f7;
}
.c-writer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-writer__body {
  margin-left: 1rem;
}
.c-writer__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: #e9eef0;
  border-radius: 50%;
}
.c-writer__name {
  font-weight: 700;
}
.c-writer__job {
  color: #6b8799;
  font-size: 0.9rem;
  margin-top: 0.1rem;
}
.c-writer__bio {
  margin-top: 0.5rem;
  line-height: 1.8;
}
/* === SP only: 監修者ブロック === */
@media (max-width: 640px) {
  .c-writer {
    padding: 1rem;
  }
  .c-writer__inner {
    display: block;
    text-align: center;
  }
  .c-writer__avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
  }
  .c-writer__body {
    margin: 0;
  }
  .c-writer__name {
    font-weight: 700;
    font-size: 1.05rem;
  }
  .c-writer__job {
    margin-top: 0.15rem;
  }
  .c-writer__bio {
    margin-top: 0.75rem;
    line-height: 1.8;
    text-align: center;
  }
}

/* ===== 2カラムの土台 ===== */
.entry_wrap {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3.5vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 4vw, 40px);
  grid-template-areas:
    "main side"
    "post post";
}
.l-column .entry_wrap {
  margin-top: clamp(20px, 3vw, 32px);
}
.entry_detail {
  min-width: 0;
  grid-area: main;
}
.sidebar_wrap {
  width: 320px;
  grid-area: side;
}
.sidebar_box {
  margin: 0 0 48px;
  grid-area: post;
}

/* ===== サイドバー見出し ===== */
.sidebar_tit {
  position: relative;
  margin: 0 0 16px;
  padding: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #6bb7b0;
  line-height: 1.2;
}
.sidebar_tit:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e6e6e6;
}
/* 1枠目=おすすめ / 2枠目=カテゴリ */
.sidebar_box:nth-of-type(1) .sidebar_tit:before {
  content: "おすすめ記事";
}
.sidebar_box:nth-of-type(2) .sidebar_tit:before {
  content: "カテゴリ一覧";
}
.sidebar_tit:before {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* ===== Recommend（おすすめ記事） ===== */
.recomend_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.recomend_list .wrap_link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.recomend_list .wrap_link:hover .txt_box {
  text-decoration: underline;
}
.recomend_list .ph_wrap {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: #f4f4f4;
}
.recomend_list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recomend_list .txt_box {
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a1a;
}

/* ===== Category（カテゴリ一覧） ===== */
.cat_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cat_list a {
  text-decoration: none;
  color: #222;
  line-height: 1.6;
}
.cat_list a:hover {
  text-decoration: underline;
}

/* ===== パンくず（両カラムをまたぐ） ===== */
.breadcrumb_wrap {
  grid-column: 1 / -1;
  margin: 12px 0 12px;
  font-size: 13px;
  color: #666;
}
.breadcrumb_wrap a {
  color: #1a1a1a;
  text-decoration: none;
}
.breadcrumb_wrap a:hover {
  text-decoration: underline;
}
.breadcrumb_wrap .breadcrumb_inner,
.breadcrumb_wrap ul,
.breadcrumb_wrap ol {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb_wrap .bread {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 2rem;
}
.bread .sep {
  color: #999;
}

/* ===== Post Navigation（共通）===== */
.post_nav {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vw, 40px);
  padding: 18px 0;
  border-top: 1px solid #e6e6e6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.post_nav a {
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 4px;
  transition: opacity 0.15s ease;
}
.post_nav__list a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (hover: hover) {
  .post_nav a:hover {
    opacity: 0.8;
  }
}
.post_nav a:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.post_nav__prev {
  justify-self: start;
}
.post_nav__list {
  justify-self: center;
}
.post_nav__next {
  justify-self: end;
}
.post_nav .arr {
  margin: 0 0.25em;
  font-size: 1.5rem;
  transform: translateY(-0.03em);
}

/* ===== SP：1カラム ===== */
@media (max-width: 960px) {
  .entry_wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    grid-template-areas:
      "main"
      "post"
      "side";
  }
  .sidebar_wrap {
    width: auto;
  }
  .post_nav {
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    align-items: center;
    padding: 16px 0;
    gap: 8px 12px;
  }
  .post_nav__list {
    grid-column: 1 / -1;
    justify-self: center;
    order: 1;
    margin-top: 2px;
  }
  .post_nav__prev,
  .post_nav__next {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .post_nav__prev {
    justify-self: start;
  }
  .post_nav__next {
    justify-self: end;
  }
  .post_nav a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 6px 4px;
  }
  .post_nav .arr {
    display: inline-block;
    line-height: 1;
    margin: 0 0.25em;
    font-size: 1.5rem;
    transform: translateY(-0.02em);
  }
}

/*==== 一覧ページ用 ===*/
/* グリッド（PC3列 / TB2列 / SP2列） */
.c-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}
@media (max-width: 1200px) {
  .c-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .c-grid {
    gap: 16px;
  }
}

/* カード */
.c-card {
  border-radius: 0.04rem;
  overflow: hidden;
}
.c-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.c-card__media {
  aspect-ratio: 1024/683;
  background: #f5f5f5;
}
.c-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: transform 0.35s ease;
  will-change: transform;
}
@media (hover: hover) {
  .c-card__link:hover .c-card__media img,
  .c-card__link:focus-visible .c-card__media img {
    transform: scale(1.04);
  }
}
.c-card__thumb {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
  object-fit: cover;
  display: block;
}
.c-card__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: #e9eef0;
}

.c-card__title {
  margin: 12px 12px 4px;
  font-size: 0.95rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card__cat {
  margin: 0 12px 12px;
  font-size: 0.82rem;
  color: #85adca;
}

.c-empty {
  text-align: center;
  margin: 24px 0;
  color: #666;
}

/* ===== Column ヒーロー画像（PC） ===== */
.c-hero {
  position: relative;
  width: 100%;
  height: clamp(12rem, 17.12vw, 40.3rem);
  overflow: hidden;
  background: #fff;
  --img-push: clamp(40px, 6vw, 120px);
  --fade-start: 5vw;
  --fade-end: 20vw;
  --text-shift: 12vw;
  margin-bottom: 8rem;
}
.c-hero__img {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right center;
  left: auto;
  right: calc(-1 * var(--img-push));
  z-index: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) var(--fade-start),
    rgba(0, 0, 0, 0.05) calc(var(--fade-start) + 2vw),
    rgba(0, 0, 0, 0.18) calc(var(--fade-start) + 4vw),
    rgba(0, 0, 0, 0.4) calc(var(--fade-start) + 7vw),
    rgba(0, 0, 0, 0.65) calc(var(--fade-start) + 10vw),
    rgba(0, 0, 0, 0.85) calc(var(--fade-start) + 12vw),
    rgba(0, 0, 0, 1) var(--fade-end),
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) var(--fade-start),
    rgba(0, 0, 0, 0.05) calc(var(--fade-start) + 2vw),
    rgba(0, 0, 0, 0.18) calc(var(--fade-start) + 4vw),
    rgba(0, 0, 0, 0.4) calc(var(--fade-start) + 7vw),
    rgba(0, 0, 0, 0.65) calc(var(--fade-start) + 10vw),
    rgba(0, 0, 0, 0.85) calc(var(--fade-start) + 12vw),
    rgba(0, 0, 0, 1) var(--fade-end),
    rgba(0, 0, 0, 1) 100%
  );
}
.c-hero__in {
  position: relative;
  height: 100%;
  max-width: 112rem;
  margin: 0 auto;
  z-index: 2;
  --gutter: clamp(16px, 2vw, 24px);
  padding-inline: var(--gutter);
}
.c-hero__text {
  position: absolute;
  top: 50%;
  left: calc(var(--gutter) + var(--fade-start) + var(--text-shift));
  transform: translateY(-50%);
}
.c-hero__title {
  line-height: 1.1;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 0.15rem;
}
.c-hero__sub {
  line-height: 1.35;
  font-size: clamp(0.9rem, 2.2vw, 1.125rem);
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.c-hero__catch {
  line-height: 1.5;
  font-size: clamp(0.85rem, 2vw, 1rem);
  margin: 0;
}
.c-hero::before,
.c-hero::after {
  display: none !important;
}
/* ===== SP: 640px 以下で下方向フェード ===== */
@media (max-width: 640px) {
  .c-hero {
    --img-push: 0;
    --sp-img-h: clamp(25rem, 72vw, 28rem);
    --sp-white-band: 36vw;
    height: calc(var(--sp-img-h) + var(--sp-white-band));
    --sp-fade-start: 65%;
    --sp-fade-end: 90%;
    margin-bottom: 0;
  }
  .c-hero picture,
  .c-hero img.c-hero__img {
    display: block;
  }
  .c-hero__img {
    inset: 0;
    top: 0;
    height: var(--sp-img-h);
    width: 100%;
    object-fit: cover;
    object-position: center top;

    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) var(--sp-fade-start),
      rgba(0, 0, 0, 0.85) calc(var(--sp-fade-start) + 4%),
      rgba(0, 0, 0, 0.55) calc(var(--sp-fade-start) + 10%),
      rgba(0, 0, 0, 0.25) calc(var(--sp-fade-start) + 18%),
      rgba(0, 0, 0, 0) var(--sp-fade-end)
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) var(--sp-fade-start),
      rgba(0, 0, 0, 0.85) calc(var(--sp-fade-start) + 4%),
      rgba(0, 0, 0, 0.55) calc(var(--sp-fade-start) + 10%),
      rgba(0, 0, 0, 0.25) calc(var(--sp-fade-start) + 18%),
      rgba(0, 0, 0, 0) var(--sp-fade-end)
    );
  }
  .c-hero__in {
    --gutter: clamp(16px, 5vw, 24px);
    padding-inline: var(--gutter);
  }
  .c-hero__text {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: calc(var(--sp-white-band) * 0.5);
    transform: none;
    text-align: center;
  }
  .c-hero__title {
    font-size: clamp(1.3rem, 7vw, 1.9rem);
    margin: 0 0 0.3rem;
  }
  .c-hero__sub {
    font-size: clamp(1rem, 4.6vw, 1.2rem);
    margin: 0 0 0.35rem;
  }
  .c-hero__catch {
    font-size: clamp(0.95rem, 4.2vw, 1.1rem);
  }
}

/* ===== Pagination (数字型 … 1 2 3 次へ) ===== */
.navigation.pagination {
  margin: clamp(20px, 4vw, 32px) 0 8px;
}
.navigation.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.navigation.pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e6e6e6;
  border-radius: 0.4rem;
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}
@media (hover: hover) {
  .navigation.pagination .page-numbers:hover {
    opacity: 0.85;
  }
}
/* 現在ページ */
.navigation.pagination .page-numbers.current {
  background: var(--c-main, #1d3557);
  border-color: var(--c-main, #1d3557);
  color: #fff;
  font-weight: 700;
}
/* 前へ／次へ */
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  min-width: 52px;
  padding: 0 14px;
}
/* 省略記号 … */
.navigation.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  pointer-events: none;
}
@media (max-width: 960px) {
  .navigation.pagination {
    margin: 20px 0;
  }
  .navigation.pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
  }
}
.l-column .entry_detail,
.single-column .entry_detail {
  background: #fff;
}
.l-column .entry_detail,
.single-column .entry_detail {
  padding: clamp(16px, 2.5vw, 28px);
  /* border-radius: 12px; */
}

/* =========================
  Column archive hero makeover
========================= */
.post-type-archive-column .c-hero {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #e6e6e6;
  background:
    radial-gradient(
      1200px 240px at 20% 20%,
      rgba(29, 53, 87, 0.08),
      transparent 60%
    ),
    linear-gradient(to bottom, #ffffff, #fbfcff);
}

.post-type-archive-column .c-hero__in {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3.5vw, 24px);
}

.post-type-archive-column .c-hero__text {
  position: relative;
  max-width: 64ch;
  padding-left: 14px;
}

.post-type-archive-column .c-hero__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 4px;
  height: calc(100% - 0.5rem);
  border-radius: 999px;
  background: var(--c-main, #1d3557);
  opacity: 0.9;
}

.post-type-archive-column .c-hero__title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.post-type-archive-column .c-hero__sub {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: #6b8799;
  font-size: 0.95rem;
}

.post-type-archive-column .c-hero__catch {
  margin: 0;
  color: #334155;
  font-size: 1rem;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .post-type-archive-column .c-hero {
    padding: 22px 0;
  }
  .post-type-archive-column .c-hero__text {
    padding-left: 12px;
  }
}