@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** 記事本文の読みやすさ（実務AIワークス）
************************************/

/* 1行を長くしすぎず、読む位置を中央に固定 */
@media screen and (min-width: 1024px) {
  .single-post .entry-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 本文 */
.single-post .entry-content {
  color: #2f3437;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.015em;
}

.single-post .entry-content p {
  margin-top: 0;
  margin-bottom: 1.1em;
}

/* 見出し */
.single-post .entry-content h2 {
  color: #263746;
  background: #f1f5f8;
  border-left: 5px solid #19448e;
  border-bottom: 0;
  font-size: 1.5em;
  line-height: 1.5;
  margin-top: 2.8em;
  margin-bottom: 1.25em;
  padding: 0.8em 1em;
}

.single-post .entry-content h2::before,
.single-post .entry-content h2::after {
  display: none;
}

.single-post .entry-content h3 {
  color: #263746;
  background: transparent;
  border-bottom: 2px solid #cbd8e2;
  font-size: 1.22em;
  line-height: 1.55;
  margin-top: 2.2em;
  margin-bottom: 1em;
  padding: 0 0 0.5em;
}

/* 箇条書き */
.single-post .entry-content > ul,
.single-post .entry-content > ol {
  background: #f8fafb;
  border: 1px solid #e1e7eb;
  border-radius: 6px;
  margin: 1.5em 0 2em;
  padding: 1.2em 1.5em 1.2em 3em;
}

.single-post .entry-content li {
  margin-bottom: 0.55em;
}

.single-post .entry-content li:last-child {
  margin-bottom: 0;
}

/* 強調・引用 */
.single-post .entry-content strong {
  color: #1f2f3d;
  font-weight: 700;
}

.single-post .entry-content blockquote {
  color: #3f4d57;
  background: #f7f9fb;
  border-left: 4px solid #8ba5b8;
  margin: 1.8em 0;
  padding: 1.2em 1.4em;
}

/* 表 */
.single-post .entry-content .wp-block-table,
.single-post .entry-content .scrollable-table {
  margin: 1.8em 0 2.2em;
  overflow-x: auto;
}

.single-post .entry-content table {
  width: 100%;
  font-size: 0.94em;
  line-height: 1.6;
  border-collapse: collapse;
}

.single-post .entry-content th,
.single-post .entry-content td {
  border: 1px solid #d8e0e6;
  padding: 0.85em 0.9em;
  vertical-align: top;
}

.single-post .entry-content th {
  color: #263746;
  background: #eaf0f4;
  font-weight: 700;
}

/* 通常リンク */
.single-post .entry-content a:not(.wp-block-button__link):not(.btn) {
  color: #1769aa;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.single-post .entry-content a:not(.wp-block-button__link):not(.btn):hover {
  color: #0d4777;
}

/* CTAボタン */
.single-post .entry-content .wp-block-buttons,
.single-post .entry-content .btn-wrap {
  margin: 2em 0;
}

.single-post .entry-content .wp-block-button__link,
.single-post .entry-content .btn-wrap > a,
.single-post .entry-content a.btn {
  display: inline-block;
  background: #19448e;
  color: #fff !important;
  border: 0;
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(25, 68, 142, 0.18);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.9em 1.8em;
  text-decoration: none;
}

.single-post .entry-content .wp-block-button__link:hover,
.single-post .entry-content .btn-wrap > a:hover,
.single-post .entry-content a.btn:hover {
  background: #12366f;
  box-shadow: 0 3px 8px rgba(25, 68, 142, 0.24);
  color: #fff !important;
  transform: translateY(1px);
}

/* スマホ */
@media screen and (max-width: 480px) {
  .single-post .entry-content {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.01em;
  }

  .single-post .entry-content p {
    margin-bottom: 1.35em;
  }

  .single-post .entry-content h2 {
    font-size: 1.32em;
    margin-top: 2.4em;
    padding: 0.75em 0.8em;
  }

  .single-post .entry-content h3 {
    font-size: 1.16em;
    margin-top: 2em;
  }

  .single-post .entry-content > ul,
  .single-post .entry-content > ol {
    padding: 1em 1em 1em 2.5em;
  }

  .single-post .entry-content .wp-block-button__link,
  .single-post .entry-content .btn-wrap > a,
  .single-post .entry-content a.btn {
    width: 100%;
    text-align: center;
  }
}


/* 目次の間隔をコンパクトにする */
.single-post .toc-list {
  line-height: 1.5;
}
.single-post .toc-list > li {
  margin: 0;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}
.single-post .toc-list li > a {
  line-height: 1.5;
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}
.single-post .toc-list li li {
  margin: 0.1em 0;
  padding-top: 0;
  padding-bottom: 0;
}


/* Grayishの目次余白を上書き */
body.skin-grayish.single-post .entry-content .toc-list > li {
  margin: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
body.skin-grayish.single-post .entry-content .toc-list li > a {
  line-height: 1.5 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
body.skin-grayish.single-post .entry-content .toc-list li li {
  margin: 2px 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* 目次の丸数字を文字行の中央に揃える */
body.skin-grayish.single-post .entry-content .toc-list > li > a::before {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* アフィリエイト導線を明確なCTAにする */
.single-post .entry-content a[href*="px.a8.net"] {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 1.8em auto 2.2em;
  padding: 0.95em 2em;
  color: #fff !important;
  background: #19448e;
  border: 0;
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(25, 68, 142, 0.2);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none !important;
}
.single-post .entry-content a[href*="px.a8.net"]:hover {
  color: #fff !important;
  background: #12366f;
  box-shadow: 0 3px 8px rgba(25, 68, 142, 0.25);
  transform: translateY(1px);
}
.single-post .entry-content a[href*="px.a8.net"]::after {
  content: "  ›";
}
@media screen and (max-width: 480px) {
  .single-post .entry-content a[href*="px.a8.net"] {
    width: 100%;
    box-sizing: border-box;
  }
}