@charset "UTF-8";

/* ==========================================================================
 * # ARTICLE SPECIFIC STYLES (1rem = 10px 換算基準)
 * ========================================================================== */

/* --------------------------------------------------
 * 1. 記事キービジュアル (#kv_page)
 * -------------------------------------------------- */
.clm-content #kv_page {
  background: url(/corp/column/images/kv_bg.png) no-repeat top center;
  background-size: cover;
  padding: 4.0rem 0 3.0rem;
  color: #ffffff;
}

@media (max-width: 767px) {
  .clm-content #kv_page {
    background: url(/corp/column/images/kv_sp.png) no-repeat top center;
    background-size: cover;
    padding: 3.0rem 1.6rem 2.5rem;
  }
}

.clm-content #kv_page .kv_container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 2.0rem;
}

.clm-content #kv_page h1 {
  font-size: 3.2rem; /* 32px */
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 767px) {
  .clm-content #kv_page h1 {
    font-size: 2.2rem; /* スマホ時 22px */
    line-height: 1.4;
  }
}

.clm-content #kv_page h1 small {
  font-size: 1.8rem; /* 18px */
  font-weight: normal;
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------
 * 2. 記事カード全体 & 導入文
 * -------------------------------------------------- */
.clm-content .article_wrap {
  background-color: #ffffff;
  border-radius: 2.0rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  margin: -2.0rem auto;
  padding: 4.0rem 5.0rem;
}

@media (max-width: 767px) {
  .clm-content .article_wrap {
    padding: 2.5rem 2.0rem;
    margin-top: -1.5rem;
    border-radius: 1.5rem;
  }
}

.clm-content .article_wrap-in {
  margin-bottom: 4.0rem;
}

/* 導入文 */
.clm-content .article_intro {
  font-size: 1.8rem; /* 18px */
  line-height: 1.85;
  color: #333333;
  margin-bottom: 3.0rem;
  padding-bottom: 2.0rem;
  border-bottom: 1px solid #e0e0e0;
}

@media (max-width: 767px) {
  .clm-content .article_intro {
    font-size: 1.6rem;
    line-height: 1.75;
  }
}

/* --------------------------------------------------
 * 3. 見出し (h3.article_ttl / h3.ttl_bgGray)
 * -------------------------------------------------- */
/* Summary見出し */
.clm-content .ttl_bgGray {
  font-size: 2.0rem;
  font-weight: bold;
  color: #1aa1a9;
  background-color: #f2f8f8;
  padding: 1.0rem 1.8rem;
  border-left: 5px solid #1aa1a9;
  border-radius: 0 0.4rem 0.4rem 0;
  margin: 2.5rem 0 1.5rem;
}

/* Summary目次内 Tipsバッジ (.tips) */
.clm-content .article_summary-list li .tips {
  font-size: 1.3rem !important; /* 13px相当 */
  border: 1px solid #1aa1a9;
  border-radius: 2.0em;
  padding: 0.15rem 0.8rem;
  color: #1aa1a9;
  font-weight: bold;
  margin-right: 0.8rem;
  display: inline-block;
  white-space: nowrap;
  background-color: #ffffff;
  line-height: 1.4;
  vertical-align: middle;
}

/* 記事大見出し (h3.article_ttl) */
.clm-content .article_ttl {
  font-size: 2.4rem; /* 24px */
  font-weight: bold;
  color: #1aa1a9;
  line-height: 1.45;
  margin: 4.0rem 0 2.0rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #1aa1a9;
  position: relative;
}

@media (max-width: 767px) {
  .clm-content .article_ttl {
    font-size: 1.9rem;
    margin: 3.0rem 0 1.5rem;
  }
}

.clm-content .article_ttl .num {
  font-size: 2.6rem;
  margin-right: 0.6rem;
  vertical-align: -0.1em;
}

/* --------------------------------------------------
 * 4. 本文テキスト (p) & 強調マーカー
 * -------------------------------------------------- */
.clm-content .article_wrap p {
  font-size: 1.7rem !important;      /* 16px → 17px に拡大 */
  line-height: 2.0 !important;        /* 行間を 1.85 → 2.0 に広げて目線をスムーズに */
  letter-spacing: 0.04em !important; /* 文字同士の詰まり感を抑える適度な字間 */
  color: #333333;
  margin-bottom: 2.8rem !important;  /* 段落同士の間隔を拡大 (24px → 28px) */
}

@media (max-width: 767px) {
  .clm-content .article_wrap p {
    font-size: 1.6rem !important;    /* スマホ時 15px → 16px */
    line-height: 1.9 !important;      /* スマホ時 1.75 → 1.9 */
    letter-spacing: 0.03em !important;
    margin-bottom: 2.2rem !important; /* スマホ時の段落間余白 (18px → 22px) */
  }
}

/* STEP小見出し (.step_ttl) */
.clm-content .article_wrap p.step_ttl,
.clm-content .step_ttl {
  font-size: 1.8rem !important; /* 18px */
  font-weight: bold !important;
  color: #1aa1a9 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 0.8rem !important;
  line-height: 1.5 !important;
}

