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

/* ===== TOP LP Styles ===== */
.toplp-wrap{max-width:1080px;margin:0 auto;padding:16px}
.toplp-hero{padding:22px 16px;border:1px solid rgba(0,0,0,.08);border-radius:14px}
.toplp-kicker{font-size:13px;opacity:.75;margin:0 0 6px}
.toplp-h1{font-size:28px;line-height:1.25;margin:0 0 10px}
.toplp-lead{font-size:16px;line-height:1.7;margin:0 0 16px;opacity:.9}
.toplp-badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.toplp-badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.02)}
.toplp-ctaRow{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 6px}
.toplp-btn{display:inline-block;text-decoration:none;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.14);font-weight:700}
.toplp-btn.primary{border-color:rgba(0,0,0,.0);color:#fff;background:#1f6feb}
.toplp-btn.ghost{background:rgba(0,0,0,.02)}
.toplp-note{font-size:12px;opacity:.75;margin:6px 0 0}
.toplp-section{margin:18px 0}
.toplp-section h2{font-size:20px;margin:0 0 10px}
.toplp-disclaimer{font-size:12px;opacity:.72;line-height:1.7}


/* =========================
   Mobile CV Optimization
   ========================= */

/* 1) スマホのH1/リードを読みやすく */
@media (max-width: 600px){
  .toplp-h1{
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: .01em;
  }
  .toplp-lead{
    font-size: 15px;
    line-height: 1.7;
  }

  /* 2) CTAボタンをタップしやすく */
  .toplp-ctaRow{
    gap: 10px;
  }
  .toplp-btn{
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 14px; /* タップ領域増 */
    border-radius: 14px;
  }

  /* 3) バッジが詰まりすぎないように */
  .toplp-badges{
    gap: 6px;
    margin: 10px 0 14px;
  }
  .toplp-badge{
    font-size: 11px;
    padding: 6px 9px;
  }
}

/* 4) 追従CTA：スマホだけ表示（PCは非表示） */
.toplp-sticky{ display:none; }
@media (max-width: 600px){
  .toplp-sticky{
    display:block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
  }

  /* iPhoneホームバー対策（対応ブラウザのみ効く） */
  @supports (padding: max(0px)) {
    .toplp-sticky{
      bottom: max(12px, env(safe-area-inset-bottom));
    }
  }

  .toplp-stickyBox{
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
  }

  .toplp-stickyText{
    font-size: 12px;
    line-height: 1.3;
    opacity: .9;
  }

  /* 追従CTA内のボタンは“1つ”が最強 */
  .toplp-stickyBox .toplp-btn{
    width: auto;
    padding: 12px 12px;
    border-radius: 14px;
    white-space: nowrap;
  }
/* ===== TOP CTA：重なり防止 ===== */
.toplp-cta-main{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:16px 0;
}

.toplp-cta-main .toplp-btn{
  display:inline-block;
  line-height:1.2;
}

/* スマホでは縦並び＆幅100%で押しやすく */
@media (max-width: 600px){
  .toplp-cta-main{
    flex-direction:column;
  }
  .toplp-cta-main .toplp-btn{
    width:100%;
    text-align:center;
  }
}

/* ===== ghost / small が透明になるのを防ぐ（Cocoon上書き対策） ===== */
.toplp-btn.ghost{
  border:1px solid rgba(0,0,0,.16);
  background: rgba(0,0,0,.03);
  color: inherit;
}

.toplp-btn.ghost.small{
  border:1px solid rgba(0,0,0,.16);
  background: rgba(0,0,0,.06);
  color: inherit;
}

/* ===== 追従CTAの重なり防止 ===== */
.toplp-sticky{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99999;
}

.toplp-stickyBox{
  max-width:980px;
  margin:0 auto;
  padding:10px 12px;
}

.toplp-stickyBtns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* 追従CTAがあるので下に余白を確保 */
@media (max-width: 600px){
  body{ padding-bottom: 110px; }
  .toplp-stickyBtns .toplp-btn{ flex: 1 1 auto; }
}