@charset "utf-8";
/* CSS Document */

/*----------------------------------------
共通
----------------------------------------*/
/* 記事全体の下余白 */
.c-article {
  margin-bottom: 48px;
}

/* パンくず（Figma完全一致） */
.c-article-topnav {
  width: 1200px;
  margin: 48px 0 24px 24px; /* 上48px / 右0 / 下24px / 左24px */
  display: flex;
  justify-content: flex-start;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: #666;
}

/* リスト横並び */
.c-article-topnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

/* 各項目 */
.c-article-topnav li {
  list-style: none;
}

/* リンクの見た目（Figma準拠） */
.c-article-topnav a {
  color: #666;
  text-decoration: underline;
}

/* パンくずの区切りを画像に変更 */
.c-article-topnav li::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("img/column/angle_usui.png") center/contain no-repeat;
  margin: 0 4px;
}

/* 最後の項目は矢印なし */
.c-article-topnav li:last-child::after {
  content: none;
}

/* PC時の左右24pxガイドライン */
@media (min-width: 768px) {
  .l-main {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 記事タイトル・日付・サブタイトルなどを収める箱 */
.c-article__header {
  width: 805px;
  margin: 0 auto 32px;
}

/* タグ全体のコンテナ */
.c-article__tags {
  display: flex;
  padding-top: 32px;
  flex-wrap: wrap;
  gap: 8px;
}

/* タグ1つ1つのデザイン */
.c-article__tags li {
  display: inline-flex;
  padding: 6px 16px;
  border: 1px solid #D1D5DB;
  background: #F3F4F6;


  color: #666;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.c-article__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 24px;
  margin-bottom: 0px;
}

.c-article__subtitle {
  font-size: 36px;
  color: #333;
  margin-bottom: 20px;
}

/* SHARE と日付を横並び */
.c-article__share-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 800px;
  margin: 40px auto 40px;
}

/* SHARE: の文字 */
.c-article__share-label {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* SHARE アイコン全体（横並び） */
.c-article__share {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 外側の正方形（32×32） */
.c-article__share-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 32px;
  height: 32px;
  border: 1px solid #D1D5DB;
  padding: 0;
  background: #fff;
  cursor: pointer;

  /* 文字用の古いスタイルを完全リセット */
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* 中のアイコン（19×19） */
.c-article__share-btn img {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  display: block;
}

.c-article__date {
  color: #333;
  text-align: right;

  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.c-article__eyecatch img {
  width: 806px;
  height: 453px;
  flex-shrink: 0;
  aspect-ratio: 137 / 77;
  object-fit: cover; /* ← Figma と同じ見え方にするため必須 */
  display: block;
  margin: 0 auto; /* 中央寄せ（必要なら） */
}

.c-article__body {
  width: 805px;
  margin: 0 auto;
}

/* 目次 */
/* ▼ TOC+ の外枠を消す（あなたの枠を使うため） */
#toc_container {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important; /* 本文側は JS で移動済み */
}

/* ▼ TOC+ のタイトル（Contents）を非表示 */
#toc_container .toc_title {
  display: none !important;
}

/* ▼ TOC+ のリストをあなたのデザインに合わせる */
#toc_container .toc_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* これは残さないと色が変わらない */
.c-article__toc .c-article__toc-body a {
  color: #333 !important;
  text-decoration: none !important;
}

/* ▼ h2（レベル1） */
.c-article__toc-body .toc_level_1 a {
  color: #333 !important;
  text-decoration: none;
}

/* ▼ h3（レベル2 or レベル3） */
.c-article__toc-body .toc_level_2 a,
.c-article__toc-body .toc_level_3 a {
  color: #666 !important;
  text-decoration: none;
  padding-left: 1.2em;
  position: relative;
}

/* ▼ h3 の ● */
.c-article__toc-body .toc_level_2 a::before,
.c-article__toc-body .toc_level_3 a::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.7em;
  color: #666;
}


/* ▼ hover の時だけ下線 */
.c-article__toc-body a:hover {
  text-decoration: underline !important;
}

/* ▼ 常時は下線なし */
.c-article__toc-body a {
  text-decoration: none;
}

.c-article__toc {
  display: flex;
  width: 805.33px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid #D1D5DB;
  background: #F3F4F6;
  margin: 40px auto; /* 中央寄せ（必要なら） */
}

.c-article__toc-header {
  display: flex;
  width: 755px;
  padding-bottom: 8px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #D1D5DB;
  justify-content: space-between; /* 左と右を離す */
}

.c-article__toc-left {
  display: flex;
  width: 657px;
  height: 24px;
  flex-direction: row; /* ← column だと縦並びになるので row に修正 */
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 目次のアイコン */
.c-article__list-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.c-article__toc-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 開いている時（デフォルト） */
.c-article__toc-toggle-icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

/* 閉じた時（180°） */
.c-article__toc-toggle.is-closed .c-article__toc-toggle-icon {
  transform: rotate(270deg);
}

.c-article__toc-body.is-closed {
  display: none;
}

.c-share-box {
  width: 805px;
  margin: 60px auto;
}

.c-share-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #333;
}

.c-share-buttons {
  display: flex;
  gap: 12px;
}

.c-share-btn {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  background: #fff;

  font-size: 14px;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.c-share-btn img {
  width: 20px;
  height: 20px;
  display: block;
}

.c-share-btn:hover {
  background: #f5f5f5;
}

/* 全体の枠 */
.c-article__share-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  width: 805px;
  margin: 60px auto;

  border-top: 1px solid #D1D5DB;
  border-bottom: 1px solid #D1D5DB;
}

/* タイトル */
.c-article__share-bottom-label {
  color: #333;
  text-align: center;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 24px;
}

/* ボタン全体（横並び） */
.c-article__share-bottom-buttons {
  display: flex;
  gap: 12px;
}

/* 各ボタン */
.c-article__share-bottom-btn {
  display: flex;
  padding: 12px 24px;
  align-items: center;
  gap: 12px;

  border: 1px solid #D1D5DB;
  border-radius: 4px;
  background: #fff;

  color: #333;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.c-article__share-bottom-btn img {
  width: 19px;
  height: 19px;
  aspect-ratio: 1 / 1;
  display: block;
}

/* ホバー */
.c-article__share-bottom-btn:hover {
  background: #F5F5F5;
}

/* 枠 */
.c-supervisor {
  display: flex;
  padding: 56px 32px 24px 32px;
  align-items: flex-start;
  gap: 32px;
  width: 805px;
  margin: 60px auto;
  border: 1px solid #F5F4FF;
  background: #F5F4FF;
}

/* 写真 */
.c-supervisor__photo img {
  width: 160.17px;
  height: 160.17px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

/* 名前 */
.c-supervisor__name {
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  margin-bottom: 8px;
}

/* 肩書き */
.c-supervisor__position {
  color: #666;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 0.7px;
  margin-bottom: 16px;
}

/* 説明 */
.c-supervisor__profile {
  color: #666;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  margin-bottom: 24px;
}

/* ボタンの枠 */
.c-supervisor__btn {
  display: inline-flex;
  padding: 12px 24px;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #D1D5DB;
  background: #FFF;
  text-decoration: none;
  gap: 8px;
}

/* ボタンの文字 */
.c-supervisor__btn-text {
  display: flex;
  height: 20px;
  flex-direction: column;
  justify-content: center;
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.c-supervisor__btn-icon {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}

/* 前と次の記事ボタン */
/* 外枠（グレー背景＋1px境界） */
.c-navwrap {
  display: flex;
  padding-top: 8px;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  align-self: stretch;
  border: 1px solid #D1D5DB;
  background: #D1D5DB;
  width: 805px;
  margin: 60px auto;
}

/* 共通：前後の記事の白い箱 */
.c-navitem {
  display: flex;
  width: 401.16px;
  padding: 24px;
  align-items: flex-start;
  gap: 16px;
  background: #FFF;
  text-decoration: none;
  color: #333;
}

.c-navwrap {
  align-items: stretch;
}

/* 中の縦並び */
.c-navitem__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-navitem__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 4px; /* Figma の縦位置に合わせるなら調整 */
}

/* 前の記事だけ 180° 回転 */
.c-navitem__icon--prev {
  transform: rotate(180deg);
}

/* ラベル（前の記事） */
.c-navitem__label {
  color: #666;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* タイトル */
.c-navitem__title {
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 19.25px;
}

/* サブタイトル */
.c-navitem__subtitle {
  margin-top: -4px; /* タイトルとの隙間を詰める */
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 19.25px;
}

/* ▼ 次の記事の白い箱を右側に寄せる */
.c-navitem--next {
  justify-content: flex-end;
}

/* ▼ 次の記事のラベル */
.c-navitem--next .c-navitem__label {
  display: flex;
  width: 84.38px;
  height: 15px;
  flex-direction: column;
  justify-content: center;

  color: #666;
  text-align: right;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ▼ 次の記事のタイトル */
.c-navitem--next .c-navitem__title {
  color: #333;
  text-align: right;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 19.25px;
}

/* ▼ 次の記事のサブタイトル */
.c-navitem--next .c-navitem__subtitle {
  color: #333;
  text-align: right;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 19.25px;
}

/* ▼ 次の記事のテキストコンテナを右端に寄せる */
.c-navitem--next .c-navitem__inner {
  margin-left: auto;      /* これで右端に寄る */
  align-items: flex-end;  /* flex 子要素も右寄せ */
  text-align: right;      /* 念のためテキストも右寄せ */
}

/* 空枠（リンクなし） */
.c-navitem--empty {
  background: #FFF;
  pointer-events: none; /* クリック不可 */
}


/* ▼ 枠（関連記事・シリーズ全体） */
.c-related {
  display: flex;
  padding-bottom: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  width: 805px; /* 記事幅に合わせる */
  margin: 60px auto 0;
}

/* ▼ タイトル行（アイコン＋文字） */
.c-related__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ▼ アイコン */
.c-related__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ▼ タイトル文字 */
.c-related__title {
  display: flex;
  width: 200.11px;
  height: 28px;
  flex-direction: column;
  justify-content: center;

  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

/* ▼ カード一覧（横並び） */
.c-related__list {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* ▼ カード */
.c-related__card {
  width: calc(33.333% - 14px);
  text-decoration: none;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ▼ サムネイル */
.c-related__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* ▼ タイトル */
.c-related__title-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  margin: 0;
}

/* ▼ サブタイトル */
.c-related__subtitle {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  margin: 0;
}

/* ▼ ボタン全体（右寄せ） */
.c-related__more {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* ▼ ボタンリンク */
.c-related__more-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* ▼ テキスト */
.c-related__more-text {
  color: #333;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
}

/* ▼ アイコン */
.c-related__more-icon {
  width: 19px;
  height: 19px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ▼ 左右2カラムの大枠 */
.l-article-layout {
  display: flex;
  width: 1392px;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  margin: 0 auto;
}

/* ▼ 左側（記事） */
.c-article {
  width: calc(1392px - 379px - 48px); /* 右側を引いた残り */
  flex-shrink: 0;
}

/* ▼ 右側（サイドバー） */
.c-article-sidebar {
  display: flex;
  width: 379px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
}

.c-sidebar-section {
  display: flex;
  padding: 24px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid #D1D5DB;
  background: #F3F4F6;
}

/* ▼ おすすめのコラム（1つ目のセクション）の枠 */
.c-sidebar-section:first-of-type {
  width: 377px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  padding: 24px 0;
  gap: 16px;
  align-self: stretch;

  border-radius: 4px;
  border: 1px solid #D1D5DB;
  background: #F3F4F6;
}

/* ▼ おすすめのコラムのタイトル */
.c-sidebar-section:first-of-type .c-sidebar-title {
  width: 329px;
  height: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* ← 左寄せ */

  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;

  margin: 0;
}

.c-sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 6px;

  width: 330px;   /* ← Figma 実寸 */
  height: 100px;   /* ← Figma 実寸 */
  padding: 6px;   /* ← あなたの指定 */

  background: #FFF;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 4px 0 rgba(51, 51, 51, 0.25);
}

.c-sidebar-card-labels {
  display: flex;
  flex-direction: row;
  gap: 0;
}

.c-sidebar-card-brand {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px solid #E2E8F0;
  background: #FFF;

  font-size: 9px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.5px;
  text-transform: capitalize;

  margin: 0;
}

.c-sidebar-card-category {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px solid #E2E8F0;
  background: #E2E8F0;

  font-size: 9px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.5px;
  text-transform: capitalize;

  margin: 0;
}

.c-sidebar-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.c-sidebar-thumb-frame {
  width: 99px;
  height: 69px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-sidebar-thumb {
  width: 100%;
  height: 55.688px;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

.c-sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

.c-sidebar-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.c-sidebar-card-texts {
  display: flex;
  width: 215px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 2px;
}

.c-sidebar-card-title {
  align-self: stretch;
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 10px;
  font-weight: 600;
  line-height: 14.3px; /* 143% */
  margin: 0;
}

.c-sidebar-card-subtitle {
  align-self: stretch;
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 12px;
  font-weight: 600;
  line-height: 14.3px; /* 119.167% */
  margin: 0;
}

.c-sidebar-category {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border: 1px solid #D1D5DB;
  background: #FFF;
}

.c-sidebar-category-title {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.c-category__icon {
  width: 22px;
  height: 22px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
}

.c-sidebar-category-title-text {
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.c-sidebar-category-list {
  display: flex;
  flex-wrap: wrap;   /* ← 横に並ぶ。文字数に合わせて pill が伸びる */
  gap: 12px;
  padding: 0;
  margin: 0;
}

.c-sidebar-category-item {
  display: inline-flex;
  padding: 5.5px 16px 6.5px 16px;
  height: 34px;
  align-items: center;
  flex-shrink: 0;

  border-radius: 9999px;
  border: 1px solid #D1D5DB;
  background: #FFF;

  color: #666;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  text-decoration: none;

  white-space: nowrap;  /* ← pill が割れない */
}

.c-sidebar-tagsearch-item::before {
  content: "#";
  margin-right: 0;   /* ★ 隙間ゼロ */
  color: #666;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.c-sidebar-tagsearch {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border: 1px solid #D1D5DB;
  background: #FFF;
}

.c-sidebar-tagsearch-title {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.c-tagsearch__icon {
  width: 22px;
  height: 22px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
}

.c-sidebar-tagsearch-title-text {
  display: flex;
  width: 74.48px;
  height: 20px;
  flex-direction: column;
  justify-content: center;

  color: #333;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.c-sidebar-tagsearch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-sidebar-tagsearch-item {
  display: inline-flex;
  height: 30px;
  padding: 6px 12px;
  flex-direction: row;
  align-items: center;
  border: 1px solid #D1D5DB;
  background: #FFF;
  color: #666;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
}

.c-sidebar-tagsearch-item::before {
  content: "#";
  margin-right: 0;
}