@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){
  /*必要ならばここにコードを書く*/
}

.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-header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #AD1457; /* 濃いピンクの文字色 */
    background-color: #ffffff; /* 少し濃いピンク系の背景色 */
    padding: 10px;
    border-radius: 5px;
}

.card-package {
    margin-bottom: 20px;
    font-size: 16px;
    color: #555;
}


/* カード外のCTAコンテナ */
.card-cta{
  margin: 12px 0 24px;      /* カードとの間隔を適度に */
  text-align: center;       /* ボタン中央寄せ */
}

/* 既存ボタンデザインを「場所に依存しない」セレクタへ */
.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 */





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

.related-posts-title {
    font-size: 16px !important;
    font-weight: bold;
    color: #AD1457; /* 濃いピンクの文字色 */
    margin-top: 50px; /* タイトル上部のスペース */
    margin-bottom: 15px;
    text-align: center;
}

.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 {
    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のサイズをそのまま継承 */
}

















.accordion {
  margin: 1em 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

.accordion h3 {
  margin: 0;
  padding: 12px;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  line-height: 1.5; /* 行間を調整 */
}

.accordion h3::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: bold;
  color: #fff;                 /* アイコン文字色 */
  background: #ff4081;         /* 背景色（ピンク系） */
  border-radius: 50%;          /* 丸くする */
  width: 22px;                 /* 円のサイズ */
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion.active h3::after {
  content: "−";
}

.accordion-content {
  display: none;
  padding: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
}


/* 追加：アイコンぶんの余白をタイトルに予約 */
.accordion h3{padding-right:48px;}  /* 22px(円) + 12px(右余白) + α(約14px) */
@media (max-width:480px){
  .accordion h3{padding-right:56px;} /* モバイルは少し多め */
}



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