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

/************************************
** 子テーマ用のスタイルを書く
************************************/

body {
    overflow-x: hidden !important;
}

/* --------------------------------------------------
 * 元のWPテーブルHTMLをそのまま使えるようにするCSS
 * -------------------------------------------------- */

/* 1. 外側のfigureタグに対して横スクロールを適用 */
.wp-block-table {
    /* これがモバイルで横スクロールを可能にする最重要設定 */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    margin: 1.5em 0; /* 上下の余白調整（任意） */
}

/* 2. table要素内のセルが折り返さないように強制 */
/* has-fixed-layoutを無視し、内容に応じて横幅を広げるように設定 */
.wp-block-table table.has-fixed-layout {
    /* セル内のテキストが2行以上にならないようにする最重要設定 */
    white-space: nowrap; 
    
    /* has-fixed-layoutを上書きし、幅を内容に合わせて自動調整させる */
    table-layout: auto !important; 
    
    /* モバイル画面幅をはみ出すよう最低幅を設定（スクロールのきっかけになる） */
    min-width: 900px; 
    
    width: auto !important; /* 幅を自動調整に戻す */
    border-collapse: collapse;
}

/* 3. 各セルの見栄え調整（任意） */
.wp-block-table th,
.wp-block-table td {
    padding: 10px 15px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box; 
    /* 費用や期間など、短いデータが入るセルに対して最小幅を設定 */
    min-width: 120px; 
}

/* ヘッダーの背景色（is-style-regularに基づき調整） */
.wp-block-table.is-style-regular thead th {
    background-color: #f7f7f7;
    font-weight: bold;
}

/* ===== H4 見出しリセット＆装飾 ===== */
h4 {
  all: unset; /* Cocoonやブラウザのデフォルトスタイルをリセット */
  display: block;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.4;
  color: #101828;
  position: relative;
  padding: 0.25em 0;
  margin: 1.5em 0 0.75em;
}

h4::after {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(to right, #101828, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}




h2 {
  /* ---- リセット ---- */
  all: unset;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  /* ---- デザイン ---- */
  --baloon-color: #101828;
  background: var(--baloon-color);
  color: #fff;
  position: relative;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;

  /* 下の余白を追加（吹き出し＋次の要素の間） */
  margin-bottom: 2rem;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 1.5em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: var(--baloon-color) transparent transparent transparent;
}

/* テーマ干渉が強い場合の保険 */
h2 {
  all: unset !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 0 2rem 0 !important; /* 下マージンを確保 */
  padding: 1rem 2rem !important;
  background: #101828 !important;
  color: #fff !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  position: relative !important;
  border-radius: 6px !important;
}

h3 {
  /* --- 既存テーマ・ブラウザのスタイルをリセット --- */
  all: unset;
  display: block;
  box-sizing: border-box;

  /* --- 独自デザイン --- */
  border-left: solid 5px #101828; /* 左線 */
  padding: 0.6rem 1rem; /* 内側余白 */
  color: #333; /* 文字色 */
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.5;
  background: #fff; /* 背景が必要なら追加 */
  margin: 1.5rem 0; /* 上下余白 */
}

/* テーマ干渉が強い場合の保険 */
h3 {
  all: unset !important;
  display: block !important;
  box-sizing: border-box !important;
  border-left: solid 5px #101828 !important;
  padding: 0.6rem 1rem !important;
  color: #333 !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  margin: 1.5rem 0 !important;
  background: #fff !important;
}

.e-card-title {
  /* --- リセット --- */
  all: unset;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  /* --- デザイン（控えめでシンプル） --- */
  font-size: 16px; /* PC */
  font-weight: bold;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
  background: none;
}

/* --- スマホ調整 --- */
@media screen and (max-width: 767px) {
  .e-card-title {
    font-size: 14px;
  }
}

/* --- テーマ干渉が強い場合の保険 --- */
.e-card-title {
  all: unset !important;
  display: block !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1.6 !important;
  color: #333 !important;
  margin: 0 0 1rem 0 !important;
  background: none !important;
}
@media screen and (max-width: 767px) {
  .e-card-title {
    font-size: 14px !important;
  }
}
.widget_toc {
  max-height: 800px; /* 目次の最大高さを指定 */
  overflow-y: auto;  /* 縦スクロールバーを自動表示 */
}


/* ===== Cocoon カルーセル完全カスタマイズ（余白調整版） ===== */

/* 親要素のはみ出し防止を解除（全幅対応） */
.wrap,
#content,
#main,
.entry-content {
  overflow: visible !important;
}

/* カルーセルを全幅表示 */
.carousel {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  box-sizing: border-box;
  margin-top: 30px !important;
}

/* slick内部もフルに伸ばす */
.carousel .slick-list {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* スマホ時は中央寄せ */
@media (max-width: 768px) {
  .carousel {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===== カルーセル中身 ===== */
#carousel {
  margin-top: 20px !important;
  margin-bottom: 60px !important; /* 余白拡大 */
}

/* slick内のスライド間の余白を確実に確保 */
#carousel .slick-track {
  display: flex !important;
  gap: 24px !important; /* ✅ コンテンツ間の余白を確実に設定 */
}

#carousel .slick-slide {
  padding: 0 !important;
  box-sizing: border-box;
  height: auto !important;
}

/* すべてのカードを統一 */
#carousel .carousel-entry-card {
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: center center;
  transition: transform 0.2s ease;
  height: 100% !important;
}

/* 画像 */
#carousel .carousel-entry-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
}

#carousel .carousel-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル */
#carousel .carousel-entry-card-title {
  display: block !important;
  font-weight: 700 !important;
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
  color: #333;
  line-height: 1.4;
}

/* タグ等を非表示 */
#carousel .cat-label,
#carousel .carousel-entry-card-meta,
#carousel .carousel-entry-card .entry-card-content,
#carousel .carousel-entry-card .entry-card-snippet {
  display: none !important;
}

/* ナビゲーション非表示 */
#carousel .slick-dots,
#carousel .slick-prev,
#carousel .slick-next {
  display: none !important;
}

/* ===== スマホ専用設定 ===== */
@media (max-width: 768px) {
  /* スライドの幅を調整して1.5個表示 */
  #carousel .slick-slide {
    width: 70vw !important; /* 画面幅の70%で1.5個見える感じに */
  }
  
  /* スマホではタイトルを非表示 */
  #carousel .carousel-entry-card-title {
    display: none !important;
  }
  
  /* 画像のサイズ調整 */
  #carousel .carousel-entry-card-thumb {
    border-radius: 8px; /* 少し小さめの角丸 */
  }
  
  /* スライド間の余白をスマホ用に調整 */
  #carousel .slick-track {
    gap: 16px !important; /* スマホでは少し狭く */
  }
}

/* ===== Cocoon カルーセル下余白 完全除去 ===== */
/* カルーセル自体の余白 */
#carousel {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* slick構造内の余白 */
.carousel,
.carousel .slick-list,
.carousel .slick-track,
.carousel .slick-slide {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Cocoon本体がつけているコンテンツ間の余白を削除 */
.article,
.main,
.section,
.entry-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* カルーセルの直後に来るブロックの上余白も削除 */
#carousel + *,
.carousel + *,
.carousel + .section,
#carousel + .section,
#carousel + .main,
#carousel + .article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 下の要素が.section-wrapなどで囲まれている場合 */
.section-wrap,
.article .section-wrap,
.main .section-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* フッター直前のスペースまで完全削除したい場合 */
footer,
#footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}