app/template/default/Product/detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {% block stylesheet %}
  16.     <style>
  18.         .slick-slider {
  19.             margin-bottom: 10px;
  20.             margin-top: -20px;
  21.         }
  23.         .slick-dots {
  24.             position: absolute;
  25.             bottom: -45px;
  26.             display: block;
  27.             width: 100%;
  28.             padding: 0;
  29.             list-style: none;
  30.             text-align: center;
  31.         }
  33.         .slick-dots li {
  34.             position: relative;
  35.             display: inline-block;
  36.             width: 20px;
  37.             height: 20px;
  38.             margin: 0 5px;
  39.             padding: 0;
  41.             cursor: pointer;
  42.         }
  44.         .slick-dots li button {
  45.             font-size: 0;
  46.             line-height: 0;
  47.             display: block;
  48.             width: 20px;
  49.             height: 20px;
  50.             padding: 5px;
  51.             cursor: pointer;
  52.             color: transparent;
  53.             border: 0;
  54.             outline: none;
  55.             background: transparent;
  56.         }
  58.         .slick-dots li button:hover,
  59.         .slick-dots li button:focus {
  60.             outline: none;
  61.         }
  63.         .slick-dots li button:hover:before,
  64.         .slick-dots li button:focus:before {
  65.             opacity: 1;
  66.         }
  68.         .slick-dots li button:before {
  69.             content: " ";
  70.             line-height: 20px;
  71.             position: absolute;
  72.             top: 0;
  73.             left: 0;
  74.             width: 12px;
  75.             height: 12px;
  76.             text-align: center;
  77.             opacity: .25;
  78.             background-color: black;
  79.             border-radius: 50%;
  81.         }
  83.         .slick-dots li.slick-active button:before {
  84.             opacity: .75;
  85.             background-color: black;
  86.         }
  88.         .slick-dots li button.thumbnail img {
  89.             width: 0;
  90.             height: 0;
  91.         }
  93.     </style>
  94.     <link rel="stylesheet" href="/html/user_data/js/style.css">
  95.     <link rel="stylesheet" href="/html/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  96.     <style>
  97.         /* Show zoom cursor on product images to hint click-to-expand */
  98.         .item_visual .slide-item a { display: block; cursor: zoom-in; }
  99.     </style>
  100.     <style>
  101.         /* ============================================
  102.            商品詳細グリッド: 画像50% / 内容50%（均等）
  103.         ============================================ */
  104.         @media (min-width: 768px) {
  105.             body.product_page .ec-grid2 {
  106.                 display: flex;
  107.                 align-items: flex-start;
  108.             }
  109.             body.product_page .ec-grid2 .ec-grid2__cell {
  110.                 width: 50%;
  111.                 flex: 0 0 50%;
  112.                 min-width: 0;
  113.             }
  114.             body.product_page .ec-grid2 .ec-grid2__cell2 {
  115.                 width: 50%;
  116.                 flex: 0 0 50%;
  117.                 min-width: 0;
  118.             }
  119.         }
  121.         /* ============================================
  122.            商品説明欄内のHTMLが画面幅を突き抜けないように
  123.         ============================================ */
  124.         body.product_page .ec-productRole__description {
  125.             min-width: 0;
  126.             overflow-wrap: break-word;
  127.             word-break: break-word;
  128.         }
  129.         body.product_page .ec-productRole__description img,
  130.         body.product_page .ec-productRole__description table,
  131.         body.product_page .ec-productRole__description iframe,
  132.         body.product_page .ec-productRole__description video {
  133.             max-width: 100% !important;
  134.             height: auto;
  135.         }
  136.         body.product_page .ec-productRole__description table {
  137.             display: block;
  138.             overflow-x: auto;
  139.             -webkit-overflow-scrolling: touch;
  140.         }
  142.         /* ============================================
  143.            スマホ用 見積金額 下部固定バー
  144.         ============================================ */
  145.         #sp-mitsumori-bar {
  146.             display: none;
  147.         }
  149.         /* ============================================
  150.            スマホ用 お見積りの詳細 ボトムシート
  151.         ============================================ */
  152.         .sp-detail-sheet { display: none; }
  153.         .sp-detail-sheet.is-open {
  154.             display: block;
  155.             position: fixed;
  156.             top: 0; left: 0; right: 0; bottom: 0;
  157.             z-index: 2000;
  158.         }
  159.         .sp-detail-sheet__overlay {
  160.             position: absolute;
  161.             top: 0; left: 0; right: 0; bottom: 0;
  162.             background: rgba(0,0,0,0.45);
  163.         }
  164.         .sp-detail-sheet__panel {
  165.             position: absolute;
  166.             left: 0; right: 0; bottom: 0;
  167.             background: #fff;
  168.             border-radius: 14px 14px 0 0;
  169.             max-height: 82vh;
  170.             display: flex;
  171.             flex-direction: column;
  172.             box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
  173.             padding-bottom: env(safe-area-inset-bottom);
  174.             animation: spSheetUp 0.22s ease-out;
  175.         }
  176.         @keyframes spSheetUp {
  177.             from { transform: translateY(100%); }
  178.             to   { transform: translateY(0); }
  179.         }
  180.         .sp-detail-sheet__header {
  181.             display: flex;
  182.             align-items: center;
  183.             justify-content: space-between;
  184.             padding: 14px 16px;
  185.             border-bottom: 1px solid #eee;
  186.             flex: 0 0 auto;
  187.         }
  188.         .sp-detail-sheet__title { font-size: 16px; font-weight: bold; color: #333; }
  189.         .sp-detail-sheet__close {
  190.             background: none;
  191.             border: none;
  192.             font-size: 26px;
  193.             line-height: 1;
  194.             color: #888;
  195.             cursor: pointer;
  196.             padding: 0 4px;
  197.         }
  198.         .sp-detail-sheet__body {
  199.             overflow-y: auto;
  200.             -webkit-overflow-scrolling: touch;
  201.             padding: 4px 0;
  202.             flex: 1 1 auto;
  203.         }
  204.         .sp-detail-sheet__body ul { list-style: none; margin: 0; padding: 0; }
  205.         .sp-detail-sheet__body li { border-bottom: 1px solid #f2f2f2; }
  206.         .sp-detail-sheet__body .nav-link {
  207.             display: flex;
  208.             align-items: center;
  209.             justify-content: space-between;
  210.             padding: 12px 16px;
  211.             color: #333;
  212.             font-size: 14px;
  213.         }
  214.         .sp-detail-sheet__body .nav-link .float-right {
  215.             float: none !important;
  216.             font-weight: bold;
  217.             white-space: nowrap;
  218.             margin-left: auto;
  219.         }
  220.         .sp-detail-sheet__footer {
  221.             display: flex;
  222.             gap: 8px;
  223.             padding: 12px 16px 16px;
  224.             border-top: 1px solid #eee;
  225.             flex: 0 0 auto;
  226.         }
  227.         .sp-detail-sheet__footer button {
  228.             flex: 1 1 auto;
  229.             padding: 12px;
  230.             border-radius: 8px;
  231.             font-size: 14px;
  232.             font-weight: bold;
  233.             cursor: pointer;
  234.         }
  235.         .sp-detail-sheet__invoice {
  236.             background: #fff;
  237.             border: 1px solid #17a2b8;
  238.             color: #17a2b8;
  239.         }
  240.         .sp-detail-sheet__cart {
  241.             background: #c00;
  242.             border: 1px solid #c00;
  243.             color: #fff;
  244.         }
  246.         /* ============================================
  247.            商品タイプ選択 共通スタイル
  248.         ============================================ */
  250.         /* セクションラベル */
  251.         .rp-section-label {
  252.             font-size: 14px;
  253.             font-weight: bold;
  254.             color: #333;
  255.             margin-bottom: 10px;
  256.         }
  257.         .rp-section-label span {
  258.             font-weight: normal;
  259.             color: #c00;
  260.         }
  262.         /* ---- 1. 画像付きカード ---- */
  263.         .rp-card-group {
  264.             display: flex;
  265.             flex-wrap: wrap;
  266.             gap: 8px;
  267.             margin-bottom: 4px;
  268.         }
  269.         .rp-card {
  270.             position: relative;
  271.             cursor: pointer;
  272.             touch-action: manipulation; /* drop iOS 300ms tap delay (#15) */
  273.             -webkit-tap-highlight-color: rgba(0,0,0,0);
  274.             /* iOS Safari: prevent the first tap from being consumed as a text
  275.                selection ("字だけ青くなる" = selection highlight) which forced a
  276.                2nd tap to actually switch the option (#15). */
  277.             -webkit-user-select: none; -moz-user-select: none; user-select: none;
  278.             -webkit-touch-callout: none;
  279.             width: 110px;
  280.             border: 2px solid #ddd;
  281.             border-radius: 10px;
  282.             overflow: hidden;
  283.             transition: border-color 0.2s, box-shadow 0.2s;
  284.             background: #fff;
  285.             text-decoration: none;
  286.             color: #333;
  287.             display: block;
  288.         }
  289.         /* Gate :hover behind real hover-capable pointers. On iOS Safari a
  290.            :hover rule that changes appearance makes the first tap apply the
  291.            hover state and suppresses the click, so the option chip needed a
  292.            second tap to fire its onclick (is-selected + price update). */
  293.         @media (hover: hover) and (pointer: fine) {
  294.             .rp-card:hover {
  295.                 border-color: #999;
  296.                 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  297.             }
  298.         }
  299.         .rp-card.is-selected {
  300.             border-color: #1a6fcf;
  301.             box-shadow: 0 2px 10px rgba(26,111,207,0.25);
  302.         }
  303.         /* visually-hidden instead of display:none. A label wrapping a
  304.            display:none radio fires its tap unreliably on iOS Safari (first tap
  305.            often ignored -> "2回タッチ"). Keeping the input in the layout but
  306.            invisible makes the first tap register. */
  307.         .rp-card input[type="radio"] {
  308.             position: absolute; opacity: 0; width: 1px; height: 1px;
  309.             margin: 0; pointer-events: none;
  310.         }
  311.         .rp-card__image {
  312.             width: 100%;
  313.             aspect-ratio: 1 / 1;
  314.             object-fit: cover;
  315.             display: block;
  316.             background: #f5f5f5;
  317.         }
  318.         .rp-card__placeholder {
  319.             width: 100%;
  320.             aspect-ratio: 1 / 1;
  321.             background: #f0f0f0;
  322.             display: flex;
  323.             align-items: center;
  324.             justify-content: center;
  325.             color: #bbb;
  326.             font-size: 24px;
  327.         }
  328.         .rp-card__name {
  329.             display: block;
  330.             padding: 5px 5px;
  331.             font-size: 11px;
  332.             color: #333;
  333.             text-align: center;
  334.             line-height: 1.4;
  335.             word-break: break-all;
  336.         }
  337.         .rp-card.is-selected .rp-card__name { color: #1a6fcf; font-weight: bold; }
  338.         .rp-card.is-selected::after {
  339.             content: "✓";
  340.             position: absolute;
  341.             top: 3px; right: 6px;
  342.             color: #1a6fcf;
  343.             font-size: 13px;
  344.             font-weight: bold;
  345.         }
  347.         /* ---- 2. ボタン式ラジオ（画像なし・8個以内）---- */
  348.         .rp-btn-group {
  349.             display: flex;
  350.             flex-wrap: wrap;
  351.             gap: 8px;
  352.             margin-bottom: 4px;
  353.             max-width: 100%;
  354.             min-width: 0;
  355.         }
  356.         .rp-btn {
  357.             cursor: pointer;
  358.             touch-action: manipulation; /* drop iOS 300ms tap delay (#15) */
  359.             -webkit-tap-highlight-color: rgba(0,0,0,0);
  360.             /* iOS Safari: block first-tap text selection so 1 tap switches (#15) */
  361.             -webkit-user-select: none; -moz-user-select: none; user-select: none;
  362.             -webkit-touch-callout: none;
  363.             padding: 8px 14px;
  364.             border: 2px solid #ddd;
  365.             border-radius: 10px;
  366.             font-size: 13px;
  367.             color: #333;
  368.             background: #fff;
  369.             transition: border-color 0.2s, background 0.2s;
  370.             white-space: normal;
  371.             max-width: 100%;
  372.             overflow-wrap: anywhere;
  373.             text-decoration: none;
  374.         }
  375.         @media (hover: hover) and (pointer: fine) {
  376.             .rp-btn:hover { border-color: #999; }
  377.         }
  378.         .rp-btn.is-selected {
  379.             border-color: #1a6fcf;
  380.             color: #1a6fcf;
  381.             font-weight: bold;
  382.             background: #f0f6ff;
  383.         }
  384.         .rp-btn input[type="radio"] {
  385.             position: absolute; opacity: 0; width: 1px; height: 1px;
  386.             margin: 0; pointer-events: none;
  387.         }
  389.         /* iOS Safari "2回タッチ" fix for the type-selection link chips.
  390.            The global theme stylesheet ships an ungated `a:hover{color:#296292}`
  391.            (paired with `a{color:#337ab7;text-decoration:underline}`). Because
  392.            .rp-btn / .rp-card are real <a> links, iOS Safari applies that hover
  393.            colour on the FIRST tap — the chip text turns blue (#296292, the
  394.            reported "字だけ青くなる") — and treats the tap as a hover, swallowing
  395.            the navigation so a 2nd tap was needed. The local .rp-*:hover rules
  396.            are already gated behind (hover:hover), but this inherited global
  397.            rule was not. Pin the hover/active colour to the base/selected colour
  398.            so tapping produces no visual change and the first tap navigates
  399.            immediately. Higher specificity (0,2,0 / 0,3,0) overrides a:hover. */
  400.         .rp-btn:hover,
  401.         .rp-btn:active { color: #333; text-decoration: none; }
  402.         .rp-btn.is-selected:hover,
  403.         .rp-btn.is-selected:active { color: #1a6fcf; text-decoration: none; }
  404.         .rp-card:hover,
  405.         .rp-card:active { color: #333; text-decoration: none; }
  406.         .rp-card:hover .rp-card__name,
  407.         .rp-card:active .rp-card__name { color: #333; }
  408.         .rp-card.is-selected:hover .rp-card__name,
  409.         .rp-card.is-selected:active .rp-card__name { color: #1a6fcf; }
  411.         /* ---- 選択肢が多い場合: 縦3段に収めて横スクロール（顧客要望「3列くらいで横スクロール」）---- */
  412.         /* grid-auto-flow:column + 3行固定 → 選択肢が縦に最大3段、超過分は右へ伸び横スクロールで閲覧 */
  413.         .rp-btn-group.is-scroll,
  414.         .opt-btn-group.is-scroll {
  415.             display: grid;
  416.             grid-auto-flow: column;
  417.             grid-template-rows: repeat(3, auto);
  418.             grid-auto-columns: max-content;
  419.             justify-content: start;
  420.             align-items: start;
  421.             gap: 8px;
  422.             overflow-x: auto;
  423.             overflow-y: hidden;
  424.             -webkit-overflow-scrolling: touch;
  425.             scrollbar-width: thin;
  426.             /* 上下に余白を確保して、行の枠線が overflow クリップ／スクロールバーに
  427.                切り取られないようにする（「文字列が長いと下枠が消える」対策）。 */
  428.             padding: 2px 0 12px;
  429.         }
  430.         /* is-scroll（横スクロール）内では選択肢を折り返さず単一行に固定する。
  431.            折り返すと行高が不揃いになり overflow-y:hidden で下枠が切れるため、
  432.            長い選択肢は折り返さず横スクロールで見せる（本来の設計意図）。 */
  433.         .rp-btn-group.is-scroll .rp-btn,
  434.         .rp-btn-group.is-scroll .opt-btn,
  435.         .opt-btn-group.is-scroll .rp-btn,
  436.         .opt-btn-group.is-scroll .opt-btn {
  437.             white-space: nowrap;
  438.             word-break: normal;
  439.             overflow-wrap: normal;
  440.         }
  441.         .rp-btn-group.is-scroll::-webkit-scrollbar,
  442.         .opt-btn-group.is-scroll::-webkit-scrollbar {
  443.             height: 6px;
  444.         }
  445.         .rp-btn-group.is-scroll::-webkit-scrollbar-thumb,
  446.         .opt-btn-group.is-scroll::-webkit-scrollbar-thumb {
  447.             background: #c0c0c0;
  448.             border-radius: 3px;
  449.         }
  451.         /* ---- 3. プルダウン（画像なし・9個以上）---- */
  452.         .rp-select-wrap {
  453.             margin-bottom: 4px;
  454.         }
  455.         .rp-select {
  456.             width: 100%;
  457.             max-width: 420px;
  458.             padding: 8px 12px;
  459.             border: 2px solid #ddd;
  460.             border-radius: 10px;
  461.             font-size: 13px;
  462.             color: #333;
  463.             background: #fff;
  464.             appearance: none;
  465.             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  466.             background-repeat: no-repeat;
  467.             background-position: right 12px center;
  468.             cursor: pointer;
  469.         }
  470.         .rp-select:focus {
  471.             outline: none;
  472.             border-color: #1a6fcf;
  473.         }
  475.         /* ---- オプション選択ボタン（枠線ラジオ）---- */
  476.         .opt-btn-group {
  477.             display: flex;
  478.             flex-wrap: wrap;
  479.             gap: 8px;
  480.             padding: 6px 0;
  481.             max-width: 100%;
  482.             min-width: 0;
  483.         }
  484.         .opt-btn {
  485.             cursor: pointer;
  486.             touch-action: manipulation; /* drop iOS 300ms tap delay (#15) */
  487.             -webkit-tap-highlight-color: rgba(0,0,0,0);
  488.             /* iOS Safari: block first-tap text selection so 1 tap switches (#15) */
  489.             -webkit-user-select: none; -moz-user-select: none; user-select: none;
  490.             -webkit-touch-callout: none;
  491.             padding: 7px 14px;
  492.             border: 2px solid #ddd;
  493.             border-radius: 10px;
  494.             font-size: 13px;
  495.             color: #333;
  496.             background: #fff;
  497.             transition: border-color 0.2s, background 0.2s;
  498.             white-space: normal;
  499.             max-width: 100%;
  500.             overflow-wrap: anywhere;
  501.             text-decoration: none;
  502.         }
  503.         @media (hover: hover) and (pointer: fine) {
  504.             .opt-btn:hover { border-color: #999; }
  505.         }
  506.         .opt-btn.is-selected {
  507.             border-color: #1a6fcf;
  508.             color: #1a6fcf;
  509.             font-weight: bold;
  510.             background: #f0f6ff;
  511.         }
  512.         .opt-btn input[type="radio"] {
  513.             position: absolute; opacity: 0; width: 1px; height: 1px;
  514.             margin: 0; pointer-events: none;
  515.         }
  517.         /* opt-btn with color swatch image. The label still works as a
  518.            radio target — clicking the image checks the input. The text
  519.            label stays under the image so users can still read the name. */
  520.         .opt-btn--with-image {
  521.             padding: 4px 6px 6px;
  522.             white-space: normal;
  523.             text-align: center;
  524.             display: inline-flex;
  525.             flex-direction: column;
  526.             align-items: center;
  527.             min-width: 96px;
  528.             max-width: 140px;
  529.         }
  530.         .opt-btn--with-image .opt-btn__img {
  531.             display: block;
  532.             width: 88px;
  533.             height: 66px;
  534.             object-fit: cover;
  535.             border-radius: 6px;
  536.             margin-bottom: 4px;
  537.             background: #f5f5f5;
  538.         }
  539.         .opt-btn--with-image .opt-btn__name {
  540.             display: block;
  541.             font-size: 11px;
  542.             line-height: 1.3;
  543.             color: inherit;
  544.         }
  545.         .opt-btn--with-image.is-selected .opt-btn__img {
  546.             outline: 2px solid #1a6fcf;
  547.             outline-offset: 1px;
  548.         }
  550.         /* sale_type=2 (内窓) 補助金対象ガラスの強調表示.
  551.            補助金が出る性能区分 (真空断熱 / Low-E複層 等) のガラス選択肢に
  552.            緑枠 + 「補助金対象」バッジを付け、選択前から判別できるようにする。 */
  553.         .opt-btn--subsidy {
  554.             border-color: #2e7d32;
  555.         }
  556.         .opt-btn--subsidy.is-selected {
  557.             border-color: #1a6fcf;
  558.         }
  559.         .opt-btn__subsidy-badge {
  560.             display: inline-block;
  561.             margin-left: 6px;
  562.             padding: 1px 6px;
  563.             border-radius: 6px;
  564.             background: #2e7d32;
  565.             color: #fff;
  566.             font-size: 11px;
  567.             font-weight: bold;
  568.             white-space: nowrap;
  569.         }
  571.         /* ============================================
  572.            施工エリア案内
  573.         ============================================ */
  574.         .ec-areaNotice {
  575.             margin: 16px 0;
  576.             padding: 16px 20px;
  577.             background: #f8f9fa;
  578.             border-left: 4px solid #1a6fcf;
  579.             border-radius: 0 8px 8px 0;
  580.         }
  581.         .ec-areaNotice__inner {
  582.             display: flex;
  583.             align-items: flex-start;
  584.             gap: 12px;
  585.         }
  586.         .ec-areaNotice__icon {
  587.             font-size: 22px;
  588.             line-height: 1;
  589.             flex-shrink: 0;
  590.             margin-top: 2px;
  591.         }
  592.         .ec-areaNotice__body {
  593.             flex: 1;
  594.         }
  595.         .ec-areaNotice__title {
  596.             font-size: 13px;
  597.             font-weight: bold;
  598.             color: #1a6fcf;
  599.             margin: 0 0 6px;
  600.         }
  601.         .ec-areaNotice__text {
  602.             font-size: 13px;
  603.             color: #444;
  604.             line-height: 1.7;
  605.             margin: 0;
  606.         }
  607.         .ec-areaNotice__text strong {
  608.             color: #222;
  609.         }
  610.         .ec-areaNotice__link {
  611.             display: inline-block;
  612.             margin-top: 8px;
  613.             font-size: 12px;
  614.             color: #1a6fcf;
  615.             text-decoration: underline;
  616.         }
  617.         .ec-areaNotice__link:hover {
  618.             color: #0d4fa0;
  619.         }
  621.         /* ============================================
  622.            SNSシェア + ブランド名 タイトル行
  623.         ============================================ */
  624.         .ec-productRole__titleRow {
  625.             display: flex;
  626.             align-items: center;
  627.             justify-content: space-between;
  628.             gap: 8px;
  629.             margin-bottom: 4px;
  630.         }
  631.         .ec-productRole__titleRow .ec-headingTitle {
  632.             margin: 0;
  633.             flex: 1;
  634.             font-size: 18px;
  635.         }
  636.         .ec-share-inline {
  637.             display: flex;
  638.             align-items: center;
  639.             gap: 8px;
  640.             flex-shrink: 0;
  641.         }
  642.         @media (max-width: 767px) {
  643.             /* maker_area の float を解除して独立表示 */
  644.             #maker_area {
  645.                 float: none !important;
  646.                 width: auto !important;
  647.                 height: auto !important;
  648.                 display: block;
  649.                 margin-bottom: 4px;
  650.             }
  651.             /* タイトル行: 商品名が全幅を占有しSNSは右寄せ下段 */
  652.             .ec-productRole__titleRow {
  653.                 flex-wrap: wrap;
  654.                 clear: both;
  655.             }
  656.             .ec-productRole__titleRow .ec-headingTitle {
  657.                 flex: 1 1 100%;
  658.                 font-size: 16px;
  659.             }
  660.             .ec-share-inline {
  661.                 flex: 0 0 auto;
  662.                 margin-left: auto;
  663.             }
  664.         }
  665.         .ec-share-inline a {
  666.             display: flex;
  667.             align-items: center;
  668.             justify-content: center;
  669.             width: 32px;
  670.             height: 32px;
  671.             border-radius: 50%;
  672.             font-size: 15px;
  673.             color: #fff;
  674.             text-decoration: none;
  675.             transition: opacity 0.2s;
  676.         }
  677.         .ec-share-inline a:hover { opacity: 0.8; }
  678.         .ec-share-inline .share-twitter  { background: #000; }
  679.         .ec-share-inline .share-facebook { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
  680.         .ec-share-inline .share-line     { background: #06c755; }
  682.         /* description_detail下のシェアブロックはPC/スマホ共通で非表示（タイトル行に移動） */
  683.         .ec-productRole__share { display: none; }
  685.         /* ============================================
  686.            PC用: 現在のお見積り額カード強調
  687.         ============================================ */
  688.         @media (min-width: 768px) {
  689.             .mitsumori-card-pc {
  690.                 border: 2px solid #1a6fcf !important;
  691.                 border-radius: 10px !important;
  692.                 box-shadow: 0 4px 16px rgba(26,111,207,0.18) !important;
  693.                 margin-top: 20px;
  694.                 overflow: hidden;
  695.                 background: linear-gradient(135deg, #1a6fcf, #0d4fa0) !important;
  696.             }
  697.             .mitsumori-card-pc .card-header {
  698.                 background: linear-gradient(135deg, #1a6fcf, #0d4fa0) !important;
  699.                 color: #fff !important;
  700.                 padding: 14px 16px !important;
  701.                 border-bottom: none !important;
  702.             }
  703.             .mitsumori-card-pc .card-title {
  704.                 color: #fff !important;
  705.                 font-size: 15px !important;
  706.                 font-weight: bold !important;
  707.                 margin: 0 !important;
  708.             }
  709.             .mitsumori-card-pc #mitsumori_message {
  710.                 font-size: 22px !important;
  711.                 font-weight: bold !important;
  712.                 color: #fff !important;
  713.             }
  714.             .mitsumori-card-pc .btn-tool {
  715.                 color: #fff !important;
  716.             }
  717.             /* 合計行を大きく強調 */
  718.             .mitsumori-card-pc .nav-item:first-child .nav-link {
  719.                 font-size: 16px !important;
  720.                 font-weight: bold !important;
  721.                 color: #c00 !important;
  722.                 background: #fff8f8 !important;
  723.                 padding: 12px 16px !important;
  724.             }
  725.             .mitsumori-card-pc .nav-item:first-child #mitsumori_goukei {
  726.                 font-size: 20px !important;
  727.                 font-weight: bold !important;
  728.                 color: #c00 !important;
  729.             }
  730.             /* card-body（明細リスト）を白背景に */
  731.             .mitsumori-card-pc .card-body {
  732.                 background: #fff !important;
  733.             }
  734.             .mitsumori-card-pc .card-footer {
  735.                 background: #f8faff !important;
  736.                 border-top: 1px solid #dce8fb !important;
  737.                 padding: 12px 16px !important;
  738.             }
  739.         }
  741.         @media (max-width: 767px) {
  742.             /* スマホでは現在のお見積り額カードの強調スタイルをすべてリセット */
  743.             .mitsumori-card-pc {
  744.                 border: none !important;
  745.                 border-radius: 0 !important;
  746.                 box-shadow: none !important;
  747.                 margin-top: 0 !important;
  748.                 overflow: visible !important;
  749.                 background: none !important;
  750.                 /* sticky-top(position:sticky / z-index:1020) を解除。
  751.                    そのままだと最下部で #sp-mitsumori-bar(z-index:1000) の上に
  752.                    重なり、合計バーと文字が被るため通常フローへ戻す。 */
  753.                 position: static !important;
  754.                 z-index: auto !important;
  755.             }
  756.             .mitsumori-card-pc .card-header {
  757.                 background: none !important;
  758.                 color: inherit !important;
  759.                 padding: inherit !important;
  760.                 border-bottom: inherit !important;
  761.             }
  762.             .mitsumori-card-pc .card-title { color: inherit !important; }
  763.             .mitsumori-card-pc #mitsumori_message { font-size: inherit !important; color: inherit !important; }
  764.             .mitsumori-card-pc .btn-tool { color: inherit !important; }
  765.             /* 折りたたみトグルボタン */
  766.             .btn-mitsumori-toggle {
  767.                 background: none !important;
  768.                 border: 1px solid #aaa !important;
  769.                 border-radius: 4px !important;
  770.                 padding: 2px 8px !important;
  771.                 font-size: 12px !important;
  772.                 color: #333 !important;
  773.                 line-height: 1.4 !important;
  774.             }
  775.             .btn-mitsumori-toggle .toggle-icon {
  776.                 display: inline-block;
  777.                 transition: transform 0.2s;
  778.             }
  779.             /* 展開状態: ▼→▲ */
  780.             .card:not(.collapsed-card) .btn-mitsumori-toggle .toggle-icon::before {
  781.                 content: "▲ 閉じる";
  782.             }
  783.             .card:not(.collapsed-card) .btn-mitsumori-toggle .toggle-icon {
  784.                 display: none;
  785.             }
  786.             .card:not(.collapsed-card) .btn-mitsumori-toggle::after {
  787.                 content: "▲ 閉じる";
  788.                 font-size: 12px;
  789.             }
  790.             .mitsumori-card-pc .nav-item:first-child .nav-link {
  791.                 font-size: inherit !important;
  792.                 color: inherit !important;
  793.                 background: none !important;
  794.                 padding: inherit !important;
  795.             }
  796.             .mitsumori-card-pc .nav-item:first-child #mitsumori_goukei {
  797.                 font-size: inherit !important;
  798.                 color: inherit !important;
  799.             }
  800.             .mitsumori-card-pc .card-footer {
  801.                 background: none !important;
  802.                 border-top: inherit !important;
  803.                 padding: inherit !important;
  804.             }
  805.             /* 横スクロール禁止 */
  806.             body, html {
  807.                 overflow-x: hidden;
  808.                 max-width: 100vw;
  809.             }
  810.             /* ボタンの折り返しを許可（nowrapが原因で横スクロール発生するため） */
  811.             .opt-btn,
  812.             .rp-btn {
  813.                 white-space: normal;
  814.                 word-break: break-all;
  815.             }
  816.             /* エリア案内: スマホでコンパクト */
  817.             .ec-areaNotice {
  818.                 margin: 8px 0;
  819.                 padding: 8px 10px;
  820.                 border-left-width: 3px;
  821.                 cursor: pointer;
  822.             }
  823.             .ec-areaNotice__inner {
  824.                 flex-direction: row;
  825.                 gap: 8px;
  826.                 align-items: flex-start;
  827.             }
  828.             .ec-areaNotice__icon { font-size: 15px; }
  829.             /* タイトル行: 展開トグル */
  830.             .ec-areaNotice__title {
  831.                 font-size: 11px;
  832.                 margin-bottom: 3px;
  833.                 display: flex;
  834.                 justify-content: space-between;
  835.                 align-items: center;
  836.             }
  837.             .ec-areaNotice__title::after {
  838.                 content: "▼";
  839.                 font-size: 9px;
  840.                 color: #888;
  841.                 margin-left: 6px;
  842.                 transition: transform 0.2s;
  843.             }
  844.             .ec-areaNotice.is-open .ec-areaNotice__title::after {
  845.                 transform: rotate(180deg);
  846.             }
  847.             /* 折りたたみ対象: 閉じた状態では非表示 */
  848.             .ec-areaNotice__detail {
  849.                 display: none;
  850.             }
  851.             .ec-areaNotice.is-open .ec-areaNotice__detail {
  852.                 display: block;
  853.             }
  854.             .ec-areaNotice__text { font-size: 11px; line-height: 1.5; }
  855.             .ec-areaNotice__text br { display: none; }
  856.             .ec-areaNotice__link { font-size: 11px; margin-top: 3px; }
  857.             .rp-card { width: calc(33.333% - 6px); min-width: 80px; }
  858.             
  859.             #sp-mitsumori-bar {
  860.                 display: flex;
  861.                 position: fixed;
  862.                 bottom: 0;
  863.                 left: 0;
  864.                 right: 0;
  865.                 z-index: 1000;
  866.                 background: #fff;
  867.                 border-top: 2px solid #e0e0e0;
  868.                 box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
  869.                 align-items: center;
  870.                 padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) 10px;
  871.                 gap: 8px;
  872.             }
  873.             #sp-mitsumori-bar .sp-bar__label {
  874.                 font-size: 11px;
  875.                 color: #666;
  876.                 white-space: nowrap;
  877.             }
  878.             /* 価格ラッパ: 合計金額は最重要のため常に全桁表示する（縮小・省略しない）。
  879.                幅が足りない場合は下のボタン側を縮める（flex 配分でボタンが先に縮む）。 */
  880.             #sp-mitsumori-bar .sp-bar__pricewrap {
  881.                 flex: 0 0 auto;
  882.                 min-width: 0;
  883.             }
  884.             #sp-mitsumori-bar .sp-bar__price {
  885.                 font-size: 18px;
  886.                 font-weight: bold;
  887.                 color: #c00;
  888.                 white-space: nowrap;
  889.             }
  890.             #sp-mitsumori-bar .sp-bar__btn {
  891.                 font-size: 12px;
  892.                 padding: 8px 12px;
  893.                 background: #333;
  894.                 color: #fff;
  895.                 border: none;
  896.                 border-radius: 6px;
  897.                 white-space: nowrap;
  898.                 cursor: pointer;
  899.                 position: relative;
  900.                 display: inline-flex;
  901.                 align-items: center;
  902.                 gap: 6px;
  903.                 flex: 1 1 auto;
  904.                 min-width: 0;
  905.                 justify-content: center;
  906.             }
  907.             #sp-mitsumori-bar .sp-bar__btn i {
  908.                 font-size: 14px;
  909.                 flex: 0 0 auto;
  910.             }
  911.             /* お見積りの詳細（内訳）を開くボタン。価格・カートボタンを圧迫しないよう
  912.                最小幅のアイコン＋短ラベルにし、幅不足時も縮まない固定幅で維持する。 */
  913.             #sp-mitsumori-bar .sp-bar__detail-btn {
  914.                 display: inline-flex;
  915.                 flex-direction: column;
  916.                 align-items: center;
  917.                 justify-content: center;
  918.                 gap: 2px;
  919.                 flex: 0 0 auto;
  920.                 padding: 4px 8px;
  921.                 background: #fff;
  922.                 color: #c00;
  923.                 border: 1px solid #c00;
  924.                 border-radius: 6px;
  925.                 font-size: 10px;
  926.                 font-weight: bold;
  927.                 line-height: 1.1;
  928.                 white-space: nowrap;
  929.                 cursor: pointer;
  930.             }
  931.             #sp-mitsumori-bar .sp-bar__detail-btn i { font-size: 15px; }
  932.             /* 幅が足りないときはボタンの文字を省略し、価格と数字を守る。 */
  933.             #sp-mitsumori-bar .sp-bar__btn-label {
  934.                 overflow: hidden;
  935.                 text-overflow: ellipsis;
  936.                 white-space: nowrap;
  937.             }
  938.             #sp-mitsumori-bar .sp-bar__cart-badge {
  939.                 position: absolute;
  940.                 top: -6px;
  941.                 right: -6px;
  942.                 background: #c00;
  943.                 color: #fff;
  944.                 border-radius: 50%;
  945.                 min-width: 16px;
  946.                 height: 16px;
  947.                 font-size: 10px;
  948.                 line-height: 16px;
  949.                 padding: 0 4px;
  950.                 font-weight: bold;
  951.             }
  952.             #sp-mitsumori-bar .sp-bar__home-btn {
  953.                 display: inline-flex;
  954.                 align-items: center;
  955.                 justify-content: center;
  956.                 width: 36px;
  957.                 height: 36px;
  958.                 flex: 0 0 auto;
  959.                 border: 1px solid #ccc;
  960.                 border-radius: 6px;
  961.                 background: #fff;
  962.                 color: #333;
  963.                 text-decoration: none;
  964.                 cursor: pointer;
  965.             }
  966.             #sp-mitsumori-bar .sp-bar__home-btn i {
  967.                 font-size: 16px;
  968.             }
  969.             #sp-mitsumori-bar .sp-bar__home-btn:hover {
  970.                 background: #f0f0f0;
  971.             }
  972.             /* 下部バーの高さ分ページ下部にpaddingを追加 (iOS safe-area 込み) */
  973.             body {
  974.                 padding-bottom: calc(80px + env(safe-area-inset-bottom));
  975.             }
  976.         }
  978.         /* ============================================
  979.            カート追加モーダル: 縦並び中央配置
  980.         ============================================ */
  981.         .add-cart-modal__wrap {
  982.             text-align: center;
  983.         }
  984.         .add-cart-modal__header {
  985.             font-size: 16px;
  986.             margin: 20px 0 24px;
  987.             text-align: center;
  988.         }
  989.         .add-cart-modal__actions {
  990.             display: flex;
  991.             flex-direction: column;
  992.             align-items: center;
  993.             gap: 16px;
  994.             padding: 0 20px 20px;
  995.         }
  996.         .add-cart-modal__primary {
  997.             display: inline-block;
  998.             width: 80%;
  999.             max-width: 320px;
  1000.             padding: 14px 20px;
  1001.             font-size: 15px;
  1002.             font-weight: bold;
  1003.             text-align: center;
  1004.             background: #d9534f;
  1005.             color: #fff !important;
  1006.             border-radius: 6px;
  1007.             text-decoration: none;
  1008.             cursor: pointer;
  1009.         }
  1010.         .add-cart-modal__primary:hover {
  1011.             background: #c9302c;
  1012.             color: #fff !important;
  1013.             text-decoration: none;
  1014.         }
  1015.         .add-cart-modal__secondary {
  1016.             display: inline-block;
  1017.             padding: 6px 14px;
  1018.             font-size: 12px;
  1019.             color: #666;
  1020.             border: 1px solid #ccc;
  1021.             border-radius: 4px;
  1022.             background: #fff;
  1023.             cursor: pointer;
  1024.         }
  1025.         .add-cart-modal__secondary:hover {
  1026.             background: #f0f0f0;
  1027.             color: #333;
  1028.         }
  1029.         @media (max-width: 767px) {
  1030.             .add-cart-modal__actions {
  1031.                 gap: 20px;
  1032.             }
  1033.         }
  1034.     </style>
  1035. {% endblock %}
  1037. {% block javascript %}
  1039.     <script>
  1040.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  1042.         // 規格2に選択肢を割り当てる。
  1043.         function fnSetClassCategories(form, classcat_id2_selected) {
  1044.             var $form = $(form);
  1045.             var product_id = $form.find('input[name=product_id]').val();
  1046.             var $sele1 = $form.find('select[name=classcategory_id1]');
  1047.             var $sele2 = $form.find('select[name=classcategory_id2]');
  1048.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  1049.         }
  1051.         {% if form.classcategory_id2 is defined %}
  1052.         fnSetClassCategories(
  1053.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  1054.         );
  1055.         {% elseif form.classcategory_id1 is defined %}
  1056.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  1057.         {% endif %}
  1058.     </script>
  1059.     <script>
  1060.         $(function() {
  1061.             // bfcache無効化
  1062.             $(window).bind('pageshow', function(event) {
  1063.                 if (event.originalEvent.persisted) {
  1064.                     location.reload(true);
  1065.                 }
  1066.             });
  1068.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  1069.             // img タグに width, height が付与されている.
  1070.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  1071.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  1072.             $('.ec-grid2__cell').hide();
  1073.             var removeSize = function () {
  1074.                 $('.slide-item').height('');
  1075.                 $('.slide-item img')
  1076.                     .removeAttr('width')
  1077.                     .removeAttr('height')
  1078.                     .removeAttr('style');
  1080.             };
  1081.             var slickInitial = function(slick) {
  1082.                 $('.ec-grid2__cell').fadeIn(1500);
  1083.                 var baseHeight = $(slick.target).height();
  1084.                 var baseWidth = $(slick.target).width();
  1085.                 var rate = baseWidth / baseHeight;
  1086.                 if(baseHeight * rate < 400){
  1087.                     $('.slide-item').height(baseHeight * rate); // 余白を削除する
  1088.                 }else{
  1089.                     $('.slide-item').height(400); // 余白を削除する
  1090.                 }
  1091.                 // transform を使用することでCLSの影響を受けないようにする
  1092.                 $('.slide-item img')
  1093.                     .css(
  1094.                         {
  1095.                             'transform-origin': 'top left',
  1096.                             'transform': 'scaleY(' + rate + ')',
  1097.                             'transition': 'transform .1s'
  1098.                         }
  1099.                     );
  1100.                 // 正しいサイズに近くなったら属性を解除する
  1101.                 setTimeout(removeSize, 500);
  1102.             };
  1103.             $('.item_visual').on('init', slickInitial);
  1104.             // リサイズ時は CLS の影響を受けないため属性を解除する
  1105.             $(window).resize(removeSize);
  1106.             $('.item_visual').slick({
  1107.                 dots: false,
  1108.                 arrows: true,
  1109.                 responsive: [{
  1110.                     breakpoint: 768,
  1111.                     settings: {
  1112.                         dots: true,
  1113.                         arrows: false
  1114.                     }
  1115.                 }]
  1116.             });
  1118.             $('.slideThumb').on('click', function() {
  1119.                 var index = $(this).attr('data-index');
  1120.                 $('.item_visual').slick('slickGoTo', index, false);
  1121.             })
  1122.         });
  1124.     </script>
  1125.     <script>
  1126.         $(function() {
  1127.             $('.add-cart').on('click', function(event) {
  1128.                 {% if form.classcategory_id1 is defined %}
  1129.                 // 規格1フォームの必須チェック
  1130.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  1131.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  1132.                     return true;
  1133.                 } else {
  1134.                     $('#classcategory_id1')[0].setCustomValidity('');
  1135.                 }
  1136.                 {% endif %}
  1138.                 {% if form.classcategory_id2 is defined %}
  1139.                 // 規格2フォームの必須チェック
  1140.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  1141.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  1142.                     return true;
  1143.                 } else {
  1144.                     $('#classcategory_id2')[0].setCustomValidity('');
  1145.                 }
  1146.                 {% endif %}
  1148.                 // タイプ2: カート送信直前に set_count を quantity に同期
  1149.                 if($('#set_count').length){
  1150.                     var _sc = parseInt($('#set_count').val()) || 1;
  1151.                     $('#quantity').val(_sc);
  1152.                     $('input[name="quantity"]').val(_sc);
  1153.                 }
  1155.                 // 個数フォームのチェック
  1156.                 if ($('#quantity').val() < 1) {
  1157.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  1158.                     return true;
  1159.                 } else {
  1160.                     $('#quantity')[0].setCustomValidity('');
  1161.                 }
  1163.                 event.preventDefault();
  1164.                 $form = $('#form1');
  1165.                 $.ajax({
  1166.                     url: $form.attr('action'),
  1167.                     type: $form.attr('method'),
  1168.                     data: $form.serialize(),
  1169.                     dataType: 'json',
  1170.                     beforeSend: function(xhr, settings) {
  1171.                         // Buttonを無効にする
  1172.                         $('.add-cart').prop('disabled', true);
  1173.                     }
  1174.                 }).done(function(data) {
  1175.                     // レスポンス内のメッセージをalertで表示
  1176.                     $.each(data.messages, function() {
  1177.                         $('#ec-modal-header').text(this);
  1178.                     });
  1180.                     $('.ec-modal').show()
  1182.                     // カートブロックを更新する
  1183.                     $.ajax({
  1184.                         url: "{{ url('block_cart') }}",
  1185.                         type: 'GET',
  1186.                         dataType: 'html'
  1187.                     }).done(function(html) {
  1188.                         $('.ec-headerRole__cart').html(html);
  1189.                     });
  1190.                 }).fail(function(data) {
  1191.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  1192.                 }).always(function(data) {
  1193.                     // Buttonを有効にする
  1194.                     $('.add-cart').prop('disabled', false);
  1195.                 });
  1196.             });
  1197.         });
  1199.         $('.ec-modal-wrap').on('click', function(e) {
  1200.             // モーダル内の処理は外側にバブリングさせない
  1201.             e.stopPropagation();
  1202.         });
  1203.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  1204.             $('.ec-modal').hide()
  1205.         });
  1208.         var pw = "{% if mitsumori_json %}{{ mitsumori_json.pw }}{% endif %}";
  1209.         var pd = "{% if mitsumori_json %}{{ mitsumori_json.pd }}{% endif %}";
  1210.         var ph = "{% if mitsumori_json %}{{ mitsumori_json.ph }}{% endif %}";
  1211.         var pm = "{% if mitsumori_json %}{{ mitsumori_json.pm }}{% endif %}";
  1212.         var pc = "{% if mitsumori_json %}{{ mitsumori_json.pc }}{% endif %}";
  1213.         // option1 / option2: カテゴリ別 option 軸 (um: タイプ=subtype, fe: ct_up 等)
  1214.         var option1 = "{% if mitsumori_json and mitsumori_json.option1 is defined %}{{ mitsumori_json.option1 }}{% endif %}";
  1215.         var option2 = "{% if mitsumori_json and mitsumori_json.option2 is defined %}{{ mitsumori_json.option2 }}{% endif %}";
  1216.         var op0 = "{% if mitsumori_json %}{{ mitsumori_json.op[0] }}{% endif %}";
  1217.         var op1 = "{% if mitsumori_json %}{{ mitsumori_json.op[1] }}{% endif %}";
  1218.         var op2 = "{% if mitsumori_json %}{{ mitsumori_json.op[2] }}{% endif %}";
  1219.         var op3 = "{% if mitsumori_json %}{{ mitsumori_json.op[3] }}{% endif %}";
  1220.         var op4 = "{% if mitsumori_json %}{{ mitsumori_json.op[4] }}{% endif %}";
  1221.         var op5 = "{% if mitsumori_json %}{{ mitsumori_json.op[5] }}{% endif %}";
  1222.         var op6 = "{% if mitsumori_json %}{{ mitsumori_json.op[6] }}{% endif %}";
  1223.         var op7 = "{% if mitsumori_json %}{{ mitsumori_json.op[7] }}{% endif %}";
  1224.         var op8 = "{% if mitsumori_json %}{{ mitsumori_json.op[8] }}{% endif %}";
  1225.         var op9 = "{% if mitsumori_json %}{{ mitsumori_json.op[9] }}{% endif %}";
  1226.         var op10 = "{% if mitsumori_json %}{{ mitsumori_json.op[10] }}{% endif %}";
  1228.         const formatter = new Intl.NumberFormat('ja-JP');
  1230.         // ============================================================
  1231.         //  free_area 1 エントリのスキーマ（11 キー固定）
  1232.         // ============================================================
  1233.         //   w           : 幅 (string, 例 "239.9cm" / tf は "1m")
  1234.         //   d           : 奥行
  1235.         //   h           : 高さ (tf はロール長 "10m")
  1236.         //   m           : 素材
  1237.         //   c           : カラー
  1238.         //   price       : 販売価格 (税抜、amount=1 ベース)
  1239.         //   unit_price  : 商品 per-unit 増分 (税抜、AMOUNT_CATEGORIES のみ)
  1240.         //   maker_price : メーカー価格 (税抜)
  1241.         //   ct          : 基本工事費 (税抜、amount=1 ベース)
  1242.         //   option1     : fe → ct_up / その他カテゴリ → category-specific
  1243.         //   option2     : um → ct_up / その他カテゴリ → category-specific
  1244.         //
  1245.         //  ct4 (設置場所) / ct5 (撤去) / ct6 (残土) は option_area 側で扱う.
  1246.         // ============================================================
  1248.         // 施工オプション定義（option_area）— 各エントリ {name, comment, on, off, price}
  1249.         var op_data = {{ op_json|default('[]')|raw }};
  1251.         // option_item_area:
  1252.         //   tg 用 — block 別オプション差額表
  1253.         //     { axis_labels: {F:'床材',front:'前面型',side1:'右側面型',side2:'左側面型'},
  1254.         //       blocks: { 'W_label|D_label': { F:[{idx,label,diff},...], front:[...], side1:[...], side2:[...] }, ... } }
  1255.         //   fe (sale_type=4) 用 — ブロックの種類×段数の差額表 (fe_block キー)
  1256.         //     { fe_block: { depends_on_name: '...', depends_on_value: '...',
  1257.         //                   title: '...', default_key: '...',
  1258.         //                   choices: [{key,label,price}, ...] } }
  1259.         // 該当しないカテゴリでは fe_block は null. axis_labels/blocks は空.
  1260.         var oi_data = {{ oi_json|default('{"axis_labels":{},"blocks":{},"fe_block":null}')|raw }};
  1262.         // 選択中の tg オプション差額 (axis -> selected choice_idx). ラジオ click で更新される.
  1263.         var oi_selected = { F: 1, front: 1, side1: 1, side2: 1 };
  1265.         // 選択中の fe ブロック種類×段数 (key 文字列). 既定は oi_data.fe_block.default_key.
  1266.         var fe_block_selected = (oi_data && oi_data.fe_block && oi_data.fe_block.default_key) || '';
  1268.         // sale_type ID（mtb_sale_type の id。本サイトでの意味は次の通り）:
  1269.         //   1 通常 / 2 補助金窓 / 3 物置 / 4 フェンス / 5 デッキ / 6 芝生 / 9 商品のみ
  1270.         var SALE_TYPE_ID = {{ ProductClass.SaleType.id }};
  1272.         {# option1 / option2 ラベルをカテゴリ別に決定 (sh=31, rd=43, mo=15) — 以降の UI / JS 両方で使用 #}
  1273.         {% set option1_label = 'オプション1' %}
  1274.         {% set option2_label = 'オプション2' %}
  1275.         {% if Product.ProductCategories is not empty %}
  1276.             {% for pcat in Product.ProductCategories %}
  1277.                 {% if pcat.category_id == 31 %}{% set option1_label = 'サイズプリセット' %}{% set option2_label = '駆動方式' %}{% endif %}
  1278.                 {% if pcat.category_id == 43 %}{% set option1_label = 'ランマ' %}{% set option2_label = 'タイプ' %}{% endif %}
  1279.                 {% if pcat.category_id == 15 %}{% set option1_label = '棚タイプ' %}{% endif %}
  1280.                 {% if pcat.category_id == 17 %}{% set option1_label = '窓タイプ' %}{% endif %}
  1281.             {% endfor %}
  1282.         {% endif %}
  1284.         // 消費税率（pp.price/pp.ct/op_data.price は scraper が税抜で保存しているため、
  1285.         // calcGoukei 出口で 1+TAX_RATE を掛けて税込 mitsumori_goukei にする）
  1286.         var TAX_RATE = 0.10;
  1287.         function toIncTax(v) { return Math.round(v * (1 + TAX_RATE)); }
  1289.         /**
  1290.          * tg 用 block 別オプション差額の集計.
  1291.          *   現選択 (W, D) から block key を作り、oi_data.blocks[blockKey] を取得.
  1292.          *   各 axis (F/front/side1/side2) で oi_selected[axis] の choice の diff を合計.
  1293.          * 戻り値: { total: 差額合計(税抜), items: [{name, label, diff}, ...] }
  1294.          *   block が無い (tg 以外 / 該当 (W,D) が未取得) なら total=0.
  1295.          */
  1296.         function collectOptionItems(curW, curD) {
  1297.             var result = { total: 0, items: [] };
  1298.             if (!oi_data || !oi_data.blocks) return result;
  1299.             var blockKey = (curW || '') + '|' + (curD || '');
  1300.             var block = oi_data.blocks[blockKey];
  1301.             if (!block) return result;
  1302.             var axes = ['F', 'front', 'side1', 'side2'];
  1303.             for (var i = 0; i < axes.length; i++) {
  1304.                 var axis = axes[i];
  1305.                 var choices = block[axis];
  1306.                 if (!choices || !choices.length) continue;
  1307.                 var idx = oi_selected[axis] || 1;
  1308.                 var pick = null;
  1309.                 for (var j = 0; j < choices.length; j++) {
  1310.                     if (parseInt(choices[j].idx) === parseInt(idx)) { pick = choices[j]; break; }
  1311.                 }
  1312.                 if (!pick) pick = choices[0];
  1313.                 var diff = parseInt(pick.diff) || 0;
  1314.                 result.total += diff;
  1315.                 result.items.push({
  1316.                     name:  oi_data.axis_labels[axis] || axis,
  1317.                     label: pick.label,
  1318.                     diff:  diff,
  1319.                 });
  1320.             }
  1321.             return result;
  1322.         }
  1324.         /**
  1325.          * tg ラジオ群を block 別に DOM へ描画する.
  1326.          *   W/D が確定したら現 block の 4 軸 (F/front/side1/side2) ラジオを #tg-options 要素に出す.
  1327.          *   block が空なら #tg-options を空にする.
  1328.          */
  1329.         function renderOptionItemRadios(curW, curD) {
  1330.             var $box = $('#tg-options');
  1331.             if (!$box.length) return;
  1332.             $box.empty();
  1333.             if (!oi_data || !oi_data.blocks) return;
  1334.             var blockKey = (curW || '') + '|' + (curD || '');
  1335.             var block = oi_data.blocks[blockKey];
  1336.             if (!block) return;
  1337.             var axes = ['F', 'front', 'side1', 'side2'];
  1338.             axes.forEach(function(axis) {
  1339.                 var choices = block[axis];
  1340.                 if (!choices || !choices.length) return;
  1341.                 var axisLabel = (oi_data.axis_labels && oi_data.axis_labels[axis]) || axis;
  1342.                 var $section = $('<div class="form-group tg-axis"></div>');
  1343.                 $section.append('<p class="rp-section-label"><strong>' + axisLabel + '</strong>: <span class="tg-axis-selected"></span></p>');
  1344.                 var $list = $('<div class="tg-choice-list"></div>');
  1345.                 choices.forEach(function(ch, i) {
  1346.                     var inputId = 'tg_' + axis + '_' + ch.idx;
  1347.                     var name = 'tg_' + axis;
  1348.                     var checked = (parseInt(ch.idx) === parseInt(oi_selected[axis] || 1)) ? ' checked' : '';
  1349.                     var diffTxt = ch.diff > 0 ? '+' + formatter.format(ch.diff) + '円' : (ch.diff < 0 ? formatter.format(ch.diff) + '円' : '±0');
  1350.                     $list.append(
  1351.                         '<label class="tg-choice"><input type="radio" name="' + name + '" id="' + inputId + '" value="' + ch.idx + '" data-axis="' + axis + '"' + checked + '> ' +
  1352.                         ch.label + '<span class="tg-diff">（' + diffTxt + '）</span></label>'
  1353.                     );
  1354.                 });
  1355.                 $section.append($list);
  1356.                 $box.append($section);
  1357.             });
  1358.             // ラジオ click で oi_selected を更新 → 再計算
  1359.             $box.off('change.tg').on('change.tg', 'input[type="radio"][data-axis]', function() {
  1360.                 var axis = $(this).data('axis');
  1361.                 oi_selected[axis] = parseInt($(this).val()) || 1;
  1362.                 mitsumori_simulation('refresh', '');
  1363.             });
  1364.             updateOptionItemSelectedLabels();
  1365.         }
  1367.         function updateOptionItemSelectedLabels() {
  1368.             $('#tg-options .tg-axis').each(function() {
  1369.                 var $sel = $(this).find('input[type="radio"]:checked');
  1370.                 if (!$sel.length) return;
  1371.                 var label = $sel.parent().contents().filter(function() { return this.nodeType === 3; }).text().trim();
  1372.                 $(this).find('.tg-axis-selected').text(label);
  1373.             });
  1374.         }
  1376.         // =========================================================
  1377.         // fe (sale_type=4) ブロック種類×段数 サブ UI
  1378.         // =========================================================
  1380.         /**
  1381.          * fe_block の親オプション (= op_data 内の「ご希望のフェンス設置方法」 entry)
  1382.          * を name でルックアップし、その index を返す. 見つからなければ -1.
  1383.          *   fe_block.depends_on_name が設定されていればそれで照合.
  1384.          *   未設定なら 'ご希望のフェンス設置方法' を含む name にフォールバック.
  1385.          */
  1386.         function findFeBlockParentOpIndex() {
  1387.             if (!oi_data || !oi_data.fe_block) return -1;
  1388.             var needle = oi_data.fe_block.depends_on_name || 'ご希望のフェンス設置方法';
  1389.             for (var i = 0; i < op_data.length; i++) {
  1390.                 if (!op_data[i] || !op_data[i].name) continue;
  1391.                 if (op_data[i].name.indexOf(needle) >= 0) return i;
  1392.             }
  1393.             return -1;
  1394.         }
  1396.         /**
  1397.          * fe_block の現在の選択値の price (税抜) と choice 内容を集計.
  1398.          *   親オプション (= 'ご希望のフェンス設置方法') が depends_on_value を選んでいる
  1399.          *   ときだけ加算する. それ以外 (既存ブロック側 / 親未選択) は price=0.
  1400.          * 戻り値: { price: 0|N, choice: {key,label,price}|null, active: bool }
  1401.          */
  1402.         function collectFeBlock() {
  1403.             var result = { price: 0, choice: null, active: false };
  1404.             if (SALE_TYPE_ID !== 4) return result;
  1405.             if (!oi_data || !oi_data.fe_block) return result;
  1406.             if (!oi_data.fe_block.choices || !oi_data.fe_block.choices.length) return result;
  1408.             var parentIdx = findFeBlockParentOpIndex();
  1409.             if (parentIdx < 0) return result;
  1410.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  1411.             var parentSel = ops[parentIdx];
  1412.             var triggerValue = oi_data.fe_block.depends_on_value || '新規にブロック積みを行う';
  1413.             if (parentSel !== triggerValue) return result;  // 親が新規ブロック積み以外なら無加算
  1415.             result.active = true;
  1416.             var choices = oi_data.fe_block.choices;
  1417.             var pick = null;
  1418.             for (var j = 0; j < choices.length; j++) {
  1419.                 if (choices[j].key === fe_block_selected) { pick = choices[j]; break; }
  1420.             }
  1421.             if (!pick) pick = choices[0];
  1422.             result.choice = pick;
  1423.             result.price  = parseInt(pick.price) || 0;
  1424.             return result;
  1425.         }
  1427.         /**
  1428.          * fe_block ラジオ群を #fe-block-options 要素に描画する.
  1429.          *   active=false (親が「新規にブロック積み」以外) のときは非表示.
  1430.          */
  1431.         function renderFeBlockRadios() {
  1432.             var $box = $('#fe-block-options');
  1433.             if (!$box.length) return;
  1434.             if (!oi_data || !oi_data.fe_block || !oi_data.fe_block.choices) {
  1435.                 $box.empty().hide();
  1436.                 return;
  1437.             }
  1438.             var parentIdx = findFeBlockParentOpIndex();
  1439.             if (parentIdx < 0) {
  1440.                 $box.empty().hide();
  1441.                 return;
  1442.             }
  1443.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  1444.             var triggerValue = oi_data.fe_block.depends_on_value || '新規にブロック積みを行う';
  1445.             var visible = (ops[parentIdx] === triggerValue);
  1446.             if (!visible) {
  1447.                 $box.hide();
  1448.                 return;
  1449.             }
  1451.             var fb = oi_data.fe_block;
  1452.             $box.empty();
  1453.             var $title = $('<p class="rp-section-label"><strong>' + (fb.title || 'ブロックの種類と段数') + '</strong></p>');
  1454.             $box.append($title);
  1455.             // 他オプション群と同じ .opt-btn-group / .opt-btn 形式で描画.
  1456.             //   生の <label><input type=radio> ... 形式だと CSS 定義が無く
  1457.             //   ラベル折り返し・縦ズレ・隣接 opt-btn との間隔不揃いが発生する.
  1458.             var $list = $('<div class="opt-btn-group" style="flex-direction:column;align-items:stretch;"></div>');
  1459.             fb.choices.forEach(function(ch) {
  1460.                 var inputId = 'fe_block_' + ch.key;
  1461.                 var isSel   = (ch.key === fe_block_selected);
  1462.                 var checked = isSel ? ' checked' : '';
  1463.                 var selCls  = isSel ? ' is-selected' : '';
  1464.                 var priceTxt = (parseInt(ch.price) || 0) > 0
  1465.                     ? ' <span class="fe-block-price" style="margin-left:6px;color:#666;font-size:12px;white-space:nowrap;">（+' + formatter.format(toIncTax(parseInt(ch.price))) + '円 税込）</span>'
  1466.                     : '';
  1467.                 $list.append(
  1468.                     '<label class="opt-btn' + selCls + '" style="text-align:left;display:flex;align-items:center;flex-wrap:wrap;">' +
  1469.                     '<input type="radio" name="fe_block" id="' + inputId + '" value="' + ch.key + '"' + checked + '>' +
  1470.                     '<span class="fe-block-label">' + ch.label + '</span>' +
  1471.                     priceTxt +
  1472.                     '</label>'
  1473.                 );
  1474.             });
  1475.             $box.append($list);
  1476.             $box.show();
  1477.             $box.off('change.fe_block').on('change.fe_block', 'input[type="radio"][name="fe_block"]', function() {
  1478.                 fe_block_selected = $(this).val();
  1479.                 // is-selected 切替 (opt-btn 形式共通)
  1480.                 $box.find('label.opt-btn').removeClass('is-selected');
  1481.                 $(this).closest('label.opt-btn').addClass('is-selected');
  1482.                 mitsumori_simulation('refresh', '');
  1483.             });
  1484.         }
  1486.         /**
  1487.          * fe (sale_type=4) で op_data エントリの連動表示制御.
  1488.          *   親「ご希望のフェンス設置方法」の選択値に応じて、
  1489.          *     - 「既存ブロックに穴空け工事が必要ですか？」 entry を表示/非表示
  1490.          *   切替の trigger は親選択値の文字列で判定 (entry index にハードコードしない).
  1491.          */
  1492.         function updateFeOpConditionalVisibility() {
  1493.             if (SALE_TYPE_ID !== 4) return;
  1494.             var parentIdx = findFeBlockParentOpIndex();
  1495.             if (parentIdx < 0) return;
  1496.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  1497.             var parentSel = ops[parentIdx];
  1498.             // 親が「既存ブロックに設置する」 (= off 側) のとき穴空け entry を表示
  1499.             var triggerOffValue = (op_data[parentIdx] && op_data[parentIdx].off) || '既存ブロックに設置する';
  1500.             $('div[data-op-name]').each(function() {
  1501.                 var n = $(this).attr('data-op-name') || '';
  1502.                 if (n.indexOf('穴空け') >= 0) {
  1503.                     if (parentSel === triggerOffValue) {
  1504.                         $(this).show();
  1505.                     } else {
  1506.                         $(this).hide();
  1507.                     }
  1508.                 }
  1509.             });
  1510.         }
  1512.         /**
  1513.          * 選択中の施工オプションを集計し、ON選択分の price を合計する.
  1514.          * 戻り値: { total: 合計金額, items: [{name, value, price}, ...] }
  1515.          */
  1516.         function collectOptions() {
  1517.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  1518.             var total = 0;
  1519.             var items = [];
  1520.             for (var i = 0; i < ops.length; i++) {
  1521.                 if (!op_data[i] || !op_data[i].name) continue;
  1522.                 var sel = ops[i];
  1523.                 if (!sel) continue;
  1524.                 var price = parseInt(op_data[i].price) || 0;
  1525.                 // 「ON」選択時のみ加算（OFF や「不要」「商品購入のみ」は加算しない）
  1526.                 var isOn = (sel === op_data[i].on);
  1527.                 items.push({
  1528.                     name:  op_data[i].name,
  1529.                     value: sel,
  1530.                     price: isOn ? price : 0,
  1531.                     on:    op_data[i].on,
  1532.                     off:   op_data[i].off,
  1533.                 });
  1534.                 if (isOn) total += price;
  1535.             }
  1536.             // fe (sale_type=4) のブロック種類×段数 分を items / total に統合.
  1537.             // 親オプション「ご希望のフェンス設置方法」 が 「新規にブロック積みを行う」 のとき
  1538.             // だけ加算される (collectFeBlock 内で判定済み).
  1539.             var fb = collectFeBlock();
  1540.             if (fb.active && fb.choice) {
  1541.                 items.push({
  1542.                     name:  (oi_data.fe_block && oi_data.fe_block.title) || 'ブロックの種類と段数',
  1543.                     value: fb.choice.label,
  1544.                     price: fb.price,
  1545.                     on:    fb.choice.label,
  1546.                     off:   '',
  1547.                 });
  1548.                 total += fb.price;
  1549.             }
  1550.             return { total: total, items: items };
  1551.         }
  1553.         /**
  1554.          * free_area 1 エントリ ({w,d,h,m,c,price,unit_price,maker_price,ct,option1,option2})
  1555.          * から sale_type 別に最終金額を算出する.
  1556.          *
  1557.          * 計算式（amount=1 ベース、出口で × 1.10 税込化）:
  1558.          *   1 通常        : price + ct + option_sum
  1559.          *   2 補助金窓    : price × set_count + (ct + (set_count-1) × option2) + option_sum
  1560.          *   3 物置        : (price + ct) × daisu + option_sum
  1561.          *   4 フェンス    : price + (maisu-1) × unit_price
  1562.          *                  + ct + max(0, maisu-3) × option1
  1563.          *                  + option_sum   (maisu >= 3)
  1564.          *   5 デッキ      : price + ct + option_sum   (area は表示用、計算非関与)
  1565.          *   6 芝生        : price × ceil(area / (w_m × h_m)) + ct + option_sum
  1566.          *   9 商品のみ    : price のみ（カート quantity 倍で総額）
  1567.          *
  1568.          * fe では option1 を ct_up、um では option2 を ct_up として転用.
  1569.          * tf では w / h にロール幅・長さが格納されており parseLen で数値抽出.
  1570.          *
  1571.          * @param {Object} pp  free_area の 1 行（matrix エントリ）
  1572.          * @param {number} optionTotal  collectOptions().total
  1573.          * @param {Object} ctx  UI 入力 {set_count, daisu, maisu, area, quantityOnly, ...}
  1574.          * @returns {Object} {goukei, price, ct, opt, qty}  すべて税込整数
  1575.          */
  1576.         function calcGoukei(pp, optionTotal, ctx) {
  1577.             var basePrice  = parseInt(pp.price)       || 0;
  1578.             var baseCt     = parseInt(pp.ct)          || 0;
  1579.             var unitPrice  = parseInt(pp.unit_price)  || 0;
  1580.             var optSum     = optionTotal;
  1581.             var price      = basePrice;
  1582.             var ct         = baseCt;
  1583.             var qty        = 1;
  1584.             var goukei     = 0;
  1586.             // 「商品購入のみ」選択時は工事費・オプションをゼロにする（任意 sale_type で適用）
  1587.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  1588.             var purchaseOnly = ops.some(function(v){ return v === '商品購入のみ'; });
  1589.             if (purchaseOnly) {
  1590.                 baseCt = 0;
  1591.                 ct     = 0;
  1592.                 optSum = 0;
  1593.             }
  1595.             switch (SALE_TYPE_ID) {
  1596.                 case 2: {  // 補助金・窓 (シンプル表引き方式 2026-05-)
  1597.                     // 2026-05 仕様簡素化: 枚数軸を廃止し、subtype に枚数を内包.
  1598.                     // pp.price / pp.ct は (W, H, ガラス, subtype) の単一価格.
  1599.                     // 複数枚をまとめて買う場合はカート quantity で表現.
  1600.                     qty    = 1;
  1601.                     price  = basePrice;
  1602.                     ct     = baseCt;
  1603.                     goukei = price + ct + optSum;
  1604.                     break;
  1605.                 }
  1607.                 case 3: {  // 物置・ゴミステーション
  1608.                     qty   = Math.max(1, parseInt(ctx.daisu) || 1);
  1609.                     price = basePrice * qty;
  1610.                     ct    = baseCt * qty;
  1611.                     goukei = price + ct + optSum;
  1612.                     break;
  1613.                 }
  1615.                 case 4: {  // フェンス・組み立て式（maisu ≥ 3、base_amount = 3）
  1616.                     // scraper は amount=3 を base にしているので pp.price = price(3),
  1617.                     // pp.unit_price = price(4) - price(3).
  1618.                     qty   = Math.max(3, parseInt(ctx.maisu) || 3);
  1619.                     price = basePrice + (qty - 3) * unitPrice;
  1620.                     // option1 が ct_up (4枚目以降の増分). 未設定なら ct 固定動作
  1621.                     var ctUp1 = parseInt(pp.option1) || 0;
  1622.                     ct = baseCt + Math.max(0, qty - 3) * ctUp1;
  1623.                     // fe_block(ブロック積み段数): collectOptions が base(3枚分)を optSum に
  1624.                     // 算入済み. ブロック費も本体同様に枚数連動するため、4枚目以降は 1枚毎に
  1625.                     // choice.unit_price(= block(4)-block(3)) を加算する.
  1626.                     // (顧客指摘「何枚施工でも増える金額が同じ」の是正。unit_price 未設定の
  1627.                     //  旧データでは +0 で従来動作。)
  1628.                     if (!purchaseOnly) {
  1629.                         var fbC = collectFeBlock();
  1630.                         if (fbC.active && fbC.choice) {
  1631.                             optSum += Math.max(0, qty - 3) * (parseInt(fbC.choice.unit_price) || 0);
  1632.                         }
  1633.                     }
  1634.                     goukei = price + ct + optSum;
  1635.                     break;
  1636.                 }
  1638.                 case 5: {  // ウッドデッキ・タイルデッキ
  1639.                     // area は担当者向けの参考値として保持（計算には使わない）
  1640.                     qty    = 1;
  1641.                     goukei = basePrice + baseCt + optSum;
  1642.                     price  = basePrice;
  1643.                     ct     = baseCt;
  1644.                     break;
  1645.                 }
  1647.                 case 6: {  // 芝生・人工芝（ロール単位）
  1648.                     // pp.w "1m", pp.h "10m" から数値抽出
  1649.                     var w_m = parseLen(pp.w);
  1650.                     var h_m = parseLen(pp.h);
  1651.                     var rollSize = w_m * h_m;
  1652.                     if (!rollSize || rollSize <= 0) rollSize = 1;
  1653.                     // 施工サイズ(面積)があれば必要枚数を自動算出。無ければ直接指定の枚数を使う。
  1654.                     var area  = parseFloat(ctx.area) || 0;
  1655.                     if (area > 0) {
  1656.                         qty = Math.max(1, Math.ceil(area / rollSize));
  1657.                     } else {
  1658.                         qty = Math.max(1, parseInt(ctx.tf_qty) || 1);
  1659.                     }
  1660.                     price  = basePrice * qty;
  1661.                     ct     = baseCt;
  1662.                     goukei = price + ct + optSum;
  1663.                     break;
  1664.                 }
  1666.                 case 7: {  // 数量買い・基本工事費固定（gf ガーデンファニチャー / st 石材）
  1667.                     qty    = Math.max(1, parseInt(ctx.suuryou) || 1);
  1668.                     price  = basePrice * qty;
  1669.                     ct     = baseCt;                 // ct は固定（数量に依らない）
  1670.                     goukei = price + ct + optSum;
  1671.                     break;
  1672.                 }
  1674.                 case 9: {  // 商品のみ購入
  1675.                     // カート側で quantity × unit price するため goukei は単品価格
  1676.                     qty    = parseInt(ctx.quantityOnly) || 1;
  1677.                     price  = basePrice;
  1678.                     ct     = 0;
  1679.                     optSum = 0;
  1680.                     goukei = price;
  1681.                     break;
  1682.                 }
  1684.                 default: {  // 1: 通常（カーポート等、matrix 選択のみ）
  1685.                     qty    = 1;
  1686.                     goukei = basePrice + baseCt + optSum;
  1687.                     break;
  1688.                 }
  1689.             }
  1691.             // 出口で税込化（pp.price/pp.ct/op_data.price はすべて税抜で保存されている前提）
  1692.             return {
  1693.                 goukei: toIncTax(goukei),
  1694.                 price:  toIncTax(price),
  1695.                 ct:     toIncTax(ct),
  1696.                 opt:    toIncTax(optSum),
  1697.                 qty:    qty,
  1698.             };
  1699.         }
  1701.         /**
  1702.          * 寸法文字列から「メートル単位の数値」を抽出する.
  1703.          *
  1704.          * 単位は m / cm / mm を認識し、いずれも m 単位に正規化して返す.
  1705.          * 単位が無い場合は m 単位とみなす（旧 tf データ "1m" "10m" との互換）.
  1706.          * 数値が見つからない場合は 0 を返す（呼び出し側で fallback）.
  1707.          *
  1708.          * 例:
  1709.          *   "1m"     → 1
  1710.          *   "100cm"  → 1   (2026-06 以降の m → cm 正規化に対応)
  1711.          *   "200cm"  → 2
  1712.          *   "5.5m"   → 5.5
  1713.          *   "1000mm" → 1
  1714.          *   ""       → 0
  1715.          */
  1716.         function parseLen(s) {
  1717.             if (!s) return 0;
  1718.             var str = String(s);
  1719.             var m = str.match(/(\d+(?:\.\d+)?)\s*(mm|cm|m)?/i);
  1720.             if (!m) return 0;
  1721.             var n = parseFloat(m[1]);
  1722.             if (isNaN(n)) return 0;
  1723.             var unit = (m[2] || 'm').toLowerCase();
  1724.             if (unit === 'cm') return n / 100;
  1725.             if (unit === 'mm') return n / 1000;
  1726.             return n;  // 'm' or no unit
  1727.         }
  1729.         // pp は autoSelectFirstColor 等からも参照するので global にする
  1730.         var pp = {{ pp|raw }};
  1732.         // sale_type=2 の幅 / 高さ ladder (Twig p_w / p_h を JS で参照するため).
  1733.         // 入力 mm 値を pp の幅・高さバケット文字列にマッピングする際の元データ.
  1734.         // p_w / p_h は連想配列で来ることがあるため Object.values で配列化する.
  1735.         var PP_W_LADDER = Object.values({{ p_w|default({})|json_encode|raw }} || {});
  1736.         var PP_H_LADDER = Object.values({{ p_h|default({})|json_encode|raw }} || {});
  1738.         /* ============================================================
  1739.            sale_type=2 (補助金窓) 専用: 複数タイプ集計 & 補助金計算
  1740.            ============================================================
  1741.            - 入力 UI: #window-types-container 配下の .window-type-block
  1742.            - 補助金根拠: 先進的窓リノベ2026事業
  1743.              https://window-renovation2026.env.go.jp/construction/inner-window.html
  1744.            - 価格軸: (subtype, w, h, glass, color) で pp を lookup
  1745.            - 1 商品 = 1 明細 にまとめ、内訳 JSON を別途保存予定 (cart 連携は後続タスク)
  1746.            ============================================================ */
  1748.         // 補助金マトリクス: [住宅区分][性能][サイズ区分] → 1 箇所あたり金額 (税抜・端数なし)
  1749.         var WINDOW_SUBSIDY_MATRIX = {
  1750.             detached:  { // 戸建住宅・延床240㎡以下の非住宅
  1751.                 P: { G: 140000, L: 89000, M: 58000, S: 36000 },
  1752.                 S: { G: 76000,  L: 52000, M: 34000, S: 22000 }
  1753.             },
  1754.             apartment: { // 低層・中高層集合住宅・240㎡超の非住宅
  1755.                 P: { G: 152000, L: 98000, M: 64000, S: 40000 },
  1756.                 S: { G: 83000,  L: 57000, M: 37000, S: 24000 }
  1757.             }
  1758.         };
  1760.         // 住宅区分: 画面 UI (input[name="window_housing_type"]) から取得する.
  1761.         // 既定値は PFC meta_key="住宅区分" を fallback (未設定なら '戸建').
  1762.         var HOUSING_TYPE_DEFAULT = {{ getProduct_field(Product.id, '住宅区分')|default('戸建')|json_encode|raw }};
  1763.         function getCurrentHousingKey() {
  1764.             var el = document.querySelector('input[name="window_housing_type"]:checked');
  1765.             var v  = el ? el.value : HOUSING_TYPE_DEFAULT;
  1766.             return (v === '集合住宅') ? 'apartment' : 'detached';
  1767.         }
  1769.         // 商品シリーズ自動判定 (Product.name から)
  1770.         // 根拠カタログ: YKK AP「ウチリモ」XAAAA-H26-067-1 (2026.04), 同「LiteU」XAAAA-H16-088-2,
  1771.         //              三協アルミ「プラメイクEII」0142_STJ1931L, LIXIL「インプラス」(既知)
  1772.         var PRODUCT_NAME_RAW = {{ Product.name|default('')|json_encode|raw }};
  1773.         function detectProductSeries(name) {
  1774.             if (!name) return null;
  1775.             if (/ウチリモ/.test(name)) return 'uchirimo';
  1776.             if (/プラマード\s*U/i.test(name)) return 'pramado_u';
  1777.             if (/インプラス/.test(name)) return 'inplus';
  1778.             if (/プラメイク\s*EII|プラメイクEII/i.test(name)) return 'plamake_eii';
  1779.             if (/LiteU/i.test(name)) return 'lite_u';
  1780.             return null;
  1781.         }
  1782.         // シリーズ上限グレード:
  1783.         //   'P'  = SS/P まで到達可能 (真空断熱ガラス採用シリーズ)
  1784.         //   'S'  = Low-E 複層止まり (真空断熱ガラスのラインなし)
  1785.         //   null = 単板のみ → 補助金対象外
  1786.         var SERIES_GRADE_CAP = {
  1787.             uchirimo:    'P',
  1788.             pramado_u:   'P',
  1789.             inplus:      'S',
  1790.             plamake_eii: 'S',
  1791.             lite_u:      null
  1792.         };
  1793.         var DETECTED_SERIES = detectProductSeries(PRODUCT_NAME_RAW);
  1794.         var SERIES_GRADE_CAP_VAL = (DETECTED_SERIES !== null && Object.prototype.hasOwnProperty.call(SERIES_GRADE_CAP, DETECTED_SERIES))
  1795.             ? SERIES_GRADE_CAP[DETECTED_SERIES]
  1796.             : undefined;
  1798.         // 商品単位グレード上限 (PFC `meta_key=補助金グレード上限` で個別上書き)
  1799.         // 値: 'P' / 'SS' / 'S' / '対象外' / '無' / 'NONE' / 空文字 (未指定)
  1800.         var PRODUCT_GRADE_CAP_RAW = {{ getProduct_field(Product.id, '補助金グレード上限')|default('')|json_encode|raw }};
  1801.         function normalizeGradeCap(v) {
  1802.             if (v === null || v === undefined || v === '') return undefined;
  1803.             var s = String(v).trim().toUpperCase();
  1804.             if (s === 'NONE' || s === '対象外' || s === '無') return null;
  1805.             if (s === 'P' || s === 'SS') return 'P';
  1806.             if (s === 'S') return 'S';
  1807.             return undefined;
  1808.         }
  1809.         var PRODUCT_GRADE_CAP = normalizeGradeCap(PRODUCT_GRADE_CAP_RAW);
  1811.         // 窓種 (subtype = option1) ごとのグレード上限.
  1812.         // 根拠: YKK AP「ウチリモ」業務用 (XAAAA-H26-067-1) の窓種別ラインナップで
  1813.         //      真空ガラス (Glavenir) の設定有無を確認:
  1814.         //        引違い窓 (2/3/4枚建) / 浴室仕様 引違い窓 / FIX窓        → P 到達可能
  1815.         //        内開き窓 (居室/浴室) / 開き窓テラス / テラスドア類       → 真空ガラスなし → S 止まり
  1816.         function detectSubtypeGradeCap(subtype) {
  1817.             if (!subtype) return undefined;
  1818.             var s = String(subtype);
  1819.             if (/内開|開き窓テラス|テラスドア|開き戸/.test(s)) return 'S';
  1820.             return undefined;
  1821.         }
  1823.         // クリップ: 強さは 'P' > 'S' > null (対象外). cap=null は強制対象外, cap=undefined は無効化なし.
  1824.         function clipGradeBy(grade, cap) {
  1825.             if (cap === undefined) return grade;
  1826.             if (cap === null)      return null;
  1827.             if (grade === null)    return null;
  1828.             if (cap === 'S' && grade === 'P') return 'S';
  1829.             return grade;
  1830.         }
  1831.         function finalizeGlassGrade(raw, subtype) {
  1832.             var g = clipGradeBy(raw, SERIES_GRADE_CAP_VAL);
  1833.             g     = clipGradeBy(g,   detectSubtypeGradeCap(subtype));
  1834.             g     = clipGradeBy(g,   PRODUCT_GRADE_CAP);
  1835.             return g;
  1836.         }
  1838.         /**
  1839.          * ガラスタイプ名から性能区分 'P' (SS, Uw≤1.1) / 'S' (Uw≤1.5) / null を判別.
  1840.          * null = 補助対象外.
  1841.          *
  1842.          * 根拠: YKK AP「ウチリモ 内窓」業務用カタログ (XAAAA-H26-069-1) で
  1843.          *       P (SS) は真空断熱ガラスのみ、Low-E はアルゴン入りでも S 止まり、
  1844.          *       Low-E ガス無 + 型ガラス / フロストは 2026年4月で対象外、
  1845.          *       が確認できた。アルゴン入り Low-E を P 判定する旧ルールは誤りだった。
  1846.          *
  1847.          * シリーズによっては P がそもそも存在しない (LIXIL インプラスは S 一律)
  1848.          * ため、最終的には PFC で商品単位の上限を上書きできる仕組みが必要。
  1849.          */
  1850.         function detectGlassPerformance(glassName) {
  1851.             if (!glassName) return null;
  1852.             var n = String(glassName);
  1853.             // 補助対象外: 単板 / 和紙調 / 防音 / 防犯 / 型ガラス・フロスト (Low-E ガス無の型は 2026/4 で対象外)
  1854.             if (/単ガラス|単板|和紙調|防音|防犯|複層\/型|型ガラス|フロスト/.test(n)) return null;
  1855.             // P (SS): 真空断熱ガラスのみ
  1856.             if (/真空断熱/.test(n)) return 'P';
  1857.             // S: Low-E 系のみ (アルゴン入りでも S 止まり)
  1858.             if (/Low-?E/i.test(n)) return 'S';
  1859.             // 一般複層 / ブラインドイン複層 / 複層強化 など Low-E 無しの複層は補助対象外
  1860.             return null;
  1861.         }
  1863.         /**
  1864.          * 幅 mm × 高さ mm からサイズ区分 'G' (≥4.0㎡) / 'L' (2.8-3.9) / 'M' (1.6-2.7) / 'S' (0.2-1.5) / null.
  1865.          * null = 補助対象外 (0.2㎡ 未満).
  1866.          */
  1867.         function detectSizeClass(w_mm, h_mm) {
  1868.             var w = parseFloat(w_mm) || 0;
  1869.             var h = parseFloat(h_mm) || 0;
  1870.             if (w <= 0 || h <= 0) return null;
  1871.             var area = (w * h) / 1000000.0;
  1872.             if (area < 0.2) return null;
  1873.             if (area < 1.6) return 'S';
  1874.             if (area < 2.8) return 'M';
  1875.             if (area < 4.0) return 'L';
  1876.             return 'G';
  1877.         }
  1879.         function lookupSubsidyAmount(performance, sizeClass) {
  1880.             if (!performance || !sizeClass) return 0;
  1881.             var t = WINDOW_SUBSIDY_MATRIX[getCurrentHousingKey()];
  1882.             if (!t || !t[performance]) return 0;
  1883.             return t[performance][sizeClass] || 0;
  1884.         }
  1886.         /**
  1887.          * mm 入力値を ladder バケット文字列に変換する.
  1888.          *   bucketizeMm(1750, ["100cm まで","150cm まで","200cm まで","300cm まで"]) → "200cm まで"
  1889.          * - 入力が空 or 0 のときはそのまま返す (未入力扱い)
  1890.          * - 入力がラダー最大を超えるときは最大バケットを返す (= 価格上限の保護)
  1891.          * - 入力文字列が既にラダーラベルそのものなら無変換 (互換のため)
  1892.          */
  1893.         function bucketizeMm(input, ladder) {
  1894.             if (!input && input !== 0) return '';
  1895.             if (!ladder || ladder.length === 0) return input;
  1896.             var s = String(input).trim();
  1897.             if (s === '') return '';
  1898.             if (ladder.indexOf(s) >= 0) return s;
  1899.             var mm = parseMm(s);
  1900.             if (mm <= 0) return s;
  1901.             var withMax = ladder.map(function(b) { return { label: b, max: parseMm(b) }; });
  1902.             withMax.sort(function(a, b) { return a.max - b.max; });
  1903.             for (var i = 0; i < withMax.length; i++) {
  1904.                 if (mm <= withMax[i].max) return withMax[i].label;
  1905.             }
  1906.             return withMax[withMax.length - 1].label;
  1907.         }
  1909.         /**
  1910.          * pp 配列から該当 1 行を返す. 完全一致優先、見つからなければ最初の候補.
  1911.          * 軸: subtype (option1) / w / h / m / c. axisMatch は既存ロジックと同じ.
  1912.          * sale_type=2 では pw_val / ph_val に mm 数値が来るため、内部で bucketizeMm
  1913.          * を通してから既存マッチングに渡す.
  1914.          */
  1915.         function lookupPpRow(subtype, pw_val, ph_val, pm_val, pc_val) {
  1916.             if (!pp || pp.length === 0) return null;
  1917.             var pw_bucket = bucketizeMm(pw_val, PP_W_LADDER);
  1918.             var ph_bucket = bucketizeMm(ph_val, PP_H_LADDER);
  1919.             var axMatch = function(input, value) {
  1920.                 return input == value || input === '指定なし' || value === '' || value == null;
  1921.             };
  1922.             var colMatch = function(input, value) {
  1923.                 if (axMatch(input, value)) return true;
  1924.                 if (typeof value === 'string' && value.indexOf('/') !== -1 && input) {
  1925.                     return value.split('/').some(function(s) { return s.trim() === input; });
  1926.                 }
  1927.                 return false;
  1928.             };
  1929.             var candidates = pp.filter(function(el) {
  1930.                 return axMatch(pw_bucket, el.w)
  1931.                     && axMatch(ph_bucket, el.h)
  1932.                     && axMatch(pm_val, el.m)
  1933.                     && axMatch(subtype, el.option1);
  1934.             });
  1935.             for (var i = 0; i < candidates.length; i++) {
  1936.                 if (colMatch(pc_val, candidates[i].c)) return candidates[i];
  1937.             }
  1938.             return candidates[0] || null;
  1939.         }
  1941.         /**
  1942.          * "1000mm" / "200cm" / "1.0m" / 単位なし → mm に正規化して返す.
  1943.          * UI 上の「200cm まで」等の文字列をそのまま渡せるようにする.
  1944.          */
  1945.         function parseMm(s) {
  1946.             if (!s) return 0;
  1947.             var str = String(s);
  1948.             var m = str.match(/(\d+(?:\.\d+)?)/);
  1949.             if (!m) return 0;
  1950.             var num = parseFloat(m[1]);
  1951.             if (/mm/i.test(str)) return num;
  1952.             if (/cm/i.test(str)) return num * 10;
  1953.             if (/(^|\d)\s*m($|\W)/i.test(str)) return num * 1000;
  1954.             return num;
  1955.         }
  1957.         /**
  1958.          * 1 タイプブロックから入力を読み、pp lookup → 単価・補助金額を計算して返す.
  1959.          * incomplete=true: 軸のどれかが未選択 → 計算しない (UI で「未選択」を示すため).
  1960.          */
  1961.         function collectWindowTypeRow(block) {
  1962.             var get = function(axis) {
  1963.                 // radio / checkbox は :checked、それ以外 (number/text) は値そのまま.
  1964.                 var radio = block.querySelector('input[data-axis="' + axis + '"]:checked');
  1965.                 if (radio) return radio.value;
  1966.                 var any = block.querySelector('input[data-axis="' + axis + '"]');
  1967.                 if (!any) return '';
  1968.                 if (any.type === 'radio' || any.type === 'checkbox') return '';
  1969.                 return (any.value || '').trim();
  1970.             };
  1971.             var setqtyEl = block.querySelector('input[data-axis="setqty"]');
  1972.             var subtype = get('subtype');
  1973.             var pw_val  = get('pw');
  1974.             var ph_val  = get('ph');
  1975.             var pm_val  = get('pm');
  1976.             var pc_val  = get('pc');
  1977.             var setqty  = setqtyEl ? Math.max(1, parseInt(setqtyEl.value) || 1) : 1;
  1979.             var row = {
  1980.                 subtype: subtype, pw: pw_val, ph: ph_val, pm: pm_val, pc: pc_val, setqty: setqty,
  1981.                 unit_price_exc: 0, unit_ct_exc: 0, subsidy: 0,
  1982.                 size_class: null, glass_perf: null,
  1983.                 incomplete: false
  1984.             };
  1986.             // p_option1 / p_w / p_h / p_m / color のいずれかが商品データに無いときは未選択でも完了扱いにする.
  1987.             // (例: 商品によっては subtype が無い場合がある)
  1988.             var hasSubtype = !!block.querySelector('input[data-axis="subtype"]');
  1989.             var hasPw      = !!block.querySelector('input[data-axis="pw"]');
  1990.             var hasPh      = !!block.querySelector('input[data-axis="ph"]');
  1991.             var hasPm      = !!block.querySelector('input[data-axis="pm"]');
  1992.             var hasPc      = !!block.querySelector('input[data-axis="pc"]');
  1994.             if ((hasSubtype && !subtype) || (hasPw && !pw_val) || (hasPh && !ph_val)
  1995.                 || (hasPm && !pm_val)  || (hasPc && !pc_val)) {
  1996.                 row.incomplete = true;
  1997.                 return row;
  1998.             }
  2000.             var ppRow = lookupPpRow(subtype, pw_val, ph_val, pm_val, pc_val);
  2001.             if (ppRow) {
  2002.                 row.unit_price_exc = parseInt(ppRow.price) || 0;
  2003.                 row.unit_ct_exc    = parseInt(ppRow.ct)    || 0;
  2004.             }
  2005.             // ガラス名検出 → シリーズ上限 → subtype 上限 → 商品上限 の順で min クリップ.
  2006.             // 例: LiteU (SERIES_GRADE_CAP_VAL=null) は Low-E でも null に落ちて補助対象外.
  2007.             // 例: ウチリモの「内開き窓」subtype は真空ガラスでも S に落ちる.
  2008.             row.glass_perf = finalizeGlassGrade(detectGlassPerformance(pm_val), subtype);
  2009.             row.size_class = detectSizeClass(parseMm(pw_val), parseMm(ph_val));
  2010.             row.subsidy    = lookupSubsidyAmount(row.glass_perf, row.size_class);
  2011.             return row;
  2012.         }
  2014.         /**
  2015.          * sale_type=2 用集計: 全タイプから合計を出し DOM 更新.
  2016.          * 計算式 (税抜→税込で出口で 1.10 倍):
  2017.          *   商品金額 = Σ(各タイプ単価 × set_qty)
  2018.          *   基本工事費 = 1 回分 (各タイプ pp.ct のうち最初に得た非ゼロ値)
  2019.          *   補助金合計 = Σ(各タイプ補助金 × set_qty)
  2020.          *   実質支払額 = (商品+ct+option) 税込 - 補助金合計
  2021.          */
  2022.         function recalcAllForSaleType2() {
  2023.             if (typeof SALE_TYPE_ID === 'undefined' || SALE_TYPE_ID != 2) return;
  2024.             if (!pp || pp.length === 0) {
  2025.                 $('#mitsumori_message').text('価格データ準備中');
  2026.                 $('#mitsumori_btn').hide();
  2027.                 ['#mitsumori_goukei','#mitsumori_off','#mitsumori_price','#maker_price',
  2028.                  '#mitsumori_ct','#mitsumori_option','#mitsumori_kei','#mitsumori_shoukei','#mitsumori_tax']
  2029.                  .forEach(function(s){ $(s).text('---円'); });
  2030.                 return;
  2031.             }
  2032.             var blocks = document.querySelectorAll('#window-types-container .window-type-block');
  2033.             if (blocks.length === 0) return;
  2035.             var rows = [];
  2036.             var hasIncomplete = false;
  2037.             var baseCt = 0;
  2038.             var hasAnyPriced = false;
  2040.             blocks.forEach(function(b) {
  2041.                 var r = collectWindowTypeRow(b);
  2042.                 rows.push({ block: b, row: r });
  2043.                 if (r.incomplete) hasIncomplete = true;
  2044.                 if (r.unit_ct_exc > 0 && baseCt === 0) baseCt = r.unit_ct_exc;
  2045.                 if (r.unit_price_exc > 0) hasAnyPriced = true;
  2046.                 var subSpan = b.querySelector('.wt-subsidy-amount');
  2047.                 if (subSpan) subSpan.textContent = r.incomplete ? '―' : Math.round(r.subsidy * r.setqty).toLocaleString();
  2048.             });
  2050.             if (hasIncomplete || !hasAnyPriced) {
  2051.                 $('#mitsumori_message').text('窓タイプを選択してください');
  2052.                 $('#mitsumori_btn').hide();
  2053.                 return;
  2054.             }
  2056.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  2057.             var purchaseOnly = ops.some(function(v){ return v === '商品購入のみ'; });
  2059.             var sumPriceExc = 0, sumSubsidy = 0, totalPanes = 0;
  2060.             rows.forEach(function(item) {
  2061.                 var r = item.row;
  2062.                 sumPriceExc += r.unit_price_exc * r.setqty;
  2063.                 sumSubsidy  += r.subsidy * r.setqty;
  2064.                 if (r.unit_price_exc > 0) totalPanes += r.setqty;
  2065.             });
  2067.             // 内窓 工事費（顧客最終回答）: 1枚目 22,000円 + 2枚目以降 1枚あたり +5,000円（税込表示額）。
  2068.             // 既存パイプライン整合のため税抜(ctExc)も用意（税行 taxAmt 用）。商品購入のみは 0。
  2069.             var WINDOW_CT_BASE = 22000, WINDOW_CT_ADD = 5000;
  2070.             var ctIncTarget = purchaseOnly ? 0 : (WINDOW_CT_BASE + Math.max(0, totalPanes - 1) * WINDOW_CT_ADD);
  2071.             var ctExc  = purchaseOnly ? 0 : Math.round(ctIncTarget / (1 + TAX_RATE));
  2072.             var optExc = purchaseOnly ? 0 : (collectOptions().total || 0);
  2074.             var sumPriceInc = Math.round(sumPriceExc * (1 + TAX_RATE));
  2075.             var ctInc       = ctIncTarget;
  2076.             var optInc      = Math.round(optExc * (1 + TAX_RATE));
  2077.             var goukeiInc   = sumPriceInc + ctInc + optInc;
  2079.             // 窓リノベ2026 申請条件:
  2080.             //   - 補助金合計 ≥ 50,000 円 (5 万円未満は申請不可 → 還元 0 円扱い)
  2081.             //   - 1 戸あたり上限 1,000,000 円 (住宅・非住宅240㎡以下)
  2082.             //     ※ 非住宅 240㎡超の 10,000,000 円上限は対象外 (商品設計時に別扱い想定)
  2083.             var SUBSIDY_MIN_AMOUNT = 50000;
  2084.             var SUBSIDY_MAX_PER_UNIT = 1000000;
  2085.             var subsidyRawSum = sumSubsidy;
  2086.             var subsidyEligible = subsidyRawSum >= SUBSIDY_MIN_AMOUNT;
  2087.             var subsidyAmt = 0;
  2088.             var subsidyNote = '';
  2089.             if (subsidyEligible) {
  2090.                 if (subsidyRawSum > SUBSIDY_MAX_PER_UNIT) {
  2091.                     subsidyAmt = SUBSIDY_MAX_PER_UNIT;
  2092.                     subsidyNote = '※補助上限 ' + SUBSIDY_MAX_PER_UNIT.toLocaleString()
  2093.                         + '円 超過分は控除対象外（補助金合計 ' + subsidyRawSum.toLocaleString() + '円）';
  2094.                 } else {
  2095.                     subsidyAmt = subsidyRawSum;
  2096.                 }
  2097.             } else if (subsidyRawSum > 0) {
  2098.                 subsidyNote = '※補助金合計が 5 万円未満のため申請対象外です（'
  2099.                     + subsidyRawSum.toLocaleString() + '円）';
  2100.             } else if (SERIES_GRADE_CAP_VAL === null) {
  2101.                 // LiteU 等の単板構成シリーズ: グレード判定で必ず null になる
  2102.                 subsidyNote = '※本商品は補助金（先進的窓リノベ2026事業）対象外です';
  2103.             } else if (PRODUCT_GRADE_CAP === null) {
  2104.                 subsidyNote = '※本商品は補助金対象外として登録されています';
  2105.             }
  2107.             var implementedInc = Math.max(0, goukeiInc - subsidyAmt);
  2108.             var taxAmt      = Math.round((sumPriceExc + ctExc + optExc) * TAX_RATE);
  2110.             $('#mitsumori_message').text(subsidyNote);
  2111.             $('#mitsumori_btn').show();
  2112.             $('#mitsumori_goukei').text(goukeiInc.toLocaleString() + '円');
  2113.             $('#mitsumori_price').text(sumPriceInc.toLocaleString() + '円');
  2114.             $('#mitsumori_ct').text(ctInc.toLocaleString() + '円');
  2115.             $('#mitsumori_option').text(optInc.toLocaleString() + '円');
  2116.             $('#mitsumori_off').text((subsidyAmt > 0 ? '-' : '') + subsidyAmt.toLocaleString() + '円');
  2117.             $('#maker_price').text('---円'); // 補助金窓では未使用
  2118.             $('#mitsumori_kei').text(goukeiInc.toLocaleString() + '円');
  2119.             $('#mitsumori_shoukei').text(implementedInc.toLocaleString() + '円');
  2120.             $('#mitsumori_tax').text(taxAmt.toLocaleString() + '円');
  2122.             // 内訳を mitsumori_json に詰めて hidden input にセット (PDF / カート連携用)
  2123.             var window_types = rows.map(function(item) {
  2124.                 var r = item.row;
  2125.                 // 幅 / 高さは数値入力 (mm) が来るので "1750mm" 形式で保存する.
  2126.                 // 古い radio 由来の "200cm まで" 形式が来た場合はそのまま保存して互換.
  2127.                 var w_mm = parseMm(r.pw);
  2128.                 var h_mm = parseMm(r.ph);
  2129.                 var w_save = (w_mm > 0 && /^\s*\d+(?:\.\d+)?\s*$/.test(String(r.pw))) ? (w_mm + 'mm') : r.pw;
  2130.                 var h_save = (h_mm > 0 && /^\s*\d+(?:\.\d+)?\s*$/.test(String(r.ph))) ? (h_mm + 'mm') : r.ph;
  2131.                 return {
  2132.                     subtype:        r.subtype,
  2133.                     w:              w_save,
  2134.                     h:              h_save,
  2135.                     glass:          r.pm,
  2136.                     color:          r.pc,
  2137.                     setqty:         r.setqty,
  2138.                     unit_price_inc: Math.round(r.unit_price_exc * (1 + TAX_RATE)),
  2139.                     line_total_inc: Math.round(r.unit_price_exc * r.setqty * (1 + TAX_RATE)),
  2140.                     size_class:     r.size_class,
  2141.                     glass_perf:     r.glass_perf,
  2142.                     subsidy_unit:   r.subsidy,
  2143.                     subsidy_total:  r.subsidy * r.setqty
  2144.                 };
  2145.             });
  2146.             var opCalc2 = collectOptions();
  2147.             var mitsumori_json = {
  2148.                 "mitsumori_goukei": goukeiInc.toLocaleString() + '円',
  2149.                 "mitsumori_price":  sumPriceInc.toLocaleString() + '円',
  2150.                 "mitsumori_ct":     ctInc.toLocaleString() + '円',
  2151.                 "mitsumori_option": optInc.toLocaleString() + '円',
  2152.                 "mitsumori_off":    (subsidyAmt > 0 ? '-' : '') + subsidyAmt.toLocaleString() + '円',
  2153.                 "maker_price":      '---円',
  2154.                 "product_id":       {{ Product.id }},
  2155.                 "sale_type":        SALE_TYPE_ID,
  2156.                 "housing_key":      getCurrentHousingKey(),
  2157.                 "series_key":       DETECTED_SERIES,
  2158.                 "series_grade_cap": (SERIES_GRADE_CAP_VAL === undefined) ? null : SERIES_GRADE_CAP_VAL,
  2159.                 "product_grade_cap":(PRODUCT_GRADE_CAP    === undefined) ? null : PRODUCT_GRADE_CAP,
  2160.                 "window_types":     window_types,
  2161.                 "subsidy_total":    subsidyAmt,
  2162.                 "subsidy_raw":      subsidyRawSum,
  2163.                 "subsidy_eligible": subsidyEligible,
  2164.                 "subsidy_note":     subsidyNote,
  2165.                 "op_items":         opCalc2.items
  2166.             };
  2167.             $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  2168.             renderWindowTypesModalRows(window_types, subsidyAmt);
  2169.         }
  2171.         /**
  2172.          * sale_type=2 用: 見積モーダル明細テーブルを window_types で動的展開.
  2173.          * - 既存の商品名行 (1 行目) は hide() し、各タイプ行を上に挿入
  2174.          * - 基本工事費行はそのまま (#mitsumori_ct_01 / _02 が更新されている)
  2175.          * - 補助金 (割引額) 行を末尾に追加
  2176.          * - 既存の renderOptionDetailRows と共存できるよう class で区別
  2177.          */
  2178.         function renderWindowTypesModalRows(window_types, subsidyAmt) {
  2179.             var $tbody = $('.modal-mitsumori table tbody');
  2180.             if (!$tbody.length) return;
  2181.             // 既存の動的行を全削除 (opt-row は既存実装、wt-row / wt-subsidy-row は今回追加)
  2182.             $tbody.find('tr.wt-row, tr.wt-subsidy-row').remove();
  2184.             var $itemRow = $tbody.find('tr').first();
  2185.             var fmt = new Intl.NumberFormat('ja-JP');
  2187.             if (!window_types || window_types.length === 0) {
  2188.                 // 集計対象なし → 商品名行を表示に戻す
  2189.                 $itemRow.show();
  2190.                 return;
  2191.             }
  2193.             window_types.forEach(function(wt, i) {
  2194.                 var label = '窓タイプ' + (i + 1) + '：'
  2195.                     + (wt.subtype || '') + ' / '
  2196.                     + (wt.w || '') + '×' + (wt.h || '') + ' / '
  2197.                     + (wt.glass || '') + ' / '
  2198.                     + (wt.color || '');
  2199.                 var $tr = $('<tr class="wt-row"></tr>')
  2200.                     .append('<td>' + label + '</td>')
  2201.                     .append('<td>' + wt.setqty + '</td>')
  2202.                     .append('<td>セット</td>')
  2203.                     .append('<td>' + fmt.format(wt.unit_price_inc) + '円</td>')
  2204.                     .append('<td>' + fmt.format(wt.line_total_inc) + '円</td>');
  2205.                 $itemRow.before($tr);
  2206.             });
  2208.             // 元の商品名行は複数タイプに置換されたので非表示
  2209.             $itemRow.hide();
  2211.             // 補助金（割引額）行を末尾に追加
  2212.             if (subsidyAmt > 0) {
  2213.                 var $subRow = $('<tr class="wt-subsidy-row"></tr>')
  2214.                     .append('<td>補助金（割引額）</td>')
  2215.                     .append('<td>1</td>')
  2216.                     .append('<td>式</td>')
  2217.                     .append('<td>-' + fmt.format(subsidyAmt) + '円</td>')
  2218.                     .append('<td>-' + fmt.format(subsidyAmt) + '円</td>');
  2219.                 $tbody.append($subRow);
  2220.             }
  2221.         }
  2223.         // 公開: onWindowTypeAxisChange (UI 骨格 task 1) からも呼ばれる
  2224.         window.recalcAll = recalcAllForSaleType2;
  2226.         // 公開: ガラス選択肢が補助金対象か (窓タイプブロック生成時のバッジ判定に使う).
  2227.         // subtype は P→S に落とすことはあっても null にはしないため、性能区分の
  2228.         // 対象/対象外は subtype に依存しない。ここでは series/product 上限のみ適用し、
  2229.         // finalizeGlassGrade が null でなければ「補助金対象ガラス」と判定する。
  2230.         window.glassYieldsSubsidy = function(glassName) {
  2231.             if (!glassName) return false;
  2232.             return finalizeGlassGrade(detectGlassPerformance(glassName), '') !== null;
  2233.         };
  2235.         function mitsumori_simulation(type , value_id){
  2236.             // sale_type=2 (補助金窓) は複数タイプ集計 UI に統合済み. 既存 mitsumori_simulation は使わない.
  2237.             if (typeof SALE_TYPE_ID !== 'undefined' && SALE_TYPE_ID == 2) {
  2238.                 // type/value_id が op\d+ (施工オプション) の場合はグローバル変数を先に更新
  2239.                 if (type && /^op\d+$/.test(type) && value_id) {
  2240.                     var v = $('#'+value_id).val();
  2241.                     if (type === 'op0')  op0  = v;
  2242.                     if (type === 'op1')  op1  = v;
  2243.                     if (type === 'op2')  op2  = v;
  2244.                     if (type === 'op3')  op3  = v;
  2245.                     if (type === 'op4')  op4  = v;
  2246.                     if (type === 'op5')  op5  = v;
  2247.                     if (type === 'op6')  op6  = v;
  2248.                     if (type === 'op7')  op7  = v;
  2249.                     if (type === 'op8')  op8  = v;
  2250.                     if (type === 'op9')  op9  = v;
  2251.                     if (type === 'op10') op10 = v;
  2252.                 }
  2253.                 recalcAllForSaleType2();
  2254.                 return;
  2255.             }
  2257.             // 価格データ未登録 (pp 行 0 件) の商品は axis 入力に依存せず
  2258.             // 「価格データ準備中」を表示して終了する.
  2259.             // (例: scrape 未対象の新規商品 — um のウチリモ 7487/7488 等)
  2260.             if (!pp || pp.length === 0) {
  2261.                 $('#mitsumori_message').text("価格データ準備中");
  2262.                 $('#mitsumori_btn').hide();
  2263.                 $('#mitsumori_goukei').text("---円");
  2264.                 $('#mitsumori_off').text("---円");
  2265.                 $('#mitsumori_price').text("---円");
  2266.                 $('#maker_price').text("---円");
  2267.                 $('#mitsumori_ct').text("---円");
  2268.                 $('#mitsumori_option').text("---円");
  2269.                 $('#mitsumori_kei').text("---円");
  2270.                 $('#mitsumori_shoukei').text("---円");
  2271.                 $('#mitsumori_tax').text("---円");
  2272.                 return;
  2273.             }
  2274.             if(type == "pw"){
  2275.                 pw = $('#'+value_id).val();
  2276.             }
  2277.             if(type == "pd"){
  2278.                 pd = $('#'+value_id).val();
  2279.             }
  2280.             if(type == "ph"){
  2281.                 ph = $('#'+value_id).val();
  2282.             }
  2283.             if(type == "pm"){
  2284.                 pm = $('#'+value_id).val();
  2285.             }
  2286.             if(type == "pc"){
  2287.                 pc = $('#'+value_id).val();
  2288.             }
  2289.             if(type == "option1"){
  2290.                 option1 = $('#'+value_id).val();
  2291.             }
  2292.             if(type == "option2"){
  2293.                 option2 = $('#'+value_id).val();
  2294.             }
  2295.             if(type == "op0"){ op0 = $('#'+value_id).val(); }
  2296.             if(type == "op1"){ op1 = $('#'+value_id).val(); }
  2297.             if(type == "op2"){ op2 = $('#'+value_id).val(); }
  2298.             if(type == "op3"){ op3 = $('#'+value_id).val(); }
  2299.             if(type == "op4"){ op4 = $('#'+value_id).val(); }
  2300.             if(type == "op5"){ op5 = $('#'+value_id).val(); }
  2301.             if(type == "op6"){ op6 = $('#'+value_id).val(); }
  2302.             if(type == "op7"){ op7 = $('#'+value_id).val(); }
  2303.             if(type == "op8"){ op8 = $('#'+value_id).val(); }
  2304.             if(type == "op9"){ op9 = $('#'+value_id).val(); }
  2305.             if(type == "op10"){ op10 = $('#'+value_id).val(); }
  2307.             // op0 が「商品購入のみ」のとき、他のオプション (op1..op10) を disable 化.
  2308.             // 価格計算側 (calcGoukei の purchaseOnly 分岐) は既にゼロ化しているが、
  2309.             // UI で選択可能に見えるとユーザーが混乱するため radio を完全に無効化する.
  2310.             (function applyPurchaseOnlyUI() {
  2311.                 var isPurchaseOnly = (op0 === '商品購入のみ');
  2312.                 for (var k = 1; k <= 10; k++) {
  2313.                     var $inputs = $('input[name="op' + k + '"]');
  2314.                     if ($inputs.length === 0) continue;
  2315.                     $inputs.prop('disabled', isPurchaseOnly);
  2316.                     var $group = $inputs.first().closest('.form-group');
  2317.                     $group.css({
  2318.                         'opacity':        isPurchaseOnly ? '0.4'  : '1',
  2319.                         'pointer-events': isPurchaseOnly ? 'none' : 'auto'
  2320.                     });
  2321.                 }
  2322.             })();
  2324.             // 全 type 共通: 該当 radio を checked にし、ボタンの is-selected を付け替え + ラベル更新.
  2325.             //   value_id が指定されていて、対応する DOM 要素が opt-btn 配下にあれば適用する.
  2326.             //   (icheck-danger 形式から opt-btn 形式に統一した際、option1/option2/pw/pd/ph/pm/pc 等の
  2327.             //    クリックで is-selected が更新されない不具合があったため、op\d+ 限定の処理を一般化)
  2328.             if (value_id) {
  2329.                 var $clicked = $('#' + value_id);
  2330.                 if ($clicked.length && $clicked.closest('.opt-btn').length) {
  2331.                     $clicked.prop('checked', true);
  2332.                     var groupName = $clicked.attr('name');
  2333.                     $('input[name="' + groupName + '"]').closest('.opt-btn').removeClass('is-selected');
  2334.                     $clicked.closest('.opt-btn').addClass('is-selected');
  2335.                     var $group = $clicked.closest('.form-group');
  2336.                     var $label = $group.find('.rp-section-label');
  2337.                     if ($label.length) {
  2338.                         var labelText = $label.text().split(':')[0].trim();
  2339.                         $label.html(labelText + ': <span>' + $clicked.val() + '</span>');
  2340.                     }
  2341.                     // op_data の price=0 & 解体/撤去/設置場所 オプションの場合、ON 選択時に「現場調査後に正式お見積もり」文言を表示.
  2342.                     //   (twig 側で is_removal_unknown ブロックを描画済み。display 切替のみ JS で行う)
  2343.                     if (/^op\d+$/.test(type)) {
  2344.                         var opIdx = type.replace('op', '');
  2345.                         var opEntry = op_data[parseInt(opIdx)];
  2346.                         if (opEntry) {
  2347.                             var $note = $group.find('.opt-survey-note[data-op-idx="' + opIdx + '"]');
  2348.                             if ($note.length) {
  2349.                                 var isOn = ($clicked.val() === opEntry.on);
  2350.                                 $note.toggle(isOn);
  2351.                             }
  2352.                         }
  2353.                         // wd (sale_type=5) のステップ / デッキフェンス用の注記もここで切替.
  2354.                         //   ステップ → deck_step (op0 だが op_data 範囲外), 必要 選択時に表示.
  2355.                         var radioName = $clicked.attr('name');
  2356.                         if (radioName === 'deck_step') {
  2357.                             $group.find('.opt-survey-note-wd-step').toggle($clicked.val() === '必要');
  2358.                         } else if (radioName === 'deck_fence') {
  2359.                             $group.find('.opt-survey-note-wd-fence').toggle($clicked.val() === '必要');
  2360.                         }
  2361.                     }
  2362.                 }
  2363.             }
  2365.             // 必須項目チェックは sale_type 1 系（カーポート/物置/フェンスなど価格マトリクス必要）に限定
  2366.             var requireMatrix = (SALE_TYPE_ID == 1 || SALE_TYPE_ID == 2 || SALE_TYPE_ID == 3 || SALE_TYPE_ID == 4 || SALE_TYPE_ID == 5 || SALE_TYPE_ID == 6 || SALE_TYPE_ID == 7 || SALE_TYPE_ID == 9);
  2368.             // sale_type=3 (物置・ゴミステーション・照明 等) では「素材」を選択肢として扱わない.
  2369.             //   - mo/gs/sy は m が "指定なし" など名目的にしか入っていない
  2370.             //   - sl は m が空のままで matrix に行が来る
  2371.             //   そのため pm の必須チェックを sale_type=3 でスキップする。
  2372.             var pmRequired = (SALE_TYPE_ID != 3);
  2374.             if (requireMatrix) {
  2375.                 if(pmRequired && pm == ""){
  2376.                     $('#mitsumori_message').text("素材を選択してください");
  2377.                 }
  2378.                 if(ph == ""){
  2379.                     $('#mitsumori_message').text("高さを選択してください");
  2380.                 }
  2381.                 if(pd == ""){
  2382.                     $('#mitsumori_message').text("奥行きを選択してください");
  2383.                 }
  2384.                 if(pw == ""){
  2385.                     $('#mitsumori_message').text("幅を選択してください");
  2386.                 }
  2387.                 if(pc == ""){
  2388.                     $('#mitsumori_message').text("カラーを選択してください");
  2389.                     $('#mitsumori_btn').hide();
  2390.                     $('#mitsumori_goukei').text("---円");
  2391.                     $('#mitsumori_off').text("---円");
  2392.                     $('#mitsumori_price').text("---円");
  2393.                     $('#maker_price').text("---円");
  2394.                     $('#mitsumori_ct').text("---円");
  2395.                     $('#mitsumori_option').text("---円");
  2396.                 }
  2397.             }
  2399.             if(pw != "" && pd != "" && ph != "" && (!pmRequired || pm != "") && pc != ""){
  2400.                 $('#mitsumori_btn').show();
  2402.                 // 入力コンテキスト（sale_type 別パラメータ）
  2403.                 var ctx = {
  2404.                     set_count:    parseInt($('#set_count').val())    || 1,
  2405.                     daisu:        parseInt($('#daisu').val())        || 1,
  2406.                     maisu:        parseInt($('#maisu').val())        || 3,
  2407.                     suuryou:      parseInt($('#suuryou').val())      || 1,
  2408.                     area:         (function(){
  2409.                         // tf(人工芝): 施工サイズ 縦(m)×横(m) から面積を算出し #area に反映.
  2410.                         var L = parseFloat($('#tf_len').val()) || 0;
  2411.                         var W = parseFloat($('#tf_wid').val()) || 0;
  2412.                         if (L > 0 && W > 0) { var a = L * W; $('#area').val(a); return a; }
  2413.                         return parseFloat($('#area').val()) || 0;
  2414.                     })(),
  2415.                     tf_len:       parseFloat($('#tf_len').val())     || 0,
  2416.                     tf_wid:       parseFloat($('#tf_wid').val())     || 0,
  2417.                     tf_qty:       parseInt($('#tf_qty').val())       || 1,
  2418.                     quantityOnly: parseInt($('#quantity_only').val())|| 1,
  2419.                     mado_w:       $('#mado_w').val() || '',
  2420.                     mado_h:       $('#mado_h').val() || '',
  2421.                     mado_type:    $('input[name=mado_type]:checked').val()  || '',
  2422.                     glass_type:   $('input[name=glass_type]:checked').val() || '',
  2423.                     deck_step:    $('input[name=deck_step]:checked').val()  || '',
  2424.                     deck_fence:   $('input[name=deck_fence]:checked').val() || '',
  2425.                 };
  2427.                 // 施工オプション集計（残土処理を含む）
  2428.                 var opCalc = collectOptions();
  2430.                 var pp_matched = false;
  2431.                 // 各軸の汎用 axisMatch:
  2432.                 //   user 選択 == matrix 値 / user "指定なし" / matrix 値が空
  2433.                 var axisMatch = function(input, value){
  2434.                     return input == value || input == "指定なし" || value === "" || value == null;
  2435.                 };
  2436.                 // 色専用マッチャー: scraper のデータ形式に合わせて拡張する
  2437.                 //   1. 完全一致 / "指定なし" / 値が空 → 真 (axisMatch と同じ)
  2438.                 //   2. matrix 値が "色1/色2/色3" の形 (同価格グループ) → split して user 選択が含まれれば真
  2439.                 // scraper のロジック (scraper_price.py L765-779):
  2440.                 //   全色同価格 → c=""、価格違いグループあり → 各 group を "/" 結合した色名で 1 行
  2441.                 var colorMatch = function(input, value){
  2442.                     if (axisMatch(input, value)) return true;
  2443.                     if (typeof value === 'string' && value.indexOf('/') !== -1 && input) {
  2444.                         var parts = value.split('/');
  2445.                         for (var idx = 0; idx < parts.length; idx++) {
  2446.                             if (parts[idx].trim() === input) return true;
  2447.                         }
  2448.                     }
  2449.                     return false;
  2450.                 };
  2452.                 // 他軸 (w/d/h/m + option1/option2) でマッチする pp 行を抽出.
  2453.                 // option1/option2 は um の subtype 等で使われる. axisMatch は free_area 側が
  2454.                 // 空のとき真を返すので、um 以外のカテゴリ (option 軸を使わない) でも影響なし.
  2455.                 var candidates = pp.filter(function(el){
  2456.                     return axisMatch(pw, el.w) && axisMatch(pd, el.d) && axisMatch(ph, el.h) && axisMatch(pm, el.m)
  2457.                         && axisMatch(option1, el.option1) && axisMatch(option2, el.option2);
  2458.                 });
  2459.                 // フォールバック: 全軸一致が 0 件のときに限り option1/option2 を無視して再マッチ。
  2460.                 // 玄関ドア等で option1(なし/ランマ付き)・option2(◯◯タイプ) が pm(開き方) から
  2461.                 // 導出可能な冗長軸で、未選択だと全軸 AND 一致を満たせず価格が出ない事象の救済。
  2462.                 // pm/幅/奥行/高さ は従来どおり一致を要求するため通常商品の価格選択に影響しない。
  2463.                 if (candidates.length === 0) {
  2464.                     candidates = pp.filter(function(el){
  2465.                         return axisMatch(pw, el.w) && axisMatch(pd, el.d) && axisMatch(ph, el.h) && axisMatch(pm, el.m);
  2466.                     });
  2467.                 }
  2468.                 var picked = null;
  2470.                 // 優先 1: 色も含めて完全一致 ("色1/色2" 形式の split match を含む)
  2471.                 for (var ii = 0; ii < candidates.length; ii++) {
  2472.                     if (colorMatch(pc, candidates[ii].c)) { picked = candidates[ii]; break; }
  2473.                 }
  2475.                 // 優先 2: 完全一致なし & user の pc が候補のどの c 値にも該当しない (= 命名違い等)
  2476.                 //   かつ候補全行で price が一致する場合は、色軸を実質無視して先頭行を採用.
  2477.                 //   例 id=3353: pp.c は "ステンカラー＋..." 6種だが price は全て同じなので
  2478.                 //     SM(スミ) を選んでも安全に最初の行の価格を返せる.
  2479.                 if (!picked && candidates.length > 0) {
  2480.                     var ppCsInCand = candidates.map(function(r){ return r.c || ''; });
  2481.                     var pcAbsent = (pc !== '' && pc !== '指定なし' && ppCsInCand.indexOf(pc) === -1
  2482.                                     && ppCsInCand.every(function(v){ return v.indexOf('/') === -1 || v.split('/').map(function(s){return s.trim();}).indexOf(pc) === -1; }));
  2483.                     if (pcAbsent) {
  2484.                         var uniqPrices = new Set();
  2485.                         candidates.forEach(function(r){ uniqPrices.add(String(r.price)); });
  2486.                         if (uniqPrices.size === 1) {
  2487.                             // 全候補同価格 → 色軸を wildcard 扱いで OK
  2488.                             picked = candidates[0];
  2489.                         }
  2490.                         // 価格が異なる場合は意図的に picked=null のまま「対応しておりません」.
  2491.                     }
  2492.                 }
  2493.                 pp.forEach((el) => {
  2494.                   if (el === picked) {
  2495.                     pp_matched = true;
  2497.                     // tg block-keyed オプション差額を集計 (tg 以外は total=0)
  2498.                     var oiCalc = collectOptionItems(el.w || '', el.d || '');
  2499.                     // tg ブロックに合わせてラジオを再描画 (tg 以外は no-op)
  2500.                     renderOptionItemRadios(el.w || '', el.d || '');
  2501.                     // fe ブロックの種類×段数 サブ radio (fe 以外/未設定は no-op)
  2502.                     renderFeBlockRadios();
  2503.                     // fe ご希望のフェンス設置方法 — 「既存ブロックに穴空け」 entry の連動表示
  2504.                     updateFeOpConditionalVisibility();
  2506.                     var calc       = calcGoukei(el, opCalc.total, ctx);
  2507.                     var goukei     = calc.goukei;
  2508.                     var price      = calc.price;
  2509.                     var ct         = calc.ct;
  2510.                     var optionSum  = calc.opt;
  2511.                     // tf(人工芝): 必要枚数入力へ算出結果を反映（施工サイズ入力時は上書き、
  2512.                     // 直接指定時は同値なので実質変化なし。要素が無い sale_type では no-op）
  2513.                     var $tfQty = $('#tf_qty');
  2514.                     if ($tfQty.length) $tfQty.val(calc.qty || 1);
  2515.                     // オプション差額は税抜 → 税込に変換して合計に加算
  2516.                     var oiIncTax   = toIncTax(oiCalc.total);
  2517.                     goukei += oiIncTax;
  2518.                     price  += oiIncTax;  // 差額は本体価格扱いとして mitsumori_price にも加算
  2519.                     // maker_price も scraper が税抜で保存しているため税込に変換
  2520.                 var makerPrice = toIncTax(parseInt(el.maker_price) || 0);
  2522.                     $('#mitsumori_message').text(formatter.format(goukei) + "円");
  2523.                     $('#mitsumori_goukei').text(formatter.format(goukei) + "円");
  2524.                     $('#mitsumori_off').text(formatter.format(price - makerPrice) + "円");
  2525.                     $('#mitsumori_price').text(formatter.format(price) + "円");
  2526.                     $('#maker_price').text(formatter.format(makerPrice) + "円");
  2527.                     $('#mitsumori_ct').text(formatter.format(ct) + "円");
  2528.                     $('#mitsumori_option').text(formatter.format(optionSum) + "円");
  2530.                     $('#mitsumori_kei').text(formatter.format(goukei) + "円");
  2531.                     $('#mitsumori_price_01').text(formatter.format(price) + "円");
  2532.                     $('#mitsumori_price_02').text(formatter.format(price) + "円");
  2533.                     $('#mitsumori_ct_01').text(formatter.format(ct) + "円");
  2534.                     $('#mitsumori_ct_02').text(formatter.format(ct) + "円");
  2535.                     $('#mitsumori_goukei_02').text(formatter.format(goukei) + "円");
  2537.                     var shoukei = goukei / 1.1;
  2538.                     var tax     = parseInt(goukei - shoukei);
  2539.                     $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  2540.                     $('#mitsumori_tax').text(formatter.format(tax) + "円");
  2542.                     // PDF 明細用：オプション内訳テーブルを差し込む (施工オプション + tg block オプション)
  2543.                     renderOptionDetailRows(opCalc.items.concat(oiCalc.items.map(function(it){
  2544.                         return { name: it.name, value: it.label, price: it.diff };
  2545.                     })));
  2546.                   }
  2547.                 });
  2549.                 if (!pp_matched) {
  2550.                     $('#mitsumori_message').text("この組み合わせは対応しておりません");
  2551.                     $('#mitsumori_btn').hide();
  2552.                     $('#mitsumori_goukei').text("---円");
  2553.                     $('#mitsumori_off').text("---円");
  2554.                     $('#mitsumori_price').text("---円");
  2555.                     $('#maker_price').text("---円");
  2556.                     $('#mitsumori_ct').text("---円");
  2557.                     $('#mitsumori_option').text("---円");
  2558.                     $('#mitsumori_kei').text("---円");
  2559.                     $('#mitsumori_shoukei').text("---円");
  2560.                     $('#mitsumori_tax').text("---円");
  2561.                 }
  2563.                 // mitsumori_json: バック側に送信する見積データ
  2564.                 var mitsumori_json = { "mitsumori_goukei": $('#mitsumori_goukei').text(),
  2565.                                         "mitsumori_goukei_02": $('#mitsumori_goukei_02').text(),
  2566.                                         "mitsumori_price": $('#mitsumori_price').text(),
  2567.                                         "maker_price": $('#maker_price').text(),
  2568.                                         "mitsumori_off": $('#mitsumori_off').text(),
  2569.                                         "mitsumori_ct": $('#mitsumori_ct').text(),
  2570.                                         "mitsumori_option": $('#mitsumori_option').text(),
  2571.                                         "product_id": {{ Product.id }},
  2572.                                         "sale_type": SALE_TYPE_ID,
  2573.                                         "pw": pw,
  2574.                                         "pd": pd,
  2575.                                         "ph": ph,
  2576.                                         "pm": pm,
  2577.                                         "pc": pc,
  2578.                                         "op": [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10],
  2579.                                         "op_items": opCalc.items,
  2580.                                         "mado_w":     ctx.mado_w,
  2581.                                         "mado_h":     ctx.mado_h,
  2582.                                         "mado_type":  ctx.mado_type,
  2583.                                         "glass_type": ctx.glass_type,
  2584.                                         "set_count":  ctx.set_count,
  2585.                                         "daisu":      ctx.daisu,
  2586.                                         "maisu":      ctx.maisu,
  2587.                                         "suuryou":    ctx.suuryou,
  2588.                                         "area":       ctx.area,
  2589.                                         "tf_len":     ctx.tf_len,
  2590.                                         "tf_wid":     ctx.tf_wid,
  2591.                                         "tf_qty":     $('#tf_qty').val(),
  2592.                                         "deck_step":  ctx.deck_step,
  2593.                                         "deck_fence": ctx.deck_fence };
  2595.                 $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  2596.             }
  2597.         }
  2599.         // PDF/モーダル明細の動的差し替え（基本工事費の次にオプション行を追加）
  2600.         function renderOptionDetailRows(items) {
  2601.             var $tbody = $('.modal-mitsumori table tbody');
  2602.             if (!$tbody.length) return;
  2603.             $tbody.find('tr.opt-row').remove();
  2604.             var anchorRow = $tbody.find('tr').filter(function(){
  2605.                 return $(this).find('td:first').text().indexOf('残土') !== -1
  2606.                     || $(this).find('td:first').text().indexOf('基本工事費') !== -1;
  2607.             }).last();
  2608.             items.forEach(function(it){
  2609.                 if (!it.name || !it.value) return;
  2610.                 var priceTxt = it.price > 0
  2611.                     ? formatter.format(it.price) + '円'
  2612.                     : '0円';
  2613.                 var $tr = $('<tr class="opt-row"></tr>')
  2614.                     .append('<td>' + it.name + '：' + it.value + '</td>')
  2615.                     .append('<td>1</td>')
  2616.                     .append('<td>式</td>')
  2617.                     .append('<td>' + priceTxt + '</td>')
  2618.                     .append('<td>' + (it.price > 0 ? formatter.format(it.price) + '円' : '') + '</td>');
  2619.                 if (anchorRow.length) {
  2620.                     anchorRow.after($tr);
  2621.                     anchorRow = $tr;
  2622.                 } else {
  2623.                     $tbody.append($tr);
  2624.                 }
  2625.             });
  2626.         }
  2628.         // 見積書モーダルを開く直前に、右側「現在のお見積り額」パネルの表示値を
  2629.         // モーダル内の対応 ID にコピーして金額の食い違いを防ぐ。
  2630.         // pw/pd/ph/pm が未選択で mitsumori_simulation の full update に到達しない場合でも、
  2631.         // パネル側の値（HTML 静的初期値 or 直近の simulation 結果）が modal にも反映される。
  2632.         function syncMitsumoriModalFromPanel() {
  2633.             var goukeiText = $('#mitsumori_goukei').text();
  2634.             var priceText  = $('#mitsumori_price').text();
  2635.             var ctText     = $('#mitsumori_ct').text();
  2637.             $('#mitsumori_kei').text(goukeiText);
  2638.             $('#mitsumori_price_01').text(priceText);
  2639.             $('#mitsumori_price_02').text(priceText);
  2640.             $('#mitsumori_ct_01').text(ctText);
  2641.             $('#mitsumori_ct_02').text(ctText);
  2642.             $('#mitsumori_goukei_02').text(goukeiText);
  2644.             // 小計 / 消費税 は税込 goukei から逆算
  2645.             var num = parseInt(goukeiText.replace(/[^\d-]/g, ''), 10);
  2646.             if (!isNaN(num) && num > 0) {
  2647.                 var shoukei = Math.round(num / 1.1);
  2648.                 var tax     = num - shoukei;
  2649.                 $('#mitsumori_shoukei').text(formatter.format(shoukei) + '円');
  2650.                 $('#mitsumori_tax').text(formatter.format(tax) + '円');
  2651.             } else {
  2652.                 $('#mitsumori_shoukei').text('---円');
  2653.                 $('#mitsumori_tax').text('---円');
  2654.             }
  2655.         }
  2657.         $(document).on('show.bs.modal', '#modal-mitsumori', function () {
  2658.             syncMitsumoriModalFromPanel();
  2659.         });
  2661.         {# pc の auto-init: pw/pd/ph/pm と同じく p_c（matrix 派生）の length==1 or 全空で「指定なし」化.
  2662.            search_word(color) が空の「複合色」型商品で pc が空のまま放置されて
  2663.            「カラーを選択してください」固定になるバグの修正.
  2664.            search_word に登録された name があれば優先採用. #}
  2665.         {% if p_c and (p_c|length == 1 or p_c|join == "") %}
  2666.             pc = "指定なし";
  2667.             {% for pc_val in p_c %}{% if pc_val %} pc = "{{ pc_val }}"; {% endif %}{% endfor %}
  2668.             {% if color and color|length == 1 %}
  2669.                 {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  2670.             {% endif %}
  2671.         {% elseif color and color|length == 1 %}
  2672.             pc = "指定なし";
  2673.             {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  2674.         {% endif %}
  2676.         {% if p_w and (p_w|length == 1 or p_w|join == "") %}
  2677.             pw = "指定なし";
  2678.             {% for pw in p_w %}{% if pw %} pw = "{{ pw }}"; {% endif %}{% endfor %}
  2679.         {% endif %}
  2681.         {% if p_d and (p_d|length == 1 or p_d|join == "") %}
  2682.             pd = "指定なし";
  2683.             {% for pd in p_d %}{% if pd %} pd = "{{ pd }}"; {% endif %}{% endfor %}
  2684.         {% endif %}
  2686.         {% if p_h and (p_h|length == 1 or p_h|join == "") %}
  2687.             ph = "指定なし";
  2688.             {% for ph in p_h %}{% if ph %} ph = "{{ ph }}"; {% endif %}{% endfor %}
  2689.         {% endif %}
  2691.         {% if p_m and (p_m|length == 1 or p_m|join == "") %}
  2692.             pm = "指定なし";
  2693.             {% for pm in p_m %}{% if pm %} pm = "{{ pm }}"; {% endif %}{% endfor %}
  2694.         {% endif %}
  2696.         {# p_option1 / p_option2 の auto-init: length==1 or 全空で JS 変数を埋める #}
  2697.         {% if p_option1 and (p_option1|length == 1 or p_option1|join == "") %}
  2698.             option1 = "";
  2699.             {% for opt1 in p_option1 %}{% if opt1 %} option1 = "{{ opt1|e('js') }}"; {% endif %}{% endfor %}
  2700.         {% endif %}
  2702.         {% if p_option2 and (p_option2|length == 1 or p_option2|join == "") %}
  2703.             option2 = "";
  2704.             {% for opt2 in p_option2 %}{% if opt2 %} option2 = "{{ opt2|e('js') }}"; {% endif %}{% endfor %}
  2705.         {% endif %}
  2707.         // カラー radio が複数あるとき初期チェックが無いと「カラーを選択してください」固定になるので、
  2708.         // 何もチェックされていなければ「最初の radio」を選択する。
  2709.         // sale_type≠3 は name="color", sale_type=3 は name="color3".
  2710.         //
  2711.         // 注意:
  2712.         //   ・search_word（= radio の値）と pp.c（= matrix の色軸）は別の命名体系のケースがある
  2713.         //     （例 id=3353: radio="SM(スミ)" / pp.c="ステンカラー＋セピアブラウン"）
  2714.         //   ・pp.c に合わせて radio を選ぼうとしても文字列一致しないので無意味。
  2715.         //   ・単純に「先頭の radio」を選ぶ実装に戻し、マッチング側で命名体系違いを吸収する
  2716.         //     （pc が pp.c のどの値にもマッチしないときは色軸を wildcard 扱いにする）。
  2717.         //   ・.rp-section-label のテキストも忘れずに同期する（古い session 値が残ると
  2718.         //     "ステンカラー＋セピアブラウン" のような表示と実際の radio が食い違う）。
  2719.         (function autoSelectFirstColor(){
  2720.             var groups = ['color', 'color3'];
  2721.             for (var gi = 0; gi < groups.length; gi++) {
  2722.                 var name = groups[gi];
  2723.                 var nodes = document.querySelectorAll('input[type="radio"][name="' + name + '"]');
  2724.                 if (nodes.length === 0) continue;
  2725.                 var anyChecked = false;
  2726.                 for (var i = 0; i < nodes.length; i++) {
  2727.                     if (nodes[i].checked) { anyChecked = true; break; }
  2728.                 }
  2729.                 if (anyChecked) continue;
  2731.                 var target = nodes[0];
  2732.                 target.checked = true;
  2733.                 pc = target.value;
  2735.                 // opt-btn の is-selected を付け替え
  2736.                 var lbl = target.closest('.opt-btn');
  2737.                 if (lbl) {
  2738.                     var sib = lbl.parentNode ? lbl.parentNode.querySelectorAll('.opt-btn') : [];
  2739.                     for (var k = 0; k < sib.length; k++) sib[k].classList.remove('is-selected');
  2740.                     lbl.classList.add('is-selected');
  2741.                 }
  2742.                 // 「カラー: <name>」表示の同期（古い mitsumori_json.pc が残らないように）
  2743.                 var grp = (lbl && lbl.closest('.form-group')) || (target.closest('.form-group'));
  2744.                 if (grp) {
  2745.                     var section = grp.querySelector('.rp-section-label');
  2746.                     if (section) {
  2747.                         var labelHead = section.textContent.split(':')[0].trim();
  2748.                         section.innerHTML = labelHead + ': <span>' + target.value + '</span>';
  2749.                     }
  2750.                 }
  2751.             }
  2752.         })();
  2754.         // option1 / option2 / pw / pd / ph / pm (matrix 軸の radio 群) も同様に
  2755.         // 「どれもチェックされていなければ先頭を選ぶ」を適用する.
  2756.         //   sale_type=2 の窓タイプ等で「初期表示時に一番初めの選択肢が選択されていない」事象を解消.
  2757.         (function autoSelectFirstMatrixAxis(){
  2758.             var axes = [
  2759.                 { name: 'pw',      jsVar: 'pw' },
  2760.                 { name: 'pd',      jsVar: 'pd' },
  2761.                 { name: 'ph',      jsVar: 'ph' },
  2762.                 { name: 'pm',      jsVar: 'pm' },
  2763.                 { name: 'glass_type', jsVar: 'pm' },
  2764.                 { name: 'option1', jsVar: 'option1' },
  2765.                 { name: 'option2', jsVar: 'option2' }
  2766.             ];
  2767.             for (var ai = 0; ai < axes.length; ai++) {
  2768.                 var ax = axes[ai];
  2769.                 var nodes = document.querySelectorAll('input[type="radio"][name="' + ax.name + '"]');
  2770.                 if (nodes.length === 0) continue;
  2771.                 var anyChecked = false;
  2772.                 for (var i = 0; i < nodes.length; i++) {
  2773.                     if (nodes[i].checked) { anyChecked = true; break; }
  2774.                 }
  2775.                 if (anyChecked) continue;
  2777.                 var target = nodes[0];
  2778.                 target.checked = true;
  2779.                 // グローバル JS 変数も埋める
  2780.                 if (ax.jsVar === 'pw') pw = target.value;
  2781.                 else if (ax.jsVar === 'pd') pd = target.value;
  2782.                 else if (ax.jsVar === 'ph') ph = target.value;
  2783.                 else if (ax.jsVar === 'pm') pm = target.value;
  2784.                 else if (ax.jsVar === 'option1') option1 = target.value;
  2785.                 else if (ax.jsVar === 'option2') option2 = target.value;
  2787.                 var lbl = target.closest('.opt-btn');
  2788.                 if (lbl) {
  2789.                     var sib = lbl.parentNode ? lbl.parentNode.querySelectorAll('.opt-btn') : [];
  2790.                     for (var k = 0; k < sib.length; k++) sib[k].classList.remove('is-selected');
  2791.                     lbl.classList.add('is-selected');
  2792.                 }
  2793.                 var grp = (lbl && lbl.closest('.form-group')) || (target.closest('.form-group'));
  2794.                 if (grp) {
  2795.                     var section = grp.querySelector('.rp-section-label');
  2796.                     if (section) {
  2797.                         var labelHead = section.textContent.split(':')[0].trim();
  2798.                         section.innerHTML = labelHead + ': <span>' + target.value + '</span>';
  2799.                     }
  2800.                 }
  2801.             }
  2802.         })();
  2804.         // 取付/設置工事トグル（off 値が「商品購入のみ」のオプション）は、新規アクセス時に
  2805.         // どちらの radio も未チェックのため初期価格が「商品購入のみ」= 基本工事費抜きになる。
  2806.         // 顧客要望（#10）に合わせ、未選択時は「工事も希望する」(on 側) を初期選択し、
  2807.         // 初期表示を基本工事費込みの最安値に統一する（色・寸法軸の先頭自動選択と同型）。
  2808.         //   ・判定キーは calcGoukei / applyPurchaseOnlyUI と同じ定数「商品購入のみ」。
  2809.         //   ・別用途で op{n} を流用する商品（ウッドデッキ deck_step 等）は radio 値に
  2810.         //     「商品購入のみ」を含まないため対象外（既存挙動を壊さない）。
  2811.         //   ・mitsumori_json 復元やユーザー操作で既に選択済みなら尊重する。
  2812.         (function autoSelectFirstInstall(){
  2813.             for (var i = 0; i <= 10; i++) {
  2814.                 var nodes = document.querySelectorAll('input[type="radio"][name="op' + i + '"]');
  2815.                 if (nodes.length === 0) continue;
  2817.                 // このグループが「商品購入のみ」を off に持つ工事トグルか判定し、
  2818.                 // 「商品購入のみ」でない側 (= 工事希望 on) を取得する。
  2819.                 var hasPurchaseOnly = false;
  2820.                 var onNode = null;
  2821.                 for (var j = 0; j < nodes.length; j++) {
  2822.                     if (nodes[j].value === '商品購入のみ') hasPurchaseOnly = true;
  2823.                     else if (!onNode) onNode = nodes[j];
  2824.                 }
  2825.                 if (!hasPurchaseOnly || !onNode) continue;
  2827.                 var anyChecked = false;
  2828.                 for (var k = 0; k < nodes.length; k++) {
  2829.                     if (nodes[k].checked) { anyChecked = true; break; }
  2830.                 }
  2831.                 if (anyChecked) continue;
  2833.                 onNode.checked = true;
  2834.                 // グローバル op 変数を on 値で埋める（calcGoukei の purchaseOnly 判定が参照）
  2835.                 switch (i) {
  2836.                     case 0:  op0  = onNode.value; break;
  2837.                     case 1:  op1  = onNode.value; break;
  2838.                     case 2:  op2  = onNode.value; break;
  2839.                     case 3:  op3  = onNode.value; break;
  2840.                     case 4:  op4  = onNode.value; break;
  2841.                     case 5:  op5  = onNode.value; break;
  2842.                     case 6:  op6  = onNode.value; break;
  2843.                     case 7:  op7  = onNode.value; break;
  2844.                     case 8:  op8  = onNode.value; break;
  2845.                     case 9:  op9  = onNode.value; break;
  2846.                     case 10: op10 = onNode.value; break;
  2847.                 }
  2848.                 // opt-btn の is-selected を付け替え
  2849.                 var lbl = onNode.closest('.opt-btn');
  2850.                 if (lbl) {
  2851.                     var sib = lbl.parentNode ? lbl.parentNode.querySelectorAll('.opt-btn') : [];
  2852.                     for (var s = 0; s < sib.length; s++) sib[s].classList.remove('is-selected');
  2853.                     lbl.classList.add('is-selected');
  2854.                 }
  2855.                 // rp-section-label 表示同期 + 現地調査文言（is_removal_unknown / is_tf_kouji）を on 表示に
  2856.                 var grp = (lbl && lbl.closest('.form-group')) || onNode.closest('.form-group');
  2857.                 if (grp) {
  2858.                     var section = grp.querySelector('.rp-section-label');
  2859.                     if (section) {
  2860.                         var labelHead = section.textContent.split(':')[0].trim();
  2861.                         section.innerHTML = labelHead + ': <span>' + onNode.value + '</span>';
  2862.                     }
  2863.                     var note = grp.querySelector('.opt-survey-note[data-op-idx="' + i + '"]');
  2864.                     if (note) note.style.display = '';
  2865.                 }
  2866.             }
  2867.         })();
  2869.         // ページ読み込み時: 見積金額が「合計」になっているため、カート数量は基本1
  2870.         // sale_type=9（商品のみ購入）だけ通常 EC として数量を引き継ぐ
  2871.         (function initQuantityByType(){
  2872.             var saleType = {{ ProductClass.SaleType.id }};
  2873.             if (saleType == 9 && $('#quantity_only').length) {
  2874.                 $('#quantity').val(parseInt($('#quantity_only').val()) || 1);
  2875.             } else {
  2876.                 $('#quantity').val(1);
  2877.                 $('input[name="quantity"]').val(1);
  2878.             }
  2879.         })();
  2881.         // type → ラベルのプレフィックス文字列
  2882.         // option1/option2 のラベルは category 依存 (rd: ランマ/タイプ, sh: サイズプリセット/駆動方式 等).
  2883.         // PHP から渡された option1_label / option2_label を埋め込み、JS 側でラベル更新に使う.
  2884.         var optLabelMap = {pc:'カラー', pw:'幅', pd:'奥行き', ph:'高さ', pm:'素材',
  2885.                            option1: '{{ option1_label|default('オプション1')|e('js') }}',
  2886.                            option2: '{{ option2_label|default('オプション2')|e('js') }}'};
  2887.         // type → input[name]
  2888.         var optNameMap  = {pc:'color', pw:'pw', pd:'pd', ph:'ph', pm:'pm',
  2889.                            option1: 'option1', option2: 'option2'};
  2891.         // opt-btn用: 値を直接受け取るラッパー
  2892.         function mitsumori_simulation_val(type, value) {
  2893.             if (type === 'pc') pc = value;
  2894.             if (type === 'pw') pw = value;
  2895.             if (type === 'pd') pd = value;
  2896.             if (type === 'ph') ph = value;
  2897.             if (type === 'pm') pm = value;
  2898.             if (type === 'option1') option1 = value;
  2899.             if (type === 'option2') option2 = value;
  2901.             // is-selected クラスを同グループ内で付け替え
  2902.             var inputName = optNameMap[type];
  2903.             if (inputName) {
  2904.                 var $btns = $('input[name="' + inputName + '"]').closest('.opt-btn');
  2905.                 $btns.removeClass('is-selected');
  2906.                 $btns.filter(function(){
  2907.                     return $(this).find('input').val() === value;
  2908.                 }).addClass('is-selected');
  2909.             }
  2911.             // ラベル行の選択値テキストを更新（例: 「カラー: ブラック」）
  2912.             var labelPrefix = optLabelMap[type];
  2913.             if (labelPrefix) {
  2914.                 // 対象のrp-section-labelを特定（input[name]を含む親を遡る）
  2915.                 var $group = $('input[name="' + inputName + '"]').first().closest('.form-group');
  2916.                 var $label = $group.find('.rp-section-label');
  2917.                 $label.html(labelPrefix + ': <span>' + value + '</span>');
  2918.             }
  2920.             // simulation本体を呼ぶ（value_idは空でOK、グローバル変数を使う）
  2921.             mitsumori_simulation('', '');
  2922.         }
  2924.         mitsumori_simulation("","");
  2926.         // ボタン群: 親幅を超える、または3行以上になる場合は is-scroll を付与し
  2927.         // 縦3段グリッド＋横スクロール表示にする（顧客要望「3列くらいで横スクロール」）
  2928.         function applyBtnGroupScroll() {
  2929.             $('.rp-btn-group, .opt-btn-group').each(function() {
  2930.                 var $group = $(this);
  2931.                 $group.removeClass('is-scroll');
  2932.                 var $items = $group.children();
  2933.                 if ($items.length === 0) return;
  2935.                 var parentWidth = $group.parent().width() || $group.width();
  2936.                 var totalWidth = 0;
  2937.                 var gap = parseInt($group.css('gap'), 10) || 8;
  2938.                 $items.each(function() {
  2939.                     totalWidth += this.offsetWidth + gap;
  2940.                 });
  2942.                 // 単一ボタンが親幅を超える、もしくは合計幅が親幅を超える → 横スクロール化
  2943.                 var anyTooWide = false;
  2944.                 $items.each(function() {
  2945.                     if (this.offsetWidth > parentWidth) { anyTooWide = true; return false; }
  2946.                 });
  2948.                 // 折り返し時の行数も計測
  2949.                 var tops = {};
  2950.                 $items.each(function() { tops[this.offsetTop] = true; });
  2951.                 var rowCount = Object.keys(tops).length;
  2953.                 if (anyTooWide || totalWidth > parentWidth * 2 || rowCount >= 3) {
  2954.                     $group.addClass('is-scroll');
  2955.                 }
  2956.             });
  2957.         }
  2958.         applyBtnGroupScroll();
  2959.         $(window).on('resize', function() {
  2960.             clearTimeout(window._btnScrollTimer);
  2961.             window._btnScrollTimer = setTimeout(applyBtnGroupScroll, 150);
  2962.         });
  2964.         // onload: 見積金額が確定している場合は「工事費込み価格」表示を一致させる
  2965.         (function syncPrice02Display() {
  2966.             var goukeiEl = document.getElementById('mitsumori_goukei');
  2967.             var displayEl = document.getElementById('price02-display');
  2968.             if (!goukeiEl || !displayEl) return;
  2969.             var goukeiText = goukeiEl.textContent.trim();
  2970.             // ---円（未確定）の場合は書き換えない
  2971.             if (goukeiText && goukeiText !== '---円') {
  2972.                 displayEl.textContent = goukeiText;
  2973.             }
  2974.             // 以降の変更にも追従: mitsumori_goukei を監視
  2975.             new MutationObserver(function() {
  2976.                 var text = goukeiEl.textContent.trim();
  2977.                 if (text && text !== '---円') {
  2978.                     displayEl.textContent = text;
  2979.                 }
  2980.             }).observe(goukeiEl, { childList: true, subtree: true, characterData: true });
  2981.         })();
  2982.         function contact_form(product_id){
  2983.             $('#form1').attr('action', '{{ url('contact', {product:Product.id}) }}');
  2984.             $('#form1').submit();
  2985.         }
  2987.         // maisu / madoset は下部の新しい関数定義を使用
  2990.         function heibei(bei){
  2991.             $('#heibei').val(parseInt($('#heibei').val()) + bei);
  2992.             if(parseInt($('#heibei').val()) < 1){ $('#heibei').val(1); }
  2993.             if(parseInt($('#heibei').val()) > 100){ $('#heibei').val(100); }
  2994.             // goukei に既に枚数を含むため、カート数量は1で固定
  2995.             $('#quantity').val(1);
  2996.             mitsumori_simulation('heibei','heibei');
  2997.         }
  2998.         function daisu(dai){
  2999.             $('#daisu').val(parseInt($('#daisu').val()) + dai);
  3000.             if(parseInt($('#daisu').val()) < 1){ $('#daisu').val(1); }
  3001.             if(parseInt($('#daisu').val()) > 10){ $('#daisu').val(10); }
  3002.             $('#quantity').val(1);
  3003.             mitsumori_simulation('daisu','daisu');
  3004.         }
  3005.         // sale_type=7（数量買い・基本工事費固定）用：個数入力
  3006.         function suuryou(n){
  3007.             $('#suuryou').val(parseInt($('#suuryou').val()) + n);
  3008.             if(parseInt($('#suuryou').val()) < 1){ $('#suuryou').val(1); }
  3009.             if(parseInt($('#suuryou').val()) > 100){ $('#suuryou').val(100); }
  3010.             $('#quantity').val(1);
  3011.             mitsumori_simulation('suuryou','suuryou');
  3012.         }
  3013.         function maisu(mai){
  3014.             $('#maisu').val(parseInt($('#maisu').val()) + mai);
  3015.             // sale_type=4 (フェンス) は3枚未満不可、6 (芝生) は1枚から
  3016.             var minMai = (SALE_TYPE_ID == 4) ? 3 : 1;
  3017.             if(parseInt($('#maisu').val()) < minMai){ $('#maisu').val(minMai); }
  3018.             if(parseInt($('#maisu').val()) > 100){ $('#maisu').val(100); }
  3019.             $('#quantity').val(1);
  3020.             mitsumori_simulation('maisu','maisu');
  3021.         }
  3023.         // タイプ2: セット数プルダウン連動
  3024.         function madosetSelect(val){
  3025.             var v = parseInt(val);
  3026.             if(v < 1) v = 1;
  3027.             if(v > 20) v = 20;
  3028.             $('#set_count').val(v);
  3029.             $('#quantity').val(1);
  3030.             $('input[name="quantity"]').val(1);
  3031.             mitsumori_simulation('set','set_count');
  3032.         }
  3033.         // タイプ2: ±ボタン版（後方互換）
  3034.         function madoset(mai){
  3035.             var current = parseInt($('#set_count').val()) || 1;
  3036.             var next = current + mai;
  3037.             if(next < 1) next = 1;
  3038.             if(next > 20) next = 20;
  3039.             $('#set_count').val(next);
  3040.             madosetSelect(next);
  3041.         }
  3043.         // タイプ5: ステップ・フェンス選択値を mitsumori_json に保存するためのグローバル変数
  3044.         var deck_step = "{% if mitsumori_json and mitsumori_json.deck_step is defined %}{{ mitsumori_json.deck_step|default('不要') }}{% else %}不要{% endif %}";
  3045.         var deck_fence = "{% if mitsumori_json and mitsumori_json.deck_fence is defined %}{{ mitsumori_json.deck_fence|default('不要') }}{% else %}不要{% endif %}";
  3047.         // PDF出力: モーダルの mitsumori_json をフォームに同期してから送信
  3048.         function syncPdfJson(){
  3049.             var jsonVal = $('#mitsumori_json').val();
  3050.             $('#pdf_mitsumori_json').val(jsonVal);
  3051.         }
  3053.         // タイプ9: 商品のみ購入
  3054.         function quantityOnly(val){
  3055.             var current = parseInt($('#quantity_only').val()) || 1;
  3056.             var next = current + val;
  3057.             if(next < 1) next = 1;
  3058.             $('#quantity_only').val(next);
  3059.             $('#quantity').val(next);
  3060.         }
  3062.         // ===== スマホ用下部固定バーへの金額同期 =====
  3063.         // mitsumori_message と mitsumori_goukei を監視して下部バーを更新
  3064.         (function() {
  3065.             var msgTarget   = document.getElementById('mitsumori_message');
  3066.             var goukeiTarget = document.getElementById('mitsumori_goukei');
  3067.             var spPrice     = document.getElementById('sp-mitsumori-price');
  3068.             var spBtn       = document.querySelector('#sp-mitsumori-bar .sp-bar__btn');
  3069.             if (!spPrice || !spBtn) return;
  3071.             function syncBar() {
  3072.                 var msg    = msgTarget ? msgTarget.textContent : '';
  3073.                 var goukei = goukeiTarget ? goukeiTarget.textContent : '---円';
  3075.                 // メッセージが「〇〇を選択してください」の場合はメッセージを表示しボタンを非表示
  3076.                 if (msg.indexOf('選択してください') !== -1) {
  3077.                     spPrice.textContent = msg;
  3078.                     spPrice.style.fontSize = '13px';
  3079.                     spPrice.style.color    = '#888';
  3080.                     spBtn.style.display    = 'none';
  3081.                 } else {
  3082.                     // 価格確定時はボタンを表示
  3083.                     spPrice.textContent = goukei;
  3084.                     spPrice.style.fontSize = '18px';
  3085.                     spPrice.style.color    = '#c00';
  3086.                     spBtn.style.display    = 'block';
  3087.                 }
  3088.             }
  3090.             // 初期値を同期
  3091.             syncBar();
  3093.             // mitsumori_message の変化を監視
  3094.             if (msgTarget) {
  3095.                 new MutationObserver(syncBar).observe(
  3096.                     msgTarget, { childList: true, subtree: true, characterData: true }
  3097.                 );
  3098.             }
  3099.             // mitsumori_goukei の変化も監視
  3100.             if (goukeiTarget) {
  3101.                 new MutationObserver(syncBar).observe(
  3102.                     goukeiTarget, { childList: true, subtree: true, characterData: true }
  3103.                 );
  3104.             }
  3105.         })();
  3107.         // ===== スマホ用 お見積りの詳細 ボトムシート 開閉 =====
  3108.         // 現在の内訳カード(.mitsumori-card-pc .card-body)を複製して表示する。
  3109.         // 価格計算ロジックには触れず、その時点で表示中の内訳をそのまま見せる。
  3110.         // window に直接ぶら下げてスコープに依存せず onclick から呼べるようにする。
  3111.         window.openSpMitsumoriDetail = function () {
  3112.             var sheet = document.getElementById('sp-mitsumori-detail');
  3113.             var body  = document.getElementById('sp-detail-body');
  3114.             var src   = document.querySelector('.mitsumori-card-pc .card-body');
  3115.             if (!sheet || !body) return;
  3116.             body.innerHTML = '';
  3117.             if (src) {
  3118.                 // 複製し、重複 id を避けるため clone 側の id を除去する
  3119.                 var clone = src.cloneNode(true);
  3120.                 var ided = clone.querySelectorAll('[id]');
  3121.                 for (var i = 0; i < ided.length; i++) { ided[i].removeAttribute('id'); }
  3122.                 body.appendChild(clone);
  3123.             }
  3124.             sheet.classList.add('is-open');
  3125.             sheet.setAttribute('aria-hidden', 'false');
  3126.             document.body.style.overflow = 'hidden';
  3127.         };
  3128.         window.closeSpMitsumoriDetail = function () {
  3129.             var sheet = document.getElementById('sp-mitsumori-detail');
  3130.             if (!sheet) return;
  3131.             sheet.classList.remove('is-open');
  3132.             sheet.setAttribute('aria-hidden', 'true');
  3133.             document.body.style.overflow = '';
  3134.         };
  3136.         // ===== 現在のお見積り額: 折りたたみトグルボタンのテキスト切り替え =====
  3137.         (function() {
  3138.             var card = document.querySelector('.mitsumori-card-pc');
  3139.             var btn  = document.querySelector('.btn-mitsumori-toggle .toggle-icon');
  3140.             if (!card || !btn) return;
  3141.             // MutationObserverでcollapsed-cardクラスの変化を監視
  3142.             new MutationObserver(function() {
  3143.                 if (card.classList.contains('collapsed-card')) {
  3144.                     btn.textContent = '▼ 詳細';
  3145.                 } else {
  3146.                     btn.textContent = '▲ 閉じる';
  3147.                 }
  3148.             }).observe(card, { attributes: true, attributeFilter: ['class'] });
  3149.         })();
  3151.         // ===== エリア案内: スマホのみタップで展開 =====
  3152.         (function() {
  3153.             var notice = document.querySelector('.ec-areaNotice');
  3154.             if (!notice) return;
  3155.             notice.addEventListener('click', function(e) {
  3156.                 if (window.innerWidth > 767) return;
  3157.                 // リンククリック時は展開/折りたたみせずリンク遷移
  3158.                 if (e.target.tagName === 'A') return;
  3159.                 notice.classList.toggle('is-open');
  3160.             });
  3161.         })();
  3163.     </script>
  3164.     <script type="application/ld+json">
  3165.     {
  3166.         "@context": "https://schema.org/",
  3167.         "@type": "Product",
  3168.         "name": "{{ Product.name }}",
  3169.         "image": [
  3170.             {% for img in Product.ProductImage %}
  3171.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  3173.             {% else %}
  3174.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  3175.             {% endfor %}
  3176.         ],
  3177.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  3178.         {% if Product.code_min %}
  3179.         "sku": "{{ Product.code_min }}",
  3180.         {% endif %}
  3181.         "offers": {
  3182.             "@type": "Offer",
  3183.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  3184.             "priceCurrency": "{{ eccube_config.currency }}",
  3185.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  3186.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  3187.         }
  3188.     }
  3189.     </script>
  3191. {% endblock %}
  3193. {% block main %}
  3194.     {# option1 / option2 ラベルをカテゴリ別に決定 (sh=31, rd=43, mo=15) - block scope のため main 側でも再定義 #}
  3195.     {% set option1_label = 'オプション1' %}
  3196.     {% set option2_label = 'オプション2' %}
  3197.     {# rd(玄関ドア, cat43) は素材(m)が開き方+ランマを内包し option1(ランマ)/option2(タイプ) が
  3198.        完全な冗長軸のため、素材のみ「開き方」として表示し option1/option2 の選択 UI は抑制する。
  3199.        価格マッチングは m + カラーで一意に決まり、未選択 option は fallback が無視するため影響なし。 #}
  3200.     {% set is_cat43 = false %}
  3201.     {% if Product.ProductCategories is not empty %}
  3202.         {% for pcat in Product.ProductCategories %}
  3203.             {% if pcat.category_id == 31 %}{% set option1_label = 'サイズプリセット' %}{% set option2_label = '駆動方式' %}{% endif %}
  3204.             {% if pcat.category_id == 43 %}{% set option1_label = 'ランマ' %}{% set option2_label = 'タイプ' %}{% set is_cat43 = true %}{% endif %}
  3205.             {% if pcat.category_id == 15 %}{% set option1_label = '棚タイプ' %}{% endif %}
  3206.             {% if pcat.category_id == 17 %}{% set option1_label = '窓タイプ' %}{% endif %}
  3207.         {% endfor %}
  3208.     {% endif %}
  3209.     <div class="ec-productRole" style="margin-top:20px;">
  3210.         <div class="ec-grid2">
  3211.             <div class="ec-grid2__cell">
  3212.                 <div class="ec-sliderItemRole">
  3213.                     {# 商品名 + ブランド名 + SNSシェア #}
  3214.                     <div class="ec-productRole__title">
  3215.                         <div class="ec-productRole__titleRow">
  3216.                             <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  3217.                             <div class="ec-share-inline">
  3218.                                 <a href="https://twitter.com/share?url={{ app.request.uri|url_encode }}&text={{ Product.name|url_encode }}"
  3219.                                    class="share-twitter" target="_blank" rel="noreferrer noopener" title="Xでシェア">
  3220.                                     <svg viewBox="0 0 24 24" style="width:15px;height:15px;fill:#fff;"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.74l7.73-8.835L1.254 2.25H8.08l4.254 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
  3221.                                 </a>
  3222.                                 <a href="https://www.instagram.com/" class="share-facebook" target="_blank" rel="noreferrer noopener" title="Instagram">
  3223.                                     <svg viewBox="0 0 24 24" style="width:15px;height:15px;fill:#fff;"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
  3224.                                 </a>
  3225.                                 <a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri|url_encode }}"
  3226.                                    class="share-line" target="_blank" rel="noreferrer noopener" title="LINEでシェア">
  3227.                                     <i class="fab fa-line"></i>
  3228.                                 </a>
  3229.                             </div>
  3230.                         </div>
  3231.                     </div>
  3232.                     {% if BaseInfo.option_favorite_product %}
  3233.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  3234.                         {% if is_favorite == false %}
  3235.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  3236.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  3237.                         </form>
  3238.                         {% else %}
  3239.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  3240.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  3241.                         </form>
  3242.                         {% endif %}
  3243.                      </div>
  3244.                     {% endif %}
  3245.                     <div class="item_visual">
  3246.                         {% for ProductImage in Product.ProductImage %}
  3247.                             <div class="slide-item">
  3248.                                 <a class="js-zoom" href="{{ asset(ProductImage, 'save_image') }}" aria-label="{{ loop.first ? Product.name : '' }}">
  3249.                                     <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550" style="max-height: 400px;"{% if loop.index > 1 %} loading="lazy"{% endif %}>
  3250.                                 </a>
  3251.                             </div>
  3252.                         {% else %}
  3253.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ Product.name }}" width="550" height="550" style="max-height: 400px;"></div>
  3254.                         {% endfor %}
  3255.                     </div>
  3256.                     <div class="item_nav">
  3257.                         {% for ProductImage in Product.ProductImage %}
  3258.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  3259.                         {% endfor %}
  3260.                     </div>
  3262.                 </div>
  3264.                     {# ===== 施工エリア案内（見積シミュレーションの下）===== #}
  3265.                     <div class="ec-areaNotice" style="margin-top:16px;margin-right:10px;">
  3266.                         <div class="ec-areaNotice__inner">
  3267.                             <div class="ec-areaNotice__icon">📍</div>
  3268.                             <div class="ec-areaNotice__body">
  3269.                                 <p class="ec-areaNotice__title">施工対応エリアについて</p>
  3270.                                 <div class="ec-areaNotice__detail">
  3271.                                     <p class="ec-areaNotice__text">
  3272.                                         当店の施工サービスは、<strong>山梨県全域</strong>および<br>
  3273.                                         <strong>諏訪エリア（諏訪市・岡谷市・茅野市・諏訪郡）</strong>を対象としております。<br>
  3274.                                         上記エリア外のお客様には、商品のみのご購入が可能でございます。<br>
  3275.                                         ご不明な点がございましたら、お気軽にお問い合わせください。
  3276.                                     </p>
  3277.                                     <a class="ec-areaNotice__link" href="{{ url('contact') }}">エリア外のお客様・ご相談はこちら →</a>
  3278.                                 </div>
  3279.                             </div>
  3280.                         </div>
  3281.                     </div>
  3283.             </div>
  3285.             <div class="ec-grid2__cell2">
  3286.                 <div class="ec-productRole__profile" >
  3287.                     {# 関連カテゴリ (DIY=21 / 石材=28 / 照明=44 は非表示要件のため除外) #}
  3288.                     {% set hidden_cat_ids = [21, 28, 44] %}
  3289.                     {% if Product.ProductCategories is not empty %}
  3290.                         <div class="ec-productRole__category" style="padding:10px 0;">
  3291.                             {% for ProductCategory in Product.ProductCategories %}
  3292.                                 {% if ProductCategory.Category.id not in hidden_cat_ids %}
  3293.                                 <ul>
  3294.                                     <li>
  3295.                                         {% for Category in ProductCategory.Category.path %}
  3296.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  3297.                                             <span>＞</span>{% endif -%}
  3298.                                         {% endfor %}
  3299.                                     </li>
  3300.                                 </ul>
  3301.                                 {% endif %}
  3302.                             {% endfor %}
  3303.                         </div>
  3304.                     {% endif %}
  3305.                     {# 販売価格 #}
  3306.                     <div class="ec-productRole__price">
  3307.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  3308.                         {% if Product.hasProductClass -%}
  3309.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  3310.                                 <div class="ec-price">
  3311.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  3312.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  3313.                                 </div>
  3314.                             {% else %}
  3315.                                 <div class="ec-price">
  3316.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  3317.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  3318.                                 </div>
  3319.                             {% endif %}
  3320.                         {% else %}
  3321.                             <div class="ec-price">
  3322.                                 <span id="price02-display" class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  3323.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  3324.                             </div>
  3325.                         {% endif %}
  3326.                     </div>
  3327.                     {# タグ #}
  3328.                     <ul class="ec-productRole__tags">
  3329.                         {% for Tag in Product.Tags %}
  3330.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  3331.                         {% endfor %}
  3332.                     </ul>
  3333.                     {# 商品コード #}
  3334.                     {% if Product.code_min is not empty %}
  3335.                         <div class="ec-productRole__code">
  3336.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  3337.                         </div>
  3338.                     {% endif %}
  3340.                     <div class="ec-productRole__description">
  3341.                         <div class="ec-rectHeading">
  3342.                             <h4>製品情報</h4>
  3343.                         </div>
  3344.                         {{ Product.sales_infomation|raw|nl2br }}
  3345.                     </div>
  3348.                     <div class="card card-danger" style="clear:both;margin:1px;">
  3349.                       <div class="card-header">
  3350.                         <h3 class="card-title">見積シミュレーション</h3>
  3351.                       </div>
  3352.                       <div class="card-body p-2">
  3353.                         {% set related_image = getProduct_field(Product.id,"related_image") %}
  3354.                         {# related_image は配列: ["1段目画像あり","2段目画像あり","3段目画像あり"] のうち該当するものが格納 #}
  3355.                         {% set img1 = related_image and ("1段目画像あり" in related_image) %}
  3356.                         {% set img2 = related_image and ("2段目画像あり" in related_image) %}
  3357.                         {% set img3 = related_image and ("3段目画像あり" in related_image) %}
  3358.                         {% set img4 = related_image and ("4段目画像あり" in related_image) %}
  3359.                         {% set type1 = getProduct_field(Product.id,"related_name1") %}
  3360.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  3361.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  3362.                         {% set type4 = getProduct_field(Product.id,"related_name4") %}
  3363.                         {% set hasRelated = (type1 and related_product1 and related_product1|length)
  3364.                                          or (type2 and related_product2 and related_product2|length)
  3365.                                          or (type3 and related_product3 and related_product3|length)
  3366.                                          or (type4 and related_product4 and related_product4|length) %}
  3367.                         {% if hasRelated %}
  3368.                             <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  3369.                         {% endif %}
  3371.                         {# ===== 1段目 ===== #}
  3372.                         {% if type1 and related_product1 and related_product1|length %}
  3373.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3374.                           <div class="rp-section-label">{{ type1 }}{% if img1 and base_select1 %}: <span>{{ base_select1 }}</span>{% endif %}</div>
  3375.                           {% if img1 %}
  3376.                             {# --- 画像付きカード --- #}
  3377.                             <div class="rp-card-group">
  3378.                               {% for rp_id, rp_name in related_product1 %}
  3379.                                 <a class="rp-card{% if base_select1 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3380.                                   <img class="rp-card__image"
  3381.                                        src="{{ (related_image_obj[rp_id] is defined and related_image_obj[rp_id]) ? asset(related_image_obj[rp_id], 'save_image') : asset(''|no_image_product, 'save_image') }}"
  3382.                                        alt="{{ rp_name }}"
  3383.                                        width="120" height="120" loading="lazy"
  3384.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  3385.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  3386.                                   <span class="rp-card__name">{{ rp_name }}</span>
  3387.                                 </a>
  3388.                               {% endfor %}
  3389.                             </div>
  3390.                           {% else %}
  3391.                             {# --- ボタン式ラジオ --- #}
  3392.                             <div class="rp-btn-group">
  3393.                               {% for rp_id, rp_name in related_product1 %}
  3394.                                 <a class="rp-btn{% if base_select1 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3395.                                   {{ rp_name }}
  3396.                                 </a>
  3397.                               {% endfor %}
  3398.                             </div>
  3399.                           {% endif %}
  3400.                         </div>
  3401.                         {% endif %}
  3403.                         {# ===== 2段目 ===== #}
  3404.                         {% if type2 and related_product2 and related_product2|length %}
  3405.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3406.                           <div class="rp-section-label">{{ type2 }}{% if img2 and base_select2 %}: <span>{{ base_select2 }}</span>{% endif %}</div>
  3407.                           {% if img2 %}
  3408.                             <div class="rp-card-group">
  3409.                               {% for rp_id, rp_name in related_product2 %}
  3410.                                 <a class="rp-card{% if base_select2 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3411.                                   <img class="rp-card__image"
  3412.                                        src="{{ (related_image_obj[rp_id] is defined and related_image_obj[rp_id]) ? asset(related_image_obj[rp_id], 'save_image') : asset(''|no_image_product, 'save_image') }}"
  3413.                                        alt="{{ rp_name }}"
  3414.                                        width="120" height="120" loading="lazy"
  3415.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  3416.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  3417.                                   <span class="rp-card__name">{{ rp_name }}</span>
  3418.                                 </a>
  3419.                               {% endfor %}
  3420.                             </div>
  3421.                           {% else %}
  3422.                             <div class="rp-btn-group">
  3423.                               {% for rp_id, rp_name in related_product2 %}
  3424.                                 <a class="rp-btn{% if base_select2 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3425.                                   {{ rp_name }}
  3426.                                 </a>
  3427.                               {% endfor %}
  3428.                             </div>
  3429.                           {% endif %}
  3430.                         </div>
  3431.                         {% endif %}
  3433.                         {# ===== 3段目 ===== #}
  3434.                         {% if type3 and related_product3 and related_product3|length %}
  3435.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3436.                           <div class="rp-section-label">{{ type3 }}{% if img3 and base_select3 %}: <span>{{ base_select3 }}</span>{% endif %}</div>
  3437.                           {% if img3 %}
  3438.                             <div class="rp-card-group">
  3439.                               {% for rp_id, rp_name in related_product3 %}
  3440.                                 <a class="rp-card{% if base_select3 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3441.                                   <img class="rp-card__image"
  3442.                                        src="{{ (related_image_obj[rp_id] is defined and related_image_obj[rp_id]) ? asset(related_image_obj[rp_id], 'save_image') : asset(''|no_image_product, 'save_image') }}"
  3443.                                        alt="{{ rp_name }}"
  3444.                                        width="120" height="120" loading="lazy"
  3445.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  3446.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  3447.                                   <span class="rp-card__name">{{ rp_name }}</span>
  3448.                                 </a>
  3449.                               {% endfor %}
  3450.                             </div>
  3451.                           {% else %}
  3452.                             <div class="rp-btn-group">
  3453.                               {% for rp_id, rp_name in related_product3 %}
  3454.                                 <a class="rp-btn{% if base_select3 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3455.                                   {{ rp_name }}
  3456.                                 </a>
  3457.                               {% endfor %}
  3458.                             </div>
  3459.                           {% endif %}
  3460.                         </div>
  3461.                         {% endif %}
  3463.                         {# ===== 4段目 ===== #}
  3464.                         {% if type4 and related_product4 and related_product4|length %}
  3465.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3466.                           <div class="rp-section-label">{{ type4 }}{% if img4 and base_select4 %}: <span>{{ base_select4 }}</span>{% endif %}</div>
  3467.                           {% if img4 %}
  3468.                             {# --- 画像付きカード --- #}
  3469.                             <div class="rp-card-group">
  3470.                               {% for rp_id, rp_name in related_product4 %}
  3471.                                 <a class="rp-card{% if base_select4 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3472.                                   <img class="rp-card__image"
  3473.                                        src="{{ (related_image_obj[rp_id] is defined and related_image_obj[rp_id]) ? asset(related_image_obj[rp_id], 'save_image') : asset(''|no_image_product, 'save_image') }}"
  3474.                                        alt="{{ rp_name }}" width="120" height="120" loading="lazy">
  3475.                                   <span class="rp-card__label">{{ rp_name }}</span>
  3476.                                 </a>
  3477.                               {% endfor %}
  3478.                             </div>
  3479.                           {% else %}
  3480.                             {# --- ボタン式ラジオ --- #}
  3481.                             <div class="rp-btn-group">
  3482.                               {% for rp_id, rp_name in related_product4 %}
  3483.                                 <a class="rp-btn{% if base_select4 == rp_name %} is-selected{% endif %}" href="/products/detail/{{ rp_id }}">
  3484.                                   {{ rp_name }}
  3485.                                 </a>
  3486.                               {% endfor %}
  3487.                             </div>
  3488.                           {% endif %}
  3489.                         </div>
  3490.                         {% endif %}
  3493.                         {# ガレージ等で全オプション空のときに見出しのみ表示される事象を回避.
  3494.                            色 / 寸法 / 素材 / option1/2 / op_data いずれかに「描画される」要素がある場合のみ
  3495.                            「この商品のオプションを選択してください。」見出しを表示する.
  3497.                            op_data は cg=9 で「残土」 / gs=27 で「撤去」「残土」を後段ループで
  3498.                            hide するため、単純な op|length > 0 では「見出しだけ残る」事象が
  3499.                            wh / cg の一部商品で発生していた. 描画される entry を事前カウントする. #}
  3500.                         {% set is_gs_h = false %}
  3501.                         {% set is_cg_h = false %}
  3502.                         {% if Product.ProductCategories is not empty %}
  3503.                             {% for pc_h in Product.ProductCategories %}
  3504.                                 {% if pc_h.category_id == 27 %}{% set is_gs_h = true %}{% endif %}
  3505.                                 {% if pc_h.category_id == 9  %}{% set is_cg_h = true %}{% endif %}
  3506.                             {% endfor %}
  3507.                         {% endif %}
  3508.                         {% set visible_op_count = 0 %}
  3509.                         {% if op and op|length %}
  3510.                             {% for opi in op %}
  3511.                                 {% if opi['name'] %}
  3512.                                     {% set _hide_h = false %}
  3513.                                     {% if is_gs_h and (opi['name'] matches '/撤去/' or opi['name'] matches '/残土/') %}{% set _hide_h = true %}{% endif %}
  3514.                                     {% if is_cg_h and opi['name'] matches '/残土/' %}{% set _hide_h = true %}{% endif %}
  3515.                                     {% if not _hide_h %}{% set visible_op_count = visible_op_count + 1 %}{% endif %}
  3516.                                 {% endif %}
  3517.                             {% endfor %}
  3518.                         {% endif %}
  3519.                         {% set has_any_option =
  3520.                             (color and color|length and ProductClass.SaleType.id != 3)
  3521.                             or (p_w and p_w|length and p_w|join != "")
  3522.                             or (p_d and p_d|length and p_d|join != "")
  3523.                             or (p_h and p_h|length and p_h|join != "")
  3524.                             or (p_m and p_m|length and p_m|join != "")
  3525.                             or (p_option1 and p_option1|length and p_option1|join != "")
  3526.                             or (p_option2 and p_option2|length and p_option2|join != "")
  3527.                             or ProductClass.SaleType.id in [2, 5, 6, 7, 9]
  3528.                         %}
  3529.                         {% if has_any_option %}
  3530.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のオプションを選択してください。</label></div>
  3531.                         {% endif %}
  3533.                         {# sale_type=2 (補助金窓) はタイプごとに個別カラー選択するため共通カラーは非表示 #}
  3534.                         {% if color and color|length and ProductClass.SaleType.id != 3 and ProductClass.SaleType.id != 2 %}
  3535.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3536.                           <div class="rp-section-label">カラー{% if mitsumori_json and mitsumori_json.pc %}: <span>{{ mitsumori_json.pc }}</span>{% endif %}</div>
  3537.                           <div class="opt-btn-group">
  3538.                             {% set idx = 0 %}
  3539.                             {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  3540.                               {% set has_img = cc['img'] is defined and cc['img'] is not empty %}
  3541.                               <label class="opt-btn{% if has_img %} opt-btn--with-image{% endif %}{% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %} is-selected{% endif %}"
  3542.                                      onclick="mitsumori_simulation_val('pc', '{{ cc['name']|e('js') }}');">
  3543.                                 <input type="radio" name="color" id="cc_{{ idx }}" value="{{ cc['name'] }}"
  3544.                                        {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}>
  3545.                                 {% if has_img %}
  3546.                                   <img src="{{ cc['img'] }}" alt="{{ cc['name'] }}" class="opt-btn__img"
  3547.                                        onerror="this.parentNode.classList.remove('opt-btn--with-image'); this.remove();">
  3548.                                   <span class="opt-btn__name">{{ cc['name'] }}</span>
  3549.                                 {% else %}
  3550.                                   {{ cc['name'] }}
  3551.                                 {% endif %}
  3552.                               </label>
  3553.                             {% endif %}{% endfor %}
  3554.                           </div>
  3555.                         </div>
  3556.                         {% endif %}
  3558.                         {# sale_type=2 (補助金窓) はタイプごとに個別幅選択するため共通幅は非表示.
  3559.                            tf (人工芝, sale_type=6) は専用の「芝の幅」+「施工サイズ」UI を下部に持つため、
  3560.                            汎用の 幅/奥行/高さ は描画しない (両方出すと name="pw"/"ph" が重複し、
  3561.                            片方を選ぶともう片方の選択が外れる顧客指摘あり). #}
  3562.                         {% if p_w and p_w|length and p_w|join != "" and ProductClass.SaleType.id not in [2, 3, 6] %}
  3563.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3564.                           <div class="rp-section-label">幅{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  3565.                           <div class="opt-btn-group">
  3566.                             {% set idx = 0 %}
  3567.                             {% for pw in p_w %}{% if pw %}{% set idx = idx + 1 %}
  3568.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %} is-selected{% endif %}"
  3569.                                      onclick="mitsumori_simulation_val('pw', '{{ pw|e('js') }}');">
  3570.                                 <input type="radio" name="pw" id="pw_{{ idx }}" value="{{ pw }}"
  3571.                                        {% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %}checked{% endif %}>
  3572.                                 {{ pw }}
  3573.                               </label>
  3574.                             {% endif %}{% endfor %}
  3575.                           </div>
  3576.                         </div>
  3577.                         {% endif %}
  3579.                         {% if p_d and p_d|length and p_d|join != "" and ProductClass.SaleType.id not in [3, 6] %}
  3580.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3581.                           <div class="rp-section-label">奥行き{% if mitsumori_json and mitsumori_json.pd %}: <span>{{ mitsumori_json.pd }}</span>{% endif %}</div>
  3582.                           <div class="opt-btn-group">
  3583.                             {% set idx = 0 %}
  3584.                             {% for pd in p_d %}{% if pd %}{% set idx = idx + 1 %}
  3585.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %} is-selected{% endif %}"
  3586.                                      onclick="mitsumori_simulation_val('pd', '{{ pd|e('js') }}');">
  3587.                                 <input type="radio" name="pd" id="pd_{{ idx }}" value="{{ pd }}"
  3588.                                        {% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %}checked{% endif %}>
  3589.                                 {{ pd }}
  3590.                               </label>
  3591.                             {% endif %}{% endfor %}
  3592.                           </div>
  3593.                         </div>
  3594.                         {% endif %}
  3596.                         {# sale_type=2 (補助金窓) はタイプごとに個別高さ選択するため共通高さは非表示.
  3597.                            sale_type=6 (人工芝) は専用 UI なので汎用高さは描画しない. #}
  3598.                         {% if p_h and p_h|length and p_h|join != "" and ProductClass.SaleType.id not in [2, 3, 6] %}
  3599.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3600.                           <div class="rp-section-label">高さ{% if mitsumori_json and mitsumori_json.ph %}: <span>{{ mitsumori_json.ph }}</span>{% endif %}</div>
  3601.                           <div class="opt-btn-group">
  3602.                             {% set idx = 0 %}
  3603.                             {% for ph in p_h %}{% if ph %}{% set idx = idx + 1 %}
  3604.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %} is-selected{% endif %}"
  3605.                                      onclick="mitsumori_simulation_val('ph', '{{ ph|e('js') }}');">
  3606.                                 <input type="radio" name="ph" id="ph_{{ idx }}" value="{{ ph }}"
  3607.                                        {% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %}checked{% endif %}>
  3608.                                 {{ ph }}
  3609.                               </label>
  3610.                             {% endif %}{% endfor %}
  3611.                           </div>
  3612.                         </div>
  3613.                         {% endif %}
  3615.                         {# sale_type=2 (補助金窓) はタイプごとに個別ガラス選択するため共通素材は非表示 #}
  3616.                         {% if p_m and p_m|length and p_m|join != "" and ProductClass.SaleType.id != 3 and ProductClass.SaleType.id != 2 %}
  3617.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3618.                           <div class="rp-section-label">{% if is_cat43 %}開き方{% else %}素材{% endif %}{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  3619.                           <div class="opt-btn-group">
  3620.                             {% set idx = 0 %}
  3621.                             {% for pm in p_m %}{% if pm %}{% set idx = idx + 1 %}
  3622.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %} is-selected{% endif %}"
  3623.                                      onclick="mitsumori_simulation_val('pm', '{{ pm|e('js') }}');">
  3624.                                 <input type="radio" name="pm" id="pm_{{ idx }}" value="{{ pm }}"
  3625.                                        {% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %}checked{% endif %}>
  3626.                                 {{ pm }}
  3627.                               </label>
  3628.                             {% endif %}{% endfor %}
  3629.                           </div>
  3630.                         </div>
  3631.                         {% endif %}
  3633.                         {# option1 (sale_type 2 は専用 UI が下にあるため除外 / sale_type 3 は下部ブロックで描画 /
  3634.                            sale_type 4 = fe・ts は option1 が ct_unit_price (枚数増分の工事費単価) で
  3635.                            ユーザー選択肢ではなく計算用の内部値のため radio として表示しない. 値は
  3636.                            上の auto-init (p_option1|length == 1) で JS の option1 変数に埋め込み済み) #}
  3637.                         {% if p_option1 and p_option1|length and p_option1|join != "" and ProductClass.SaleType.id != 2 and ProductClass.SaleType.id != 3 and ProductClass.SaleType.id != 4 and not is_cat43 %}
  3638.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3639.                           <div class="rp-section-label">{{ option1_label }}{% if mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 %}: <span>{{ mitsumori_json.option1 }}</span>{% endif %}</div>
  3640.                           <div class="opt-btn-group">
  3641.                             {% set idx = 0 %}
  3642.                             {% for opt1 in p_option1 %}{% if opt1 %}{% set idx = idx + 1 %}
  3643.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 == opt1) or p_option1|length == 1 %} is-selected{% endif %}"
  3644.                                      onclick="mitsumori_simulation_val('option1', '{{ opt1|e('js') }}');">
  3645.                                 <input type="radio" name="option1" id="option1_{{ idx }}" value="{{ opt1 }}"
  3646.                                        {% if (mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 == opt1) or p_option1|length == 1 %}checked{% endif %}>
  3647.                                 {{ opt1 }}
  3648.                               </label>
  3649.                             {% endif %}{% endfor %}
  3650.                           </div>
  3651.                         </div>
  3652.                         {% endif %}
  3654.                         {# option2 #}
  3655.                         {% if p_option2 and p_option2|length and p_option2|join != "" and ProductClass.SaleType.id != 2 and ProductClass.SaleType.id != 3 and not is_cat43 %}
  3656.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3657.                           <div class="rp-section-label">{{ option2_label }}{% if mitsumori_json and mitsumori_json.option2 is defined and mitsumori_json.option2 %}: <span>{{ mitsumori_json.option2 }}</span>{% endif %}</div>
  3658.                           <div class="opt-btn-group">
  3659.                             {% set idx = 0 %}
  3660.                             {% for opt2 in p_option2 %}{% if opt2 %}{% set idx = idx + 1 %}
  3661.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.option2 is defined and mitsumori_json.option2 == opt2) or p_option2|length == 1 %} is-selected{% endif %}"
  3662.                                      onclick="mitsumori_simulation_val('option2', '{{ opt2|e('js') }}');">
  3663.                                 <input type="radio" name="option2" id="option2_{{ idx }}" value="{{ opt2 }}"
  3664.                                        {% if (mitsumori_json and mitsumori_json.option2 is defined and mitsumori_json.option2 == opt2) or p_option2|length == 1 %}checked{% endif %}>
  3665.                                 {{ opt2 }}
  3666.                               </label>
  3667.                             {% endif %}{% endfor %}
  3668.                           </div>
  3669.                         </div>
  3670.                         {% endif %}
  3672.                         <!-- 1: 施工見積（通常） → 幅/奥行/高さ/素材/カラーは上部の共通ブロックで表示済み -->
  3673.                         {% if ProductClass.SaleType.id == 1 %}
  3674.                         {% endif %}
  3676.                         <!-- 2: 施工見積（補助金・窓） 複数タイプ追加対応 (2026-05) -->
  3677.                         {% if ProductClass.SaleType.id == 2 %}
  3679.                             {# 2026-05 改修: ex-shop プラメイク方式に倣い、1 商品で
  3680.                                複数の「窓タイプ」(subtype × 幅 × 高さ × ガラス × カラー × セット数)
  3681.                                を追加できる UI に変更. 各タイプは内訳 JSON として 1 明細にまとめる. #}
  3683.                             {# ec-productRole__profile は標準テンプレで height:600px / overflow:auto
  3684.                                が当たっており、複数タイプ追加カードが内部スクロールに押し込まれて
  3685.                                見えない. sale_type=2 のときだけ縦方向に伸ばす. #}
  3686.                             <style>
  3687.                                 .ec-productRole__profile {
  3688.                                     overflow: visible !important;
  3689.                                     max-height: none !important;
  3690.                                     height: auto !important;
  3691.                                 }
  3692.                             </style>
  3694.                             {# 住宅区分 UI: 補助金単価が戸建 / 集合住宅で異なるためお客様に申告いただく. #}
  3695.                             {% set housing_default = getProduct_field(Product.id, '住宅区分')|default('戸建') %}
  3696.                             <div class="card mt-3 mb-3">
  3697.                               <div class="card-header" style="background:#fff3cd;color:#333;">
  3698.                                 <strong>お住まいの種別を選択</strong>
  3699.                                 <small class="ms-2 text-muted">補助金単価が変わります</small>
  3700.                               </div>
  3701.                               <div class="card-body p-2">
  3702.                                 <div class="opt-btn-group" id="window-housing-type-group">
  3703.                                   <label class="opt-btn">
  3704.                                     <input type="radio" name="window_housing_type" value="戸建"
  3705.                                            {% if housing_default != '集合住宅' %}checked{% endif %}>
  3706.                                     戸建住宅<small class="d-block text-muted">（延床240㎡以下の非住宅含む）</small>
  3707.                                   </label>
  3708.                                   <label class="opt-btn">
  3709.                                     <input type="radio" name="window_housing_type" value="集合住宅"
  3710.                                            {% if housing_default == '集合住宅' %}checked{% endif %}>
  3711.                                     集合住宅<small class="d-block text-muted">（低層・中高層／240㎡超の非住宅）</small>
  3712.                                   </label>
  3713.                                 </div>
  3714.                               </div>
  3715.                             </div>
  3717.                             <div class="card mt-3 mb-3">
  3718.                               <div class="card-header" style="background:#fff3cd;color:#333;">
  3719.                                 <strong>窓タイプを選択（複数追加可・最大 20）</strong>
  3720.                               </div>
  3721.                               <div class="card-body p-2">
  3722.                                 <div id="window-types-container"><!-- 動的に窓タイプブロックが追加される --></div>
  3723.                                 <div class="text-center mt-2">
  3724.                                   <button type="button" id="btn-add-window-type" class="btn btn-outline-primary btn-sm" onclick="addWindowType();">＋ 窓タイプを追加</button>
  3725.                                   <div class="small text-muted mt-1">最大 20 タイプまで追加できます</div>
  3726.                                 </div>
  3727.                               </div>
  3728.                             </div>
  3730.                             {# 窓タイプブロックのテンプレート. __IDX__ を JS で連番に置換して clone する. #}
  3731.                             <template id="window-type-template">
  3732.                               <div class="window-type-block" data-type-idx="__IDX__" style="border:1px solid #ddd;border-radius:6px;padding:10px;margin-bottom:10px;background:#fafafa;">
  3733.                                 <div class="d-flex justify-content-between align-items-center mb-2">
  3734.                                   <strong>窓タイプ <span class="wt-num">__IDX__</span></strong>
  3735.                                   <button type="button" class="btn btn-sm btn-outline-danger btn-remove-window-type" onclick="removeWindowType(this);">× 削除</button>
  3736.                                 </div>
  3738.                                 {# 窓タイプ (subtype) #}
  3739.                                 {% if p_option1 and p_option1|length and p_option1|join != "" %}
  3740.                                 <div class="form-group mt-2 pb-2" style="border-bottom:1px dashed rgba(0,0,0,.1)">
  3741.                                   <div class="rp-section-label">窓タイプ</div>
  3742.                                   <div class="opt-btn-group">
  3743.                                     {% for v in p_option1 %}{% if v %}
  3744.                                       <label class="opt-btn">
  3745.                                         <input type="radio" name="wt_subtype___IDX__" value="{{ v }}" data-axis="subtype" onchange="onWindowTypeAxisChange(this);">
  3746.                                         {{ v }}
  3747.                                       </label>
  3748.                                     {% endif %}{% endfor %}
  3749.                                   </div>
  3750.                                 </div>
  3751.                                 {% endif %}
  3753.                                 {# 幅 (mm 直接入力) #}
  3754.                                 {% if p_w and p_w|length and p_w|join != "" %}
  3755.                                 <div class="form-group mt-2 pb-2" style="border-bottom:1px dashed rgba(0,0,0,.1)">
  3756.                                   <div class="rp-section-label">幅</div>
  3757.                                   <div class="input-group" style="max-width:240px;">
  3758.                                     <input type="number" name="wt_pw___IDX__" class="form-control" min="100" step="10"
  3759.                                            placeholder="例 1750" data-axis="pw" data-unit="mm"
  3760.                                            oninput="onWindowTypeAxisChange(this);">
  3761.                                     <span class="input-group-text">mm</span>
  3762.                                   </div>
  3763.                                   <small class="text-muted">商品の対応幅: 〜{{ (p_w|last)|default('') }}（{{ p_w|length }} 段階の価格帯から自動選択）</small>
  3764.                                 </div>
  3765.                                 {% endif %}
  3767.                                 {# 高さ (mm 直接入力) #}
  3768.                                 {% if p_h and p_h|length and p_h|join != "" %}
  3769.                                 <div class="form-group mt-2 pb-2" style="border-bottom:1px dashed rgba(0,0,0,.1)">
  3770.                                   <div class="rp-section-label">高さ</div>
  3771.                                   <div class="input-group" style="max-width:240px;">
  3772.                                     <input type="number" name="wt_ph___IDX__" class="form-control" min="100" step="10"
  3773.                                            placeholder="例 1200" data-axis="ph" data-unit="mm"
  3774.                                            oninput="onWindowTypeAxisChange(this);">
  3775.                                     <span class="input-group-text">mm</span>
  3776.                                   </div>
  3777.                                   <small class="text-muted">商品の対応高さ: 〜{{ (p_h|last)|default('') }}（{{ p_h|length }} 段階の価格帯から自動選択）</small>
  3778.                                 </div>
  3779.                                 {% endif %}
  3781.                                 {# ガラスタイプ #}
  3782.                                 {% if p_m and p_m|length and p_m|join != "" %}
  3783.                                 <div class="form-group mt-2 pb-2" style="border-bottom:1px dashed rgba(0,0,0,.1)">
  3784.                                   <div class="rp-section-label">ガラスタイプ</div>
  3785.                                   <div class="opt-btn-group">
  3786.                                     {% for v in p_m %}{% if v %}
  3787.                                       <label class="opt-btn">
  3788.                                         <input type="radio" name="wt_pm___IDX__" value="{{ v }}" data-axis="pm" onchange="onWindowTypeAxisChange(this);">
  3789.                                         {{ v }}
  3790.                                       </label>
  3791.                                     {% endif %}{% endfor %}
  3792.                                   </div>
  3793.                                   <small class="text-muted">「<span style="color:#2e7d32;font-weight:bold;">補助金対象</span>」が付いたガラスは、先進的窓リノベ補助金の対象です。</small>
  3794.                                 </div>
  3795.                                 {% endif %}
  3797.                                 {# 窓枠カラー #}
  3798.                                 {% if color and color|length %}
  3799.                                 <div class="form-group mt-2 pb-2" style="border-bottom:1px dashed rgba(0,0,0,.1)">
  3800.                                   <div class="rp-section-label">窓枠カラー</div>
  3801.                                   <div class="opt-btn-group">
  3802.                                     {% for cc in color %}{% if cc and cc['name'] %}
  3803.                                       {% set has_img = cc['img'] is defined and cc['img'] is not empty %}
  3804.                                       <label class="opt-btn{% if has_img %} opt-btn--with-image{% endif %}">
  3805.                                         <input type="radio" name="wt_pc___IDX__" value="{{ cc['name'] }}" data-axis="pc" onchange="onWindowTypeAxisChange(this);">
  3806.                                         {% if has_img %}
  3807.                                           <img src="{{ cc['img'] }}" alt="{{ cc['name'] }}" class="opt-btn__img"
  3808.                                                onerror="this.parentNode.classList.remove('opt-btn--with-image'); this.remove();">
  3809.                                           <span class="opt-btn__name">{{ cc['name'] }}</span>
  3810.                                         {% else %}
  3811.                                           {{ cc['name'] }}
  3812.                                         {% endif %}
  3813.                                       </label>
  3814.                                     {% endif %}{% endfor %}
  3815.                                   </div>
  3816.                                 </div>
  3817.                                 {% endif %}
  3819.                                 {# セット数 + タイプごとの補助金額表示 (補助金は task 2 で実計算) #}
  3820.                                 <div class="form-group row mt-2 align-items-center">
  3821.                                   <label class="col-4 col-form-label">セット数</label>
  3822.                                   <div class="col-4">
  3823.                                     <div class="input-group">
  3824.                                       <input type="number" name="wt_setqty___IDX__" class="form-control wt-input-setqty" value="1" min="1" max="99" data-axis="setqty" onchange="onWindowTypeAxisChange(this);">
  3825.                                       <span class="input-group-text">セット</span>
  3826.                                     </div>
  3827.                                   </div>
  3828.                                   <div class="col-4 text-end">
  3829.                                     <small class="text-muted">補助金額<br><span class="wt-subsidy-amount">―</span> 円</small>
  3830.                                   </div>
  3831.                                 </div>
  3832.                               </div>
  3833.                             </template>
  3835.                             {# 複数タイプ管理 JS. addWindowType / removeWindowType / 再番号付け. #}
  3836.                             <script>
  3837.                             (function() {
  3838.                                 var MAX_WINDOW_TYPES = 20;
  3840.                                 function addWindowType() {
  3841.                                     var container = document.getElementById('window-types-container');
  3842.                                     if (!container) return;
  3843.                                     var existing = container.querySelectorAll('.window-type-block');
  3844.                                     if (existing.length >= MAX_WINDOW_TYPES) return;
  3845.                                     var newIdx = existing.length + 1;
  3846.                                     var tpl = document.getElementById('window-type-template');
  3847.                                     if (!tpl) return;
  3848.                                     // <template> の innerHTML を取り出して __IDX__ を新規連番に置換し、要素化して append.
  3849.                                     var html = tpl.innerHTML.replace(/__IDX__/g, String(newIdx));
  3850.                                     var wrapper = document.createElement('div');
  3851.                                     wrapper.innerHTML = html.trim();
  3852.                                     var block = wrapper.firstChild;
  3853.                                     container.appendChild(block);
  3854.                                     decorateSubsidyGlass(block);
  3855.                                     updateRemoveButtonVisibility();
  3856.                                     if (typeof recalcAll === 'function') recalcAll();
  3857.                                 }
  3859.                                 // 補助金対象ガラスの選択肢に「補助金対象」バッジ + 緑枠を付与する.
  3860.                                 // 判定は calc script 側の window.glassYieldsSubsidy に委譲 (ロジック二重化を避ける)。
  3861.                                 function decorateSubsidyGlass(block) {
  3862.                                     if (!block || typeof window.glassYieldsSubsidy !== 'function') return;
  3863.                                     var radios = block.querySelectorAll('input[data-axis="pm"]');
  3864.                                     radios.forEach(function(inp) {
  3865.                                         var label = inp.closest('.opt-btn');
  3866.                                         if (!label || label.querySelector('.opt-btn__subsidy-badge')) return;
  3867.                                         if (window.glassYieldsSubsidy(inp.value)) {
  3868.                                             label.classList.add('opt-btn--subsidy');
  3869.                                             var badge = document.createElement('span');
  3870.                                             badge.className = 'opt-btn__subsidy-badge';
  3871.                                             badge.textContent = '補助金対象';
  3872.                                             label.appendChild(badge);
  3873.                                         }
  3874.                                     });
  3875.                                 }
  3877.                                 function removeWindowType(btn) {
  3878.                                     var block = btn.closest('.window-type-block');
  3879.                                     if (!block) return;
  3880.                                     block.remove();
  3881.                                     reindexBlocks();
  3882.                                     updateRemoveButtonVisibility();
  3883.                                     if (typeof recalcAll === 'function') recalcAll();
  3884.                                 }
  3886.                                 function updateRemoveButtonVisibility() {
  3887.                                     var blocks = document.querySelectorAll('#window-types-container .window-type-block');
  3888.                                     blocks.forEach(function(b) {
  3889.                                         var btn = b.querySelector('.btn-remove-window-type');
  3890.                                         if (btn) btn.style.display = blocks.length > 1 ? '' : 'none';
  3891.                                     });
  3892.                                 }
  3894.                                 function reindexBlocks() {
  3895.                                     // ブロック削除後に 1 から振り直し. input[name] の末尾 _N も書き換える.
  3896.                                     var blocks = document.querySelectorAll('#window-types-container .window-type-block');
  3897.                                     blocks.forEach(function(b, i) {
  3898.                                         var n = i + 1;
  3899.                                         b.setAttribute('data-type-idx', String(n));
  3900.                                         var numSpan = b.querySelector('.wt-num');
  3901.                                         if (numSpan) numSpan.textContent = String(n);
  3902.                                         b.querySelectorAll('input[name]').forEach(function(inp) {
  3903.                                             inp.name = inp.name.replace(/_\d+$/, '_' + n);
  3904.                                         });
  3905.                                     });
  3906.                                 }
  3908.                                 // 軸変更イベント. recalcAll が定義されていれば再計算 (task 2 で実装).
  3909.                                 window.onWindowTypeAxisChange = function() {
  3910.                                     if (typeof recalcAll === 'function') recalcAll();
  3911.                                 };
  3913.                                 window.addWindowType = addWindowType;
  3914.                                 window.removeWindowType = removeWindowType;
  3916.                                 // 隠し radio(opacity:0/pointer-events:none) を label で包む opt-btn は iOS で初回タップの
  3917.                                 // change が不発になりやすい。窓タイプ/住宅区分は label に onclick が無く change 依存だった
  3918.                                 // ため「2回タッチ/選択できない」が発生。click は確実に発火するので委譲 click で選択状態・
  3919.                                 // is-selected・再計算を行う(JSで複製される窓タイプにも委譲で対応)。
  3920.                                 document.addEventListener('click', function(ev) {
  3921.                                     if (!ev.target || !ev.target.closest) return;
  3922.                                     var label = ev.target.closest('.opt-btn');
  3923.                                     if (!label) return;
  3924.                                     if (!label.closest('#window-types-container') && !label.closest('#window-housing-type-group')) return;
  3925.                                     var input = label.querySelector('input[type="radio"]');
  3926.                                     if (!input || input.disabled) return;
  3927.                                     input.checked = true;
  3928.                                     var nm = input.getAttribute('name');
  3929.                                     if (nm) {
  3930.                                         document.querySelectorAll('input[name="' + nm + '"]').forEach(function(i) {
  3931.                                             var l = i.closest('.opt-btn');
  3932.                                             if (l) l.classList.toggle('is-selected', i.checked);
  3933.                                         });
  3934.                                     }
  3935.                                     if (typeof recalcAll === 'function') recalcAll();
  3936.                                 });
  3938.                                 // 初期表示で 1 ブロック追加 + 住宅区分ラジオの change で再計算.
  3939.                                 document.addEventListener('DOMContentLoaded', function() {
  3940.                                     if (document.querySelector('#window-types-container')) {
  3941.                                         addWindowType();
  3942.                                     }
  3943.                                     var housingInputs = document.querySelectorAll('input[name="window_housing_type"]');
  3944.                                     var syncHousingSelectedClass = function() {
  3945.                                         housingInputs.forEach(function(el) {
  3946.                                             var lbl = el.closest('.opt-btn');
  3947.                                             if (!lbl) return;
  3948.                                             if (el.checked) lbl.classList.add('is-selected');
  3949.                                             else            lbl.classList.remove('is-selected');
  3950.                                         });
  3951.                                     };
  3952.                                     syncHousingSelectedClass();
  3953.                                     housingInputs.forEach(function(el) {
  3954.                                         el.addEventListener('change', function() {
  3955.                                             syncHousingSelectedClass();
  3956.                                             if (typeof recalcAll === 'function') recalcAll();
  3957.                                         });
  3958.                                     });
  3959.                                 });
  3960.                             })();
  3961.                             </script>
  3963.                         {% endif %}
  3965.                         <!-- 3: 施工見積（物置・ゴミステーション） -->
  3966.                         {% if ProductClass.SaleType.id == 3 %}
  3968.                             {# 幅・奥行き・高さ（p_w/p_d/p_h からボタン型ラジオ生成） #}
  3969.                             {% if p_w and p_w|length and p_w|join != "" %}
  3970.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3971.                               <div class="rp-section-label">幅{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  3972.                               <div class="opt-btn-group">
  3973.                                 {% set idx = 0 %}
  3974.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  3975.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %} is-selected{% endif %}"
  3976.                                          onclick="mitsumori_simulation('pw','pw3_{{ idx }}');">
  3977.                                     <input type="radio" name="pw" id="pw3_{{ idx }}" value="{{ pw_val }}"
  3978.                                            {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}>
  3979.                                     {{ pw_val }}
  3980.                                   </label>
  3981.                                 {% endif %}{% endfor %}
  3982.                               </div>
  3983.                             </div>
  3984.                             {% endif %}
  3986.                             {% if p_d and p_d|length and p_d|join != "" %}
  3987.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3988.                               <div class="rp-section-label">奥行き{% if mitsumori_json and mitsumori_json.pd %}: <span>{{ mitsumori_json.pd }}</span>{% endif %}</div>
  3989.                               <div class="opt-btn-group">
  3990.                                 {% set idx = 0 %}
  3991.                                 {% for pd_val in p_d %}{% if pd_val %}{% set idx = idx + 1 %}
  3992.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pd == pd_val) or p_d|length == 1 %} is-selected{% endif %}"
  3993.                                          onclick="mitsumori_simulation('pd','pd3_{{ idx }}');">
  3994.                                     <input type="radio" name="pd" id="pd3_{{ idx }}" value="{{ pd_val }}"
  3995.                                            {% if (mitsumori_json and mitsumori_json.pd == pd_val) or p_d|length == 1 %}checked{% endif %}>
  3996.                                     {{ pd_val }}
  3997.                                   </label>
  3998.                                 {% endif %}{% endfor %}
  3999.                               </div>
  4000.                             </div>
  4001.                             {% endif %}
  4003.                             {% if p_h and p_h|length and p_h|join != "" %}
  4004.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4005.                               <div class="rp-section-label">高さ{% if mitsumori_json and mitsumori_json.ph %}: <span>{{ mitsumori_json.ph }}</span>{% endif %}</div>
  4006.                               <div class="opt-btn-group">
  4007.                                 {% set idx = 0 %}
  4008.                                 {% for ph_val in p_h %}{% if ph_val %}{% set idx = idx + 1 %}
  4009.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.ph == ph_val) or p_h|length == 1 %} is-selected{% endif %}"
  4010.                                          onclick="mitsumori_simulation('ph','ph3_{{ idx }}');">
  4011.                                     <input type="radio" name="ph" id="ph3_{{ idx }}" value="{{ ph_val }}"
  4012.                                            {% if (mitsumori_json and mitsumori_json.ph == ph_val) or p_h|length == 1 %}checked{% endif %}>
  4013.                                     {{ ph_val }}
  4014.                                   </label>
  4015.                                 {% endif %}{% endfor %}
  4016.                               </div>
  4017.                             </div>
  4018.                             {% endif %}
  4020.                             {# 棚タイプ（p_m データから選択肢を生成） #}
  4021.                             {% if p_m and p_m|length and p_m|join != "" %}
  4022.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4023.                               <div class="rp-section-label">棚タイプ <small class="text-muted">（間仕切り仕様）</small>{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  4024.                               <div class="opt-btn-group">
  4025.                                 {% set idx = 0 %}
  4026.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  4027.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %} is-selected{% endif %}"
  4028.                                          onclick="mitsumori_simulation('pm','pm3_{{ idx }}');">
  4029.                                     <input type="radio" name="pm" id="pm3_{{ idx }}" value="{{ pm_val }}"
  4030.                                            {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}>
  4031.                                     {{ pm_val }}
  4032.                                   </label>
  4033.                                 {% endif %}{% endfor %}
  4034.                               </div>
  4035.                             </div>
  4036.                             {% endif %}
  4038.                             {# option1 (mo の 棚タイプ 等、p_option1 データから選択肢を生成) #}
  4039.                             {% if p_option1 and p_option1|length and p_option1|join != "" %}
  4040.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4041.                               <div class="rp-section-label">{{ option1_label }}{% if mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 %}: <span>{{ mitsumori_json.option1 }}</span>{% endif %}</div>
  4042.                               <div class="opt-btn-group">
  4043.                                 {% set idx = 0 %}
  4044.                                 {% for opt1_val in p_option1 %}{% if opt1_val %}{% set idx = idx + 1 %}
  4045.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 == opt1_val) or p_option1|length == 1 %} is-selected{% endif %}"
  4046.                                          onclick="mitsumori_simulation('option1','option1_3_{{ idx }}');">
  4047.                                     <input type="radio" name="option1" id="option1_3_{{ idx }}" value="{{ opt1_val }}"
  4048.                                            {% if (mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 == opt1_val) or p_option1|length == 1 %}checked{% endif %}>
  4049.                                     {{ opt1_val }}
  4050.                                   </label>
  4051.                                 {% endif %}{% endfor %}
  4052.                               </div>
  4053.                             </div>
  4054.                             {% endif %}
  4056.                             {# カラー（共通の color データ使用） #}
  4057.                             {% if color and color|length %}
  4058.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4059.                               <div class="rp-section-label">カラー{% if mitsumori_json and mitsumori_json.pc %}: <span>{{ mitsumori_json.pc }}</span>{% endif %}</div>
  4060.                               <div class="opt-btn-group">
  4061.                                 {% set idx = 0 %}
  4062.                                 {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  4063.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %} is-selected{% endif %}"
  4064.                                          onclick="mitsumori_simulation('pc','cc3_{{ idx }}');">
  4065.                                     <input type="radio" name="color3" id="cc3_{{ idx }}" value="{{ cc['name'] }}"
  4066.                                            {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}>
  4067.                                     {{ cc['name'] }}
  4068.                                   </label>
  4069.                                 {% endif %}{% endfor %}
  4070.                               </div>
  4071.                             </div>
  4072.                             {% endif %}
  4074.                             {# 台数 #}
  4075.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4076.                               <label class="col-4 col-form-label">台数</label>
  4077.                               <div class="col-4">
  4078.                                 <div class="input-group mb-3">
  4079.                                   <input type="number" name="daisu" id="daisu" class="form-control" value="{{ mitsumori_json.daisu|default('1') }}" min="1" max="10" onchange="mitsumori_simulation('daisu','daisu');">
  4080.                                   <span class="input-group-text">台</span>
  4081.                                 </div>
  4082.                               </div>
  4083.                               <div class="col-4">
  4084.                                 <button type="button" class="btn btn-info" onclick="daisu(+1);">＋</button>
  4085.                                 <button type="button" class="btn btn-danger" onclick="daisu(-1);">ー</button>
  4086.                               </div>
  4087.                             </div>
  4089.                         {% endif %}
  4091.                         <!-- 4: 施工見積（フェンス・組み立て式） -->
  4092.                         {% if ProductClass.SaleType.id == 4 %}
  4094.                             {# 枚数 #}
  4095.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4096.                               <label class="col-4 col-form-label">枚数</label>
  4097.                               <div class="col-4 mb-3">
  4098.                                 <div class="input-group">
  4099.                                   <input type="number" name="maisu" id="maisu" class="form-control" value="{{ mitsumori_json.maisu|default('3') }}" min="3" max="20" onchange="if(parseInt(this.value)<3)this.value=3; mitsumori_simulation('maisu','maisu');">
  4100.                                   <span class="input-group-text">枚</span>
  4101.                                 </div>
  4102.                               </div>
  4103.                               <div class="col-4">
  4104.                                 <button type="button" class="btn btn-info" onclick="maisu(+1);">＋</button>
  4105.                                 <button type="button" class="btn btn-danger" onclick="maisu(-1);">ー</button>
  4106.                               </div>
  4107.                             </div>
  4109.                         {% endif %}
  4111.                         <!-- 5: 施工見積（ウッドデッキ・タイルデッキ） -->
  4112.                         {% if ProductClass.SaleType.id == 5 %}
  4114.                             {# ステップの有無 #}
  4115.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4116.                               <div class="rp-section-label">ステップ</div>
  4117.                               <div class="opt-btn-group">
  4118.                                 {% set step_yes_checked = (mitsumori_json and mitsumori_json.deck_step is defined and mitsumori_json.deck_step == '必要') %}
  4119.                                 {% set step_no_checked = (not mitsumori_json or mitsumori_json.deck_step is not defined or mitsumori_json.deck_step == '不要' or not mitsumori_json.deck_step) %}
  4120.                                 <label class="opt-btn{% if step_yes_checked %} is-selected{% endif %}"
  4121.                                        onclick="mitsumori_simulation('op0','deck_step_yes');">
  4122.                                   <input type="radio" name="deck_step" id="deck_step_yes" value="必要"
  4123.                                          {% if step_yes_checked %}checked{% endif %}>
  4124.                                   必要
  4125.                                 </label>
  4126.                                 <label class="opt-btn{% if step_no_checked %} is-selected{% endif %}"
  4127.                                        onclick="mitsumori_simulation('op0','deck_step_no');">
  4128.                                   <input type="radio" name="deck_step" id="deck_step_no" value="不要"
  4129.                                          {% if step_no_checked %}checked{% endif %}>
  4130.                                   不要
  4131.                                 </label>
  4132.                               </div>
  4133.                               <div class="opt-survey-note-wd-step" style="font-size:12px;color:#c00;margin-top:6px;{% if not step_yes_checked %}display:none;{% endif %}">
  4134.                                 ※ 現場調査後に正式お見積もりさせていただきます。
  4135.                               </div>
  4136.                             </div>
  4138.                             {# ウッドデッキフェンスの有無 #}
  4139.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4140.                               <div class="rp-section-label">デッキフェンス</div>
  4141.                               <div class="opt-btn-group">
  4142.                                 {% set fence_yes_checked = (mitsumori_json and mitsumori_json.deck_fence is defined and mitsumori_json.deck_fence == '必要') %}
  4143.                                 {% set fence_no_checked = (not mitsumori_json or mitsumori_json.deck_fence is not defined or mitsumori_json.deck_fence == '不要' or not mitsumori_json.deck_fence) %}
  4144.                                 <label class="opt-btn{% if fence_yes_checked %} is-selected{% endif %}"
  4145.                                        onclick="mitsumori_simulation('op1','deck_fence_yes');">
  4146.                                   <input type="radio" name="deck_fence" id="deck_fence_yes" value="必要"
  4147.                                          {% if fence_yes_checked %}checked{% endif %}>
  4148.                                   必要
  4149.                                 </label>
  4150.                                 <label class="opt-btn{% if fence_no_checked %} is-selected{% endif %}"
  4151.                                        onclick="mitsumori_simulation('op1','deck_fence_no');">
  4152.                                   <input type="radio" name="deck_fence" id="deck_fence_no" value="不要"
  4153.                                          {% if fence_no_checked %}checked{% endif %}>
  4154.                                   不要
  4155.                                 </label>
  4156.                               </div>
  4157.                               <div class="opt-survey-note-wd-fence" style="font-size:12px;color:#c00;margin-top:6px;{% if not fence_yes_checked %}display:none;{% endif %}">
  4158.                                 ※ 現場調査後に正式お見積もりさせていただきます。
  4159.                               </div>
  4160.                             </div>
  4162.                         {% endif %}
  4164.                         <!-- 6: 施工見積（芝生・枚数・数量買い） -->
  4165.                         {% if ProductClass.SaleType.id == 6 %}
  4167.                             {# 規格（p_m データ → 素材から抽出） #}
  4168.                             {% if p_m and p_m|length and p_m|join != "" %}
  4169.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4170.                               <div class="rp-section-label">規格{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  4171.                               <div class="opt-btn-group">
  4172.                                 {% set idx = 0 %}
  4173.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  4174.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %} is-selected{% endif %}"
  4175.                                          onclick="mitsumori_simulation('pm','pm6_{{ idx }}');">
  4176.                                     <input type="radio" name="pm" id="pm6_{{ idx }}" value="{{ pm_val }}"
  4177.                                            {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}>
  4178.                                     {{ pm_val }}
  4179.                                   </label>
  4180.                                 {% endif %}{% endfor %}
  4181.                               </div>
  4182.                             </div>
  4183.                             {% endif %}
  4185.                             {# 芝の幅（p_w = ロール幅。free_area の w。例 100cm/200cm = 1m/2m 幅。
  4186.                                h はロール長（例 1000cm=10m）で固定のため UI には出さない）。 #}
  4187.                             {% if p_w and p_w|length and p_w|join != "" %}
  4188.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4189.                               <div class="rp-section-label">芝の幅{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  4190.                               <div class="opt-btn-group">
  4191.                                 {% set idx = 0 %}
  4192.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  4193.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %} is-selected{% endif %}"
  4194.                                          onclick="mitsumori_simulation('pw','pw6_{{ idx }}');">
  4195.                                     <input type="radio" name="pw" id="pw6_{{ idx }}" value="{{ pw_val }}"
  4196.                                            {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}>
  4197.                                     {{ pw_val }}
  4198.                                   </label>
  4199.                                 {% endif %}{% endfor %}
  4200.                               </div>
  4201.                             </div>
  4202.                             {% endif %}
  4204.                             {# 1ロールの長さ表記（顧客要望 #10）。h はロール長 (例 1000cm=10m) で固定のため選択ではなく表示のみ。 #}
  4205.                             {% set _roll_h = (p_h is defined and p_h|length) ? (p_h|first) : '' %}
  4206.                             {% if _roll_h %}
  4207.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4208.                               <div class="rp-section-label">1ロールの長さ：<span style="font-weight:bold;">{% if 'cm' in _roll_h %}{{ (_roll_h|replace({'cm':'', ',':''})|trim) / 100 }}m{% else %}{{ _roll_h }}{% endif %}</span></div>
  4209.                             </div>
  4210.                             {% endif %}
  4212.                             {# 施工サイズ（縦 × 横、m 入力）→ 必要枚数を自動算出して表示.
  4213.                                面積=縦×横 を #area に流し込み、case 6 の qty=ceil(area/ロール面積) を流用. #}
  4214.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4215.                               <label class="col-4 col-form-label">施工サイズ</label>
  4216.                               <div class="col-8">
  4217.                                 <div class="input-group">
  4218.                                   <input type="number" name="tf_len" id="tf_len"
  4219.                                     class="form-control"
  4220.                                     value="{{ mitsumori_json.tf_len|default('') }}"
  4221.                                     placeholder="縦" min="0.1" step="0.1"
  4222.                                     onchange="mitsumori_simulation('tf_len','tf_len');">
  4223.                                   <span class="input-group-text">m&nbsp;×</span>
  4224.                                   <input type="number" name="tf_wid" id="tf_wid"
  4225.                                     class="form-control"
  4226.                                     value="{{ mitsumori_json.tf_wid|default('') }}"
  4227.                                     placeholder="横" min="0.1" step="0.1"
  4228.                                     onchange="mitsumori_simulation('tf_wid','tf_wid');">
  4229.                                   <span class="input-group-text">m</span>
  4230.                                 </div>
  4231.                                 {# area は内部計算用に保持（縦×横を JS で書き込む） #}
  4232.                                 <input type="hidden" name="area" id="area" value="{{ mitsumori_json.area|default('') }}">
  4233.                                 {# 必要枚数は直接入力も可能。施工サイズ入力時は自動算出して上書きする。
  4234.                                    施工サイズ未入力でも、ここで枚数だけ指定してカートに入れられる。 #}
  4235.                                 <div style="margin-top:10px;display:inline-block;background:#fff3cd;border:1px solid #ffe69c;border-radius:6px;padding:8px 14px;font-size:16px;color:#c00;font-weight:bold;">
  4236.                                   必要枚数：<input type="number" name="tf_qty" id="tf_qty"
  4237.                                     value="{{ mitsumori_json.tf_qty|default('1') }}" min="1" step="1"
  4238.                                     style="width:80px;font-size:22px;font-weight:bold;color:#c00;text-align:right;border:1px solid #ffe69c;border-radius:4px;padding:2px 6px;"
  4239.                                     onchange="mitsumori_simulation('tf_qty','tf_qty');"> 枚
  4240.                                 </div>
  4241.                                 <div style="margin-top:6px;font-size:12px;color:#666;">※ 施工サイズを入力すると必要枚数を自動計算します。サイズが分からない場合は枚数を直接ご指定ください。</div>
  4242.                               </div>
  4243.                             </div>
  4245.                         {% endif %}
  4247.                         <!-- 7: 施工見積（数量買い・基本工事費固定） -->
  4248.                         {% if ProductClass.SaleType.id == 7 %}
  4249.                             {# 個数（物置の daisu と同形式、単位は「個」） #}
  4250.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4251.                               <label class="col-4 col-form-label">個数</label>
  4252.                               <div class="col-4">
  4253.                                 <div class="input-group mb-3">
  4254.                                   <input type="number" name="suuryou" id="suuryou" class="form-control"
  4255.                                     value="{{ mitsumori_json.suuryou|default('1') }}" min="1" max="100"
  4256.                                     onchange="mitsumori_simulation('suuryou','suuryou');">
  4257.                                   <span class="input-group-text">個</span>
  4258.                                 </div>
  4259.                               </div>
  4260.                               <div class="col-4">
  4261.                                 <button type="button" class="btn btn-info" onclick="suuryou(+1);">＋</button>
  4262.                                 <button type="button" class="btn btn-danger" onclick="suuryou(-1);">ー</button>
  4263.                               </div>
  4264.                             </div>
  4265.                         {% endif %}
  4267.                         <!-- 9: 商品のみ購入 -->
  4268.                         {% if ProductClass.SaleType.id == 9 %}
  4269.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4270.                               <label class="col-4 col-form-label">数量</label>
  4271.                               <div class="col-4">
  4272.                                 <div class="input-group mb-3">
  4273.                                   <input type="number" name="quantity_only" id="quantity_only" class="form-control" value="1" min="1" onchange="$('#quantity').val(this.value);">
  4274.                                   <span class="input-group-text">個</span>
  4275.                                 </div>
  4276.                               </div>
  4277.                               <div class="col-4">
  4278.                                 <button type="button" class="btn btn-info" onclick="quantityOnly(+1);">＋</button>
  4279.                                 <button type="button" class="btn btn-danger" onclick="quantityOnly(-1);">ー</button>
  4280.                               </div>
  4281.                             </div>
  4282.                         {% endif %}
  4287.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  4288.                         {# gs (ゴミステーション, category id=27) では「撤去対応」「残土・ガラ処理」は ex-shop に存在しないため非表示
  4289.                            cg (カーゲート, category id=9) では「残土・ガラ処理」分は撤去金額側に内包済みのため非表示
  4290.                            (撤去オプション自体は残す) #}
  4291.                         {% set is_gs = false %}
  4292.                         {% set is_cg = false %}
  4293.                         {% if Product.ProductCategories is not empty %}
  4294.                             {% for ProductCategory in Product.ProductCategories %}
  4295.                                 {% if ProductCategory.category_id == 27 %}{% set is_gs = true %}{% endif %}
  4296.                                 {% if ProductCategory.category_id == 9 %}{% set is_cg = true %}{% endif %}
  4297.                             {% endfor %}
  4298.                         {% endif %}
  4299.                         {% for i in 0..10 %}
  4300.                             {% if op and op|length >= i+1 %}
  4301.                             {% if op[i]['name'] %}
  4302.                             {% set hide_opt = false %}
  4303.                             {% if is_gs and (op[i]['name'] matches '/撤去/' or op[i]['name'] matches '/残土/') %}
  4304.                                 {% set hide_opt = true %}
  4305.                             {% endif %}
  4306.                             {% if is_cg and op[i]['name'] matches '/残土/' %}
  4307.                                 {% set hide_opt = true %}
  4308.                             {% endif %}
  4309.                             {% if not hide_opt %}
  4310.                             {# price=0 で「解体」「撤去」「設置場所」(wd 等で API 差額未提供) を含むオプションは
  4311.                                選択時に「現場調査後に正式お見積もり」文言を出す. #}
  4312.                             {% set is_removal_unknown = (op[i]['price']|default(0) == 0 or op[i]['price']|default('0') == '0')
  4313.                                                           and (op[i]['name'] matches '/解体/' or op[i]['name'] matches '/撤去/' or op[i]['name'] matches '/設置場所/') %}
  4314.                             {# tf (人工芝, sale_type=6): ex-shop に施工価格がないため「取り付け工事も希望する」選択時に現地調査文言を表示 #}
  4315.                             {% set is_tf_kouji = (ProductClass.SaleType.id == 6 and op[i]['name'] matches '/取り付け工事/') %}
  4316.                             <div class="form-group mt-3 pb-3" data-op-idx="{{ i }}" data-op-name="{{ op[i]['name']|e('html_attr') }}" style="border-bottom:1px solid rgba(0,0,0,.125)">
  4318.                               <div class="rp-section-label">{{ op[i]['name'] }}{% if mitsumori_json and mitsumori_json.op[i] %}: <span>{{ mitsumori_json.op[i] }}</span>{% endif %}</div>
  4319.                               {% if op[i]['comment'] %}<div class="opt-comment" style="font-size:12px;color:#666;margin:4px 0 6px;">{{ op[i]['comment'] }}</div>{% endif %}
  4320.                               <div class="opt-btn-group">
  4321.                                 {# off が空 (= ex-shop に選択肢が 1 つしかない基礎施工等) のときは on 側を
  4322.                                    既定選択にして 2 個目の空ラジオを描画しない. #}
  4323.                                 <label class="opt-btn{% if (mitsumori_json and mitsumori_json.op[i] == op[i]['on']) or not op[i]['off'] %} is-selected{% endif %}"
  4324.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_1');">
  4325.                                   <input type="radio" name="op{{ i }}" id="op{{ i }}_1" value="{{ op[i]['on'] }}" {% if (mitsumori_json and mitsumori_json.op[i] == op[i]['on']) or not op[i]['off'] %}checked{% endif %}>
  4326.                                   {{ op[i]['on'] }}
  4327.                                 </label>
  4328.                                 {% if op[i]['off'] %}
  4329.                                 <label class="opt-btn{% if mitsumori_json and mitsumori_json.op[i] == op[i]['off'] %} is-selected{% endif %}"
  4330.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_2');">
  4331.                                   <input type="radio" name="op{{ i }}" id="op{{ i }}_2" value="{{ op[i]['off'] }}" {% if mitsumori_json and mitsumori_json.op[i] == op[i]['off'] %}checked{% endif %}>
  4332.                                   {{ op[i]['off'] }}
  4333.                                 </label>
  4334.                                 {% endif %}
  4335.                               </div>
  4336.                               {% if is_removal_unknown or is_tf_kouji %}
  4337.                               <div class="opt-survey-note" data-op-idx="{{ i }}" style="font-size:12px;color:#c00;margin-top:6px;{% if not (mitsumori_json and mitsumori_json.op[i] == op[i]['on']) %}display:none;{% endif %}">
  4338.                                 ※ 現場調査後に正式お見積もりさせていただきます。
  4339.                               </div>
  4340.                               {% endif %}
  4341.                             </div>
  4342.                             {% endif %}
  4343.                             {% endif %}
  4344.                             {% endif %}
  4345.                         {% endfor %}
  4347.                         {# fe (sale_type=4) ブロックの種類×段数 サブ UI コンテナ.
  4348.                            親オプション「ご希望のフェンス設置方法」 = 「新規にブロック積みを行う」
  4349.                            を選択したときだけ JS (renderFeBlockRadios) で表示される. #}
  4350.                         {% if ProductClass.SaleType.id == 4 and oi and oi.fe_block %}
  4351.                         <div id="fe-block-options" class="form-group mt-3 pb-3" style="display:none;border-bottom:1px solid rgba(0,0,0,.125)"></div>
  4352.                         {% endif %}
  4354.                       </div>
  4355.                       <!-- /.card-body -->
  4356.                     </div>
  4359.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  4360.                         {% if Product.stock_find %}
  4361.                             <div class="ec-productRole__actions">
  4362.                                 {% if form.classcategory_id1 is defined %}
  4363.                                     <div class="ec-select">
  4364.                                         {{ form_row(form.classcategory_id1) }}
  4365.                                         {{ form_errors(form.classcategory_id1) }}
  4366.                                     </div>
  4367.                                     {% if form.classcategory_id2 is defined %}
  4368.                                         <div class="ec-select">
  4369.                                             {{ form_row(form.classcategory_id2) }}
  4370.                                             {{ form_errors(form.classcategory_id2) }}
  4371.                                         </div>
  4372.                                     {% endif %}
  4373.                                 {% endif %}
  4374.                                 <div class="ec-numberInput">
  4375.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  4376.                                     {{ form_errors(form.quantity) }}
  4377.                                 </div>
  4378.                             </div>
  4380.                         {% else %}
  4381.                             <div class="ec-productRole__btn">
  4382.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  4383.                                     {{ 'ただいま品切れ中です。'|trans }}
  4384.                                 </button>
  4385.                             </div>
  4386.                         {% endif %}
  4387.                         <div class="ec-productRole__btn mt-3">
  4388.                            <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart">カートに入れる</button>
  4389.                         </div>
  4390.                         {{ form_rest(form) }}
  4391.                     </form>
  4392.                     <div class="ec-modal add-cart-modal">
  4393.                         <div class="ec-modal-overlay">
  4394.                             <div class="ec-modal-wrap add-cart-modal__wrap">
  4395.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  4396.                                 <div id="ec-modal-header" class="text-center add-cart-modal__header">{{ 'カートに追加しました。'|trans }}</div>
  4397.                                 <div class="ec-modal-box add-cart-modal__box">
  4398.                                     <div class="ec-role add-cart-modal__actions">
  4399.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action add-cart-modal__primary">{{ 'カートに進む'|trans }}</a>
  4400.                                         <span class="ec-inlineBtn--cancel add-cart-modal__secondary">{{ '商品検索を続ける'|trans }}</span>
  4401.                                     </div>
  4402.                                 </div>
  4403.                             </div>
  4404.                         </div>
  4405.                     </div>
  4406.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  4407.                     </div>
  4409.                     {# SNSシェア #}
  4410.                     <div class="ec-productRole__share">
  4411.                         <ul class="ec-share">
  4412.                             <li class="ec-share__item">
  4413.                                 <a href="https://twitter.com/share?url={{ app.request.uri|url_encode }}&text={{ Product.name|url_encode }}" class="ec-share__link ec-share__link--twitter" target="_blank" rel="noreferrer noopener">
  4414.                                     <i class="fab fa-twitter"></i>
  4415.                                 </a>
  4416.                             </li>
  4417.                             <li class="ec-share__item">
  4418.                                 <a href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri|url_encode }}" class="ec-share__link ec-share__link--facebook" target="_blank" rel="noreferrer noopener">
  4419.                                     <i class="fab fa-facebook-f"></i>
  4420.                                 </a>
  4421.                             </li>
  4422.                             <li class="ec-share__item">
  4423.                                 <a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri|url_encode }}" class="ec-share__link ec-share__link--line" target="_blank" rel="noreferrer noopener">
  4424.                                     <i class="fab fa-line"></i>
  4425.                                 </a>
  4426.                             </li>
  4427.                         </ul>
  4428.                     </div>
  4429.                 </div>
  4430.                 {# ===== スマホ用 見積金額 下部固定バー ===== #}
  4431.                 <div id="sp-mitsumori-bar">
  4432.                     <div class="sp-bar__pricewrap">
  4433.                         <div class="sp-bar__label">合計(工事費・税込)</div>
  4434.                         <div class="sp-bar__price" id="sp-mitsumori-price">---円</div>
  4435.                     </div>
  4436.                     <button type="button" class="sp-bar__detail-btn"
  4437.                             onclick="openSpMitsumoriDetail();" title="お見積りの詳細（内訳）を表示">
  4438.                         <i class="far fa-file-alt"></i>
  4439.                         <span>詳細</span>
  4440.                     </button>
  4441.                     <button type="button" class="sp-bar__btn"
  4442.                             onclick="document.getElementById('cart_btn2') && document.getElementById('cart_btn2').click();">
  4443.                         <i class="fas fa-shopping-cart"></i>
  4444.                         <span class="sp-bar__btn-label">カートへ</span>
  4445.                         {% set spTotalQty = get_carts_total_quantity() %}
  4446.                         {% if spTotalQty > 0 %}
  4447.                             <span class="sp-bar__cart-badge">{{ spTotalQty|number_format }}</span>
  4448.                         {% endif %}
  4449.                     </button>
  4450.                     <a href="{{ url('homepage') }}" class="sp-bar__home-btn" title="トップページへ">
  4451.                         <i class="fas fa-home"></i>
  4452.                     </a>
  4453.                 </div>
  4455.                 {# ===== スマホ用 お見積りの詳細 ボトムシート ===== #}
  4456.                 {# タップ時に現在の内訳カード(.mitsumori-card-pc)の中身を複製して表示する。
  4457.                    価格計算には触れず、ライブ同期済みの表示値をそのまま見せる方式。 #}
  4458.                 <div id="sp-mitsumori-detail" class="sp-detail-sheet" aria-hidden="true">
  4459.                     <div class="sp-detail-sheet__overlay" onclick="closeSpMitsumoriDetail();"></div>
  4460.                     <div class="sp-detail-sheet__panel" role="dialog" aria-label="お見積りの詳細">
  4461.                         <div class="sp-detail-sheet__header">
  4462.                             <span class="sp-detail-sheet__title">お見積りの詳細</span>
  4463.                             <button type="button" class="sp-detail-sheet__close" onclick="closeSpMitsumoriDetail();" aria-label="閉じる">&times;</button>
  4464.                         </div>
  4465.                         <div class="sp-detail-sheet__body" id="sp-detail-body"></div>
  4466.                         <div class="sp-detail-sheet__footer">
  4467.                             <button type="button" class="sp-detail-sheet__invoice"
  4468.                                     onclick="closeSpMitsumoriDetail(); document.getElementById('mitsumori_btn') && document.getElementById('mitsumori_btn').click();">見積書を表示</button>
  4469.                             <button type="button" class="sp-detail-sheet__cart"
  4470.                                     onclick="closeSpMitsumoriDetail(); document.getElementById('cart_btn2') && document.getElementById('cart_btn2').click();">カートに入れる</button>
  4471.                         </div>
  4472.                     </div>
  4473.                 </div>
  4475.                 {# tg カテゴリ用: block 別オプション差額ラジオ (W/D 確定後に JS が動的描画) #}
  4476.                 <div id="tg-options" class="tg-options-container col-12"></div>
  4478.                 <div class="card col-12 collapsed-card sticky-top float-right mitsumori-card-pc">
  4479.                     <div class="card-header">
  4480.                       <h3 class="card-title">現在のお見積り額</h3>
  4481.                       <div class="card-tools">
  4482.                         <span class="float-left" id="mitsumori_message">395000円</span>
  4483.                         <button type="button" class="btn btn-tool btn-mitsumori-toggle" data-card-widget="collapse" title="詳細を表示">
  4484.                           <span class="toggle-icon">▼ 詳細</span>
  4485.                         </button>
  4486.                       </div>
  4487.                     </div>
  4488.                     <div class="card-body p-0">
  4489.                       <ul class="nav nav-pills flex-column">
  4490.                         <li class="nav-item active">
  4491.                           <a class="nav-link">
  4492.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  4493.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  4494.                           </a>
  4495.                         </li>
  4496.                         <li class="nav-item active">
  4497.                           <a class="nav-link">
  4498.                             <i class="far fa-file-alt"></i> 商品価格
  4499.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  4500.                           </a>
  4501.                         </li>
  4502.                         {# sale_type=2 (補助金窓) ではカタログ価格軸を使わないので非表示. JS 側で #maker_price には "---円" を入れる. #}
  4503.                         {% if ProductClass.SaleType.id != 2 %}
  4504.                         <li class="nav-item">
  4505.                           <a class="nav-link">
  4506.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  4507.                             <span class="float-right" id="maker_price">479,700円</span>
  4508.                           </a>
  4509.                         </li>
  4510.                         {% else %}
  4511.                         {# sale_type=2 でも JS が #maker_price を参照するので hidden で残す #}
  4512.                         <span id="maker_price" style="display:none;">---円</span>
  4513.                         {% endif %}
  4514.                         <li class="nav-item">
  4515.                           <a class="nav-link">
  4516.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i>
  4517.                             {% if ProductClass.SaleType.id == 2 %}補助金（割引額）{% else %}お値引き{% endif %}
  4518.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  4519.                           </a>
  4520.                         </li>
  4521.                         {# 補助金窓のみ: 当店が申請代行する旨を補助金行の直下に小さく表示 (消費者の手続き勘違い防止) #}
  4522.                         {% if ProductClass.SaleType.id == 2 %}
  4523.                         <li class="nav-item">
  4524.                           <div style="padding:4px 12px 8px;color:#6c757d;font-size:11px;line-height:1.4;">
  4525.                             ※当店が補助金事業者として申請代行し、契約代金に充当します
  4526.                           </div>
  4527.                         </li>
  4528.                         {% endif %}
  4529.                         <li class="nav-item">
  4530.                           <a class="nav-link">
  4531.                             <i class="far fa-file-alt"></i> 基本工事費
  4532.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  4533.                           </a>
  4534.                         </li>
  4535.                         <li class="nav-item">
  4536.                           <a class="nav-link">
  4537.                             <i class="far fa-file-alt"></i> 施工オプション
  4538.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  4539.                           </a>
  4540.                         </li>
  4541.                       </ul>
  4542.                     </div>
  4543.                     <div class="card-footer">
  4544.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  4545.                           見積書表示
  4546.                         </button>
  4547.                         <button type="submit" id="cart_btn2" class="btn btn-info add-cart">カートに入れる</button>
  4549.                     </div>
  4550.                 </div>
  4551.             </div>
  4553.         </div>
  4555.     </div>
  4557.   <div class="modal" id="modal-mitsumori">
  4558.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  4559.       <div class="modal-content">
  4560.         <div class="modal-header">
  4561.           <h4 class="modal-title">お見積書</h4>
  4562.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  4563.             <span aria-hidden="true">&times;</span>
  4564.           </button>
  4565.         </div>
  4566.         <div class="modal-body">
  4567.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  4568.               <!-- title row -->
  4569.               <div class="row">
  4570.                 <div class="col-12">
  4571.                   <h2>概算お見積書 
  4572.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  4573.                   </h2>
  4574.                 </div>
  4575.                 <!-- /.col -->
  4576.               </div>
  4577.               <!-- info row -->
  4578.               <div class="row invoice-info">
  4579.                 <div class="col-sm-8 invoice-col">
  4580.                   <h3>お客様</h3>
  4581.                   <span>下記の通り、お見積もり申し上げます。</span>
  4582.                   <br />
  4583.                   <br / >
  4584.                   <br />
  4585.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  4586.                   <span>
  4587.                     <br/>
  4588.                     <br/>
  4589.                     <br/>
  4590.                     <br/>
  4591.                   </span>
  4592.                 </div>
  4593.                 <div class="col-sm-4 invoice-col">
  4594.                   <p>
  4595.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  4596.                   </p>
  4597.                   <p>有限会社プラス</p>
  4598.                   <p>〒400-0334</p>
  4599.                   <p>山梨県南アルプス市藤田1450番地2</p>
  4600.                   <p>TEL: 055-284-6480</p>
  4601.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  4602.                 </div>
  4603.                 <!-- /.col -->
  4604.                 <!-- /.col -->
  4605.               </div>
  4606.               <!-- /.row -->
  4607.               <!-- Table row -->
  4608.               <div class="row">
  4609.                 <div class="col-12 table-responsive">
  4610.                   <table class="table table-striped">
  4611.                     <thead>
  4612.                       <tr>
  4613.                         <th>項目</th>
  4614.                         <th>数量</th>
  4615.                         <th>単位</th>
  4616.                         <th>単価</th>
  4617.                         <th>小計</th>
  4618.                       </tr>
  4619.                     </thead>
  4620.                     <tbody>
  4621.                       <tr>
  4622.                         <td id="mitsumori_item_name">{{ Product.name }}</td>
  4623.                         <td>1</td>
  4624.                         <td>式</td>
  4625.                         <td id="mitsumori_price_01">352,800</td>
  4626.                         <td id="mitsumori_price_02">352,800</td>
  4627.                       </tr>
  4628.                       <tr>
  4629.                         <td>基本工事費</td>
  4630.                         <td>1</td>
  4631.                         <td>式</td>
  4632.                         <td id="mitsumori_ct_01">10,000</td>
  4633.                         <td id="mitsumori_ct_02">10,000</td>
  4634.                       </tr>
  4635.                       <tr>
  4636.                         <td>残土・ガラ処理</td>
  4637.                         <td>1</td>
  4638.                         <td>式</td>
  4639.                         <td>0円</td>
  4640.                         <td></td>
  4641.                       </tr>
  4642.                       <tr>
  4643.                         <td>　</td>
  4644.                         <td></td>
  4645.                         <td></td>
  4646.                         <td></td>
  4647.                         <td></td>
  4648.                       </tr>
  4649.                     </tbody>
  4650.                   </table>
  4651.                 </div>
  4652.                 <!-- /.col -->
  4653.               </div>
  4654.               <!-- /.row -->
  4655.               <div class="row">
  4656.                 <!-- accepted payments column -->
  4657.                 <div class="col-6">
  4658.                   <p class="lead">お支払い方法</p>
  4659.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  4660.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  4661.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  4662.                   </p>
  4663.                 </div>
  4664.                 <!-- /.col -->
  4665.                 <div class="col-6">
  4666.                   <div class="table-responsive">
  4667.                     <table class="table">
  4668.                       <tbody>
  4669.                         <tr>
  4670.                           <th style="width:50%">小計:</th>
  4671.                           <td id="mitsumori_shoukei">362,800</td>
  4672.                         </tr>
  4673.                         <tr>
  4674.                           <th>消費税 (10%)</th>
  4675.                           <td id="mitsumori_tax">36,280</td>
  4676.                         </tr>
  4677.                         <tr>
  4678.                           <th>合計:</th>
  4679.                           <td id="mitsumori_goukei_02">399,080</td>
  4680.                         </tr>
  4681.                       </tbody>
  4682.                     </table>
  4683.                   </div>
  4684.                 </div>
  4685.                 <!-- /.col -->
  4686.               </div>
  4687.               <!-- /.row -->
  4688.             </div>
  4689.         </div>
  4690.         <div class="modal-footer justify-content-between">
  4691.                   {# PDF出力: mitsumori_json を POST して PDF ダウンロード #}
  4692.                   <form method="post" action="{{ url('mitsumori_pdf') }}" target="_blank" id="pdf_download_form">
  4693.                     <input type="hidden" name="_token" value="{{ csrf_token('mitsumori_pdf') }}">
  4694.                     <input type="hidden" name="mitsumori_json" id="pdf_mitsumori_json">
  4695.                     <button type="submit" class="btn btn-primary float-right" style="margin-right: 5px;" onclick="syncPdfJson();">
  4696.                       <i class="fas fa-download"></i>PDF出力
  4697.                     </button>
  4698.                   </form>
  4699.                   <button type="submit" id="cart_btn3" class="btn btn-info add-cart">カートに入れる</button>
  4700.         </div>
  4701.       </div>
  4702.       <!-- /.modal-content -->
  4703.     </div>
  4704.     <!-- /.modal-dialog -->
  4705.   </div>
  4706.   <!-- /.modal -->
  4708.     <!-- Image zoom modal: custom lightweight lightbox (no CDN dependency) -->
  4709.     <div id="img-modal" role="dialog" aria-modal="true" aria-label="画像拡大">
  4710.         <button id="img-modal__close" aria-label="閉じる">&times;</button>
  4711.         <button id="img-modal__prev" aria-label="前の画像">&#10094;</button>
  4712.         <img id="img-modal__img" src="" alt="">
  4713.         <button id="img-modal__next" aria-label="次の画像">&#10095;</button>
  4714.     </div>
  4715.     <style>
  4716.     #img-modal {
  4717.         display: none;
  4718.         position: fixed;
  4719.         inset: 0;
  4720.         z-index: 9999;
  4721.         background: rgba(0,0,0,0.88);
  4722.         align-items: center;
  4723.         justify-content: center;
  4724.         cursor: zoom-out;
  4725.     }
  4726.     #img-modal.is-open { display: flex; }
  4727.     #img-modal__img {
  4728.         max-width: 92vw;
  4729.         max-height: 88vh;
  4730.         object-fit: contain;
  4731.         border-radius: 4px;
  4732.         cursor: default;
  4733.         user-select: none;
  4734.         touch-action: pinch-zoom;
  4735.         display: block;
  4736.     }
  4737.     #img-modal__close {
  4738.         position: absolute;
  4739.         top: 14px;
  4740.         right: 18px;
  4741.         font-size: 38px;
  4742.         color: #fff;
  4743.         cursor: pointer;
  4744.         background: none;
  4745.         border: none;
  4746.         padding: 0;
  4747.         line-height: 1;
  4748.         z-index: 1;
  4749.         opacity: 0.85;
  4750.     }
  4751.     #img-modal__close:hover { opacity: 1; }
  4752.     #img-modal__prev,
  4753.     #img-modal__next {
  4754.         position: absolute;
  4755.         top: 50%;
  4756.         transform: translateY(-50%);
  4757.         font-size: 36px;
  4758.         color: #fff;
  4759.         cursor: pointer;
  4760.         background: rgba(0,0,0,0.32);
  4761.         border: none;
  4762.         padding: 10px 16px;
  4763.         line-height: 1;
  4764.         border-radius: 6px;
  4765.         z-index: 1;
  4766.         opacity: 0.8;
  4767.         user-select: none;
  4768.     }
  4769.     #img-modal__prev:hover, #img-modal__next:hover { opacity: 1; }
  4770.     #img-modal__prev { left: 12px; }
  4771.     #img-modal__next { right: 12px; }
  4772.     @media (max-width: 767px) {
  4773.         #img-modal__prev, #img-modal__next { font-size: 28px; padding: 8px 12px; }
  4774.     }
  4775.     </style>
  4776.     <script>
  4777.     (function(){
  4778.         var images = [];
  4779.         var current = 0;
  4781.         // Collect original (non-cloned) slide images at click time.
  4782.         // After Slick init, slides are wrapped in .slick-slide; clones have .slick-cloned.
  4783.         function collectImages() {
  4784.             images = [];
  4785.             var $slides = $('.item_visual .slick-slide:not(.slick-cloned)');
  4786.             if (!$slides.length) {
  4787.                 // Slick not yet initialized (fallback)
  4788.                 $slides = $('.item_visual .slide-item');
  4789.             }
  4790.             $slides.each(function() {
  4791.                 var $a = $(this).find('a.js-zoom');
  4792.                 if ($a.length) {
  4793.                     images.push({ src: $a.attr('href'), alt: $a.find('img').attr('alt') || '' });
  4794.                 }
  4795.             });
  4796.         }
  4798.         function showImage(idx) {
  4799.             current = ((idx % images.length) + images.length) % images.length;
  4800.             $('#img-modal__img').attr({ src: images[current].src, alt: images[current].alt });
  4801.         }
  4803.         function openModal(href) {
  4804.             collectImages();
  4805.             if (!images.length) return;
  4806.             var idx = 0;
  4807.             for (var i = 0; i < images.length; i++) {
  4808.                 if (images[i].src === href) { idx = i; break; }
  4809.             }
  4810.             showImage(idx);
  4811.             $('#img-modal').addClass('is-open');
  4812.             $('body').css('overflow', 'hidden');
  4813.         }
  4815.         function closeModal() {
  4816.             $('#img-modal').removeClass('is-open');
  4817.             $('body').css('overflow', '');
  4818.         }
  4820.         // Click handler: works for both original and Slick-cloned anchors
  4821.         $(document).on('click', '.item_visual a.js-zoom', function(e) {
  4822.             e.preventDefault();
  4823.             openModal($(this).attr('href'));
  4824.         });
  4826.         // Close on backdrop click
  4827.         $('#img-modal').on('click', function(e) {
  4828.             if (e.target === this) closeModal();
  4829.         });
  4830.         $('#img-modal__close').on('click', closeModal);
  4831.         $('#img-modal__prev').on('click', function(e) { e.stopPropagation(); showImage(current - 1); });
  4832.         $('#img-modal__next').on('click', function(e) { e.stopPropagation(); showImage(current + 1); });
  4834.         // Keyboard navigation
  4835.         $(document).on('keydown', function(e) {
  4836.             if (!$('#img-modal').hasClass('is-open')) return;
  4837.             if (e.key === 'Escape') closeModal();
  4838.             if (e.key === 'ArrowLeft') showImage(current - 1);
  4839.             if (e.key === 'ArrowRight') showImage(current + 1);
  4840.         });
  4842.         // Touch swipe (horizontal only)
  4843.         var _tx = 0;
  4844.         var $modal = document.getElementById('img-modal');
  4845.         $modal.addEventListener('touchstart', function(e) {
  4846.             _tx = e.changedTouches[0].clientX;
  4847.         }, { passive: true });
  4848.         $modal.addEventListener('touchend', function(e) {
  4849.             var dx = e.changedTouches[0].clientX - _tx;
  4850.             if (Math.abs(dx) > 48) {
  4851.                 dx < 0 ? showImage(current + 1) : showImage(current - 1);
  4852.             }
  4853.         }, { passive: true });
  4854.     })();
  4855.     </script>
  4857. {% endblock %}