/*
 * セーフくん コラム 内部対策 Phase3（T11〜T15）
 * 設置場所: wp-content/themes/cocoon-child-master/css/phase3.css
 * inc/phase3-config.php が許可された記事プレビューでのみ読み込む（初期設定）。
 * 色はサイトに合わせる: 見出しの青 #0e80e3、ブランドの緑 #93cd1c、CTA のオレンジ #ff8000
 */

/* ---------------------------------------------------------------------
 * 共通
 * ------------------------------------------------------------------ */
.sk-overview p,
.sk-related p,
.sk-side-cta p,
.sk-ed-card p,
.sk-foot p,
.sk-reviewer p {
  margin: 0;
  padding: 0;
}

.sk-overview ul,
.sk-related ul,
.sk-topic ul,
.sk-popular,
.sk-foot ul,
.sk-cluster-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------
 * T11 サイドバー: 資料ダウンロード CTA
 * ------------------------------------------------------------------ */
.sk-side-cta {
  padding: 20px 18px 18px;
  border: 2px solid #93cd1c;
  border-radius: 10px;
  background: #f7fbef;
  text-align: center;
  line-height: 1.7;
}

.sk-side-cta__label {
  display: inline-block;
  margin-bottom: 8px !important;
  padding: 2px 10px !important;
  border-radius: 999px;
  background: #93cd1c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.sk-side-cta__title {
  color: #333;
  font-size: 17px;
  font-weight: 700;
}

.sk-side-cta__text {
  margin: 8px 0 14px !important;
  color: #555;
  font-size: 13px;
  text-align: left;
}

.sk-side-cta__button {
  display: block;
  padding: 12px 8px;
  border-radius: 999px;
  background: #ff8000;
  box-shadow: 0 3px 0 #d96c00;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
}

.sk-side-cta__button:hover {
  opacity: .9;
}

.sk-side-cta__sub {
  display: inline-block;
  margin-top: 12px;
  color: #0e80e3 !important;
  font-size: 13px;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * T11 テーマから探す（サイドバー、関連記事3段の3段目）
 * ------------------------------------------------------------------ */
.sk-topic__item + .sk-topic__item {
  border-top: 1px solid #e3e9f0;
}

.sk-topic__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  padding: 10px 4px;
  color: #333 !important;
  text-decoration: none !important;
  line-height: 1.5;
}

.sk-topic__link:hover .sk-topic__name,
.sk-topic__link[aria-current="page"] .sk-topic__name {
  color: #0e80e3;
}

.sk-topic__name {
  font-size: 15px;
  font-weight: 700;
}

.sk-topic__lead {
  grid-column: 1;
  color: #6b7280;
  font-size: 12px;
}

.sk-topic__count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #6b7280;
  font-size: 12px;
}

.sk-topic__all {
  display: block;
  margin-top: 8px;
  color: #0e80e3 !important;
  font-size: 13px;
  text-align: right;
}

/* 関連記事3段の中では横並びのボタンにする */
.sk-related .sk-topic__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sk-related .sk-topic__item {
  border: 0 !important;
}

.sk-related .sk-topic__link {
  display: block;
  padding: 8px 14px;
  border: 1px solid #c6ddf6;
  border-radius: 999px;
  background: #fff;
}

.sk-related .sk-topic__name {
  font-size: 14px;
}

.sk-related .sk-topic__lead,
.sk-related .sk-topic__count {
  display: none;
}

.sk-related .sk-topic__all {
  text-align: left;
}

/* ---------------------------------------------------------------------
 * T11 よく読まれている記事、記事の小さなカード
 * ------------------------------------------------------------------ */
.sk-popular {
  counter-reset: sk-rank;
}

.sk-popular__item {
  position: relative;
  counter-increment: sk-rank;
}

.sk-popular__item + .sk-popular__item {
  margin-top: 12px;
}

.sk-popular__item::before {
  content: counter(sk-rank);
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0e80e3;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.sk-mini {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  color: #333 !important;
  text-decoration: none !important;
}

.sk-mini__thumb {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  background: #eef2f6;
}

.sk-mini__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-mini__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.sk-mini:hover .sk-mini__title {
  color: #0e80e3;
}

/* ---------------------------------------------------------------------
 * T11 編集部の紹介（サイドバー）
 * ------------------------------------------------------------------ */
.sk-ed-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  padding: 16px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #f6f9fc;
  line-height: 1.6;
}

