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

/* CSS Written by もなか */

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


/* 実態は外観CSSに配置 */
:root {
  /* --- 基本色 --- */

  /** サイト全体の背景色 */
  --bg-color: #F9F7F5;

  /** 本文、段落などの基本テキスト色 */
  --text-color: #5C544F;

  /** H1, H2, H3などの見出し、サイトタイトルの色 */
  --heading-color: #433C37;

  /** カードや目次などの背景色 */
  --card-bg-color: #ffffff;

  /** 罫線や区切り線の色 */
  --border-color: #EAE2DC;

  /** フッターエリアの背景色 */
  --footer-bg-color: #EAE2DC;
  /* フッター背景色はボーダー色と同じ */


  /* --- アクセントカラー --- */

  /** リンク、アイコン、H3見出しの左線などに使用するメインのアクセントカラー */
  --accent-color: #D4A38C;

  /** H2見出しの背景ハイライトなど、淡いアクセントに使用する色 */
  /* --accent-color-light: #F8F5F2; */
  --accent-color-light: #f4e2da;
  /** ホバー時のテキストなど、少し濃いアクセントに使用する色 */
  --accent-color-dark: #B9836B;
}

.body {
  background-color: var(--bg-color);
}

/* .main {
  padding: 0 3em 2em;
} */


/* .article h2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-top: 4rem;
    padding-left: 0;
    background-color: transparent;
}
.article h2 span {
    background: linear-gradient(transparent 60%, var(--accent-color-light) 60%);
} */



/* 見出しH2文字 */
.article h2 {
  position: relative;
  margin-top: 4em;

  &::before {
    background: linear-gradient(240deg, rgba(255, 214, 200, 1) 0%, rgba(197, 131, 126, 0.7959777661064426) 50%);
    ;

    border-radius: 5px;
    content: '';
    display: block;
    position: absolute;
    height: 3px;
    width: 96%;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &::after {
    background: linear-gradient(240deg, rgba(255, 214, 200, 1) 0%, rgba(197, 131, 126, 0.7959777661064426) 50%);
    ;
    border-radius: 5px;
    content: '';
    display: block;
    position: absolute;
    height: 3px;
    width: 96%;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}








/************************************
** 目次
************************************/
.toc {
  background-color: var(--card-bg-color);
  border-left: 4px solid var(--border-color);
  /* border-top-left-radius: 5px; */
  border-radius: 5px;
  border-right: none;
  border-top: none;
  border-bottom: none;
  font-size: 0.9em;
  padding: 1em 1.6em;
  /* display: table; */
}


.toc .toc-content {
  padding-top: 0;
}

.toc .toc-list {
  padding-left: .5em;
  padding-bottom: 1em;
}



.toc a:hover {
  color: inherit;
  text-decoration: none;
}

.toc li {
  margin: 0;
  padding-left: .5em;
}

.toc li a {
  padding: .2em .6em;
}

.toc li a:hover {
  background-color: var(--border-color);
  border-radius: 5px;
}

.toc li a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: var(--text-color);
  vertical-align: middle;
  /* content: '\f04b'; */
  content: '\f054';
  font-size: 8px;
  margin-right: 10px;
}

.toc li li a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: var(--text-color);
  vertical-align: middle;
  content: '\f068';
  /* content: '\f054'; */
  font-size: 6px;
  margin-right: 10px;
}


.toc ol {
  list-style: none;
}

.toc ol li {
  margin: 0.4em 0.4em 0.8em;
}

.toc ol li li {
  margin: 0.2em 0.4em 0.4em 0;
}

/* .toc a {
  color: var(--cocoon-text-color);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
} */

.toc-title {
  font-size: 1.1em;
  text-align: left;
  /* display: block; */
  /* padding: 2px 16px; */
}

.toc-title::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: var(--text-color);
  vertical-align: middle;
  content: '\f036';
  font-size: 16px;
  margin-right: 10px;
}



/************************************
** リスト
************************************/


