@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){
  /*必要ならばここにコードを書く*/
}
/* ==========================================================================
   Cocoon 固定ページ → 高CVR記事LP 化CSS
   商材：事故物件・老朽不動産の出張買取（匿名AI無料査定への誘導）
   設置場所：外観 → テーマファイルエディター（style.css）
   ※ ページID「48」に置換・調整済み
   ========================================================================== */


/* ==========================================================================
   PART 1｜ブログ感の払拭（離脱導線の全遮断）
   ========================================================================== */

/* --- 1-1. 不要パーツを一括で非表示 ------------------------------------- */
.page-id-48 #header-container,
.page-id-48 #header,
.page-id-48 .header-container,
.page-id-48 #navi,
.page-id-48 .navi,
.page-id-48 #navi-menu-content,
.page-id-48 .mobile-menu-buttons,
.page-id-48 #mobile-menu-buttons,
.page-id-48 .mobile-header-menu-buttons,
.page-id-48 #footer,
.page-id-48 .footer,
.page-id-48 .footer-widgets,
.page-id-48 #footer-in,
.page-id-48 .navi-footer,
.page-id-48 #navi-footer,
.page-id-48 .footer-bottom,
.page-id-48 .mobile-footer-menu-buttons,
.page-id-48 #mobile-footer-menu-buttons,
/* パンくず */
.page-id-48 #breadcrumb,
.page-id-48 .breadcrumb,
.page-id-48 .breadcrumb-category,
/* 日付・著者・カテゴリ・タグ */
.page-id-48 .date-tags,
.page-id-48 .post-date,
.page-id-48 .post-update,
.page-id-48 .entry-date,
.page-id-48 .update-date,
.page-id-48 .entry-categories-tags,
.page-id-48 .author-info,
.page-id-48 .author-box,
.page-id-48 .writer,
.page-id-48 .entry-author,
/* SNSシェア・フォロー（上部・下部すべて） */
.page-id-48 .sns-share,
.page-id-48 .sns-share-buttons,
.page-id-48 .sns-share-message,
.page-id-48 .sns-follow,
.page-id-48 .sns-follow-buttons,
.page-id-48 .sns-follow-message,
/* 関連記事・前後ナビ・ページ送り */
.page-id-48 .related-entries,
.page-id-48 .under-entry-content .related-list,
.page-id-48 .navi-entry,
.page-id-48 .entry-navi,
.page-id-48 .pager-post-navi,
.page-id-48 #pager-post-navi,
.page-id-48 .pagination,
.page-id-48 .under-entry-content,
/* コメント */
.page-id-48 #comment-area,
.page-id-48 .comment-area,
.page-id-48 #respond,
/* サイドバー（1カラム設定で消える想定＋念のため） */
.page-id-48 #sidebar,
.page-id-48 .sidebar,
.page-id-48 .sidebar-scroll,
/* その他ノイズ */
.page-id-48 .article-footer,
.page-id-48 .entry-footer,
.page-id-48 .ad-area,
.page-id-48 .ad-label,
.page-id-48 .go-to-top-common {
  display: none !important;
}

/* --- 1-1b.【任意】ロゴだけ残して信頼感を担保したい場合 -----------------
   上のブロックから #header-container 系を消し、下の3行を有効化してください。
.page-id-48 #header-container { display: block !important; }
.page-id-48 #header-container .navi,
.page-id-48 #header-container .mobile-menu-buttons { display: none !important; }
----------------------------------------------------------------------- */

/* --- 1-2. 1カラム化＆余白の最適化 -------------------------------------- */
.page-id-48 #content,
.page-id-48 .content,
.page-id-48 #main,
.page-id-48 .main,
.page-id-48 .content-in,
.page-id-48 .wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #fff !important;
}

.page-id-48 #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 本文カラム幅（PCで読みやすい幅に固定・スマホは全幅） */
.page-id-48 .entry-content,
.page-id-48 .article {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px !important;
}

