@charset "utf-8";

/* ================================================================
   コラム
   ================================================================ */

/* ---------- 共通のリード ---------- */
#col-lead {
  padding: 16vw 0 2vw;
  text-align: center;
}
#col-lead .wrap { padding: 0 6.4vw; }
#col-lead .tit {
  font-size: 3.4vw;
  letter-spacing: .22em;
  color: #c9a24a;
  margin: 0 0 3vw;
}
#col-lead h2 {
  font-size: 7vw;
  line-height: 1.6;
  letter-spacing: .08em;
  margin: 0 0 6vw;
}
#col-lead .sec1-txt { line-height: 2.1; }

/* ---------- 一覧 ---------- */
#col-list { padding: 6vw 6.4vw 0; }

.col-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9vw;
}
.col-card { position: relative; margin: 0; }
.col-card > a {
  display: block;
  text-decoration: none;
  color: #fff;
}
.col-card .thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #1a1714;
}
.col-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.88);
  transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .8s ease;
}
.col-card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201,162,74,0);
  transition: border-color .5s ease;
  pointer-events: none;
}
.col-card .meta {
  display: flex;
  align-items: center;
  gap: 3vw;
  margin: 4vw 0 2.4vw;
}
.col-card .date {
  font-family: "Amiri", serif;
  font-size: 3.4vw;
  letter-spacing: .08em;
  color: #b7ad9f;
}
.col-card .cat {
  font-size: 2.9vw;
  letter-spacing: .12em;
  color: #c9a24a;
  border: 1px solid rgba(201,162,74,.5);
  padding: .5em 1.1em;
  line-height: 1;
}
.col-card .ttl {
  display: block;
  font-size: 4.6vw;
  line-height: 1.65;
  letter-spacing: .04em;
  margin: 0 0 2.6vw;
}
.col-card .exc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 3.5vw;
  line-height: 1.95;
  color: #b7ad9f;
  margin: 0;
}
.col-card .more {
  display: inline-block;
  margin: 3.4vw 0 0;
  font-size: 3.2vw;
  letter-spacing: .16em;
  color: #c9a24a;
  position: relative;
  padding-right: 3.4em;
}
.col-card .more::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2.6em;
  height: 1px;
  background: #c9a24a;
  transition: width .5s ease;
}

/* 記事がまだ無いとき */
.col-empty {
  text-align: center;
  padding: 10vw 0 4vw;
  color: #b7ad9f;
  line-height: 2.1;
}

/* ページャ */
.col-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.6vw;
  margin: 14vw 0 0;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.col-pager li { margin: 0; }
.col-pager a, .col-pager span {
  display: block;
  min-width: 11vw;
  padding: 2.6vw 0;
  text-align: center;
  font-family: "Amiri", serif;
  font-size: 3.6vw;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
.col-pager .current {
  color: #14110f;
  background: #c9a24a;
  border-color: #c9a24a;
}

/* ---------- 記事本文 ---------- */
#col-head {
  padding: 14vw 6.4vw 0;
  text-align: center;
}
#col-head .meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3vw;
  margin: 0 0 4vw;
}
#col-head .date {
  font-family: "Amiri", serif;
  font-size: 3.6vw;
  letter-spacing: .1em;
  color: #c9a24a;
}
#col-head .cat {
  font-size: 3vw;
  letter-spacing: .12em;
  color: #b7ad9f;
  border: 1px solid rgba(255,255,255,.28);
  padding: .5em 1.1em;
  line-height: 1;
}
#col-head h1 {
  font-size: 6.4vw;
  line-height: 1.7;
  letter-spacing: .04em;
  margin: 0;
}
#col-head .rule {
  width: 12vw;
  height: 1px;
  background: #c9a24a;
  margin: 6vw auto 0;
}

