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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/******************************固定ページカスタマイズ******************************/
/*固定ページのタイトルを非表示*/
.home.page .entry-title{ display: none; }
/*固定ページのシェアボタンを非表示*/
.sns-share{ display: none; }
/*固定ページの投稿日を非表示*/
.home.page .post-date{ display: none; }
/*固定ページの更新日を非表示*/
.home.page .post-update{ display: none; } 
/*固定ページの投稿者名を非表示*/
.author-info{ display: none; }
/*固定ページのタイトルテキストの見た目調整*/
.page .entry-title {
  font-size: clamp(28px, 5vw, 40px);
  text-align: center;
  color: #fff;
  margin: 60px 0 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
/*固定ページの更新日を非表示*/
.page .date-tags,
.page .author-info {
    display: none;
}

/******************************ヘッダーカスタマイズ******************************/
/*ロゴの余白*/
header#header {
  margin-top: 20px;
	margin-bottom: 20px;
}

/*グロナビSNSリンク設定*/
.sns-icon-ig a {
    text-indent: -9999px; 
    display: block;
    width: 30px;
    height: 30px;
    padding: 0; 
    margin: 12px;
    background-image: url("http://mainichipanko.site/wp-content/uploads/2025/10/Instagram_Glyph_White-scaled.png");
    background-size: contain;
	  background-repeat: no-repeat;
	  background-position: center center;
}

.sns-icon-x a {
    text-indent: -9999px; 
    display: block;
    width: 30px;
    height: 30px;
    padding: 0; 
    margin: 12px;
    background-image: url("http://mainichipanko.site/wp-content/uploads/2025/10/logo-white.png");
    background-size: contain;
	  background-repeat: no-repeat;
	  background-position: center center;
}

/*モバイル版メニューテキスト削除*/
.mobile-menu-buttons .menu-caption {
    display: none;
}

/*モバイル版メニュー背景指定*/
.mobile-menu-buttons {
    background: #e08a82;
    box-shadow: none;
}

/*モバイル版ハンバーガーメニュー色変更*/
.menu-icon {
  color: #fff;
}

/*モバイル版メニューロゴ調整*/
.mobile-menu-buttons img {
  display: block;
  width: 150px;
}

/*ヘッダー画像調整*/
/* PCの場合 */
.headerPC	{ display:inline!important; }
.headerSP	{ display:none!important; }

@media screen and (max-width: 768px) {
  /* タブレット、スマホの場合 */
  .headerPC	{ display:none!important; }
  .headerSP { display:inline!important; }
}

/******************************カラーカスタマイズ******************************/
/*背景色を透明にする*/
 #main {
  background-color: transparent;
  box-shadow: none;
  border: none;
}

/*記事ページのみ背景色を反映*/
.single-post #main,
.single-post #main article,
.single-post .entry-content,
.single-post .post {
  background-color: #ffffff !important;
  border-radius: 15px;
  padding: 20px;
}

/******************************挙動カスタマイズ******************************/
/*ホバー時にふんわりアップする*/
a,
button,
a img,
.card {
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

a:hover,
button:hover,
a:hover img,
.card:hover {
  transform: scale(1.04);
}

img {
  transform: none !important;
  transition: none !important;
}

/******************************記事カードカスタマイズ******************************/
/*カード全体をまとめてクリックできるように*/
.wp-block-latest-posts a,
.wp-block-latest-posts img {
  transform: none !important;
  transition: none !important;
}

/*背景*/
.wp-block-latest-posts__list li {
  background: #fff;
	border-radius: 15px;
  overflow: hidden;
  padding: 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/*ホバー時の挙動*/
.wp-block-latest-posts__list li:hover {
  transform: scale(1.04);
}

/*テキストの見た目調整*/
.wp-block-latest-posts__list a {
  display: block;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.25s ease;
  padding: 0;
}

.wp-block-latest-posts__list .wp-block-latest-posts__post-title {
  padding: 0 1rem 0;
}

.wp-block-latest-posts__list li:hover a {
  color: #e85b5b;
}

/*日付の見た目調整*/
.wp-block-latest-posts__post-date {
  display: block;
  padding: 0 1rem 1rem;
  font-size: 0.85rem;
  color: #999;
}

/******************************カテゴリタブ＆ページネーションカスタマイズ******************************/
/* ==============================================
   【修正版v3】カード型デザイン（フォント・ホバー調整）
   ============================================== */

/* コンテナ全体 */
.custom-tab-container {
    max-width: 100%;
    margin: 40px 0;
    /* フォント指定を削除（サイトのデフォルトに従う） */
}

/* ----------------------------------
   タブボタンエリア
---------------------------------- */
ul.custom-tab-nav {
    display: flex !important;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
    list-style: none !important;
}

ul.custom-tab-nav li.custom-tab-btn {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 25px;
    border: 1px solid #333;
    border-radius: 50px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

/* ホバー時 */
ul.custom-tab-nav li.custom-tab-btn:hover {
    background: #f0f0f0;
}

/* 選択中 */
ul.custom-tab-nav li.custom-tab-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* ----------------------------------
   記事表示エリア（フェードイン）
---------------------------------- */
.custom-tab-pane {
    display: none;
    animation: fadeInGrid 0.6s ease;
}
.custom-tab-pane.active {
    display: block;
}

@keyframes fadeInGrid {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------
   3列カードグリッドデザイン
---------------------------------- */
ul.custom-tab-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 30px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* リストアイテム単体 */
li.custom-grid-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
li.custom-grid-item:before,
li.custom-grid-item:after {
    display: none !important;
}

/* カード本体 */
li.custom-grid-item a {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;    /* 角丸 */
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
    /* 独自のbox-shadowやtransformは削除（サイト設定に従う） */
    transition: color 0.3s; /* 文字色の変化だけなめらかに */
}

/* ★ホバー時にタイトルを赤くする */
li.custom-grid-item a:hover .custom-grid-title {
    color: #e85b5b !important;
}

/* 画像（縦長） */
.custom-grid-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f4f4f4;
    position: relative;
}
.custom-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

/* テキストエリア */
.custom-grid-meta {
    padding: 20px 25px;
    flex-grow: 1; /* 下部を揃えるために伸ばす */
    display: flex;
    flex-direction: column; /* 縦並び */
}

/* タイトル（上部） */
.custom-grid-title {
    margin: 0 0 15px 0 !important; /* 日付との間に余白 */
    padding: 0 !important;
    font-size: 16px;
    line-height: 1.6;
    font-weight: bold;
    color: #333; /* 通常時は黒系 */
    border: none !important;
    transition: color 0.3s;
}

/* 日付（下部） */
.custom-grid-date {
    margin-top: auto; /* ★これで必ず一番下に配置されます */
    font-size: 13px;
    color: #aaa;      /* 日付はグレー */
}

/* ----------------------------------
   ページネーション
---------------------------------- */
.custom-pagination-box {
    margin-top: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.custom-pagination-box button {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}
.custom-pagination-box button:hover {
    background: #f5f5f5;
}
.custom-pagination-box button.active {
    background: #333;
    color: #fff;
    border-color: #333;
    pointer-events: none;
}

/* ----------------------------------
   レスポンシブ
---------------------------------- */
@media screen and (max-width: 1024px) {
    ul.custom-tab-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 600px) {
    ul.custom-tab-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}