@charset "UTF-8";
/*
コンテンツ
------------------------------ */
/* 2カラム部分のコンテナ（本文とサイドバー） */
.post-main-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 0 100px 0 ; 
  width: 100%;
  box-sizing: border-box;
}

.post-flex-layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  width: 100%;
  padding: 0 16px 0 16px;
}

.post-header-text {
  flex: 1;
  min-width: 0;
  height: auto !important;  
  display: block !important;
}

/* 本文エリア（左）の修正 */
.post-content-area {
  flex: 1;
  min-width: 0;
}

.category-cards-sidebar {
  margin-bottom: 24px;
}

.category-cards-sidebar a {
  margin-bottom: 4px;
}

/* --- サイドバーのデザイン --- */
.post-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 100px; 
  align-self: flex-start; 
}

/* --- 記事ヘッダー --- */
.post-header-flex { 
  display: flex; gap: 20px;
  margin-bottom: 30px; 
}
.post-category-icon { 
  width: 100px;
  flex-shrink: 0;
 }

.post-title-big { 
  font-size: 32px;
  font-weight: 600;
}

.post-meta {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  margin-top: 8px;
}

.post-date-wrapper,
.post-update-wrapper {
  display: flex !important;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.meta-icon {
  width: 16px;  /* アイコンのサイズ */
  height: 16px;
  object-fit: contain;
}

.post-meta div {
  margin: 0;
}

.tag-round {
  display: inline-block;
  padding: 4px 15px;
  border: 1px solid var(--gray);
  border-radius: 20px;
  font-size: 12px;
  background: var();
}

.meta-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

/* 1カラム部分（ヒーローエリア） */
.post-hero-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 16px 0;
}

.post-eyecatch-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--white);
  margin: 32px 0 32px 0 ;
}

/* --- 目次（青いボックス） --- */
.post-toc {
  background-color: var(--blue);
  color: var(--white);
  padding: 24px 32px;
  margin: 40px 0;
  border-radius: 4px;
}

/* 「目次」というタイトル */
.toc-title {
  font-weight: bold;
  margin-bottom: 16px;
  display: block;
  font-size: 18px;
}

.post-title-big {
  font-size: 32px;            /* PCサイズ */
  line-height: 1.4;
  margin-bottom: 12px;
  height: auto !important;     /* 高さを自動に */
  display: block !important;   /* 行数制限を解除 */
  -webkit-line-clamp: none !important; /* 省略三点リーダーを解除 */
  overflow: visible !important;
}

/* リスト全体のスタイル */
.toc-list, .toc-list ul {
  list-style: none;
  padding: 0;
}

.toc-list li {
  margin-bottom: 8px;
}

/* リンク自体のデザイン */
.toc-list a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  display: inline-block;
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

.toc-list a:hover {
  opacity: 0.7;
}

/* 子要素（h3相当）の字下げ */
.toc-list ul {
  margin-top: 16px;
  margin-left: 16px;
}

.toc-list ul li {
  margin-bottom: 8px;
}

/* タグ全体の並びを整える */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;     /* タグ同士の横の間隔 */
  margin-top: 8px;
}

/* 記事内の個別のタグ(リンク)のデザイン */
.tag-list a {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background-color: var(--white);
  color: var(--dark-blue);
  border: 1px solid var(--gray);
  border-radius: 24px;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 「#」を自動で頭に付ける */
.tag-list a::before {
  content: "# ";
  opacity: 0.7;
  margin-right: 4px;
}

/* ホバー時の色変更 */
.tag-list a:hover {
  opacity: 0.7;
}



/*
目次
------------------------------ */
.post-body h2,
.post-body h3,
.post-body h4 {
  scroll-margin-top: 120px !important; /* 確実に効かせるために !important を追加 */
}

/* Table of Contents Plus のデザインをサビビ流に上書き */
#toc_container {
  background-color: var(--blue) !important;
  padding: 24px 32px !important;
  margin: 40px 0 !important;
  border-radius: 4px !important;
  
  /* ここがポイント：幅を100%に指定し、displayをblockにする */
  width: 100% !important; 
  display: block !important;
  box-sizing: border-box !important; /* パディングを含めた幅計算にする */
}

/* 目次タイトル */
#toc_container .toc_title {
  color: var(--white) !important;
  font-weight: bold !important;
  font-size: 18px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

/* リスト部分 */
#toc_container .toc_list {
  list-style: none !important;
  padding: 0 !important;
}

/* リンク自体のデザイン */
#toc_container .toc_list a {
  color: var(--white) !important;
  text-decoration: none !important;
  border-bottom: none;
  display: inline-block;
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

#toc_container .toc_list a:hover {
  opacity: 0.7 !important;
}

/* 子要素（H3相当）の字下げ */
#toc_container .toc_list ul {
  margin: 8px 0 0 16px !important;
}

#toc_container .toc_list > li {
  padding: 16px 0  0 0!important;
}

#toc_container .toc_list > li ul li a {
  font-size: 14px;
  font-weight: 400;
}


.post-body h2,
.post-body h3,
.post-body h4 {
  /* ヘッダーの高さ（約80-100px）に合わせて調整してください */
  scroll-margin-top: 100px;
}






/*
サイドバー
------------------------------ */
.sidebar-wrapper {
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('../images/bg/gray-bg.webp');
  padding: 24px;
  border-radius: 4px;
}
.cat-card-s {
  display: flex;
  justify-content: space-between;
  background: var(--white);
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--gray);
  border-radius: 4px;
  font-size: 14px;
}
.cat-card-s::after { content: ">"; color: var(--gray); }




