/* 
  【WordPress 独自CSS設定用】
  外観 > カスタマイズ > 追加CSS に貼り付けてください。
*/

/* --- WordPressレイアウト解除 (page-id-32925専用) --- */

/* tableレイアウト解除 + 730px解除 */
body.page-id-32925 .article__contents__area__single {
  display: block !important;
}

body.page-id-32925 .article__contents__wrap {
  display: block !important;   /* table-cell を解除 */
  width: 100% !important;      /* 75% を解除 */
}

body.page-id-32925 .article__contents__single__wrap,
body.page-id-32925 .article__contents__page__contents,
body.page-id-32925 .entry-content {
  max-width: none !important;  /* 730px を解除 */
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;       /* 必要に応じて余白も解除 */
}

/* パンくずだけ非表示 */
body.page-id-32925 #pan,
body.page-id-32925 .common__breadcrumb__wrap,
body.page-id-32925 .breadcrumb {
  display: none !important;
}

/* パンくずが消えた分、上の余白を詰める */
body.page-id-32925 .common__wrap,
body.page-id-32925 .article__wrap {
  padding-top: 0 !important;
}

/* --- LP独自アニメーション & スタイル --- */

#goope-lp-content {
    scroll-behavior: smooth;
    width: 100%;
}

@keyframes lp-blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: lp-blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* Quote Widget Transitions */
#quote-window {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step transition effects */
.step-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Customize focus on widget buttons */
#quote-window button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #0ea5e9;
}


/* --- タイポグラフィの強化：外部CSSから強制上書き版 --- */

/* 1. 全体のベースを18px・行間1.8に固定 */
#goope-lp-content {
  font-size: 18px !important; 
  line-height: 1.8 !important;
}

/* 2. メイン見出し(H1)の詰まりを解消 */
#goope-lp-content h1 {
  line-height: 1.3 !important; /* H1は大きすぎるので1.8だと広すぎ、1.3が適正 */
  margin-bottom: 2rem !important;
}

/* 3. セクション見出し(H2)のジャンプ率を最大化 */
#goope-lp-content .reset-h2 {
  font-size: 36px !important; /* PCでのインパクトを重視 */
  font-weight: 900 !important;
  margin-bottom: 3rem !important;
  line-height: 1.4 !important;
}

/* 4. 本文・リスト：1rem(16px)ではなく、親の18pxを継承させる */
#goope-lp-content p, 
#goope-lp-content li {
  font-size: inherit !important; /* これで18pxが適用されます */
  color: #374151 !important; 
  margin-bottom: 1.2rem !important; /* 段落間の余白も確保 */
}

/* 5. 小さすぎる文字(11px)の救済 */
/* Tailwindの text-[11px] よりも強く当てるための記述 */
#goope-lp-content [class*="text-[11px]"],
#goope-lp-content .text-\[11px\] {
  font-size: 15px !important; 
  line-height: 1.6 !important;
}

/* 6. 事例セクションの文字サイズ微調整 */
#goope-lp-content #case-study p {
  font-size: 1.1em !important; /* 18pxの1.1倍 = 約20px弱 */
}

/* セクション見出し：ジャンプ率を上げてメリハリをつける */
#goope-lp-content .reset-h2 {
  font-size: 32px !important; /* スマホならこれくらいが限界、PCならもっと大きくてもOK */
  font-weight: 900 !important;
  margin-bottom: 40px !important;
  letter-spacing: -0.02em; /* 少し詰めると「見出し感」が出ます */
}

/* カード内のタイトル（デザインカスタマイズなど） */
#goope-lp-content h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

/* 本文・説明文：14px以下にならないように調整 */
#goope-lp-content p, 
#goope-lp-content li {
  font-size: 1rem !important; /* 18pxベースを継承 */
  color: #374151 !important; /* 視認性の高いグレー */
}

/* 「制作の流れ」などの小さな説明文（image_ab9d7e対策） */
#goope-lp-content .text-\[11px\] {
  font-size: 14px !important; /* 11pxは小さすぎるので14pxまで引き上げ */
  line-height: 1.6 !important;
}

/* 事例の紹介文（image_ab9d3d対策） */
#goope-lp-content #case-study p {
  font-size: 17px !important;
  line-height: 1.7 !important;
}


/* --- グーペ公式風 CTAボタン：角丸を青ボタンに合わせた「ピル形状」版 --- */

.goope-cta-button {
  background-color: #eb544d !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  
  /* 角丸：12pxから9999px（カプセル型）に変更 */
  border-radius: 9999px !important; 
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  
  /* 形状を美しく保つため、左右の余白を少し多めに(3rem)設定 */
  padding: 1rem 3rem !important;
  
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(235, 84, 77, 0.3) !important;
}

.goope-cta-button:hover {
  background-color: #d43f38 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(235, 84, 77, 0.4) !important;
}

/* 右側の白い丸矢印アイコン（角丸ボタンに合わせて微調整） */
.goope-cta-button::after {
  content: "❯";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; /* 少し大きくして存在感をアップ */
  height: 26px;
  background-color: #ffffff;
  color: #eb544d;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}


/* --- 追従ボタン：グーペ公式赤 × カプセル型 --- */

.floating-pill-button {
  border-radius: 9999px !important; 
  /* グーペ公式の赤 */
  background-color: #eb544d !important; 
  color: #ffffff !important;
  /* 赤色に馴染む柔らかい影に変更 */
  box-shadow: 0 10px 25px -5px rgba(235, 84, 77, 0.4) !important;
  padding: 1rem 2rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.floating-pill-button:hover {
  background-color: #d43f38 !important; /* ホバーで少し濃く */
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 20px 25px -5px rgba(235, 84, 77, 0.5) !important;
}


/* --- WordPressテーマ側のタイトルを徹底的に隠す --- */

/* テーマがよく使うタイトル周りのクラスをまとめて非表示 */
body.page-id-32925 h1:first-of-type:not(#goope-lp-content h1), /* 私たちのLP内じゃない「最初のH1」を狙い撃ち */
body.page-id-32925 .article-header,
body.page-id-32925 .entry-header,
body.page-id-32925 .post-title,
body.page-id-32925 .article__title,
body.page-id-32925 .page-title,
body.page-id-32925 .common__title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}