.div-list {
  padding: 1.5em 1em;
  /* margin-bottom: 1.5rem; */
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}


.div-iconlist--red {
  border: 2px solid var(--accent-color);
  background-color: var(--card-bg-color);
}

.div-iconlist--red .iconlist-title {
  color: var(--accent-color-dark);
}

.div-iconlist--red li::before {
  color: var(--accent-color-dark);
}

.iconlist-box {
  padding: 1.4em 2em 2em;

  & li {
    line-height: 2em;
  }

  & li::before {
    margin-left: -1.8em;
    font-size: 14px;
  }

  & :where(.iconlist-title) {
    margin-bottom: .5em;
    text-align: left;
    font-weight: normal;
    letter-spacing: .2em;
    font-size: .8em;
    font-style: italic;

    &:before {
      content: '-';
      padding-right: .4em;
    }

    &:after {
      content: '-';
      padding-left: .5em;
    }
  }

  &:where(.div-iconlist--cold) {
    border: 3px solid rgba(130, 155, 190, .5);
    background-color: rgba(255, 255, 254, .5);

    & :where(.iconlist-title) {
      color: rgba(130, 155, 190, .5);
    }

    & ul li:before {
      color: #829bbe;
    }
  }

  &:where(.div-iconlist--warm) {
    border: 3px solid rgba(200, 130, 130, .5);
    background-color: rgba(255, 255, 254, .5);

    & :where(.iconlist-title) {
      color: rgba(200, 130, 130, .5);
    }

    & ul li:before {
      color: #c88282;
    }
  }

  &:where(.div-iconlist--relax) {
    border: 3px solid rgba(200, 130, 130, .5);
    background-color: rgba(255, 255, 254, .5);

    & :where(.iconlist-title) {
      color: rgba(200, 130, 130, .5);
    }

    & ul li:before {
      color: #c88282;
    }
  }
}


/************************************
** テーブル
************************************/

/* ==================================== */
/* 2. Gridテーブルスタイル  */
/* ==================================== */

/* テーブル全体を囲むラッパー (横スクロール担当) */
.responsive-table {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  overflow-y: hidden;
}

/* Gridコンテナ*/
.grid-table {
  display: grid;
  grid-template-columns: 25% 40% auto auto;


  /* * 垂直方向の揃え (align-items) は指定しない
  * デフォルトの 'stretch' が適用され、
  * セルの高さが自動的に揃う
  */
  min-width: 600px;
  width: 100%;
  color: #4a4a4a;
}

/* Gridセル (旧 th, td) の基本スタイル */
.grid-cell {
  padding: 12px 24px;
  /* * 垂直方向の揃え (align-self) は指定しない
      * 親の 'stretch' 設定に従う
      */
  white-space: normal;
  word-break: break-word;
  border-bottom: 1px solid #e0e0e0;
}

/* データ行 (旧 tr) */
.grid-row {
  display: contents;
}

/* Link/Map列を中央揃え (旧 tbody td:nth-child) */
/* 4列サイクルの3番目と4番目を指定 */
.grid-cell:nth-of-type(4n-1),
/* 3番目 */
.grid-cell:nth-of-type(4n) {
  /* 4番目 */
  text-align: center;
}

/* 最終行のボーダーを削除 */
/* .grid-table の最後の .grid-row の中の .grid-cell */
.grid-table>.grid-row:last-of-type>.grid-cell {
  border-bottom: none;
}

/* ホバー効果 */
.grid-row:hover>.grid-cell {
  background-color: #f5f5f5;
}

/* セクション見出し (旧 tr.table-section-header と th[colspan="4"]) */
.grid-section-header {
  /* 親が4列Gridになったため、列を結合する設定 */
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--accent-color-dark);
  background-color: var(--accent-color-light);

  color: #4a4a4a;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  letter-spacing: 0.5px;
  text-align: left;
}

