/* 全デザイン共通ベース */
.cpp-container {
    --cpp-accent: #007bff;
    width: 100%;
    padding: 100px 0;
    box-sizing: border-box;
    color: #444;
}
.cpp-content {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}
.cpp-header { margin-bottom: 50px; text-align: center; }
.cpp-title { font-size: 2.5rem; font-weight: 800; margin: 0; }
.cpp-intro-text { line-height: 1.8; margin-bottom: 40px; }
.cpp-section-wrapper { display: flex; flex-direction: column; gap: 40px; }
.cpp-heading { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; }
.cpp-heading span { display: none; } /* デフォルトでは非表示、パターンにより使用 */
.cpp-text { line-height: 1.8; margin-bottom: 15px; }
.cpp-subheading { font-weight: 700; margin-top: 20px; margin-bottom: 10px; }
.cpp-list { list-style: none; padding: 0; margin: 0; }
.cpp-list-item { position: relative; padding-left: 1.5em; line-height: 1.8; margin-bottom: 8px; }
.cpp-contact-info { padding: 30px; border-radius: 8px; }
.cpp-contact-heading { font-size: 1.25rem; font-weight: 700; margin-bottom: 15px; }
.cpp-contact-detail { margin-bottom: 5px; line-height: 1.6; }
.cpp-date-wrap { margin-top: 50px; text-align: right; border-top: 1px solid #eee; padding-top: 20px; }

@media (max-width: 768px) {
    .cpp-container { padding: 40px 0; }
    .cpp-title { font-size: 1.8rem; }
    .cpp-heading { font-size: 1.3rem; }
}

/* =========================================
   30 Design Patterns
========================================= */

/* Pattern 1: シンプルビジネス（左線アクセント） */
.pattern-1 .cpp-heading { border-left: 5px solid var(--cpp-accent); padding-left: 15px; }
.pattern-1 .cpp-list-item::before { content: "・"; color: var(--cpp-accent); position: absolute; left: 0; }
.pattern-1 .cpp-contact-info { background: #f8f9fa; border: 1px solid #eee; }

/* Pattern 2: モダンカード（各セクションが独立） */
.pattern-2 .cpp-section { background: #f8f9fa; padding: 30px; border-radius: 12px; border: 1px solid #e9ecef; }
.pattern-2 .cpp-heading { border-bottom: 2px solid #dee2e6; padding-bottom: 10px; color: var(--cpp-accent); }
.pattern-2 .cpp-list-item::before { content: "✔"; color: var(--cpp-accent); position: absolute; left: 0; }
.pattern-2 .cpp-contact-info { background: #fff; border: 2px solid var(--cpp-accent); }

/* Pattern 3: ナンバリング強調（丸数字） */
.pattern-3 .cpp-heading span { display: flex; width: 32px; height: 32px; background: var(--cpp-accent); color: #fff; border-radius: 50%; justify-content: center; align-items: center; font-size: 1rem; flex-shrink: 0; }
.pattern-3 .cpp-section { border-top: 1px solid #eee; padding-top: 30px; }

/* Pattern 4: シャープ・マテリアル（上線） */
.pattern-4 .cpp-section { border-top: 3px solid var(--cpp-accent); background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 30px; }
.pattern-4 .cpp-heading { color: #333; }

/* Pattern 5: インデックス風（サイドに番号） */
.pattern-5 .cpp-heading { position: relative; padding-left: 50px; }
.pattern-5 .cpp-heading span { display: block; position: absolute; left: 0; font-size: 2.5rem; opacity: 0.2; color: var(--cpp-accent); font-weight: 900; }

/* Pattern 6: クリーン・ミニマル（枠なし・下線） */
.pattern-6 .cpp-heading { border-bottom: 1px solid var(--cpp-accent); padding-bottom: 5px; display: inline-flex; margin-bottom: 25px; }
.pattern-6 .cpp-section { margin-bottom: 50px; }

/* Pattern 7: 信頼のツートーン（見出し背景） */
.pattern-7 .cpp-heading { background: var(--cpp-accent); color: #fff; padding: 10px 20px; border-radius: 4px; }
.pattern-7 .cpp-list-item::before { content: "▶"; color: var(--cpp-accent); position: absolute; left: 0; font-size: 0.8em; }

/* Pattern 8: ステッチ・フレーム */
.pattern-8 .cpp-content { border: 2px dashed #ddd; padding: 40px; border-radius: 8px; }
.pattern-8 .cpp-heading { color: var(--cpp-accent); text-decoration: underline; }

/* Pattern 9: プレーン・ブロック（グレー塗りつぶし） */
.pattern-9 .cpp-heading { background: #f2f2f2; border-left: 8px solid var(--cpp-accent); padding: 12px 20px; }

/* Pattern 10: 未来派・テック（斜めカット風） */
.pattern-10 .cpp-heading { border-bottom: 2px solid var(--cpp-accent); border-right: 2px solid var(--cpp-accent); padding: 10px; border-radius: 0 0 15px 0; display: inline-flex; }

/* Pattern 11: ブック形式（左右余白多め・中央線） */
.pattern-11 .cpp-header { border-bottom: 1px solid #333; padding-bottom: 20px; }
.pattern-11 .cpp-heading { justify-content: center; border-bottom: 1px double #ccc; padding-bottom: 10px; }
.pattern-11 .cpp-text { text-align: justify; }

/* Pattern 12: コンフォート・シャドウ */
.pattern-12 .cpp-section { background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; }

/* Pattern 13: ネイビー・コーポレート（重厚） */
.pattern-13 .cpp-title { color: #2c3e50; border-bottom: 4px solid #2c3e50; display: inline-block; }
.pattern-13 .cpp-heading { color: #2c3e50; font-size: 1.8rem; }
.pattern-13 .cpp-contact-info { background: #2c3e50; color: #fff; }

/* Pattern 14: ドット・アクセント */
.pattern-14 .cpp-heading::before { content: ""; width: 12px; height: 12px; background: var(--cpp-accent); border-radius: 50%; }

/* Pattern 15: シンプルL型（コーナー線） */
.pattern-15 .cpp-heading { position: relative; padding: 10px; }
.pattern-15 .cpp-heading::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-top: 3px solid var(--cpp-accent); border-left: 3px solid var(--cpp-accent); }

/* Pattern 16: フロー形式（矢印） */
.pattern-16 .cpp-heading::after { content: "▼"; margin-left: auto; color: var(--cpp-accent); font-size: 0.7rem; }
.pattern-16 .cpp-section { border-bottom: 1px solid #eee; }

/* Pattern 17: グラデーション・テキスト（見出しのみ） */
.pattern-17 .cpp-heading { background: linear-gradient(transparent 70%, #e1f0ff 70%); }
.pattern-17 .cpp-title { border-bottom: 5px solid var(--cpp-accent); }

/* Pattern 18: サイドバー風タイトル */
.pattern-18 .cpp-section { display: grid; grid-template-columns: 250px 1fr; gap: 30px; }
@media (max-width: 768px) { .pattern-18 .cpp-section { grid-template-columns: 1fr; } }
.pattern-18 .cpp-heading { border-right: 2px solid var(--cpp-accent); padding-right: 15px; }

/* Pattern 19: タブ形式デザイン */
.pattern-19 .cpp-heading { background: #eee; padding: 10px 20px; border-radius: 10px 10px 0 0; margin-bottom: 0; display: inline-flex; }
.pattern-19 .cpp-text, .pattern-19 .cpp-list { background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 0 10px 10px 10px; }

/* Pattern 20: フォーカス・フレーム（全体囲み） */
.pattern-20 .cpp-content { border: 1px solid var(--cpp-accent); padding: 50px; position: relative; }
.pattern-20 .cpp-title { background: #fff; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); padding: 0 20px; }

/* Pattern 21〜30: バリエーション（詳細は省略しますが実用的なビジネス向け） */
.pattern-21 .cpp-heading { border-bottom: 3px double var(--cpp-accent); }
.pattern-22 .cpp-section { border-left: 2px solid #eee; padding-left: 30px; }
.pattern-23 .cpp-contact-info { border-left: 10px solid var(--cpp-accent); background: #fafafa; }
.pattern-24 .cpp-heading span { display: flex; color: var(--cpp-accent); font-size: 2rem; font-style: italic; }
.pattern-25 .cpp-intro-text { border: 1px solid #ddd; padding: 20px; border-radius: 5px; background: #fdfdfd; }
.pattern-26 .cpp-heading { text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid #333; }
.pattern-27 .cpp-list-item::before { content: "■"; color: var(--cpp-accent); position: absolute; left: 0; }
.pattern-28 .cpp-section { padding: 40px; background: linear-gradient(to right, #f8f9fa, #fff); border-radius: 4px; }
.pattern-29 .cpp-heading { flex-direction: column; align-items: flex-start; gap: 5px; }
.pattern-29 .cpp-heading span { display: block; font-size: 0.8rem; color: #999; }
.pattern-30 .cpp-content { border-top: 10px solid var(--cpp-accent); padding-top: 40px; }