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.         }
  148.         
  149.         /* ============================================
  150.            商品タイプ選択 共通スタイル
  151.         ============================================ */
  153.         /* セクションラベル */
  154.         .rp-section-label {
  155.             font-size: 14px;
  156.             font-weight: bold;
  157.             color: #333;
  158.             margin-bottom: 10px;
  159.         }
  160.         .rp-section-label span {
  161.             font-weight: normal;
  162.             color: #c00;
  163.         }
  165.         /* ---- 1. 画像付きカード ---- */
  166.         .rp-card-group {
  167.             display: flex;
  168.             flex-wrap: wrap;
  169.             gap: 8px;
  170.             margin-bottom: 4px;
  171.         }
  172.         .rp-card {
  173.             position: relative;
  174.             cursor: pointer;
  175.             width: 110px;
  176.             border: 2px solid #ddd;
  177.             border-radius: 10px;
  178.             overflow: hidden;
  179.             transition: border-color 0.2s, box-shadow 0.2s;
  180.             background: #fff;
  181.         }
  182.         /* Gate :hover behind real hover-capable pointers. On iOS Safari a
  183.            :hover rule that changes appearance makes the first tap apply the
  184.            hover state and suppresses the click, so the option chip needed a
  185.            second tap to fire its onclick (is-selected + price update). */
  186.         @media (hover: hover) and (pointer: fine) {
  187.             .rp-card:hover {
  188.                 border-color: #999;
  189.                 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  190.             }
  191.         }
  192.         .rp-card.is-selected {
  193.             border-color: #1a6fcf;
  194.             box-shadow: 0 2px 10px rgba(26,111,207,0.25);
  195.         }
  196.         .rp-card input[type="radio"] { display: none; }
  197.         .rp-card__image {
  198.             width: 100%;
  199.             aspect-ratio: 1 / 1;
  200.             object-fit: cover;
  201.             display: block;
  202.             background: #f5f5f5;
  203.         }
  204.         .rp-card__placeholder {
  205.             width: 100%;
  206.             aspect-ratio: 1 / 1;
  207.             background: #f0f0f0;
  208.             display: flex;
  209.             align-items: center;
  210.             justify-content: center;
  211.             color: #bbb;
  212.             font-size: 24px;
  213.         }
  214.         .rp-card__name {
  215.             display: block;
  216.             padding: 5px 5px;
  217.             font-size: 11px;
  218.             color: #333;
  219.             text-align: center;
  220.             line-height: 1.4;
  221.             word-break: break-all;
  222.         }
  223.         .rp-card.is-selected .rp-card__name { color: #1a6fcf; font-weight: bold; }
  224.         .rp-card.is-selected::after {
  225.             content: "✓";
  226.             position: absolute;
  227.             top: 3px; right: 6px;
  228.             color: #1a6fcf;
  229.             font-size: 13px;
  230.             font-weight: bold;
  231.         }
  233.         /* ---- 2. ボタン式ラジオ（画像なし・8個以内）---- */
  234.         .rp-btn-group {
  235.             display: flex;
  236.             flex-wrap: wrap;
  237.             gap: 8px;
  238.             margin-bottom: 4px;
  239.             max-width: 100%;
  240.             min-width: 0;
  241.         }
  242.         .rp-btn {
  243.             cursor: pointer;
  244.             padding: 8px 14px;
  245.             border: 2px solid #ddd;
  246.             border-radius: 10px;
  247.             font-size: 13px;
  248.             color: #333;
  249.             background: #fff;
  250.             transition: border-color 0.2s, background 0.2s;
  251.             white-space: nowrap;
  252.             max-width: 100%;
  253.             overflow: hidden;
  254.             text-overflow: ellipsis;
  255.         }
  256.         @media (hover: hover) and (pointer: fine) {
  257.             .rp-btn:hover { border-color: #999; }
  258.         }
  259.         .rp-btn.is-selected {
  260.             border-color: #1a6fcf;
  261.             color: #1a6fcf;
  262.             font-weight: bold;
  263.             background: #f0f6ff;
  264.         }
  265.         .rp-btn input[type="radio"] { display: none; }
  267.         /* ---- ボタン群が3行以上になる場合は1行横スクロール ---- */
  268.         .rp-btn-group.is-scroll,
  269.         .opt-btn-group.is-scroll {
  270.             flex-wrap: nowrap;
  271.             overflow-x: auto;
  272.             overflow-y: hidden;
  273.             -webkit-overflow-scrolling: touch;
  274.             scrollbar-width: thin;
  275.             padding-bottom: 6px;
  276.         }
  277.         .rp-btn-group.is-scroll::-webkit-scrollbar,
  278.         .opt-btn-group.is-scroll::-webkit-scrollbar {
  279.             height: 6px;
  280.         }
  281.         .rp-btn-group.is-scroll::-webkit-scrollbar-thumb,
  282.         .opt-btn-group.is-scroll::-webkit-scrollbar-thumb {
  283.             background: #c0c0c0;
  284.             border-radius: 3px;
  285.         }
  286.         .rp-btn-group.is-scroll > .rp-btn,
  287.         .opt-btn-group.is-scroll > .opt-btn {
  288.             flex: 0 0 auto;
  289.         }
  291.         /* ---- 3. プルダウン（画像なし・9個以上）---- */
  292.         .rp-select-wrap {
  293.             margin-bottom: 4px;
  294.         }
  295.         .rp-select {
  296.             width: 100%;
  297.             max-width: 420px;
  298.             padding: 8px 12px;
  299.             border: 2px solid #ddd;
  300.             border-radius: 10px;
  301.             font-size: 13px;
  302.             color: #333;
  303.             background: #fff;
  304.             appearance: none;
  305.             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");
  306.             background-repeat: no-repeat;
  307.             background-position: right 12px center;
  308.             cursor: pointer;
  309.         }
  310.         .rp-select:focus {
  311.             outline: none;
  312.             border-color: #1a6fcf;
  313.         }
  315.         /* ---- オプション選択ボタン（枠線ラジオ）---- */
  316.         .opt-btn-group {
  317.             display: flex;
  318.             flex-wrap: wrap;
  319.             gap: 8px;
  320.             padding: 6px 0;
  321.             max-width: 100%;
  322.             min-width: 0;
  323.         }
  324.         .opt-btn {
  325.             cursor: pointer;
  326.             padding: 7px 14px;
  327.             border: 2px solid #ddd;
  328.             border-radius: 10px;
  329.             font-size: 13px;
  330.             color: #333;
  331.             background: #fff;
  332.             transition: border-color 0.2s, background 0.2s;
  333.             white-space: nowrap;
  334.             max-width: 100%;
  335.             overflow: hidden;
  336.             text-overflow: ellipsis;
  337.         }
  338.         @media (hover: hover) and (pointer: fine) {
  339.             .opt-btn:hover { border-color: #999; }
  340.         }
  341.         .opt-btn.is-selected {
  342.             border-color: #1a6fcf;
  343.             color: #1a6fcf;
  344.             font-weight: bold;
  345.             background: #f0f6ff;
  346.         }
  347.         .opt-btn input[type="radio"] { display: none; }
  349.         /* opt-btn with color swatch image. The label still works as a
  350.            radio target — clicking the image checks the input. The text
  351.            label stays under the image so users can still read the name. */
  352.         .opt-btn--with-image {
  353.             padding: 4px 6px 6px;
  354.             white-space: normal;
  355.             text-align: center;
  356.             display: inline-flex;
  357.             flex-direction: column;
  358.             align-items: center;
  359.             min-width: 96px;
  360.             max-width: 140px;
  361.         }
  362.         .opt-btn--with-image .opt-btn__img {
  363.             display: block;
  364.             width: 88px;
  365.             height: 66px;
  366.             object-fit: cover;
  367.             border-radius: 6px;
  368.             margin-bottom: 4px;
  369.             background: #f5f5f5;
  370.         }
  371.         .opt-btn--with-image .opt-btn__name {
  372.             display: block;
  373.             font-size: 11px;
  374.             line-height: 1.3;
  375.             color: inherit;
  376.         }
  377.         .opt-btn--with-image.is-selected .opt-btn__img {
  378.             outline: 2px solid #1a6fcf;
  379.             outline-offset: 1px;
  380.         }
  382.         /* ============================================
  383.            施工エリア案内
  384.         ============================================ */
  385.         .ec-areaNotice {
  386.             margin: 16px 0;
  387.             padding: 16px 20px;
  388.             background: #f8f9fa;
  389.             border-left: 4px solid #1a6fcf;
  390.             border-radius: 0 8px 8px 0;
  391.         }
  392.         .ec-areaNotice__inner {
  393.             display: flex;
  394.             align-items: flex-start;
  395.             gap: 12px;
  396.         }
  397.         .ec-areaNotice__icon {
  398.             font-size: 22px;
  399.             line-height: 1;
  400.             flex-shrink: 0;
  401.             margin-top: 2px;
  402.         }
  403.         .ec-areaNotice__body {
  404.             flex: 1;
  405.         }
  406.         .ec-areaNotice__title {
  407.             font-size: 13px;
  408.             font-weight: bold;
  409.             color: #1a6fcf;
  410.             margin: 0 0 6px;
  411.         }
  412.         .ec-areaNotice__text {
  413.             font-size: 13px;
  414.             color: #444;
  415.             line-height: 1.7;
  416.             margin: 0;
  417.         }
  418.         .ec-areaNotice__text strong {
  419.             color: #222;
  420.         }
  421.         .ec-areaNotice__link {
  422.             display: inline-block;
  423.             margin-top: 8px;
  424.             font-size: 12px;
  425.             color: #1a6fcf;
  426.             text-decoration: underline;
  427.         }
  428.         .ec-areaNotice__link:hover {
  429.             color: #0d4fa0;
  430.         }
  432.         /* ============================================
  433.            SNSシェア + ブランド名 タイトル行
  434.         ============================================ */
  435.         .ec-productRole__titleRow {
  436.             display: flex;
  437.             align-items: center;
  438.             justify-content: space-between;
  439.             gap: 8px;
  440.             margin-bottom: 4px;
  441.         }
  442.         .ec-productRole__titleRow .ec-headingTitle {
  443.             margin: 0;
  444.             flex: 1;
  445.             font-size: 18px;
  446.         }
  447.         .ec-share-inline {
  448.             display: flex;
  449.             align-items: center;
  450.             gap: 8px;
  451.             flex-shrink: 0;
  452.         }
  453.         @media (max-width: 767px) {
  454.             /* maker_area の float を解除して独立表示 */
  455.             #maker_area {
  456.                 float: none !important;
  457.                 width: auto !important;
  458.                 height: auto !important;
  459.                 display: block;
  460.                 margin-bottom: 4px;
  461.             }
  462.             /* タイトル行: 商品名が全幅を占有しSNSは右寄せ下段 */
  463.             .ec-productRole__titleRow {
  464.                 flex-wrap: wrap;
  465.                 clear: both;
  466.             }
  467.             .ec-productRole__titleRow .ec-headingTitle {
  468.                 flex: 1 1 100%;
  469.                 font-size: 16px;
  470.             }
  471.             .ec-share-inline {
  472.                 flex: 0 0 auto;
  473.                 margin-left: auto;
  474.             }
  475.         }
  476.         .ec-share-inline a {
  477.             display: flex;
  478.             align-items: center;
  479.             justify-content: center;
  480.             width: 32px;
  481.             height: 32px;
  482.             border-radius: 50%;
  483.             font-size: 15px;
  484.             color: #fff;
  485.             text-decoration: none;
  486.             transition: opacity 0.2s;
  487.         }
  488.         .ec-share-inline a:hover { opacity: 0.8; }
  489.         .ec-share-inline .share-twitter  { background: #000; }
  490.         .ec-share-inline .share-facebook { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
  491.         .ec-share-inline .share-line     { background: #06c755; }
  493.         /* description_detail下のシェアブロックはPC/スマホ共通で非表示（タイトル行に移動） */
  494.         .ec-productRole__share { display: none; }
  496.         /* ============================================
  497.            PC用: 現在のお見積り額カード強調
  498.         ============================================ */
  499.         @media (min-width: 768px) {
  500.             .mitsumori-card-pc {
  501.                 border: 2px solid #1a6fcf !important;
  502.                 border-radius: 10px !important;
  503.                 box-shadow: 0 4px 16px rgba(26,111,207,0.18) !important;
  504.                 margin-top: 20px;
  505.                 overflow: hidden;
  506.                 background: linear-gradient(135deg, #1a6fcf, #0d4fa0) !important;
  507.             }
  508.             .mitsumori-card-pc .card-header {
  509.                 background: linear-gradient(135deg, #1a6fcf, #0d4fa0) !important;
  510.                 color: #fff !important;
  511.                 padding: 14px 16px !important;
  512.                 border-bottom: none !important;
  513.             }
  514.             .mitsumori-card-pc .card-title {
  515.                 color: #fff !important;
  516.                 font-size: 15px !important;
  517.                 font-weight: bold !important;
  518.                 margin: 0 !important;
  519.             }
  520.             .mitsumori-card-pc #mitsumori_message {
  521.                 font-size: 22px !important;
  522.                 font-weight: bold !important;
  523.                 color: #fff !important;
  524.             }
  525.             .mitsumori-card-pc .btn-tool {
  526.                 color: #fff !important;
  527.             }
  528.             /* 合計行を大きく強調 */
  529.             .mitsumori-card-pc .nav-item:first-child .nav-link {
  530.                 font-size: 16px !important;
  531.                 font-weight: bold !important;
  532.                 color: #c00 !important;
  533.                 background: #fff8f8 !important;
  534.                 padding: 12px 16px !important;
  535.             }
  536.             .mitsumori-card-pc .nav-item:first-child #mitsumori_goukei {
  537.                 font-size: 20px !important;
  538.                 font-weight: bold !important;
  539.                 color: #c00 !important;
  540.             }
  541.             /* card-body（明細リスト）を白背景に */
  542.             .mitsumori-card-pc .card-body {
  543.                 background: #fff !important;
  544.             }
  545.             .mitsumori-card-pc .card-footer {
  546.                 background: #f8faff !important;
  547.                 border-top: 1px solid #dce8fb !important;
  548.                 padding: 12px 16px !important;
  549.             }
  550.         }
  552.         @media (max-width: 767px) {
  553.             /* スマホでは現在のお見積り額カードの強調スタイルをすべてリセット */
  554.             .mitsumori-card-pc {
  555.                 border: none !important;
  556.                 border-radius: 0 !important;
  557.                 box-shadow: none !important;
  558.                 margin-top: 0 !important;
  559.                 overflow: visible !important;
  560.                 background: none !important;
  561.             }
  562.             .mitsumori-card-pc .card-header {
  563.                 background: none !important;
  564.                 color: inherit !important;
  565.                 padding: inherit !important;
  566.                 border-bottom: inherit !important;
  567.             }
  568.             .mitsumori-card-pc .card-title { color: inherit !important; }
  569.             .mitsumori-card-pc #mitsumori_message { font-size: inherit !important; color: inherit !important; }
  570.             .mitsumori-card-pc .btn-tool { color: inherit !important; }
  571.             /* 折りたたみトグルボタン */
  572.             .btn-mitsumori-toggle {
  573.                 background: none !important;
  574.                 border: 1px solid #aaa !important;
  575.                 border-radius: 4px !important;
  576.                 padding: 2px 8px !important;
  577.                 font-size: 12px !important;
  578.                 color: #333 !important;
  579.                 line-height: 1.4 !important;
  580.             }
  581.             .btn-mitsumori-toggle .toggle-icon {
  582.                 display: inline-block;
  583.                 transition: transform 0.2s;
  584.             }
  585.             /* 展開状態: ▼→▲ */
  586.             .card:not(.collapsed-card) .btn-mitsumori-toggle .toggle-icon::before {
  587.                 content: "▲ 閉じる";
  588.             }
  589.             .card:not(.collapsed-card) .btn-mitsumori-toggle .toggle-icon {
  590.                 display: none;
  591.             }
  592.             .card:not(.collapsed-card) .btn-mitsumori-toggle::after {
  593.                 content: "▲ 閉じる";
  594.                 font-size: 12px;
  595.             }
  596.             .mitsumori-card-pc .nav-item:first-child .nav-link {
  597.                 font-size: inherit !important;
  598.                 color: inherit !important;
  599.                 background: none !important;
  600.                 padding: inherit !important;
  601.             }
  602.             .mitsumori-card-pc .nav-item:first-child #mitsumori_goukei {
  603.                 font-size: inherit !important;
  604.                 color: inherit !important;
  605.             }
  606.             .mitsumori-card-pc .card-footer {
  607.                 background: none !important;
  608.                 border-top: inherit !important;
  609.                 padding: inherit !important;
  610.             }
  611.             /* 横スクロール禁止 */
  612.             body, html {
  613.                 overflow-x: hidden;
  614.                 max-width: 100vw;
  615.             }
  616.             /* ボタンの折り返しを許可（nowrapが原因で横スクロール発生するため） */
  617.             .opt-btn,
  618.             .rp-btn {
  619.                 white-space: normal;
  620.                 word-break: break-all;
  621.             }
  622.             /* エリア案内: スマホでコンパクト */
  623.             .ec-areaNotice {
  624.                 margin: 8px 0;
  625.                 padding: 8px 10px;
  626.                 border-left-width: 3px;
  627.                 cursor: pointer;
  628.             }
  629.             .ec-areaNotice__inner {
  630.                 flex-direction: row;
  631.                 gap: 8px;
  632.                 align-items: flex-start;
  633.             }
  634.             .ec-areaNotice__icon { font-size: 15px; }
  635.             /* タイトル行: 展開トグル */
  636.             .ec-areaNotice__title {
  637.                 font-size: 11px;
  638.                 margin-bottom: 3px;
  639.                 display: flex;
  640.                 justify-content: space-between;
  641.                 align-items: center;
  642.             }
  643.             .ec-areaNotice__title::after {
  644.                 content: "▼";
  645.                 font-size: 9px;
  646.                 color: #888;
  647.                 margin-left: 6px;
  648.                 transition: transform 0.2s;
  649.             }
  650.             .ec-areaNotice.is-open .ec-areaNotice__title::after {
  651.                 transform: rotate(180deg);
  652.             }
  653.             /* 折りたたみ対象: 閉じた状態では非表示 */
  654.             .ec-areaNotice__detail {
  655.                 display: none;
  656.             }
  657.             .ec-areaNotice.is-open .ec-areaNotice__detail {
  658.                 display: block;
  659.             }
  660.             .ec-areaNotice__text { font-size: 11px; line-height: 1.5; }
  661.             .ec-areaNotice__text br { display: none; }
  662.             .ec-areaNotice__link { font-size: 11px; margin-top: 3px; }
  663.             .rp-card { width: calc(33.333% - 6px); min-width: 80px; }
  664.             
  665.             #sp-mitsumori-bar {
  666.                 display: flex;
  667.                 position: fixed;
  668.                 bottom: 0;
  669.                 left: 0;
  670.                 right: 0;
  671.                 z-index: 1000;
  672.                 background: #fff;
  673.                 border-top: 2px solid #e0e0e0;
  674.                 box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
  675.                 align-items: center;
  676.                 padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 12px;
  677.                 gap: 10px;
  678.             }
  679.             #sp-mitsumori-bar .sp-bar__label {
  680.                 font-size: 11px;
  681.                 color: #666;
  682.                 white-space: nowrap;
  683.             }
  684.             #sp-mitsumori-bar .sp-bar__price {
  685.                 font-size: 18px;
  686.                 font-weight: bold;
  687.                 color: #c00;
  688.                 flex: 1;
  689.             }
  690.             #sp-mitsumori-bar .sp-bar__btn {
  691.                 font-size: 12px;
  692.                 padding: 8px 12px;
  693.                 background: #333;
  694.                 color: #fff;
  695.                 border: none;
  696.                 border-radius: 6px;
  697.                 white-space: nowrap;
  698.                 cursor: pointer;
  699.                 position: relative;
  700.                 display: inline-flex;
  701.                 align-items: center;
  702.                 gap: 6px;
  703.             }
  704.             #sp-mitsumori-bar .sp-bar__btn i {
  705.                 font-size: 14px;
  706.             }
  707.             #sp-mitsumori-bar .sp-bar__cart-badge {
  708.                 position: absolute;
  709.                 top: -6px;
  710.                 right: -6px;
  711.                 background: #c00;
  712.                 color: #fff;
  713.                 border-radius: 50%;
  714.                 min-width: 16px;
  715.                 height: 16px;
  716.                 font-size: 10px;
  717.                 line-height: 16px;
  718.                 padding: 0 4px;
  719.                 font-weight: bold;
  720.             }
  721.             #sp-mitsumori-bar .sp-bar__home-btn {
  722.                 display: inline-flex;
  723.                 align-items: center;
  724.                 justify-content: center;
  725.                 width: 36px;
  726.                 height: 36px;
  727.                 border: 1px solid #ccc;
  728.                 border-radius: 6px;
  729.                 background: #fff;
  730.                 color: #333;
  731.                 text-decoration: none;
  732.                 cursor: pointer;
  733.             }
  734.             #sp-mitsumori-bar .sp-bar__home-btn i {
  735.                 font-size: 16px;
  736.             }
  737.             #sp-mitsumori-bar .sp-bar__home-btn:hover {
  738.                 background: #f0f0f0;
  739.             }
  740.             /* 下部バーの高さ分ページ下部にpaddingを追加 (iOS safe-area 込み) */
  741.             body {
  742.                 padding-bottom: calc(80px + env(safe-area-inset-bottom));
  743.             }
  744.         }
  746.         /* ============================================
  747.            カート追加モーダル: 縦並び中央配置
  748.         ============================================ */
  749.         .add-cart-modal__wrap {
  750.             text-align: center;
  751.         }
  752.         .add-cart-modal__header {
  753.             font-size: 16px;
  754.             margin: 20px 0 24px;
  755.             text-align: center;
  756.         }
  757.         .add-cart-modal__actions {
  758.             display: flex;
  759.             flex-direction: column;
  760.             align-items: center;
  761.             gap: 16px;
  762.             padding: 0 20px 20px;
  763.         }
  764.         .add-cart-modal__primary {
  765.             display: inline-block;
  766.             width: 80%;
  767.             max-width: 320px;
  768.             padding: 14px 20px;
  769.             font-size: 15px;
  770.             font-weight: bold;
  771.             text-align: center;
  772.             background: #d9534f;
  773.             color: #fff !important;
  774.             border-radius: 6px;
  775.             text-decoration: none;
  776.             cursor: pointer;
  777.         }
  778.         .add-cart-modal__primary:hover {
  779.             background: #c9302c;
  780.             color: #fff !important;
  781.             text-decoration: none;
  782.         }
  783.         .add-cart-modal__secondary {
  784.             display: inline-block;
  785.             padding: 6px 14px;
  786.             font-size: 12px;
  787.             color: #666;
  788.             border: 1px solid #ccc;
  789.             border-radius: 4px;
  790.             background: #fff;
  791.             cursor: pointer;
  792.         }
  793.         .add-cart-modal__secondary:hover {
  794.             background: #f0f0f0;
  795.             color: #333;
  796.         }
  797.         @media (max-width: 767px) {
  798.             .add-cart-modal__actions {
  799.                 gap: 20px;
  800.             }
  801.         }
  802.     </style>
  803. {% endblock %}
  805. {% block javascript %}
  807.     <script>
  808.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  810.         // 規格2に選択肢を割り当てる。
  811.         function fnSetClassCategories(form, classcat_id2_selected) {
  812.             var $form = $(form);
  813.             var product_id = $form.find('input[name=product_id]').val();
  814.             var $sele1 = $form.find('select[name=classcategory_id1]');
  815.             var $sele2 = $form.find('select[name=classcategory_id2]');
  816.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  817.         }
  819.         {% if form.classcategory_id2 is defined %}
  820.         fnSetClassCategories(
  821.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  822.         );
  823.         {% elseif form.classcategory_id1 is defined %}
  824.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  825.         {% endif %}
  826.     </script>
  827.     <script>
  828.         $(function() {
  829.             // bfcache無効化
  830.             $(window).bind('pageshow', function(event) {
  831.                 if (event.originalEvent.persisted) {
  832.                     location.reload(true);
  833.                 }
  834.             });
  836.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  837.             // img タグに width, height が付与されている.
  838.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  839.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  840.             $('.ec-grid2__cell').hide();
  841.             var removeSize = function () {
  842.                 $('.slide-item').height('');
  843.                 $('.slide-item img')
  844.                     .removeAttr('width')
  845.                     .removeAttr('height')
  846.                     .removeAttr('style');
  848.             };
  849.             var slickInitial = function(slick) {
  850.                 $('.ec-grid2__cell').fadeIn(1500);
  851.                 var baseHeight = $(slick.target).height();
  852.                 var baseWidth = $(slick.target).width();
  853.                 var rate = baseWidth / baseHeight;
  854.                 if(baseHeight * rate < 400){
  855.                     $('.slide-item').height(baseHeight * rate); // 余白を削除する
  856.                 }else{
  857.                     $('.slide-item').height(400); // 余白を削除する
  858.                 }
  859.                 // transform を使用することでCLSの影響を受けないようにする
  860.                 $('.slide-item img')
  861.                     .css(
  862.                         {
  863.                             'transform-origin': 'top left',
  864.                             'transform': 'scaleY(' + rate + ')',
  865.                             'transition': 'transform .1s'
  866.                         }
  867.                     );
  868.                 // 正しいサイズに近くなったら属性を解除する
  869.                 setTimeout(removeSize, 500);
  870.             };
  871.             $('.item_visual').on('init', slickInitial);
  872.             // リサイズ時は CLS の影響を受けないため属性を解除する
  873.             $(window).resize(removeSize);
  874.             $('.item_visual').slick({
  875.                 dots: false,
  876.                 arrows: true,
  877.                 responsive: [{
  878.                     breakpoint: 768,
  879.                     settings: {
  880.                         dots: true,
  881.                         arrows: false
  882.                     }
  883.                 }]
  884.             });
  886.             $('.slideThumb').on('click', function() {
  887.                 var index = $(this).attr('data-index');
  888.                 $('.item_visual').slick('slickGoTo', index, false);
  889.             })
  890.         });
  892.     </script>
  893.     <script>
  894.         $(function() {
  895.             $('.add-cart').on('click', function(event) {
  896.                 {% if form.classcategory_id1 is defined %}
  897.                 // 規格1フォームの必須チェック
  898.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  899.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  900.                     return true;
  901.                 } else {
  902.                     $('#classcategory_id1')[0].setCustomValidity('');
  903.                 }
  904.                 {% endif %}
  906.                 {% if form.classcategory_id2 is defined %}
  907.                 // 規格2フォームの必須チェック
  908.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  909.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  910.                     return true;
  911.                 } else {
  912.                     $('#classcategory_id2')[0].setCustomValidity('');
  913.                 }
  914.                 {% endif %}
  916.                 // タイプ2: カート送信直前に set_count を quantity に同期
  917.                 if($('#set_count').length){
  918.                     var _sc = parseInt($('#set_count').val()) || 1;
  919.                     $('#quantity').val(_sc);
  920.                     $('input[name="quantity"]').val(_sc);
  921.                 }
  923.                 // 個数フォームのチェック
  924.                 if ($('#quantity').val() < 1) {
  925.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  926.                     return true;
  927.                 } else {
  928.                     $('#quantity')[0].setCustomValidity('');
  929.                 }
  931.                 event.preventDefault();
  932.                 $form = $('#form1');
  933.                 $.ajax({
  934.                     url: $form.attr('action'),
  935.                     type: $form.attr('method'),
  936.                     data: $form.serialize(),
  937.                     dataType: 'json',
  938.                     beforeSend: function(xhr, settings) {
  939.                         // Buttonを無効にする
  940.                         $('.add-cart').prop('disabled', true);
  941.                     }
  942.                 }).done(function(data) {
  943.                     // レスポンス内のメッセージをalertで表示
  944.                     $.each(data.messages, function() {
  945.                         $('#ec-modal-header').text(this);
  946.                     });
  948.                     $('.ec-modal').show()
  950.                     // カートブロックを更新する
  951.                     $.ajax({
  952.                         url: "{{ url('block_cart') }}",
  953.                         type: 'GET',
  954.                         dataType: 'html'
  955.                     }).done(function(html) {
  956.                         $('.ec-headerRole__cart').html(html);
  957.                     });
  958.                 }).fail(function(data) {
  959.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  960.                 }).always(function(data) {
  961.                     // Buttonを有効にする
  962.                     $('.add-cart').prop('disabled', false);
  963.                 });
  964.             });
  965.         });
  967.         $('.ec-modal-wrap').on('click', function(e) {
  968.             // モーダル内の処理は外側にバブリングさせない
  969.             e.stopPropagation();
  970.         });
  971.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  972.             $('.ec-modal').hide()
  973.         });
  976.         var pw = "{% if mitsumori_json %}{{ mitsumori_json.pw }}{% endif %}";
  977.         var pd = "{% if mitsumori_json %}{{ mitsumori_json.pd }}{% endif %}";
  978.         var ph = "{% if mitsumori_json %}{{ mitsumori_json.ph }}{% endif %}";
  979.         var pm = "{% if mitsumori_json %}{{ mitsumori_json.pm }}{% endif %}";
  980.         var pc = "{% if mitsumori_json %}{{ mitsumori_json.pc }}{% endif %}";
  981.         // option1 / option2: カテゴリ別 option 軸 (um: タイプ=subtype, fe: ct_up 等)
  982.         var option1 = "{% if mitsumori_json and mitsumori_json.option1 is defined %}{{ mitsumori_json.option1 }}{% endif %}";
  983.         var option2 = "{% if mitsumori_json and mitsumori_json.option2 is defined %}{{ mitsumori_json.option2 }}{% endif %}";
  984.         var op0 = "{% if mitsumori_json %}{{ mitsumori_json.op[0] }}{% endif %}";
  985.         var op1 = "{% if mitsumori_json %}{{ mitsumori_json.op[1] }}{% endif %}";
  986.         var op2 = "{% if mitsumori_json %}{{ mitsumori_json.op[2] }}{% endif %}";
  987.         var op3 = "{% if mitsumori_json %}{{ mitsumori_json.op[3] }}{% endif %}";
  988.         var op4 = "{% if mitsumori_json %}{{ mitsumori_json.op[4] }}{% endif %}";
  989.         var op5 = "{% if mitsumori_json %}{{ mitsumori_json.op[5] }}{% endif %}";
  990.         var op6 = "{% if mitsumori_json %}{{ mitsumori_json.op[6] }}{% endif %}";
  991.         var op7 = "{% if mitsumori_json %}{{ mitsumori_json.op[7] }}{% endif %}";
  992.         var op8 = "{% if mitsumori_json %}{{ mitsumori_json.op[8] }}{% endif %}";
  993.         var op9 = "{% if mitsumori_json %}{{ mitsumori_json.op[9] }}{% endif %}";
  994.         var op10 = "{% if mitsumori_json %}{{ mitsumori_json.op[10] }}{% endif %}";
  996.         const formatter = new Intl.NumberFormat('ja-JP');
  998.         // ============================================================
  999.         //  free_area 1 エントリのスキーマ（11 キー固定）
  1000.         // ============================================================
  1001.         //   w           : 幅 (string, 例 "239.9cm" / tf は "1m")
  1002.         //   d           : 奥行
  1003.         //   h           : 高さ (tf はロール長 "10m")
  1004.         //   m           : 素材
  1005.         //   c           : カラー
  1006.         //   price       : 販売価格 (税抜、amount=1 ベース)
  1007.         //   unit_price  : 商品 per-unit 増分 (税抜、AMOUNT_CATEGORIES のみ)
  1008.         //   maker_price : メーカー価格 (税抜)
  1009.         //   ct          : 基本工事費 (税抜、amount=1 ベース)
  1010.         //   option1     : fe → ct_up / その他カテゴリ → category-specific
  1011.         //   option2     : um → ct_up / その他カテゴリ → category-specific
  1012.         //
  1013.         //  ct4 (設置場所) / ct5 (撤去) / ct6 (残土) は option_area 側で扱う.
  1014.         // ============================================================
  1016.         // 施工オプション定義（option_area）— 各エントリ {name, comment, on, off, price}
  1017.         var op_data = {{ op_json|default('[]')|raw }};
  1019.         // tg カテゴリ用 block 別オプション差額表 (option_item_area).
  1020.         //   構造: { axis_labels: {F:'床材',front:'前面型',side1:'右側面型',side2:'左側面型'},
  1021.         //           blocks: { 'W_label|D_label': { F:[{idx,label,diff},...], front:[...], side1:[...], side2:[...] }, ... } }
  1022.         // tg 以外のカテゴリでは空 ({axis_labels:{}, blocks:{}}).
  1023.         var oi_data = {{ oi_json|default('{"axis_labels":{},"blocks":{}}')|raw }};
  1025.         // 選択中の tg オプション差額 (axis -> selected choice_idx). ラジオ click で更新される.
  1026.         var oi_selected = { F: 1, front: 1, side1: 1, side2: 1 };
  1028.         // sale_type ID（mtb_sale_type の id。本サイトでの意味は次の通り）:
  1029.         //   1 通常 / 2 補助金窓 / 3 物置 / 4 フェンス / 5 デッキ / 6 芝生 / 9 商品のみ
  1030.         var SALE_TYPE_ID = {{ ProductClass.SaleType.id }};
  1032.         {# option1 / option2 ラベルをカテゴリ別に決定 (sh=31, rd=43, mo=15) — 以降の UI / JS 両方で使用 #}
  1033.         {% set option1_label = 'オプション1' %}
  1034.         {% set option2_label = 'オプション2' %}
  1035.         {% if Product.ProductCategories is not empty %}
  1036.             {% for pcat in Product.ProductCategories %}
  1037.                 {% if pcat.category_id == 31 %}{% set option1_label = 'サイズプリセット' %}{% set option2_label = '駆動方式' %}{% endif %}
  1038.                 {% if pcat.category_id == 43 %}{% set option1_label = 'ランマ' %}{% set option2_label = 'タイプ' %}{% endif %}
  1039.                 {% if pcat.category_id == 15 %}{% set option1_label = '棚タイプ' %}{% endif %}
  1040.                 {% if pcat.category_id == 17 %}{% set option1_label = '窓タイプ' %}{% endif %}
  1041.             {% endfor %}
  1042.         {% endif %}
  1044.         // 消費税率（pp.price/pp.ct/op_data.price は scraper が税抜で保存しているため、
  1045.         // calcGoukei 出口で 1+TAX_RATE を掛けて税込 mitsumori_goukei にする）
  1046.         var TAX_RATE = 0.10;
  1047.         function toIncTax(v) { return Math.round(v * (1 + TAX_RATE)); }
  1049.         /**
  1050.          * tg 用 block 別オプション差額の集計.
  1051.          *   現選択 (W, D) から block key を作り、oi_data.blocks[blockKey] を取得.
  1052.          *   各 axis (F/front/side1/side2) で oi_selected[axis] の choice の diff を合計.
  1053.          * 戻り値: { total: 差額合計(税抜), items: [{name, label, diff}, ...] }
  1054.          *   block が無い (tg 以外 / 該当 (W,D) が未取得) なら total=0.
  1055.          */
  1056.         function collectOptionItems(curW, curD) {
  1057.             var result = { total: 0, items: [] };
  1058.             if (!oi_data || !oi_data.blocks) return result;
  1059.             var blockKey = (curW || '') + '|' + (curD || '');
  1060.             var block = oi_data.blocks[blockKey];
  1061.             if (!block) return result;
  1062.             var axes = ['F', 'front', 'side1', 'side2'];
  1063.             for (var i = 0; i < axes.length; i++) {
  1064.                 var axis = axes[i];
  1065.                 var choices = block[axis];
  1066.                 if (!choices || !choices.length) continue;
  1067.                 var idx = oi_selected[axis] || 1;
  1068.                 var pick = null;
  1069.                 for (var j = 0; j < choices.length; j++) {
  1070.                     if (parseInt(choices[j].idx) === parseInt(idx)) { pick = choices[j]; break; }
  1071.                 }
  1072.                 if (!pick) pick = choices[0];
  1073.                 var diff = parseInt(pick.diff) || 0;
  1074.                 result.total += diff;
  1075.                 result.items.push({
  1076.                     name:  oi_data.axis_labels[axis] || axis,
  1077.                     label: pick.label,
  1078.                     diff:  diff,
  1079.                 });
  1080.             }
  1081.             return result;
  1082.         }
  1084.         /**
  1085.          * tg ラジオ群を block 別に DOM へ描画する.
  1086.          *   W/D が確定したら現 block の 4 軸 (F/front/side1/side2) ラジオを #tg-options 要素に出す.
  1087.          *   block が空なら #tg-options を空にする.
  1088.          */
  1089.         function renderOptionItemRadios(curW, curD) {
  1090.             var $box = $('#tg-options');
  1091.             if (!$box.length) return;
  1092.             $box.empty();
  1093.             if (!oi_data || !oi_data.blocks) return;
  1094.             var blockKey = (curW || '') + '|' + (curD || '');
  1095.             var block = oi_data.blocks[blockKey];
  1096.             if (!block) return;
  1097.             var axes = ['F', 'front', 'side1', 'side2'];
  1098.             axes.forEach(function(axis) {
  1099.                 var choices = block[axis];
  1100.                 if (!choices || !choices.length) return;
  1101.                 var axisLabel = (oi_data.axis_labels && oi_data.axis_labels[axis]) || axis;
  1102.                 var $section = $('<div class="form-group tg-axis"></div>');
  1103.                 $section.append('<p class="rp-section-label"><strong>' + axisLabel + '</strong>: <span class="tg-axis-selected"></span></p>');
  1104.                 var $list = $('<div class="tg-choice-list"></div>');
  1105.                 choices.forEach(function(ch, i) {
  1106.                     var inputId = 'tg_' + axis + '_' + ch.idx;
  1107.                     var name = 'tg_' + axis;
  1108.                     var checked = (parseInt(ch.idx) === parseInt(oi_selected[axis] || 1)) ? ' checked' : '';
  1109.                     var diffTxt = ch.diff > 0 ? '+' + formatter.format(ch.diff) + '円' : (ch.diff < 0 ? formatter.format(ch.diff) + '円' : '±0');
  1110.                     $list.append(
  1111.                         '<label class="tg-choice"><input type="radio" name="' + name + '" id="' + inputId + '" value="' + ch.idx + '" data-axis="' + axis + '"' + checked + '> ' +
  1112.                         ch.label + '<span class="tg-diff">（' + diffTxt + '）</span></label>'
  1113.                     );
  1114.                 });
  1115.                 $section.append($list);
  1116.                 $box.append($section);
  1117.             });
  1118.             // ラジオ click で oi_selected を更新 → 再計算
  1119.             $box.off('change.tg').on('change.tg', 'input[type="radio"][data-axis]', function() {
  1120.                 var axis = $(this).data('axis');
  1121.                 oi_selected[axis] = parseInt($(this).val()) || 1;
  1122.                 mitsumori_simulation('refresh', '');
  1123.             });
  1124.             updateOptionItemSelectedLabels();
  1125.         }
  1127.         function updateOptionItemSelectedLabels() {
  1128.             $('#tg-options .tg-axis').each(function() {
  1129.                 var $sel = $(this).find('input[type="radio"]:checked');
  1130.                 if (!$sel.length) return;
  1131.                 var label = $sel.parent().contents().filter(function() { return this.nodeType === 3; }).text().trim();
  1132.                 $(this).find('.tg-axis-selected').text(label);
  1133.             });
  1134.         }
  1136.         /**
  1137.          * 選択中の施工オプションを集計し、ON選択分の price を合計する.
  1138.          * 戻り値: { total: 合計金額, items: [{name, value, price}, ...] }
  1139.          */
  1140.         function collectOptions() {
  1141.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  1142.             var total = 0;
  1143.             var items = [];
  1144.             for (var i = 0; i < ops.length; i++) {
  1145.                 if (!op_data[i] || !op_data[i].name) continue;
  1146.                 var sel = ops[i];
  1147.                 if (!sel) continue;
  1148.                 var price = parseInt(op_data[i].price) || 0;
  1149.                 // 「ON」選択時のみ加算（OFF や「不要」「商品購入のみ」は加算しない）
  1150.                 var isOn = (sel === op_data[i].on);
  1151.                 items.push({
  1152.                     name:  op_data[i].name,
  1153.                     value: sel,
  1154.                     price: isOn ? price : 0,
  1155.                     on:    op_data[i].on,
  1156.                     off:   op_data[i].off,
  1157.                 });
  1158.                 if (isOn) total += price;
  1159.             }
  1160.             return { total: total, items: items };
  1161.         }
  1163.         /**
  1164.          * free_area 1 エントリ ({w,d,h,m,c,price,unit_price,maker_price,ct,option1,option2})
  1165.          * から sale_type 別に最終金額を算出する.
  1166.          *
  1167.          * 計算式（amount=1 ベース、出口で × 1.10 税込化）:
  1168.          *   1 通常        : price + ct + option_sum
  1169.          *   2 補助金窓    : price × set_count + (ct + (set_count-1) × option2) + option_sum
  1170.          *   3 物置        : (price + ct) × daisu + option_sum
  1171.          *   4 フェンス    : price + (maisu-1) × unit_price
  1172.          *                  + ct + max(0, maisu-3) × option1
  1173.          *                  + option_sum   (maisu >= 3)
  1174.          *   5 デッキ      : price + ct + option_sum   (area は表示用、計算非関与)
  1175.          *   6 芝生        : price × ceil(area / (w_m × h_m)) + ct + option_sum
  1176.          *   9 商品のみ    : price のみ（カート quantity 倍で総額）
  1177.          *
  1178.          * fe では option1 を ct_up、um では option2 を ct_up として転用.
  1179.          * tf では w / h にロール幅・長さが格納されており parseLen で数値抽出.
  1180.          *
  1181.          * @param {Object} pp  free_area の 1 行（matrix エントリ）
  1182.          * @param {number} optionTotal  collectOptions().total
  1183.          * @param {Object} ctx  UI 入力 {set_count, daisu, maisu, area, quantityOnly, ...}
  1184.          * @returns {Object} {goukei, price, ct, opt, qty}  すべて税込整数
  1185.          */
  1186.         function calcGoukei(pp, optionTotal, ctx) {
  1187.             var basePrice  = parseInt(pp.price)       || 0;
  1188.             var baseCt     = parseInt(pp.ct)          || 0;
  1189.             var unitPrice  = parseInt(pp.unit_price)  || 0;
  1190.             var optSum     = optionTotal;
  1191.             var price      = basePrice;
  1192.             var ct         = baseCt;
  1193.             var qty        = 1;
  1194.             var goukei     = 0;
  1196.             // 「商品購入のみ」選択時は工事費・オプションをゼロにする（任意 sale_type で適用）
  1197.             var ops = [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10];
  1198.             var purchaseOnly = ops.some(function(v){ return v === '商品購入のみ'; });
  1199.             if (purchaseOnly) {
  1200.                 baseCt = 0;
  1201.                 ct     = 0;
  1202.                 optSum = 0;
  1203.             }
  1205.             switch (SALE_TYPE_ID) {
  1206.                 case 2: {  // 補助金・窓 (シンプル表引き方式 2026-05-)
  1207.                     // 2026-05 仕様簡素化: 枚数軸を廃止し、subtype に枚数を内包.
  1208.                     // pp.price / pp.ct は (W, H, ガラス, subtype) の単一価格.
  1209.                     // 複数枚をまとめて買う場合はカート quantity で表現.
  1210.                     qty    = 1;
  1211.                     price  = basePrice;
  1212.                     ct     = baseCt;
  1213.                     goukei = price + ct + optSum;
  1214.                     break;
  1215.                 }
  1217.                 case 3: {  // 物置・ゴミステーション
  1218.                     qty   = Math.max(1, parseInt(ctx.daisu) || 1);
  1219.                     price = basePrice * qty;
  1220.                     ct    = baseCt * qty;
  1221.                     goukei = price + ct + optSum;
  1222.                     break;
  1223.                 }
  1225.                 case 4: {  // フェンス・組み立て式（maisu ≥ 3、base_amount = 3）
  1226.                     // scraper は amount=3 を base にしているので pp.price = price(3),
  1227.                     // pp.unit_price = price(4) - price(3).
  1228.                     qty   = Math.max(3, parseInt(ctx.maisu) || 3);
  1229.                     price = basePrice + (qty - 3) * unitPrice;
  1230.                     // option1 が ct_up (4枚目以降の増分). 未設定なら ct 固定動作
  1231.                     var ctUp1 = parseInt(pp.option1) || 0;
  1232.                     ct = baseCt + Math.max(0, qty - 3) * ctUp1;
  1233.                     goukei = price + ct + optSum;
  1234.                     break;
  1235.                 }
  1237.                 case 5: {  // ウッドデッキ・タイルデッキ
  1238.                     // area は担当者向けの参考値として保持（計算には使わない）
  1239.                     qty    = 1;
  1240.                     goukei = basePrice + baseCt + optSum;
  1241.                     price  = basePrice;
  1242.                     ct     = baseCt;
  1243.                     break;
  1244.                 }
  1246.                 case 6: {  // 芝生・人工芝（ロール単位）
  1247.                     // pp.w "1m", pp.h "10m" から数値抽出
  1248.                     var w_m = parseLen(pp.w);
  1249.                     var h_m = parseLen(pp.h);
  1250.                     var rollSize = w_m * h_m;
  1251.                     if (!rollSize || rollSize <= 0) rollSize = 1;
  1252.                     var area  = parseFloat(ctx.area) || rollSize;
  1253.                     qty    = Math.max(1, Math.ceil(area / rollSize));
  1254.                     price  = basePrice * qty;
  1255.                     ct     = baseCt;
  1256.                     goukei = price + ct + optSum;
  1257.                     break;
  1258.                 }
  1260.                 case 7: {  // 数量買い・基本工事費固定（gf ガーデンファニチャー / st 石材）
  1261.                     qty    = Math.max(1, parseInt(ctx.suuryou) || 1);
  1262.                     price  = basePrice * qty;
  1263.                     ct     = baseCt;                 // ct は固定（数量に依らない）
  1264.                     goukei = price + ct + optSum;
  1265.                     break;
  1266.                 }
  1268.                 case 9: {  // 商品のみ購入
  1269.                     // カート側で quantity × unit price するため goukei は単品価格
  1270.                     qty    = parseInt(ctx.quantityOnly) || 1;
  1271.                     price  = basePrice;
  1272.                     ct     = 0;
  1273.                     optSum = 0;
  1274.                     goukei = price;
  1275.                     break;
  1276.                 }
  1278.                 default: {  // 1: 通常（カーポート等、matrix 選択のみ）
  1279.                     qty    = 1;
  1280.                     goukei = basePrice + baseCt + optSum;
  1281.                     break;
  1282.                 }
  1283.             }
  1285.             // 出口で税込化（pp.price/pp.ct/op_data.price はすべて税抜で保存されている前提）
  1286.             return {
  1287.                 goukei: toIncTax(goukei),
  1288.                 price:  toIncTax(price),
  1289.                 ct:     toIncTax(ct),
  1290.                 opt:    toIncTax(optSum),
  1291.                 qty:    qty,
  1292.             };
  1293.         }
  1295.         /**
  1296.          * 寸法文字列から「メートル単位の数値」を抽出する.
  1297.          *
  1298.          * 単位は m / cm / mm を認識し、いずれも m 単位に正規化して返す.
  1299.          * 単位が無い場合は m 単位とみなす（旧 tf データ "1m" "10m" との互換）.
  1300.          * 数値が見つからない場合は 0 を返す（呼び出し側で fallback）.
  1301.          *
  1302.          * 例:
  1303.          *   "1m"     → 1
  1304.          *   "100cm"  → 1   (2026-06 以降の m → cm 正規化に対応)
  1305.          *   "200cm"  → 2
  1306.          *   "5.5m"   → 5.5
  1307.          *   "1000mm" → 1
  1308.          *   ""       → 0
  1309.          */
  1310.         function parseLen(s) {
  1311.             if (!s) return 0;
  1312.             var str = String(s);
  1313.             var m = str.match(/(\d+(?:\.\d+)?)\s*(mm|cm|m)?/i);
  1314.             if (!m) return 0;
  1315.             var n = parseFloat(m[1]);
  1316.             if (isNaN(n)) return 0;
  1317.             var unit = (m[2] || 'm').toLowerCase();
  1318.             if (unit === 'cm') return n / 100;
  1319.             if (unit === 'mm') return n / 1000;
  1320.             return n;  // 'm' or no unit
  1321.         }
  1323.         // pp は autoSelectFirstColor 等からも参照するので global にする
  1324.         var pp = {{ pp|raw }};
  1326.         function mitsumori_simulation(type , value_id){
  1327.             // 価格データ未登録 (pp 行 0 件) の商品は axis 入力に依存せず
  1328.             // 「価格データ準備中」を表示して終了する.
  1329.             // (例: scrape 未対象の新規商品 — um のウチリモ 7487/7488 等)
  1330.             if (!pp || pp.length === 0) {
  1331.                 $('#mitsumori_message').text("価格データ準備中");
  1332.                 $('#mitsumori_btn').hide();
  1333.                 $('#mitsumori_goukei').text("---円");
  1334.                 $('#mitsumori_off').text("---円");
  1335.                 $('#mitsumori_price').text("---円");
  1336.                 $('#maker_price').text("---円");
  1337.                 $('#mitsumori_ct').text("---円");
  1338.                 $('#mitsumori_option').text("---円");
  1339.                 $('#mitsumori_kei').text("---円");
  1340.                 $('#mitsumori_shoukei').text("---円");
  1341.                 $('#mitsumori_tax').text("---円");
  1342.                 return;
  1343.             }
  1344.             if(type == "pw"){
  1345.                 pw = $('#'+value_id).val();
  1346.             }
  1347.             if(type == "pd"){
  1348.                 pd = $('#'+value_id).val();
  1349.             }
  1350.             if(type == "ph"){
  1351.                 ph = $('#'+value_id).val();
  1352.             }
  1353.             if(type == "pm"){
  1354.                 pm = $('#'+value_id).val();
  1355.             }
  1356.             if(type == "pc"){
  1357.                 pc = $('#'+value_id).val();
  1358.             }
  1359.             if(type == "option1"){
  1360.                 option1 = $('#'+value_id).val();
  1361.             }
  1362.             if(type == "option2"){
  1363.                 option2 = $('#'+value_id).val();
  1364.             }
  1365.             if(type == "op0"){ op0 = $('#'+value_id).val(); }
  1366.             if(type == "op1"){ op1 = $('#'+value_id).val(); }
  1367.             if(type == "op2"){ op2 = $('#'+value_id).val(); }
  1368.             if(type == "op3"){ op3 = $('#'+value_id).val(); }
  1369.             if(type == "op4"){ op4 = $('#'+value_id).val(); }
  1370.             if(type == "op5"){ op5 = $('#'+value_id).val(); }
  1371.             if(type == "op6"){ op6 = $('#'+value_id).val(); }
  1372.             if(type == "op7"){ op7 = $('#'+value_id).val(); }
  1373.             if(type == "op8"){ op8 = $('#'+value_id).val(); }
  1374.             if(type == "op9"){ op9 = $('#'+value_id).val(); }
  1375.             if(type == "op10"){ op10 = $('#'+value_id).val(); }
  1377.             // op0 が「商品購入のみ」のとき、他のオプション (op1..op10) を disable 化.
  1378.             // 価格計算側 (calcGoukei の purchaseOnly 分岐) は既にゼロ化しているが、
  1379.             // UI で選択可能に見えるとユーザーが混乱するため radio を完全に無効化する.
  1380.             (function applyPurchaseOnlyUI() {
  1381.                 var isPurchaseOnly = (op0 === '商品購入のみ');
  1382.                 for (var k = 1; k <= 10; k++) {
  1383.                     var $inputs = $('input[name="op' + k + '"]');
  1384.                     if ($inputs.length === 0) continue;
  1385.                     $inputs.prop('disabled', isPurchaseOnly);
  1386.                     var $group = $inputs.first().closest('.form-group');
  1387.                     $group.css({
  1388.                         'opacity':        isPurchaseOnly ? '0.4'  : '1',
  1389.                         'pointer-events': isPurchaseOnly ? 'none' : 'auto'
  1390.                     });
  1391.                 }
  1392.             })();
  1394.             // 全 type 共通: 該当 radio を checked にし、ボタンの is-selected を付け替え + ラベル更新.
  1395.             //   value_id が指定されていて、対応する DOM 要素が opt-btn 配下にあれば適用する.
  1396.             //   (icheck-danger 形式から opt-btn 形式に統一した際、option1/option2/pw/pd/ph/pm/pc 等の
  1397.             //    クリックで is-selected が更新されない不具合があったため、op\d+ 限定の処理を一般化)
  1398.             if (value_id) {
  1399.                 var $clicked = $('#' + value_id);
  1400.                 if ($clicked.length && $clicked.closest('.opt-btn').length) {
  1401.                     $clicked.prop('checked', true);
  1402.                     var groupName = $clicked.attr('name');
  1403.                     $('input[name="' + groupName + '"]').closest('.opt-btn').removeClass('is-selected');
  1404.                     $clicked.closest('.opt-btn').addClass('is-selected');
  1405.                     var $group = $clicked.closest('.form-group');
  1406.                     var $label = $group.find('.rp-section-label');
  1407.                     if ($label.length) {
  1408.                         var labelText = $label.text().split(':')[0].trim();
  1409.                         $label.html(labelText + ': <span>' + $clicked.val() + '</span>');
  1410.                     }
  1411.                     // op_data の price=0 & 解体/撤去/設置場所 オプションの場合、ON 選択時に「現場調査後に正式お見積もり」文言を表示.
  1412.                     //   (twig 側で is_removal_unknown ブロックを描画済み。display 切替のみ JS で行う)
  1413.                     if (/^op\d+$/.test(type)) {
  1414.                         var opIdx = type.replace('op', '');
  1415.                         var opEntry = op_data[parseInt(opIdx)];
  1416.                         if (opEntry) {
  1417.                             var $note = $group.find('.opt-survey-note[data-op-idx="' + opIdx + '"]');
  1418.                             if ($note.length) {
  1419.                                 var isOn = ($clicked.val() === opEntry.on);
  1420.                                 $note.toggle(isOn);
  1421.                             }
  1422.                         }
  1423.                         // wd (sale_type=5) のステップ / デッキフェンス用の注記もここで切替.
  1424.                         //   ステップ → deck_step (op0 だが op_data 範囲外), 必要 選択時に表示.
  1425.                         var radioName = $clicked.attr('name');
  1426.                         if (radioName === 'deck_step') {
  1427.                             $group.find('.opt-survey-note-wd-step').toggle($clicked.val() === '必要');
  1428.                         } else if (radioName === 'deck_fence') {
  1429.                             $group.find('.opt-survey-note-wd-fence').toggle($clicked.val() === '必要');
  1430.                         }
  1431.                     }
  1432.                 }
  1433.             }
  1435.             // 必須項目チェックは sale_type 1 系（カーポート/物置/フェンスなど価格マトリクス必要）に限定
  1436.             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);
  1438.             // sale_type=3 (物置・ゴミステーション・照明 等) では「素材」を選択肢として扱わない.
  1439.             //   - mo/gs/sy は m が "指定なし" など名目的にしか入っていない
  1440.             //   - sl は m が空のままで matrix に行が来る
  1441.             //   そのため pm の必須チェックを sale_type=3 でスキップする。
  1442.             var pmRequired = (SALE_TYPE_ID != 3);
  1444.             if (requireMatrix) {
  1445.                 if(pmRequired && pm == ""){
  1446.                     $('#mitsumori_message').text("素材を選択してください");
  1447.                 }
  1448.                 if(ph == ""){
  1449.                     $('#mitsumori_message').text("高さを選択してください");
  1450.                 }
  1451.                 if(pd == ""){
  1452.                     $('#mitsumori_message').text("奥行きを選択してください");
  1453.                 }
  1454.                 if(pw == ""){
  1455.                     $('#mitsumori_message').text("幅を選択してください");
  1456.                 }
  1457.                 if(pc == ""){
  1458.                     $('#mitsumori_message').text("カラーを選択してください");
  1459.                     $('#mitsumori_btn').hide();
  1460.                     $('#mitsumori_goukei').text("---円");
  1461.                     $('#mitsumori_off').text("---円");
  1462.                     $('#mitsumori_price').text("---円");
  1463.                     $('#maker_price').text("---円");
  1464.                     $('#mitsumori_ct').text("---円");
  1465.                     $('#mitsumori_option').text("---円");
  1466.                 }
  1467.             }
  1469.             if(pw != "" && pd != "" && ph != "" && (!pmRequired || pm != "") && pc != ""){
  1470.                 $('#mitsumori_btn').show();
  1472.                 // 入力コンテキスト（sale_type 別パラメータ）
  1473.                 var ctx = {
  1474.                     set_count:    parseInt($('#set_count').val())    || 1,
  1475.                     daisu:        parseInt($('#daisu').val())        || 1,
  1476.                     maisu:        parseInt($('#maisu').val())        || 3,
  1477.                     suuryou:      parseInt($('#suuryou').val())      || 1,
  1478.                     area:         parseFloat($('#area').val())       || 0,
  1479.                     quantityOnly: parseInt($('#quantity_only').val())|| 1,
  1480.                     mado_w:       $('#mado_w').val() || '',
  1481.                     mado_h:       $('#mado_h').val() || '',
  1482.                     mado_type:    $('input[name=mado_type]:checked').val()  || '',
  1483.                     glass_type:   $('input[name=glass_type]:checked').val() || '',
  1484.                     deck_step:    $('input[name=deck_step]:checked').val()  || '',
  1485.                     deck_fence:   $('input[name=deck_fence]:checked').val() || '',
  1486.                 };
  1488.                 // 施工オプション集計（残土処理を含む）
  1489.                 var opCalc = collectOptions();
  1491.                 var pp_matched = false;
  1492.                 // 各軸の汎用 axisMatch:
  1493.                 //   user 選択 == matrix 値 / user "指定なし" / matrix 値が空
  1494.                 var axisMatch = function(input, value){
  1495.                     return input == value || input == "指定なし" || value === "" || value == null;
  1496.                 };
  1497.                 // 色専用マッチャー: scraper のデータ形式に合わせて拡張する
  1498.                 //   1. 完全一致 / "指定なし" / 値が空 → 真 (axisMatch と同じ)
  1499.                 //   2. matrix 値が "色1/色2/色3" の形 (同価格グループ) → split して user 選択が含まれれば真
  1500.                 // scraper のロジック (scraper_price.py L765-779):
  1501.                 //   全色同価格 → c=""、価格違いグループあり → 各 group を "/" 結合した色名で 1 行
  1502.                 var colorMatch = function(input, value){
  1503.                     if (axisMatch(input, value)) return true;
  1504.                     if (typeof value === 'string' && value.indexOf('/') !== -1 && input) {
  1505.                         var parts = value.split('/');
  1506.                         for (var idx = 0; idx < parts.length; idx++) {
  1507.                             if (parts[idx].trim() === input) return true;
  1508.                         }
  1509.                     }
  1510.                     return false;
  1511.                 };
  1513.                 // 他軸 (w/d/h/m + option1/option2) でマッチする pp 行を抽出.
  1514.                 // option1/option2 は um の subtype 等で使われる. axisMatch は free_area 側が
  1515.                 // 空のとき真を返すので、um 以外のカテゴリ (option 軸を使わない) でも影響なし.
  1516.                 var candidates = pp.filter(function(el){
  1517.                     return axisMatch(pw, el.w) && axisMatch(pd, el.d) && axisMatch(ph, el.h) && axisMatch(pm, el.m)
  1518.                         && axisMatch(option1, el.option1) && axisMatch(option2, el.option2);
  1519.                 });
  1520.                 var picked = null;
  1522.                 // 優先 1: 色も含めて完全一致 ("色1/色2" 形式の split match を含む)
  1523.                 for (var ii = 0; ii < candidates.length; ii++) {
  1524.                     if (colorMatch(pc, candidates[ii].c)) { picked = candidates[ii]; break; }
  1525.                 }
  1527.                 // 優先 2: 完全一致なし & user の pc が候補のどの c 値にも該当しない (= 命名違い等)
  1528.                 //   かつ候補全行で price が一致する場合は、色軸を実質無視して先頭行を採用.
  1529.                 //   例 id=3353: pp.c は "ステンカラー＋..." 6種だが price は全て同じなので
  1530.                 //     SM(スミ) を選んでも安全に最初の行の価格を返せる.
  1531.                 if (!picked && candidates.length > 0) {
  1532.                     var ppCsInCand = candidates.map(function(r){ return r.c || ''; });
  1533.                     var pcAbsent = (pc !== '' && pc !== '指定なし' && ppCsInCand.indexOf(pc) === -1
  1534.                                     && ppCsInCand.every(function(v){ return v.indexOf('/') === -1 || v.split('/').map(function(s){return s.trim();}).indexOf(pc) === -1; }));
  1535.                     if (pcAbsent) {
  1536.                         var uniqPrices = new Set();
  1537.                         candidates.forEach(function(r){ uniqPrices.add(String(r.price)); });
  1538.                         if (uniqPrices.size === 1) {
  1539.                             // 全候補同価格 → 色軸を wildcard 扱いで OK
  1540.                             picked = candidates[0];
  1541.                         }
  1542.                         // 価格が異なる場合は意図的に picked=null のまま「対応しておりません」.
  1543.                     }
  1544.                 }
  1545.                 pp.forEach((el) => {
  1546.                   if (el === picked) {
  1547.                     pp_matched = true;
  1549.                     // tg block-keyed オプション差額を集計 (tg 以外は total=0)
  1550.                     var oiCalc = collectOptionItems(el.w || '', el.d || '');
  1551.                     // tg ブロックに合わせてラジオを再描画 (tg 以外は no-op)
  1552.                     renderOptionItemRadios(el.w || '', el.d || '');
  1554.                     var calc       = calcGoukei(el, opCalc.total, ctx);
  1555.                     var goukei     = calc.goukei;
  1556.                     var price      = calc.price;
  1557.                     var ct         = calc.ct;
  1558.                     var optionSum  = calc.opt;
  1559.                     // オプション差額は税抜 → 税込に変換して合計に加算
  1560.                     var oiIncTax   = toIncTax(oiCalc.total);
  1561.                     goukei += oiIncTax;
  1562.                     price  += oiIncTax;  // 差額は本体価格扱いとして mitsumori_price にも加算
  1563.                     // maker_price も scraper が税抜で保存しているため税込に変換
  1564.                 var makerPrice = toIncTax(parseInt(el.maker_price) || 0);
  1566.                     $('#mitsumori_message').text(formatter.format(goukei) + "円");
  1567.                     $('#mitsumori_goukei').text(formatter.format(goukei) + "円");
  1568.                     $('#mitsumori_off').text(formatter.format(price - makerPrice) + "円");
  1569.                     $('#mitsumori_price').text(formatter.format(price) + "円");
  1570.                     $('#maker_price').text(formatter.format(makerPrice) + "円");
  1571.                     $('#mitsumori_ct').text(formatter.format(ct) + "円");
  1572.                     $('#mitsumori_option').text(formatter.format(optionSum) + "円");
  1574.                     $('#mitsumori_kei').text(formatter.format(goukei) + "円");
  1575.                     $('#mitsumori_price_01').text(formatter.format(price) + "円");
  1576.                     $('#mitsumori_price_02').text(formatter.format(price) + "円");
  1577.                     $('#mitsumori_ct_01').text(formatter.format(ct) + "円");
  1578.                     $('#mitsumori_ct_02').text(formatter.format(ct) + "円");
  1579.                     $('#mitsumori_goukei_02').text(formatter.format(goukei) + "円");
  1581.                     var shoukei = goukei / 1.1;
  1582.                     var tax     = parseInt(goukei - shoukei);
  1583.                     $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  1584.                     $('#mitsumori_tax').text(formatter.format(tax) + "円");
  1586.                     // PDF 明細用：オプション内訳テーブルを差し込む (施工オプション + tg block オプション)
  1587.                     renderOptionDetailRows(opCalc.items.concat(oiCalc.items.map(function(it){
  1588.                         return { name: it.name, value: it.label, price: it.diff };
  1589.                     })));
  1590.                   }
  1591.                 });
  1593.                 if (!pp_matched) {
  1594.                     $('#mitsumori_message').text("この組み合わせは対応しておりません");
  1595.                     $('#mitsumori_btn').hide();
  1596.                     $('#mitsumori_goukei').text("---円");
  1597.                     $('#mitsumori_off').text("---円");
  1598.                     $('#mitsumori_price').text("---円");
  1599.                     $('#maker_price').text("---円");
  1600.                     $('#mitsumori_ct').text("---円");
  1601.                     $('#mitsumori_option').text("---円");
  1602.                     $('#mitsumori_kei').text("---円");
  1603.                     $('#mitsumori_shoukei').text("---円");
  1604.                     $('#mitsumori_tax').text("---円");
  1605.                 }
  1607.                 // mitsumori_json: バック側に送信する見積データ
  1608.                 var mitsumori_json = { "mitsumori_goukei": $('#mitsumori_goukei').text(),
  1609.                                         "mitsumori_goukei_02": $('#mitsumori_goukei_02').text(),
  1610.                                         "mitsumori_price": $('#mitsumori_price').text(),
  1611.                                         "maker_price": $('#maker_price').text(),
  1612.                                         "mitsumori_off": $('#mitsumori_off').text(),
  1613.                                         "mitsumori_ct": $('#mitsumori_ct').text(),
  1614.                                         "mitsumori_option": $('#mitsumori_option').text(),
  1615.                                         "product_id": {{ Product.id }},
  1616.                                         "sale_type": SALE_TYPE_ID,
  1617.                                         "pw": pw,
  1618.                                         "pd": pd,
  1619.                                         "ph": ph,
  1620.                                         "pm": pm,
  1621.                                         "pc": pc,
  1622.                                         "op": [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10],
  1623.                                         "op_items": opCalc.items,
  1624.                                         "mado_w":     ctx.mado_w,
  1625.                                         "mado_h":     ctx.mado_h,
  1626.                                         "mado_type":  ctx.mado_type,
  1627.                                         "glass_type": ctx.glass_type,
  1628.                                         "set_count":  ctx.set_count,
  1629.                                         "daisu":      ctx.daisu,
  1630.                                         "maisu":      ctx.maisu,
  1631.                                         "suuryou":    ctx.suuryou,
  1632.                                         "area":       ctx.area,
  1633.                                         "deck_step":  ctx.deck_step,
  1634.                                         "deck_fence": ctx.deck_fence };
  1636.                 $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  1637.             }
  1638.         }
  1640.         // PDF/モーダル明細の動的差し替え（基本工事費の次にオプション行を追加）
  1641.         function renderOptionDetailRows(items) {
  1642.             var $tbody = $('.modal-mitsumori table tbody');
  1643.             if (!$tbody.length) return;
  1644.             $tbody.find('tr.opt-row').remove();
  1645.             var anchorRow = $tbody.find('tr').filter(function(){
  1646.                 return $(this).find('td:first').text().indexOf('残土') !== -1
  1647.                     || $(this).find('td:first').text().indexOf('基本工事費') !== -1;
  1648.             }).last();
  1649.             items.forEach(function(it){
  1650.                 if (!it.name || !it.value) return;
  1651.                 var priceTxt = it.price > 0
  1652.                     ? formatter.format(it.price) + '円'
  1653.                     : '0円';
  1654.                 var $tr = $('<tr class="opt-row"></tr>')
  1655.                     .append('<td>' + it.name + '：' + it.value + '</td>')
  1656.                     .append('<td>1</td>')
  1657.                     .append('<td>式</td>')
  1658.                     .append('<td>' + priceTxt + '</td>')
  1659.                     .append('<td>' + (it.price > 0 ? formatter.format(it.price) + '円' : '') + '</td>');
  1660.                 if (anchorRow.length) {
  1661.                     anchorRow.after($tr);
  1662.                     anchorRow = $tr;
  1663.                 } else {
  1664.                     $tbody.append($tr);
  1665.                 }
  1666.             });
  1667.         }
  1669.         // 見積書モーダルを開く直前に、右側「現在のお見積り額」パネルの表示値を
  1670.         // モーダル内の対応 ID にコピーして金額の食い違いを防ぐ。
  1671.         // pw/pd/ph/pm が未選択で mitsumori_simulation の full update に到達しない場合でも、
  1672.         // パネル側の値（HTML 静的初期値 or 直近の simulation 結果）が modal にも反映される。
  1673.         function syncMitsumoriModalFromPanel() {
  1674.             var goukeiText = $('#mitsumori_goukei').text();
  1675.             var priceText  = $('#mitsumori_price').text();
  1676.             var ctText     = $('#mitsumori_ct').text();
  1678.             $('#mitsumori_kei').text(goukeiText);
  1679.             $('#mitsumori_price_01').text(priceText);
  1680.             $('#mitsumori_price_02').text(priceText);
  1681.             $('#mitsumori_ct_01').text(ctText);
  1682.             $('#mitsumori_ct_02').text(ctText);
  1683.             $('#mitsumori_goukei_02').text(goukeiText);
  1685.             // 小計 / 消費税 は税込 goukei から逆算
  1686.             var num = parseInt(goukeiText.replace(/[^\d-]/g, ''), 10);
  1687.             if (!isNaN(num) && num > 0) {
  1688.                 var shoukei = Math.round(num / 1.1);
  1689.                 var tax     = num - shoukei;
  1690.                 $('#mitsumori_shoukei').text(formatter.format(shoukei) + '円');
  1691.                 $('#mitsumori_tax').text(formatter.format(tax) + '円');
  1692.             } else {
  1693.                 $('#mitsumori_shoukei').text('---円');
  1694.                 $('#mitsumori_tax').text('---円');
  1695.             }
  1696.         }
  1698.         $(document).on('show.bs.modal', '#modal-mitsumori', function () {
  1699.             syncMitsumoriModalFromPanel();
  1700.         });
  1702.         {# pc の auto-init: pw/pd/ph/pm と同じく p_c（matrix 派生）の length==1 or 全空で「指定なし」化.
  1703.            search_word(color) が空の「複合色」型商品で pc が空のまま放置されて
  1704.            「カラーを選択してください」固定になるバグの修正.
  1705.            search_word に登録された name があれば優先採用. #}
  1706.         {% if p_c and (p_c|length == 1 or p_c|join == "") %}
  1707.             pc = "指定なし";
  1708.             {% for pc_val in p_c %}{% if pc_val %} pc = "{{ pc_val }}"; {% endif %}{% endfor %}
  1709.             {% if color and color|length == 1 %}
  1710.                 {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  1711.             {% endif %}
  1712.         {% elseif color and color|length == 1 %}
  1713.             pc = "指定なし";
  1714.             {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  1715.         {% endif %}
  1717.         {% if p_w and (p_w|length == 1 or p_w|join == "") %}
  1718.             pw = "指定なし";
  1719.             {% for pw in p_w %}{% if pw %} pw = "{{ pw }}"; {% endif %}{% endfor %}
  1720.         {% endif %}
  1722.         {% if p_d and (p_d|length == 1 or p_d|join == "") %}
  1723.             pd = "指定なし";
  1724.             {% for pd in p_d %}{% if pd %} pd = "{{ pd }}"; {% endif %}{% endfor %}
  1725.         {% endif %}
  1727.         {% if p_h and (p_h|length == 1 or p_h|join == "") %}
  1728.             ph = "指定なし";
  1729.             {% for ph in p_h %}{% if ph %} ph = "{{ ph }}"; {% endif %}{% endfor %}
  1730.         {% endif %}
  1732.         {% if p_m and (p_m|length == 1 or p_m|join == "") %}
  1733.             pm = "指定なし";
  1734.             {% for pm in p_m %}{% if pm %} pm = "{{ pm }}"; {% endif %}{% endfor %}
  1735.         {% endif %}
  1737.         {# p_option1 / p_option2 の auto-init: length==1 or 全空で JS 変数を埋める #}
  1738.         {% if p_option1 and (p_option1|length == 1 or p_option1|join == "") %}
  1739.             option1 = "";
  1740.             {% for opt1 in p_option1 %}{% if opt1 %} option1 = "{{ opt1|e('js') }}"; {% endif %}{% endfor %}
  1741.         {% endif %}
  1743.         {% if p_option2 and (p_option2|length == 1 or p_option2|join == "") %}
  1744.             option2 = "";
  1745.             {% for opt2 in p_option2 %}{% if opt2 %} option2 = "{{ opt2|e('js') }}"; {% endif %}{% endfor %}
  1746.         {% endif %}
  1748.         // カラー radio が複数あるとき初期チェックが無いと「カラーを選択してください」固定になるので、
  1749.         // 何もチェックされていなければ「最初の radio」を選択する。
  1750.         // sale_type≠3 は name="color", sale_type=3 は name="color3".
  1751.         //
  1752.         // 注意:
  1753.         //   ・search_word（= radio の値）と pp.c（= matrix の色軸）は別の命名体系のケースがある
  1754.         //     （例 id=3353: radio="SM(スミ)" / pp.c="ステンカラー＋セピアブラウン"）
  1755.         //   ・pp.c に合わせて radio を選ぼうとしても文字列一致しないので無意味。
  1756.         //   ・単純に「先頭の radio」を選ぶ実装に戻し、マッチング側で命名体系違いを吸収する
  1757.         //     （pc が pp.c のどの値にもマッチしないときは色軸を wildcard 扱いにする）。
  1758.         //   ・.rp-section-label のテキストも忘れずに同期する（古い session 値が残ると
  1759.         //     "ステンカラー＋セピアブラウン" のような表示と実際の radio が食い違う）。
  1760.         (function autoSelectFirstColor(){
  1761.             var groups = ['color', 'color3'];
  1762.             for (var gi = 0; gi < groups.length; gi++) {
  1763.                 var name = groups[gi];
  1764.                 var nodes = document.querySelectorAll('input[type="radio"][name="' + name + '"]');
  1765.                 if (nodes.length === 0) continue;
  1766.                 var anyChecked = false;
  1767.                 for (var i = 0; i < nodes.length; i++) {
  1768.                     if (nodes[i].checked) { anyChecked = true; break; }
  1769.                 }
  1770.                 if (anyChecked) continue;
  1772.                 var target = nodes[0];
  1773.                 target.checked = true;
  1774.                 pc = target.value;
  1776.                 // opt-btn の is-selected を付け替え
  1777.                 var lbl = target.closest('.opt-btn');
  1778.                 if (lbl) {
  1779.                     var sib = lbl.parentNode ? lbl.parentNode.querySelectorAll('.opt-btn') : [];
  1780.                     for (var k = 0; k < sib.length; k++) sib[k].classList.remove('is-selected');
  1781.                     lbl.classList.add('is-selected');
  1782.                 }
  1783.                 // 「カラー: <name>」表示の同期（古い mitsumori_json.pc が残らないように）
  1784.                 var grp = (lbl && lbl.closest('.form-group')) || (target.closest('.form-group'));
  1785.                 if (grp) {
  1786.                     var section = grp.querySelector('.rp-section-label');
  1787.                     if (section) {
  1788.                         var labelHead = section.textContent.split(':')[0].trim();
  1789.                         section.innerHTML = labelHead + ': <span>' + target.value + '</span>';
  1790.                     }
  1791.                 }
  1792.             }
  1793.         })();
  1795.         // option1 / option2 / pw / pd / ph / pm (matrix 軸の radio 群) も同様に
  1796.         // 「どれもチェックされていなければ先頭を選ぶ」を適用する.
  1797.         //   sale_type=2 の窓タイプ等で「初期表示時に一番初めの選択肢が選択されていない」事象を解消.
  1798.         (function autoSelectFirstMatrixAxis(){
  1799.             var axes = [
  1800.                 { name: 'pw',      jsVar: 'pw' },
  1801.                 { name: 'pd',      jsVar: 'pd' },
  1802.                 { name: 'ph',      jsVar: 'ph' },
  1803.                 { name: 'pm',      jsVar: 'pm' },
  1804.                 { name: 'glass_type', jsVar: 'pm' },
  1805.                 { name: 'option1', jsVar: 'option1' },
  1806.                 { name: 'option2', jsVar: 'option2' }
  1807.             ];
  1808.             for (var ai = 0; ai < axes.length; ai++) {
  1809.                 var ax = axes[ai];
  1810.                 var nodes = document.querySelectorAll('input[type="radio"][name="' + ax.name + '"]');
  1811.                 if (nodes.length === 0) continue;
  1812.                 var anyChecked = false;
  1813.                 for (var i = 0; i < nodes.length; i++) {
  1814.                     if (nodes[i].checked) { anyChecked = true; break; }
  1815.                 }
  1816.                 if (anyChecked) continue;
  1818.                 var target = nodes[0];
  1819.                 target.checked = true;
  1820.                 // グローバル JS 変数も埋める
  1821.                 if (ax.jsVar === 'pw') pw = target.value;
  1822.                 else if (ax.jsVar === 'pd') pd = target.value;
  1823.                 else if (ax.jsVar === 'ph') ph = target.value;
  1824.                 else if (ax.jsVar === 'pm') pm = target.value;
  1825.                 else if (ax.jsVar === 'option1') option1 = target.value;
  1826.                 else if (ax.jsVar === 'option2') option2 = target.value;
  1828.                 var lbl = target.closest('.opt-btn');
  1829.                 if (lbl) {
  1830.                     var sib = lbl.parentNode ? lbl.parentNode.querySelectorAll('.opt-btn') : [];
  1831.                     for (var k = 0; k < sib.length; k++) sib[k].classList.remove('is-selected');
  1832.                     lbl.classList.add('is-selected');
  1833.                 }
  1834.                 var grp = (lbl && lbl.closest('.form-group')) || (target.closest('.form-group'));
  1835.                 if (grp) {
  1836.                     var section = grp.querySelector('.rp-section-label');
  1837.                     if (section) {
  1838.                         var labelHead = section.textContent.split(':')[0].trim();
  1839.                         section.innerHTML = labelHead + ': <span>' + target.value + '</span>';
  1840.                     }
  1841.                 }
  1842.             }
  1843.         })();
  1845.         // ページ読み込み時: 見積金額が「合計」になっているため、カート数量は基本1
  1846.         // sale_type=9（商品のみ購入）だけ通常 EC として数量を引き継ぐ
  1847.         (function initQuantityByType(){
  1848.             var saleType = {{ ProductClass.SaleType.id }};
  1849.             if (saleType == 9 && $('#quantity_only').length) {
  1850.                 $('#quantity').val(parseInt($('#quantity_only').val()) || 1);
  1851.             } else {
  1852.                 $('#quantity').val(1);
  1853.                 $('input[name="quantity"]').val(1);
  1854.             }
  1855.         })();
  1857.         // type → ラベルのプレフィックス文字列
  1858.         // option1/option2 のラベルは category 依存 (rd: ランマ/タイプ, sh: サイズプリセット/駆動方式 等).
  1859.         // PHP から渡された option1_label / option2_label を埋め込み、JS 側でラベル更新に使う.
  1860.         var optLabelMap = {pc:'カラー', pw:'幅', pd:'奥行き', ph:'高さ', pm:'素材',
  1861.                            option1: '{{ option1_label|default('オプション1')|e('js') }}',
  1862.                            option2: '{{ option2_label|default('オプション2')|e('js') }}'};
  1863.         // type → input[name]
  1864.         var optNameMap  = {pc:'color', pw:'pw', pd:'pd', ph:'ph', pm:'pm',
  1865.                            option1: 'option1', option2: 'option2'};
  1867.         // opt-btn用: 値を直接受け取るラッパー
  1868.         function mitsumori_simulation_val(type, value) {
  1869.             if (type === 'pc') pc = value;
  1870.             if (type === 'pw') pw = value;
  1871.             if (type === 'pd') pd = value;
  1872.             if (type === 'ph') ph = value;
  1873.             if (type === 'pm') pm = value;
  1874.             if (type === 'option1') option1 = value;
  1875.             if (type === 'option2') option2 = value;
  1877.             // is-selected クラスを同グループ内で付け替え
  1878.             var inputName = optNameMap[type];
  1879.             if (inputName) {
  1880.                 var $btns = $('input[name="' + inputName + '"]').closest('.opt-btn');
  1881.                 $btns.removeClass('is-selected');
  1882.                 $btns.filter(function(){
  1883.                     return $(this).find('input').val() === value;
  1884.                 }).addClass('is-selected');
  1885.             }
  1887.             // ラベル行の選択値テキストを更新（例: 「カラー: ブラック」）
  1888.             var labelPrefix = optLabelMap[type];
  1889.             if (labelPrefix) {
  1890.                 // 対象のrp-section-labelを特定（input[name]を含む親を遡る）
  1891.                 var $group = $('input[name="' + inputName + '"]').first().closest('.form-group');
  1892.                 var $label = $group.find('.rp-section-label');
  1893.                 $label.html(labelPrefix + ': <span>' + value + '</span>');
  1894.             }
  1896.             // simulation本体を呼ぶ（value_idは空でOK、グローバル変数を使う）
  1897.             mitsumori_simulation('', '');
  1898.         }
  1900.         mitsumori_simulation("","");
  1902.         // ボタン群: 親幅を超える、または3行以上になる場合は is-scroll で1行横スクロール化
  1903.         function applyBtnGroupScroll() {
  1904.             $('.rp-btn-group, .opt-btn-group').each(function() {
  1905.                 var $group = $(this);
  1906.                 $group.removeClass('is-scroll');
  1907.                 var $items = $group.children();
  1908.                 if ($items.length === 0) return;
  1910.                 var parentWidth = $group.parent().width() || $group.width();
  1911.                 var totalWidth = 0;
  1912.                 var gap = parseInt($group.css('gap'), 10) || 8;
  1913.                 $items.each(function() {
  1914.                     totalWidth += this.offsetWidth + gap;
  1915.                 });
  1917.                 // 単一ボタンが親幅を超える、もしくは合計幅が親幅を超える → 横スクロール化
  1918.                 var anyTooWide = false;
  1919.                 $items.each(function() {
  1920.                     if (this.offsetWidth > parentWidth) { anyTooWide = true; return false; }
  1921.                 });
  1923.                 // 折り返し時の行数も計測
  1924.                 var tops = {};
  1925.                 $items.each(function() { tops[this.offsetTop] = true; });
  1926.                 var rowCount = Object.keys(tops).length;
  1928.                 if (anyTooWide || totalWidth > parentWidth * 2 || rowCount >= 3) {
  1929.                     $group.addClass('is-scroll');
  1930.                 }
  1931.             });
  1932.         }
  1933.         applyBtnGroupScroll();
  1934.         $(window).on('resize', function() {
  1935.             clearTimeout(window._btnScrollTimer);
  1936.             window._btnScrollTimer = setTimeout(applyBtnGroupScroll, 150);
  1937.         });
  1939.         // onload: 見積金額が確定している場合は「工事費込み価格」表示を一致させる
  1940.         (function syncPrice02Display() {
  1941.             var goukeiEl = document.getElementById('mitsumori_goukei');
  1942.             var displayEl = document.getElementById('price02-display');
  1943.             if (!goukeiEl || !displayEl) return;
  1944.             var goukeiText = goukeiEl.textContent.trim();
  1945.             // ---円（未確定）の場合は書き換えない
  1946.             if (goukeiText && goukeiText !== '---円') {
  1947.                 displayEl.textContent = goukeiText;
  1948.             }
  1949.             // 以降の変更にも追従: mitsumori_goukei を監視
  1950.             new MutationObserver(function() {
  1951.                 var text = goukeiEl.textContent.trim();
  1952.                 if (text && text !== '---円') {
  1953.                     displayEl.textContent = text;
  1954.                 }
  1955.             }).observe(goukeiEl, { childList: true, subtree: true, characterData: true });
  1956.         })();
  1957.         function contact_form(product_id){
  1958.             $('#form1').attr('action', '{{ url('contact', {product:Product.id}) }}');
  1959.             $('#form1').submit();
  1960.         }
  1962.         // maisu / madoset は下部の新しい関数定義を使用
  1965.         function heibei(bei){
  1966.             $('#heibei').val(parseInt($('#heibei').val()) + bei);
  1967.             if(parseInt($('#heibei').val()) < 1){ $('#heibei').val(1); }
  1968.             if(parseInt($('#heibei').val()) > 100){ $('#heibei').val(100); }
  1969.             // goukei に既に枚数を含むため、カート数量は1で固定
  1970.             $('#quantity').val(1);
  1971.             mitsumori_simulation('heibei','heibei');
  1972.         }
  1973.         function daisu(dai){
  1974.             $('#daisu').val(parseInt($('#daisu').val()) + dai);
  1975.             if(parseInt($('#daisu').val()) < 1){ $('#daisu').val(1); }
  1976.             if(parseInt($('#daisu').val()) > 10){ $('#daisu').val(10); }
  1977.             $('#quantity').val(1);
  1978.             mitsumori_simulation('daisu','daisu');
  1979.         }
  1980.         // sale_type=7（数量買い・基本工事費固定）用：個数入力
  1981.         function suuryou(n){
  1982.             $('#suuryou').val(parseInt($('#suuryou').val()) + n);
  1983.             if(parseInt($('#suuryou').val()) < 1){ $('#suuryou').val(1); }
  1984.             if(parseInt($('#suuryou').val()) > 100){ $('#suuryou').val(100); }
  1985.             $('#quantity').val(1);
  1986.             mitsumori_simulation('suuryou','suuryou');
  1987.         }
  1988.         function maisu(mai){
  1989.             $('#maisu').val(parseInt($('#maisu').val()) + mai);
  1990.             // sale_type=4 (フェンス) は3枚未満不可、6 (芝生) は1枚から
  1991.             var minMai = (SALE_TYPE_ID == 4) ? 3 : 1;
  1992.             if(parseInt($('#maisu').val()) < minMai){ $('#maisu').val(minMai); }
  1993.             if(parseInt($('#maisu').val()) > 100){ $('#maisu').val(100); }
  1994.             $('#quantity').val(1);
  1995.             mitsumori_simulation('maisu','maisu');
  1996.         }
  1998.         // タイプ2: セット数プルダウン連動
  1999.         function madosetSelect(val){
  2000.             var v = parseInt(val);
  2001.             if(v < 1) v = 1;
  2002.             if(v > 20) v = 20;
  2003.             $('#set_count').val(v);
  2004.             $('#quantity').val(1);
  2005.             $('input[name="quantity"]').val(1);
  2006.             mitsumori_simulation('set','set_count');
  2007.         }
  2008.         // タイプ2: ±ボタン版（後方互換）
  2009.         function madoset(mai){
  2010.             var current = parseInt($('#set_count').val()) || 1;
  2011.             var next = current + mai;
  2012.             if(next < 1) next = 1;
  2013.             if(next > 20) next = 20;
  2014.             $('#set_count').val(next);
  2015.             madosetSelect(next);
  2016.         }
  2018.         // タイプ5: ステップ・フェンス選択値を mitsumori_json に保存するためのグローバル変数
  2019.         var deck_step = "{% if mitsumori_json and mitsumori_json.deck_step is defined %}{{ mitsumori_json.deck_step|default('不要') }}{% else %}不要{% endif %}";
  2020.         var deck_fence = "{% if mitsumori_json and mitsumori_json.deck_fence is defined %}{{ mitsumori_json.deck_fence|default('不要') }}{% else %}不要{% endif %}";
  2022.         // PDF出力: モーダルの mitsumori_json をフォームに同期してから送信
  2023.         function syncPdfJson(){
  2024.             var jsonVal = $('#mitsumori_json').val();
  2025.             $('#pdf_mitsumori_json').val(jsonVal);
  2026.         }
  2028.         // タイプ9: 商品のみ購入
  2029.         function quantityOnly(val){
  2030.             var current = parseInt($('#quantity_only').val()) || 1;
  2031.             var next = current + val;
  2032.             if(next < 1) next = 1;
  2033.             $('#quantity_only').val(next);
  2034.             $('#quantity').val(next);
  2035.         }
  2037.         // ===== スマホ用下部固定バーへの金額同期 =====
  2038.         // mitsumori_message と mitsumori_goukei を監視して下部バーを更新
  2039.         (function() {
  2040.             var msgTarget   = document.getElementById('mitsumori_message');
  2041.             var goukeiTarget = document.getElementById('mitsumori_goukei');
  2042.             var spPrice     = document.getElementById('sp-mitsumori-price');
  2043.             var spBtn       = document.querySelector('#sp-mitsumori-bar .sp-bar__btn');
  2044.             if (!spPrice || !spBtn) return;
  2046.             function syncBar() {
  2047.                 var msg    = msgTarget ? msgTarget.textContent : '';
  2048.                 var goukei = goukeiTarget ? goukeiTarget.textContent : '---円';
  2050.                 // メッセージが「〇〇を選択してください」の場合はメッセージを表示しボタンを非表示
  2051.                 if (msg.indexOf('選択してください') !== -1) {
  2052.                     spPrice.textContent = msg;
  2053.                     spPrice.style.fontSize = '13px';
  2054.                     spPrice.style.color    = '#888';
  2055.                     spBtn.style.display    = 'none';
  2056.                 } else {
  2057.                     // 価格確定時はボタンを表示
  2058.                     spPrice.textContent = goukei;
  2059.                     spPrice.style.fontSize = '18px';
  2060.                     spPrice.style.color    = '#c00';
  2061.                     spBtn.style.display    = 'block';
  2062.                 }
  2063.             }
  2065.             // 初期値を同期
  2066.             syncBar();
  2068.             // mitsumori_message の変化を監視
  2069.             if (msgTarget) {
  2070.                 new MutationObserver(syncBar).observe(
  2071.                     msgTarget, { childList: true, subtree: true, characterData: true }
  2072.                 );
  2073.             }
  2074.             // mitsumori_goukei の変化も監視
  2075.             if (goukeiTarget) {
  2076.                 new MutationObserver(syncBar).observe(
  2077.                     goukeiTarget, { childList: true, subtree: true, characterData: true }
  2078.                 );
  2079.             }
  2080.         })();
  2082.         // ===== 現在のお見積り額: 折りたたみトグルボタンのテキスト切り替え =====
  2083.         (function() {
  2084.             var card = document.querySelector('.mitsumori-card-pc');
  2085.             var btn  = document.querySelector('.btn-mitsumori-toggle .toggle-icon');
  2086.             if (!card || !btn) return;
  2087.             // MutationObserverでcollapsed-cardクラスの変化を監視
  2088.             new MutationObserver(function() {
  2089.                 if (card.classList.contains('collapsed-card')) {
  2090.                     btn.textContent = '▼ 詳細';
  2091.                 } else {
  2092.                     btn.textContent = '▲ 閉じる';
  2093.                 }
  2094.             }).observe(card, { attributes: true, attributeFilter: ['class'] });
  2095.         })();
  2097.         // ===== エリア案内: スマホのみタップで展開 =====
  2098.         (function() {
  2099.             var notice = document.querySelector('.ec-areaNotice');
  2100.             if (!notice) return;
  2101.             notice.addEventListener('click', function(e) {
  2102.                 if (window.innerWidth > 767) return;
  2103.                 // リンククリック時は展開/折りたたみせずリンク遷移
  2104.                 if (e.target.tagName === 'A') return;
  2105.                 notice.classList.toggle('is-open');
  2106.             });
  2107.         })();
  2109.     </script>
  2110.     <script type="application/ld+json">
  2111.     {
  2112.         "@context": "https://schema.org/",
  2113.         "@type": "Product",
  2114.         "name": "{{ Product.name }}",
  2115.         "image": [
  2116.             {% for img in Product.ProductImage %}
  2117.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  2119.             {% else %}
  2120.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  2121.             {% endfor %}
  2122.         ],
  2123.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  2124.         {% if Product.code_min %}
  2125.         "sku": "{{ Product.code_min }}",
  2126.         {% endif %}
  2127.         "offers": {
  2128.             "@type": "Offer",
  2129.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  2130.             "priceCurrency": "{{ eccube_config.currency }}",
  2131.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  2132.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  2133.         }
  2134.     }
  2135.     </script>
  2137. {% endblock %}
  2139. {% block main %}
  2140.     {# option1 / option2 ラベルをカテゴリ別に決定 (sh=31, rd=43, mo=15) - block scope のため main 側でも再定義 #}
  2141.     {% set option1_label = 'オプション1' %}
  2142.     {% set option2_label = 'オプション2' %}
  2143.     {% if Product.ProductCategories is not empty %}
  2144.         {% for pcat in Product.ProductCategories %}
  2145.             {% if pcat.category_id == 31 %}{% set option1_label = 'サイズプリセット' %}{% set option2_label = '駆動方式' %}{% endif %}
  2146.             {% if pcat.category_id == 43 %}{% set option1_label = 'ランマ' %}{% set option2_label = 'タイプ' %}{% endif %}
  2147.             {% if pcat.category_id == 15 %}{% set option1_label = '棚タイプ' %}{% endif %}
  2148.             {% if pcat.category_id == 17 %}{% set option1_label = '窓タイプ' %}{% endif %}
  2149.         {% endfor %}
  2150.     {% endif %}
  2151.     <div class="ec-productRole" style="margin-top:20px;">
  2152.         <div class="ec-grid2">
  2153.             <div class="ec-grid2__cell">
  2154.                 <div class="ec-sliderItemRole">
  2155.                     {# 商品名 + ブランド名 + SNSシェア #}
  2156.                     <div class="ec-productRole__title">
  2157.                         <div class="ec-productRole__titleRow">
  2158.                             <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  2159.                             <div class="ec-share-inline">
  2160.                                 <a href="https://twitter.com/share?url={{ app.request.uri|url_encode }}&text={{ Product.name|url_encode }}"
  2161.                                    class="share-twitter" target="_blank" rel="noreferrer noopener" title="Xでシェア">
  2162.                                     <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>
  2163.                                 </a>
  2164.                                 <a href="https://www.instagram.com/" class="share-facebook" target="_blank" rel="noreferrer noopener" title="Instagram">
  2165.                                     <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>
  2166.                                 </a>
  2167.                                 <a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri|url_encode }}"
  2168.                                    class="share-line" target="_blank" rel="noreferrer noopener" title="LINEでシェア">
  2169.                                     <i class="fab fa-line"></i>
  2170.                                 </a>
  2171.                             </div>
  2172.                         </div>
  2173.                     </div>
  2174.                     {% if BaseInfo.option_favorite_product %}
  2175.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  2176.                         {% if is_favorite == false %}
  2177.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  2178.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  2179.                         </form>
  2180.                         {% else %}
  2181.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  2182.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  2183.                         </form>
  2184.                         {% endif %}
  2185.                      </div>
  2186.                     {% endif %}
  2187.                     <div class="item_visual">
  2188.                         {% for ProductImage in Product.ProductImage %}
  2189.                             <div class="slide-item">
  2190.                                 <a class="js-zoom" href="{{ asset(ProductImage, 'save_image') }}" aria-label="{{ loop.first ? Product.name : '' }}">
  2191.                                     <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 %}>
  2192.                                 </a>
  2193.                             </div>
  2194.                         {% else %}
  2195.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ Product.name }}" width="550" height="550" style="max-height: 400px;"></div>
  2196.                         {% endfor %}
  2197.                     </div>
  2198.                     <div class="item_nav">
  2199.                         {% for ProductImage in Product.ProductImage %}
  2200.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  2201.                         {% endfor %}
  2202.                     </div>
  2204.                 </div>
  2206.                     {# ===== 施工エリア案内（見積シミュレーションの下）===== #}
  2207.                     <div class="ec-areaNotice" style="margin-top:16px;margin-right:10px;">
  2208.                         <div class="ec-areaNotice__inner">
  2209.                             <div class="ec-areaNotice__icon">📍</div>
  2210.                             <div class="ec-areaNotice__body">
  2211.                                 <p class="ec-areaNotice__title">施工対応エリアについて</p>
  2212.                                 <div class="ec-areaNotice__detail">
  2213.                                     <p class="ec-areaNotice__text">
  2214.                                         当店の施工サービスは、<strong>山梨県全域</strong>および<br>
  2215.                                         <strong>諏訪エリア（諏訪市・岡谷市・茅野市・諏訪郡）</strong>を対象としております。<br>
  2216.                                         上記エリア外のお客様には、商品のみのご購入が可能でございます。<br>
  2217.                                         ご不明な点がございましたら、お気軽にお問い合わせください。
  2218.                                     </p>
  2219.                                     <a class="ec-areaNotice__link" href="{{ url('contact') }}">エリア外のお客様・ご相談はこちら →</a>
  2220.                                 </div>
  2221.                             </div>
  2222.                         </div>
  2223.                     </div>
  2225.             </div>
  2227.             <div class="ec-grid2__cell2">
  2228.                 <div class="ec-productRole__profile" >
  2229.                     {# 関連カテゴリ (DIY=21 / 石材=28 / 照明=44 は非表示要件のため除外) #}
  2230.                     {% set hidden_cat_ids = [21, 28, 44] %}
  2231.                     {% if Product.ProductCategories is not empty %}
  2232.                         <div class="ec-productRole__category" style="padding:10px 0;">
  2233.                             {% for ProductCategory in Product.ProductCategories %}
  2234.                                 {% if ProductCategory.Category.id not in hidden_cat_ids %}
  2235.                                 <ul>
  2236.                                     <li>
  2237.                                         {% for Category in ProductCategory.Category.path %}
  2238.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  2239.                                             <span>＞</span>{% endif -%}
  2240.                                         {% endfor %}
  2241.                                     </li>
  2242.                                 </ul>
  2243.                                 {% endif %}
  2244.                             {% endfor %}
  2245.                         </div>
  2246.                     {% endif %}
  2247.                     {# 販売価格 #}
  2248.                     <div class="ec-productRole__price">
  2249.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  2250.                         {% if Product.hasProductClass -%}
  2251.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  2252.                                 <div class="ec-price">
  2253.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  2254.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  2255.                                 </div>
  2256.                             {% else %}
  2257.                                 <div class="ec-price">
  2258.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  2259.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  2260.                                 </div>
  2261.                             {% endif %}
  2262.                         {% else %}
  2263.                             <div class="ec-price">
  2264.                                 <span id="price02-display" class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  2265.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  2266.                             </div>
  2267.                         {% endif %}
  2268.                     </div>
  2269.                     {# タグ #}
  2270.                     <ul class="ec-productRole__tags">
  2271.                         {% for Tag in Product.Tags %}
  2272.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  2273.                         {% endfor %}
  2274.                     </ul>
  2275.                     {# 商品コード #}
  2276.                     {% if Product.code_min is not empty %}
  2277.                         <div class="ec-productRole__code">
  2278.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  2279.                         </div>
  2280.                     {% endif %}
  2282.                     <div class="ec-productRole__description">
  2283.                         <div class="ec-rectHeading">
  2284.                             <h4>製品情報</h4>
  2285.                         </div>
  2286.                         {{ Product.sales_infomation|raw|nl2br }}
  2287.                     </div>
  2290.                     <div class="card card-danger" style="clear:both;margin:1px;">
  2291.                       <div class="card-header">
  2292.                         <h3 class="card-title">見積シミュレーション</h3>
  2293.                       </div>
  2294.                       <div class="card-body p-2">
  2295.                         {% set related_image = getProduct_field(Product.id,"related_image") %}
  2296.                         {# related_image は配列: ["1段目画像あり","2段目画像あり","3段目画像あり"] のうち該当するものが格納 #}
  2297.                         {% set img1 = related_image and ("1段目画像あり" in related_image) %}
  2298.                         {% set img2 = related_image and ("2段目画像あり" in related_image) %}
  2299.                         {% set img3 = related_image and ("3段目画像あり" in related_image) %}
  2300.                         {% set img4 = related_image and ("4段目画像あり" in related_image) %}
  2301.                         {% set type1 = getProduct_field(Product.id,"related_name1") %}
  2302.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  2303.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  2304.                         {% set type4 = getProduct_field(Product.id,"related_name4") %}
  2305.                         {% set hasRelated = (type1 and related_product1 and related_product1|length)
  2306.                                          or (type2 and related_product2 and related_product2|length)
  2307.                                          or (type3 and related_product3 and related_product3|length)
  2308.                                          or (type4 and related_product4 and related_product4|length) %}
  2309.                         {% if hasRelated %}
  2310.                             <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  2311.                         {% endif %}
  2313.                         {# ===== 1段目 ===== #}
  2314.                         {% if type1 and related_product1 and related_product1|length %}
  2315.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2316.                           <div class="rp-section-label">{{ type1 }}{% if img1 and base_select1 %}: <span>{{ base_select1 }}</span>{% endif %}</div>
  2317.                           {% if img1 %}
  2318.                             {# --- 画像付きカード --- #}
  2319.                             <div class="rp-card-group">
  2320.                               {% for rp_id, rp_name in related_product1 %}
  2321.                                 <label class="rp-card{% if base_select1 == rp_name %} is-selected{% endif %}"
  2322.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2323.                                   <input type="radio" name="rp1" value="{{ rp_name }}"
  2324.                                          {% if base_select1 == rp_name %}checked{% endif %}>
  2325.                                   <img class="rp-card__image"
  2326.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  2327.                                        alt="{{ rp_name }}"
  2328.                                        width="120" height="120" loading="lazy"
  2329.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  2330.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  2331.                                   <span class="rp-card__name">{{ rp_name }}</span>
  2332.                                 </label>
  2333.                               {% endfor %}
  2334.                             </div>
  2335.                           {% else %}
  2336.                             {# --- ボタン式ラジオ --- #}
  2337.                             <div class="rp-btn-group">
  2338.                               {% for rp_id, rp_name in related_product1 %}
  2339.                                 <label class="rp-btn{% if base_select1 == rp_name %} is-selected{% endif %}"
  2340.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2341.                                   <input type="radio" name="rp1" value="{{ rp_name }}"
  2342.                                          {% if base_select1 == rp_name %}checked{% endif %}>
  2343.                                   {{ rp_name }}
  2344.                                 </label>
  2345.                               {% endfor %}
  2346.                             </div>
  2347.                           {% endif %}
  2348.                         </div>
  2349.                         {% endif %}
  2351.                         {# ===== 2段目 ===== #}
  2352.                         {% if type2 and related_product2 and related_product2|length %}
  2353.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2354.                           <div class="rp-section-label">{{ type2 }}{% if img2 and base_select2 %}: <span>{{ base_select2 }}</span>{% endif %}</div>
  2355.                           {% if img2 %}
  2356.                             <div class="rp-card-group">
  2357.                               {% for rp_id, rp_name in related_product2 %}
  2358.                                 <label class="rp-card{% if base_select2 == rp_name %} is-selected{% endif %}"
  2359.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2360.                                   <input type="radio" name="rp2" value="{{ rp_name }}"
  2361.                                          {% if base_select2 == rp_name %}checked{% endif %}>
  2362.                                   <img class="rp-card__image"
  2363.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  2364.                                        alt="{{ rp_name }}"
  2365.                                        width="120" height="120" loading="lazy"
  2366.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  2367.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  2368.                                   <span class="rp-card__name">{{ rp_name }}</span>
  2369.                                 </label>
  2370.                               {% endfor %}
  2371.                             </div>
  2372.                           {% else %}
  2373.                             <div class="rp-btn-group">
  2374.                               {% for rp_id, rp_name in related_product2 %}
  2375.                                 <label class="rp-btn{% if base_select2 == rp_name %} is-selected{% endif %}"
  2376.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2377.                                   <input type="radio" name="rp2" value="{{ rp_name }}"
  2378.                                          {% if base_select2 == rp_name %}checked{% endif %}>
  2379.                                   {{ rp_name }}
  2380.                                 </label>
  2381.                               {% endfor %}
  2382.                             </div>
  2383.                           {% endif %}
  2384.                         </div>
  2385.                         {% endif %}
  2387.                         {# ===== 3段目 ===== #}
  2388.                         {% if type3 and related_product3 and related_product3|length %}
  2389.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2390.                           <div class="rp-section-label">{{ type3 }}{% if img3 and base_select3 %}: <span>{{ base_select3 }}</span>{% endif %}</div>
  2391.                           {% if img3 %}
  2392.                             <div class="rp-card-group">
  2393.                               {% for rp_id, rp_name in related_product3 %}
  2394.                                 <label class="rp-card{% if base_select3 == rp_name %} is-selected{% endif %}"
  2395.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2396.                                   <input type="radio" name="rp3" value="{{ rp_name }}"
  2397.                                          {% if base_select3 == rp_name %}checked{% endif %}>
  2398.                                   <img class="rp-card__image"
  2399.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  2400.                                        alt="{{ rp_name }}"
  2401.                                        width="120" height="120" loading="lazy"
  2402.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  2403.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  2404.                                   <span class="rp-card__name">{{ rp_name }}</span>
  2405.                                 </label>
  2406.                               {% endfor %}
  2407.                             </div>
  2408.                           {% else %}
  2409.                             <div class="rp-btn-group">
  2410.                               {% for rp_id, rp_name in related_product3 %}
  2411.                                 <label class="rp-btn{% if base_select3 == rp_name %} is-selected{% endif %}"
  2412.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2413.                                   <input type="radio" name="rp3" value="{{ rp_name }}"
  2414.                                          {% if base_select3 == rp_name %}checked{% endif %}>
  2415.                                   {{ rp_name }}
  2416.                                 </label>
  2417.                               {% endfor %}
  2418.                             </div>
  2419.                           {% endif %}
  2420.                         </div>
  2421.                         {% endif %}
  2423.                         {# ===== 4段目 ===== #}
  2424.                         {% if type4 and related_product4 and related_product4|length %}
  2425.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2426.                           <div class="rp-section-label">{{ type4 }}{% if img4 and base_select4 %}: <span>{{ base_select4 }}</span>{% endif %}</div>
  2427.                           {% if img4 %}
  2428.                             {# --- 画像付きカード --- #}
  2429.                             <div class="rp-card-group">
  2430.                               {% for rp_id, rp_name in related_product4 %}
  2431.                                 <label class="rp-card{% if base_select4 == rp_name %} is-selected{% endif %}"
  2432.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2433.                                   <input type="radio" name="rp4" value="{{ rp_name }}"
  2434.                                          {% if base_select4 == rp_name %}checked{% endif %}>
  2435.                                   <img class="rp-card__image"
  2436.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  2437.                                        alt="{{ rp_name }}" width="120" height="120" loading="lazy">
  2438.                                   <span class="rp-card__label">{{ rp_name }}</span>
  2439.                                 </label>
  2440.                               {% endfor %}
  2441.                             </div>
  2442.                           {% else %}
  2443.                             {# --- ボタン式ラジオ --- #}
  2444.                             <div class="rp-btn-group">
  2445.                               {% for rp_id, rp_name in related_product4 %}
  2446.                                 <label class="rp-btn{% if base_select4 == rp_name %} is-selected{% endif %}"
  2447.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  2448.                                   <input type="radio" name="rp4" value="{{ rp_name }}"
  2449.                                          {% if base_select4 == rp_name %}checked{% endif %}>
  2450.                                   {{ rp_name }}
  2451.                                 </label>
  2452.                               {% endfor %}
  2453.                             </div>
  2454.                           {% endif %}
  2455.                         </div>
  2456.                         {% endif %}
  2459.                         {# ガレージ等で全オプション空のときに見出しのみ表示される事象を回避.
  2460.                            色 / 寸法 / 素材 / option1/2 / op_data いずれかに「描画される」要素がある場合のみ
  2461.                            「この商品のオプションを選択してください。」見出しを表示する.
  2463.                            op_data は cg=9 で「残土」 / gs=27 で「撤去」「残土」を後段ループで
  2464.                            hide するため、単純な op|length > 0 では「見出しだけ残る」事象が
  2465.                            wh / cg の一部商品で発生していた. 描画される entry を事前カウントする. #}
  2466.                         {% set is_gs_h = false %}
  2467.                         {% set is_cg_h = false %}
  2468.                         {% if Product.ProductCategories is not empty %}
  2469.                             {% for pc_h in Product.ProductCategories %}
  2470.                                 {% if pc_h.category_id == 27 %}{% set is_gs_h = true %}{% endif %}
  2471.                                 {% if pc_h.category_id == 9  %}{% set is_cg_h = true %}{% endif %}
  2472.                             {% endfor %}
  2473.                         {% endif %}
  2474.                         {% set visible_op_count = 0 %}
  2475.                         {% if op and op|length %}
  2476.                             {% for opi in op %}
  2477.                                 {% if opi['name'] %}
  2478.                                     {% set _hide_h = false %}
  2479.                                     {% if is_gs_h and (opi['name'] matches '/撤去/' or opi['name'] matches '/残土/') %}{% set _hide_h = true %}{% endif %}
  2480.                                     {% if is_cg_h and opi['name'] matches '/残土/' %}{% set _hide_h = true %}{% endif %}
  2481.                                     {% if not _hide_h %}{% set visible_op_count = visible_op_count + 1 %}{% endif %}
  2482.                                 {% endif %}
  2483.                             {% endfor %}
  2484.                         {% endif %}
  2485.                         {% set has_any_option =
  2486.                             (color and color|length and ProductClass.SaleType.id != 3)
  2487.                             or (p_w and p_w|length and p_w|join != "")
  2488.                             or (p_d and p_d|length and p_d|join != "")
  2489.                             or (p_h and p_h|length and p_h|join != "")
  2490.                             or (p_m and p_m|length and p_m|join != "")
  2491.                             or (p_option1 and p_option1|length and p_option1|join != "")
  2492.                             or (p_option2 and p_option2|length and p_option2|join != "")
  2493.                             or visible_op_count > 0
  2494.                             or ProductClass.SaleType.id in [2, 5, 6, 7, 9]
  2495.                         %}
  2496.                         {% if has_any_option %}
  2497.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のオプションを選択してください。</label></div>
  2498.                         {% endif %}
  2500.                         {% if color and color|length and ProductClass.SaleType.id != 3 %}
  2501.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2502.                           <div class="rp-section-label">カラー{% if mitsumori_json and mitsumori_json.pc %}: <span>{{ mitsumori_json.pc }}</span>{% endif %}</div>
  2503.                           <div class="opt-btn-group">
  2504.                             {% set idx = 0 %}
  2505.                             {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  2506.                               {% set has_img = cc['img'] is defined and cc['img'] is not empty %}
  2507.                               <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 %}"
  2508.                                      onclick="mitsumori_simulation_val('pc', '{{ cc['name']|e('js') }}');">
  2509.                                 <input type="radio" name="color" id="cc_{{ idx }}" value="{{ cc['name'] }}"
  2510.                                        {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}>
  2511.                                 {% if has_img %}
  2512.                                   <img src="{{ cc['img'] }}" alt="{{ cc['name'] }}" class="opt-btn__img"
  2513.                                        onerror="this.parentNode.classList.remove('opt-btn--with-image'); this.remove();">
  2514.                                   <span class="opt-btn__name">{{ cc['name'] }}</span>
  2515.                                 {% else %}
  2516.                                   {{ cc['name'] }}
  2517.                                 {% endif %}
  2518.                               </label>
  2519.                             {% endif %}{% endfor %}
  2520.                           </div>
  2521.                         </div>
  2522.                         {% endif %}
  2524.                         {% if p_w and p_w|length and p_w|join != "" and ProductClass.SaleType.id != 3 %}
  2525.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2526.                           <div class="rp-section-label">幅{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  2527.                           <div class="opt-btn-group">
  2528.                             {% set idx = 0 %}
  2529.                             {% for pw in p_w %}{% if pw %}{% set idx = idx + 1 %}
  2530.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %} is-selected{% endif %}"
  2531.                                      onclick="mitsumori_simulation_val('pw', '{{ pw|e('js') }}');">
  2532.                                 <input type="radio" name="pw" id="pw_{{ idx }}" value="{{ pw }}"
  2533.                                        {% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %}checked{% endif %}>
  2534.                                 {{ pw }}
  2535.                               </label>
  2536.                             {% endif %}{% endfor %}
  2537.                           </div>
  2538.                         </div>
  2539.                         {% endif %}
  2541.                         {% if p_d and p_d|length and p_d|join != "" and ProductClass.SaleType.id != 3 %}
  2542.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2543.                           <div class="rp-section-label">奥行き{% if mitsumori_json and mitsumori_json.pd %}: <span>{{ mitsumori_json.pd }}</span>{% endif %}</div>
  2544.                           <div class="opt-btn-group">
  2545.                             {% set idx = 0 %}
  2546.                             {% for pd in p_d %}{% if pd %}{% set idx = idx + 1 %}
  2547.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %} is-selected{% endif %}"
  2548.                                      onclick="mitsumori_simulation_val('pd', '{{ pd|e('js') }}');">
  2549.                                 <input type="radio" name="pd" id="pd_{{ idx }}" value="{{ pd }}"
  2550.                                        {% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %}checked{% endif %}>
  2551.                                 {{ pd }}
  2552.                               </label>
  2553.                             {% endif %}{% endfor %}
  2554.                           </div>
  2555.                         </div>
  2556.                         {% endif %}
  2558.                         {% if p_h and p_h|length and p_h|join != "" and ProductClass.SaleType.id != 3 %}
  2559.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2560.                           <div class="rp-section-label">高さ{% if mitsumori_json and mitsumori_json.ph %}: <span>{{ mitsumori_json.ph }}</span>{% endif %}</div>
  2561.                           <div class="opt-btn-group">
  2562.                             {% set idx = 0 %}
  2563.                             {% for ph in p_h %}{% if ph %}{% set idx = idx + 1 %}
  2564.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %} is-selected{% endif %}"
  2565.                                      onclick="mitsumori_simulation_val('ph', '{{ ph|e('js') }}');">
  2566.                                 <input type="radio" name="ph" id="ph_{{ idx }}" value="{{ ph }}"
  2567.                                        {% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %}checked{% endif %}>
  2568.                                 {{ ph }}
  2569.                               </label>
  2570.                             {% endif %}{% endfor %}
  2571.                           </div>
  2572.                         </div>
  2573.                         {% endif %}
  2575.                         {% if p_m and p_m|length and p_m|join != "" and ProductClass.SaleType.id != 3 %}
  2576.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2577.                           <div class="rp-section-label">素材{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  2578.                           <div class="opt-btn-group">
  2579.                             {% set idx = 0 %}
  2580.                             {% for pm in p_m %}{% if pm %}{% set idx = idx + 1 %}
  2581.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %} is-selected{% endif %}"
  2582.                                      onclick="mitsumori_simulation_val('pm', '{{ pm|e('js') }}');">
  2583.                                 <input type="radio" name="pm" id="pm_{{ idx }}" value="{{ pm }}"
  2584.                                        {% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %}checked{% endif %}>
  2585.                                 {{ pm }}
  2586.                               </label>
  2587.                             {% endif %}{% endfor %}
  2588.                           </div>
  2589.                         </div>
  2590.                         {% endif %}
  2592.                         {# option1 (sale_type 2 は専用 UI が下にあるため除外 / sale_type 3 は下部ブロックで描画 /
  2593.                            sale_type 4 = fe・ts は option1 が ct_unit_price (枚数増分の工事費単価) で
  2594.                            ユーザー選択肢ではなく計算用の内部値のため radio として表示しない. 値は
  2595.                            上の auto-init (p_option1|length == 1) で JS の option1 変数に埋め込み済み) #}
  2596.                         {% 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 %}
  2597.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2598.                           <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>
  2599.                           <div class="opt-btn-group">
  2600.                             {% set idx = 0 %}
  2601.                             {% for opt1 in p_option1 %}{% if opt1 %}{% set idx = idx + 1 %}
  2602.                               <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 %}"
  2603.                                      onclick="mitsumori_simulation_val('option1', '{{ opt1|e('js') }}');">
  2604.                                 <input type="radio" name="option1" id="option1_{{ idx }}" value="{{ opt1 }}"
  2605.                                        {% if (mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 == opt1) or p_option1|length == 1 %}checked{% endif %}>
  2606.                                 {{ opt1 }}
  2607.                               </label>
  2608.                             {% endif %}{% endfor %}
  2609.                           </div>
  2610.                         </div>
  2611.                         {% endif %}
  2613.                         {# option2 #}
  2614.                         {% if p_option2 and p_option2|length and p_option2|join != "" and ProductClass.SaleType.id != 2 and ProductClass.SaleType.id != 3 %}
  2615.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2616.                           <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>
  2617.                           <div class="opt-btn-group">
  2618.                             {% set idx = 0 %}
  2619.                             {% for opt2 in p_option2 %}{% if opt2 %}{% set idx = idx + 1 %}
  2620.                               <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 %}"
  2621.                                      onclick="mitsumori_simulation_val('option2', '{{ opt2|e('js') }}');">
  2622.                                 <input type="radio" name="option2" id="option2_{{ idx }}" value="{{ opt2 }}"
  2623.                                        {% if (mitsumori_json and mitsumori_json.option2 is defined and mitsumori_json.option2 == opt2) or p_option2|length == 1 %}checked{% endif %}>
  2624.                                 {{ opt2 }}
  2625.                               </label>
  2626.                             {% endif %}{% endfor %}
  2627.                           </div>
  2628.                         </div>
  2629.                         {% endif %}
  2631.                         <!-- 1: 施工見積（通常） → 幅/奥行/高さ/素材/カラーは上部の共通ブロックで表示済み -->
  2632.                         {% if ProductClass.SaleType.id == 1 %}
  2633.                         {% endif %}
  2635.                         <!-- 2: 施工見積（補助金・窓） -->
  2636.                         {% if ProductClass.SaleType.id == 2 %}
  2638.                             {# 窓サイズは右パネルの p_w / p_h ラジオ
  2639.                                (「100cm まで」「150cm まで」…) で選択する仕様.
  2640.                                旧 mado_w / mado_h の自由入力欄は廃止. #}
  2642.                             {# 窓タイプ (option1 = subtype: 引違い 2 枚建 / 4 枚建 / FIX 窓 等) #}
  2643.                             {% if p_option1 and p_option1|length and p_option1|join != "" %}
  2644.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2645.                               <div class="rp-section-label">窓タイプ{% if mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 %}: <span>{{ mitsumori_json.option1 }}</span>{% endif %}</div>
  2646.                               <div class="opt-btn-group">
  2647.                                 {% set idx = 0 %}
  2648.                                 {% for opt1_val in p_option1 %}{% if opt1_val %}{% set idx = idx + 1 %}
  2649.                                   <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 %}"
  2650.                                          onclick="mitsumori_simulation('option1','option1_{{ idx }}');">
  2651.                                     <input type="radio" name="option1" id="option1_{{ idx }}" value="{{ opt1_val }}"
  2652.                                            {% if (mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 == opt1_val) or (p_option1|length == 1) %}checked{% endif %}>
  2653.                                     {{ opt1_val }}
  2654.                                   </label>
  2655.                                 {% endif %}{% endfor %}
  2656.                               </div>
  2657.                             </div>
  2658.                             {% endif %}
  2660.                             {# ガラスタイプ（p_m データから選択肢を生成） #}
  2661.                             {% if p_m and p_m|length and p_m|join != "" %}
  2662.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2663.                               <div class="rp-section-label">ガラスタイプ{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  2664.                               <div class="opt-btn-group">
  2665.                                 {% set idx = 0 %}
  2666.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  2667.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm_val) or (p_m|length == 1) %} is-selected{% endif %}"
  2668.                                          onclick="mitsumori_simulation('pm','glass_type_{{ idx }}');">
  2669.                                     <input type="radio" name="glass_type" id="glass_type_{{ idx }}" value="{{ pm_val }}"
  2670.                                            {% if (mitsumori_json and mitsumori_json.pm == pm_val) or (p_m|length == 1) %}checked{% endif %}>
  2671.                                     {{ pm_val }}
  2672.                                   </label>
  2673.                                 {% endif %}{% endfor %}
  2674.                               </div>
  2675.                             </div>
  2676.                             {% endif %}
  2678.                             {# 2026-05 仕様簡素化: 「セット数」入力欄は廃止.
  2679.                                枚数は subtype (引違い 2 枚建 / 4 枚建 等) に内包し、
  2680.                                複数セットはカート quantity で表現する. #}
  2682.                         {% endif %}
  2684.                         <!-- 3: 施工見積（物置・ゴミステーション） -->
  2685.                         {% if ProductClass.SaleType.id == 3 %}
  2687.                             {# 幅・奥行き・高さ（p_w/p_d/p_h からボタン型ラジオ生成） #}
  2688.                             {% if p_w and p_w|length and p_w|join != "" %}
  2689.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2690.                               <div class="rp-section-label">幅{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  2691.                               <div class="opt-btn-group">
  2692.                                 {% set idx = 0 %}
  2693.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  2694.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %} is-selected{% endif %}"
  2695.                                          onclick="mitsumori_simulation('pw','pw3_{{ idx }}');">
  2696.                                     <input type="radio" name="pw" id="pw3_{{ idx }}" value="{{ pw_val }}"
  2697.                                            {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}>
  2698.                                     {{ pw_val }}
  2699.                                   </label>
  2700.                                 {% endif %}{% endfor %}
  2701.                               </div>
  2702.                             </div>
  2703.                             {% endif %}
  2705.                             {% if p_d and p_d|length and p_d|join != "" %}
  2706.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2707.                               <div class="rp-section-label">奥行き{% if mitsumori_json and mitsumori_json.pd %}: <span>{{ mitsumori_json.pd }}</span>{% endif %}</div>
  2708.                               <div class="opt-btn-group">
  2709.                                 {% set idx = 0 %}
  2710.                                 {% for pd_val in p_d %}{% if pd_val %}{% set idx = idx + 1 %}
  2711.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pd == pd_val) or p_d|length == 1 %} is-selected{% endif %}"
  2712.                                          onclick="mitsumori_simulation('pd','pd3_{{ idx }}');">
  2713.                                     <input type="radio" name="pd" id="pd3_{{ idx }}" value="{{ pd_val }}"
  2714.                                            {% if (mitsumori_json and mitsumori_json.pd == pd_val) or p_d|length == 1 %}checked{% endif %}>
  2715.                                     {{ pd_val }}
  2716.                                   </label>
  2717.                                 {% endif %}{% endfor %}
  2718.                               </div>
  2719.                             </div>
  2720.                             {% endif %}
  2722.                             {% if p_h and p_h|length and p_h|join != "" %}
  2723.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2724.                               <div class="rp-section-label">高さ{% if mitsumori_json and mitsumori_json.ph %}: <span>{{ mitsumori_json.ph }}</span>{% endif %}</div>
  2725.                               <div class="opt-btn-group">
  2726.                                 {% set idx = 0 %}
  2727.                                 {% for ph_val in p_h %}{% if ph_val %}{% set idx = idx + 1 %}
  2728.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.ph == ph_val) or p_h|length == 1 %} is-selected{% endif %}"
  2729.                                          onclick="mitsumori_simulation('ph','ph3_{{ idx }}');">
  2730.                                     <input type="radio" name="ph" id="ph3_{{ idx }}" value="{{ ph_val }}"
  2731.                                            {% if (mitsumori_json and mitsumori_json.ph == ph_val) or p_h|length == 1 %}checked{% endif %}>
  2732.                                     {{ ph_val }}
  2733.                                   </label>
  2734.                                 {% endif %}{% endfor %}
  2735.                               </div>
  2736.                             </div>
  2737.                             {% endif %}
  2739.                             {# 棚タイプ（p_m データから選択肢を生成） #}
  2740.                             {% if p_m and p_m|length and p_m|join != "" %}
  2741.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2742.                               <div class="rp-section-label">棚タイプ <small class="text-muted">（間仕切り仕様）</small>{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  2743.                               <div class="opt-btn-group">
  2744.                                 {% set idx = 0 %}
  2745.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  2746.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %} is-selected{% endif %}"
  2747.                                          onclick="mitsumori_simulation('pm','pm3_{{ idx }}');">
  2748.                                     <input type="radio" name="pm" id="pm3_{{ idx }}" value="{{ pm_val }}"
  2749.                                            {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}>
  2750.                                     {{ pm_val }}
  2751.                                   </label>
  2752.                                 {% endif %}{% endfor %}
  2753.                               </div>
  2754.                             </div>
  2755.                             {% endif %}
  2757.                             {# option1 (mo の 棚タイプ 等、p_option1 データから選択肢を生成) #}
  2758.                             {% if p_option1 and p_option1|length and p_option1|join != "" %}
  2759.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2760.                               <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>
  2761.                               <div class="opt-btn-group">
  2762.                                 {% set idx = 0 %}
  2763.                                 {% for opt1_val in p_option1 %}{% if opt1_val %}{% set idx = idx + 1 %}
  2764.                                   <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 %}"
  2765.                                          onclick="mitsumori_simulation('option1','option1_3_{{ idx }}');">
  2766.                                     <input type="radio" name="option1" id="option1_3_{{ idx }}" value="{{ opt1_val }}"
  2767.                                            {% if (mitsumori_json and mitsumori_json.option1 is defined and mitsumori_json.option1 == opt1_val) or p_option1|length == 1 %}checked{% endif %}>
  2768.                                     {{ opt1_val }}
  2769.                                   </label>
  2770.                                 {% endif %}{% endfor %}
  2771.                               </div>
  2772.                             </div>
  2773.                             {% endif %}
  2775.                             {# カラー（共通の color データ使用） #}
  2776.                             {% if color and color|length %}
  2777.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2778.                               <div class="rp-section-label">カラー{% if mitsumori_json and mitsumori_json.pc %}: <span>{{ mitsumori_json.pc }}</span>{% endif %}</div>
  2779.                               <div class="opt-btn-group">
  2780.                                 {% set idx = 0 %}
  2781.                                 {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  2782.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %} is-selected{% endif %}"
  2783.                                          onclick="mitsumori_simulation('pc','cc3_{{ idx }}');">
  2784.                                     <input type="radio" name="color3" id="cc3_{{ idx }}" value="{{ cc['name'] }}"
  2785.                                            {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}>
  2786.                                     {{ cc['name'] }}
  2787.                                   </label>
  2788.                                 {% endif %}{% endfor %}
  2789.                               </div>
  2790.                             </div>
  2791.                             {% endif %}
  2793.                             {# 台数 #}
  2794.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2795.                               <label class="col-4 col-form-label">台数</label>
  2796.                               <div class="col-4">
  2797.                                 <div class="input-group mb-3">
  2798.                                   <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');">
  2799.                                   <span class="input-group-text">台</span>
  2800.                                 </div>
  2801.                               </div>
  2802.                               <div class="col-4">
  2803.                                 <button type="button" class="btn btn-info" onclick="daisu(+1);">＋</button>
  2804.                                 <button type="button" class="btn btn-danger" onclick="daisu(-1);">ー</button>
  2805.                               </div>
  2806.                             </div>
  2808.                         {% endif %}
  2810.                         <!-- 4: 施工見積（フェンス・組み立て式） -->
  2811.                         {% if ProductClass.SaleType.id == 4 %}
  2813.                             {# 枚数 #}
  2814.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2815.                               <label class="col-4 col-form-label">枚数</label>
  2816.                               <div class="col-4 mb-3">
  2817.                                 <div class="input-group">
  2818.                                   <input type="number" name="maisu" id="maisu" class="form-control" value="{{ mitsumori_json.maisu|default('3') }}" min="3" max="20" onchange="mitsumori_simulation('maisu','maisu');">
  2819.                                   <span class="input-group-text">枚</span>
  2820.                                 </div>
  2821.                               </div>
  2822.                               <div class="col-4">
  2823.                                 <button type="button" class="btn btn-info" onclick="maisu(+1);">＋</button>
  2824.                                 <button type="button" class="btn btn-danger" onclick="maisu(-1);">ー</button>
  2825.                               </div>
  2826.                             </div>
  2828.                         {% endif %}
  2830.                         <!-- 5: 施工見積（ウッドデッキ・タイルデッキ） -->
  2831.                         {% if ProductClass.SaleType.id == 5 %}
  2833.                             {# ステップの有無 #}
  2834.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2835.                               <div class="rp-section-label">ステップ</div>
  2836.                               <div class="opt-btn-group">
  2837.                                 {% set step_yes_checked = (mitsumori_json and mitsumori_json.deck_step is defined and mitsumori_json.deck_step == '必要') %}
  2838.                                 {% 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) %}
  2839.                                 <label class="opt-btn{% if step_yes_checked %} is-selected{% endif %}"
  2840.                                        onclick="mitsumori_simulation('op0','deck_step_yes');">
  2841.                                   <input type="radio" name="deck_step" id="deck_step_yes" value="必要"
  2842.                                          {% if step_yes_checked %}checked{% endif %}>
  2843.                                   必要
  2844.                                 </label>
  2845.                                 <label class="opt-btn{% if step_no_checked %} is-selected{% endif %}"
  2846.                                        onclick="mitsumori_simulation('op0','deck_step_no');">
  2847.                                   <input type="radio" name="deck_step" id="deck_step_no" value="不要"
  2848.                                          {% if step_no_checked %}checked{% endif %}>
  2849.                                   不要
  2850.                                 </label>
  2851.                               </div>
  2852.                               <div class="opt-survey-note-wd-step" style="font-size:12px;color:#c00;margin-top:6px;{% if not step_yes_checked %}display:none;{% endif %}">
  2853.                                 ※ 現場調査後に正式お見積もりさせていただきます。
  2854.                               </div>
  2855.                             </div>
  2857.                             {# ウッドデッキフェンスの有無 #}
  2858.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2859.                               <div class="rp-section-label">デッキフェンス</div>
  2860.                               <div class="opt-btn-group">
  2861.                                 {% set fence_yes_checked = (mitsumori_json and mitsumori_json.deck_fence is defined and mitsumori_json.deck_fence == '必要') %}
  2862.                                 {% 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) %}
  2863.                                 <label class="opt-btn{% if fence_yes_checked %} is-selected{% endif %}"
  2864.                                        onclick="mitsumori_simulation('op1','deck_fence_yes');">
  2865.                                   <input type="radio" name="deck_fence" id="deck_fence_yes" value="必要"
  2866.                                          {% if fence_yes_checked %}checked{% endif %}>
  2867.                                   必要
  2868.                                 </label>
  2869.                                 <label class="opt-btn{% if fence_no_checked %} is-selected{% endif %}"
  2870.                                        onclick="mitsumori_simulation('op1','deck_fence_no');">
  2871.                                   <input type="radio" name="deck_fence" id="deck_fence_no" value="不要"
  2872.                                          {% if fence_no_checked %}checked{% endif %}>
  2873.                                   不要
  2874.                                 </label>
  2875.                               </div>
  2876.                               <div class="opt-survey-note-wd-fence" style="font-size:12px;color:#c00;margin-top:6px;{% if not fence_yes_checked %}display:none;{% endif %}">
  2877.                                 ※ 現場調査後に正式お見積もりさせていただきます。
  2878.                               </div>
  2879.                             </div>
  2881.                         {% endif %}
  2883.                         <!-- 6: 施工見積（芝生・枚数・数量買い） -->
  2884.                         {% if ProductClass.SaleType.id == 6 %}
  2886.                             {# 規格（p_m データ → 素材から抽出） #}
  2887.                             {% if p_m and p_m|length and p_m|join != "" %}
  2888.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2889.                               <div class="rp-section-label">規格{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  2890.                               <div class="opt-btn-group">
  2891.                                 {% set idx = 0 %}
  2892.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  2893.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %} is-selected{% endif %}"
  2894.                                          onclick="mitsumori_simulation('pm','pm6_{{ idx }}');">
  2895.                                     <input type="radio" name="pm" id="pm6_{{ idx }}" value="{{ pm_val }}"
  2896.                                            {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}>
  2897.                                     {{ pm_val }}
  2898.                                   </label>
  2899.                                 {% endif %}{% endfor %}
  2900.                               </div>
  2901.                             </div>
  2902.                             {% endif %}
  2904.                             {# 芝の長さ（p_w データ → 幅から抽出） #}
  2905.                             {% if p_w and p_w|length and p_w|join != "" %}
  2906.                             <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2907.                               <div class="rp-section-label">芝の長さ{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  2908.                               <div class="opt-btn-group">
  2909.                                 {% set idx = 0 %}
  2910.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  2911.                                   <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %} is-selected{% endif %}"
  2912.                                          onclick="mitsumori_simulation('pw','pw6_{{ idx }}');">
  2913.                                     <input type="radio" name="pw" id="pw6_{{ idx }}" value="{{ pw_val }}"
  2914.                                            {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}>
  2915.                                     {{ pw_val }}
  2916.                                   </label>
  2917.                                 {% endif %}{% endfor %}
  2918.                               </div>
  2919.                             </div>
  2920.                             {% endif %}
  2922.                             {# 施工面積（㎡ 自由入力） #}
  2923.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2924.                               <label class="col-4 col-form-label">施工面積</label>
  2925.                               <div class="col-8">
  2926.                                 <div class="input-group">
  2927.                                   <input type="number" name="area" id="area"
  2928.                                     class="form-control"
  2929.                                     value="{{ mitsumori_json.area|default('') }}"
  2930.                                     placeholder="例: 10.5"
  2931.                                     min="0.1" step="0.1"
  2932.                                     onchange="mitsumori_simulation('area','area');">
  2933.                                   <span class="input-group-text">平米</span>
  2934.                                 </div>
  2935.                               </div>
  2936.                             </div>
  2938.                         {% endif %}
  2940.                         <!-- 7: 施工見積（数量買い・基本工事費固定） -->
  2941.                         {% if ProductClass.SaleType.id == 7 %}
  2942.                             {# 個数（物置の daisu と同形式、単位は「個」） #}
  2943.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2944.                               <label class="col-4 col-form-label">個数</label>
  2945.                               <div class="col-4">
  2946.                                 <div class="input-group mb-3">
  2947.                                   <input type="number" name="suuryou" id="suuryou" class="form-control"
  2948.                                     value="{{ mitsumori_json.suuryou|default('1') }}" min="1" max="100"
  2949.                                     onchange="mitsumori_simulation('suuryou','suuryou');">
  2950.                                   <span class="input-group-text">個</span>
  2951.                                 </div>
  2952.                               </div>
  2953.                               <div class="col-4">
  2954.                                 <button type="button" class="btn btn-info" onclick="suuryou(+1);">＋</button>
  2955.                                 <button type="button" class="btn btn-danger" onclick="suuryou(-1);">ー</button>
  2956.                               </div>
  2957.                             </div>
  2958.                         {% endif %}
  2960.                         <!-- 9: 商品のみ購入 -->
  2961.                         {% if ProductClass.SaleType.id == 9 %}
  2962.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2963.                               <label class="col-4 col-form-label">数量</label>
  2964.                               <div class="col-4">
  2965.                                 <div class="input-group mb-3">
  2966.                                   <input type="number" name="quantity_only" id="quantity_only" class="form-control" value="1" min="1" onchange="$('#quantity').val(this.value);">
  2967.                                   <span class="input-group-text">個</span>
  2968.                                 </div>
  2969.                               </div>
  2970.                               <div class="col-4">
  2971.                                 <button type="button" class="btn btn-info" onclick="quantityOnly(+1);">＋</button>
  2972.                                 <button type="button" class="btn btn-danger" onclick="quantityOnly(-1);">ー</button>
  2973.                               </div>
  2974.                             </div>
  2975.                         {% endif %}
  2980.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  2981.                         {# gs (ゴミステーション, category id=27) では「撤去対応」「残土・ガラ処理」は ex-shop に存在しないため非表示
  2982.                            cg (カーゲート, category id=9) では「残土・ガラ処理」分は撤去金額側に内包済みのため非表示
  2983.                            (撤去オプション自体は残す) #}
  2984.                         {% set is_gs = false %}
  2985.                         {% set is_cg = false %}
  2986.                         {% if Product.ProductCategories is not empty %}
  2987.                             {% for ProductCategory in Product.ProductCategories %}
  2988.                                 {% if ProductCategory.category_id == 27 %}{% set is_gs = true %}{% endif %}
  2989.                                 {% if ProductCategory.category_id == 9 %}{% set is_cg = true %}{% endif %}
  2990.                             {% endfor %}
  2991.                         {% endif %}
  2992.                         {% for i in 0..10 %}
  2993.                             {% if op and op|length >= i+1 %}
  2994.                             {% if op[i]['name'] %}
  2995.                             {% set hide_opt = false %}
  2996.                             {% if is_gs and (op[i]['name'] matches '/撤去/' or op[i]['name'] matches '/残土/') %}
  2997.                                 {% set hide_opt = true %}
  2998.                             {% endif %}
  2999.                             {% if is_cg and op[i]['name'] matches '/残土/' %}
  3000.                                 {% set hide_opt = true %}
  3001.                             {% endif %}
  3002.                             {% if not hide_opt %}
  3003.                             {# price=0 で「解体」「撤去」「設置場所」(wd 等で API 差額未提供) を含むオプションは
  3004.                                選択時に「現場調査後に正式お見積もり」文言を出す. #}
  3005.                             {% set is_removal_unknown = (op[i]['price']|default(0) == 0 or op[i]['price']|default('0') == '0')
  3006.                                                           and (op[i]['name'] matches '/解体/' or op[i]['name'] matches '/撤去/' or op[i]['name'] matches '/設置場所/') %}
  3007.                             <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  3008.                               <div class="rp-section-label">{{ op[i]['name'] }}{% if mitsumori_json and mitsumori_json.op[i] %}: <span>{{ mitsumori_json.op[i] }}</span>{% endif %}</div>
  3009.                               {% if op[i]['comment'] %}<div class="opt-comment" style="font-size:12px;color:#666;margin:4px 0 6px;">{{ op[i]['comment'] }}</div>{% endif %}
  3010.                               <div class="opt-btn-group">
  3011.                                 <label class="opt-btn{% if mitsumori_json and mitsumori_json.op[i] == op[i]['on'] %} is-selected{% endif %}"
  3012.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_1');">
  3013.                                   <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'] %}checked{% endif %}>
  3014.                                   {{ op[i]['on'] }}
  3015.                                 </label>
  3016.                                 <label class="opt-btn{% if mitsumori_json and mitsumori_json.op[i] == op[i]['off'] %} is-selected{% endif %}"
  3017.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_2');">
  3018.                                   <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 %}>
  3019.                                   {{ op[i]['off'] }}
  3020.                                 </label>
  3021.                               </div>
  3022.                               {% if is_removal_unknown %}
  3023.                               <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 %}">
  3024.                                 ※ 現場調査後に正式お見積もりさせていただきます。
  3025.                               </div>
  3026.                               {% endif %}
  3027.                             </div>
  3028.                             {% endif %}
  3029.                             {% endif %}
  3030.                             {% endif %}
  3031.                         {% endfor %}
  3033.                       </div>
  3034.                       <!-- /.card-body -->
  3035.                     </div>
  3038.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  3039.                         {% if Product.stock_find %}
  3040.                             <div class="ec-productRole__actions">
  3041.                                 {% if form.classcategory_id1 is defined %}
  3042.                                     <div class="ec-select">
  3043.                                         {{ form_row(form.classcategory_id1) }}
  3044.                                         {{ form_errors(form.classcategory_id1) }}
  3045.                                     </div>
  3046.                                     {% if form.classcategory_id2 is defined %}
  3047.                                         <div class="ec-select">
  3048.                                             {{ form_row(form.classcategory_id2) }}
  3049.                                             {{ form_errors(form.classcategory_id2) }}
  3050.                                         </div>
  3051.                                     {% endif %}
  3052.                                 {% endif %}
  3053.                                 <div class="ec-numberInput">
  3054.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  3055.                                     {{ form_errors(form.quantity) }}
  3056.                                 </div>
  3057.                             </div>
  3059.                         {% else %}
  3060.                             <div class="ec-productRole__btn">
  3061.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  3062.                                     {{ 'ただいま品切れ中です。'|trans }}
  3063.                                 </button>
  3064.                             </div>
  3065.                         {% endif %}
  3066.                         <div class="ec-productRole__btn mt-3">
  3067.                            <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart">カートに入れる</button>
  3068.                         </div>
  3069.                         {{ form_rest(form) }}
  3070.                     </form>
  3071.                     <div class="ec-modal add-cart-modal">
  3072.                         <div class="ec-modal-overlay">
  3073.                             <div class="ec-modal-wrap add-cart-modal__wrap">
  3074.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  3075.                                 <div id="ec-modal-header" class="text-center add-cart-modal__header">{{ 'カートに追加しました。'|trans }}</div>
  3076.                                 <div class="ec-modal-box add-cart-modal__box">
  3077.                                     <div class="ec-role add-cart-modal__actions">
  3078.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action add-cart-modal__primary">{{ 'カートに進む'|trans }}</a>
  3079.                                         <span class="ec-inlineBtn--cancel add-cart-modal__secondary">{{ '商品検索を続ける'|trans }}</span>
  3080.                                     </div>
  3081.                                 </div>
  3082.                             </div>
  3083.                         </div>
  3084.                     </div>
  3085.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  3086.                     </div>
  3088.                     {# SNSシェア #}
  3089.                     <div class="ec-productRole__share">
  3090.                         <ul class="ec-share">
  3091.                             <li class="ec-share__item">
  3092.                                 <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">
  3093.                                     <i class="fab fa-twitter"></i>
  3094.                                 </a>
  3095.                             </li>
  3096.                             <li class="ec-share__item">
  3097.                                 <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">
  3098.                                     <i class="fab fa-facebook-f"></i>
  3099.                                 </a>
  3100.                             </li>
  3101.                             <li class="ec-share__item">
  3102.                                 <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">
  3103.                                     <i class="fab fa-line"></i>
  3104.                                 </a>
  3105.                             </li>
  3106.                         </ul>
  3107.                     </div>
  3108.                 </div>
  3109.                 {# ===== スマホ用 見積金額 下部固定バー ===== #}
  3110.                 <div id="sp-mitsumori-bar">
  3111.                     <div>
  3112.                         <div class="sp-bar__label">合計(工事費・税込)</div>
  3113.                         <div class="sp-bar__price" id="sp-mitsumori-price">---円</div>
  3114.                     </div>
  3115.                     <button type="button" class="sp-bar__btn"
  3116.                             onclick="document.getElementById('cart_btn2') && document.getElementById('cart_btn2').click();">
  3117.                         <i class="fas fa-shopping-cart"></i>
  3118.                         <span class="sp-bar__btn-label">検討リストへ</span>
  3119.                         {% set spTotalQty = get_carts_total_quantity() %}
  3120.                         {% if spTotalQty > 0 %}
  3121.                             <span class="sp-bar__cart-badge">{{ spTotalQty|number_format }}</span>
  3122.                         {% endif %}
  3123.                     </button>
  3124.                     <a href="{{ url('homepage') }}" class="sp-bar__home-btn" title="トップページへ">
  3125.                         <i class="fas fa-home"></i>
  3126.                     </a>
  3127.                 </div>
  3129.                 {# tg カテゴリ用: block 別オプション差額ラジオ (W/D 確定後に JS が動的描画) #}
  3130.                 <div id="tg-options" class="tg-options-container col-12"></div>
  3132.                 <div class="card col-12 collapsed-card sticky-top float-right mitsumori-card-pc">
  3133.                     <div class="card-header">
  3134.                       <h3 class="card-title">現在のお見積り額</h3>
  3135.                       <div class="card-tools">
  3136.                         <span class="float-left" id="mitsumori_message">395000円</span>
  3137.                         <button type="button" class="btn btn-tool btn-mitsumori-toggle" data-card-widget="collapse" title="詳細を表示">
  3138.                           <span class="toggle-icon">▼ 詳細</span>
  3139.                         </button>
  3140.                       </div>
  3141.                     </div>
  3142.                     <div class="card-body p-0">
  3143.                       <ul class="nav nav-pills flex-column">
  3144.                         <li class="nav-item active">
  3145.                           <a class="nav-link">
  3146.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  3147.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  3148.                           </a>
  3149.                         </li>
  3150.                         <li class="nav-item active">
  3151.                           <a class="nav-link">
  3152.                             <i class="far fa-file-alt"></i> 商品価格
  3153.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  3154.                           </a>
  3155.                         </li>
  3156.                         <li class="nav-item">
  3157.                           <a class="nav-link">
  3158.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  3159.                             <span class="float-right" id="maker_price">479,700円</span>
  3160.                           </a>
  3161.                         </li>
  3162.                         <li class="nav-item">
  3163.                           <a class="nav-link">
  3164.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> お値引き
  3165.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  3166.                           </a>
  3167.                         </li>
  3168.                         <li class="nav-item">
  3169.                           <a class="nav-link">
  3170.                             <i class="far fa-file-alt"></i> 基本工事費
  3171.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  3172.                           </a>
  3173.                         </li>
  3174.                         <li class="nav-item">
  3175.                           <a class="nav-link">
  3176.                             <i class="far fa-file-alt"></i> 施工オプション
  3177.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  3178.                           </a>
  3179.                         </li>
  3180.                       </ul>
  3181.                     </div>
  3182.                     <div class="card-footer">
  3183.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  3184.                           見積書表示
  3185.                         </button>
  3186.                         <button type="submit" id="cart_btn2" class="btn btn-info add-cart">カートに入れる</button>
  3188.                     </div>
  3189.                 </div>
  3190.             </div>
  3192.         </div>
  3194.     </div>
  3196.   <div class="modal" id="modal-mitsumori">
  3197.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  3198.       <div class="modal-content">
  3199.         <div class="modal-header">
  3200.           <h4 class="modal-title">お見積書</h4>
  3201.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  3202.             <span aria-hidden="true">&times;</span>
  3203.           </button>
  3204.         </div>
  3205.         <div class="modal-body">
  3206.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  3207.               <!-- title row -->
  3208.               <div class="row">
  3209.                 <div class="col-12">
  3210.                   <h2>概算お見積書 
  3211.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  3212.                   </h2>
  3213.                 </div>
  3214.                 <!-- /.col -->
  3215.               </div>
  3216.               <!-- info row -->
  3217.               <div class="row invoice-info">
  3218.                 <div class="col-sm-8 invoice-col">
  3219.                   <h3>お客様</h3>
  3220.                   <span>下記の通り、お見積もり申し上げます。</span>
  3221.                   <br />
  3222.                   <br / >
  3223.                   <br />
  3224.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  3225.                   <span>
  3226.                     <br/>
  3227.                     <br/>
  3228.                     <br/>
  3229.                     <br/>
  3230.                   </span>
  3231.                 </div>
  3232.                 <div class="col-sm-4 invoice-col">
  3233.                   <p>
  3234.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  3235.                   </p>
  3236.                   <p>有限会社プラス</p>
  3237.                   <p>〒400-0334</p>
  3238.                   <p>山梨県南アルプス市藤田1450番地2</p>
  3239.                   <p>TEL: 055-284-6480</p>
  3240.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  3241.                 </div>
  3242.                 <!-- /.col -->
  3243.                 <!-- /.col -->
  3244.               </div>
  3245.               <!-- /.row -->
  3246.               <!-- Table row -->
  3247.               <div class="row">
  3248.                 <div class="col-12 table-responsive">
  3249.                   <table class="table table-striped">
  3250.                     <thead>
  3251.                       <tr>
  3252.                         <th>項目</th>
  3253.                         <th>数量</th>
  3254.                         <th>単位</th>
  3255.                         <th>単価</th>
  3256.                         <th>小計</th>
  3257.                       </tr>
  3258.                     </thead>
  3259.                     <tbody>
  3260.                       <tr>
  3261.                         <td id="mitsumori_item_name">{{ Product.name }}</td>
  3262.                         <td>1</td>
  3263.                         <td>式</td>
  3264.                         <td id="mitsumori_price_01">352,800</td>
  3265.                         <td id="mitsumori_price_02">352,800</td>
  3266.                       </tr>
  3267.                       <tr>
  3268.                         <td>基本工事費</td>
  3269.                         <td>1</td>
  3270.                         <td>式</td>
  3271.                         <td id="mitsumori_ct_01">10,000</td>
  3272.                         <td id="mitsumori_ct_02">10,000</td>
  3273.                       </tr>
  3274.                       <tr>
  3275.                         <td>残土・ガラ処理</td>
  3276.                         <td>1</td>
  3277.                         <td>式</td>
  3278.                         <td>0円</td>
  3279.                         <td></td>
  3280.                       </tr>
  3281.                       <tr>
  3282.                         <td>　</td>
  3283.                         <td></td>
  3284.                         <td></td>
  3285.                         <td></td>
  3286.                         <td></td>
  3287.                       </tr>
  3288.                     </tbody>
  3289.                   </table>
  3290.                 </div>
  3291.                 <!-- /.col -->
  3292.               </div>
  3293.               <!-- /.row -->
  3294.               <div class="row">
  3295.                 <!-- accepted payments column -->
  3296.                 <div class="col-6">
  3297.                   <p class="lead">お支払い方法</p>
  3298.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  3299.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  3300.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  3301.                   </p>
  3302.                 </div>
  3303.                 <!-- /.col -->
  3304.                 <div class="col-6">
  3305.                   <div class="table-responsive">
  3306.                     <table class="table">
  3307.                       <tbody>
  3308.                         <tr>
  3309.                           <th style="width:50%">小計:</th>
  3310.                           <td id="mitsumori_shoukei">362,800</td>
  3311.                         </tr>
  3312.                         <tr>
  3313.                           <th>消費税 (10%)</th>
  3314.                           <td id="mitsumori_tax">36,280</td>
  3315.                         </tr>
  3316.                         <tr>
  3317.                           <th>合計:</th>
  3318.                           <td id="mitsumori_goukei_02">399,080</td>
  3319.                         </tr>
  3320.                       </tbody>
  3321.                     </table>
  3322.                   </div>
  3323.                 </div>
  3324.                 <!-- /.col -->
  3325.               </div>
  3326.               <!-- /.row -->
  3327.             </div>
  3328.         </div>
  3329.         <div class="modal-footer justify-content-between">
  3330.                   {# PDF出力: mitsumori_json を POST して PDF ダウンロード #}
  3331.                   <form method="post" action="{{ url('mitsumori_pdf') }}" target="_blank" id="pdf_download_form">
  3332.                     <input type="hidden" name="_token" value="{{ csrf_token('mitsumori_pdf') }}">
  3333.                     <input type="hidden" name="mitsumori_json" id="pdf_mitsumori_json">
  3334.                     <button type="submit" class="btn btn-primary float-right" style="margin-right: 5px;" onclick="syncPdfJson();">
  3335.                       <i class="fas fa-download"></i>PDF出力
  3336.                     </button>
  3337.                   </form>
  3338.                   <button type="submit" id="cart_btn3" class="btn btn-info add-cart">カートに入れる</button>
  3339.         </div>
  3340.       </div>
  3341.       <!-- /.modal-content -->
  3342.     </div>
  3343.     <!-- /.modal-dialog -->
  3344.   </div>
  3345.   <!-- /.modal -->
  3347.     <!-- Image zoom modal: custom lightweight lightbox (no CDN dependency) -->
  3348.     <div id="img-modal" role="dialog" aria-modal="true" aria-label="画像拡大">
  3349.         <button id="img-modal__close" aria-label="閉じる">&times;</button>
  3350.         <button id="img-modal__prev" aria-label="前の画像">&#10094;</button>
  3351.         <img id="img-modal__img" src="" alt="">
  3352.         <button id="img-modal__next" aria-label="次の画像">&#10095;</button>
  3353.     </div>
  3354.     <style>
  3355.     #img-modal {
  3356.         display: none;
  3357.         position: fixed;
  3358.         inset: 0;
  3359.         z-index: 9999;
  3360.         background: rgba(0,0,0,0.88);
  3361.         align-items: center;
  3362.         justify-content: center;
  3363.         cursor: zoom-out;
  3364.     }
  3365.     #img-modal.is-open { display: flex; }
  3366.     #img-modal__img {
  3367.         max-width: 92vw;
  3368.         max-height: 88vh;
  3369.         object-fit: contain;
  3370.         border-radius: 4px;
  3371.         cursor: default;
  3372.         user-select: none;
  3373.         touch-action: pinch-zoom;
  3374.         display: block;
  3375.     }
  3376.     #img-modal__close {
  3377.         position: absolute;
  3378.         top: 14px;
  3379.         right: 18px;
  3380.         font-size: 38px;
  3381.         color: #fff;
  3382.         cursor: pointer;
  3383.         background: none;
  3384.         border: none;
  3385.         padding: 0;
  3386.         line-height: 1;
  3387.         z-index: 1;
  3388.         opacity: 0.85;
  3389.     }
  3390.     #img-modal__close:hover { opacity: 1; }
  3391.     #img-modal__prev,
  3392.     #img-modal__next {
  3393.         position: absolute;
  3394.         top: 50%;
  3395.         transform: translateY(-50%);
  3396.         font-size: 36px;
  3397.         color: #fff;
  3398.         cursor: pointer;
  3399.         background: rgba(0,0,0,0.32);
  3400.         border: none;
  3401.         padding: 10px 16px;
  3402.         line-height: 1;
  3403.         border-radius: 6px;
  3404.         z-index: 1;
  3405.         opacity: 0.8;
  3406.         user-select: none;
  3407.     }
  3408.     #img-modal__prev:hover, #img-modal__next:hover { opacity: 1; }
  3409.     #img-modal__prev { left: 12px; }
  3410.     #img-modal__next { right: 12px; }
  3411.     @media (max-width: 767px) {
  3412.         #img-modal__prev, #img-modal__next { font-size: 28px; padding: 8px 12px; }
  3413.     }
  3414.     </style>
  3415.     <script>
  3416.     (function(){
  3417.         var images = [];
  3418.         var current = 0;
  3420.         // Collect original (non-cloned) slide images at click time.
  3421.         // After Slick init, slides are wrapped in .slick-slide; clones have .slick-cloned.
  3422.         function collectImages() {
  3423.             images = [];
  3424.             var $slides = $('.item_visual .slick-slide:not(.slick-cloned)');
  3425.             if (!$slides.length) {
  3426.                 // Slick not yet initialized (fallback)
  3427.                 $slides = $('.item_visual .slide-item');
  3428.             }
  3429.             $slides.each(function() {
  3430.                 var $a = $(this).find('a.js-zoom');
  3431.                 if ($a.length) {
  3432.                     images.push({ src: $a.attr('href'), alt: $a.find('img').attr('alt') || '' });
  3433.                 }
  3434.             });
  3435.         }
  3437.         function showImage(idx) {
  3438.             current = ((idx % images.length) + images.length) % images.length;
  3439.             $('#img-modal__img').attr({ src: images[current].src, alt: images[current].alt });
  3440.         }
  3442.         function openModal(href) {
  3443.             collectImages();
  3444.             if (!images.length) return;
  3445.             var idx = 0;
  3446.             for (var i = 0; i < images.length; i++) {
  3447.                 if (images[i].src === href) { idx = i; break; }
  3448.             }
  3449.             showImage(idx);
  3450.             $('#img-modal').addClass('is-open');
  3451.             $('body').css('overflow', 'hidden');
  3452.         }
  3454.         function closeModal() {
  3455.             $('#img-modal').removeClass('is-open');
  3456.             $('body').css('overflow', '');
  3457.         }
  3459.         // Click handler: works for both original and Slick-cloned anchors
  3460.         $(document).on('click', '.item_visual a.js-zoom', function(e) {
  3461.             e.preventDefault();
  3462.             openModal($(this).attr('href'));
  3463.         });
  3465.         // Close on backdrop click
  3466.         $('#img-modal').on('click', function(e) {
  3467.             if (e.target === this) closeModal();
  3468.         });
  3469.         $('#img-modal__close').on('click', closeModal);
  3470.         $('#img-modal__prev').on('click', function(e) { e.stopPropagation(); showImage(current - 1); });
  3471.         $('#img-modal__next').on('click', function(e) { e.stopPropagation(); showImage(current + 1); });
  3473.         // Keyboard navigation
  3474.         $(document).on('keydown', function(e) {
  3475.             if (!$('#img-modal').hasClass('is-open')) return;
  3476.             if (e.key === 'Escape') closeModal();
  3477.             if (e.key === 'ArrowLeft') showImage(current - 1);
  3478.             if (e.key === 'ArrowRight') showImage(current + 1);
  3479.         });
  3481.         // Touch swipe (horizontal only)
  3482.         var _tx = 0;
  3483.         var $modal = document.getElementById('img-modal');
  3484.         $modal.addEventListener('touchstart', function(e) {
  3485.             _tx = e.changedTouches[0].clientX;
  3486.         }, { passive: true });
  3487.         $modal.addEventListener('touchend', function(e) {
  3488.             var dx = e.changedTouches[0].clientX - _tx;
  3489.             if (Math.abs(dx) > 48) {
  3490.                 dx < 0 ? showImage(current + 1) : showImage(current - 1);
  3491.             }
  3492.         }, { passive: true });
  3493.     })();
  3494.     </script>
  3496. {% endblock %}