@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
*/

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

.entry-content h2{
  border-radius: 6px;
}


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

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

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

.manga-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.manga-info-table th, .manga-info-table td {
    padding: 8px 10px;
    text-align: left;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.manga-info-table th {
    background-color: #FFF3E0; /* 薄いオレンジ系 */
    color: #E65100; /* オレンジ系の濃い文字色 */
    font-weight: bold;
    width: 30%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.manga-info-table td {
    background-color: #ffffff; /* 白 */
    color: #424242;
    width: 70%;
}

.manga-info-table tr:nth-child(even) td {
    background-color: #fafafa; /* 偶数行の右側セルの背景に少し差をつける */
}

.manga-info-table tr:last-child th,
.manga-info-table tr:last-child td {
    border-bottom: none;
}

/* ホバー効果は削除済み */


.custom-card {
    border: 1px solid #FCE4EC; /* さらに薄いピンクの境界線 */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px 0;
    background-color: #ffeded; /* さらに薄いピンクの背景色 */
    text-align: center;
}



.card-package {
    margin-bottom: 5px;
}


/* カード外のCTAコンテナ */
.card-cta {
  margin: 12px 0 70px;   /* カードとの上下の間隔はそのまま */
  text-align: center;
}

/* ← これを追加（または修正） */
.card-cta p.card-cta-text {
  margin: 0 0 5px !important;  /* デフォルトのp marginを潰して、間隔を4pxに */
}


/* 既存ボタンデザインを「場所に依存しない」セレクタへ */
.btn.btn-shine,
.cta-btn {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  padding: 15px 20px;
  font-size: 16px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to bottom, #0073e6, #005bb5);
  border: 1px solid #004a8f;
  border-radius: 5px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  text-align: center;
  margin: 0 auto;
}

.btn.btn-shine:hover,
.cta-btn:hover {
  background: linear-gradient(to bottom, #005bb5, #003f80);
  box-shadow:
    0 6px 8px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transform: translateY(-2px);
}

/* もし既存に .card-footer .btn が残っているなら不要。削除OK */


/* ランキング誘導ボタン（サイト内リンク） */
.btn.btn-ranking {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  padding: 15px 20px;
  font-size: 16px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to bottom, #2f855a, #276749); /* 落ち着いた緑 */
  border: 1px solid #1f5a3d;
  border-radius: 5px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  text-align: center;
  margin: 0 auto;
}

.btn.btn-ranking:hover {
  background: linear-gradient(to bottom, #276749, #1f4f37);
  box-shadow:
    0 6px 8px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transform: translateY(-2px);
}



/* 関連投稿セクション */
.related-posts-section {
    text-align: center;
    margin: 20px 0;
}

.related-posts-title {
    font-weight: bold;
    margin-top: 50px; /* タイトル上部のスペース */
    margin-bottom: 15px;
    text-align: left;
}

.related-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* カード本体：縦並びにしてボタンを下に固定できるように */
.related-post {
    flex: 1 0 calc(100% / 2 - 20px);
    max-width: calc(100% / 2 - 20px);
    border: 1px solid #F8BBD0; /* 薄いピンクの境界線 */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    background-color: #FFF3F7; /* 薄いピンクの背景色 */
    text-align: center;

    display: flex;              /* ← 追加 */
    flex-direction: column;     /* ← 追加 */
}

/* 旧：ヘッダーは不使用のため非表示（残っていても影響しないように） */
.related-post-header {
    display: none !important;
}

/* 新：タイトル（テキストリンク） */
.related-post-title {
    font-size: 12px;            /* ご指定の12px */
    line-height: 1.7;
    font-weight: bold;
    color: #880E4F;             /* 濃いピンク */
    background-color: #ffffff;  /* 旧ヘッダーの白背景を継承 */
    padding: 12px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    margin: 0 0 8px;
    word-break: break-word;
    overflow-wrap: anywhere;     /* 長い語を安全に折り返し */
}
.related-post-title a {
    font-size: 12px;            /* ご指定の12px */
    color: inherit;
    text-decoration: none;
}

/* これに置き換え（colorを削除） */
.related-post-title a {
  text-decoration: underline;  /* 下線だけ任意で付ける */
}
.related-post-title a:hover,
.related-post-title a:focus {
  text-decoration: underline;
  outline: none;
}


/* サムネイル */
.related-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;              /* 余計な隙間防止 */
    border-radius: 5px;
    margin-bottom: 15px;
}

/* フッター（ボタン）をカード下に寄せる */
.related-post-footer {
    margin-top: auto;            /* ← 追加：カード下へ固定 */
}

/* ボタン */
.related-post-footer .btn {
    display: inline-block;
    padding: 12px 20px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(to bottom, #0073e6, #005bb5); /* ボタンのグラデーション */
    border: 1px solid #004a8f;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    transition: all 0.3s ease-in-out;
    width: 100%;
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
}
.related-post-footer .btn:hover {
    background: linear-gradient(to bottom, #005bb5, #003f80);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    transform: translateY(-2px);
}

/* キーボード操作のアクセシビリティ（任意） */
.related-post a:focus-visible,
.related-post .btn:focus-visible {
    outline: 2px solid #AD1457;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .related-post {
        flex: 1 0 100%;
        max-width: 100%;
    }
}

/* 標準リンク色に強制（タイトル内リンクのみ） */
.related-posts .related-post .related-post-title a {
  color: LinkText !important;          /* 標準の青 */
  text-decoration: underline;
}
.related-posts .related-post .related-post-title a:visited {
  color: VisitedText !important;       /* 標準の紫 */
}
.related-posts .related-post .related-post-title a:active {
  color: ActiveText !important;
}

/* 互換性が必要なら（古いWebKit対策を併記、任意） */
@supports (-webkit-appearance:none) {
  .related-posts .related-post .related-post-title a { color: -webkit-link !important; }
  .related-posts .related-post .related-post-title a:visited { color: -webkit-visited-link !important; }
}

/* タイトルサイズ調整（12px固定） */
.related-posts .related-post h4.related-post-title {
  font-size: 12px !important;
  line-height: 1.7;
  font-weight: bold;
  margin: 0 0 8px;
}
.related-posts .related-post h4.related-post-title a {
  font-size: inherit !important; /* h4のサイズをそのまま継承 */
}





















/* 追加CSS（子テーマに） */
.lead-wrap { font-size:16px; line-height:1.8; }
.lead-wrap p { margin: 0 0 .6em; }
.lead-text-extra { color:#555; } /* 任意 */










/* レビュー文のCSS */
.review-details{
  border:1px solid #e5e7eb; border-radius:10px; background:#fcfcfd;
  margin:12px 0 24px; overflow:hidden;
}
/* summary をボタン風＆タップ領域44px目安に */
.review-details>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  padding:.9rem 1rem; font-weight:600; color:#111827;
}
/* デフォの▼マーカー消す（Safari/Chrome） */
.review-details>summary::-webkit-details-marker{ display:none; }
/* 右側に“＋/－”を疑似要素で表示（回転なし） */
.review-details>summary::after{
  content:'＋'; margin-left:auto; font-weight:700; color:#6b7280;
}
.review-details[open]>summary::after{ content:'－'; }
/* 状態に応じた背景変化だけ（回転なし） */
.review-details>summary:hover{ background:#f7f7fb; }
.review-details[open]>summary{ background:#f3f4f6; }
/* キーボード操作の可視フォーカス */
.review-details>summary:focus-visible{
  outline:3px solid #93c5fd; outline-offset:2px; border-radius:8px;
}
/* 本文 */
.review-details .review-body{
  padding:.6rem 1rem 1rem; color:#374151; line-height:1.8;
}





.review-link-after {
  margin: 12px 0 20px;
  text-align: left; /* ここは好みで中央でもOK */
}

.review-link-after a {
  text-decoration: underline;
}






/* あらすじ　見どころの部分 */

/* =========================
   TB Accordion (clean)
   ========================= */

/* ===== 共通：details本体 ===== */
.tb-acc,
.tb-more{
  margin: 0 0 14px;
  border: none;
  background: transparent;
}

/* ===== あらすじ（synopsis）：外枠なし（中身だけ表示） ===== */
#synopsis .tb-acc__body{
  margin-top: 10px;
  font-size: 16px;
}

/* あらすじ：ラインの余白だけ詰める */
#synopsis summary.tb-acc-line{
  padding-top: 0;
  padding-bottom: 10px;
}

/* ===== 見どころ：先出し文 ===== */
.tb-highlight-lead{
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.75;
}

/* ===== 見どころ：詳細（枠あり） ===== */
.tb-more__body{
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  line-height: 1.75;
}

/* ===== 中央の「――読む▶――」ライン ===== */
.tb-acc-line{
  list-style: none;
  cursor: pointer;
  margin: 0;

  /* 見た目 */
  font-size: 13px;
  color: #555;
  line-height: 1.2;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;

  /* 中央寄せ＋左右線 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* 余白（デフォルト） */
  padding: 10px 0 2px;
}

/* デフォルトの三角を消す */
.tb-acc-line::-webkit-details-marker{
  display: none;
}

/* 左右の横線 */
.tb-acc-line::before,
.tb-acc-line::after{
  content: "";
  flex: 1;
  border-top: 1px solid #ddd;
  opacity: .9;
}

/* 矢印（▶） */
.tb-acc-arrow{
  margin-left: 6px;
  font-size: 12px;
  opacity: .85;
  display: inline-block; /* 回転を安定させる */
  transition: transform .15s ease;
}

/* 開いたら矢印を▼っぽく */
details[open] > .tb-acc-line .tb-acc-arrow{
  transform: rotate(90deg);
}

/* 中央テキスト部分だけ“ボタン化” */
.tb-acc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 9px 16px;      /* ←大きく（おすすめ） */
  font-size: 14px;        /* ←文字も少し大きく */
  line-height: 1;         /* ←高さが安定する */

  border: 1px solid #ddd;
  border-radius: 999px;   /* ピル型 */
  background: #fff;




  /* 押しやすさ */
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* hoverは要らない派なら消してOK（PCだけ軽く反応） */
@media (hover:hover){
  .tb-acc-line:hover .tb-acc-btn{
    border-color: #cfcfcf;
  }
}

/* タップ時の視認性（スマホ用） */
.tb-acc-line:active .tb-acc-btn{
  transform: translateY(1px);
}

/* ① リード文 ↔ ボタンの間：0px */
.entry-content p + details.tb-more{
  margin-top: 0;
}

/* ① ボタン自体の上下余白も 0px（必要なら） */
.entry-content details.tb-more > summary.tb-acc-line{
  padding-top: 0;
  padding-bottom: 0;
}

/* ② 開いた時：ボタン ↔ 本文の間だけ広げる */
.entry-content details.tb-more > summary.tb-acc-line + .tb-more-body{
  padding-top: 14px; /* 好みで調整。14〜18pxあたりが使いやすい */
}









/* ===== あらすじ：引用枠（blockquote） ===== */
#synopsis .tb-quote{
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid #ddd;
  background: #fafafa;
  border-radius: 10px;
}

/* 引用符（装飾）だけ消す */
#synopsis .tb-quote::before,
#synopsis .tb-quote::after{
  content: none !important;
}

/* 引用文 */
#synopsis .tb-quote p{
  margin: 0;
  line-height: 1.75;
}

/* 出典 */
#synopsis .tb-cite{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #777;
  font-style: normal;
}