@charset "UTF-8";

/* ==================================
   本文
================================== */

.column-detail__main p {
  font-size: clamp(14px, 1.1111111111vw, 18px);
  line-height: 2;
  margin-bottom: 24px;
  font-weight: 700;
}

.column-detail__main li {
  font-weight: 500;
}

.column-detail__main a {
  color: #005AAA;
  text-decoration: underline;
  font-weight: 700;
}

.column-detail__main a:hover {
  opacity: 0.8;
}

/* ==================================
   H2
================================== */

.column-detail__main h2,
.column-detail__main h2 span {
  padding: 1.5277777778vw 2.7083333333vw;
  margin-bottom: 1.4722222222vw;

  background-color: #005AAA;
  border-radius: 10px;

  font-size: clamp(16px, 1.3888888889vw, 9999px);
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 0.15em;
  color: #FFFFFF;
}

.column-detail__main h2 {
  scroll-margin-top: 50px;
}

.column-detail__main h2 span[id] {
  scroll-margin-top: 50px;
}

/* ==================================
   H3
================================== */

.column-detail__main h3 {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 3vw 0 1vw;

  font-size: clamp(16px, 1.25vw, 9999px);
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.15em;
  color: #2E3843;
}

.column-detail__main h3::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: #005AAA;
}

/* ==================================
   H4
================================== */

.column-detail__main h4 {
  position: relative;

  margin-top: 2vw;
  padding-bottom: 0.5em;

  border-bottom: 2px solid #F3FF3A;

  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;

  color: #2E3843;
}

.column-detail__main h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;

  width: 3.75rem;
  height: 2px;

  background-color: #005784;
}

.column-detail__main h4 + * {
  margin-top: 1.25rem;
}

/* ==================================
   画像
================================== */

.column-detail__main img {
  display: block;

  width: 43.4722222222vw;
  max-width: 100%;

  margin: 2.7777777778vw auto;
  padding: 0.7638888889vw;

  box-sizing: border-box;

  background-color: #005AAA;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

/* ==================================
   目次（TOC）
================================== */

#toc_container.no_bullets {
  background: #FFFFFF;
  border-radius: 15px;
  padding: 3.4722222222vw 4.1666666667vw;
  margin-bottom: 3.4722222222vw;

  box-shadow: 0 4px 20px rgba(0, 90, 170, 0.08);
}

/* TOCタイトル */

#toc_container .toc_title {
  margin-bottom: 1.3888888889vw;
  padding-bottom: 1.3888888889vw;

  border-bottom: 1px solid #B1CBF1;

  font-family: "DM Mono", monospace;
  font-size: clamp(18px, 1.3888888889vw, 9999px);
  font-weight: 700;
  line-height: 120%;
  letter-spacing: 0.02em;
  color: #094E92;
}

/* TOCリスト */

#toc_container .toc_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 第一階層 */

#toc_container .toc_list > li {
  margin-bottom: 0.7em;
}

#toc_container .toc_list > li > a {
  display: block;

  font-size: clamp(14px, 0.9722222222vw, 9999px);
  font-weight: 700;
  line-height: 180%;

  color: #2E3843;
  text-decoration: none;

  transition: color 0.3s ease;
}

#toc_container .toc_list > li > a:hover {
  color: #005AAA;
}

/* 第二階層 */

#toc_container .toc_list ul {
  list-style: none;

  margin-top: 0.6em;
  margin-left: 1.4vw;
  padding-left: 1.4vw;

  border-left: 2px solid #B1CBF1;
}

#toc_container .toc_list ul li {
  margin-bottom: 0.35em;
}

#toc_container .toc_list ul li a {
  display: block;

  font-size: clamp(13px, 0.9027777778vw, 9999px);
  font-weight: 600;
  line-height: 180%;

  color: #5A6573;
  text-decoration: none;

  word-break: break-word;
  overflow-wrap: break-word;
}

#toc_container .toc_list ul li a:hover {
  color: #005AAA;
}

/* ==================================
   SP
================================== */

@media screen and (max-width: 767px) {

  .column-detail__main h2,
  .column-detail__main h2 span {
    font-size: 4.1025641026vw;
    padding: 2.5641025641vw 7.1794871795vw;
  }

  .column-detail__main h3 {
    margin: 6vw 0 3vw;
    font-size: 4.1025641026vw;
  }

  .column-detail__main h3::before {
    width: 12px;
    height: 12px;
  }

  .column-detail__main h4 {
    font-size: 4.1vw;
  }

  .column-detail__main img {
    width: 100%;
    padding: 2vw;
    margin: 6vw auto;
  }

  #toc_container.no_bullets {
    padding: 10.2564102564vw 5.1282051282vw;
  }

  #toc_container .toc_title {
    padding-bottom: 3.5897435897vw;
    margin-bottom: 3.5897435897vw;
  }

  #toc_container .toc_list ul {
    margin-left: 4vw;
    padding-left: 4vw;
  }
}