/* 記事本文・コラム（SNS シェア、いいね、目次）。読み込み条件は backend/inc/enqueue.php */

/* 記事本文（WordPress のエディター出力） */
.content .detail-content blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-left: 0;
}

.gallery .gallery-caption {
  font-size: 9.75px;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .gallery .gallery-caption {
  font-size: 13px;
  }
}

.content .detail-content .rtl blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-right: 0;
  margin-left: auto;
}

/* ============================================================
   Column — SNS Share buttons
   ============================================================ */
.sns-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22.5px 0;
  padding: 15px 56.25px;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .sns-share {
  margin: 30px 0;
  }
}

.sns-share__label {
  font-size: 12px;
  font-weight: bold;
  color: #595757;
  white-space: nowrap;
}

.sns-share__list {
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .sns-share__list {
  gap: 12px;
  }
}

.sns-share__item a,
.sns-share__item .copy-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 6px 13.5px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.2s ease;
  cursor: pointer;
  border: none;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .sns-share__item a,
.sns-share__item .copy-link-btn {
  gap: 6px;
  border-radius: 4px;
  }
}

.sns-share__item a:hover,
.sns-share__item .copy-link-btn:hover {
  opacity: 0.75;
}

.sns-share__item--x a {
  background: #000;
  color: #fff;
}
.sns-share__item--x a svg {
  fill: #fff;
}

.sns-share__item--fb a {
  background: #1877f2;
  color: #fff;
}
.sns-share__item--fb a svg {
  fill: #fff;
}

.sns-share__item--copy .copy-link-btn {
  background: #727171;
  color: #fff;
}
.sns-share__item--copy .copy-link-btn svg {
  fill: #fff;
}

/* ============================================================
   Column — Like button
   ============================================================ */
.like-box {
  display: flex;
  justify-content: center;
  margin: 22.5px 0 30px;
}
@media screen and (max-width: 767px) {
  .like-box {
  margin: 30px 0 40px;
  }
}

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 24px;
  border: 1.5px solid #d0cbc9;
  border-radius: 30px;
  background: #fff;
  color: #595757;
  font-size: 13.5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .like-btn {
  gap: 8px;
  border: 2px solid #d0cbc9;
  border-radius: 40px;
  }
}

.like-btn:hover,
.like-btn.liked {
  border-color: #e05a5a;
  color: #e05a5a;
}

.like-btn:hover .like-icon svg,
.like-btn.liked .like-icon svg {
  fill: #e05a5a;
}

/* PC は SVG の width/height 属性（シェア 18px・いいね 20px）を 0.75 倍で表示する */
@media screen and (min-width: 768px) {
  .sns-share__item svg {
    width: 13.5px;
    height: 13.5px;
  }
  .like-btn .like-icon svg {
    width: 15px;
    height: 15px;
  }
}

.like-btn .like-icon svg {
  fill: #d0cbc9;
  transition: fill 0.25s ease;
  display: block;
}

.like-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.like-count {
  font-size: 12px;
  min-width: 15px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .like-count {
  font-size: 16px;
  min-width: 20px;
  }
}

/* ============================================================
   Column — TOC span links (h3 sub-entries inside .detail-01 .box)
   ============================================================ */
#column .column-detail .detail-01 .box ul li a {
  color: inherit;
  text-decoration: none;
}
#column .column-detail .detail-01 .box ul li a:hover {
  opacity: 0.7;
}
#column .column-detail .detail-01 .box ul li span a {
  display: block;
  padding-left: 11.25px;
  font-weight: normal;
  color: inherit;
}
@media screen and (max-width: 767px) {
  #column .column-detail .detail-01 .box ul li span a {
  padding-left: 15px;
  }
}
#column .column-detail .detail-01 .box ul li span a:hover {
  opacity: 0.7;
}

/* Allow WordPress-selected image sizes to render inside column article bodies. */
#column .column-detail .detail-01 p img,
#column .column-detail .detail-01 figure img,
#column .column-detail .content p img,
#column .column-detail .content figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}

#column .column-detail .detail-01 .aligncenter,
#column .column-detail .content .aligncenter,
#column .column-detail .detail-01 .wp-block-image.aligncenter,
#column .column-detail .content .wp-block-image.aligncenter,
#column .column-detail .detail-01 .has-text-align-center,
#column .column-detail .content .has-text-align-center {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#column .column-detail .detail-01 img.aligncenter,
#column .column-detail .content img.aligncenter,
#column .column-detail .detail-01 .aligncenter img,
#column .column-detail .content .aligncenter img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#column .column-detail .detail-01 > ol,
#column .column-detail .content ol {
  list-style: decimal;
  padding-left: 1.6em;
  margin: 0 0 26.25px;
}
@media screen and (max-width: 767px) {
  #column .column-detail .detail-01 > ol,
#column .column-detail .content ol {
  margin: 0 0 35px;
  }
}