/* --- 1-3. 記事タイトルをLPのメインコピーとして最適化 -------------------- */
.page-id-48 .entry-title,
.page-id-48 .article-header .entry-title {
  font-size: 1.55rem;
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 1.2em auto 0.8em;
  padding: 0;
  border: none;
  text-align: left;
}

/* --- 1-4. 本文の可読性チューニング（スマホ8割前提） --------------------- */
.page-id-48 .entry-content {
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #2b2b2b;
  word-break: normal;
  overflow-wrap: anywhere;
}

.page-id-48 .entry-content p {
  margin-bottom: 1.6em;
}

.page-id-48 .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 横スクロール事故の防止 */
.page-id-48 body,
.page-id-48 html {
  overflow-x: hidden;
}

/* 追従CTAバーに本文最終行が隠れるのを防ぐ */
@media screen and (max-width: 834px) {
  .page-id-48 #main,
  .page-id-48 .main {
    padding-bottom: 96px !important;
  }
}


/* ==========================================================================
   PART 2｜最強CTAボタン
   ========================================================================== */

/* --- 2-1. CTAエリア外枠 ------------------------------------------------ */
.cv-area {
  margin: 44px auto;
  padding: 22px 14px 20px;
  max-width: 560px;
  text-align: center;
  background: linear-gradient(180deg, #fffdf7 0%, #fff6e8 100%);
  border: 2px solid #ffd9a8;
  border-radius: 16px;
  box-sizing: border-box;
}

/* --- 2-2. マイクロコピー（吹き出し） ----------------------------------- */
.cv-microcopy {
  position: relative;
  display: inline-block;
  margin: 0 auto 16px !important;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  background: #37474f;
  border-radius: 100px;
  letter-spacing: 0.02em;
}

.cv-microcopy::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #37474f transparent transparent transparent;
}

.cv-microcopy .cv-microcopy__em {
  color: #ffd54f;
}

