@charset "UTF-8";

/* =========================================================
   Column（コラム）ページ共通
   - archive-column.php / single-column.php 用
   - 既存サイトのデザインシステム（CSS変数）を踏襲
     --font-min : Zen Old Mincho
     --font-en  : Poppins
     --color-green : #278432
     --color-bg : #FFF3E3
   ========================================================= */

/* -----------------------
   共通
------------------------ */
.column_page {
  padding-top: 4.5rem;
  padding-bottom: 15rem;
  position: relative;
  overflow: hidden;
  /* 他ページ（children の .target_block）と同じ雲の背景画像＋#C9EEF9 */
  background: url(../img/target/cloud_sp.webp) no-repeat center top/100% auto #C9EEF9;
}
@media screen and (min-width: 768px) {
  .column_page {
    background: url(../img/target/cloud.webp) no-repeat center top/100% auto #C9EEF9;
  }
}

/* =========================================================
   装飾：鳥（.target_block 等と同じ配置パターン）
   ========================================================= */
.column_page .bird_top {
  position: absolute;
  top: 2rem;
  right: 5.6rem;
  transform: scale(-1, 1) rotate(-23.65deg);
  pointer-events: none;
  z-index: 1;
}
.column_page .bird_top img {
  width: 4rem;
}
@media screen and (min-width: 768px) {
  .column_page .bird_top {
    top: 6rem;
    right: calc(50% - 8rem);
  }
  .column_page .bird_top img {
    width: 7rem;
  }
}

.column_page .bird_left {
  position: absolute;
  top: 30%;
  left: 2rem;
  transform: rotate(-17.27deg);
  pointer-events: none;
  z-index: 1;
}
.column_page .bird_left img {
  width: 3.4rem;
}
@media screen and (min-width: 768px) {
  .column_page .bird_left {
    top: 40%;
    left: 6rem;
  }
  .column_page .bird_left img {
    width: 7rem;
  }
}

.column_page .bird_right {
  position: absolute;
  bottom: 20rem;
  right: 2.5rem;
  transform: scale(-1, 1) rotate(-23.65deg);
  pointer-events: none;
  z-index: 1;
}
.column_page .bird_right img {
  width: 3rem;
}
@media screen and (min-width: 768px) {
  .column_page .bird_right {
    bottom: 34rem;
    right: 6rem;
  }
  .column_page .bird_right img {
    width: 6rem;
  }
}
.column_inner {
  margin-inline: 3rem;
}
@media screen and (min-width: 768px) {
  .column_page {
    padding-top: 8rem;
    padding-bottom: 28rem;
  }
  .column_inner {
    margin-inline: auto;
    padding-inline: 2rem;
    max-width: 128rem;
  }
}

/* =========================================================
   コラム一覧（archive-column.php）
   ========================================================= */
.column_archive {
  position: relative;
}

/* 白背景エリア（カード一覧を囲む） */
.column_list_wrap {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 0.5rem 0 0 0.5rem;
  padding: 3rem 2rem 4rem;
}
@media screen and (min-width: 768px) {
  .column_list_wrap {
    padding: 5rem 5rem 6rem;
  }
}

/* 見出し & 年フィルター 行 */
.column_head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .column_head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 5rem;
  }
}

.column_head_ttl {
  margin-bottom: 0;
}
/* 見出しはゴシック体（bodyフォント継承） */
.column_head_ttl h2 {
  font-family: inherit;
  transform: none;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .column_head_ttl h2 {
    font-size: 3.4rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }
}

/* フィルター */
.column_filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .column_filter {
    width: auto;
  }
}
.column_filter_select {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 16rem;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 0.5rem;
}
@media screen and (min-width: 768px) {
  .column_filter_select {
    flex: 0 0 auto;
    width: 16rem;
  }
}
.column_filter_select .material-symbols-outlined {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #222;
  pointer-events: none;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
.column_filter_select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 1.2rem 3.5rem 1.2rem 1.5rem;
  font-family: var(--font-min);
  font-size: 1.2rem;
  letter-spacing: normal;
  color: #222;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.column_filter_submit {
  margin-top: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-size: 1.3rem;
  background-color: var(--color-green);
  color: #fff;
  border: 0;
  cursor: pointer;
}