/* ==================================== */
/* 3. 装飾スタイル */
/* ==================================== */
.txt-deco--japan-flag::after {
  content: "●";
  color: #b01e41;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 0px 2px;
  margin-left: 8px;
  font-size: 8px;
  vertical-align: middle;
  font-family: sans-serif;
}


/* ==================================== */
/* 4. レスポンシブ対応 (セレクタ変更) */
/* ==================================== */
@media (max-width: 760px) {
  body {
    padding: 10px;
  }
  .grid-table {
    font-size: 13px;
  }
  .grid-cell {
    padding: 10px 16px;
  }
  .grid-section-header {
    font-size: 15px;
    padding: 10px 16px;
  }
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/************************************
**
************************************/
/* 基本のフォント設定（デモ用） */
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #fcfcfa;
  color: #333;
  /* padding: 1rem; */
}

@media (min-width: 768px) {
  body {
    padding: 2rem;
  }
}

.content-wrapper {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------- */
/* デザイン: タイムラインカード (最終修正版) */
/* ----------------------------------- */

/* コンテナのリセット */
.wp-block-cocoon-blocks-timeline.timeline-card {
  max-width: 600px;
  margin: 0 auto;
  border: none;
  padding: 0;
  overflow: visible;
  /* Cocoonのoverflow:autoを解除 */
}

/* 全体タイトルのスタイル */
.wp-block-cocoon-blocks-timeline.timeline-card .timeline-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2em;
  text-align: center;
  color: #5d5d5d;
  margin-bottom: 1.5em;
  font-weight: 600;
  /* 太さを指定 */
}

/* タイムライン（ul）のリセットと縦線の追加 */
.wp-block-cocoon-blocks-timeline.timeline-card .timeline {
  position: relative;
  padding: 1em 0;
  margin: 0;
}

.wp-block-cocoon-blocks-timeline.timeline-card .timeline::before {
  content: '';
  position: absolute;
  left: 0;
  /* 左端からの位置 */
  top: 0;
  height: 100%;
  width: 1px;
  background-color: #ddd;
}

/* 各項目（li）のリセットとスタイル */
.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item {
  position: relative;
  list-style: none;
  overflow: visible;
  /* Cocoonのoverflow:hiddenを解除 */
  margin: 0 0 1.5em 0;
  /* 下方向のマージンのみに修正 */
  padding: 0 0 0 30px !important;
  /* 左側の余白を確保 */
  border-left: none;
}

/* 各項目のドット（●）のスタイル */
.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item::before {
  content: '';
  position: absolute;
  left: -6px;
  /* Cocoonの105pxを上書き */
  top: 8px;
  /* Cocoonの24pxを上書き */
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ccc;
  transition: background-color 0.3s;
  z-index: 1;
}

.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item:hover::before {
  background-color: #333;
}

/* ラベルのスタイルリセット */
.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item-label {
  width: auto;
  /* Cocoonの固定幅を解除 */
  float: none;
  /* floatを解除 */
  padding: 0;
  /* paddingをリセット */
  text-align: left;
  /* text-alignをリセット */
  font-size: 0.8em;
  color: #999;
  margin-bottom: 0.5em;
  display: block;
}

.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item-label:empty {
  display: none;
}

/* コンテンツ部分のリセットとカードデザイン */
.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item-content {
  width: 100%;
  /* float解除に伴い幅を100%に */
  float: none;
  /* floatを解除 */
  border-left: none;
  /* Cocoonの左線を削除 */
  padding: 1em 1.5em;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s, transform 0.3s;
}

.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item:hover .timeline-item-content {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* タイトルとスニペットのスタイル */
.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
}

.wp-block-cocoon-blocks-timeline.timeline-card .timeline-item-snippet {
  font-size: 0.9em;
  color: #718096;
  line-height: 1.6;
  margin-top: 0.5em;
}



/* ----------------------------------- */
/* デザイン: timeline-minimal */
/* ----------------------------------- */

