@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

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

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

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

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

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


/* テーブル全体のスタイル */
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; /* 小さな画面での右列のセルの枠線の色と太さを指定 */
    }
}


/* 関連記事 */

.related-posts-cards {
    margin-top: 40px;
}

.related-posts-heading {
    font-size: 18px;
    margin-bottom: 16px;
    padding: 10px;
    background-color: #f5f5f5;
    border-left: 5px solid #0073aa;
    width: 100%;
    box-sizing: border-box;
}

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

.related-card {
    width: calc(50% - 10px);
    max-width: 200px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.2s ease;
    overflow: hidden;
}

.related-card:hover {
    transform: scale(1.02);
}

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

.related-card-link {
    font-size: 13px;
    color: #0073aa;
    margin: 10px 0 12px;
    font-weight: bold;
}

@media (min-width: 768px) {
    .related-card {
        width: calc(25% - 12px);
    }
}



/* グリーン版（落ち着きトーン） */
.green-button {
  display:block;
  text-align:center;
  background:#43a047;            /* 本体グリーン（green 600系） */
  color:#fff !important;
  font-weight:700;
  padding:14px 0;
  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);
  }
}
*/

.cta-text {
  text-align: center;
}
