@charset "UTF-8";


/* --- コラム共通スタイル --- */


/* メインコンテンツ幅を740pxに設定 */
.container-column {
  width: 100%;
  max-width: 780px; /* 740px / 16px = 46.25rem */
  margin-right: auto;
  margin-left: auto;
  padding: 1.25rem 1.625rem 1.875rem 1.625rem;
}
@media (max-width: 767px) {
  #page .container-column {
    padding: 1.0rem;
  }
}@media (min-width: 768px) {
  .container-column {
    padding: 1.625rem 1.625rem 1.625rem 1.625rem;
  }
}

@media (max-width: 767px) {
  #page .container-column img {
    border-radius: 0;
  }
}

.container-column img {
  border-radius: 0.5rem;
}

/* ページ全体の背景色（LPの変数を活用） */
.column-bg-light {
  background-color: var(--background-light); /* #F9FAFB */
}

/* タイトルと説明文の3行制限（三点リーダー） */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* コラムカード本体 */
.column-card {
  display: block; /* aタグ全体をブロックに */
  height: 100%;
  background: #fff;
  border-radius: 1.0rem;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  /* 角丸の切り抜きバグを防ぐ */
  isolation: isolate;
}

.column-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.column-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* カード内のテキストエリア */
.column-card-content {
  padding: 0.75rem 1.5rem 1.5rem 1.5rem;
}

.column-card .card-body {
  padding: 1.5rem;
}

/* 日付：LPのメインカラー（金）を使用 */
.column-card-date {
  font-size: 0.8rem;
  color: var(--secondary-color); /* #B9B9B9 */
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: block;
}

.column-date {
  font-size: 0.875rem;
  color: var(--text-color-03);
  margin-bottom: 0.5rem;
}

/* タイトル：3行で省略 */
.column-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: var(--text-color); /* #364153 */
  margin-bottom: 1rem;
  /* 3行制限の設定 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* スマホ表示でのタイトルサイズ微調整 */
@media (max-width: 767px) {
  .column-card-title {
    font-size: 1rem;
  }
}

/* 説明文：3行で省略（色は薄いグレー） */
/* .column-card-excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-color-03);
  margin-bottom: 0;
} */
.column-card-excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-color-03); /* #6A7282 */
  margin-bottom: 0;
  /* 3行制限の設定 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 一覧ページのカード画像（アスペクト比をデザインに寄せる） */
.column-card-img-wrapper {
  width: 100%;
  aspect-ratio: 1.8 / 1; /* 少し横長 */
  overflow: hidden;
  /* ▼ ここがポイント：背景を透明にするか、カードの背景色に合わせる ▼ */
  background-color: transparent;
  /* 一部のブラウザで角丸の切り抜きを滑らかにするおまじない */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* ▼ 追加：上だけ角丸にし、下は直線にする ▼ */
  border-radius: 1.0rem 1.0rem 0 0;
}

.column-card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像自体にも念のため角丸を指定（親の背景漏れ対策） */
  border-radius: 1.0rem 1.0rem 0 0;
}




/* --- 詳細ページ：コンテンツスタイル --- */
.column-detail-img {
  width: 100%;
  border-radius: 1.25rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 詳細ページのパンくず・カテゴリー表示用 */
.column-category-info {
  font-size: 0.8rem;
  color: var(--text-color-03);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}
@media (max-width: 767px) {
  .column-category-info {
    gap: 0.25rem;
  }
}

/* 詳細ページの本文エリア */
.column-content-wrapper {
  background-color: #fff;
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
@media (max-width: 767px) {
  .column-content-wrapper {
    border-radius: 1.0rem;
  }
}

.column-detail-title {
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

/* 詳細ページの本文内 H2（デザイン案の黄色い下線） */
.column-body {
  /* 本文の基本設定：PC版 16px */
  font-size: 1rem; 
  line-height: 1.8;
  color: var(--text-color);
}

/* H2見出し：PC版 24px */
.column-body h2 {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 0.75rem;
  margin-top: 3.5rem; /* 前のブロックとの間隔 */
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--primary-color); /* 金色の下線 */
  text-align: left;
}

/* H3見出し：中見出し */
.column-body h3 {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

/* 段落の間隔 */
.column-body p {
  margin-bottom: 1.5rem;
}

/* --- リスト・定義リストのスタイル --- */

/* 箇条書き（ul） */
.column-body ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  list-style-type: disc; /* 標準的なドット */
}

/* 定義リスト（dl）：サイズ目安やサービス概要用 */
.column-body .dl-box {
  background-color: #fbfbfb; /* わずかにグレーの背景で読みやすく */
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  padding: 1rem 0;
}
@media (max-width: 767px) {
  .column-body .dl-box {
    padding: 0;
  }
}

.column-body dl {
  margin-bottom: 0;
  padding: 0 1.5rem;
}

.column-body dt {
  display: inline-block;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}
@media (max-width: 767px) {
  .column-body dt {
    display: inline;
  }
}

.column-body dd {
  display: inline-block;
  margin-bottom: 1rem;
  padding-left: 0;
}
@media (max-width: 767px) {
  .column-body dd {
    display: inline;
  }
}

.column-body dd:last-child {
  margin-bottom: 0;
}

/* 本文内のリンク */
.column-body a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.column-body a:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* --- モバイル用調整 (767px以下) --- */
@media (max-width: 767px) {
  .column-body {
    font-size: 0.9375rem; /* 約15px */
  }
  
  .column-body h2 {
    font-size: 1.25rem; /* 20px */
    margin-top: 2.5rem;
  }
  
  .column-body dl {
    padding: 1rem;
  }
}