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

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


/***********************************************************
 * 0. 共通・全体のレイアウト（ベース設定）
 ***********************************************************/
/* サイト全体を包む基本の箱の制限を解除し、背景を左右いっぱいに広げる */
#container,
.site-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* メインコンテンツエリアの余白を一度ゼロリセット */
#content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 全体の基本背景色（さわやかなブルーグレー） */
body {
  background-color: #f0f2f5 !important;
}



/***********************************************************
 * 1. ヘッダー領域のスタイル
 ***********************************************************/
/* 【修正】ヘッダーの上部に20pxのゆったりした余白を確保し、画面最上部から少し引き下げます */
#header,
.header,
.header-in {
  background-color: #f0f2f5 !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;   /* 下からの引っ張りパワーでの変形を防止 */
  
  /* 【重要】上へのはみ出しを防ぎつつ、ロゴの上に心地よい余白（20px）を作ります */
  margin-top: 0 !important;
  top: 0 !important;
}

/* ヘッダー全体を縦並び・中央寄せにする（ここから下は既存のままです） */
.header-in {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-bottom: 0px !important; /* 上下にバランスよく余白を配置 */
}

/* ロゴのブランド枠 */
.custom-flex-logo-wrapper {
  max-width: 980px !important;
  margin: 0px auto 0 !important;
  padding: 20px 20px !important;
  width: 100% !important;
  display: flex !important;
}

.custom-brand-logo {
  display: block !important;
  margin: 0 !important;
}

.custom-brand-logo img {
  width: 720px !important;
  height: auto !important;
  display: block !important;
}

/* タイトル「お役立ちコラム」のテキスト装飾 */
.site-name-text {
  display: block !important;
  font-size: 32px !important;
  font-weight: bold !important;
  color: #3b3028 !important;
  text-align: center !important;
  width: 100% !important;
}

/* 不要なキャッチフレーズを非表示 */
.tagline {
  display: none !important;
}

/* 帯自体を画面の端から端まで100%広げます */
#navi,
.navi {
  background-color: #f0f2f5 !important; 
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

/* 中身の文字だけは、カード一覧と同じ「1020pxの枠内」に収めて中央寄せします */
.navi-in,
#navi .navi-in {
  background-color: transparent !important;
  max-width: 1020px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important; /* メニュー文字を中央寄せ（お好みで左寄せにもできます） */
}

/* 文字は白の太字でクッキリと */
#navi .navi-in a,
.navi-in a {
  color:  #3b3028 !important;
  font-weight: bold !important;
  font-size: 28px !important;
  padding: 12px 20px !important; /* 帯の中で綺麗に見える上下左右の余白 */
  transition: all 0.3s ease !important;
}

/* マウスを乗せたときは、少し濃いグレーに染まる */
#navi .navi-in a:hover,
.navi-in a:hover {
  background-color: #5d6e7e !important;
  color: #ffffff !important;
}


/***********************************************************
 * 2. メインコンテンツ領域（記事カード設定）
 ***********************************************************/
/* 大箱を広げた代わりに、記事カードの表示エリア（メイン枠）を1020pxに固定して中央寄せ */
#main {#f0f2f5 
  max-width: 1020px !important;
  margin: 0 auto !important;
  width: 100% !important;
  background-color: #f0f2f5 !important;
}

/* 記事カードの一覧を「強制的に3列横並び」にする */
#main .list,
#main .cards,
#main .entry-cards,
#main .list.cards,
.main .list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  width: 100% !important;
}

/* カードが横に広がろうとするのを防ぐ */
#main .entry-card-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* 記事カード個別の調整（枠線を消して影・角丸をつける） */
.entry-card-wrap {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex !important;
  flex-direction: column !important;
  text-align: center;
}

/* 記事カードをホバーしたときの動き（少し浮かせる） */
.entry-card-wrap:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}


/***********************************************************
 * 3. フッター領域のスタイル
 ***********************************************************/
/* 1. フッター全体の背景色（上品なグレー）・サイズ感・位置基準の設定 */
#footer,
.footer,
.footer-bottom {
  background-color: #7D8E9E !important;
  border: none !important;
  margin-bottom: 0 !important;
  padding: 20px 0 60px 0 !important;    
  position: relative !important; /* コピーライト中央配置の基準線 */
}

/* フッターメニューに関わるすべての枠を「右寄せ＆縦並び」にする */
.navi-footer,
.navi-footer-in,
.menu-footer,
#menu-footer,
.footer-container ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 1020px !important;
  margin: 0 auto !important;
  list-style: none !important;
  padding: 0 !important;
}

/* メニューのリスト（liタグ）自体が横並びを主張するのを防ぐ */
.navi-footer li,
.menu-footer li,
.footer-container li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

/* 2. 左側に出現する隠れサイト名・隠れロゴを完全にシャットアウト */
.footer-logo,
.footer-container .site-name,
.footer-bottom .site-name,
.footer-logo-inside,
.footer-logo img,
#footer #logo,
#footer .site-name,
#footer .logo {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. コピーライトの文字（完全中央寄せ 20px） */
.copyright {
  font-size: 0 !important;
  position: absolute !important;
  bottom: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  margin: 0 !important;
  text-align: center !important;
}

