app/Plugin/NZEstimateSystem42/Resource/template/default/simulator.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4. <style>
  5. /* フォント強制読み込み */
  6. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
  8. * {
  9.     font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif !important;
  10. }
  12. /* 見積もりシミュレーター専用スタイル */
  13. .nz-estimate-wrapper {
  14.     max-width: 1200px;
  15.     margin: 60px auto;
  16.     padding: 0 20px;
  17. }
  19. .nz-estimate-card {
  20.     background: #ffffff;
  21.     border-radius: 20px;
  22.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  23.     overflow: hidden;
  24. }
  26. .nz-estimate-header {
  27.     background: linear-gradient(135deg, #a8b3ff 0%, #d4a5ff 100%);
  28.     padding: 60px 40px;
  29.     text-align: center;
  30. }
  32. .nz-estimate-title {
  33.     font-size: 42px;
  34.     font-weight: 800;
  35.     color: #ffffff;
  36.     margin: 0 0 16px 0;
  37.     letter-spacing: -0.5px;
  38. }
  40. .nz-estimate-description {
  41.     font-size: 18px;
  42.     color: rgba(255, 255, 255, 0.95);
  43.     line-height: 1.7;
  44. }
  46. .nz-estimate-description img {
  47.     max-width: 100%;
  48.     height: auto;
  49.     display: block;
  50.     margin: 16px auto;
  51.     border-radius: 8px;
  52. }
  54. .nz-estimate-description p {
  55.     margin: 8px 0;
  56. }
  58. .nz-estimate-description br {
  59.     display: block;
  60.     content: "";
  61.     margin: 4px 0;
  62. }
  64. .nz-estimate-body {
  65.     padding: 50px 40px;
  66. }
  68. /* カテゴリセクション */
  69. .category-section {
  70.     margin-bottom: 20px;
  71.     overflow: hidden;
  72. }
  74. .category-row {
  75.     display: flex;
  76.     align-items: center;
  77.     gap: 20px;
  78.     width: 100%;
  79.     max-width: 100%;
  80. }
  82. .category-section.child-category {
  83.     margin-left: 40px;
  84.     padding-left: 20px;
  85.     border-left: 3px solid #cbd5e0;
  86.     display: none;
  87. }
  89. .category-section.child-category.active {
  90.     display: block;
  91.     animation: slideDown 0.3s ease;
  92. }
  94. @keyframes slideDown {
  95.     from { opacity: 0; transform: translateY(-10px); }
  96.     to { opacity: 1; transform: translateY(0); }
  97. }
  99. .category-header {
  100.     display: flex;
  101.     align-items: center;
  102.     gap: 15px;
  103.     margin-bottom: 0;
  104. }
  106. .category-title {
  107.     font-size: 20px;
  108.     font-weight: 700;
  109.     color: #2d3748;
  110.     margin: 0;
  111.     min-width: 150px;
  112.     flex-shrink: 0;
  113. }
  115. .category-title.child {
  116.     font-size: 18px;
  117.     color: #4a5568;
  118. }
  120. .category-required-badge {
  121.     display: inline-block;
  122.     background: #e53e3e;
  123.     color: white;
  124.     font-size: 12px;
  125.     font-weight: 700;
  126.     padding: 4px 12px;
  127.     border-radius: 12px;
  128. }
  130. .category-optional-badge {
  131.     display: inline-block;
  132.     background: #718096;
  133.     color: white;
  134.     font-size: 12px;
  135.     font-weight: 700;
  136.     padding: 4px 12px;
  137.     border-radius: 12px;
  138. }
  140. .parts-select {
  141.     flex: 1;
  142.     width: 100%;
  143.     max-width: 100%;
  144.     padding: 12px 16px;
  145.     font-size: 16px;
  146.     color: #2d3748 !important;
  147.     background-color: #f7fafc !important;
  148.     border: 2px solid #e2e8f0 !important;
  149.     border-radius: 12px !important;
  150.     transition: all 0.3s ease !important;
  151.     cursor: pointer;
  152.     box-sizing: border-box;
  153. }
  155. .parts-select:focus {
  156.     outline: none !important;
  157.     border-color: #667eea !important;
  158.     background-color: #ffffff !important;
  159.     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
  160. }
  162. .parts-select option {
  163.     padding: 10px;
  164. }
  166. .parts-select option[value=""] {
  167.     color: #a0aec0 !important;
  168.     font-style: italic;
  169. }
  171. .parts-select option:disabled {
  172.     color: #a0aec0 !important;
  173. }
  175. /* 見積もりサマリー（常時表示） */
  176. .estimate-summary {
  177.     background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  178.     border-radius: 16px;
  179.     padding: 30px;
  180.     margin-top: 40px;
  181. }
  183. .summary-header {
  184.     margin-bottom: 20px;
  185.     padding-bottom: 15px;
  186. }
  188. .summary-note {
  189.     font-size: 14px;
  190.     color: #1a202c;
  191.     font-weight: 600;
  192.     text-align: center;
  193. }
  195. .summary-items {
  196.     margin-bottom: 20px;
  197.     min-height: 100px;
  198. }
  200. .summary-empty {
  201.     text-align: center;
  202.     padding: 40px 20px;
  203.     color: #a0aec0;
  204.     font-size: 15px;
  205. }
  207. .summary-item {
  208.     display: block;
  209.     padding: 12px 0;
  210.     border-bottom: 1px solid #e2e8f0;
  211. }
  213. .summary-item-left {
  214.     width: 100%;
  215. }
  217. .summary-item-category {
  218.     font-size: 13px;
  219.     color: #718096;
  220.     margin-bottom: 4px;
  221. }
  223. .summary-item-name {
  224.     font-size: 15px;
  225.     font-weight: 600;
  226.     color: #2d3748;
  227. }
  229. .summary-total {
  230.     display: flex;
  231.     justify-content: space-between;
  232.     align-items: center;
  233.     padding: 24px 28px;
  234.     margin-top: 20px;
  235.     border-top: none;
  236.     background: linear-gradient(135deg, #a8b3ff 0%, #d4a5ff 100%);
  237.     border-radius: 12px;
  238.     box-shadow: 0 4px 12px rgba(168, 179, 255, 0.3);
  239. }
  241. .summary-total-label {
  242.     font-size: 22px;
  243.     font-weight: 700;
  244.     color: #ffffff;
  245. }
  247. .summary-total-price {
  248.     font-size: 36px;
  249.     font-weight: 800;
  250.     color: #ffffff;
  251.     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  252. }
  254. .summary-total-price.hidden {
  255.     color: rgba(255, 255, 255, 0.4);
  256.     text-shadow: none;
  257. }
  259. /* 必須項目未選択警告 */
  260. .required-warning {
  261.     background: #fff5f5;
  262.     border: 2px solid #fc8181;
  263.     border-radius: 12px;
  264.     padding: 15px 20px;
  265.     margin-top: 20px;
  266.     text-align: center;
  267.     display: none;
  268. }
  270. .required-warning.active {
  271.     display: block;
  272. }
  274. .required-warning-text {
  275.     font-size: 14px;
  276.     font-weight: 600;
  277.     color: #742a2a;
  278. }
  280. /* お客様情報フォーム */
  281. .customer-form {
  282.     margin-top: 30px;
  283.     padding: 25px;
  284.     background: #f7fafc;
  285.     border-radius: 12px;
  286.     border: 1px solid #e2e8f0;
  287.     display: none;
  288. }
  290. .customer-form.active {
  291.     display: block;
  292.     animation: fadeIn 0.3s ease;
  293. }
  295. @keyframes fadeIn {
  296.     from { opacity: 0; transform: translateY(10px); }
  297.     to { opacity: 1; transform: translateY(0); }
  298. }
  300. .customer-form h3 {
  301.     font-size: 20px;
  302.     font-weight: 700;
  303.     color: #2d3748;
  304.     margin-bottom: 20px;
  305. }
  307. .form-group {
  308.     margin-bottom: 25px;
  309. }
  311. .form-row {
  312.     display: flex;
  313.     gap: 20px;
  314.     margin-bottom: 0;
  315. }
  317. .form-group-half {
  318.     flex: 1;
  319.     margin-bottom: 25px;
  320. }
  322. .form-label {
  323.     display: block;
  324.     font-size: 16px;
  325.     font-weight: 700;
  326.     color: #2d3748;
  327.     margin-bottom: 10px;
  328. }
  330. .form-label .required {
  331.     color: #e53e3e;
  332.     margin-left: 4px;
  333. }
  335. .form-control {
  336.     width: 100%;
  337.     padding: 14px 18px;
  338.     font-size: 16px;
  339.     color: #2d3748 !important;
  340.     background-color: #f7fafc !important;
  341.     border: 2px solid #e2e8f0 !important;
  342.     border-radius: 12px !important;
  343.     transition: all 0.3s ease !important;
  344. }
  346. .form-control:focus {
  347.     outline: none !important;
  348.     border-color: #667eea !important;
  349.     background-color: #ffffff !important;
  350.     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
  351. }
  353. textarea.form-control {
  354.     min-height: 120px;
  355.     resize: vertical;
  356. }
  358. /* 送信ボタン */
  359. .submit-section {
  360.     margin-top: 40px;
  361.     text-align: center;
  362.     display: none;
  363. }
  365. .submit-section.active {
  366.     display: block;
  367.     animation: fadeIn 0.3s ease;
  368. }
  370. .submit-btn {
  371.     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  372.     color: #ffffff;
  373.     font-size: 18px;
  374.     font-weight: 700;
  375.     padding: 18px 60px;
  376.     border: none;
  377.     border-radius: 50px;
  378.     cursor: pointer;
  379.     transition: all 0.3s ease;
  380.     box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  381. }
  383. .submit-btn:hover {
  384.     transform: translateY(-2px);
  385.     box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
  386. }
  388. .submit-btn:disabled {
  389.     background: #cbd5e0;
  390.     cursor: not-allowed;
  391.     box-shadow: none;
  392. }
  394. /* ローディング */
  395. .loading {
  396.     text-align: center;
  397.     padding: 40px;
  398.     display: none;
  399. }
  401. .loading.active {
  402.     display: block;
  403. }
  405. .loading-spinner {
  406.     border: 4px solid #e2e8f0;
  407.     border-top: 4px solid #667eea;
  408.     border-radius: 50%;
  409.     width: 50px;
  410.     height: 50px;
  411.     animation: spin 1s linear infinite;
  412.     margin: 0 auto 20px;
  413. }
  415. @keyframes spin {
  416.     0% { transform: rotate(0deg); }
  417.     100% { transform: rotate(360deg); }
  418. }
  420. /* 完了メッセージ */
  421. .complete-message {
  422.     text-align: center;
  423.     padding: 60px 40px;
  424.     display: none;
  425. }
  427. .complete-message.active {
  428.     display: block;
  429.     animation: fadeIn 0.5s ease;
  430. }
  432. .complete-icon {
  433.     font-size: 72px;
  434.     color: #48bb78;
  435.     margin-bottom: 20px;
  436. }
  438. .complete-title {
  439.     font-size: 28px;
  440.     font-weight: 700;
  441.     color: #2d3748;
  442.     margin-bottom: 15px;
  443. }
  445. .complete-text {
  446.     font-size: 16px;
  447.     color: #718096;
  448.     line-height: 1.8;
  449. }
  451. /* 注意事項 */
  452. .notice-text {
  453.     margin-top: 20px;
  454.     padding: 15px 20px;
  455.     background-color: #fffbeb;
  456.     border-left: 4px solid #f59e0b;
  457.     border-radius: 4px;
  458.     color: #92400e;
  459.     font-size: 14px;
  460.     line-height: 1.7;
  461. }
  463. /* フリーエリア */
  464. .nz-free-area {
  465.     max-width: 1200px;
  466.     margin: 40px auto;
  467.     padding: 0 20px;
  468.     text-align: center;
  469. }
  471. .nz-free-area h2 {
  472.     font-size: 28px;
  473.     font-weight: 700;
  474.     color: #2d3748;
  475.     margin-bottom: 20px;
  476.     text-align: center;
  477. }
  479. .nz-free-area h3 {
  480.     font-size: 22px;
  481.     font-weight: 600;
  482.     color: #4a5568;
  483.     margin: 30px 0 15px;
  484.     text-align: left;
  485. }
  487. .nz-free-area p {
  488.     font-size: 16px;
  489.     color: #718096;
  490.     line-height: 1.8;
  491.     margin-bottom: 15px;
  492.     text-align: left;
  493. }
  495. .nz-free-area img {
  496.     max-width: 100%;
  497.     height: auto;
  498.     border-radius: 8px;
  499.     margin: 20px 0;
  500. }
  502. .nz-free-area .btn {
  503.     display: inline-block;
  504.     width: 100%;
  505.     max-width: 400px;
  506.     padding: 18px 30px;
  507.     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  508.     color: white !important;
  509.     text-decoration: none;
  510.     border-radius: 16px;
  511.     font-weight: 700;
  512.     font-size: 18px;
  513.     text-align: center;
  514.     transition: all 0.3s ease;
  515.     border: none;
  516.     cursor: pointer;
  517.     box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  518. }
  520. .nz-free-area .btn:hover {
  521.     background: linear-gradient(135deg, #059669 0%, #047857 100%);
  522.     transform: translateY(-2px);
  523.     box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  524. }
  526. /* 購入セクション */
  527. .purchase-section {
  528.     margin-bottom: 40px;
  529. }
  531. .purchase-card {
  532.     background: #ffffff;
  533.     border: none;
  534.     border-radius: 0;
  535.     padding: 20px 0;
  536.     text-align: center;
  537. }
  539. .purchase-btn {
  540.     width: 100%;
  541.     max-width: 400px;
  542.     padding: 18px;
  543.     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  544.     color: white;
  545.     border: none;
  546.     border-radius: 12px;
  547.     font-size: 18px;
  548.     font-weight: 700;
  549.     cursor: pointer;
  550.     transition: all 0.3s ease;
  551.     box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  552.     margin-bottom: 15px;
  553. }
  555. .purchase-btn:hover {
  556.     transform: translateY(-2px);
  557.     box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  558. }
  560. .purchase-btn:active {
  561.     transform: translateY(0);
  562. }
  564. .purchase-notice {
  565.     margin-top: 15px;
  566.     padding: 15px;
  567.     background-color: #f0fdf4;
  568.     border-radius: 8px;
  569.     color: #065f46;
  570.     font-size: 14px;
  571.     line-height: 1.7;
  572. }
  574. /* スマホ用固定サマリー：PC/タブレットでは非表示 */
  575. .estimate-summary-sticky {
  576.     display: none;
  577. }
  579. /* ==================== レスポンシブ対応 ==================== */
  581. @media (max-width: 768px) {
  582.     /* コンテナ */
  583.     .estimate-container {
  584.         padding: 10px;
  585.     }
  586.     
  587.     /* ヘッダー */
  588.     .estimate-header {
  589.         padding: 20px 10px;
  590.         margin-bottom: 15px;
  591.     }
  592.     
  593.     .estimate-header h1 {
  594.         font-size: 20px;
  595.     }
  596.     
  597.     .estimate-header p {
  598.         font-size: 13px;
  599.     }
  600.     
  601.     /* カテゴリセクション */
  602.     .category-section {
  603.         padding: 15px;
  604.         margin-bottom: 12px;
  605.         width: 100%;
  606.         box-sizing: border-box;
  607.     }
  608.     
  609.     .category-row {
  610.         display: flex;
  611.         flex-direction: column;
  612.         gap: 10px;
  613.         width: 100%;
  614.         max-width: 100%;
  615.         box-sizing: border-box;
  616.     }
  617.     
  618.     .category-header {
  619.         flex-direction: row;
  620.         align-items: center;
  621.         gap: 10px;
  622.         margin-bottom: 0;
  623.         width: 100%;
  624.     }
  625.     
  626.     .category-name {
  627.         font-size: 16px;
  628.     }
  629.     
  630.     .required-badge {
  631.         font-size: 11px;
  632.         padding: 3px 8px;
  633.     }
  634.     
  635.     /* セレクトボックス */
  636.     .parts-select {
  637.         font-size: 15px;
  638.         padding: 12px 35px 12px 12px;
  639.         margin-top: 0;
  640.         width: 100% !important;
  641.         max-width: 100% !important;
  642.         flex: none;
  643.     }
  644.     
  645.     /* 見積もりサマリー */
  646.     .estimate-summary {
  647.         padding: 15px;
  648.         margin-bottom: 15px;
  649.     }
  650.     
  651.     .summary-note {
  652.         font-size: 12px;
  653.     }
  654.     
  655.     .summary-total {
  656.         flex-direction: row;
  657.         align-items: center;
  658.         gap: 15px;
  659.         padding: 12px 0;
  660.     }
  661.     
  662.     .summary-total-label {
  663.         font-size: 15px;
  664.     }
  665.     
  666.     .summary-total-price {
  667.         font-size: 24px;
  668.         text-align: right;
  669.     }
  670.     
  671.     /* 購入セクション */
  672.     .purchase-section {
  673.         margin-bottom: 15px;
  674.     }
  675.     
  676.     .purchase-card {
  677.         padding: 15px;
  678.     }
  679.     
  680.     .purchase-btn {
  681.         max-width: 100%;
  682.         font-size: 15px;
  683.         padding: 14px;
  684.     }
  685.     
  686.     .purchase-notice {
  687.         font-size: 12px;
  688.         padding: 10px;
  689.         margin-top: 10px;
  690.     }
  691.     
  692.     /* お客様情報フォーム */
  693.     .customer-form {
  694.         padding: 15px;
  695.         margin-top: 15px;
  696.     }
  697.     
  698.     .customer-form h3 {
  699.         font-size: 16px;
  700.         margin-bottom: 12px;
  701.     }
  702.     
  703.     .form-row {
  704.         flex-direction: column;
  705.         gap: 0;
  706.     }
  707.     
  708.     .form-group {
  709.         margin-bottom: 15px;
  710.     }
  711.     
  712.     .form-label {
  713.         font-size: 14px;
  714.         margin-bottom: 6px;
  715.     }
  716.     
  717.     .form-control {
  718.         padding: 10px 12px;
  719.         font-size: 15px;
  720.     }
  721.     
  722.     textarea.form-control {
  723.         min-height: 80px;
  724.     }
  725.     
  726.     /* 送信ボタン */
  727.     .submit-section {
  728.         padding: 15px;
  729.         margin-top: 15px;
  730.     }
  731.     
  732.     .submit-btn {
  733.         padding: 14px;
  734.         font-size: 15px;
  735.     }
  736.     
  737.     /* 必須警告 */
  738.     .required-warning {
  739.         padding: 10px;
  740.         font-size: 12px;
  741.         margin: 10px 0;
  742.     }
  743.     
  744.     /* フリーエリア */
  745.     .nz-free-area {
  746.         padding: 20px 15px;
  747.         font-size: 14px;
  748.     }
  749.     
  750.     .nz-free-area h2 {
  751.         font-size: 20px;
  752.     }
  753.     
  754.     .nz-free-area h3 {
  755.         font-size: 18px;
  756.     }
  757. }
  759. @media (max-width: 480px) {
  760.     /* さらに小さい画面用 */
  761.     .estimate-container {
  762.         padding: 8px;
  763.     }
  764.     
  765.     .estimate-header {
  766.         padding: 15px 8px;
  767.     }
  768.     
  769.     .estimate-header h1 {
  770.         font-size: 18px;
  771.     }
  772.     
  773.     .estimate-header p {
  774.         font-size: 12px;
  775.     }
  776.     
  777.     .category-section {
  778.         padding: 12px;
  779.         margin-bottom: 10px;
  780.     }
  781.     
  782.     .category-row {
  783.         display: flex;
  784.         flex-direction: column;
  785.         gap: 8px;
  786.     }
  787.     
  788.     .category-name {
  789.         font-size: 15px;
  790.     }
  791.     
  792.     .parts-select {
  793.         font-size: 14px;
  794.         padding: 10px 30px 10px 10px;
  795.         width: 100% !important;
  796.         max-width: 100% !important;
  797.         flex: none;
  798.     }
  799.     
  800.     .estimate-summary {
  801.         padding: 12px;
  802.     }
  803.     
  804.     .summary-title {
  805.         font-size: 15px;
  806.     }
  807.     
  808.     .summary-total {
  809.         padding: 16px 20px !important;
  810.         border-radius: 12px;
  811.     }
  812.     
  813.     .summary-total-label {
  814.         font-size: 18px !important;
  815.     }
  816.     
  817.     .summary-total-price {
  818.         font-size: 26px !important;
  819.     }
  820.     
  821.     /* スマホ用：下部固定サマリー（クローン） */
  822.     .estimate-summary-sticky {
  823.         display: none; /* 初期状態では非表示 */
  824.         position: fixed;
  825.         bottom: 0;
  826.         left: 0;
  827.         right: 0;
  828.         background: linear-gradient(135deg, #a8b3ff 0%, #d4a5ff 100%);
  829.         box-shadow: 0 -4px 12px rgba(168, 179, 255, 0.4);
  830.         z-index: 9999;
  831.         padding: 8px 16px;
  832.     }
  833.     
  834.     .estimate-summary-sticky.visible {
  835.         display: block !important; /* スクロールで表示 */
  836.     }
  837.     
  838.     .estimate-summary-sticky .summary-total {
  839.         margin: 0;
  840.         padding: 0;
  841.         border-top: none;
  842.         display: flex;
  843.         justify-content: space-between;
  844.         align-items: center;
  845.         background: transparent;
  846.         box-shadow: none;
  847.         border-radius: 0;
  848.     }
  849.     
  850.     .estimate-summary-sticky .summary-total-label {
  851.         font-size: 14px;
  852.         font-weight: 700;
  853.         color: #ffffff;
  854.     }
  855.     
  856.     .estimate-summary-sticky .summary-total-price {
  857.         font-size: 20px;
  858.         font-weight: 800;
  859.         color: #ffffff;
  860.         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  861.     }
  862.     
  863.     /* コンテンツが固定サマリーに隠れないよう余白 */
  864.     body.sticky-summary-active {
  865.         padding-bottom: 50px;
  866.     }
  867.     
  868.     .purchase-card {
  869.         padding: 12px;
  870.     }
  871.     
  872.     .purchase-btn {
  873.         font-size: 14px;
  874.         padding: 12px;
  875.     }
  876.     
  877.     .customer-form {
  878.         padding: 12px;
  879.     }
  880.     
  881.     .form-group {
  882.         margin-bottom: 12px;
  883.     }
  884.     
  885.     .submit-section {
  886.         padding: 12px;
  887.     }
  888. }
  889. </style>
  891. <div class="nz-estimate-wrapper">
  892.     <div class="nz-estimate-card">
  893.         <div class="nz-estimate-header">
  894.             <h1 class="nz-estimate-title">
  895.                 {% if config.pageTitle %}
  896.                     {{ config.pageTitle|replace({'&lt;': '<', '&gt;': '>', '&quot;': '"', '&#039;': "'", '&amp;': '&'})|raw }}
  897.                 {% else %}
  898.                     見積もりシミュレーター
  899.                 {% endif %}
  900.             </h1>
  901.             <div class="nz-estimate-description">
  902.                 {% if config.pageDescription %}
  903.                     {{ config.pageDescription|replace({'&lt;': '<', '&gt;': '>', '&quot;': '"', '&#039;': "'", '&amp;': '&'})|raw }}
  904.                 {% else %}
  905.                     パーツを選択して、お見積もりを作成いただけます。
  906.                 {% endif %}
  907.             </div>
  908.         </div>
  910.         <div class="nz-estimate-body">
  911.             {% for item in categoriesWithParts %}
  912.                 <div class="category-section" data-category-id="{{ item.category.id }}">
  913.                     <div class="category-row">
  914.                         <div class="category-header">
  915.                             <h2 class="category-title">{{ item.category.name }}</h2>
  916.                             {% if item.category.isRequired %}
  917.                                 <span class="category-required-badge">必須</span>
  918.                             {% else %}
  919.                                 <span class="category-optional-badge">任意</span>
  920.                             {% endif %}
  921.                         </div>
  922.                         
  923.                         {# パーツを選択 #}
  924.                         <select class="parts-select" 
  925.                                 data-category-id="{{ item.category.id }}" 
  926.                                 data-required="{{ item.category.isRequired ? '1' : '0' }}"
  927.                                 data-category-name="{{ item.category.name }}">
  928.                             <option value="">選択してください</option>
  929.                             {% for parts in item.parts %}
  930.                                 <option value="{{ parts.id }}" 
  931.                                         data-price="{{ parts.price }}"
  932.                                         data-name="{{ parts.productName }}"
  933.                                         data-child-category-id="{{ parts.childCategoryId ? parts.childCategoryId : '' }}"
  934.                                         data-child-filter-keywords="{{ parts.childFilterKeywords ? parts.childFilterKeywords : '' }}">
  935.                                     {{ parts.productName }}
  936.                                 </option>
  937.                             {% endfor %}
  938.                         </select>
  939.                     </div>
  940.                 </div>
  941.             {% endfor %}
  942.             
  943.             {# 全パーツデータをJavaScript用に埋め込み #}
  944.             <script type="application/json" id="allPartsData">
  945.             [
  946.                 {% for item in categoriesWithParts %}
  947.                     {% for parts in item.parts %}
  948.                     {
  949.                         "id": {{ parts.id }},
  950.                         "category_id": {{ item.category.id }},
  951.                         "category_name": {{ item.category.name|json_encode|raw }},
  952.                         "name": {{ parts.productName|json_encode|raw }},
  953.                         "model_number": {{ parts.modelNumber|default('')|json_encode|raw }},
  954.                         "price": {{ parts.price }},
  955.                         "child_category_id": {{ parts.childCategoryId ? parts.childCategoryId|json_encode|raw : 'null' }},
  956.                         "child_filter_keywords": {{ parts.childFilterKeywords ? parts.childFilterKeywords|json_encode|raw : 'null' }}
  957.                     }{% if not loop.parent.loop.last or not loop.last %},{% endif %}
  958.                     {% endfor %}
  959.                 {% endfor %}
  960.             ]
  961.             </script>
  962.             
  963.             {# カテゴリデータをJavaScriptに埋め込み（子カテゴリを含むすべて） #}
  964.             <script type="application/json" id="allCategoriesData">
  965.             [
  966.                 {% for item in allCategoriesWithParts %}
  967.                 {
  968.                     "id": {{ item.category.id }},
  969.                     "name": {{ item.category.name|json_encode|raw }},
  970.                     "is_required": {{ item.category.isRequired ? 'true' : 'false' }},
  971.                     "parts": [
  972.                         {% for parts in item.parts %}
  973.                         {
  974.                             "id": {{ parts.id }},
  975.                             "name": {{ parts.productName|json_encode|raw }},
  976.                             "model_number": {{ parts.modelNumber|default('')|json_encode|raw }},
  977.                             "price": {{ parts.price }},
  978.                             "child_category_id": {{ parts.childCategoryId ? parts.childCategoryId|json_encode|raw : 'null' }},
  979.                             "child_filter_keywords": {{ parts.childFilterKeywords ? parts.childFilterKeywords|json_encode|raw : 'null' }}
  980.                         }{% if not loop.last %},{% endif %}
  981.                         {% endfor %}
  982.                     ]
  983.                 }{% if not loop.last %},{% endif %}
  984.                 {% endfor %}
  985.             ]
  986.             </script>
  988.             <!-- 見積もりサマリー（常時表示） -->
  989.             <div class="estimate-summary">
  990.                 <div class="summary-header">
  991.                     <div class="summary-note">※ 必須項目をすべて選択すると金額が表示されます</div>
  992.                 </div>
  993.                 
  994.                 <!-- 必須項目未選択警告 -->
  995.                 <div class="required-warning" id="requiredWarning">
  996.                     <div class="required-warning-text">
  997.                         ⚠️ 必須カテゴリをすべて選択してください
  998.                     </div>
  999.                 </div>
  1000.                 
  1001.                 <div class="summary-total">
  1002.                     <div class="summary-total-label">合計金額</div>
  1003.                     <div class="summary-total-price" id="totalPriceArea">
  1004.                         ¥<span id="totalPrice">---</span>
  1005.                     </div>
  1006.                 </div>
  1007.             </div>
  1009.             <!-- スマホ用：下部固定サマリー -->
  1010.             <div class="estimate-summary-sticky" id="stickySummary">
  1011.                 <div class="summary-total">
  1012.                     <div class="summary-total-label">合計金額</div>
  1013.                     <div class="summary-total-price">
  1014.                         ¥<span id="stickyTotalPrice">---</span>
  1015.                     </div>
  1016.                 </div>
  1017.             </div>
  1019.             <!-- 今すぐ購入セクション -->
  1020.             <div class="purchase-section" id="purchaseSection" style="display: none;">
  1021.                 <div class="purchase-card">
  1022.                     <button type="button" class="purchase-btn" id="purchaseBtn">
  1023.                         🛒 すぐに購入
  1024.                     </button>
  1025.                     
  1026.                     {% if config.purchaseNoticeText %}
  1027.                     <div class="purchase-notice">
  1028.                         {{ config.purchaseNoticeText|nl2br }}
  1029.                     </div>
  1030.                     {% endif %}
  1031.                 </div>
  1032.             </div>
  1034.             <!-- お客様情報フォーム -->
  1035.             <div class="customer-form" id="customerForm">
  1036.                 <h3>お客様情報</h3>
  1037.                 <form id="estimateForm">
  1038.                     <div class="form-row">
  1039.                         <div class="form-group form-group-half">
  1040.                             <label class="form-label">
  1041.                                 お名前<span class="required">*</span>
  1042.                             </label>
  1043.                             <input type="text" name="name" class="form-control" required>
  1044.                         </div>
  1045.                         
  1046.                         <div class="form-group form-group-half">
  1047.                             <label class="form-label">
  1048.                                 電話番号<span class="required">*</span>
  1049.                             </label>
  1050.                             <input type="tel" name="tel" class="form-control" required>
  1051.                         </div>
  1052.                     </div>
  1053.                     
  1054.                     <div class="form-group">
  1055.                         <label class="form-label">
  1056.                             メールアドレス<span class="required">*</span>
  1057.                         </label>
  1058.                         <input type="email" name="email" class="form-control" required>
  1059.                     </div>
  1060.                     
  1061.                     <div class="form-group">
  1062.                         <label class="form-label">ご要望・備考</label>
  1063.                         <textarea name="message" class="form-control" rows="3"></textarea>
  1064.                     </div>
  1065.                 </form>
  1066.             </div>
  1068.             <!-- 送信ボタン -->
  1069.             <div class="submit-section" id="submitSection">
  1070.                 <button type="button" class="submit-btn" id="submitBtn">
  1071.                     見積もり依頼を送信
  1072.                 </button>
  1073.                 
  1074.                 {% if config.noticeText %}
  1075.                 <div class="notice-text">
  1076.                     {{ config.noticeText|nl2br }}
  1077.                 </div>
  1078.                 {% endif %}
  1079.             </div>
  1081.             <!-- ローディング -->
  1082.             <div class="loading" id="loading">
  1083.                 <div class="loading-spinner"></div>
  1084.                 <p>送信中...</p>
  1085.             </div>
  1087.             <!-- 完了メッセージ -->
  1088.             <div class="complete-message" id="completeMessage">
  1089.                 <div class="complete-icon">✓</div>
  1090.                 <div class="complete-title">送信完了</div>
  1091.                 <div class="complete-text">
  1092.                     お見積もり依頼を受け付けました。<br>
  1093.                     担当者より折り返しご連絡いたします。
  1094.                 </div>
  1095.             </div>
  1096.         </div>
  1097.     </div>
  1098. </div>
  1100. <!-- フリーエリア -->
  1101. {% if config.freeAreaHtml %}
  1102. <div class="nz-free-area">
  1103.     {{ config.freeAreaHtml|raw }}
  1104. </div>
  1105. {% endif %}
  1107. <script>
  1108. $(function() {
  1109.     let selectedParts = [];
  1110.     
  1111.     // 内部料金設定（顧客には非表示）
  1112.     const additionalCharge = {{ config.additionalCharge|default(0) }};
  1113.     const discountRate = {{ config.discountRate|default(0) }};
  1114.     
  1115.     // データ読み込み
  1116.     const allParts = JSON.parse($('#allPartsData').text());
  1117.     const allCategories = JSON.parse($('#allCategoriesData').text());
  1118.     
  1119.     // 必須カテゴリを取得
  1120.     const requiredCategories = [];
  1121.     allCategories.forEach(function(cat) {
  1122.         if (cat.is_required) {
  1123.             requiredCategories.push(cat.id);
  1124.         }
  1125.     });
  1126.     
  1127.     // パーツ選択時の処理
  1128.     $(document).on('change', '.parts-select', function() {
  1129.         const $select = $(this);
  1130.         const partsId = $select.val();
  1131.         const categoryId = $select.data('category-id');
  1132.         const $currentSection = $select.closest('.category-section');
  1133.         
  1134.         // 現在のセクションの後続の子カテゴリを削除（アニメーション付き）
  1135.         $currentSection.nextAll('.category-section.child-category').each(function() {
  1136.             const $childSection = $(this);
  1137.             const parentId = $childSection.data('parent-id');
  1138.             
  1139.             // 現在のカテゴリの子カテゴリのみ削除
  1140.             if (parentId == categoryId) {
  1141.                 $childSection.removeClass('active').fadeOut(200, function() {
  1142.                     $(this).remove();
  1143.                 });
  1144.             }
  1145.         });
  1146.         
  1147.         if (!partsId) {
  1148.             updateSummary();
  1149.             return;
  1150.         }
  1151.         
  1152.         // 選択したパーツ情報を取得
  1153.         const parts = allParts.find(p => p.id == partsId);
  1154.         
  1155.         if (!parts) {
  1156.             updateSummary();
  1157.             return;
  1158.         }
  1159.         
  1160.         // 子カテゴリがあるか確認（カンマ区切りで複数対応）
  1161.         if (parts.child_category_id) {
  1162.             const childCategoryIds = parts.child_category_id.toString().split(',').map(id => parseInt(id.trim())).filter(id => id > 0);
  1163.             
  1164.             console.log('========================================');
  1165.             console.log('選択されたパーツ:', parts.name);
  1166.             console.log('子カテゴリID:', childCategoryIds);
  1167.             console.log('フィルタキーワード:', parts.child_filter_keywords);
  1168.             
  1169.             childCategoryIds.forEach(function(childCatId) {
  1170.                 const childCategory = allCategories.find(c => c.id == childCatId);
  1171.                 
  1172.                 console.log('--- 子カテゴリID:', childCatId, '---');
  1173.                 console.log('子カテゴリ名:', childCategory ? childCategory.name : 'NOT FOUND');
  1174.                 
  1175.                 if (childCategory && childCategory.parts.length > 0) {
  1176.                     let filteredParts = childCategory.parts;
  1177.                     
  1178.                     // フィルタキーワードがある場合は絞り込み
  1179.                     if (parts.child_filter_keywords) {
  1180.                         const keywords = parts.child_filter_keywords.split(',').map(k => k.trim().toLowerCase());
  1181.                         
  1182.                         console.log('=== フィルタ実行 ===');
  1183.                         console.log('子カテゴリ:', childCategory.name);
  1184.                         console.log('フィルタキーワード:', keywords);
  1185.                         console.log('全パーツ数:', childCategory.parts.length);
  1186.                         
  1187.                         filteredParts = childCategory.parts.filter(p => {
  1188.                             const searchText = (p.name + ' ' + (p.model_number || '')).toLowerCase();
  1189.                             const matched = keywords.some(kw => searchText.includes(kw));
  1190.                             console.log(`  - ${p.name}: ${matched ? 'マッチ' : '除外'} (検索文字: ${searchText})`);
  1191.                             return matched;
  1192.                         });
  1193.                         
  1194.                         console.log('フィルタ後パーツ数:', filteredParts.length);
  1195.                     }
  1196.                     
  1197.                     // フィルタ後のパーツがある場合のみ子カテゴリを表示
  1198.                     if (filteredParts.length > 0) {
  1199.                         // 子カテゴリセクションを作成
  1200.                         createChildCategorySection({
  1201.                             ...childCategory,
  1202.                             parts: filteredParts
  1203.                         }, categoryId);
  1204.                     }
  1205.                 }
  1206.             });
  1207.         }
  1208.         
  1209.         updateSummary();
  1210.     });
  1211.     
  1212.     // 子カテゴリセクション作成（セレクトボックス形式）
  1213.     function createChildCategorySection(category, parentCategoryId) {
  1214.         const $parentSection = $(`.category-section[data-category-id="${parentCategoryId}"]`);
  1215.         
  1216.         const childHtml = `
  1217.             <div class="category-section child-category" data-category-id="${category.id}" data-parent-id="${parentCategoryId}">
  1218.                 <div class="category-row">
  1219.                     <div class="category-header">
  1220.                         <h2 class="category-title child">└ ${category.name}</h2>
  1221.                         ${category.is_required ? '<span class="category-required-badge">必須</span>' : '<span class="category-optional-badge">任意</span>'}
  1222.                     </div>
  1223.                     
  1224.                     <select class="parts-select" 
  1225.                             data-category-id="${category.id}" 
  1226.                             data-parent-category-id="${parentCategoryId}"
  1227.                             data-required="${category.is_required ? '1' : '0'}"
  1228.                             data-category-name="${category.name}">
  1229.                         ${category.parts.map((p, index) => `
  1230.                             <option value="${p.id}" 
  1231.                                     data-price="${p.price}"
  1232.                                     data-name="${p.name}"
  1233.                                     data-child-category-id="${p.child_category_id || ''}"
  1234.                                     data-child-filter-keywords="${p.child_filter_keywords || ''}"
  1235.                                     ${index === 0 ? 'selected' : ''}>
  1236.                                 ${p.name}
  1237.                             </option>
  1238.                         `).join('')}
  1239.                     </select>
  1240.                 </div>
  1241.             </div>
  1242.         `;
  1243.         
  1244.         $parentSection.after(childHtml);
  1245.         
  1246.         // 挿入後、activeクラスを追加してスライド表示
  1247.         setTimeout(function() {
  1248.             $(`.child-category[data-parent-id="${parentCategoryId}"]`).addClass('active');
  1249.         }, 10);
  1250.     }
  1251.     
  1252.     // サマリー更新
  1253.     function updateSummary() {
  1254.         const items = [];
  1255.         const selectedCategories = new Set();
  1256.         let total = 0;
  1257.         
  1258.         // すべてのセレクトボックスを取得
  1259.         $('.parts-select').each(function() {
  1260.             const $select = $(this);
  1261.             const value = $select.val();
  1262.             
  1263.             if (value && value !== '') {
  1264.                 const selectedOption = $select.find('option:selected');
  1265.                 const categoryId = $select.data('category-id');
  1266.                 const parentCategoryId = $select.data('parent-category-id');
  1267.                 const categoryName = $select.data('category-name');
  1268.                 const price = Math.floor(parseFloat(selectedOption.data('price'))); // 小数点以下切り捨て
  1269.                 const name = selectedOption.data('name');
  1270.                 
  1271.                 items.push({
  1272.                     parts_id: value,
  1273.                     category_name: categoryName,
  1274.                     name: name,
  1275.                     price: price
  1276.                 });
  1277.                 
  1278.                 // 必須カテゴリの判定: 子カテゴリの場合は親カテゴリIDを、そうでない場合は自身のIDを使用
  1279.                 const checkCategoryId = parentCategoryId || categoryId;
  1280.                 if (checkCategoryId) {
  1281.                     selectedCategories.add(parseInt(checkCategoryId));
  1282.                 }
  1283.                 total += price;
  1284.             }
  1285.         });
  1286.         
  1287.         selectedParts = items;
  1288.         
  1289.         // 必須カテゴリがすべて選択されているかチェック
  1290.         const allRequiredSelected = requiredCategories.every(catId => selectedCategories.has(catId));
  1291.         
  1292.         if (items.length > 0) {
  1293.             // 合計金額の表示
  1294.             if (allRequiredSelected) {
  1295.                 // 内部料金計算: 合計 = パーツ合計 × (1 - 割引率/100) + 追加料金
  1296.                 let finalTotal = total * (1 - discountRate / 100) + additionalCharge;
  1297.                 finalTotal = Math.round(finalTotal); // 四捨五入
  1298.                 
  1299.                 $('#totalPrice').text(finalTotal.toLocaleString());
  1300.                 $('#stickyTotalPrice').text(finalTotal.toLocaleString()); // 固定サマリーも更新
  1301.                 $('#totalPriceArea').removeClass('hidden');
  1302.                 $('#requiredWarning').removeClass('active');
  1303.                 $('#customerForm').addClass('active');
  1304.                 $('#submitSection').addClass('active');
  1305.                 $('#purchaseSection').show();
  1306.             } else {
  1307.                 $('#totalPrice').text('---');
  1308.                 $('#stickyTotalPrice').text('---'); // 固定サマリーもクリア
  1309.                 $('#totalPriceArea').addClass('hidden');
  1310.                 $('#requiredWarning').addClass('active');
  1311.                 $('#customerForm').removeClass('active');
  1312.                 $('#submitSection').removeClass('active');
  1313.                 $('#purchaseSection').hide();
  1314.             }
  1315.         } else {
  1316.             $('#totalPrice').text('---');
  1317.             $('#stickyTotalPrice').text('---'); // 固定サマリーもクリア
  1318.             $('#totalPriceArea').addClass('hidden');
  1319.             $('#requiredWarning').removeClass('active');
  1320.             $('#customerForm').removeClass('active');
  1321.             $('#submitSection').removeClass('active');
  1322.             $('#purchaseSection').hide();
  1323.         }
  1324.     }
  1325.     
  1326.     // 送信
  1327.     $('#submitBtn').on('click', function() {
  1328.         if (selectedParts.length === 0) {
  1329.             alert('パーツを選択してください。');
  1330.             return;
  1331.         }
  1332.         
  1333.         const form = $('#estimateForm')[0];
  1334.         if (!form.checkValidity()) {
  1335.             form.reportValidity();
  1336.             return;
  1337.         }
  1338.         
  1339.         const formData = new FormData(form);
  1340.         formData.append('items', JSON.stringify(selectedParts));
  1341.         
  1342.         $('#submitBtn').prop('disabled', true);
  1343.         $('#loading').addClass('active');
  1344.         
  1345.         $.ajax({
  1346.             url: '{{ url('nz_estimate_simulator_send') }}',
  1347.             type: 'POST',
  1348.             data: formData,
  1349.             processData: false,
  1350.             contentType: false,
  1351.             headers: {
  1352.                 'x-csrf-token': $('meta[name="x-csrf-token"]').attr('content')
  1353.             },
  1354.             success: function(response) {
  1355.                 $('#loading').removeClass('active');
  1356.                 
  1357.                 if (response.success) {
  1358.                     $('.category-section, .estimate-summary, .customer-form, .submit-section').hide();
  1359.                     $('#completeMessage').addClass('active');
  1360.                 } else {
  1361.                     alert(response.message || '送信に失敗しました。');
  1362.                     $('#submitBtn').prop('disabled', false);
  1363.                 }
  1364.             },
  1365.             error: function(xhr, status, error) {
  1366.                 $('#loading').removeClass('active');
  1367.                 
  1368.                 let errorMessage = '送信中にエラーが発生しました。';
  1369.                 
  1370.                 if (xhr.responseJSON && xhr.responseJSON.message) {
  1371.                     errorMessage = xhr.responseJSON.message;
  1372.                 } else if (xhr.status === 0) {
  1373.                     errorMessage = 'ネットワークエラーが発生しました。インターネット接続を確認してください。';
  1374.                 } else if (xhr.status === 500) {
  1375.                     errorMessage = 'サーバーエラーが発生しました。しばらく時間をおいて再度お試しください。';
  1376.                 } else if (xhr.status === 403) {
  1377.                     errorMessage = 'セキュリティエラーが発生しました。ページを再読み込みして再度お試しください。';
  1378.                 }
  1379.                 
  1380.                 alert(errorMessage);
  1381.                 console.error('Error details:', {
  1382.                     status: xhr.status,
  1383.                     statusText: xhr.statusText,
  1384.                     responseText: xhr.responseText,
  1385.                     error: error
  1386.                 });
  1387.                 
  1388.                 $('#submitBtn').prop('disabled', false);
  1389.             }
  1390.         });
  1391.     });
  1393.     // 今すぐ購入ボタン
  1394.     $('#purchaseBtn').on('click', function(e) {
  1395.         e.preventDefault();
  1396.         
  1397.         console.log('購入ボタンがクリックされました');
  1398.         
  1399.         if (selectedParts.length === 0) {
  1400.             alert('パーツが選択されていません');
  1401.             return;
  1402.         }
  1404.         // パーツ合計を計算
  1405.         const partsTotal = Math.floor(selectedParts.reduce((sum, item) => sum + item.price, 0));
  1406.         
  1407.         // 内部料金調整を適用: 合計 = パーツ合計 × (1 - 割引率/100) + 追加料金
  1408.         let finalTotal = partsTotal * (1 - discountRate / 100) + additionalCharge;
  1409.         finalTotal = Math.floor(finalTotal); // 小数点以下切り捨て
  1411.         console.log('カート追加:', {
  1412.             partsTotal: partsTotal,
  1413.             discountRate: discountRate,
  1414.             additionalCharge: additionalCharge,
  1415.             finalTotal: finalTotal,
  1416.             selectedParts: selectedParts
  1417.         });
  1419.         // ボタンを無効化
  1420.         $(this).prop('disabled', true).text('商品作成中...');
  1422.         // カートに追加リクエスト
  1423.         const ajaxUrl = '/estimate_simulator/add_to_cart';
  1424.         console.log('AJAX URL:', ajaxUrl);
  1425.         
  1426.         $.ajax({
  1427.             url: ajaxUrl,
  1428.             type: 'POST',
  1429.             contentType: 'application/json',
  1430.             data: JSON.stringify({
  1431.                 selected_parts: selectedParts,
  1432.                 total_price: finalTotal
  1433.             }),
  1434.             beforeSend: function() {
  1435.                 console.log('AJAXリクエスト送信開始');
  1436.             },
  1437.             success: function(response) {
  1438.                 console.log('AJAX成功:', response);
  1439.                 if (response.success) {
  1440.                     console.log('リダイレクト開始:', response.product_url);
  1441.                     
  1442.                     // 複数の方法でリダイレクトを試行
  1443.                     try {
  1444.                         window.location.href = response.product_url;
  1445.                     } catch(e) {
  1446.                         console.error('location.href失敗:', e);
  1447.                         try {
  1448.                             window.location.assign(response.product_url);
  1449.                         } catch(e2) {
  1450.                             console.error('location.assign失敗:', e2);
  1451.                             window.location.replace(response.product_url);
  1452.                         }
  1453.                     }
  1454.                 } else {
  1455.                     alert(response.message || '商品作成に失敗しました');
  1456.                     $('#purchaseBtn').prop('disabled', false).text('🛒 すぐに購入');
  1457.                 }
  1458.             },
  1459.             error: function(xhr, status, error) {
  1460.                 console.log('AJAXエラー:', {status: xhr.status, error: error, responseText: xhr.responseText});
  1461.                 let errorMessage = '商品作成中にエラーが発生しました';
  1462.                 if (xhr.responseJSON && xhr.responseJSON.message) {
  1463.                     errorMessage = xhr.responseJSON.message;
  1464.                 }
  1465.                 alert(errorMessage);
  1466.                 $('#purchaseBtn').prop('disabled', false).text('🛒 すぐに購入');
  1467.             }
  1468.         });
  1469.     });
  1470.     
  1471.     // スマホ用：スクロール検知で固定サマリーを表示/非表示
  1472.     function initStickySummary() {
  1473.         if (window.innerWidth > 768) {
  1474.             return; // タブレット以上は無効
  1475.         }
  1476.         
  1477.         const $originalSummary = $('.estimate-summary').first();
  1478.         const $stickySummary = $('#stickySummary');
  1479.         
  1480.         if ($originalSummary.length === 0 || $stickySummary.length === 0) {
  1481.             return;
  1482.         }
  1483.         
  1484.         function checkSummaryPosition() {
  1485.             const summaryTop = $originalSummary.offset().top;
  1486.             const summaryBottom = summaryTop + $originalSummary.outerHeight();
  1487.             const scrollTop = $(window).scrollTop();
  1488.             const windowBottom = scrollTop + $(window).height();
  1489.             
  1490.             // 元のサマリーが画面外に出たら固定サマリーを表示
  1491.             if (summaryBottom < scrollTop || summaryTop > windowBottom) {
  1492.                 $stickySummary.addClass('visible');
  1493.                 $('body').addClass('sticky-summary-active');
  1494.             } else {
  1495.                 $stickySummary.removeClass('visible');
  1496.                 $('body').removeClass('sticky-summary-active');
  1497.             }
  1498.         }
  1499.         
  1500.         $(window).on('scroll', checkSummaryPosition);
  1501.         $(window).on('resize', checkSummaryPosition);
  1502.         
  1503.         // 初回チェック（少し遅延させる）
  1504.         setTimeout(checkSummaryPosition, 500);
  1505.     }
  1506.     
  1507.     // DOMが完全に読み込まれた後に初期化
  1508.     initStickySummary();
  1509. });
  1510. </script>
  1511. {% endblock %}