/*
SNSシェアボタン
------------------------------ */
.article-footer-utility {
    margin: 40px 0;
    padding: 30px 16px;
    text-align: center;
    border-top: 1px solid #eee;
    display: block !important;
}

.utility-flex {
    display: flex !important;
    justify-content: center;
    gap: 12px;
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.utility-title {
  font-weight: bold;
  padding-bottom: 16px;
}

.u-item a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--white) !important;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    min-width: 100px;
}

.u-item-x a {background-color: #000000;}
.u-item-l a {background-color: #00a716;}

/* コピーボタンを目立たせる */
.u-item.copy-trigger a {
    background: #204CB3;
    color: #fff !important;
}





/*
次へ 前へ 記事を表示
------------------------------ */
/* --- 前後の記事ナビゲーション --- */
.post-navigation {
  margin: 64px 0;
  padding-top: 40px;
  border-top: 1px dotted var(--gray);
}

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.nav-links a {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all 0.3s ease;
  max-width: 50%; /* 左右半分ずつ */
  transition: all 0.3s ease;
}

.nav-previous {
  text-align: left;
}

.nav-next {
  text-align: right;
}

/* 「前の記事」「次の記事」という小さなラベル */
.nav-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}

/* 記事タイトル部分 */
.nav-title {
  font-size: 14px;
  color: var(--dark-blue);
  font-weight: 600;
  /* タイトルが長すぎる場合に3点リーダーにする設定 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 矢印の演出 */
.nav-previous .nav-label::before { content: "<< "; }
.nav-next .nav-label::after { content: " >>"; }

/* ホバー演出 */
.nav-links a:hover,
.nav-links a:hover .nav-title {
  opacity: 0.7;
}



/*
関連記事
------------------------------ */
/* --- 関連記事セクション（詳細ページ下部） --- */
.related-posts-section {
    padding: 80px 0;
    background-color: var(--white); /* 背景色はサイト全体に合わせる */
    border-top: 1px solid var(--gray);
}


/*
吹き出し
------------------------------ */
.sabibi-balloon {
  display: flex;
  align-items: flex-start;
  margin: 2em 0;
  width: 100%;
}

.sabibi-icon {
  width: 70px;
  text-align: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.sabibi-icon img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--white);
  object-fit: cover;
  display: block;
  border: 1px solid var(--gold);
}

.sabibi-name {
  font-size: 12px;
  color: var(--gray);
  margin-top: 4px;
  font-weight: 600;
}

.sabibi-content {
  position: relative;
  padding: 1.2em;
  background: var(--white);
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.7;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.sabibi-content::before {
  content: "";
  position: absolute;
  top: 25px;
  left: -10px;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
}












/* 4枚並びを維持するための微調整（もしmain.cssのpost-gridが3列なら上書き） */
@media screen and (min-width: 1025px) {
    .related-posts-section .post-grid {
        grid-template-columns: repeat(4, 1fr); 
    }
}




/* --- iPad対応 --- */
@media screen and (max-width: 1024px) {
  .post-sidebar {
    display: none;
  }

  .related-posts-section .post-grid {
        grid-template-columns: repeat(2, 2fr); /* iPadなどは2列 */
  }


}



/* --- スマホ対応 --- */
@media screen and (max-width: 767px) {
  
  /* 1. 消えていたアイコンを表示させる */
  .post-category-icon {
    display: block; /* none から block に戻す */
    width: 50px;    /* スマホ用のサイズ */
    flex-shrink: 0; /* 潰れないように固定 */
  }

  /* 2. 不要な「サギ固定アイコン」の設定を削除する */
  .post-header-text::before {
    display: none; /* 以前の設定を無効化 */
  }

  /* 3. アイコンとタイトルを横並びにする */
  .post-header-flex {
    display: flex;
    align-items: flex-start; /* アイコンをタイトルの1行目に合わせる */
    gap: 12px;
  }

  .post-title-big {
    font-size: 20px; /* スマホ用に少し小さく */
    margin-bottom: 8px;
    height: auto !important;
  }

  /* その他、既存の調整 */
  .post-main-container {
    padding: 20px 15px;
  }
  .post-flex-layout {
    display: block;
    width: 100%;
    padding: 0;
  }
  .post-content-area {
    width: 100%;
    margin-bottom: 40px;
  }
  .post-eyecatch-full {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
    aspect-ratio: 16 / 9;
  }
  .post-meta {
    display: flex !important; 
    gap: 12px;
    font-size: 12px;
  }

  /*
  SNS　シェアボタン
  ------------------------------ */
  .meta-icon {
    width: 14px;
    height: 14px;
  }

  .utility-flex {
        flex-wrap: wrap;
    }
    .u-item {
        flex: 1 1 45%;
    }

  /*
  次へ 前へ 記事を表示
  ------------------------------ */
  .nav-links {
  gap: 16px;
  }
  .nav-links a {
    max-width: 100%;
    text-align: left; /* スマホでは両方左寄せ */
  }
  .post-navigation {
    margin: 16px 0;
    padding-top: 16px;
  }
  .nav-links .nav-next {
    text-align: right;
  }


  /*
  吹き出し
  ------------------------------ */
  .sabibi-icon {
    width: 55px;
    margin-right: 16px;
  }
  .sabibi-icon img {
    width: 55px;
    height: 55px;
  }
  .sabibi-content {
    font-size: 14px;
  }

}