@charset "UTF-8";
/* =========================================================
   コラム（一覧・記事）PC版（末尾にスマホ版）
   1rem = デザイン上の10px（1440px幅基準）。共通パーツは style.css
   ========================================================= */
:root { --beige: #f6f4ed; --line: #d9d3c7; --sub: #8a8378; }

/* ---------- KV（下層共通の帯） ---------- */
.cl-hero { height: 43.7rem; }
.cl-hero__img { position: absolute; left: 0; top: 7.7rem; width: 144rem; height: 36rem; overflow: hidden; }
.cl-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-hero__ttl { position: absolute; left: 0; top: 23.92rem; width: 144rem; text-align: center; font-size: 3.4rem; line-height: 3.4rem; font-weight: 700; }
.cl-hero--post { height: 27.7rem; }
.cl-hero--post .cl-hero__img { height: 20rem; }
.cl-hero--post .cl-hero__ttl { top: 16rem; font-size: 3rem; line-height: 3rem; }

/* ---------- 導入文 ---------- */
.cl-intro { padding: 4.8rem 0 2rem; text-align: center; }
.cl-intro__txt { font-size: 2.4rem; line-height: 3.5rem; font-weight: 400; }
.cl-intro__txt + .cl-intro__txt { margin-top: 1.7rem; }

/* ---------- 記事一覧：文字の目次＋ホバーで画像 ---------- */
.cl-index { width: 112rem; margin: 0 auto; padding: 9.6rem 0 12rem; }
.cl-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 2rem; border-bottom: .3rem solid var(--ink); }
.cl-head__en { font-family: "Barlow", sans-serif; font-weight: 600; font-size: 15rem; line-height: 1; margin-bottom: -.06em; letter-spacing: .04em; color: transparent; -webkit-text-stroke: .25rem #e0d2b8; } /* サービス概要の SANBO と同じ袋文字 */
.cl-head__count { font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; color: var(--sub); }
.cl-head__count b { font-family: "Barlow", sans-serif; font-size: 3.2rem; color: var(--ink); margin-right: .4rem; }
.cl-head__ja { font-size: 2.2rem; line-height: 3rem; font-weight: 700; }
.cl-head--sm .cl-head__en { font-size: 8.4rem; -webkit-text-stroke-width: .18rem; }
.cl-filter { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 3.2rem; }
.cl-filter__btn { padding: .8rem 2.2rem; border: .2rem solid var(--ink); border-radius: 3rem; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; cursor: pointer; transition: background .3s, color .3s; }
@media (hover: hover) { .cl-filter__btn:hover { background: #eef7f6; } }
.cl-filter__btn.is-active { background: var(--ink); color: var(--white); }
.cl-filter__btn:focus-visible { outline: .3rem solid var(--teal); outline-offset: .3rem; }

.cl-list-wrap { position: relative; margin-top: 4rem; }
.cl-row { border-bottom: .15rem solid var(--line); transition: opacity .45s; }
.cl-row[hidden] { display: none; }
.u-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-row a { display: grid; grid-template-columns: 6.4rem 18rem 1fr 4rem; align-items: center; column-gap: 1.6rem; min-height: 9.6rem; padding: 2rem 0; transition: transform .6s cubic-bezier(.2, .9, .3, 1); }
.cl-row__no { font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; color: #a39a8a; }
.cl-row__cat { font-size: 1.4rem; line-height: 2rem; font-weight: 700; color: var(--teal); letter-spacing: .06em; }
.cl-row__ttl { padding-right: 30rem; font-size: 2.4rem; line-height: 3.6rem; font-weight: 700; transition: color .3s; } /* 右側は画像の場所 */ /* 他ページの説明文と同じ大きさ */
.cl-arrow { width: 4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .45s cubic-bezier(.2, .9, .3, 1); }
/* ホバー：その行は右へ・緑に、ほかの行は薄く（JSで .is-dim） */
.cl-list.is-hover .cl-row { opacity: .22; }
.cl-list.is-hover .cl-row.is-on { opacity: 1; }
.cl-row.is-on a { transform: translateX(1.6rem); }
.cl-row.is-on .cl-row__ttl { color: var(--teal); }
.cl-row.is-on .cl-arrow { transform: translateX(.8rem); color: var(--teal); }
.cl-row a:focus-visible { outline: .3rem solid var(--teal); outline-offset: -.3rem; }
/* 右側の画像：乗せた行の高さへ移動しながら切り替わる */
.cl-pop { position: absolute; right: 6.4rem; top: 0; width: 24rem; height: 16rem; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 2; }
.cl-pop.is-show { opacity: 1; }
.cl-pop__in { transform: scale(.9); transition: transform .5s cubic-bezier(.2, .9, .3, 1); }
.cl-pop.is-show .cl-pop__in { transform: scale(1); }
.cl-pop__in { position: relative; width: 100%; height: 100%; border-radius: 1.2rem; overflow: hidden; background: #e9e4d9; box-shadow: 0 2.4rem 4rem -2rem rgba(35, 30, 25, .5); }
.cl-pop__in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cl-pager { display: flex; justify-content: center; gap: 1.2rem; margin-top: 6.4rem; }
.cl-pager a { position: relative; display: flex; align-items: center; justify-content: center; min-width: 5.2rem; height: 5.2rem; padding: 0 1.6rem; border: .2rem solid var(--ink); border-radius: 2.6rem; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 700; transition: background .3s, color .3s; }
.cl-pager a[aria-current] { background: var(--ink); color: var(--white); }
@media (hover: hover) { .cl-pager a:hover:not([aria-current]) { background: #eef7f6; } }
.cl-pager__next { gap: 1rem; font-family: var(--font) !important; font-size: 1.5rem !important; }
.cl-pager__next .chev { position: static; width: .7rem; height: 1.2rem; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; }

.cl-cta { height: 36.4rem; }
.cl-cta .cta { left: 47rem; top: 15rem; }

/* =========================================================
   記事ページ
   ========================================================= */
.page--column-post { overflow: clip; } /* sticky の目次を効かせる（hidden だと効かない） */
.cp-progress { position: fixed; left: 0; top: 7.7rem; width: 100%; height: .4rem; z-index: 90; pointer-events: none; }
.cp-progress i { display: block; width: 100%; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; }
.cp { width: 112rem; margin: 0 auto; padding: 4rem 0 0; }
.cp-crumb { display: flex; gap: .8rem; font-size: 1.4rem; line-height: 2rem; color: var(--sub); }
.cp-crumb a { text-decoration: underline; text-underline-offset: .3rem; }
.cp-head { width: 88rem; margin: 6.4rem auto 0; text-align: center; }
.cp-head__cat { display: inline-block; padding: .4rem 1.6rem; border-radius: 2rem; background: var(--teal); color: var(--white); font-size: 1.4rem; line-height: 2.2rem; font-weight: 700; }
.cp-head__ttl { margin-top: 2rem; font-size: 4rem; line-height: 6rem; font-weight: 700; }
.cp-head__by { margin-top: 2rem; font-size: 1.5rem; line-height: 2.2rem; color: var(--sub); }
.cp-eye { position: relative; width: 112rem; margin: 5.6rem auto 0; }
.cp-eye img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.6rem; }
.cl-dummy { margin-top: 2.4rem; padding: 1.2rem 2rem; border-radius: .8rem; background: #fdf2e4; color: #9a5d17; font-size: 1.4rem; line-height: 2.2rem; text-align: center; }
.cp-dummy { margin-top: 2rem; padding: 1.2rem 2rem; border-radius: .8rem; background: #fdf2e4; color: #9a5d17; font-size: 1.4rem; line-height: 2.2rem; text-align: center; }

.cp-layout { display: grid; grid-template-columns: 26rem 1fr; gap: 8rem; margin-top: 8rem; }
.cp-toc { position: sticky; top: 12rem; align-self: start; }
.cp-toc__ttl { font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 700; letter-spacing: .1em; padding-bottom: 1.2rem; border-bottom: .3rem solid var(--ink); }
.cp-toc ol { list-style: none; }
.cp-toc li { border-bottom: .15rem solid var(--line); }
.cp-toc a { display: flex; gap: 1.2rem; padding: 1.4rem 0; font-size: 1.5rem; line-height: 2.3rem; font-weight: 500; color: var(--sub); transition: color .3s; }
.cp-toc a b { font-family: "Barlow", sans-serif; font-weight: 700; }
.cp-toc a:hover, .cp-toc a.is-now { color: var(--ink); }
.cp-toc a.is-now b { color: var(--teal); }

.cp-body { min-width: 0; font-size: 1.8rem; line-height: 3.4rem; }
.cp-body > * + * { margin-top: 2.8rem; }
.cp-body h2 { position: relative; margin-top: 8rem; padding: 0 0 1.6rem 2.4rem; font-size: 2.8rem; line-height: 4.2rem; font-weight: 700; scroll-margin-top: 12rem; }
.cp-body h2::before { content: ""; position: absolute; left: 0; top: .6rem; width: .6rem; height: 3rem; background: var(--teal); border-radius: .3rem; }
.cp-body h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .15rem; background: var(--line); transform-origin: 0 50%; transform: scaleX(var(--ln, 1)); }
.cp-body h3 { margin-top: 5.6rem; padding-bottom: .8rem; font-size: 2.2rem; line-height: 3.4rem; font-weight: 700; border-bottom: .2rem dashed var(--line); }
.cp-body strong { font-weight: 700; }
.cp-body ul, .cp-body ol { padding: 2.4rem 3.2rem 2.4rem 5.2rem; border-radius: 1.2rem; background: var(--beige); }
.cp-body ul { list-style: disc; } .cp-body ol { list-style: decimal; } /* 共通のリセットで消えている印を戻す */
.cp-body li + li { margin-top: .8rem; }
.cp-body ul li::marker { color: var(--teal); }
.cp-body ol li::marker { font-family: "Barlow", sans-serif; font-weight: 700; color: var(--teal); }
.cp-mk { font-weight: 700; background: linear-gradient(transparent 60%, rgba(18, 168, 157, .28) 60%) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.js .cp-mk { background-size: 0% 100%; }
.cp-point { position: relative; padding: 3.2rem 3.6rem; border: .3rem solid var(--teal); border-radius: 1.2rem; background: #f1f9f8; }
.cp-point__ttl { position: absolute; left: 2.4rem; top: -1.4rem; padding: 0 1.2rem; background: var(--teal); color: var(--white); border-radius: 1.4rem; font-family: "Barlow", sans-serif; font-size: 1.5rem; line-height: 2.6rem; font-weight: 700; letter-spacing: .1em; }
.cp-point p:last-child { font-weight: 500; }
.cp-fig img { width: 100%; height: auto; border-radius: 1.2rem; }
.cp-fig figcaption { margin-top: 1rem; font-size: 1.4rem; line-height: 2.2rem; color: var(--sub); text-align: center; }
.cp-body blockquote { position: relative; padding: 3.2rem 4rem 3.2rem 7.2rem; border-left: .6rem solid var(--ink); background: var(--beige); border-radius: 0 1.2rem 1.2rem 0; }
.cp-body blockquote::before { content: "“"; position: absolute; left: 2.4rem; top: 1.2rem; font-family: "Barlow", sans-serif; font-weight: 700; font-size: 7rem; line-height: 1; color: var(--teal); }
.cp-body cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: 1.4rem; color: var(--sub); }

.cp-author { display: flex; gap: 4rem; align-items: center; margin: 10rem 0 0 34rem; padding: 4rem; border: .3rem solid var(--ink); border-radius: 1.6rem; }
.cp-author__img { position: relative; flex: none; width: 14rem; height: 14rem; border-radius: 50%; background: var(--beige); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cp-author__img img { width: 100%; height: 100%; object-fit: cover; }
.cp-author__lbl { font-size: 1.4rem; font-weight: 700; color: var(--teal); }
.cp-author__name { margin-top: .4rem; font-size: 2.4rem; line-height: 3.4rem; font-weight: 700; }
.cp-author__name small { margin-left: 1.6rem; font-size: 1.4rem; font-weight: 500; color: var(--sub); }
.cp-author__bio { margin-top: 1rem; font-size: 1.5rem; line-height: 2.6rem; }

.cp-rel { padding-top: 12rem; }
.cp-rel .cl-row__ttl { font-size: 2.2rem; line-height: 3.4rem; }
.cl-list-wrap { margin-top: 4.8rem; }
.cp-back { position: relative; display: flex; align-items: center; justify-content: center; width: 39rem; height: 7.3rem; margin: 6.4rem auto 0; border: .3rem solid var(--teal); border-radius: 4.4rem; background: var(--white); color: var(--teal); font-size: 2.2rem; font-weight: 700; transition: background .3s, color .3s; }
.cp-back .chev { position: absolute; right: 3rem; top: 50%; width: .9rem; height: 1.5rem; margin-top: -.75rem; fill: none; stroke: currentColor; stroke-width: 2; }
.cp-back:hover { background: var(--teal); color: var(--white); }

/* =========================================================
   スマホ版（767px以下・375px幅基準）　望月チームでPC版をもとに組んだレイアウト
   ========================================================= */
@media (max-width: 767px) {
  .cl-hero { height: 18rem; }
  .cl-hero__img { top: 6rem; width: 37.5rem; height: 12rem; }
  .cl-hero__img img { object-position: 18% 50%; }
  .cl-hero__ttl { top: 10.4rem; width: 37.5rem; font-size: 2.2rem; line-height: 2.2rem; }
  .cl-hero--post { height: 14rem; }
  .cl-hero--post .cl-hero__img { height: 8rem; }
  .cl-hero--post .cl-hero__ttl { top: 8.9rem; font-size: 1.8rem; line-height: 1.8rem; }

  .cl-intro { padding: 3.6rem 2rem 0; }
  .cl-intro__txt { font-size: 1.35rem; line-height: 2.4rem; }
  .cl-intro__txt + .cl-intro__txt { margin-top: 1.4rem; }

  .cl-index { width: auto; margin: 0 2rem; padding: 5.6rem 0 6rem; }
  .cl-head { padding-bottom: 1.2rem; border-bottom-width: .2rem; }
  .cl-head__en { font-size: 6.4rem; -webkit-text-stroke-width: .12rem; }
  .cl-head--sm .cl-head__en { font-size: 4.4rem; -webkit-text-stroke-width: .1rem; }
  .cl-head__count { font-size: 1.2rem; line-height: 1.8rem; }
  .cl-head__count b { font-size: 2.2rem; }
  .cl-head__ja { font-size: 1.5rem; line-height: 2.2rem; }
  .cl-filter { gap: .6rem; margin-top: 2rem; }
  .cl-filter__btn { padding: .4rem 1.3rem; border-width: .15rem; font-size: 1.25rem; line-height: 2rem; }
  .cl-list-wrap { margin-top: 1.2rem; }
  .cl-row a { grid-template-columns: 3.2rem 1fr 2.4rem; grid-template-areas: "no cat ar" "ttl ttl ar"; column-gap: .8rem; row-gap: .4rem; min-height: 0; padding: 1.8rem 0; }
  .cl-row__no { grid-area: no; font-size: 1.3rem; }
  .cl-row__cat { grid-area: cat; font-size: 1.15rem; line-height: 1.8rem; }
  .cl-row__ttl { grid-area: ttl; padding-right: 0; font-size: 1.6rem; line-height: 2.6rem; }
  .cl-arrow { grid-area: ar; width: 2.4rem; height: 1rem; }
  .cl-pop { display: none; }
  .cl-pager { gap: .6rem; margin-top: 4rem; }
  .cl-pager a { min-width: 4rem; height: 4rem; padding: 0 1.2rem; border-width: .15rem; border-radius: 2rem; font-size: 1.4rem; }
  .cl-pager__next { font-size: 1.25rem !important; gap: .6rem; }
  .cl-cta { height: auto; padding: 5rem 0; }
  .cl-cta .cta { left: auto; top: auto; }

  .cp-progress { top: 6rem; height: .3rem; }
  .cp { width: auto; margin: 0 2rem; padding-top: 2rem; }
  .cp-crumb { font-size: 1.1rem; line-height: 1.8rem; flex-wrap: wrap; gap: .4rem; }
  .cp-head { width: auto; margin-top: 3.2rem; text-align: left; }
  .cp-head__cat { padding: .2rem 1.2rem; font-size: 1.15rem; line-height: 1.8rem; }
  .cp-head__ttl { margin-top: 1.2rem; font-size: 2.2rem; line-height: 3.4rem; }
  .cp-head__by { margin-top: 1.2rem; font-size: 1.2rem; line-height: 1.8rem; }
  .cp-eye { width: auto; margin-top: 2.8rem; }
  .cp-eye img { border-radius: .8rem; }
  .cl-dummy { margin-top: 1.6rem; padding: .8rem 1.2rem; font-size: 1.15rem; line-height: 1.8rem; text-align: left; }
  .cp-dummy { margin-top: 1.2rem; padding: .8rem 1.2rem; font-size: 1.15rem; line-height: 1.8rem; text-align: left; }
  .cp-layout { grid-template-columns: 1fr; gap: 4rem; margin-top: 4rem; }
  .cp-toc { position: static; padding: 2rem; border-radius: .8rem; background: var(--beige); }
  .cp-toc__ttl { font-size: 1.4rem; padding-bottom: .8rem; border-bottom-width: .2rem; }
  .cp-toc a { gap: .8rem; padding: 1rem 0; font-size: 1.3rem; line-height: 2rem; }
  .cp-body { font-size: 1.5rem; line-height: 2.8rem; }
  .cp-body > * + * { margin-top: 2rem; }
  .cp-body h2 { margin-top: 5.6rem; padding: 0 0 1.2rem 1.6rem; font-size: 1.9rem; line-height: 3rem; scroll-margin-top: 8rem; }
  .cp-body h2::before { top: .4rem; width: .4rem; height: 2.2rem; }
  .cp-body h3 { margin-top: 4rem; font-size: 1.65rem; line-height: 2.6rem; }
  .cp-body ul, .cp-body ol { padding: 1.6rem 1.6rem 1.6rem 3.4rem; border-radius: .8rem; }
  .cp-point { padding: 2.4rem 2rem 2rem; border-width: .2rem; border-radius: .8rem; }
  .cp-point__ttl { left: 1.6rem; top: -1.1rem; font-size: 1.2rem; line-height: 2.2rem; }
  .cp-fig img { border-radius: .8rem; }
  .cp-fig figcaption { font-size: 1.15rem; line-height: 1.8rem; }
  .cp-body blockquote { padding: 2rem 1.6rem 2rem 4.4rem; border-left-width: .4rem; }
  .cp-body blockquote::before { left: 1.2rem; top: .8rem; font-size: 4.4rem; }
  /* 写真の横に「この記事を書いた人・名前・肩書き」、紹介文はその下 */
  .cp-author { display: grid; grid-template-columns: 8rem 1fr; grid-template-rows: auto auto auto; row-gap: 0; grid-template-areas: "img lbl" "img name" "bio bio"; column-gap: 1.6rem; align-items: center; margin: 6rem 0 0; padding: 2.4rem 2rem; border-width: .2rem; border-radius: .8rem; }
  .cp-author__txt { display: contents; }
  .cp-author__img { grid-area: img; }
  .cp-author__lbl { grid-area: lbl; align-self: end; font-size: 1.2rem; line-height: 1.8rem; }
  .cp-author__name { grid-area: name; align-self: start; margin-top: .2rem; }
  .cp-author__bio { grid-area: bio; margin-top: 1.4rem; }
  .cp-author__img { width: 8rem; height: 8rem; }
  .cp-author__name { font-size: 1.9rem; line-height: 2.8rem; }
  .cp-author__name small { display: block; margin: 0; font-size: 1.2rem; line-height: 1.8rem; }
  .cp-author__bio { font-size: 1.3rem; line-height: 2.3rem; }
  .cp-rel { padding-top: 6rem; }
  .cp-rel .cl-row__ttl { font-size: 1.5rem; line-height: 2.4rem; }
  .cp-back { width: 26rem; height: 5.6rem; margin-top: 4rem; border-width: .2rem; font-size: 1.6rem; }
  .cp-back .chev { right: 2rem; width: .7rem; height: 1.2rem; margin-top: -.6rem; }
}

/* 2026-10-02 隊長：3行目の前の行間をつめる */
.cl-intro__txt + .cl-intro__txt + .cl-intro__txt { margin-top: 0; }