#col-body {
  padding: 9vw 6.4vw 0;
  max-width: 860px;
  margin: 0 auto;
}
#col-body p {
  font-size: 3.9vw;
  line-height: 2.25;
  margin: 0 0 6vw;
}
#col-body h2 {
  font-size: 5.4vw;
  line-height: 1.7;
  letter-spacing: .04em;
  margin: 12vw 0 5vw;
  padding: 0 0 3vw;
  border-bottom: 1px solid rgba(201,162,74,.42);
}
#col-body h3 {
  font-size: 4.6vw;
  line-height: 1.7;
  margin: 10vw 0 4vw;
  padding-left: 3.4vw;
  border-left: 2px solid #c9a24a;
}
#col-body h4 {
  font-size: 4.1vw;
  line-height: 1.7;
  margin: 8vw 0 3vw;
  color: #e8dcc4;
}
#col-body ul, #col-body ol {
  margin: 0 0 6vw;
  padding-left: 1.4em;
}
#col-body li {
  font-size: 3.8vw;
  line-height: 2.1;
  margin: 0 0 1.6vw;
}
#col-body ul li { list-style: none; position: relative; }
#col-body ul li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: .95em;
  width: .42em;
  height: .42em;
  background: #c9a24a;
  border-radius: 50%;
}
#col-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 3vw;
}
#col-body figure { margin: 0 0 7vw; }
#col-body figcaption {
  font-size: 3.2vw;
  color: #b7ad9f;
  text-align: center;
  line-height: 1.8;
}
#col-body blockquote {
  margin: 0 0 6vw;
  padding: 5vw 5.4vw;
  background: rgba(255,255,255,.045);
  border-left: 2px solid #c9a24a;
}
#col-body blockquote p:last-child { margin-bottom: 0; }
#col-body a {
  color: #d9b969;
  text-decoration: underline;
  text-underline-offset: .25em;
}
#col-body strong { color: #f0e4c8; font-weight: 600; }
#col-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 6vw;
  font-size: 3.5vw;
}
#col-body th, #col-body td {
  border: 1px solid rgba(255,255,255,.2);
  padding: 3vw;
  line-height: 1.8;
  text-align: left;
}
#col-body th { background: rgba(255,255,255,.05); color: #e8dcc4; font-weight: 500; }

/* 前後の記事 */
#col-nav {
  padding: 12vw 6.4vw 0;
  max-width: 860px;
  margin: 0 auto;
}
.col-navlist {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 3vw;
  list-style: none;
  margin: 0;
  padding: 7vw 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.col-navlist li { margin: 0; flex: 1 1 0; min-width: 0; }
.col-navlist li.to-list { flex: 0 0 auto; display: flex; align-items: center; }
.col-navlist a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 3.3vw;
  line-height: 1.7;
}
.col-navlist .lb {
  display: block;
  font-family: "Amiri", serif;
  font-size: 3vw;
  letter-spacing: .12em;
  color: #c9a24a;
  margin: 0 0 1.4vw;
}
.col-navlist .next { text-align: right; }
.col-navlist .to-list a {
  border: 1px solid rgba(255,255,255,.24);
  padding: 2.6vw 4vw;
  letter-spacing: .1em;
  white-space: nowrap;
}
.col-navlist .nm {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 最新記事 */
#col-latest { padding: 14vw 6.4vw 0; }
#col-latest .tit {
  text-align: center;
  font-size: 3.6vw;
  letter-spacing: .2em;
  color: #c9a24a;
  margin: 0 0 7vw;
}

