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

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

/*目次の文字*/
.toc-title{
  color: #F5BABD!important;/*お好みの色に*/
}

/*見出しのデザイン*/
.article h2{
color: #5a5a5a;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left:solid 5px #F5BABD;/*左線*/
}

/*サイトバー目次ハイライト*/
#toc-2 li.current {
	background-color: #F5DFE0; /* ハイライト色 */
}

/************************************
** テーブルのヘッダーを固定する
************************************/
.p-sticky-table{
  white-space: nowrap;
  line-height:1.6;
}
.p-sticky-table table{
  border:none;
  border: 1px solid #b7b7b7;
  /*border-bottom: none;*/
  border-collapse: collapse;
  word-break: break-all;
  table-layout: fixed;
  display:block;
  overflow:scroll;
  max-height: 80vh;
}
.p-sticky-table thead th:first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: #F5DFE0 !important; /*テーマカラー追加*/
}
.p-sticky-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:center;
  background-color: #F5DFE0 !important; /*テーマカラー追加*/
}
.p-sticky-table tbody th:first-child{
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  border:none;
  white-space: normal;
  min-width: 130px;
}
.p-sticky-table tbody th {
  background: #F5DFE0 !important; /*タイトル列テーマカラー追加*/
  text-align:center;
}
.p-sticky-table th, .p-sticky-table td {
  min-width: 50px;
  text-align: left;
  font-size: 16px !important;
  position: relative;
  padding: 13px !important;
  color: #333;
  border: none !important;
  z-index: 0;
  vertical-align:middle !important;
  background:#fff;
}
.p-sticky-table th{
  background:#F5DFE0 !important;
  letter-spacing: 1px;
  font-weight: 500 !important;
  color: #555 !important;
}
.p-sticky-table tr{
  border-bottom:none !important;
}
.p-sticky-table img{
  margin: 10px auto;
  display: block;
  padding: 0;
  max-width: 80% !important;
}
.p-sticky-table table th::before, .p-sticky-table table td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #b7b7b7; /*グレーに変更*/
  border-bottom: 1px solid #b7b7b7; /*グレーに変更*/
  z-index: -1;
}
/* スマホ */
@media screen and (max-width: 560px) {
  .p-sticky-table table {
    max-height: 70vh;
    }
  .p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child {
        min-width: 25vw;
    }
   .p-sticky-table th, .p-sticky-table td {
        font-size: 12px !important;
        padding: 7px !important;
    }
}
/* 中央寄せ */
.pst-center td {
  text-align: center;
}
/************************************
** テーブルのヘッダー固定ここまで
************************************/

/************************************
** ステップ式説明のフォーマット
************************************/
/* ステップ全体の並び方：縦方向に複数ステップを並べる */
.steps {
  display: flex;                  /* 内部の要素をFlexboxで並べる */
  flex-direction: column;        /* 縦方向に並べる（ステップを上から順に） */
  gap: 10px;                      /* 各ステップ間の余白（縦方向） */
}

/* 個々のステップ：左（アイコン）＋右（説明）を横並びに */
.step {
  display: flex;                  /* 子要素（step-left, step-right）を横並びにする */
  align-items: flex-start;        /* 子要素の上端を揃える */
  position: relative;             /* .step-lineをこの要素の下端に伸ばすための基準指定 */
}

/* 左側領域：アイコンと縦線の配置エリア */
.step-left {
  position: relative;             /* 子要素（step-line）の絶対位置の基準にする */
  width: 100px;                   /* アイコン＋縦線用の固定幅 */
  display: flex;
  flex-direction: column;         /* アイコンと縦線を縦に並べる */
  align-items: center;            /* 横方向を中央揃えにする */
}

/* アイコン自体のスタイル：円形で中央揃え */
.step-icon {
  position: relative;             /* 縦線と重なりの調整・基準に使う */
  width: 60px;                    /* 横幅（円の直径） */
  height: 60px;                   /* 高さ（円の直径） */
  background-color: #F5BABD;      /* ピンク系の背景色（カスタマイズ可能） */
  color: white;                   /* テキストを白色に（背景とのコントラスト） */
  border-radius: 50%;             /* 要素を円形にする（完全な丸） */
  font-weight: bold;              /* テキストを太字にする（見出しっぽく） */
  font-size: 1em;                 /* 標準サイズの文字 */
  display: flex;                  /* 子要素（span）をFlex配置で中央揃えにする */
  flex-direction: column;         /* 「ステップ」と「番号」を縦方向に並べる */
  justify-content: center;        /* 垂直方向の中央揃え */
  align-items: center;            /* 水平方向の中央揃え */
  box-shadow: 0 0 5px rgba(0,0,0,0.2); /* やわらかい影で立体感を演出 */
  z-index: 1;                     /* 縦線（z-index:0）より前面に表示する */
}

/* アイコン内のテキストの行間調整 */
.step-icon span {
  line-height: 1;                 /* 行の高さを詰めてコンパクトに表示 */
}

/* アイコンから下に伸びる縦線のスタイル */
.step-line {
  position: absolute;            /* step-left内で絶対位置指定する */
  top: 60px;                      /* アイコンの下端から開始（60pxはアイコンの高さ） */
  left: 50%;                      /* 横方向の中央位置に合わせる */
  transform: translateX(-50%);   /* 自身の幅を考慮してちょうど中央に配置 */
  width: 2px;                     /* 縦線の幅（細め） */
  bottom: 0;                      /* stepの下端まで縦線を伸ばす */
  background-color: #ccc;         /* グレーの線色（目立ちすぎず自然） */
  z-index: 0;                     /* アイコンの背面に配置する */
}

/* 最後のステップだけは縦線を表示しない */
.step:last-child .step-line {
  display: none;                 /* 一番下のアイコンには縦線不要のため非表示 */
}

/* 右側のテキスト領域：タイトル＋説明 */
.step-right {
  flex: 1;                       /* 残りの横幅すべてを使う */
  padding-left: 20px;            /* 左側との間隔を少し空ける */
  display: flex;
  flex-direction: column;        /* タイトル→説明文と縦に並べる */
}

/* タイトルの配置：アイコンと縦位置を揃える */
.step-header {
  display: flex;
  align-items: center;           /* 高さ方向の中央揃え（アイコンと縦位置揃える） */
  height: 60px;                  /* アイコンと同じ高さにすることで揃える */
}

/* タイトルテキストのスタイル */
.step-title {
  margin: 0;                     /* デフォルトの余白をなくす */
  font-size: 1.1em;              /* わずかに大きめの見出しサイズにする */
  font-weight: bold;              /* テキストを太字にする（見出しっぽく） */
}

/* 説明文のスタイル */
.step-description {
  margin-top: 8px;               /* タイトルとの間に少し余白を空ける */
  line-height: 1.6;              /* 行間を広げて読みやすくする */
}


/************************************
** ステップ式説明のフォーマットここまで
************************************/

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

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

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