@media (max-width: 767px) {
  .clm-content .article_wrap p.step_ttl,
  .clm-content .step_ttl {
    font-size: 1.6rem !important;
    margin-top: 2.0rem !important;
    margin-bottom: 0.6rem !important;
  }
}

/* 黄色下線強調 (strong.ul_y) */
.clm-content strong.ul_y {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #fff066 60%);
  padding: 0 0.2em;
}

/* 画像スタイル */
.clm-content .article_mainImg {
  margin: 2.0rem 0 2.5rem;
  text-align: center;
}

.clm-content .article_mainImg img,
.clm-content img.imgR {
  border-radius: 0.8rem;
  max-width: 100%;
  height: auto;
}

.clm-content img.imgR {
  float: right;
  margin: 0 0 1.5rem 2.0rem;
  max-width: 40%;
}

@media (max-width: 767px) {
  .clm-content img.imgR {
    float: none;
    margin: 1.0rem auto 1.5rem;
    display: block;
    max-width: 100%;
  }
}

/* --------------------------------------------------
 * 5. 小見出し (.ttl_g) & 灰色日程ボックス (.bg_gray)
 * -------------------------------------------------- */
/* コラム内のすべての .ttl_g (本文中含む) に共通スタイルを適用 */
.clm-content .ttl_g {
  font-size: 1.8rem !important; /* 18px */
  font-weight: bold !important;
  color: #1aa1a9 !important;
  text-align: left !important;
  margin: 3.0rem 0 1.2rem 0 !important; /* 上下に適切な余白を確保 */
  padding: 0 !important;
  line-height: 1.4 !important;
}

@media (max-width: 767px) {
  .clm-content .ttl_g {
    font-size: 1.6rem !important;
    margin: 2.2rem 0 1.0rem 0 !important;
  }
}

.clm-content .bg_gray {
  background-color: #f5f8f8;
  border-radius: 1.0rem;
  padding: 2.5rem 3.0rem;
  margin: 3.0rem 0;
  border: 1px solid #e0eded;
}

@media (max-width: 767px) {
  .clm-content .bg_gray {
    padding: 1.8rem 1.5rem;
    margin: 2.0rem 0;
  }
}

/* 灰色ボックス内の余白最適化 */
.clm-content .bg_gray .ttl_g {
  margin-top: 0 !important;
  margin-bottom: 1.2rem !important;
}

.clm-content .bg_gray p {
  margin-bottom: 1.6rem !important; /* ボックス内のテキスト下余白を適正化 */
}

.clm-content .bg_gray p:last-child,
.clm-content .bg_gray > *:last-child {
  margin-bottom: 0 !important;     /* ボックス内最下部エレメントの下余白を除去 */
}

.clm-content .bg_gray dl.addColon {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.6;
}

.clm-content .bg_gray dl.addColon:last-child {
  margin-bottom: 0;
}

.clm-content .bg_gray dl.addColon dt {
  font-weight: bold;
  color: #333333;
  width: 18.0rem;
  position: relative;
}

.clm-content .bg_gray dl.addColon dt::after {
  content: "：";
}

.clm-content .bg_gray dl.addColon dd {
  color: #444444;
  width: calc(100% - 18.0rem);
  margin: 0;
}

@media (max-width: 767px) {
  .clm-content .bg_gray dl.addColon dt,
  .clm-content .bg_gray dl.addColon dd {
    width: 100%;
  }
  .clm-content .bg_gray dl.addColon dt::after {
    content: "";
  }
  .clm-content .bg_gray dl.addColon dd {
    margin-top: 0.3rem;
    margin-left: 1.0rem;
  }
}

/* 注釈 (.notes) */
.clm-content .notes {
  font-size: 1.3rem;
  color: #777777;
  line-height: 1.6;
  margin-top: 1.5rem;
  padding-left: 0;
}

.clm-content .notes li {
  list-style: none;
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------
 * 6. キャリタスUC Tips (.article_tips)
 * -------------------------------------------------- */
.clm-content .article_tips {
  background-color: #ebf4f5 !important;
  background-image: url(/corp/column/article01/images/bg_g.png) !important;
  background-repeat: repeat !important;        /* 斜線パターン */
  background-position: left top !important;
  background-size: auto !important;
  border-radius: 1.5rem !important;
  padding: 4.0rem 4.5rem !important;
  margin: 4.0rem -2.5rem 2.0rem !important;    /* 左右をゆったり広げる */
  border: none !important;
  box-sizing: border-box !important;
}

.clm-content .article_tips .article_tips-in {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .clm-content .article_tips {
    padding: 2.5rem 2.0rem !important;
    margin: 3.0rem 0 1.5rem !important;
  }
}

.clm-content .article_tips h3 {
  display: inline-block;
  background-color: #1aa1a9;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 0.6rem 2.0rem;
  border-radius: 0.6rem;
  margin-bottom: 2.0rem;
}

.clm-content .article_tips h4 {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.45;
  color: #1aa1a9;
  margin-bottom: 2.0rem;
}

@media (max-width: 767px) {
  .clm-content .article_tips h4 {
    font-size: 1.8rem;
  }
}

.clm-content .article_tips p {
  font-size: 1.6rem !important;
  line-height: 1.8 !important;
  color: #333333;
  margin-bottom: 2.0rem !important;
}

.clm-content .article_tips p:last-child,
.clm-content .article_tips > *:last-child {
  margin-bottom: 0 !important;
}

.clm-content .article_tips hr {
  border: 0;
  border-top: 1px dashed #b8dadc;
  margin: 3.0rem 0;
}

/* --- Tips内ボタンエリア (均等配置レイアウト) --- */
.clm-content .article_tips .btn_wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.2rem !important;
  margin: 2.5rem 0 1.0rem !important;
}