#column .column-detail .detail-01 > ul,
#column .column-detail .content ul {
  list-style: disc;
  padding-left: 1.6em;
  margin: 0 0 26.25px;
}
@media screen and (max-width: 767px) {
  #column .column-detail .detail-01 > ul,
#column .column-detail .content ul {
  margin: 0 0 35px;
  }
}

#column .column-detail .detail-01 > ol li,
#column .column-detail .detail-01 > ul li,
#column .column-detail .content ol li,
#column .column-detail .content ul li {
  list-style: inherit;
  font-size: 15.75px;
  line-height: 1.8;
  letter-spacing: 0;
  margin: 0 0 4.5px;
  padding-left: 0.2em;
}
@media screen and (max-width: 767px) {
  #column .column-detail .detail-01 > ol li,
#column .column-detail .detail-01 > ul li,
#column .column-detail .content ol li,
#column .column-detail .content ul li {
  margin: 0 0 6px;
  }
}

#column .column-detail .detail-01 .txt,
#column .column-detail .content p,
#column .column-detail .content blockquote {
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* 本文の表 */
#column .column-detail .content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.75px;
  line-height: 1.7;
  margin: 0 0 36px;
}
@media screen and (max-width: 767px) {
  #column .column-detail .content table {
  margin: 0 0 48px;
  }
}

#column .column-detail .content th,
#column .column-detail .content td {
  border: 0.75px solid #c9cfe3;
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  #column .column-detail .content th,
#column .column-detail .content td {
  border: 1px solid #c9cfe3;
  }
}

#column .column-detail .content thead th {
  background: #dde0f0;
  color: #005dad;
  font-weight: bold;
  white-space: nowrap;
}

#column .column-detail .content tbody th {
  background: #f4f6fb;
  font-weight: bold;
  white-space: nowrap;
}

/* 本文のリンク・強調 */
#column .column-detail .content a {
  color: #005dad;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#column .column-detail .content a:hover {
  opacity: 0.7;
}

#column .column-detail .content strong {
  color: #231815;
  font-weight: bold;
}

/* マーカー（エディターの背景色を backend/inc/column.php で class="marker" に変換したもの） */
#column .column-detail .marker {
  color: #231815;
  font-weight: bold;
  background: linear-gradient(transparent 60%, #ffe45c 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.1em;
}

/* 固定ヘッダーに見出しが隠れないよう、目次リンクの着地位置を下げる */
#column .column-detail .content h2,
#column .column-detail .content h3 {
  scroll-margin-top: 90px;
}

/* 目次：h2 の項目を太字にして階層をわかりやすく */
#column .column-detail .detail-01 .box ul li > a {
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  #column .column-detail .detail-01 > ol,
  #column .column-detail .detail-01 > ul,
  #column .column-detail .content ol,
  #column .column-detail .content ul {
    margin-bottom: 30px;
    padding-left: 1.5em;
  }

  #column .column-detail .detail-01 > ol li,
  #column .column-detail .detail-01 > ul li,
  #column .column-detail .content ol li,
  #column .column-detail .content ul li {
    font-size: 15px;
    line-height: 1.8;
  }

  #column .column-detail .content table {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 32px;
  }

  #column .column-detail .content th,
  #column .column-detail .content td {
    padding: 8px 10px;
  }

  #column .column-detail .content thead th,
  #column .column-detail .content tbody th {
    white-space: normal;
  }

  #column .column-detail .content h2,
  #column .column-detail .content h3 {
    scroll-margin-top: 80px;
  }
}

/* ============================================================
   Column — Responsive overrides
   ============================================================ */
@media only screen and (max-width: 1080px) {
  .sns-share {
    padding: 15px 41.25px;
  }
}

@media only screen and (max-width: 767px) {
  .sns-share {
    padding: 15px 0;
    gap: 10px;
  }
  .sns-share__label {
    font-size: 13px;
    width: 100%;
  }
  .sns-share__item a,
  .sns-share__item .copy-link-btn {
    padding: 7px 12px;
    font-size: 12px;
  }
  .like-btn {
    font-size: 15px;
    padding: 10px 24px;
  }
}