.article-container {
  padding: 40px 40px;
  /* margin-top: 30px; */
  /* margin-right: 15px; */
  /* margin-left: 25px; */
  border-radius: 20px 20px 0 0;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #252525;
  background-color: white;
  /* border: solid 2px red; */
}

.article h1 {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.05rem;
  white-space: normal;
  /* border: solid 3px darkblue; */
}

.article h2 {
  margin: 32px 0;
  padding: 20px 0px 12px;
  font-size: 1.6rem;
  line-height: 1.5;
  /* border: solid 4px darkcyan; */
}

.article h3 {
  padding: 12px 0;
  margin: 24px 0;
  font-size: 1.3rem;
  /* border: 1px solid saddlebrown; */
}

.article p{
  margin: 10px 0;
  font-size: 1.1rem;
  line-height: 1.7;
  letter-spacing: 0.04rem;
}

.article ul, .article ol {
  margin: 20px;
  padding-left: 0px;
  list-style-position: outside;
  color: #000;
  /* border: solid 3px darkcyan; */
}

.article ul {
  list-style-type: disc;
}

.article ol {
  list-style-type: decimal;
}

.article li {
  margin: 7px 0;
  font-size: 1.1rem;
  list-style-type: disc;
  /* border: solid 3px dimgray; */
}

.article li a {
  white-space: normal;
  word-wrap: break-word;
}

.article a {
  color: #FF8C42;
  text-decoration: none;
  transition: color 0.3s ease;
}

.article a:hover {
  color: #FFB85C;
  text-decoration: underline;
}

/* =======================================
  パンくずリスト
======================================= */
.article__breadcrumb {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 1.5rem;
}

.article__breadcrumb a {
  color: #FF8C42;
  text-decoration: none;
  transition: color 0.3s ease;
}

.article__breadcrumb a:hover {
  color: #FFB85C;
  text-decoration: underline;
}

.article__breadcrumb span {
  color: #666;
}

/* =======================================
  ヘッダー部分
======================================= */

.article__header {
  margin-bottom: 30px;
  padding-bottom: 10px;
  /* border: solid 3px green; */
}

.artical__date-wrapper {
  display: flex;
  align-items: center;
  margin-top: 20px;
  color: #919191;
}

/* =======================================
  サムネイル
======================================= */
.article__thumbnail {
  margin-top: 20px;
  /* border: solid 3px peru; */
}

.article__thumbnail img {
  margin: 0 auto;
  /* border: solid 2px aqua; */
}



/* =======================================
   本文
======================================= */
.article__content {
  margin-bottom: 60px;
  /* background-color: burlywood; */
  /* border: solid 3px forestgreen; */
}

/* =======================================
   コードブロック
======================================= */
pre[class*=language-] {
  /* background-color: #EAF2F8;
  border: 1px solid #D6EAF8; */
  border-radius: 5px;
}
.code-block {
  margin: 25px 0;
}
/* =======================================
   デザイン
======================================= */

/* h2要素 オレンジ背景とオレンジの下線 */
.underline-with-background {
  position: relative;
  /* background-color: #F5F5F5; */
  border-radius: 4px;
}

.underline-with-background::after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, #FBAA31, transparent);
  background: linear-gradient(to right, #FBAA31, transparent);
  margin: 5px 0 0;
}

/* h3要素 文字がオレンジ色でオレンジの下線 */
.orange-circle {
  position: relative;
  padding-left: 1.8em;
}

.orange-circle::before {
  font-family: "Font Awesome 5 Free";
  content: "\f219";
  font-weight: 900;
  left: 0;
  top: -0.2em;
  color: #ffdfa1;
  margin-right: 0.5em;
}

/* =======================================
  タブレット対応
======================================= */
@media (max-width: 768px) {
  .article-container {
    padding: 20px;
  }

  .article h1 {
    font-size: 1.8rem;
  }

  .article h2 {
    font-size: 1.4rem;
  }

  .article h3 {
    font-size: 1.2rem;
  }

  .article p {
    font-size: 1rem;
  }

  .article ul, .article ol {
    margin: 10px;
    padding-left: 15px;
  }

  .article li {
    font-size: 1rem;
  }
}

/* =======================================
  スマートフォン対応
======================================= */
@media (max-width: 480px) {
  .article-container {
    padding: 12px 16px;
  }

  .article h1 {
    font-size: 1.6rem;
  }

  .article h2 {
    font-size: 1.2rem;
  }

  .article h3 {
    font-size: 1rem;
  }

  .article p {
    font-size: 0.95rem;
  }

  .article ul, .article ol {
    margin: 8px;
    padding-left: 10px;
  }

  .article li {
    font-size: 0.95rem;
  }

  pre[class*=language-] {
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 10px;
  }
}