.sk-ed-card__logo {
  grid-row: 1 / span 2;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 6px;
  border: 1px solid #dbe3ec;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.sk-ed-card__name {
  color: #333;
  font-size: 15px;
  font-weight: 700;
}

.sk-ed-card__name span {
  display: block;
  color: #6b7280;
  font-size: 12px;
  font-weight: 400;
}

.sk-ed-card__text {
  grid-column: 1 / -1;
  color: #555;
  font-size: 13px;
}

.sk-ed-card__link {
  grid-column: 1 / -1;
  color: #0e80e3 !important;
  font-size: 13px;
}

/* ---------------------------------------------------------------------
 * T11 フッター
 * ------------------------------------------------------------------ */
.sk-foot__title {
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 700;
}

.sk-foot__list li + li {
  margin-top: 6px;
}

.sk-foot__list a {
  color: inherit !important;
  font-size: 14px;
  text-decoration: none;
}

.sk-foot__list a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * T12 位置づけボックス（目次の上）
 * ------------------------------------------------------------------ */
.entry-content .sk-overview {
  margin: 24px 0 28px;
  padding: 18px 20px;
  border: 1px solid #c6ddf6;
  border-left: 5px solid #0e80e3;
  border-radius: 6px;
  background: #f3f8fe;
  line-height: 1.75;
}

.sk-overview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 10px !important;
}

.sk-overview__label {
  color: #0e80e3;
  font-size: 16px;
  font-weight: 700;
}

.sk-overview__cat {
  padding: 1px 10px;
  border-radius: 999px;
  background: #0e80e3;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}

.sk-overview__row + .sk-overview__row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #c6ddf6;
}

.sk-overview__sub {
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.sk-overview__points li,
.sk-overview__links li {
  position: relative;
  margin-top: 4px;
  padding-left: 18px;
  font-size: 14px;
}

.sk-overview__points li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #93cd1c;
}

.sk-overview__links li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #0e80e3;
  border-right: 2px solid #0e80e3;
  transform: rotate(45deg);
}

.sk-overview__more summary {
  cursor: pointer;
}

.sk-overview__more[open] summary {
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
 * T12 執筆者行（公開日、更新日の下）
 * ------------------------------------------------------------------ */
.sk-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 0;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
}

.sk-byline__key {
  margin-right: 6px;
  padding: 0 6px;
  border: 1px solid #c9d3de;
  border-radius: 3px;
  color: #6b7280;
  font-size: 11px;
}

.sk-byline__org {
  color: #6b7280;
}

/* ---------------------------------------------------------------------
 * T12 関連記事3段（本文末）
 * ------------------------------------------------------------------ */
.entry-content .sk-related {
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 3px solid #0e80e3;
}

.sk-related__heading {
  margin-bottom: 16px !important;
  color: #333;
  font-size: 20px;
  font-weight: 700;
}

.sk-related__block + .sk-related__block {
  margin-top: 24px;
}

.sk-related__sub {
  margin-bottom: 10px !important;
  padding-left: 10px !important;
  border-left: 4px solid #93cd1c;
  color: #333;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.sk-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sk-card {
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #fff;
  color: #333 !important;
  text-decoration: none !important;
  transition: box-shadow .2s;
}

.sk-card:hover {
  box-shadow: 0 4px 14px rgba(15, 50, 90, .12);
}

.sk-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef2f6;
}

.sk-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-card__body {
  display: block;
  padding: 10px 12px 12px;
}

.sk-card__cat {
  display: inline-block;
  margin-bottom: 4px;
  color: #0e80e3;
  font-size: 11px;
  font-weight: 700;
}

.sk-card__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.sk-card--wide {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
}

.sk-card--wide .sk-card__body {
  padding: 14px 18px;
}

.sk-card--wide .sk-card__title {
  font-size: 16px;
}

/* ---------------------------------------------------------------------
 * T12 監修者ボックス（T09 後に有効化）
 * ------------------------------------------------------------------ */
.entry-content .sk-reviewer {
  margin: 20px 0 0;
  padding: 18px 20px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  line-height: 1.7;
}

.sk-reviewer__label {
  color: #0e80e3;
  font-size: 12px;
  font-weight: 700;
}

.sk-reviewer__name {
  font-size: 17px;
  font-weight: 700;
}

.sk-reviewer__note {
  color: #555;
  font-size: 14px;
}

/* ---------------------------------------------------------------------
 * T15 ピラー記事の本文に貼る配下記事の一覧 [safekun_cluster_list]
 * ------------------------------------------------------------------ */
