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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* iPhone メインビジュアル修正 */
@media (max-width: 768px) {
  body.custom-background {
    background-position: center -30px !important;
    background-size: contain !important;
  }
}

/* デスクトップ：ヘッダー背景画像を上にシフト（人物を上部に表示） */
@media (min-width: 769px) {
  body.custom-background {
    background-position: center -220px !important;
  }
}


/* アピールエリア：背景画像の位置調整（全画面でも人物が切れないように） */
.appeal {
  background-position: center top !important;
}

/* ===== アピールエリア調整 ===== */
/* キャッチフレーズの下余白を削除 */
.appeal-message { margin: 0 !important; }
/* タブレット・PC: キャッチフレーズを画像下端に重ねる */
@media screen and (min-width: 768px) {
  .appeal .appeal-in {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
  }
  .appeal-content {
    background: rgba(255,255,255,0.85);
    margin-bottom: 14px;
    padding: 7px 24px;
    border-radius: 24px;
    width: auto;
  }
  .appeal-message {
    color: #333333;
    text-shadow: none;
  }
}
/* ワイド画面: 高さを画面幅に連動+文字を大きく */
@media screen and (min-width: 1024px) {
  .appeal {
    background-image: url(https://popopoam.com/wp-content/uploads/2026/07/appeal_light_pc_v4.jpg) !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: #faf2f0 !important;
    height: 26vw !important;
    max-height: 430px;
  }
  .appeal-message { }
  /* キャッチフレーズを少し下げる */
  .appeal-content { margin-bottom: -18px !important; }
}
/* スマホ: 画像全体を表示し、キャッチフレーズを画像下端に重ねる */
@media screen and (max-width: 767px) {
  .appeal {
    height: 46.7vw !important;
    min-height: 0 !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
  .appeal .appeal-in {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-height: 0 !important;
    padding: 0;
  }
  .appeal-content {
    background: rgba(255,255,255,0.85);
    margin: 0 10px 6px;
    padding: 3px 12px;
    border-radius: 16px;
    width: auto;
  }
  .appeal-message {
    color: #333333;
    text-shadow: none;
  }
}

/* モバイルでもサイドバー（プロフィール等）を本文下に表示 */
@media screen and (max-width: 1023px) {
  body.no-mobile-sidebar #sidebar {
    display: block !important;
    width: 100%;
    padding: 0 10px;
  }
}

/* 画像キャプション: 画像直下に寄せて小さく表示 */
.entry-content .wp-block-image img {
  margin-bottom: 0 !important;
}
.entry-content .wp-block-image figcaption {
  margin-top: 0.4em;
  margin-bottom: 0;
  font-size: 13px;
  color: #777777;
  text-align: center;
  line-height: 1.5;
}

/* ===== トップページ カテゴリーボタン ===== */
/* PC: 4列横並び / スマホ: 2列 */
.cat-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 auto 26px;
  max-width: 1100px;
  padding: 0 4px;
}
.cat-buttons .cat-btn {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-buttons .cat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.cat-buttons .cat-btn img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
@media screen and (max-width: 767px) {
  .cat-buttons {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 20px;
  }
  .cat-buttons .cat-btn,
  .cat-buttons .cat-btn img { border-radius: 11px; }
}



/* ===== ヘッダーメニュー(PC): 区切り線＋下線 ===== */
/* 項目間の区切り線 */
#navi .menu-pc > li + li {
  border-left: 1px solid #e6e6e6;
}
/* 各項目に常時うっすら下線 → 「押せる」ことが常に分かる */
#navi .menu-pc > li > a {
  border-bottom: 3px solid #ececec;
  transition: border-color .2s ease, background-color .2s ease;
}
/* ホバー時は濃いティールに */
#navi .menu-pc > li > a:hover {
  border-bottom-color: #0A9396;
  background-color: #f7fbfb;
}
/* 現在表示中のページは下線を濃く */
#navi .menu-pc > li.current-menu-item > a,
#navi .menu-pc > li.current_page_item > a,
#navi .menu-pc > li.current-post-ancestor > a {
  border-bottom-color: #0A9396;
}



/* ===== キャッチフレーズのサイズ(3段階・最終指定) ===== */
/* スマホ実機(〜600px): 1行に収める */
@media screen and (max-width: 600px) {
  .appeal-message { font-size: 12px !important; }
}
/* 中間(601〜1023px): 全画面解除したPCウィンドウなど */
@media screen and (min-width: 601px) and (max-width: 1023px) {
  .appeal-message { font-size: 18px !important; }
}
/* 全画面(1024px〜) */
@media screen and (min-width: 1024px) {
  .appeal-message { font-size: 20px !important; }
}