/* =========================================================
   1. 共通設定 ＆ レスポンシブ（スマホ対応）ベースCSS
========================================================= */
.cf-wrapper table { width: 100%; border-collapse: collapse; margin-bottom: 30px; table-layout: fixed; }
.cf-wrapper th, .cf-wrapper td { padding: 15px; text-align: left; vertical-align: middle; box-sizing: border-box; }
.cf-wrapper th { width: 30%; font-weight: 500; }
.cf-wrapper td { width: 70%; }
.cf-wrapper input[type="text"], .cf-wrapper input[type="tel"], .cf-wrapper input[type="email"], .cf-wrapper textarea, .cf-wrapper select { 
    width: 100%; padding: 12px; box-sizing: border-box; max-width: 100%; font-size: 16px; transition: 0.3s; 
}
.cf-wrapper textarea { min-height: 120px; resize: vertical; }
.required { color: #fff; background: #e74c3c; padding: 2px 6px; font-size: 11px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }
.optional { color: #fff; background: #95a5a6; padding: 2px 6px; font-size: 11px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }

/* --- スマホ時の縦積み対応（768px以下） --- */
@media screen and (max-width: 768px) {
    .cf-wrapper table, .cf-wrapper tbody, .cf-wrapper tr, .cf-wrapper th, .cf-wrapper td { display: block; width: 100%; }
    .cf-wrapper th { padding: 15px 15px 5px 15px; border-bottom: none !important; }
    .cf-wrapper td { padding: 0 15px 15px 15px; }
}

/* =========================================================
   2. デザイン 30パターン
========================================================= */

/* 【コーポレート・スタンダード系】 */
/* パターン1: スタンダードな枠線 */
.pattern-1 table, .pattern-1 th, .pattern-1 td { border: 1px solid #ddd; }
.pattern-1 th { background-color: #f9f9f9; }
.pattern-1 input, .pattern-1 textarea { border: 1px solid #ccc; border-radius: 4px; }

/* パターン2: 左側ブルーアクセント */
.pattern-2 th { border-left: 4px solid #0056b3; background-color: #f4f7f6; border-bottom: 1px solid #fff; }
.pattern-2 td { border-bottom: 1px dashed #ccc; }
.pattern-2 input, .pattern-2 textarea { border: 1px solid #ddd; background: #fafafa; }

/* パターン3: ストライプ（ゼブラ） */
.pattern-3 tr:nth-child(even) { background-color: #f8f9fa; }
.pattern-3 th, .pattern-3 td { border-bottom: 1px solid #e9ecef; }
.pattern-3 input, .pattern-3 textarea { border: 1px solid #ced4da; border-radius: 2px; }

/* パターン4: グリッドライン強調 */
.pattern-4 table { border-top: 2px solid #333; border-bottom: 2px solid #333; }
.pattern-4 th, .pattern-4 td { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
.pattern-4 tr td:last-child { border-right: none; }
.pattern-4 input, .pattern-4 textarea { border: 1px solid #aaa; }

/* パターン5: ネイビーヘッダー */
.pattern-5 th { background-color: #1a2b4c; color: #fff; border-bottom: 2px solid #fff; }
.pattern-5 td { background-color: #f0f4f8; border-bottom: 2px solid #fff; }
.pattern-5 input, .pattern-5 textarea { border: none; border-bottom: 2px solid #1a2b4c; background: #fff; }

/* 【ミニマル・モダン系】 */
/* パターン6: アンダーラインのみ */
.pattern-6 th, .pattern-6 td { border-bottom: 1px solid #333; }
.pattern-6 input, .pattern-6 textarea { border: none; background: transparent; padding-left: 0; }
.pattern-6 input:focus, .pattern-6 textarea:focus { outline: none; border-bottom: 2px solid #0056b3; }

/* パターン7: 背景色のみ（枠線なし） */
.pattern-7 th, .pattern-7 td { border: none; }
.pattern-7 input, .pattern-7 textarea { border: none; background-color: #f1f3f5; border-radius: 6px; }

/* パターン8: 左寄せシンプル */
.pattern-8 table, .pattern-8 tr, .pattern-8 th, .pattern-8 td { display: block; width: 100%; border: none; padding: 5px 0; }
.pattern-8 th { padding-top: 15px; font-weight: 600; }
.pattern-8 input, .pattern-8 textarea { border: 1px solid #ddd; border-radius: 4px; }

/* パターン9: 極細ライン */
.pattern-9 th, .pattern-9 td { border-bottom: 1px solid #eee; }
.pattern-9 input, .pattern-9 textarea { border: 1px solid #eee; font-weight: 300; }

/* パターン10: モノトーン・シック */
.pattern-10 table { border: 1px solid #000; }
.pattern-10 th { background: #000; color: #fff; }
.pattern-10 td { border-bottom: 1px solid #000; }
.pattern-10 input, .pattern-10 textarea { border: 1px solid #000; }

/* 【ソフト・親しみやすい系】 */
/* パターン11: 角丸（ラウンド） */
.pattern-11 table { border-collapse: separate; border-spacing: 0 10px; }
.pattern-11 th { background: #eef2f5; border-radius: 10px 0 0 10px; }
.pattern-11 td { background: #fff; border: 1px solid #eef2f5; border-left: none; border-radius: 0 10px 10px 0; }
.pattern-11 input, .pattern-11 textarea { border: 1px solid #ddd; border-radius: 8px; }
@media screen and (max-width: 768px) { .pattern-11 th { border-radius: 10px 10px 0 0; } .pattern-11 td { border-left: 1px solid #eef2f5; border-radius: 0 0 10px 10px; border-top: none; } }

/* パターン12: 完全なピル形状（丸み） */
.pattern-12 input, .pattern-12 select { border-radius: 30px; border: 2px solid #e0e0e0; padding: 12px 20px; }
.pattern-12 textarea { border-radius: 20px; border: 2px solid #e0e0e0; padding: 15px 20px; }
.pattern-12 th, .pattern-12 td { border-bottom: 1px dashed #e0e0e0; }

/* パターン13: パステルイエロー */
.pattern-13 th { background-color: #fff9db; border-bottom: 1px solid #fff; }
.pattern-13 td { border-bottom: 1px solid #fff9db; }
.pattern-13 input, .pattern-13 textarea { border: 1px solid #ffe066; border-radius: 4px; }

/* パターン14: ドットライン */
.pattern-14 th, .pattern-14 td { border-bottom: 2px dotted #ccc; }
.pattern-14 input, .pattern-14 textarea { border: 1px solid #eee; border-radius: 4px; }

/* パターン15: オーガニック（グリーン系） */
.pattern-15 th { border-left: 4px solid #40c057; background: #ebfbee; }
.pattern-15 td { border-bottom: 1px solid #ebfbee; }
.pattern-15 input, .pattern-15 textarea { border: 1px solid #b2f2bb; border-radius: 5px; }

/* 【マテリアル・カード系】 */
/* パターン16: 浮かび上がるカード */
.pattern-16 { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.pattern-16 th, .pattern-16 td { border-bottom: 1px solid #f0f0f0; }
.pattern-16 input, .pattern-16 textarea { border: 1px solid #e0e0e0; border-radius: 6px; background: #fcfcfc; }

/* パターン17: ニューモフィズム風（凹み） */
.pattern-17 { background: #e0e5ec; padding: 30px; border-radius: 15px; }
.pattern-17 input, .pattern-17 textarea { border: none; background: #e0e5ec; box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff; border-radius: 10px; }
.pattern-17 th { color: #4a5568; }

/* パターン18: フローティング入力欄 */
.pattern-18 th, .pattern-18 td { display: block; width: 100%; border: none; padding: 5px 0; }
.pattern-18 input, .pattern-18 textarea { border: none; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* パターン19: 階層化デザイン */
.pattern-19 th { background: #fafafa; border: 1px solid #eee; }
.pattern-19 td { border: 1px solid #eee; background: #fff; }
.pattern-19 input, .pattern-19 textarea { border: 1px solid #e0e0e0; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }

/* パターン20: マテリアルUI風（下線アニメーション） */
.pattern-20 input, .pattern-20 textarea { border: none; border-bottom: 1px solid #9e9e9e; background: #f5f5f5; border-radius: 4px 4px 0 0; }
.pattern-20 input:focus, .pattern-20 textarea:focus { border-bottom: 2px solid #6200ea; background: #e8eaf6; outline: none; }

/* 【エレガント・ラグジュアリー系】 */
/* パターン21: シャンパンゴールド */
.pattern-21 th { color: #b8860b; font-weight: normal; border-bottom: 1px solid #ebd59b; }
.pattern-21 td { border-bottom: 1px solid #f8f1e0; }
.pattern-21 input, .pattern-21 textarea { border: 1px solid #ebd59b; background: transparent; }

/* パターン22: 大理石風（グレー＆細字） */
.pattern-22 { font-family: "Times New Roman", serif; letter-spacing: 1px; }
.pattern-22 th, .pattern-22 td { border-bottom: 1px solid #ddd; }
.pattern-22 input, .pattern-22 textarea { border: 1px solid #ccc; font-family: "Times New Roman", serif; }

/* パターン23: ダークエレガント */
.pattern-23 { background: #2c2c2c; color: #d4af37; padding: 20px; border-radius: 5px; }
.pattern-23 th { color: #d4af37; border-bottom: 1px solid #444; }
.pattern-23 td { border-bottom: 1px solid #444; }
.pattern-23 input, .pattern-23 textarea { background: #3a3a3a; border: 1px solid #555; color: #fff; }
.pattern-23 .required { background: #d4af37; color: #000; }

/* パターン24: シルバーライン */
.pattern-24 table { border-top: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; }
.pattern-24 th, .pattern-24 td { border-bottom: 1px solid #e0e0e0; }
.pattern-24 input, .pattern-24 textarea { border: 1px solid #c0c0c0; }

/* パターン25: ボックスシャドウ・エレガント */
.pattern-25 input, .pattern-25 textarea { border: 1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,0.03); border-radius: 0; }
.pattern-25 th { border-right: 1px solid #eee; }

/* 【クリエイティブ・ポップ系】 */
/* パターン26: ブルータリズム（太枠・影） */
.pattern-26 table { border: 3px solid #000; }
.pattern-26 th, .pattern-26 td { border: 2px solid #000; }
.pattern-26 th { background: #ffdf00; }
.pattern-26 input, .pattern-26 textarea { border: 2px solid #000; box-shadow: 4px 4px 0px #000; }

/* パターン27: グラデーション枠 */
.pattern-27 th, .pattern-27 td { border-bottom: 2px solid transparent; border-image: linear-gradient(to right, #f6d365 0%, #fda085 100%); border-image-slice: 1; }
.pattern-27 input, .pattern-27 textarea { border: 2px solid #eee; border-radius: 8px; }

/* パターン28: ネオン風（サイバー） */
.pattern-28 { background: #0f0f0f; color: #0ff; padding: 20px; }
.pattern-28 th, .pattern-28 td { border-bottom: 1px dashed #333; color: #0ff; }
.pattern-28 input, .pattern-28 textarea { background: #1a1a1a; border: 1px solid #0ff; color: #fff; box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }

/* パターン29: レトロポップ（ドット背景） */
.pattern-29 th { background-image: radial-gradient(#ddd 10%, transparent 10%); background-size: 10px 10px; border-bottom: 2px solid #ff4757; }
.pattern-29 td { border-bottom: 2px solid #ff4757; }
.pattern-29 input, .pattern-29 textarea { border: 2px solid #ff4757; border-radius: 15px; }

/* パターン30: ツートーン（上下で色分け） */
.pattern-30 th { background: #2f3542; color: #fff; text-align: center; border-radius: 8px 8px 0 0; }
.pattern-30 td { background: #f1f2f6; border: 1px solid #dfe4ea; border-top: none; }
@media screen and (min-width: 769px) { .pattern-30 th { border-radius: 8px 0 0 8px; border: 1px solid #2f3542; } .pattern-30 td { border-radius: 0 8px 8px 0; border: 1px solid #dfe4ea; border-left: none; } }

/* パターン31: 極太ブラックフレーム */
.pattern-31 table, .pattern-31 th, .pattern-31 td { border: 2px solid #222; }
.pattern-31 th { background: #f4f4f4; text-align: center; }
.pattern-31 input, .pattern-31 textarea { border: 1px solid #666; border-radius: 0; }

/* パターン32: ライトグレーパネル */
.pattern-32 .cf-inner { background: #f8f9fa; padding: 25px; border: 1px solid #e9ecef; }
.pattern-32 th, .pattern-32 td { border-bottom: 1px solid #dee2e6; }
.pattern-32 input, .pattern-32 textarea { border: 1px solid #ced4da; }

/* パターン33: 左太線グレー */
.pattern-33 th { border-left: 6px solid #6c757d; background: #fdfdfd; }
.pattern-33 td { border-bottom: 1px solid #eee; }

/* パターン34: 上部細線アクセント */
.pattern-34 th { border-top: 2px solid #495057; border-bottom: 1px solid #e9ecef; }
.pattern-34 td { border-top: 2px solid transparent; border-bottom: 1px solid #e9ecef; }

/* パターン35: クリーン＆ホワイト（線なし、背景わずかに変更） */
.pattern-35 th { background: #fff; border-bottom: 2px solid #f1f3f5; }
.pattern-35 td { border-bottom: 2px solid #f1f3f5; }
.pattern-35 input, .pattern-35 textarea { background: #f8f9fa; border: none; }

/* 【ライン＆ドット系】 */
/* パターン36: 破線ボーダー */
.pattern-36 table, .pattern-36 th, .pattern-36 td { border: 1px dashed #adb5bd; }
.pattern-36 th { background: #fcfcfc; }

/* パターン37: 下線ドットのみ */
.pattern-37 th, .pattern-37 td { border-bottom: 2px dotted #ced4da; }
.pattern-37 input, .pattern-37 textarea { border: none; border-bottom: 1px solid #ced4da; border-radius: 0; }

/* パターン38: ダブルライン（二重線）枠 */
.pattern-38 table { border: 4px double #343a40; }
.pattern-38 th, .pattern-38 td { border-bottom: 1px solid #dee2e6; }
.pattern-38 th { border-right: 1px solid #dee2e6; }

/* パターン39: 縦ライン強調 */
.pattern-39 th { border-right: 2px solid #343a40; background: #fafafa; }
.pattern-39 td { border-bottom: 1px solid #eee; }

/* パターン40: 横ライン強調（ヘッダー風） */
.pattern-40 tr { border-bottom: 1px solid #ddd; }
.pattern-40 th { background: #e9ecef; border-bottom: 1px solid #bbb; }

/* 【モダン・フラット系】 */
/* パターン41: マテリアルライト */
.pattern-41 input, .pattern-41 textarea { border: none; border-bottom: 1px solid #ccc; background: transparent; transition: border-bottom-color 0.3s; }
.pattern-41 th, .pattern-41 td { border-bottom: 1px solid #f0f0f0; }

/* パターン42: フラットブルーグレー */
.pattern-42 th { background: #eceff1; color: #37474f; border-bottom: 1px solid #cfd8dc; }
.pattern-42 td { border-bottom: 1px solid #eceff1; }
.pattern-42 input, .pattern-42 textarea { border: 1px solid #b0bec5; border-radius: 4px; }

/* パターン43: シャドウボックス入力 */
.pattern-43 input, .pattern-43 textarea { border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.08); border-radius: 6px; }
.pattern-43 th, .pattern-43 td { padding: 20px 15px; border-bottom: 1px solid #f8f9fa; }

/* パターン44: グレースケール・ミニマル */
.pattern-44 th { color: #555; border-bottom: 1px solid #e0e0e0; }
.pattern-44 td { border-bottom: 1px solid #e0e0e0; }
.pattern-44 input, .pattern-44 textarea { border: 1px solid #e0e0e0; color: #333; background: #fff; }

/* パターン45: ダークモード対応風（反転ではないが重厚感） */
.pattern-45 { background: #343a40; color: #f8f9fa; padding: 20px; border-radius: 8px; }
.pattern-45 th { color: #e9ecef; border-bottom: 1px solid #495057; }
.pattern-45 td { border-bottom: 1px solid #495057; }
.pattern-45 input, .pattern-45 textarea { background: #495057; border: 1px solid #6c757d; color: #fff; }

/* 【コーポレート・信頼感系】 */
/* パターン46: 銀行・公的機関風（堅牢） */
.pattern-46 table { border: 1px solid #2c3e50; }
.pattern-46 th { background: #2c3e50; color: #fff; border: 1px solid #2c3e50; }
.pattern-46 td { border: 1px solid #bdc3c7; }
.pattern-46 input, .pattern-46 textarea { border: 1px solid #95a5a6; }

/* パターン47: トラストブルー・アクセント */
.pattern-47 th { border-left: 5px solid #1abc9c; background: #f0fdfa; }
.pattern-47 td { border-bottom: 1px solid #e2e8f0; }

/* パターン48: 誠実なストライプ */
.pattern-48 tr:nth-child(even) th { background: #f8f9fa; }
.pattern-48 tr:nth-child(even) td { background: #fdfdfd; }
.pattern-48 th, .pattern-48 td { border-bottom: 1px solid #dee2e6; }

/* パターン49: ファイルフォルダ風（タブ） */
.pattern-49 th { background: #e2e8f0; border-radius: 8px 8px 0 0; display: inline-block; padding: 8px 15px; margin-bottom: -1px; position: relative; z-index: 1; border: 1px solid #cbd5e1; border-bottom: none; }
.pattern-49 td { border: 1px solid #cbd5e1; background: #fff; display: block; width: 100%; padding: 20px; border-radius: 0 8px 8px 8px; margin-bottom: 20px; }
@media screen and (max-width: 768px) { .pattern-49 th { display: block; border-radius: 8px 8px 0 0; } .pattern-49 td { border-radius: 0 0 8px 8px; } }

/* パターン50: エレベーテッド（浮き上がり）カード */
.pattern-50 { padding: 40px; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 12px; }
.pattern-50 th { font-weight: 600; color: #2d3748; }
.pattern-50 input, .pattern-50 textarea { border: 1px solid #e2e8f0; border-radius: 6px; background: #f7fafc; }

/* 【シンプル・クリーン系】 */
/* パターン51: プレーンテキスト風 */
.pattern-51 table, .pattern-51 th, .pattern-51 td { border: none; }
.pattern-51 input, .pattern-51 textarea { border: 1px solid #000; border-radius: 0; padding: 8px; }

/* パターン52: 角丸ソフトライン */
.pattern-52 th, .pattern-52 td { border-bottom: 1px solid #f1f5f9; }
.pattern-52 input, .pattern-52 textarea { border: 1px solid #cbd5e1; border-radius: 12px; }

/* パターン53: インセット（へこみ）シャドウ */
.pattern-53 input, .pattern-53 textarea { border: 1px solid #e2e8f0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); border-radius: 4px; }
.pattern-53 th { text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.05em; color: #4a5568; }

/* パターン54: アンダースコア・アクティブ */
.pattern-54 input, .pattern-54 textarea { border: 1px solid #e2e8f0; border-bottom: 3px solid #cbd5e1; border-radius: 4px; }
.pattern-54 th, .pattern-54 td { border-bottom: 1px solid #edf2f7; }

/* パターン55: モノクローム・コントラスト */
.pattern-55 th { background: #111; color: #fff; }
.pattern-55 td { background: #f9f9f9; border: 1px solid #111; }
.pattern-55 input, .pattern-55 textarea { border: 1px solid #111; border-radius: 0; }

/* 【洗練・スタイリッシュ系】 */
/* パターン56: ライトライン＆パディング広め */
.pattern-56 th, .pattern-56 td { padding: 25px 20px; border-bottom: 1px solid #e2e8f0; }
.pattern-56 input, .pattern-56 textarea { padding: 15px; border: 1px solid #cbd5e1; }

/* パターン57: ボーダーレス・インプット */
.pattern-57 .cf-inner { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.pattern-57 th { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.pattern-57 td { border-bottom: 1px solid #e2e8f0; }
.pattern-57 input, .pattern-57 textarea { border: none; background: #fff; }
.pattern-57 tr:last-child th, .pattern-57 tr:last-child td { border-bottom: none; }

/* パターン58: セパレート・ブロック */
.pattern-58 tr { display: block; margin-bottom: 25px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 20px; }
.pattern-58 th { display: block; width: 100%; padding: 0 0 10px 0; border: none; }
.pattern-58 td { display: block; width: 100%; padding: 0; border: none; }

/* パターン59: スマートライン・左配置 */
.pattern-59 th { border-left: 2px solid #333; padding-left: 15px; font-weight: normal; color: #666; border-bottom: 1px solid #eee; }
.pattern-59 td { border-bottom: 1px solid #eee; }
.pattern-59 input, .pattern-59 textarea { border: 1px solid #ddd; }

/* パターン60: 究極のミニマル（境界線なし） */
.pattern-60 table, .pattern-60 tr, .pattern-60 th, .pattern-60 td { border: none; }
.pattern-60 input, .pattern-60 textarea { border: none; background: #f1f5f9; padding: 15px; border-radius: 8px; }
.pattern-60 th { font-weight: 500; color: #475569; }