@charset "utf-8";
/* ==========================================================================
   column.css  ウォーターソニック コラム専用スタイル
   - 既存CSS（custom.css / mian.css / screen.css / module.css）は一切変更しない
   - 本ファイルは column.html および /column/ 配下の記事ページでのみ読み込む
   - クラス名はすべて .cl_ プレフィックス（Bootstrapや既存クラスと衝突しない）
   ========================================================================== */

/* --------------------------------------------------
   カラートークン（既存サイトの配色に準拠）
   青   #1b8ad4 … 見出し・リンク
   水色 #00b2ed … アクセント帯
   淡青 #eaf7fd … 背景
   桃   #e5006e … 強調・CTA
   黄   #ffd900 … バッジ
   墨   #333333 … 本文
-------------------------------------------------- */

/* ===== 下層ページ共通ヘッダー ===== */
.cl_pagehead {
  background: linear-gradient(180deg, #eaf7fd 0%, #d5f0fb 100%);
  padding: 34px 0 30px;
  text-align: center;
  border-bottom: 4px solid #00b2ed;
}
.cl_pagehead .cl_pagehead_en {
  display: block;
  color: #00b2ed;
  font-size: 12px;
  letter-spacing: .18em;
  margin-bottom: 6px;
}
.cl_pagehead h1 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.5;
  font-weight: bold;
  color: #1b8ad4;
}
.cl_pagehead .cl_pagehead_lead {
  margin: 0 auto;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}
@media (max-width: 767px) {
  .cl_pagehead { padding: 24px 0 20px; }
  .cl_pagehead h1 { font-size: 20px; }
  .cl_pagehead .cl_pagehead_lead { font-size: 14px; text-align: left; }
}

/* ===== パンくず ===== */
.cl_breadcrumb {
  padding: 10px 0;
  font-size: 12px;
  color: #777;
  background: #fff;
  border-bottom: 1px solid #e5eef3;
}
.cl_breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl_breadcrumb li {
  display: inline;
}
.cl_breadcrumb li + li:before {
  content: "\003e";
  margin: 0 8px;
  color: #b7c8d2;
}
.cl_breadcrumb a { color: #1b8ad4; }

/* ===== 一覧ページ ===== */
.cl_list { padding: 44px 0 56px; background: #f7fcff; }
@media (max-width: 767px) { .cl_list { padding: 28px 0 36px; } }

.cl_card {
  display: block;
  position: relative;
  margin-bottom: 26px;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid #dceaf2;
  border-top: 4px solid #00b2ed;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
}
.cl_card:hover,
.cl_card:focus {
  color: #333;
  text-decoration: none;
  border-color: #00b2ed;
  box-shadow: 0 4px 14px rgba(0, 120, 180, .13);
}
.cl_card:focus { outline: 3px solid #ffd900; outline-offset: 2px; }
.cl_card_meta {
  margin-bottom: 10px;
  font-size: 0;
}
.cl_label {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 12px;
  background: #00b2ed;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 2px;
}
.cl_date {
  display: inline-block;
  color: #8a9aa5;
  font-size: 12px;
}
.cl_card h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: bold;
  color: #1b8ad4;
}
.cl_card p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.85;
  color: #555;
}
.cl_card_more {
  display: inline-block;
  color: #e5006e;
  font-size: 13px;
  font-weight: bold;
}
.cl_card_more:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #e5006e;
}

