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

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



/* スマホ表示（767px以下）の時の設定 */
@media screen and (max-width: 767px) {
    .custom-vertical-table th,
    .custom-vertical-table td {
        display: block;     /* 横並びを解除してブロック化 */
        width: 100%;        /* 横幅いっぱいにする */
        box-sizing: border-box;
    }

    .custom-vertical-table th {
        border-bottom: none; /* 見出しと内容の間の線を調整 */
        background-color: #f8f8f8; /* 見出しの色を少し変えると見やすい */
        text-align: left;
    }
}

/* すべての行の背景色を白にする */
.custom-vertical-table table tr,
.custom-vertical-table table td {
    background-color: #ffffff !important; /* 強制的に白にする */
}

/* もし枠線が消えて見えにくい場合は、これを入れると綺麗です */
.custom-vertical-table table th,
.custom-vertical-table table td {
    border: 1px solid #eeeeee; /* 薄いグレーの枠線 */
    padding: 10px;
}

/* スマホ表示の時に見出し(th)だけ色をつけたい場合はここ（不要なら削除OK） */
@media screen and (max-width: 767px) {
    .custom-vertical-table th {
        background-color: #f9f9f9 !important; /* 見出しだけうっすらグレー */
    }
}

/* テーブル全体の文字サイズを調整 */
.custom-vertical-table th,
.custom-vertical-table td {	
    font-size: 14px; /* ここを13pxにするとさらに小さくなります */
    line-height: 1.4; /* 行間を少し詰め気味にしてコンパクトに */
    padding: 8px 10px; /* 上下の余白も少し削ってスリムに */
}

/* スマホ閲覧時、さらに文字を小さくしたい場合 */
@media screen and (max-width: 767px) {
    .custom-vertical-table th,
    .custom-vertical-table td {
        font-size: 13px; /* スマホではさらにもう一回り小さく */
        padding: 6px 8px; /* 余白もさらに調整 */
    }
}

/* 背景色を白に固定（前回の続き） */
.custom-vertical-table table tr,
.custom-vertical-table table td {
    background-color: #ffffff !important;
}

/* ボタンを囲むエリアの設定（中央寄せ） */
.button-wrapper {
    text-align: center; /* 中の要素を中央に寄せる */
    margin: 25px 0;      /* 上下に余白を作る */
    display: flex;       /* 横並びにするための設定 */
    justify-content: center;
    gap: 15px;           /* ボタン同士の間隔 */
    flex-wrap: wrap;     /* 狭い画面で自動で折り返す */
}

/* 公式サイトボタン（オレンジ） */
.btn-official {
    display: inline-block;
    background: #ff9900;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 5px;
    box-shadow: 0 4px 0 #cc7a00;
    transition: 0.2s;
    font-size: 15px;
    min-width: 180px; /* ボタンの最低幅を揃える */
}

/* 詳細ページボタン（青/グレー系） */
.btn-details {
    display: inline-block;
    background: #6c757d; /* 落ち着いたグレー。青なら #007bff */
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 5px;
    box-shadow: 0 4px 0 #495057;
    transition: 0.2s;
    font-size: 15px;
    min-width: 180px;
}

/* ホバーアクション（共通） */
.btn-official:hover, .btn-details:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #444;
    opacity: 0.9;
}

/* スマホ表示時（480px以下）のボタンの隙間を埋める */
@media screen and (max-width: 480px) {
    .button-wrapper {
        flex-direction: column; /* 縦並び */
        align-items: center;
        gap: 0px; /* ここを0にすると隙間がなくなります */
    }

    .btn-official, .btn-details {
        width: 100%;
        max-width: 100%; /* 横幅いっぱい */
        box-sizing: border-box;
        /* ボタン同士をくっつける場合、影の重なりを調整 */
        margin-bottom: 0; 
    }

    /* 上のボタンの下側の角を丸くしない、または下のボタンの影を調整する場合 */
    .btn-details {
        border-radius: 5px 5px 0 0; /* 上側だけ丸く */
        box-shadow: none; /* 隙間を埋めるために一旦影を消す */
    }
    .btn-official {
        border-radius: 0 0 5px 5px; /* 下側だけ丸く */
    }
}

/* table-scrollクラスの中にあるtd要素のみに適用 */
.table-scroll td {
    background-color: #ffffff;
}