.entry-content .sk-cluster-list {
  margin: 16px 0 24px;
  padding: 14px 18px;
  border: 1px solid #e3e9f0;
  border-radius: 6px;
  background: #fafcfe;
}

.entry-content .sk-cluster-list li {
  margin: 4px 0;
  list-style: none;
}

/* ---------------------------------------------------------------------
 * T12 表示中は Cocoon 標準の関連記事と、本文下の「新着記事」ウィジェットを隠す
 * ------------------------------------------------------------------ */
/* Only the confirmed existing news widget is replaced. Other bottom widgets,
   including CTA widgets, remain visible. No widget settings or content change. */
body.sk-p3 #related-entries,
body.sk-p3 #custom_html-3.widget-single-content-bottom {
  display: none !important;
}

/* The existing footer author label is replaced only when the new header byline
   is actually present. The T08 .sk-editorial box is deliberately not targeted. */
body.sk-p3 .article:has(> .article-header > .sk-byline) > .article-footer .footer-meta > .author-info {
  display: none !important;
}

/* The child style.css sets date-tags=1 and title=2 in a flex header. Give the
   preview byline an explicit position instead of its default order=0. */
body.sk-p3 .article-header.entry-header > .entry-title { order: 1; }
body.sk-p3 .article-header.entry-header > .date-tags { order: 2; }
body.sk-p3 .article-header.entry-header > .sk-byline { order: 3; margin-bottom: 16px; }
body.sk-p3 .article-header.entry-header > .eye-catch-wrap { order: 4; }
body.sk-p3 .article-header.entry-header > .sns-share { order: 5; }

/* Allow long Japanese titles and card labels to shrink within SP grids. */
body.sk-p3 .sk-related__grid > li,
body.sk-p3 .sk-card__body,
body.sk-p3 .sk-byline__item { min-width: 0; }
body.sk-p3 .sk-card__title,
body.sk-p3 .sk-overview__links a { overflow-wrap: anywhere; }

@media screen and (max-width: 480px) {
  body.sk-p3 .article-header.entry-header > .entry-title {
    font-size: 26px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------------------
 * スマホ
 * ------------------------------------------------------------------ */
@media screen and (max-width: 834px) {
  .sk-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .sk-card--wide {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .sk-card--wide .sk-card__body {
    padding: 10px 12px;
  }

  .sk-card--wide .sk-card__title {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .entry-content .sk-overview {
    padding: 14px 14px;
  }

  .sk-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk-related__grid .sk-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
  }

  .sk-related__grid .sk-card__body {
    padding: 8px 10px;
  }

  .sk-related__grid .sk-card__title {
    font-size: 13px;
  }

  .sk-card--wide {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

/* T12: constrain legacy in-article CTA buttons on narrow screens. */
.sk-p3 .entry-content .safekun_lp_cta_green .ctatxt > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  gap: 12px;
}
.sk-p3 .entry-content .safekun_lp_cta_green .ctatxt .orgwhbtn,
.sk-p3 .entry-content .safekun_lp_cta_green .ctatxt .whorgbtn,
.sk-p3 .entry-content #ctabox .orgwhbtn,
.sk-p3 .entry-content #ctabox .whorgbtn {
  display: flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 285px;
  min-width: 0;
  height: auto;
  min-height: 60px;
  margin: 0 !important;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Phase3: keep manual TOCs; reveal the Cocoon TOC only when absent. */
@supports selector(:has(*)) {
    body.single-column .entry-content:not(:has(.table-of-contents, .index-of-contents)) #toc {
        display: table;
        max-width: 100%;
        box-sizing: border-box;
    }
    body.single-column .entry-content:not(:has(.table-of-contents, .index-of-contents)) #toc a {
        overflow-wrap: anywhere;
    }
}

/* Legacy paired article CTA: equal desktop columns, centered mobile stack. */
body.sk-p3 .entry-content #cta-textbox {
  margin-bottom: 0;
}
body.sk-p3 .entry-content #ctabox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 590px;
  margin: 0 auto 40px !important;
  padding: 16px 0;
}
body.sk-p3 .entry-content #ctabox > div {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  max-width: 285px;
  margin: 0;
}
@media screen and (max-width: 767px) {
  body.sk-p3 .entry-content #ctabox {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  body.sk-p3 .entry-content #ctabox > div {
    flex: 0 0 auto;
    width: 100%;
  }
}