@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 {
    font-size: 16px;
    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;
    height: 26vw !important;
    max-height: 480px;
  }
  .appeal-message {
    font-size: 19px;
  }
}
/* スマホ: 画像全体を表示し、キャッチフレーズを画像下端に重ねる */
@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 {
    font-size: 12px;
    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;
}