/* pop_overrides.css (Refined Version) */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800&display=swap');

:root {
    /* 色数は増やさず、元のスタイルに定義されている色（オレンジと紺）をベースにします */
    --color-main: #db673a;
    --color-sub: #334a66;
    --color-bg-light: #F8FAFC;
    --color-text: #334155;
    
    /* 影やドット用の薄い色設定 */
    --soft-shadow: 0 8px 24px rgba(51, 74, 102, 0.08);
    --dot-color: #e7dac6;
}

body {
    /* 1. 丸みのあるフォントでポップ感を演出 */
    font-family: 'M PLUS Rounded 1c', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fcf4e8;
    
    /* 2. ご要望の「背景のドット」はそのままきれいに残します */
    background-image: radial-gradient(var(--dot-color) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    font-weight: 500;
}

/* =========================================
   全体的なシンプル＆ポップ化（カード類）
   ========================================= */
/* 強すぎる黒いフチやベタ影をすべて廃止し、丸み（16px）と「薄い上品な影」に統一 */
.check-card,
.info-card,
.feature-card,
.value-card,
.plan-card,
.option-card,
.tag,
.contact-guide,
.benefit-detail-card,
.pdca-item,
.structure-card,
.structure-note-box {
    border: 2px solid #e2e8f0 !important; /* 黒ではなく、なじむ薄いグレーの線 */
    box-shadow: var(--soft-shadow) !important; /* 非常に薄くソフトな影 */
    border-radius: 16px !important; /* 少し丸みを強めてポップな印象に */
    background-color: #ffffff !important;
    transform: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 各カードのホバー時は、シンプルにふわっと少し浮き上がる心地よい演出に */
.check-card:hover,
.info-card:hover,
.feature-card:hover,
.value-card:hover,
.plan-card:hover,
.option-card:hover,
.benefit-detail-card:hover,
.pdca-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(51, 74, 102, 0.12) !important;
}

.plan-card.dark{
    background-color: #334a66 !important; /* ダークカードは紺色ベースで上品に */
    border: none !important;
    color: #fff !important;
}

/* =========================================
   見出し・テキストまわり
   ========================================= */
/* 黒い縁取りや派手な影を消し、元の色を活かしたシンプルな見出しへ */
h2 {
    font-size: 26px !important;
    color: var(--color-sub) !important;
    text-shadow: none !important; /* 強い影を廃止 */
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    text-align: center;
}

/* サブタイトルの調整（派手な黄色を廃止し、元のクリーンな印象に） */
/* h3.sub_title {
    font-size: 14px !important;
    background-color: #f0f4f8 !important;
    color: var(--color-sub) !important;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%) !important;
    font-weight: 700 !important;
} */

/* 強調テキストのマーカー（メインカラーのオレンジを薄く透過させたポップな線） */
.highlight {
    font-weight: 700;
}

/* =========================================
   ファーストビュー（FV）
   ========================================= */
.fv h1 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffffff !important;
    -webkit-text-stroke: opacity 0 !important; /* 黒フチを完全に消去 */
    -webkit-text-stroke: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; /* 薄く自然な影に */
    font-size: 36px !important;
    font-weight: 800 !important;
}

.fv .sub-copy {
    background: rgba(255, 255, 255, 0.15) !important; /* 派手な色を使わず、白の半透明でシンプルに */
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    transform: none !important; /* 傾きをなくしてシンプルに */
    display: inline-block;
}

/* =========================================
   ボタン（CTA）
   ========================================= */
/* メインカラーのオレンジを活かしつつ、フチ無しのぷっくりとしたポップなボタンに */
.cta-btn {
    background-color: var(--color-main) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(219, 103, 58, 0.3) !important; /* オレンジベースの薄く綺麗な影 */
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.cta-btn:hover, .cta-btn:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(219, 103, 58, 0.4) !important;
}

/* =========================================
   ディテール（バッジ・リストなど）
   ========================================= */
/* コンセプト強調（ステッカー風の傾きと黄色を廃止し、優しく目立たせる） */
.concept-highlight {
    background: rgba(219, 103, 58, 0.08) !important; /* メインカラーの薄い背景 */
    border: 1px dashed var(--color-main) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--color-main) !important;
    transform: none !important;
    padding: 16px 24px !important;
    font-weight: 700 !important;
}

/* 各種バッジも元の色味（紺やオレンジ）で上品に丸める */
.benefit-label, .pdca-label, .structure-badge {
    background: var(--color-sub) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    border-radius: 30px !important; /* 丸みを持たせる */
    padding: 4px 12px !important;
}

/* リストのアイコンチェックマーク（黒フチを消してすっきりと） */
.check-list li::before {
    content: "✓" !important;
    color: var(--color-main) !important;
    -webkit-text-stroke: none !important;
    font-weight: 800;
}

.plan-list li::before, .structure-point-list li::before {
    content: "✓" !important;
    color: var(--color-sub) !important;
    -webkit-text-stroke: none !important;
    font-weight: 800;
}

.dark .plan-list li::before {
    color: var(--color-main) !important;
}

/* 情報カード内のタイトルのフチ線を消す */
.info-card h4, .feature-card h4 {
    font-size: 18px !important;
    border-bottom: 2px solid #edf2f7 !important;
    color: var(--color-sub) !important;
    padding-bottom: 6px;
}