/* ---------- PC ---------- */
@media screen and (min-width: 768px) {
  #col-lead { padding: 120px 0 10px; }
  #col-lead .wrap { max-width: 900px; margin: 0 auto; padding: 0 30px; }
  #col-lead .tit { font-size: 14px; margin: 0 0 16px; }
  #col-lead h2 { font-size: 40px; margin: 0 0 34px; }

  #col-list { padding: 60px 30px 0; }
  .col-cards {
    max-width: 1140px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 34px;
  }
  .col-card .meta { gap: 14px; margin: 20px 0 10px; }
  .col-card .date { font-size: 14px; }
  .col-card .cat { font-size: 11px; }
  .col-card .ttl { font-size: 19px; margin: 0 0 12px; }
  .col-card .exc { font-size: 14px; line-height: 1.9; }
  .col-card .more { font-size: 12px; margin: 16px 0 0; }
  .col-card > a:hover .thumb img { transform: scale(1.07); filter: brightness(1); }
  .col-card > a:hover .thumb::after { border-color: rgba(201,162,74,.8); }
  .col-card > a:hover .more::after { width: 3.4em; }
  .col-card > a:hover .ttl { color: #e8cf9a; }

  .col-empty { padding: 60px 0 20px; }

  .col-pager { gap: 10px; margin: 80px 0 0; }
  .col-pager a, .col-pager span { min-width: 46px; padding: 12px 0; font-size: 15px; }
  .col-pager a:hover { border-color: #c9a24a; color: #e8cf9a; }

  #col-head { padding: 90px 30px 0; }
  #col-head .meta { gap: 16px; margin: 0 0 22px; }
  #col-head .date { font-size: 16px; }
  #col-head .cat { font-size: 12px; }
  #col-head h1 { font-size: 34px; max-width: 860px; margin: 0 auto; }
  #col-head .rule { width: 64px; margin: 34px auto 0; }

  #col-body { padding: 56px 30px 0; }
  #col-body p { font-size: 16px; line-height: 2.2; margin: 0 0 30px; }
  #col-body h2 { font-size: 26px; margin: 64px 0 26px; padding: 0 0 14px; }
  #col-body h3 { font-size: 21px; margin: 52px 0 20px; padding-left: 16px; }
  #col-body h4 { font-size: 18px; margin: 40px 0 14px; }
  #col-body ul, #col-body ol { margin: 0 0 30px; }
  #col-body li { font-size: 16px; margin: 0 0 8px; }
  #col-body figure { margin: 0 0 36px; }
  #col-body figcaption { font-size: 13px; }
  #col-body blockquote { padding: 26px 30px; margin: 0 0 30px; }
  #col-body table { font-size: 15px; margin: 0 0 30px; }
  #col-body th, #col-body td { padding: 14px 16px; }

  #col-nav { padding: 70px 30px 0; }
  .col-navlist { padding: 34px 0 0; gap: 24px; }
  .col-navlist a { font-size: 15px; }
  .col-navlist .lb { font-size: 12px; margin: 0 0 6px; }
  .col-navlist a:hover { color: #e8cf9a; }
  .col-navlist .to-list a { padding: 12px 24px; }
  .col-navlist .to-list a:hover { border-color: #c9a24a; }

  #col-latest { padding: 100px 30px 0; }
  #col-latest .tit { font-size: 15px; margin: 0 0 40px; }
  #col-latest .col-cards { grid-template-columns: repeat(3, 1fr); gap: 34px; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .col-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- トップに置く最新コラム ---------- */
#col-latest.on-index { padding: 18vw 0 4vw; }
#col-latest.on-index .wrap { padding: 0 6.4vw; }
#col-latest.on-index .tit {
  text-align: center; font-size: 3.5vw; letter-spacing: .2em;
  color: #c9a24a; margin: 0 0 3vw;
}
#col-latest.on-index h2 {
  text-align: center; font-size: 6vw; line-height: 1.6;
  letter-spacing: .08em; margin: 0 0 9vw;
}
#col-latest.on-index .btn-link { margin: 11vw auto 0; }

@media screen and (min-width: 768px) {
  #col-latest.on-index { padding: 150px 0 40px; }
  #col-latest.on-index .wrap { max-width: 1140px; margin: 0 auto; padding: 0 30px; }
  #col-latest.on-index .tit { font-size: 14px; margin: 0 0 18px; }
  #col-latest.on-index h2 { font-size: 34px; margin: 0 0 60px; }
  #col-latest.on-index .btn-link { margin: 70px auto 0; }
}

/* ---------- カード内のテキストをまとめる箱 ---------- */
.col-card .body { display: block; }

/* ---------- 1件目を大きく見せる ---------- */
.col-card.is-feature .thumb { aspect-ratio: 16 / 10; }
.col-card.is-feature .ttl { font-size: 5.4vw; }
.col-card.is-feature .exc { -webkit-line-clamp: 3; }

@media screen and (min-width: 768px) {
  .col-card.is-feature { grid-column: 1 / -1; }
  .col-card.is-feature > a {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .col-card.is-feature .thumb { aspect-ratio: 16 / 9; }
  .col-card.is-feature .meta { margin: 0 0 14px; }
  .col-card.is-feature .ttl { font-size: 28px; line-height: 1.6; margin: 0 0 18px; }
  .col-card.is-feature .exc { font-size: 15px; -webkit-line-clamp: 4; }
  .col-card.is-feature .more { margin: 24px 0 0; font-size: 13px; }
}

/* ---------- 記事下の「コラム一覧」を中央に ---------- */
.col-navlist { align-items: center; }
.col-navlist:has(li.to-list:only-child) { justify-content: center; }

/* 3列カードのタイトル高さを揃える（下の「続きを読む」がガタつかないように） */
@media screen and (min-width: 768px) {
  .col-card:not(.is-feature) .ttl { min-height: 2.6em; }
  .col-card:not(.is-feature) .exc { min-height: 3.8em; }
}

/* ---------- すべて／コラム／ブログ の切り替え ---------- */
.news-tabs {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0 0 10vw;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.news-tabs li { margin: 0; }
.news-tabs a {
  display: block;
  position: relative;
  padding: 0 5.4vw 3.6vw;
  font-size: 3.7vw;
  letter-spacing: .14em;
  color: #b7ad9f;
  text-decoration: none;
  transition: color .35s ease;
}
.news-tabs a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: #c9a24a;
  transform: scaleX(0);
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.news-tabs .is-current a { color: #c9a24a; }
.news-tabs .is-current a::after { transform: scaleX(1); }

@media screen and (min-width: 768px) {
  .news-tabs { max-width: 1180px; margin: 0 auto 60px; }
  .news-tabs a { padding: 0 34px 16px; font-size: 15px; }
  .news-tabs a:hover { color: #e8cf9a; }
  .news-tabs a:hover::after { transform: scaleX(1); }
}

/* ================================================================
   アイキャッチを見切れさせない（2026-09-15）
   ・縦長でも16:10以外でも、画像は全体を表示する（object-fit: contain）
   ・余白は同じ画像のぼかしで埋めて黒帯に見せない
   ================================================================ */

/* ---------- 一覧・関連記事のサムネイル ---------- */
.col-card .thumb {
  background: #14110f;
}
.col-card .thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--thumb-bg);
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(.42) saturate(.85);
  transform: scale(1.14);
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.col-card .thumb img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
}

@media screen and (min-width: 768px) and (hover: hover) {
  /* 拡大すると結局見切れるので、ホバーは明るさと背景のみ動かす */
  .col-card > a:hover .thumb img { transform: none; filter: brightness(1); }
  .col-card > a:hover .thumb::before { transform: scale(1.22); }
}

/* ---------- 記事ページのキービジュアル（アイキャッチ） ---------- */
#header #key.kv-fit .img {
  height: auto;
  min-height: 56vw;
  overflow: hidden;
  background: #14110f;
  display: flex;
  align-items: center;
  justify-content: center;
}
#header #key.kv-fit .img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--kv-bg);
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(.4) saturate(.85);
  transform: scale(1.12);
  pointer-events: none;
}
/* 写真前提の暗幕は図解入りのアイキャッチだと読みづらいので消す。
   SPはロゴ・h1を画像の外（上下の余白）に逃がして重なりをなくす */
#header #key.kv-fit .img::after { background: none; }
#header.has-kv-fit { padding: 170px 0 62px; }
#header.has-kv-fit h1 { bottom: 20px; }
#header #key.kv-fit .img img {
  position: relative !important;
  z-index: 1;
  top: auto;
  left: auto;
  width: 100% !important;
  height: auto !important;
  max-height: 168vw;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
@media screen and (min-width: 768px) {
  #header.has-kv-fit { padding: 123px 80px 0; }
  #header #key.kv-fit .img { min-height: 420px; }
  #header #key.kv-fit .img img { max-height: 780px; }
  /* PCはロゴ・縦組みh1が画像の端に乗るので、ごく薄い暗幕だけ戻す */
  #header #key.kv-fit .img::after {
    background: linear-gradient(180deg, rgba(16,12,10,.26) 0%, rgba(16,12,10,0) 22%, rgba(16,12,10,0) 80%, rgba(16,12,10,.26) 100%);
  }
}