.copyright::after {
  content: "© 2025-IRIDE-CS" !important;
  font-size: 20px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 4. フッターメニューの文字リンク装飾（文字を大きく・太くクッキリ化） */
.footer-container a,
.footer-bottom-in a,
#footer a,
.navi-footer-in a,
.menu-footer a {
  font-size: 16px !important;
  font-weight: bold !important;
  color: rgba(255, 255, 255, 0.95) !important; 
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 4px 0 !important;
  display: inline-block !important;
}

/* フッターメニューのホバー時 */
.footer-container a:hover,
.footer-bottom-in a:hover,
#footer a:hover,
.navi-footer-in a:hover,
.menu-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* 5. フッター内側の不要な背景・影・縦線を完全にリセット */
.footer-container,
.footer-bottom-in {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.footer-container li,
.navi-footer li,
.menu-footer li {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
}

.footer-container li::before,
.footer-container li::after,
.navi-footer li::before,
.navi-footer li::after,
.menu-footer li::before,
.menu-footer li::after,
.navi-footer-in a::before,
.navi-footer-in a::after {
  content: none !important;
  border: none !important;
  display: none !important;
}

/* 6. サイト最下部のわずかな白い隙間＆画面縮小時のフッター浮きを完全に防ぐ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  
  /* 【重要】画面全体の高さを基準にし、中身が少なくても最低100%の高さを持たせます */
  height: 100% !important;
}

/* サイト全体を包む箱に、上下の引っ張り合いを持たせる設定 */
#container,
.site-container {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important; /* 画面全体の高さを最低保証する魔法の命令 */
}

/* 真ん中のコンテンツエリア（#content）が残りの高さをすべて使い切るように引き伸ばす */
#content {
  flex: 1 0 auto !important; /* これにより、フッターが自動的に画面の一番下まで押し下げられます */
}

/* フッター自体は一番下に固定されつつ、下側のマージンをリセット */
#footer,
.footer,
.footer-bottom {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important; /* フッターが必要以上に潰れるのを防ぐ */
}


/***********************************************************
 * 4. コンポーネントスキン（アクセント版：爽快ブルー）
 ***********************************************************/
/* ■ カテゴリータグ（深みのある爽快なブルー） */
.entry-card-wrap .cat-label,
#main .entry-card-wrap .cat-label {
  background-color: #3182ce !important; 
  color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* カテゴリータグ：ホバー時 */
.entry-card-wrap:hover .cat-label,
#main .entry-card-wrap:hover .cat-label {
  background-color: #2b6cb0 !important; 
}

/* ■ ページネーション：「次のページ」ボタン */
.pagination-next-link,
#main .pagination-next-link {
  border-color: #3182ce !important; 
  color: #2b6cb0 !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

/* 「次のページ」ボタン：ホバー時 */
.pagination-next-link:hover,
#main .pagination-next-link:hover {
  background-color: #3182ce !important; 
  color: #ffffff !important;
  border-color: #3182ce !important;
}

/* ■ ページネーション：下の数字ナビ（1, 2, ＞） */
.page-numbers,
#main .page-numbers {
  border-color: #cbd5e0 !important; /* 通常時の枠は落ち着いた薄グレー */
  color: #4a5568 !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
}

/* 現在地のアクティブな数字ボタン */
.page-numbers.current,
#main .page-numbers.current {
  background-color: #3182ce !important; 
  border-color: #3182ce !important;
  color: #ffffff !important;
}

/* 数字ナビ：ホバー時 */
.page-numbers:not(.current):hover,
#main .page-numbers:not(.current):hover {
  background-color: #ebf8ff !important; /* ほんのり爽やかな超薄いブルー */
  color: #2b6cb0 !important;
  border-color: #3182ce !important;
}

/* 記事本文の背景を白くし、角を丸くして浮き上がらせる */
.main .article {
  background-color: #ffffff !important;
  border-radius: 12px; /* 角を少し丸くする */
  padding: 30px;       /* 内側に少し余白を作る */
}

/* 記事上のアイキャッチ画像を中央寄せ＆巨大化防止 */
.eye-catch {
  display: flex !important;
  justify-content: center !important; /* 確実に中央に寄せる */
  margin-bottom: 30px !important;     /* 下の記事本文との間に心地よい隙間を作る */
  background: none !important;
}

.eye-catch img {
  display: block !important;
  width: 100% !important;            /* 横幅は記事の白いエリアいっぱいに広げる */
  max-width: 800px !important;       /* ★大きすぎる画像も、最大横幅800pxでストップさせる */
  height: auto !important;
  max-height: 400px !important;      /* ★縦に巨大すぎる画像も、最大縦幅400pxで綺麗に切り取る */
  object-fit: cover !important;      /* 縦横比を崩さずに映画のスクリーンのように美しく収める */
  border-radius: 8px !important;     /* 角を少し丸くして優しい印象にする */
}


/***********************************************************
 * 5. レスポンシブデザイン（スマホ・タブレット用）
 ***********************************************************/
/* 1023px以下：スマホ表示でのロゴ調整 */
@media screen and (max-width: 1023px) {
  .custom-flex-logo-wrapper {
    justify-content: center !important; 
    margin: 20px auto !important;
  }
  .custom-brand-logo img {
    width: 280px !important;
  }
}

/* 480px以下：スマホでのロゴとカード隙間の調整 */
@media (max-width: 480px) {
  .site-logo-inside {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 360 / 80;
  }
  .list, .cards, .entry-cards, #main .list {
    gap: 20px !important;
  }
}