/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* テキストカラー  規定のオレンジ*/
.text_color{
    color: #F93800;
}


/* ブログの下線 マーカーのような*/
.under1 {
  background: linear-gradient(transparent  70%, #ffc037  70%);
  font-size: 22px;
}
@media screen and (min-width: 769px) {
	.under1 {
		font-size: 28px;
	}

/* ブログの下線 マーカーのような 青緑*/
.under1_blue {
  background: linear-gradient(transparent  70%, #91CDC6  70%);
}


.under2 {
  background: linear-gradient(transparent  50%, #ffc037  50%);
}
  
 /*　区切り線のような下線　*/
.under_line{
   position: relative;
   padding-bottom: 0.5em;
   border-bottom: 4px solid #DDD;
  }
.under_line::after {
   position: absolute;
   content: " ";
   border-bottom: solid 4px #808080;
   bottom: -4px;
   width: 8%;
   display: block;
  }

 /*　区切り線のような下線　青緑　*/
.under_line_blue{
   position: relative;
   padding-bottom: 0.3em;
   border-bottom: 4px solid #91CDC6;
  }
.under_line_blue::after {
   position: absolute;
   content: " ";
   border-bottom: solid 4px #008B7A;
   bottom: -4px;
   width: 8%;
   display: block;
  }



 /*　背景職あり見出し　*/
.backcolor_line{
  padding: 0.3em;
  color: #333;
  background: #dae5f3;
  border-bottom: solid 3px #455586;
}

/* 2025/4/4 ブログ投稿ページの他記事表示　サムネ表示用のcss */
.blog-right-box {
  display: flex;
  align-items: center;
  margin-bottom: 15px; /* 余白を少し大きく */
}

.post-thumbnail img.recent-post-thumbnail {
  width: 120px;  /* 横幅120pxに拡大 */
  height: 80px;  /* 高さ80pxに設定 */
  object-fit: cover; /* 画像が収まるようにトリミング */
  margin-right: 15px;  /* サムネイルとタイトルの間のスペース */
  border-radius: 5px;
}

.post-title {
  font-size: 14px;
  line-height: 1.4;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .blog-right-topic {
    display: grid; /* グリッド表示 */
    grid-template-columns: repeat(2,minmax(0, 1fr)); /* 2列に配置 */
    gap: 15px;/* 各記事間の隙間 */
    margin: 0;/*左右の余白のリセット*/
    padding: 0;/*内側の余白のリセット*/
    box-sizing: border-box;
  }

  .blog-right-box {
    display: block; /* 各記事はブロック要素として表示 */
  }

  .post-thumbnail img.recent-post-thumbnail {
    width: 100%;  /* サムネイルの横幅を100%に設定 */
    height: 80px;  /* 長方形のサムネイルに調整 */
    object-fit: cover; /* 画像が収まるようにトリミング */
    margin-right: 0;
    margin-bottom: 10px;
    border-radius: 5px;  /* 角を丸くする */
  }

  .post-title {
    font-size: 16px; /* スマホでは少し大きめ */
    font-weight: bold;
    line-height: 1.4; /* 行間を少し広め */
  }

  /* 最後の記事が1つだけの場合、右側にスペースができないように調整 */
  .blog-right-topic > .blog-right-box {
    margin-right: 0; /* 最後の記事の右側の余白を取り除く */
    margin-left: 0;
  }
}

/*カーニング設定*/
.blog-post__body p {
  letter-spacing: 0.05em;
}
  

/*目次*/
.toc-001 {
    margin-bottom: 30px;
    padding: 1em 1em 1em 2em;
    border: 1px solid #999;
    background-color: #f7f7f7;
    color: #333333;
}

.toc-001 div {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}

.toc-001 div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23333'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}

.toc-001 ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0 1.2em;
    overflow: hidden;
}

.toc-001 ol ol {
    margin-top: 5px;
}

.toc-001 li {
    padding: 5px 0;
}

.toc-001 a {
    color: #166c9d;
}

h2 {
  scroll-margin-top: 100px;
}