/* --- 2-3. 脈打つアニメーション用ラッパー -------------------------------- */
.cv-btn-wrap {
  animation: cvPulse 2.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes cvPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* --- 2-4. 本体ボタン（オレンジ／立体） ---------------------------------- */
.cv-btn {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  max-width: 480px;
  min-height: 78px;
  margin: 0 auto;
  padding: 15px 42px 15px 20px;
  box-sizing: border-box;

  color: #fff !important;
  text-decoration: none !important;
  text-align: center;
  font-family: inherit;

  background: linear-gradient(180deg, #ffa726 0%, #fb8c00 52%, #f4720b 100%);
  border: none;
  border-radius: 60px;
  box-shadow:
    0 6px 0 #c75a00,
    0 12px 22px rgba(216, 96, 0, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.55);

  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 緑バージョンを使う場合は <a class="cv-btn cv-btn--green"> */
.cv-btn--green {
  background: linear-gradient(180deg, #5cd06e 0%, #3fae52 52%, #2e9642 100%);
  box-shadow:
    0 6px 0 #1f7530,
    0 12px 22px rgba(31, 117, 48, 0.40),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.cv-btn:hover,
.cv-btn:visited,
.cv-btn:focus {
  color: #fff !important;
  text-decoration: none !important;
}

.cv-btn:hover {
  filter: brightness(1.04);
}

/* タップ時に「押し込まれる」物理フィードバック */
.cv-btn:active {
  transform: translateY(6px);
  box-shadow:
    0 0 0 #c75a00,
    0 3px 8px rgba(216, 96, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.cv-btn--green:active {
  box-shadow:
    0 0 0 #1f7530,
    0 3px 8px rgba(31, 117, 48, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

/* --- 2-5. キラッと光るシャイン ----------------------------------------- */
.cv-btn::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-24deg);
  animation: cvShine 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cvShine {
  0%        { left: -80%; }
  38%, 100% { left: 140%; }
}

/* --- 2-6. ボタン内テキスト --------------------------------------------- */
.cv-btn__sub {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.cv-btn__main {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(17px, 4.9vw, 21px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.22);
}

.cv-btn__main .cv-em {
  border-bottom: 3px solid rgba(255, 255, 255, 0.75);
  padding-bottom: 1px;
}

/* 右端の矢印（トントンと誘導） */
.cv-btn__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 20px;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
  animation: cvArrow 1.4s ease-in-out infinite;
}

@keyframes cvArrow {
  0%, 100% { right: 20px; opacity: 1; }
  50%      { right: 14px; opacity: 0.65; }
}

/* --- 2-7. 信頼バッジ＆安心の一文 --------------------------------------- */
.cv-trust {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.cv-trust li {
  margin: 0 !important;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #b45309;
  background: #fff;
  border: 1px solid #fcd9a4;
  border-radius: 100px;
  list-style: none !important;
}

.cv-trust li::before,
.cv-trust li::marker {
  content: none !important;
}

.cv-note {
  margin: 12px 0 0 !important;
  font-size: 11.5px;
  line-height: 1.7;
  color: #7a7a7a;
}

/* --- 2-8. 【最重要】スマホ追従フッターCTA ------------------------------- */
.cv-fixed {
  display: none;
}

@media screen and (max-width: 834px) {
  .cv-fixed {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.13);
  }

  .cv-fixed__btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 8px 14px;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    background: linear-gradient(180deg, #ffa726 0%, #f4720b 100%);
    border-radius: 100px;
    box-shadow: 0 4px 0 #c75a00, inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: cvPulse 2.4s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
  }

  .cv-fixed__btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #c75a00;
  }

  .cv-fixed__lead {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.95;
  }

  .cv-fixed__main {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
  }
}

/* --- 2-9. アクセシビリティ配慮（アニメーション抑制設定の尊重） ---------- */
@media (prefers-reduced-motion: reduce) {
  .cv-btn-wrap,
  .cv-btn::before,
  .cv-btn__arrow,
  .cv-fixed__btn {
    animation: none !important;
  }
}
/* --- 追加：スマホでの文字改行（文字落ち）を防ぐ調整 --- */
@media screen and (max-width: 480px) {
  /* ボタンの左右の余白を少し減らす */
  .cv-btn {
    padding: 14px 34px 14px 10px !important;
  }
  /* 文字サイズを調整し、絶対に改行させない */
  .cv-btn__main {
    font-size: 16px !important;
    white-space: nowrap !important;
  }
  /* 注釈テキストの不自然な改行を防ぐ */
  .cv-note {
    word-break: keep-all !important;
  }
}
/* --- 追加：Google広告審査対策（フッター領域の再表示） --- */
.page-id-48 #footer,
.page-id-48 .footer,
.page-id-48 #footer-in,
.page-id-48 .navi-footer,
.page-id-48 #navi-footer,
.page-id-48 .footer-bottom {
  display: block !important;
}
/* スマホの追従ボタンにフッターが隠れないように余白を追加 */
@media screen and (max-width: 834px) {
  .page-id-48 .footer-bottom {
    padding-bottom: 96px !important;
  }
}
/* --- 追加：フッターの文字色と余白の最終調整 --- */
.page-id-48 #footer *,
.page-id-48 .footer *,
.page-id-48 .footer-bottom * {
  color: #333333 !important; /* 文字を濃いグレーにしてはっきり見せる */
}

@media screen and (max-width: 834px) {
  .page-id-48 #footer,
  .page-id-48 .footer {
    padding-bottom: 130px !important; /* 追従ボタンと被らないように余白をさらに増やす */
  }
}
/* --- 追加：スマホ下部の不要な余白（空洞）を詰める --- */
@media screen and (max-width: 834px) {
  .page-id-48 #main,
  .page-id-48 .main-content,
  .page-id-48 #content,
  .page-id-48 .article-footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}