@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){
  /*必要ならばここにコードを書く*/
}

/************************************
** モバイル追従CTA（2026-08-11）
** Cocoonは @media(max-width:1023px) で .sidebar-scroll を position:static にするため、
** 追従サイドバーCTA（唯一クリックを稼いでいる常時可視CTA）が1023px以下で機能しない。
** その穴を下部固定バーで埋める。ブレークポイントはCocoon側と一致させる（834pxではない）。
************************************/
.ws-mcta { display: none; }

@media screen and (max-width: 1023px) {
  .ws-mcta {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4; /* Cocoonの .mobile-menu-buttons は z-index:3 */
    background: #1a73e8;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    transition: bottom 0.3s; /* Cocoon側のボタンと同じ 0.3s */
  }

  /* Cocoonのモバイルフッターボタン（position:fixed / bottom:0 / min-height:50px）が
     出ているときはその上に載せる。Cocoon設定→モバイルボタンをOFFにすると
     この <ul> 自体が出力されないので、:has() が外れて自動で bottom:0 に戻る */
  body:has(.mobile-menu-buttons) .ws-mcta { bottom: 50px; }

  /* Cocoonはスクロール方向でモバイルボタンのinline styleを
       bottom: 0px  ⇔  bottom: calc( -1 * (env(safe-area-inset-bottom) + 50px) )
     に書き換えて出し入れする（実測で確認）。読み進めている間はボタンが隠れるので、
     隠れている間はこちらも下端まで降りて50pxの隙間を作らない。
     ★意図: マッチに失敗しても bottom:50px のまま＝ボタンに重ならない側に転ぶ */
  body:has(.mobile-menu-buttons[style*="-1 *"]) .ws-mcta { bottom: 0; }

  /* 閉じるボタン用。display:flex を上書きするため .ws-mcta より後ろに置く */
  .ws-mcta[hidden] { display: none; }

  .ws-mcta-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-height: 52px;
    padding: 8px 10px 8px 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
  }
  .ws-mcta-link:hover,
  .ws-mcta-link:focus { color: #fff; opacity: 0.92; }

  .ws-mcta-close {
    flex: 0 0 auto;
    width: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  /* バーがフッター末尾を覆わないよう逃げを作る。
     Cocoonは自分のモバイルボタン用の逃げを作っていないので、
     CTAバー52px＋Cocoonボタン50px の両方が出ている最悪ケースを吸収する */
  #footer { padding-bottom: 114px; }
}