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

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

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

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

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



/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

/* ウィジェットカード設定（Grid）---------------------------------------------- */

/* カード内の画像リンク最大幅を600pxに制限（横幅100%で拡縮対応） */
[class*="is-style-column-"] .widget-entry-cards.card-large-image .a-wrap {
   max-width: 600px;
   width: 100%;
}

/* 大きなサムネイル画像を中央寄せ */
[class*="is-style-column-"] .widget-entry-cards.large-thumb {
   justify-items: center; /* Gridのアイテムを水平方向に中央配置 */
}

/* 各カラム数に応じたグリッド表示 */
[class*="is-style-column-2"] .widget-entry-cards,
[class*="is-style-column-3"] .widget-entry-cards,
[class*="is-style-column-4"] .widget-entry-cards {
   display: grid;
}

/* 2カラム表示 */
[class*="is-style-column-2"] .widget-entry-cards {
   grid-template-columns: repeat(2, 1fr);
}

/* 3カラム表示 */
[class*="is-style-column-3"] .widget-entry-cards {
   grid-template-columns: repeat(3, 1fr);
}

/* 4カラム表示 */
[class*="is-style-column-4"] .widget-entry-cards {
   grid-template-columns: repeat(4, 1fr);
}

/* モバイル用レスポンシブ設定 */
@media (max-width: 768px) {
   /* column-x-1系：モバイルでは1列 */
   :is(.is-style-column-2-1, .is-style-column-3-1, .is-style-column-4-1) .widget-entry-cards {
   grid-template-columns: 1fr;
   }

   /* column-x-2系：モバイルでは2列 */
   :is(.is-style-column-3-2, .is-style-column-4-2) .widget-entry-cards {
   grid-template-columns: repeat(2, 1fr);
   }
}


/* ======================================================
   Custom CSS (moved from Additional CSS)
====================================================== */

/* ======================================================
   1. ヘッダー関連（PC／スマホ共通）
====================================================== */

/* ヘッダーの上下余白 */
.header-container {
  padding: 5px 0;
}

/* モバイル：ロゴの高さ制限 */
.logo-menu-button img {
  max-height: 40px;
}

/* モバイルメニューボタン背景 */
.mobile-menu-buttons {
  background-color: rgba(255 255 255 / 70%);
}

/* 初期ヘッダー透過 */
.header-container,
.navi {
  background: transparent;
  position: relative;
  z-index: 2;
}

/* ロゴを最前面に */
.header-container .site-logo-img,
.header-container .logo img,
.header-container .site-logo-image {
  position: relative;
  z-index: 3 !important;
}

/* スクロール後ヘッダー */
.header-container.fixed-header {
  background-color: rgba(255 255 255 / 35%) !important;
}


/* ======================================================
   2. カバーブロック（背景をヘッダー裏まで伸ばす）
====================================================== */

.wp-block-cover.cover-hero {
  position: relative;
  margin-top: -60px;
  padding-top: 60px;
  z-index: 0;
}

.wp-block-cover.cover-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}


/* ======================================================
   3. リンク装飾
====================================================== */

a {
  text-decoration: none;
}


/* ======================================================
   4. Cocoonウィジェットの日付
====================================================== */

/* 更新日を非表示 */
.widget-entry-card-update-date {
  display: none;
}

/* 投稿日・更新日 */
.widget-entry-card-date {
  display: block;
  text-align: right;
}


/* ======================================================
   5. 記事デザイン（h2 / h3）
====================================================== */

/* Cocoon見出しのリセット */
.article h2,
.article h3 {
  background: none;
  border: none;
  border-radius: 0;
}

/* 記事 h2 */
.entry-content h2 {
  background-color: #f7f7f7;
}

/* 記事 h3 */
.entry-content h3 {
  position: relative;
  margin-left: 0;
  padding-left: 0;
  overflow: hidden;
}

/* 二重ライン */
.entry-content h3:before,
.entry-content h3:after {
  position: absolute;
  width: 100%;
  bottom: 0;
  content: "";
}

.entry-content h3:before {
  border-bottom: 1px solid #C0C0C0;
}

.entry-content h3:after {
  border-bottom: 1px solid #EEEEEE;
}


/* ======================================================
   6. 投稿ページレイアウト
====================================================== */

.single #main {
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}


/* ======================================================
   7. Cocoonボタンデザイン
====================================================== */

.btn,
.button,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
[class*="btn-"] {
  border-width: 1px !important;
  font-weight: 400 !important;
}


/* ======================================================
   8. モバイルメニュー（文字／色／閉じるボタン）
====================================================== */

/* メニュー文字の置き換え */
.mobile-menu-buttons .navi-menu-caption,
.mobile-menu-buttons .search-menu-caption {
  font-size: 0 !important;
}

.mobile-menu-buttons .navi-menu-caption::after {
  content: "menu";
  font-size: 10px;
}

.mobile-menu-buttons .search-menu-caption::after {
  content: "search";
  font-size: 10px;
}

/* モバイルメニュー内の文字色を統一 */
.mobile-menu-buttons * {
  color: #545555 !important;
}

/* 閉じるボタン位置調整 */
.menu-close-button {
  padding: 15px 0 30px 25px;
  text-align: left;
  font-size: 1.3em;
}

/* モバイルメニュー背景色 */
.navi-menu-content {
  background-color: rgba(255 255 255 / 90%);
}