/* カード一覧グリッド */
.column_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem 3.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 560px) {
  .column_list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1000px) {
  .column_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 5.5rem 3.5rem;
  }
}

.column_list_item {
  list-style: none;
}

/* カード */
.column_card {
  display: block;
  transition: opacity 0.3s, transform 0.3s;
}
.column_card:active {
  opacity: 0.7;
}
@media (hover) {
  .column_card:hover {
    opacity: 0.8;
  }
  .column_card:hover .column_card_thumb img {
    transform: scale(1.04);
  }
}

.column_card_thumb {
  position: relative;
  margin: 0;
  aspect-ratio: 310 / 216;
  border-radius: 0.2rem;
  overflow: hidden;
}
.column_card_thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.2rem;
  transition: transform 0.5s ease;
}
.column_card_thumb_empty {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  border-radius: 0.2rem;
}

/* メタ行：日付＋カテゴリーバッジ */
.column_card_meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.column_card_date {
  font-family: var(--font-min);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: #222;
  line-height: 1;
}
/* カテゴリーバッジ群（複数時は横並び＋折り返し） */
.column_card_cats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.column_card_cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.8rem;
  height: 1.9rem;
  padding: 0 0.8rem;
  background-color: #F3F2D5; /* デフォルト（PHP側で上書き可） */
  font-family: var(--font-min);
  font-size: 1.3rem;
  line-height: 1;
  color: #222;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.column_card_ttl {
  margin-top: 1rem;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 記事が無い時 */
.column_empty {
  text-align: center;
  font-size: 1.5rem;
  padding: 6rem 0;
  color: #666;
}

/* =========================================================
   ページネーション（1 2 3 … / 戻る・次へ）
   ========================================================= */
.column_pager {
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .column_pager {
    margin-top: 7rem;
  }
}
.column_pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-min);
  font-size: 1.5rem;
}
.column_pager li {
  list-style: none;
}
.column_pager .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 0.5rem;
  color: #222;
  text-decoration: none;
  line-height: 1;
  border-radius: 50%;
  transition: 0.3s;
}
.column_pager a.page-numbers:hover {
  color: var(--color-green);
}
.column_pager .page-numbers.current {
  background-color: var(--color-green);
  color: #fff;
}
.column_pager .page-numbers.dots {
  background: transparent;
}
.column_pager_prev,
.column_pager_next {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-min);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
/* Material Symbols アイコン */
.column_pager_icon {
  font-size: 2rem;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* =========================================================
   コラム詳細（single-column.php）
   ========================================================= */
.column_single {
  position: relative;
}
.column_detail {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 3rem 2rem;
  margin-inline: auto;
  max-width: 100rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.04);
}
@media screen and (min-width: 768px) {
  .column_detail {
    padding: 7rem 7rem 6rem;
  }
}

/* メタ（日付 / カテゴリー / 執筆者） */
.column_detail_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  font-family: var(--font-min);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: #222;
  line-height: 1;
  margin-bottom: 2rem;
}
.column_detail_date {
  font-weight: 500;
}
/* カテゴリーバッジ群（複数時は横並び＋折り返し） */
.column_detail_cats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.column_detail_cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.8rem;
  height: 1.9rem;
  padding: 0 0.8rem;
  background-color: #F3F2D5; /* デフォルト（PHP側で上書き可） */
  font-family: var(--font-min);
  font-size: 1.3rem;
  line-height: 1;
  color: #222;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.column_detail_author {
  position: relative;
  padding-left: 1.5rem;
}
.column_detail_author::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.6rem);
  left: 0;
  width: 1px;
  height: 1.2rem;
  background-color: #d9d9d9;
}