/* ===== 記事詳細 ===== */
.cl_article { padding: 40px 0 10px; background: #fff; }
.cl_article_inner { max-width: 820px; margin: 0 auto; }
@media (max-width: 767px) { .cl_article { padding: 24px 0 6px; } }

.cl_article_head {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 2px solid #eaf7fd;
}
.cl_article_head h1 {
  margin: 12px 0 0;
  font-size: 27px;
  line-height: 1.55;
  font-weight: bold;
  color: #1b8ad4;
}
@media (max-width: 767px) {
  .cl_article_head h1 { font-size: 21px; }
}

.cl_lead {
  margin-bottom: 30px;
  padding: 18px 20px;
  background: #f7fcff;
  border-left: 5px solid #00b2ed;
  font-size: 15px;
  line-height: 1.95;
}

/* 目次 */
.cl_toc {
  margin: 0 0 36px;
  padding: 20px 24px;
  background: #f4fbfe;
  border: 1px solid #cfe9f5;
  border-radius: 4px;
}
.cl_toc_ttl {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: bold;
  color: #1b8ad4;
  text-align: center;
}
.cl_toc ol { margin: 0; padding-left: 1.4em; }
.cl_toc li { margin-bottom: 8px; font-size: 14px; line-height: 1.7; }
.cl_toc a { color: #333; }
.cl_toc a:hover { color: #1b8ad4; }

/* 本文 */
.cl_body { font-size: 16px; line-height: 2; color: #333; }
.cl_body h2 {
  margin: 48px 0 20px;
  padding: 12px 16px;
  background: #eaf7fd;
  border-left: 6px solid #00b2ed;
  font-size: 21px;
  line-height: 1.5;
  font-weight: bold;
  color: #10527e;
}
.cl_body h3 {
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px dotted #bcdff0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: bold;
  color: #1b8ad4;
}
.cl_body p { margin: 0 0 1.6em; }
.cl_body ul,
.cl_body ol { margin: 0 0 1.8em; padding-left: 1.6em; }
.cl_body li { margin-bottom: .6em; }
.cl_body img { max-width: 100%; height: auto; margin: 10px 0 24px; }
.cl_body figure { margin: 0; }
.cl_body figure img { display: block; width: 100%; margin: 10px auto 24px; }

/* 記事冒頭のアイキャッチ画像 */
.cl_hero { margin: 0 0 24px; }
.cl_hero img { display: block; width: 100%; max-width: 100%; height: auto; }
.cl_body strong { color: #e5006e; }
.cl_body a { color: #1b8ad4; text-decoration: underline; }
@media (max-width: 767px) {
  .cl_body { font-size: 15px; line-height: 1.95; }
  .cl_body h2 { margin: 34px 0 16px; font-size: 18px; padding: 10px 12px; }
  .cl_body h3 { font-size: 16px; }
}

/* 表 */
.cl_body table {
  width: 100%;
  margin: 0 0 1.8em;
  border-collapse: collapse;
  font-size: 15px;
}
.cl_body table th,
.cl_body table td {
  padding: 12px 14px;
  border: 1px solid #d7e7ef;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}
.cl_body table th {
  width: 30%;
  background: #eaf7fd;
  color: #10527e;
  font-weight: bold;
}
.cl_body table thead th {
  width: auto;
  background: #00b2ed;
  color: #fff;
}
@media (max-width: 480px) {
  .cl_body table th,
  .cl_body table td { display: block; width: 100%; border-top: none; }
  .cl_body table tr:first-child th { border-top: 1px solid #d7e7ef; }
}

/* 列数の多い表は縦積みにせず横スクロールさせる */
.cl_scroll { margin: 0 0 1.8em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cl_body .cl_scroll table { margin: 0; min-width: 560px; }
.cl_body .cl_scroll table th { width: auto; }
@media (max-width: 480px) {
  .cl_body .cl_scroll table th,
  .cl_body .cl_scroll table td { display: table-cell; width: auto; border-top: 1px solid #d7e7ef; }
}

/* 注意・ポイントボックス */
.cl_point {
  margin: 0 0 1.8em;
  padding: 18px 20px 4px;
  background: #fffdf0;
  border: 2px solid #ffd900;
  border-radius: 4px;
}
.cl_point_ttl {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: #10527e;
}
.cl_caution {
  margin: 0 0 1.8em;
  padding: 18px 20px 4px;
  background: #fff5f9;
  border: 2px solid #f3a9c8;
  border-radius: 4px;
}
.cl_caution .cl_point_ttl { color: #e5006e; }

/* 記事内CTA */
.cl_cta {
  margin: 44px 0 10px;
  padding: 26px 24px;
  background: linear-gradient(180deg, #00b2ed 0%, #0092d4 100%);
  border-radius: 6px;
  text-align: center;
  color: #fff;
}
.cl_cta_ttl {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}
.cl_cta_sub {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.8;
}
.cl_cta_tel {
  display: inline-block;
  margin: 0 6px 10px;
  padding: 12px 26px;
  background: #ffd900;
  color: #10527e;
  font-size: 24px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
}
.cl_cta_tel:hover,
.cl_cta_tel:focus { background: #ffe74d; color: #10527e; text-decoration: none; }
.cl_cta_btn {
  display: inline-block;
  margin: 0 6px 10px;
  padding: 14px 26px;
  background: #e5006e;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
}
.cl_cta_btn:hover,
.cl_cta_btn:focus { background: #ff2b8e; color: #fff; text-decoration: none; }
.cl_cta_note { margin: 6px 0 0; font-size: 12px; opacity: .9; }
@media (max-width: 767px) {
  .cl_cta { padding: 20px 16px; }
  .cl_cta_ttl { font-size: 17px; }
  .cl_cta_tel { font-size: 20px; padding: 10px 18px; display: block; margin: 0 0 10px; }
  .cl_cta_btn { display: block; margin: 0 0 8px; }
}

/* 関連記事 */
.cl_related { padding: 44px 0 50px; background: #f7fcff; }
.cl_related_ttl {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: bold;
  color: #1b8ad4;
  text-align: center;
}
@media (max-width: 767px) { .cl_related { padding: 28px 0 32px; } }

/* 一覧へ戻る */
.cl_back { padding: 0 0 46px; background: #f7fcff; text-align: center; }
.cl_back a {
  display: inline-block;
  padding: 12px 34px;
  background: #fff;
  border: 2px solid #00b2ed;
  border-radius: 40px;
  color: #1b8ad4;
  font-weight: bold;
  text-decoration: none;
}
.cl_back a:hover,
.cl_back a:focus { background: #00b2ed; color: #fff; text-decoration: none; }

/* 更新日 */
.cl_dates { font-size: 12px; color: #8a9aa5; }
.cl_dates span + span { margin-left: 14px; }

/* アンカーがヘッダーに隠れないように */
.cl_body h2[id],
.cl_body h3[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  .cl_card, .cl_cta_tel, .cl_cta_btn, .cl_back a { transition: none; }
}