/* 親要素：スクロール設定 */
.table-scroll-fixed {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll-fixed table {
  border-collapse: collapse;
  /* 全体の幅は維持しつつ、レイアウトを固定 */
  min-width: 750px; 
  table-layout: fixed; /* 列幅を厳密に守るために追加 */
}

/* 1列目（th）の固定と幅150pxの設定 */
.table-scroll-fixed th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #f8f8f8;
  /* 幅を150pxに固定 */
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  box-sizing: border-box;
}

/* 通常時のセルの設定 */
.table-scroll-fixed th, 
.table-scroll-fixed td {
  border: 1px solid #ccc;
  padding: 10px; /* PCなどでは余白あり */
  word-break: break-all; /* 文字溢れ防止 */
}

/* 1列目の影（任意） */
.table-scroll-fixed th:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0));
}

.table-scroll-fixed table td {
    background-color: #ffffff;
}

/* 【追加】スマホ閲覧時の幅調整 */
@media screen and (max-width: 767px) {
  /* テーブル全体の横幅を抑える */
  .table-scroll-fixed table {
    min-width: 450px !important; /* コンテンツが入り切る最小限に変更 */
  }

  /* 1列目の固定幅をスリムにする */
  .table-scroll-fixed th:first-child {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    font-size: 11px; /* 文字を少し小さくして収まりを良くする */
  }

  /* セル内の余白を詰める（前回の修正） */
  .table-scroll-fixed th, 
  .table-scroll-fixed td {
    padding: 5px 5px !important;
    font-size: 11px;
  }
}

/* 特定のクラスを緑色にする例 */
.green-text {
    color: #2e7d32; /* お好みの緑色のカラーコード */
}

.yellow-marker {
    background: linear-gradient(transparent 60%, #ffff00 60%);
    font-weight: bold; /* 太字にするとよりマーカーらしくなります */
}

.b{
    font-weight: bold; /* 太字にするとよりマーカーらしくなります */
	}

/* 1. 全体・PC用の設定 */
.table-scroll-new {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block; /* block要素であることを明示 */
  width: 100%;
}

.table-scroll-new table {
  border-collapse: collapse;
  /* ★ここが重要：スマホでもPCでも、中身が潰れない最小幅を確保する */
  min-width: 700px; 
  table-layout: fixed;
  width: 100%;
}

.table-scroll-new th, 
.table-scroll-new td {
  border: 1px solid #ccc;
  padding: 10px;
  word-break: break-all;
  vertical-align: middle;
  background-color: #ffffff; /* セルの背景色を白に固定（透過による重なり防止） */
}

/* 1列目（項目）の固定設定 */
.table-scroll-new th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #f8f8f8 !important; /* 固定列は背景色を必須に */
  width: 120px;
}

/* ★2列目（解説）：幅を指定して折り返し */
.table-scroll-new td:nth-child(2) {
  width: 250px; /* ここで2列目の幅を自由に調整してください */
  text-align: left; /* 解説文なので左寄せが見やすいです */
}

.table-scroll-new th:nth-child(2) {
  width: 250px; /* ここで2列目の幅を自由に調整してください */
  text-align: center; /* 解説文なので左寄せが見やすいです */
}

/* 3列目（重要度）：幅を指定 */
.table-scroll-new th:nth-child(3),
.table-scroll-new td:nth-child(3) {
  width: 120px;
}

/* --- すべての th（ヘッダーと1列目）の背景色を統一 --- */
.table-scroll-new th {
  background-color: #f8f8f8 !important; /* ★ここでお好きな色に変更してください */
  color: #333;
  font-weight: bold;
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: middle;
}

/* --- スマホ閲覧時（480px以下）の調整 --- */
@media screen and (max-width: 480px) {
  .table-scroll-new table {
    /* ★重要：autoではなく、画面幅より大きい値を指定してスクロールを強制する */
    min-width: 600px !important; 
    table-layout: auto !important; /* スマホではコンテンツに合わせて調整 */
  }

  .table-scroll-new th, 
  .table-scroll-new td {
    padding: 8px 5px !important; /* 0だと文字がくっつきすぎるので微調整 */
    font-size: 12px;
  }

  /* 1列目の固定幅をスマホ用に調整 */
  .table-scroll-new th:first-child {
    width: 150px !important;
    min-width: 150px !important;
  }
}


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

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

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