/* タイトル（ゴシック体） */
.column_detail_ttl {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #222;
  margin: 0 0 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #d9d9d9;
}
@media screen and (min-width: 768px) {
  .column_detail_ttl {
    font-size: 2.5rem;
    line-height: 1.6;
    margin-bottom: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* アイキャッチ */
.column_detail_thumb {
  margin: 0 0 3rem;
  aspect-ratio: 860 / 458;
  background-color: #f2f2f2;
  overflow: hidden;
  border-radius: 0.2rem;
}
.column_detail_thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column_detail_thumb--empty {
  background: url(../img/logo.svg) no-repeat center/6rem auto #f2f2f2;
  opacity: 0.9;
}
@media screen and (min-width: 768px) {
  .column_detail_thumb {
    margin-bottom: 4.5rem;
  }
}

/* 本文（ゴシック体） */
.column_detail_body {
  font-size: 1.5rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: #222;
}
@media screen and (min-width: 768px) {
  .column_detail_body {
    font-size: 1.6rem;
    line-height: 1.87;
  }
}
.column_detail_body > * + * {
  margin-top: 2rem;
}
.column_detail_body p {
  margin: 0 0 2rem;
}
.column_detail_body p:last-child {
  margin-bottom: 0;
}
.column_detail_body h2 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin: 4rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-green);
}
.column_detail_body h3 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin: 3.5rem 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--color-green);
}
.column_detail_body h4 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 3rem 0 1rem;
}
.column_detail_body ul,
.column_detail_body ol {
  padding-left: 2rem;
  margin: 0 0 2rem;
}
.column_detail_body ul li,
.column_detail_body ol li {
  margin-bottom: 0.5rem;
  line-height: 1.87;
}
.column_detail_body ul li {
  list-style: disc;
}
.column_detail_body ol li {
  list-style: decimal;
}
.column_detail_body a {
  color: var(--color-green);
  text-decoration: underline;
  word-break: break-word;
}
.column_detail_body a:hover {
  opacity: 0.7;
}
.column_detail_body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 0.2rem;
}
.column_detail_body blockquote {
  background-color: var(--color-bg);
  border-left: 3px solid var(--color-green);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  font-size: 1.5rem;
  line-height: 1.8;
}
.column_detail_body strong {
  font-weight: 700;
}

/* 前後ナビ（ゴシック体） */
.column_detail_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid #d9d9d9;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .column_detail_nav {
    margin-top: 5rem;
  }
}
/* リンクあり（記事が存在する） */
.column_detail_nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #222;
  font-weight: 500;
  transition: color 0.3s;
}
.column_detail_nav a:hover {
  color: var(--color-green);
}
/* リンクなし（記事が存在しない） */
.column_detail_nav_disabled {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #bababa;
  pointer-events: none;
}
/* Material Symbols アイコン */
.column_detail_nav_icon {
  font-size: 2.4rem;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.column_detail_nav_next {
  margin-left: auto;
}

/* 一覧へもどるボタン */
.column_detail_back {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.column_detail_back_btn {
  display: grid;
  grid-template-columns: 1fr 0.9rem;
  align-items: center;
  gap: 0 1.5rem;
  width: 100%;
  max-width: 30rem;
  padding: 1.6rem 2.5rem;
  font-family: var(--font-min);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: var(--color-green);
  border-radius: 0.2rem;
  text-align: left;
  transition: 0.3s;
}
.column_detail_back_btn::after {
  content: "";
  width: 100%;
  aspect-ratio: 10 / 6;
  background: url(../img/arrow_white.svg) no-repeat center/100% auto;
  transition: 0.3s;
}
.column_detail_back_btn:hover,
.column_detail_back_btn:active {
  opacity: 0.8;
}
.column_detail_back_btn:hover::after,
.column_detail_back_btn:active::after {
  transform: translateX(0.6rem);
}