/* デモ用の基本設定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #fcfcfa;
  color: #333;
  /* padding: 1rem; */
}

/* @media (min-width: 768px) {
  body {
    padding: 2rem;
  }
} */

.content-wrapper {
  max-width: 56rem;
  /* 896px */
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------- */
/* デザイン: timeline-minimal */
/* ----------------------------------- */

/*
         * Cocoonのレスポンシブ用CSSと競合していたため、
         * !important を追加してデザイン指定を強制的に上書きし、安定性を確保しました。
        */

/* box-sizingを適用してレイアウト崩れを防ぐ */
.wp-block-cocoon-blocks-timeline.timeline-minimal *,
.wp-block-cocoon-blocks-timeline.timeline-minimal *::before,
.wp-block-cocoon-blocks-timeline.timeline-minimal *::after {
  box-sizing: border-box;
}

/* コンテナのリセットとスタイル */
.wp-block-cocoon-blocks-timeline.timeline-minimal {
  padding: 1.5em 0 !important;
  max-width: 650px;
  margin: 0 auto !important;
  border: none !important;
  overflow: visible !important;
}

/* 全体タイトルのスタイル */
.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-title {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #2D3748;
  margin-bottom: 1em;
}

/* タイムライン(ul)のリセットとスタイル */
.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline {
  border-left: 1px solid #e2e8f0 !important;
  padding-left: 15px !important;
  /* ★変更: 30pxから15pxへ */
  margin: 0 !important;
  list-style: none !important;
}

/* 各項目(li)のリセットとスタイル */
.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item {
  position: relative;
  padding-bottom: 2.5em;
  /* Cocoonのスタイルを完全にリセット */
  overflow: visible !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  border: none !important;
  /* ★追加: Cocoonのborder-leftを強制解除 */
}

.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item:last-child {
  padding-bottom: 0;
}

/* ドットのスタイル (★重要: !importantでテーマCSSを全て上書き) */
.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item::before {
  content: '' !important;
  position: absolute !important;
  left: -20px !important;
  /* ★変更: -35pxから-20pxへ */
  top: 6px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background-color: #CBD5E0 !important;
  border: none !important;
  transition: all 0.3s ease;
}

.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item:hover::before {
  transform: scale(1.8);
  background-color: #4A5568 !important;
}

/* ラベルのリセットとスタイル */
.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item-label {
  color: #718096;
  font-size: 0.85em;
  /* Cocoonのリセット */
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.5;
}

.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item-label:empty {
  display: none;
}

/* コンテンツ部分のリセット */
.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item-content {
  width: 100% !important;
  float: none !important;
  border-left: none !important;
  padding: 0 !important;
}

/* タイトルとスニペットのスタイル */
.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #2D3748;
  margin-top: 0.2em;
}

.wp-block-cocoon-blocks-timeline.timeline-minimal .timeline-item-snippet {
  margin-top: 0.5em;
  font-size: 0.9em;
  /* color: #718096; */
  line-height: 1.6;
}


/* ----------------------------------- */
/* テキストデコレーション */
/* ----------------------------------- */


.txt-deco--speech {
    font-size: .8em;
    text-align: center;
}
.txt-deco--speech::before,
.txt-deco--speech::after {
  font-size: .6em;
}
.txt-deco--speech::before {
  content: "＼";
  padding-right: 5px;
}
.txt-deco--speech::after {
  content: "／";
  padding-left: 5px;
}

/* 文字小さめ・グレー */
.txt-annotation, .txt-annotation a {
  color: #777;
  font-size: .8em;
}
.txt-smaller-gray, .txt-smaller-gray a {
  color: #777;
  font-size: .8em;
}


/* ----------------------------------- */
/* */
/* ----------------------------------- */


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

}

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

/*480px以下*/
@media screen and (max-width: 480px) {

  .toc {
    padding: .8em .4em;
  }

  .toc .toc-list {
    padding-left: 0;
  }

  .toc ol li {
    margin-left: 0;
  }

}