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


/* 投稿・固定ページ本文内の h2 */
.single .entry-content h2,
.page .entry-content h2 {
  font-size: 16px;
  padding-top: 15px;    /* 上だけ */
  padding-bottom: 15px; /* 下だけ */
}

/* 投稿・固定ページ本文内の h3 を14pxに */
.single .entry-content h3,
.page .entry-content h3 {
  font-size: 14px;
}

/* 投稿記事の h1（タイトル）も18px に */
.single h1.entry-title,
.single h1.entry-title a {
  font-size: 18px;
}

/* よくある質問エリア内のテキストだけ16pxに */
.mangario-faq p {
  font-size: 16px;
}


.sample-accordion{
  margin:14px 0 50px;  /* 上 14px / 左右 0 / 下 50px に変更 */
}
.sample-accordion summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  /* 高さアップ（上下を+4pxくらい） */
  padding:16px 16px;
  /* 枠線を1px → 2px にしてボタンを太く */
  border:2px solid #b5bac7;
  border-radius:8px;
  background:#d4d9e6;
  font-weight:700;
  text-align:center;
}

.sample-accordion summary::-webkit-details-marker{display:none}
.sample-accordion[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.sample-accordion .sample-grid{
  border:1px solid #d9dce0; border-top:0; border-bottom-left-radius:8px; border-bottom-right-radius:8px;
  padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
@media (max-width:767px){ .sample-accordion .sample-grid{grid-template-columns:1fr} }
/* 角丸オフ（このブロック内だけ） */
.sample-accordion .sample-grid img{border-radius:0!important;display:block;width:100%;height:auto}

/* アコーディオン内画像を常に1列 */
.sample-accordion .sample-grid{
  grid-template-columns: 1fr !important;
}


/* グリーン版（落ち着きトーン） */
.green-button {
  display:block;
  text-align:center;
  background:#43a047;            /* 本体グリーン（green 600系） */
  color:#fff !important;
  font-weight:700;
  padding:14px 0px;
  border-radius:10px;
  text-decoration:none;
  margin:12px 0 40px;
  /* 立体感（控えめ） */
  box-shadow:0 6px 0 #2e7d32, 0 4px 6px rgba(0,0,0,0.2);
  transition:box-shadow .2s ease; /* 浮き上がりは無効、影だけ穏やかに */
}

/* フォーカス見やすさ（キーボード操作/アクセシビリティ） */
.green-button:focus-visible {
  outline: 2px solid #a5d6a7;     /* 薄いミント */
  outline-offset: 3px;
}

/* （任意）ホバー演出を少しだけ付けたい場合は下を有効化
@media (hover:hover) and (pointer:fine) {
  .blue-button:hover,
  .green-button:hover {
    box-shadow:0 8px 0 #1b5e20, 0 6px 12px rgba(0,0,0,0.25);
  }
}
*/





/* テーブル全体のスタイル */
table {
    width: 100%; /* テーブルの幅を100%に設定 */
    margin: 0 auto; /* 中央揃え */
    border-collapse: collapse;
    border: 1px solid #e5e5e5; /* テーブル全体の枠線の色と太さを指定 */
}

/* 左の列のセルのスタイル */
table td:first-child {
    width: 300px; /* 通常時の左の列の幅を300pxに指定 */
    background-color: #efefef; /* 左列の背景色 */
    text-align: center; /* 左列の文字をセンタリング */
    vertical-align: middle; /* 左列の文字を縦方向にもセンタリング */
    font-size: 16px; /* 左列の文字サイズを指定 */
    padding: 10px; /* 左列のセルの内側の空白部分を指定 */
    border: 1px solid #e5e5e5; /* 左の列のセルの枠線の色と太さを指定 */
}

/* 右の列のセルのスタイル */
table td:nth-child(2) {
    background-color: #ffffff; /* 右列の背景色 */
    vertical-align: middle; /* 右列の文字を縦方向にもセンタリング */
    font-size: 14px; /* 右列の文字サイズを指定 */
    padding: 10px; /* 右列のセルの内側の空白部分を指定 */
    border: 1px solid #e5e5e5; /* 右の列のセルの枠線の色と太さを指定 */
}

/* 偶数行の背景色 */
table tr:nth-child(even) td:nth-child(2) {
    background-color: #ffffff; /* 右列の偶数行の背景色 */
}

/* 奇数行の背景色 */
table tr:nth-child(odd) td:nth-child(2) {
    background-color: #f7f7f7; /* 右列の奇数行の背景色 */
}

/* テーブルを小さな画面に対応させる */
@media screen and (max-width: 600px) {
    .table-wrapper {
        overflow-x: auto; /* 横スクロール可能にする */
    }
    table td:first-child {
        width: 35%; /* 左の列の幅を画面幅の35%に設定 */
        font-size: 14px; /* 小さな画面での左列の文字サイズを指定 */
        padding: 8px; /* 小さな画面での左列のセルの内側の空白部分を指定 */
        border: 1px solid #e5e5e5; /* 小さな画面での左列のセルの枠線の色と太さを指定 */
    }
    table td:nth-child(2) {
        width: 65%; /* 右の列の幅を画面幅の65%に設定 */
        font-size: 12px; /* 小さな画面での右列の文字サイズを指定 */
        padding: 8px; /* 小さな画面での右列のセルの内側の空白部分を指定 */
        border: 1px solid #e5e5e5; /* 小さな画面での右列のセルの枠線の色と太さを指定 */
    }
}


/* 全体ラッパー */
.mangario-related-block-wrap {
  margin: 40px 0;
}

/* セクションごと */
.mangario-related-section {
  margin-bottom: 32px;
}

/* 見出し（h2） */
.mangario-related-heading {
  font-size: 18px;
  margin: 0 0 16px;
}

/* グリッド：カードの高さをそろえる */
.mangario-related-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;  /* 各カードの高さを揃える */
}

@media (min-width: 768px) {
  .mangario-related-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* カード本体：縦フレックスで「ボタンを下に」 */
.mangario-related-card {
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  padding: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;          /* グリッド内で高さを揃える */
}

/* タイトルエリア：背景＋最低高さでガタつき抑える */
.mangario-related-card-title {
  margin: -6px -6px 4px;
  padding: 4px 6px;
  background: #f5f7fa;
  /* タイトルが1行でも3行でも、ある程度高さをそろえる */
  min-height: 3.2em;     /* 12pxフォント × 約2〜3行ぶんの高さ */
  display: flex;
  align-items: center;   /* 短いタイトルは縦中央寄せ */
}

.mangario-related-card-title a {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}

/* サムネイルとの間隔を最小限に */
.mangario-related-card-thumb-wrapper {
  margin-bottom: 2px;
}

.mangario-related-card-thumb {
  display: block;
  width: 100%;
  height: auto;
}

/* フッター：余白を最小限にしつつ、カードの一番下へ */
.mangario-related-card-footer {
  margin-top: auto;      /* ここがポイント：余白はここに集める → ボタンが下で揃う */
  padding-top: 2px;
  text-align: center;
}

/* カード内のボタンは横幅いっぱい＋余白なし */
.mangario-related-card-footer .green-button {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}