/* すべてのボタン枠を「均一な50%幅」に統一 */
.clm-content .article_tips .btn_bgw {
  width: calc(50% - 0.6rem) !important;
  max-width: none !important;
  margin-bottom: 0.8rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  .clm-content .article_tips .btn_bgw {
    width: 100% !important;                   /* スマホ時は100%幅 */
  }
}

.clm-content .article_tips .btn_bgw a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;       /* テキストを中央揃え */
  width: 100% !important;
  min-height: 54px !important;                 /* ボタンの縦幅をキレイに揃える */
  border: 1px solid #1aa1a9 !important;
  border-radius: 3em !important;
  padding: 0.6em 3.2em 0.6em 1.2em !important;/* 右側矢印用余白 */
  color: #1aa1a9 !important;
  background-color: #ffffff !important;
  position: relative !important;
  font-size: 1.5rem !important;               /* 文字溢れを起こさない適正サイズ */
  font-weight: bold !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: all 0.3s !important;
}

@media (max-width: 920px) and (min-width: 768px) {
  .clm-content .article_tips .btn_bgw a {
    font-size: 1.35rem !important;            /* 中間画面幅での折り返し防止 */
    padding: 0.6em 2.8em 0.6em 0.8em !important;
  }
}

@media (max-width: 767px) {
  .clm-content .article_tips .btn_bgw a {
    padding: 0.8em 3.0em 0.8em 1.2em !important;
    font-size: 1.4rem !important;
  }
}

.clm-content .article_tips .btn_bgw a:after {
  content: url(/corp/column/article01/images/arrow_2.svg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 0.8em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: all 0.1s !important;
  background: linear-gradient(to right, #1aa1a9 0%, #3dc795 100%) !important;
  border-radius: 50% !important;
  width: 27px !important;
  height: 27px !important;
}

.clm-content .article_tips .btn_bgw a:hover {
  background-color: #c1e2e4 !important;
  text-decoration: none !important;
}

.clm-content .article_tips .btn_bgw a:hover:after {
  right: 0.6em !important;
}

/* --------------------------------------------------
 * 7. コラムトップへ戻るボタン (.btn_bgw._center)
 * -------------------------------------------------- */
.clm-content .btn_bgw._center {
  margin: 2.0rem auto 3.0rem !important;
  max-width: 300px !important;
  width: 100% !important;
  text-align: center !important;
}

.clm-content .btn_bgw._center a {
  display: block !important;
  padding: 0.8em 1.6em 0.8em 2.6em !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  color: #1aa1a9 !important;
  background-color: #ffffff !important;
  border: 1px solid #b2dede !important;
  border-radius: 2.0em !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.clm-content .btn_bgw._center a:after {
  content: url(/corp/column/article01/images/arrow_2.svg) !important;
  position: absolute !important;
  left: 1.0em !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(180deg) scale(0.85) !important;
  background: #1aa1a9 !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
}

.clm-content .btn_bgw._center a:hover {
  background-color: #f2f9f9 !important;
  border-color: #1aa1a9 !important;
}

.clm-content .btn_bgw._center a:hover:after {
  left: 0.8em !important;
}

/* --------------------------------------------------
 * 8. 前後の記事ナビゲーション (.prev-next-link)
 * -------------------------------------------------- */
.clm-content .prev-next-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.0rem;
  margin: 2.0rem 0 1.5rem;
  padding: 1.0rem 0;
  border-top: 1px dotted #cccccc;
  border-bottom: 1px dotted #cccccc;
}

@media (max-width: 767px) {
  .clm-content .prev-next-link {
    flex-direction: column;
    gap: 1.2rem;
  }
}

.clm-content .prev-next-link a {
  display: block;
  width: 48%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

@media (max-width: 767px) {
  .clm-content .prev-next-link a {
    width: 100%;
  }
}

.clm-content .prev-next-link a.next-link {
  text-align: right;
}

@media (max-width: 767px) {
  .clm-content .prev-next-link a.next-link {
    text-align: left;
  }
}

.clm-content .prev-next-link a:hover {
  opacity: 0.75;
}

.clm-content .prev-next-label {
  font-size: 1.5rem !important; /* 15px */
  font-weight: bold !important;
  color: #1aa1a9 !important;
  margin-bottom: 0.3rem !important;
  text-decoration: underline !important;
}

.clm-content .prev-next-link a:hover .prev-next-label {
  text-decoration: none !important;
}

.clm-content .prev-next-link p:not(.prev-next-label) {
  font-size: 1.4rem !important; /* 14px */
  color: #333333 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}