@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 ここから */

/* 投稿（post）のみ表示、固定ページ（page）は非表示 */
.page .date-tags {
  display: none !important;
}

/* 日付を左寄せにする */
.date-tags {
  text-align: left !important;
  justify-content: flex-start !important;
  display: flex;
}

/* --- Cocoonサブメニューの文字切れ完全対策 + hover安定化バージョン --- */

/* メインメニューの各項目に相対位置を設定 */
#navi li.menu-item {
  position: relative !important;
}

/* メインメニューの文字サイズを強制的に変更 */
#navi .menu-header .menu li.menu-item > a,
#navi ul.menu > li > a,
#navi li.menu-item > a {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* サブメニュー：親メニューの真下にぴったり表示、スキマなしでhoverが切れないように */
#navi ul.sub-menu {
  position: absolute !important;
  top: 100% !important; /* 隙間をなくす */
  left: 0 !important;
  z-index: 1000 !important;
  min-width: 320px !important;
  width: auto !important;
  max-width: none !important;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* サブメニューのリンク部分 */
#navi ul.sub-menu li a {
  font-size: 13px !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  width: auto !important;
  max-width: none !important;
  line-height: 1.5 !important;
  padding: 10px 16px !important;
  word-break: break-word !important;
}

/* 子→孫メニューにも対応（サブサブメニュー） */
#navi ul.sub-menu ul.sub-menu li a {
  min-width: 320px !important;
  width: auto !important;
}

/* 第2階層は右に展開 */
#navi ul.sub-menu ul.sub-menu {
  top: 0 !important;
  left: 100% !important;
  margin-left: -1px;
}

/* --- 文頭に文字表示　ulタグの各項目の文頭に矢印の絵文字を表示 --- */

ul.triangle-r {
  list-style: none; /* デフォルトの箇条書きスタイルを無効化 */
  padding-left: 0;
}

ul.triangle-r li::before {
  content: "➡"; /* ➡を表示 */
  color: #e95464; /* 色を変更 */
  margin-right: 8px; /* 絵文字とテキストの間隔 */
}
/* --- 文頭に文字表示　ulタグの各項目の文頭に矢印の絵文字を表示ここまで --- */

/* 全体ラッパー：背景を画面いっぱいに */
.contact-wrapper {
  background: #1b264f;
  color: white;
  padding: 40px 0;
  border-top: none;
}

/* セクション本体：中央寄せ、余白あり */
.contact-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

/* 左側：テキストとバナー */
.contact-left {
  flex: 1 1 60%;
  min-width: 300px;
}

.contact-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 0;
}

.contact-banners {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.contact-banners a {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

.contact-banners a img {
  display: block;
  height: 40px;
  width: auto;
}

/* 右側：ボタン */
.contact-right {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.contact-btn {
  background: #00c2dc;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.contact-btn:hover {
  color: white; /* ← お好きな色に変更可能 */
  background: #009fb8; /* ← 背景も少し変えるならこちらも */
  text-decoration: none;
}

/* 謎の白線対策（footerとの余白やborder防止） */
footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.wp-block-flexible-table-block-table table {
  font-size: 15px;
}

/* --- 文字を囲むCSS --- */
.attentiongray {
  border: 2px solid #ccc;       /* 枠線の色と太さ */
  padding: 16px;                /* 内側の余白 */
  margin: 20px 0;               /* 上下の余白 */
  background-color: #f9f9f9;    /* 背景色 */
  border-radius: 8px;           /* 角を丸くする */
  font-size: 16px;              /* 文字サイズ */
  line-height: 1.6;             /* 行間 */
}

/* --- 文字を囲むCSSここまで --- */

/* NO IMAGE画像を非表示に */
img.no-image.post-navi-no-image {
  display: none !important;
}

/* 画像の親要素ごと非表示に（←余白の原因） */
figure.prev-post-thumb.card-thumb {
  display: none !important;
}

.anchor-offset::before {
  content: "";
  display: block;
  height: 60px;           /* Cocoonの固定ヘッダーの正確な高さ */
  margin-top: -60px;      /* heightと同じ値に */
  visibility: hidden;
}

/* 初期は非表示にする */
#navi ul.sub-menu {
  display: none !important;
}

/* 親メニューにホバーしたら表示する */
#navi li.menu-item:hover > ul.sub-menu {
  display: block !important;
}

/* ヘッダーメニューの矢印の強制非表示(ページスクロールすると消えるため) */
#navi .fa-angle-down,
#navi .fa.fa-angle-down,
.fixed-menu #navi .fa-angle-down,
.fixed-menu #navi .fa.fa-angle-down {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 検索結果のアイキャッチ画像（NO IMAGE）を非表示にし、スペースも除去 */
.entry-card-thumb,
.entry-card .no-image {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 検索結果のテキスト領域を幅100%に拡張 */
.entry-card-content {
  width: 100% !important;
}

/* 検索結果にアクセス数などの投稿メタ情報を非表示に */
.entry-card .post-meta {
  display: none !important;
}

/* 検索結果のアイキャッチ画像（NO IMAGE）を非表示にしたとき、レイアウトを左詰めに修正 */
.entry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.entry-card-content {
  width: 100% !important;
  margin-left: 0 !important;
}

/* 短いページにスクロールバーを強制表示(レイアウト崩れ防止のため) */
body.page-id-1557,
body.page-id-1826,
body.page-id-1808,
body.page-id-16430,
body.page-id-17639,
body.page-id-17872,
body.page-id-32059 {
  overflow-y: scroll !important;
  padding-right: 0 !important;
}

/* 検索結果ページの固定ページに表示される日付を非表示 */
.search .page .entry-date,
.search .page .post-date,
.search .page .date-tags {
  display: none !important;
}

/* 追加 CSS ここまで */

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

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

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