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

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.         /* ============================================
  98.            商品詳細グリッド: 画像50% / 内容50%（均等）
  99.         ============================================ */
  100.         @media (min-width: 768px) {
  101.             body.product_page .ec-grid2 {
  102.                 display: flex;
  103.                 align-items: flex-start;
  104.             }
  105.             body.product_page .ec-grid2 .ec-grid2__cell {
  106.                 width: 50%;
  107.                 flex: 0 0 50%;
  108.                 min-width: 0;
  109.             }
  110.             body.product_page .ec-grid2 .ec-grid2__cell2 {
  111.                 width: 50%;
  112.                 flex: 0 0 50%;
  113.                 min-width: 0;
  114.             }
  115.         }
  117.         /* ============================================
  118.            商品説明欄内のHTMLが画面幅を突き抜けないように
  119.         ============================================ */
  120.         body.product_page .ec-productRole__description {
  121.             min-width: 0;
  122.             overflow-wrap: break-word;
  123.             word-break: break-word;
  124.         }
  125.         body.product_page .ec-productRole__description img,
  126.         body.product_page .ec-productRole__description table,
  127.         body.product_page .ec-productRole__description iframe,
  128.         body.product_page .ec-productRole__description video {
  129.             max-width: 100% !important;
  130.             height: auto;
  131.         }
  132.         body.product_page .ec-productRole__description table {
  133.             display: block;
  134.             overflow-x: auto;
  135.             -webkit-overflow-scrolling: touch;
  136.         }
  138.         /* ============================================
  139.            スマホ用 見積金額 下部固定バー
  140.         ============================================ */
  141.         #sp-mitsumori-bar {
  142.             display: none;
  143.         }
  144.         
  145.         /* ============================================
  146.            商品タイプ選択 共通スタイル
  147.         ============================================ */
  149.         /* セクションラベル */
  150.         .rp-section-label {
  151.             font-size: 14px;
  152.             font-weight: bold;
  153.             color: #333;
  154.             margin-bottom: 10px;
  155.         }
  156.         .rp-section-label span {
  157.             font-weight: normal;
  158.             color: #c00;
  159.         }
  161.         /* ---- 1. 画像付きカード ---- */
  162.         .rp-card-group {
  163.             display: flex;
  164.             flex-wrap: wrap;
  165.             gap: 8px;
  166.             margin-bottom: 4px;
  167.         }
  168.         .rp-card {
  169.             position: relative;
  170.             cursor: pointer;
  171.             width: 110px;
  172.             border: 2px solid #ddd;
  173.             border-radius: 10px;
  174.             overflow: hidden;
  175.             transition: border-color 0.2s, box-shadow 0.2s;
  176.             background: #fff;
  177.         }
  178.         .rp-card:hover {
  179.             border-color: #999;
  180.             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  181.         }
  182.         .rp-card.is-selected {
  183.             border-color: #1a6fcf;
  184.             box-shadow: 0 2px 10px rgba(26,111,207,0.25);
  185.         }
  186.         .rp-card input[type="radio"] { display: none; }
  187.         .rp-card__image {
  188.             width: 100%;
  189.             aspect-ratio: 1 / 1;
  190.             object-fit: cover;
  191.             display: block;
  192.             background: #f5f5f5;
  193.         }
  194.         .rp-card__placeholder {
  195.             width: 100%;
  196.             aspect-ratio: 1 / 1;
  197.             background: #f0f0f0;
  198.             display: flex;
  199.             align-items: center;
  200.             justify-content: center;
  201.             color: #bbb;
  202.             font-size: 24px;
  203.         }
  204.         .rp-card__name {
  205.             display: block;
  206.             padding: 5px 5px;
  207.             font-size: 11px;
  208.             color: #333;
  209.             text-align: center;
  210.             line-height: 1.4;
  211.             word-break: break-all;
  212.         }
  213.         .rp-card.is-selected .rp-card__name { color: #1a6fcf; font-weight: bold; }
  214.         .rp-card.is-selected::after {
  215.             content: "✓";
  216.             position: absolute;
  217.             top: 3px; right: 6px;
  218.             color: #1a6fcf;
  219.             font-size: 13px;
  220.             font-weight: bold;
  221.         }
  223.         /* ---- 2. ボタン式ラジオ（画像なし・8個以内）---- */
  224.         .rp-btn-group {
  225.             display: flex;
  226.             flex-wrap: wrap;
  227.             gap: 8px;
  228.             margin-bottom: 4px;
  229.             max-width: 100%;
  230.             min-width: 0;
  231.         }
  232.         .rp-btn {
  233.             cursor: pointer;
  234.             padding: 8px 14px;
  235.             border: 2px solid #ddd;
  236.             border-radius: 10px;
  237.             font-size: 13px;
  238.             color: #333;
  239.             background: #fff;
  240.             transition: border-color 0.2s, background 0.2s;
  241.             white-space: nowrap;
  242.             max-width: 100%;
  243.             overflow: hidden;
  244.             text-overflow: ellipsis;
  245.         }
  246.         .rp-btn:hover { border-color: #999; }
  247.         .rp-btn.is-selected {
  248.             border-color: #1a6fcf;
  249.             color: #1a6fcf;
  250.             font-weight: bold;
  251.             background: #f0f6ff;
  252.         }
  253.         .rp-btn input[type="radio"] { display: none; }
  255.         /* ---- ボタン群が3行以上になる場合は1行横スクロール ---- */
  256.         .rp-btn-group.is-scroll,
  257.         .opt-btn-group.is-scroll {
  258.             flex-wrap: nowrap;
  259.             overflow-x: auto;
  260.             overflow-y: hidden;
  261.             -webkit-overflow-scrolling: touch;
  262.             scrollbar-width: thin;
  263.             padding-bottom: 6px;
  264.         }
  265.         .rp-btn-group.is-scroll::-webkit-scrollbar,
  266.         .opt-btn-group.is-scroll::-webkit-scrollbar {
  267.             height: 6px;
  268.         }
  269.         .rp-btn-group.is-scroll::-webkit-scrollbar-thumb,
  270.         .opt-btn-group.is-scroll::-webkit-scrollbar-thumb {
  271.             background: #c0c0c0;
  272.             border-radius: 3px;
  273.         }
  274.         .rp-btn-group.is-scroll > .rp-btn,
  275.         .opt-btn-group.is-scroll > .opt-btn {
  276.             flex: 0 0 auto;
  277.         }
  279.         /* ---- 3. プルダウン（画像なし・9個以上）---- */
  280.         .rp-select-wrap {
  281.             margin-bottom: 4px;
  282.         }
  283.         .rp-select {
  284.             width: 100%;
  285.             max-width: 420px;
  286.             padding: 8px 12px;
  287.             border: 2px solid #ddd;
  288.             border-radius: 10px;
  289.             font-size: 13px;
  290.             color: #333;
  291.             background: #fff;
  292.             appearance: none;
  293.             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");
  294.             background-repeat: no-repeat;
  295.             background-position: right 12px center;
  296.             cursor: pointer;
  297.         }
  298.         .rp-select:focus {
  299.             outline: none;
  300.             border-color: #1a6fcf;
  301.         }
  303.         /* ---- オプション選択ボタン（枠線ラジオ）---- */
  304.         .opt-btn-group {
  305.             display: flex;
  306.             flex-wrap: wrap;
  307.             gap: 8px;
  308.             padding: 6px 0;
  309.             max-width: 100%;
  310.             min-width: 0;
  311.         }
  312.         .opt-btn {
  313.             cursor: pointer;
  314.             padding: 7px 14px;
  315.             border: 2px solid #ddd;
  316.             border-radius: 10px;
  317.             font-size: 13px;
  318.             color: #333;
  319.             background: #fff;
  320.             transition: border-color 0.2s, background 0.2s;
  321.             white-space: nowrap;
  322.             max-width: 100%;
  323.             overflow: hidden;
  324.             text-overflow: ellipsis;
  325.         }
  326.         .opt-btn:hover { border-color: #999; }
  327.         .opt-btn.is-selected {
  328.             border-color: #1a6fcf;
  329.             color: #1a6fcf;
  330.             font-weight: bold;
  331.             background: #f0f6ff;
  332.         }
  333.         .opt-btn input[type="radio"] { display: none; }
  335.         /* ============================================
  336.            施工エリア案内
  337.         ============================================ */
  338.         .ec-areaNotice {
  339.             margin: 16px 0;
  340.             padding: 16px 20px;
  341.             background: #f8f9fa;
  342.             border-left: 4px solid #1a6fcf;
  343.             border-radius: 0 8px 8px 0;
  344.         }
  345.         .ec-areaNotice__inner {
  346.             display: flex;
  347.             align-items: flex-start;
  348.             gap: 12px;
  349.         }
  350.         .ec-areaNotice__icon {
  351.             font-size: 22px;
  352.             line-height: 1;
  353.             flex-shrink: 0;
  354.             margin-top: 2px;
  355.         }
  356.         .ec-areaNotice__body {
  357.             flex: 1;
  358.         }
  359.         .ec-areaNotice__title {
  360.             font-size: 13px;
  361.             font-weight: bold;
  362.             color: #1a6fcf;
  363.             margin: 0 0 6px;
  364.         }
  365.         .ec-areaNotice__text {
  366.             font-size: 13px;
  367.             color: #444;
  368.             line-height: 1.7;
  369.             margin: 0;
  370.         }
  371.         .ec-areaNotice__text strong {
  372.             color: #222;
  373.         }
  374.         .ec-areaNotice__link {
  375.             display: inline-block;
  376.             margin-top: 8px;
  377.             font-size: 12px;
  378.             color: #1a6fcf;
  379.             text-decoration: underline;
  380.         }
  381.         .ec-areaNotice__link:hover {
  382.             color: #0d4fa0;
  383.         }
  385.         /* ============================================
  386.            SNSシェア + ブランド名 タイトル行
  387.         ============================================ */
  388.         .ec-productRole__titleRow {
  389.             display: flex;
  390.             align-items: center;
  391.             justify-content: space-between;
  392.             gap: 8px;
  393.             margin-bottom: 4px;
  394.         }
  395.         .ec-productRole__titleRow .ec-headingTitle {
  396.             margin: 0;
  397.             flex: 1;
  398.             font-size: 18px;
  399.         }
  400.         .ec-share-inline {
  401.             display: flex;
  402.             align-items: center;
  403.             gap: 8px;
  404.             flex-shrink: 0;
  405.         }
  406.         @media (max-width: 767px) {
  407.             /* maker_area の float を解除して独立表示 */
  408.             #maker_area {
  409.                 float: none !important;
  410.                 width: auto !important;
  411.                 height: auto !important;
  412.                 display: block;
  413.                 margin-bottom: 4px;
  414.             }
  415.             /* タイトル行: 商品名が全幅を占有しSNSは右寄せ下段 */
  416.             .ec-productRole__titleRow {
  417.                 flex-wrap: wrap;
  418.                 clear: both;
  419.             }
  420.             .ec-productRole__titleRow .ec-headingTitle {
  421.                 flex: 1 1 100%;
  422.                 font-size: 16px;
  423.             }
  424.             .ec-share-inline {
  425.                 flex: 0 0 auto;
  426.                 margin-left: auto;
  427.             }
  428.         }
  429.         .ec-share-inline a {
  430.             display: flex;
  431.             align-items: center;
  432.             justify-content: center;
  433.             width: 32px;
  434.             height: 32px;
  435.             border-radius: 50%;
  436.             font-size: 15px;
  437.             color: #fff;
  438.             text-decoration: none;
  439.             transition: opacity 0.2s;
  440.         }
  441.         .ec-share-inline a:hover { opacity: 0.8; }
  442.         .ec-share-inline .share-twitter  { background: #000; }
  443.         .ec-share-inline .share-facebook { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
  444.         .ec-share-inline .share-line     { background: #06c755; }
  446.         /* description_detail下のシェアブロックはPC/スマホ共通で非表示（タイトル行に移動） */
  447.         .ec-productRole__share { display: none; }
  449.         /* ============================================
  450.            PC用: 現在のお見積り額カード強調
  451.         ============================================ */
  452.         @media (min-width: 768px) {
  453.             .mitsumori-card-pc {
  454.                 border: 2px solid #1a6fcf !important;
  455.                 border-radius: 10px !important;
  456.                 box-shadow: 0 4px 16px rgba(26,111,207,0.18) !important;
  457.                 margin-top: 20px;
  458.                 overflow: hidden;
  459.                 background: linear-gradient(135deg, #1a6fcf, #0d4fa0) !important;
  460.             }
  461.             .mitsumori-card-pc .card-header {
  462.                 background: linear-gradient(135deg, #1a6fcf, #0d4fa0) !important;
  463.                 color: #fff !important;
  464.                 padding: 14px 16px !important;
  465.                 border-bottom: none !important;
  466.             }
  467.             .mitsumori-card-pc .card-title {
  468.                 color: #fff !important;
  469.                 font-size: 15px !important;
  470.                 font-weight: bold !important;
  471.                 margin: 0 !important;
  472.             }
  473.             .mitsumori-card-pc #mitsumori_message {
  474.                 font-size: 22px !important;
  475.                 font-weight: bold !important;
  476.                 color: #fff !important;
  477.             }
  478.             .mitsumori-card-pc .btn-tool {
  479.                 color: #fff !important;
  480.             }
  481.             /* 合計行を大きく強調 */
  482.             .mitsumori-card-pc .nav-item:first-child .nav-link {
  483.                 font-size: 16px !important;
  484.                 font-weight: bold !important;
  485.                 color: #c00 !important;
  486.                 background: #fff8f8 !important;
  487.                 padding: 12px 16px !important;
  488.             }
  489.             .mitsumori-card-pc .nav-item:first-child #mitsumori_goukei {
  490.                 font-size: 20px !important;
  491.                 font-weight: bold !important;
  492.                 color: #c00 !important;
  493.             }
  494.             /* card-body（明細リスト）を白背景に */
  495.             .mitsumori-card-pc .card-body {
  496.                 background: #fff !important;
  497.             }
  498.             .mitsumori-card-pc .card-footer {
  499.                 background: #f8faff !important;
  500.                 border-top: 1px solid #dce8fb !important;
  501.                 padding: 12px 16px !important;
  502.             }
  503.         }
  505.         @media (max-width: 767px) {
  506.             /* スマホでは現在のお見積り額カードの強調スタイルをすべてリセット */
  507.             .mitsumori-card-pc {
  508.                 border: none !important;
  509.                 border-radius: 0 !important;
  510.                 box-shadow: none !important;
  511.                 margin-top: 0 !important;
  512.                 overflow: visible !important;
  513.                 background: none !important;
  514.             }
  515.             .mitsumori-card-pc .card-header {
  516.                 background: none !important;
  517.                 color: inherit !important;
  518.                 padding: inherit !important;
  519.                 border-bottom: inherit !important;
  520.             }
  521.             .mitsumori-card-pc .card-title { color: inherit !important; }
  522.             .mitsumori-card-pc #mitsumori_message { font-size: inherit !important; color: inherit !important; }
  523.             .mitsumori-card-pc .btn-tool { color: inherit !important; }
  524.             /* 折りたたみトグルボタン */
  525.             .btn-mitsumori-toggle {
  526.                 background: none !important;
  527.                 border: 1px solid #aaa !important;
  528.                 border-radius: 4px !important;
  529.                 padding: 2px 8px !important;
  530.                 font-size: 12px !important;
  531.                 color: #333 !important;
  532.                 line-height: 1.4 !important;
  533.             }
  534.             .btn-mitsumori-toggle .toggle-icon {
  535.                 display: inline-block;
  536.                 transition: transform 0.2s;
  537.             }
  538.             /* 展開状態: ▼→▲ */
  539.             .card:not(.collapsed-card) .btn-mitsumori-toggle .toggle-icon::before {
  540.                 content: "▲ 閉じる";
  541.             }
  542.             .card:not(.collapsed-card) .btn-mitsumori-toggle .toggle-icon {
  543.                 display: none;
  544.             }
  545.             .card:not(.collapsed-card) .btn-mitsumori-toggle::after {
  546.                 content: "▲ 閉じる";
  547.                 font-size: 12px;
  548.             }
  549.             .mitsumori-card-pc .nav-item:first-child .nav-link {
  550.                 font-size: inherit !important;
  551.                 color: inherit !important;
  552.                 background: none !important;
  553.                 padding: inherit !important;
  554.             }
  555.             .mitsumori-card-pc .nav-item:first-child #mitsumori_goukei {
  556.                 font-size: inherit !important;
  557.                 color: inherit !important;
  558.             }
  559.             .mitsumori-card-pc .card-footer {
  560.                 background: none !important;
  561.                 border-top: inherit !important;
  562.                 padding: inherit !important;
  563.             }
  564.             /* 横スクロール禁止 */
  565.             body, html {
  566.                 overflow-x: hidden;
  567.                 max-width: 100vw;
  568.             }
  569.             /* ボタンの折り返しを許可（nowrapが原因で横スクロール発生するため） */
  570.             .opt-btn,
  571.             .rp-btn {
  572.                 white-space: normal;
  573.                 word-break: break-all;
  574.             }
  575.             /* エリア案内: スマホでコンパクト */
  576.             .ec-areaNotice {
  577.                 margin: 8px 0;
  578.                 padding: 8px 10px;
  579.                 border-left-width: 3px;
  580.                 cursor: pointer;
  581.             }
  582.             .ec-areaNotice__inner {
  583.                 flex-direction: row;
  584.                 gap: 8px;
  585.                 align-items: flex-start;
  586.             }
  587.             .ec-areaNotice__icon { font-size: 15px; }
  588.             /* タイトル行: 展開トグル */
  589.             .ec-areaNotice__title {
  590.                 font-size: 11px;
  591.                 margin-bottom: 3px;
  592.                 display: flex;
  593.                 justify-content: space-between;
  594.                 align-items: center;
  595.             }
  596.             .ec-areaNotice__title::after {
  597.                 content: "▼";
  598.                 font-size: 9px;
  599.                 color: #888;
  600.                 margin-left: 6px;
  601.                 transition: transform 0.2s;
  602.             }
  603.             .ec-areaNotice.is-open .ec-areaNotice__title::after {
  604.                 transform: rotate(180deg);
  605.             }
  606.             /* 折りたたみ対象: 閉じた状態では非表示 */
  607.             .ec-areaNotice__detail {
  608.                 display: none;
  609.             }
  610.             .ec-areaNotice.is-open .ec-areaNotice__detail {
  611.                 display: block;
  612.             }
  613.             .ec-areaNotice__text { font-size: 11px; line-height: 1.5; }
  614.             .ec-areaNotice__text br { display: none; }
  615.             .ec-areaNotice__link { font-size: 11px; margin-top: 3px; }
  616.             .rp-card { width: calc(33.333% - 6px); min-width: 80px; }
  617.             
  618.             #sp-mitsumori-bar {
  619.                 display: flex;
  620.                 position: fixed;
  621.                 bottom: 0;
  622.                 left: 0;
  623.                 right: 0;
  624.                 z-index: 1000;
  625.                 background: #fff;
  626.                 border-top: 2px solid #e0e0e0;
  627.                 box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
  628.                 align-items: center;
  629.                 padding: 8px 12px;
  630.                 gap: 10px;
  631.             }
  632.             #sp-mitsumori-bar .sp-bar__label {
  633.                 font-size: 11px;
  634.                 color: #666;
  635.                 white-space: nowrap;
  636.             }
  637.             #sp-mitsumori-bar .sp-bar__price {
  638.                 font-size: 18px;
  639.                 font-weight: bold;
  640.                 color: #c00;
  641.                 flex: 1;
  642.             }
  643.             #sp-mitsumori-bar .sp-bar__btn {
  644.                 font-size: 12px;
  645.                 padding: 8px 12px;
  646.                 background: #333;
  647.                 color: #fff;
  648.                 border: none;
  649.                 border-radius: 6px;
  650.                 white-space: nowrap;
  651.                 cursor: pointer;
  652.                 position: relative;
  653.                 display: inline-flex;
  654.                 align-items: center;
  655.                 gap: 6px;
  656.             }
  657.             #sp-mitsumori-bar .sp-bar__btn i {
  658.                 font-size: 14px;
  659.             }
  660.             #sp-mitsumori-bar .sp-bar__cart-badge {
  661.                 position: absolute;
  662.                 top: -6px;
  663.                 right: -6px;
  664.                 background: #c00;
  665.                 color: #fff;
  666.                 border-radius: 50%;
  667.                 min-width: 16px;
  668.                 height: 16px;
  669.                 font-size: 10px;
  670.                 line-height: 16px;
  671.                 padding: 0 4px;
  672.                 font-weight: bold;
  673.             }
  674.             #sp-mitsumori-bar .sp-bar__home-btn {
  675.                 display: inline-flex;
  676.                 align-items: center;
  677.                 justify-content: center;
  678.                 width: 36px;
  679.                 height: 36px;
  680.                 border: 1px solid #ccc;
  681.                 border-radius: 6px;
  682.                 background: #fff;
  683.                 color: #333;
  684.                 text-decoration: none;
  685.                 cursor: pointer;
  686.             }
  687.             #sp-mitsumori-bar .sp-bar__home-btn i {
  688.                 font-size: 16px;
  689.             }
  690.             #sp-mitsumori-bar .sp-bar__home-btn:hover {
  691.                 background: #f0f0f0;
  692.             }
  693.             /* 下部バーの高さ分ページ下部にpaddingを追加 */
  694.             body {
  695.                 padding-bottom: 64px;
  696.             }
  697.         }
  699.         /* ============================================
  700.            カート追加モーダル: 縦並び中央配置
  701.         ============================================ */
  702.         .add-cart-modal__wrap {
  703.             text-align: center;
  704.         }
  705.         .add-cart-modal__header {
  706.             font-size: 16px;
  707.             margin: 20px 0 24px;
  708.             text-align: center;
  709.         }
  710.         .add-cart-modal__actions {
  711.             display: flex;
  712.             flex-direction: column;
  713.             align-items: center;
  714.             gap: 16px;
  715.             padding: 0 20px 20px;
  716.         }
  717.         .add-cart-modal__primary {
  718.             display: inline-block;
  719.             width: 80%;
  720.             max-width: 320px;
  721.             padding: 14px 20px;
  722.             font-size: 15px;
  723.             font-weight: bold;
  724.             text-align: center;
  725.             background: #d9534f;
  726.             color: #fff !important;
  727.             border-radius: 6px;
  728.             text-decoration: none;
  729.             cursor: pointer;
  730.         }
  731.         .add-cart-modal__primary:hover {
  732.             background: #c9302c;
  733.             color: #fff !important;
  734.             text-decoration: none;
  735.         }
  736.         .add-cart-modal__secondary {
  737.             display: inline-block;
  738.             padding: 6px 14px;
  739.             font-size: 12px;
  740.             color: #666;
  741.             border: 1px solid #ccc;
  742.             border-radius: 4px;
  743.             background: #fff;
  744.             cursor: pointer;
  745.         }
  746.         .add-cart-modal__secondary:hover {
  747.             background: #f0f0f0;
  748.             color: #333;
  749.         }
  750.         @media (max-width: 767px) {
  751.             .add-cart-modal__actions {
  752.                 gap: 20px;
  753.             }
  754.         }
  755.     </style>
  756. {% endblock %}
  758. {% block javascript %}
  760.     <script>
  761.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  763.         // 規格2に選択肢を割り当てる。
  764.         function fnSetClassCategories(form, classcat_id2_selected) {
  765.             var $form = $(form);
  766.             var product_id = $form.find('input[name=product_id]').val();
  767.             var $sele1 = $form.find('select[name=classcategory_id1]');
  768.             var $sele2 = $form.find('select[name=classcategory_id2]');
  769.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  770.         }
  772.         {% if form.classcategory_id2 is defined %}
  773.         fnSetClassCategories(
  774.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  775.         );
  776.         {% elseif form.classcategory_id1 is defined %}
  777.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  778.         {% endif %}
  779.     </script>
  780.     <script>
  781.         $(function() {
  782.             // bfcache無効化
  783.             $(window).bind('pageshow', function(event) {
  784.                 if (event.originalEvent.persisted) {
  785.                     location.reload(true);
  786.                 }
  787.             });
  789.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  790.             // img タグに width, height が付与されている.
  791.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  792.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  793.             $('.ec-grid2__cell').hide();
  794.             var removeSize = function () {
  795.                 $('.slide-item').height('');
  796.                 $('.slide-item img')
  797.                     .removeAttr('width')
  798.                     .removeAttr('height')
  799.                     .removeAttr('style');
  801.             };
  802.             var slickInitial = function(slick) {
  803.                 $('.ec-grid2__cell').fadeIn(1500);
  804.                 var baseHeight = $(slick.target).height();
  805.                 var baseWidth = $(slick.target).width();
  806.                 var rate = baseWidth / baseHeight;
  807.                 if(baseHeight * rate < 400){
  808.                     $('.slide-item').height(baseHeight * rate); // 余白を削除する
  809.                 }else{
  810.                     $('.slide-item').height(400); // 余白を削除する
  811.                 }
  812.                 // transform を使用することでCLSの影響を受けないようにする
  813.                 $('.slide-item img')
  814.                     .css(
  815.                         {
  816.                             'transform-origin': 'top left',
  817.                             'transform': 'scaleY(' + rate + ')',
  818.                             'transition': 'transform .1s'
  819.                         }
  820.                     );
  821.                 // 正しいサイズに近くなったら属性を解除する
  822.                 setTimeout(removeSize, 500);
  823.             };
  824.             $('.item_visual').on('init', slickInitial);
  825.             // リサイズ時は CLS の影響を受けないため属性を解除する
  826.             $(window).resize(removeSize);
  827.             $('.item_visual').slick({
  828.                 dots: false,
  829.                 arrows: true,
  830.                 responsive: [{
  831.                     breakpoint: 768,
  832.                     settings: {
  833.                         dots: true,
  834.                         arrows: false
  835.                     }
  836.                 }]
  837.             });
  839.             $('.slideThumb').on('click', function() {
  840.                 var index = $(this).attr('data-index');
  841.                 $('.item_visual').slick('slickGoTo', index, false);
  842.             })
  843.         });
  845.     </script>
  846.     <script>
  847.         $(function() {
  848.             $('.add-cart').on('click', function(event) {
  849.                 {% if form.classcategory_id1 is defined %}
  850.                 // 規格1フォームの必須チェック
  851.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  852.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  853.                     return true;
  854.                 } else {
  855.                     $('#classcategory_id1')[0].setCustomValidity('');
  856.                 }
  857.                 {% endif %}
  859.                 {% if form.classcategory_id2 is defined %}
  860.                 // 規格2フォームの必須チェック
  861.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  862.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  863.                     return true;
  864.                 } else {
  865.                     $('#classcategory_id2')[0].setCustomValidity('');
  866.                 }
  867.                 {% endif %}
  869.                 // タイプ2: カート送信直前に set_count を quantity に同期
  870.                 if($('#set_count').length){
  871.                     var _sc = parseInt($('#set_count').val()) || 1;
  872.                     $('#quantity').val(_sc);
  873.                     $('input[name="quantity"]').val(_sc);
  874.                 }
  876.                 // 個数フォームのチェック
  877.                 if ($('#quantity').val() < 1) {
  878.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  879.                     return true;
  880.                 } else {
  881.                     $('#quantity')[0].setCustomValidity('');
  882.                 }
  884.                 event.preventDefault();
  885.                 $form = $('#form1');
  886.                 $.ajax({
  887.                     url: $form.attr('action'),
  888.                     type: $form.attr('method'),
  889.                     data: $form.serialize(),
  890.                     dataType: 'json',
  891.                     beforeSend: function(xhr, settings) {
  892.                         // Buttonを無効にする
  893.                         $('.add-cart').prop('disabled', true);
  894.                     }
  895.                 }).done(function(data) {
  896.                     // レスポンス内のメッセージをalertで表示
  897.                     $.each(data.messages, function() {
  898.                         $('#ec-modal-header').text(this);
  899.                     });
  901.                     $('.ec-modal').show()
  903.                     // カートブロックを更新する
  904.                     $.ajax({
  905.                         url: "{{ url('block_cart') }}",
  906.                         type: 'GET',
  907.                         dataType: 'html'
  908.                     }).done(function(html) {
  909.                         $('.ec-headerRole__cart').html(html);
  910.                     });
  911.                 }).fail(function(data) {
  912.                     alert('{{ '施工検討リストへの追加に失敗しました。'|trans }}');
  913.                 }).always(function(data) {
  914.                     // Buttonを有効にする
  915.                     $('.add-cart').prop('disabled', false);
  916.                 });
  917.             });
  918.         });
  920.         $('.ec-modal-wrap').on('click', function(e) {
  921.             // モーダル内の処理は外側にバブリングさせない
  922.             e.stopPropagation();
  923.         });
  924.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  925.             $('.ec-modal').hide()
  926.         });
  929.         var pw = "{% if mitsumori_json %}{{ mitsumori_json.pw }}{% endif %}";
  930.         var pd = "{% if mitsumori_json %}{{ mitsumori_json.pd }}{% endif %}";
  931.         var ph = "{% if mitsumori_json %}{{ mitsumori_json.ph }}{% endif %}";
  932.         var pm = "{% if mitsumori_json %}{{ mitsumori_json.pm }}{% endif %}";
  933.         var pc = "{% if mitsumori_json %}{{ mitsumori_json.pc }}{% endif %}";
  934.         var op0 = "{% if mitsumori_json %}{{ mitsumori_json.op[0] }}{% endif %}";
  935.         var op1 = "{% if mitsumori_json %}{{ mitsumori_json.op[1] }}{% endif %}";
  936.         var op2 = "{% if mitsumori_json %}{{ mitsumori_json.op[2] }}{% endif %}";
  937.         var op3 = "{% if mitsumori_json %}{{ mitsumori_json.op[3] }}{% endif %}";
  938.         var op4 = "{% if mitsumori_json %}{{ mitsumori_json.op[4] }}{% endif %}";
  939.         var op5 = "{% if mitsumori_json %}{{ mitsumori_json.op[5] }}{% endif %}";
  940.         var op6 = "{% if mitsumori_json %}{{ mitsumori_json.op[6] }}{% endif %}";
  941.         var op7 = "{% if mitsumori_json %}{{ mitsumori_json.op[7] }}{% endif %}";
  942.         var op8 = "{% if mitsumori_json %}{{ mitsumori_json.op[8] }}{% endif %}";
  943.         var op9 = "{% if mitsumori_json %}{{ mitsumori_json.op[9] }}{% endif %}";
  944.         var op10 = "{% if mitsumori_json %}{{ mitsumori_json.op[10] }}{% endif %}";
  946.         const formatter = new Intl.NumberFormat('ja-JP');
  948.         function mitsumori_simulation(type , value_id){
  949.             var pp = {{ pp|raw }};
  950.             if(type == "pw"){
  951.                 pw = $('#'+value_id).val();
  952.             }
  953.             if(type == "pd"){
  954.                 pd = $('#'+value_id).val();
  955.             }
  956.             if(type == "ph"){
  957.                 ph = $('#'+value_id).val();
  958.             }
  959.             if(type == "pm"){
  960.                 pm = $('#'+value_id).val();
  961.             }
  962.             if(type == "pc"){
  963.                 pc = $('#'+value_id).val();
  964.             }
  965.             if(type == "op0"){ op0 = $('#'+value_id).val(); }
  966.             if(type == "op1"){ op1 = $('#'+value_id).val(); }
  967.             if(type == "op2"){ op2 = $('#'+value_id).val(); }
  968.             if(type == "op3"){ op3 = $('#'+value_id).val(); }
  969.             if(type == "op4"){ op4 = $('#'+value_id).val(); }
  970.             if(type == "op5"){ op5 = $('#'+value_id).val(); }
  971.             if(type == "op6"){ op6 = $('#'+value_id).val(); }
  972.             if(type == "op7"){ op7 = $('#'+value_id).val(); }
  973.             if(type == "op8"){ op8 = $('#'+value_id).val(); }
  974.             if(type == "op9"){ op9 = $('#'+value_id).val(); }
  975.             if(type == "op10"){ op10 = $('#'+value_id).val(); }
  977.             // op系: ボタンの is-selected を選択中のものに付け替え + radio チェック
  978.             if(/^op\d+$/.test(type)) {
  979.                 var $clicked = $('#' + value_id);
  980.                 $clicked.prop('checked', true);
  981.                 var groupName = $clicked.attr('name');
  982.                 $('input[name="' + groupName + '"]').closest('.opt-btn').removeClass('is-selected');
  983.                 $clicked.closest('.opt-btn').addClass('is-selected');
  984.                 // ラベルの選択値テキスト更新
  985.                 var $group = $clicked.closest('.form-group');
  986.                 var $label = $group.find('.rp-section-label');
  987.                 if ($label.length) {
  988.                     var labelText = $label.text().split(':')[0].trim();
  989.                     $label.html(labelText + ': <span>' + $clicked.val() + '</span>');
  990.                 }
  991.             }
  993.             if(pm == ""){
  994.                 $('#mitsumori_message').text("素材を選択してください");
  995.             }
  996.             if(ph == ""){
  997.                 $('#mitsumori_message').text("高さを選択してください");
  998.             }
  999.             if(pd == ""){
  1000.                 $('#mitsumori_message').text("奥行きを選択してください");
  1001.             }
  1002.             if(pw == ""){
  1003.                 $('#mitsumori_message').text("幅を選択してください");
  1004.             }
  1005.             if(pc == ""){
  1006.                 $('#mitsumori_message').text("カラーを選択してください");
  1007.                 $('#mitsumori_btn').hide();
  1008.                 $('#mitsumori_goukei').text("---円");
  1009.                 $('#mitsumori_off').text("---円");
  1010.                 $('#mitsumori_price').text("---円");
  1011.                 $('#maker_price').text("---円");
  1012.                 $('#mitsumori_ct').text("---円");
  1013.                 $('#mitsumori_option').text("---円");
  1014.             }
  1015.             if(pw != "" && pd != "" && ph != "" && pm != "" && pc != ""){
  1016.                 $('#mitsumori_btn').show();
  1018.                 var pp_matched = false;
  1019.                 pp.forEach((el) => {
  1020.                   if((pw == el.w || pw == "指定なし") && (pd == el.d || pd == "指定なし") && (ph == el.h || ph == "指定なし") && (pm == el.m || pm == "指定なし") && (pc == el.c || pc == "指定なし")){
  1021.                     pp_matched = true;
  1023.                     if(op0 == "商品購入のみ" || op1 == "商品購入のみ" || op2 == "商品購入のみ" || op3 == "商品購入のみ" || op4 == "商品購入のみ"
  1024.                         || op5 == "商品購入のみ" || op6 == "商品購入のみ" || op7 == "商品購入のみ" || op8 == "商品購入のみ" || op9 == "商品購入のみ"){
  1025.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price)) + "円");
  1026.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price)) + "円");
  1027.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  1028.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  1029.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  1030.                           $('#mitsumori_ct').text("0円");
  1031.                           $('#mitsumori_option').text("0円");
  1033.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price)) + "円");
  1034.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  1035.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  1036.                           $('#mitsumori_ct_01').text("0円");
  1037.                           $('#mitsumori_ct_02').text("0円");
  1038.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price)) + "円");
  1040.                         mitsumori_goukei = (parseInt(el.price));
  1041.                         shoukei = mitsumori_goukei / 1.1;
  1042.                         tax = parseInt(mitsumori_goukei - shoukei);
  1043.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  1044.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  1045.                     }else{
  1046.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  1047.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  1048.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  1049.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  1050.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  1051.                           $('#mitsumori_ct').text(formatter.format(parseInt(el.ct)) + "円");
  1052.                           $('#mitsumori_option').text("0円");
  1054.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  1057.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  1058.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  1059.                           $('#mitsumori_ct_01').text(formatter.format(parseInt(el.ct)) + "円");
  1060.                           $('#mitsumori_ct_02').text(formatter.format(parseInt(el.ct)) + "円");
  1061.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  1063.                         mitsumori_goukei = (parseInt(el.price) + parseInt(el.ct));
  1064.                         shoukei = mitsumori_goukei / 1.1;
  1065.                         tax = parseInt(mitsumori_goukei - shoukei);
  1067.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  1068.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  1070.                     }
  1071.                   }
  1072.                 });
  1074.                 if (!pp_matched) {
  1075.                     $('#mitsumori_message').text("この組み合わせは対応しておりません");
  1076.                     $('#mitsumori_btn').hide();
  1077.                     $('#mitsumori_goukei').text("---円");
  1078.                     $('#mitsumori_off').text("---円");
  1079.                     $('#mitsumori_price').text("---円");
  1080.                     $('#maker_price').text("---円");
  1081.                     $('#mitsumori_ct').text("---円");
  1082.                     $('#mitsumori_option').text("---円");
  1083.                     $('#mitsumori_kei').text("---円");
  1084.                     $('#mitsumori_shoukei').text("---円");
  1085.                     $('#mitsumori_tax').text("---円");
  1086.                 }    
  1089.                 // タイプ5: ステップ・フェンス・面積の現在値を取得
  1090.                 if($('input[name=deck_step]:checked').length){ deck_step = $('input[name=deck_step]:checked').val(); }
  1091.                 if($('input[name=deck_fence]:checked').length){ deck_fence = $('input[name=deck_fence]:checked').val(); }
  1093.                 // タイプ2: 窓サイズ・窓タイプ・ガラスタイプ・セット数
  1094.                 var mado_w_val     = $('#mado_w').val()     || '';
  1095.                 var mado_h_val     = $('#mado_h').val()     || '';
  1096.                 var mado_type_val  = $('input[name=mado_type]:checked').val()  || '';
  1097.                 var glass_type_val = $('input[name=glass_type]:checked').val() || '';
  1098.                 var set_count_val  = parseInt($('#set_count').val()) || 1;
  1100.                 // タイプ3: 台数
  1101.                 var daisu_val = parseInt($('#daisu').val()) || 1;
  1103.                 // タイプ4・6: 枚数
  1104.                 var maisu_val = parseInt($('#maisu').val()) || 1;
  1106.                 // タイプ5: 面積
  1107.                 var area_val = $('#area').val() || '';
  1109.                 // sale_type
  1110.                 var sale_type_id = {{ ProductClass.SaleType.id }};
  1112.                 var mitsumori_json = { "mitsumori_goukei": $('#mitsumori_goukei').text(),
  1113.                                         "mitsumori_goukei_02": $('#mitsumori_goukei_02').text(),
  1114.                                         "mitsumori_price": $('#mitsumori_price').text(),
  1115.                                         "maker_price": $('#maker_price').text(),
  1116.                                         "mitsumori_off": $('#mitsumori_off').text(),
  1117.                                         "mitsumori_ct": $('#mitsumori_ct').text(),
  1118.                                         "mitsumori_option": $('#mitsumori_option').text(),
  1119.                                         "product_id": {{ Product.id }},
  1120.                                         "sale_type": sale_type_id,
  1121.                                         "pw": pw,
  1122.                                         "pd": pd,
  1123.                                         "ph": ph,
  1124.                                         "pm": pm,
  1125.                                         "pc": pc,
  1126.                                         "op": [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10],
  1127.                                         "mado_w":     mado_w_val,
  1128.                                         "mado_h":     mado_h_val,
  1129.                                         "mado_type":  mado_type_val,
  1130.                                         "glass_type": glass_type_val,
  1131.                                         "set_count":  set_count_val,
  1132.                                         "daisu":      daisu_val,
  1133.                                         "maisu":      maisu_val,
  1134.                                         "area":       area_val,
  1135.                                         "deck_step":  deck_step,
  1136.                                         "deck_fence": deck_fence };
  1138.                 $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  1139.                 
  1140.             }
  1141.             
  1143.         }
  1145.         {% if color and color|length == 1 %}
  1146.             pc = "指定なし";
  1147.             {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  1148.         {% endif %}
  1150.         {% if p_w and (p_w|length == 1 or p_w|join == "") %}
  1151.             pw = "指定なし";
  1152.             {% for pw in p_w %}{% if pw %} pw = "{{ pw }}"; {% endif %}{% endfor %}
  1153.         {% endif %}
  1155.         {% if p_d and (p_d|length == 1 or p_d|join == "") %}
  1156.             pd = "指定なし";
  1157.             {% for pd in p_d %}{% if pd %} pd = "{{ pd }}"; {% endif %}{% endfor %}
  1158.         {% endif %}
  1160.         {% if p_h and (p_h|length == 1 or p_h|join == "") %}
  1161.             ph = "指定なし";
  1162.             {% for ph in p_h %}{% if ph %} ph = "{{ ph }}"; {% endif %}{% endfor %}
  1163.         {% endif %}
  1165.         {% if p_m and (p_m|length == 1 or p_m|join == "") %}
  1166.             pm = "指定なし";
  1167.             {% for pm in p_m %}{% if pm %} pm = "{{ pm }}"; {% endif %}{% endfor %}
  1168.         {% endif %}
  1170.         // ページ読み込み時: タイプ別に quantity の初期値をセット
  1171.         (function initQuantityByType(){
  1172.             var saleType = {{ ProductClass.SaleType.id }};
  1173.             if(saleType == 2 && $('#set_count').length){
  1174.                 var _v = parseInt($('#set_count').val()) || 1;
  1175.                 $('#quantity').val(_v);
  1176.                 $('input[name="quantity"]').val(_v);
  1177.             } else if(saleType == 3 && $('#daisu').length){
  1178.                 $('#quantity').val(parseInt($('#daisu').val()) || 1);
  1179.             } else if((saleType == 4 || saleType == 6) && $('#maisu').length){
  1180.                 $('#quantity').val(parseInt($('#maisu').val()) || 1);
  1181.             } else if(saleType == 9 && $('#quantity_only').length){
  1182.                 $('#quantity').val(parseInt($('#quantity_only').val()) || 1);
  1183.             }
  1184.         })();
  1186.         // type → ラベルのプレフィックス文字列
  1187.         var optLabelMap = {pc:'カラー', pw:'幅', pd:'奥行き', ph:'高さ', pm:'素材'};
  1188.         // type → input[name]
  1189.         var optNameMap  = {pc:'color', pw:'pw', pd:'pd', ph:'ph', pm:'pm'};
  1191.         // opt-btn用: 値を直接受け取るラッパー
  1192.         function mitsumori_simulation_val(type, value) {
  1193.             if (type === 'pc') pc = value;
  1194.             if (type === 'pw') pw = value;
  1195.             if (type === 'pd') pd = value;
  1196.             if (type === 'ph') ph = value;
  1197.             if (type === 'pm') pm = value;
  1199.             // is-selected クラスを同グループ内で付け替え
  1200.             var inputName = optNameMap[type];
  1201.             if (inputName) {
  1202.                 var $btns = $('input[name="' + inputName + '"]').closest('.opt-btn');
  1203.                 $btns.removeClass('is-selected');
  1204.                 $btns.filter(function(){
  1205.                     return $(this).find('input').val() === value;
  1206.                 }).addClass('is-selected');
  1207.             }
  1209.             // ラベル行の選択値テキストを更新（例: 「カラー: ブラック」）
  1210.             var labelPrefix = optLabelMap[type];
  1211.             if (labelPrefix) {
  1212.                 // 対象のrp-section-labelを特定（input[name]を含む親を遡る）
  1213.                 var $group = $('input[name="' + inputName + '"]').first().closest('.form-group');
  1214.                 var $label = $group.find('.rp-section-label');
  1215.                 $label.html(labelPrefix + ': <span>' + value + '</span>');
  1216.             }
  1218.             // simulation本体を呼ぶ（value_idは空でOK、グローバル変数を使う）
  1219.             mitsumori_simulation('', '');
  1220.         }
  1222.         mitsumori_simulation("","");
  1224.         // ボタン群: 親幅を超える、または3行以上になる場合は is-scroll で1行横スクロール化
  1225.         function applyBtnGroupScroll() {
  1226.             $('.rp-btn-group, .opt-btn-group').each(function() {
  1227.                 var $group = $(this);
  1228.                 $group.removeClass('is-scroll');
  1229.                 var $items = $group.children();
  1230.                 if ($items.length === 0) return;
  1232.                 var parentWidth = $group.parent().width() || $group.width();
  1233.                 var totalWidth = 0;
  1234.                 var gap = parseInt($group.css('gap'), 10) || 8;
  1235.                 $items.each(function() {
  1236.                     totalWidth += this.offsetWidth + gap;
  1237.                 });
  1239.                 // 単一ボタンが親幅を超える、もしくは合計幅が親幅を超える → 横スクロール化
  1240.                 var anyTooWide = false;
  1241.                 $items.each(function() {
  1242.                     if (this.offsetWidth > parentWidth) { anyTooWide = true; return false; }
  1243.                 });
  1245.                 // 折り返し時の行数も計測
  1246.                 var tops = {};
  1247.                 $items.each(function() { tops[this.offsetTop] = true; });
  1248.                 var rowCount = Object.keys(tops).length;
  1250.                 if (anyTooWide || totalWidth > parentWidth * 2 || rowCount >= 3) {
  1251.                     $group.addClass('is-scroll');
  1252.                 }
  1253.             });
  1254.         }
  1255.         applyBtnGroupScroll();
  1256.         $(window).on('resize', function() {
  1257.             clearTimeout(window._btnScrollTimer);
  1258.             window._btnScrollTimer = setTimeout(applyBtnGroupScroll, 150);
  1259.         });
  1261.         // onload: 見積金額が確定している場合は「工事費込み価格」表示を一致させる
  1262.         (function syncPrice02Display() {
  1263.             var goukeiEl = document.getElementById('mitsumori_goukei');
  1264.             var displayEl = document.getElementById('price02-display');
  1265.             if (!goukeiEl || !displayEl) return;
  1266.             var goukeiText = goukeiEl.textContent.trim();
  1267.             // ---円（未確定）の場合は書き換えない
  1268.             if (goukeiText && goukeiText !== '---円') {
  1269.                 displayEl.textContent = goukeiText;
  1270.             }
  1271.             // 以降の変更にも追従: mitsumori_goukei を監視
  1272.             new MutationObserver(function() {
  1273.                 var text = goukeiEl.textContent.trim();
  1274.                 if (text && text !== '---円') {
  1275.                     displayEl.textContent = text;
  1276.                 }
  1277.             }).observe(goukeiEl, { childList: true, subtree: true, characterData: true });
  1278.         })();
  1279.         function contact_form(product_id){
  1280.             $('#form1').attr('action', '{{ url('contact', {product:Product.id}) }}');
  1281.             $('#form1').submit();
  1282.         }
  1284.         // maisu / madoset は下部の新しい関数定義を使用
  1287.         function heibei(bei){
  1288.             $('#heibei').val(parseInt($('#heibei').val()) + bei);
  1289.             if(parseInt($('#heibei').val()) < 1){ $('#heibei').val(1); }
  1290.             if(parseInt($('#heibei').val()) > 100){ $('#heibei').val(100); }
  1291.             $('#quantity').val($('#heibei').val());
  1292.             mitsumori_simulation('heibei','heibei');
  1293.         }
  1294.         function daisu(dai){
  1295.             $('#daisu').val(parseInt($('#daisu').val()) + dai);
  1296.             if(parseInt($('#daisu').val()) < 1){ $('#daisu').val(1); }
  1297.             if(parseInt($('#daisu').val()) > 10){ $('#daisu').val(10); }
  1298.             $('#quantity').val($('#daisu').val());
  1299.             mitsumori_simulation('daisu','daisu');
  1300.         }
  1301.         function maisu(mai){
  1302.             $('#maisu').val(parseInt($('#maisu').val()) + mai);
  1303.             if(parseInt($('#maisu').val()) < 1){ $('#maisu').val(1); }
  1304.             if(parseInt($('#maisu').val()) > 100){ $('#maisu').val(100); }
  1305.             $('#quantity').val($('#maisu').val());
  1306.             mitsumori_simulation('maisu','maisu');
  1307.         }
  1309.         // タイプ2: セット数プルダウン連動
  1310.         function madosetSelect(val){
  1311.             var v = parseInt(val);
  1312.             if(v < 1) v = 1;
  1313.             if(v > 20) v = 20;
  1314.             // id="quantity" と name="quantity" 両方を確実に書き換え
  1315.             $('#quantity').val(v);
  1316.             $('input[name="quantity"]').val(v);
  1317.             mitsumori_simulation('set','set_count');
  1318.         }
  1319.         // タイプ2: ±ボタン版（後方互換）
  1320.         function madoset(mai){
  1321.             var current = parseInt($('#set_count').val()) || 1;
  1322.             var next = current + mai;
  1323.             if(next < 1) next = 1;
  1324.             if(next > 20) next = 20;
  1325.             $('#set_count').val(next);
  1326.             madosetSelect(next);
  1327.         }
  1329.         // タイプ5: ステップ・フェンス選択値を mitsumori_json に保存するためのグローバル変数
  1330.         var deck_step = "{% if mitsumori_json %}{{ mitsumori_json.deck_step|default('不要') }}{% else %}不要{% endif %}";
  1331.         var deck_fence = "{% if mitsumori_json %}{{ mitsumori_json.deck_fence|default('不要') }}{% else %}不要{% endif %}";
  1333.         // PDF出力: モーダルの mitsumori_json をフォームに同期してから送信
  1334.         function syncPdfJson(){
  1335.             var jsonVal = $('#mitsumori_json').val();
  1336.             $('#pdf_mitsumori_json').val(jsonVal);
  1337.         }
  1339.         // タイプ9: 商品のみ購入
  1340.         function quantityOnly(val){
  1341.             var current = parseInt($('#quantity_only').val()) || 1;
  1342.             var next = current + val;
  1343.             if(next < 1) next = 1;
  1344.             $('#quantity_only').val(next);
  1345.             $('#quantity').val(next);
  1346.         }
  1348.         // ===== スマホ用下部固定バーへの金額同期 =====
  1349.         // mitsumori_message と mitsumori_goukei を監視して下部バーを更新
  1350.         (function() {
  1351.             var msgTarget   = document.getElementById('mitsumori_message');
  1352.             var goukeiTarget = document.getElementById('mitsumori_goukei');
  1353.             var spPrice     = document.getElementById('sp-mitsumori-price');
  1354.             var spBtn       = document.querySelector('#sp-mitsumori-bar .sp-bar__btn');
  1355.             if (!spPrice || !spBtn) return;
  1357.             function syncBar() {
  1358.                 var msg    = msgTarget ? msgTarget.textContent : '';
  1359.                 var goukei = goukeiTarget ? goukeiTarget.textContent : '---円';
  1361.                 // メッセージが「〇〇を選択してください」の場合はメッセージを表示しボタンを非表示
  1362.                 if (msg.indexOf('選択してください') !== -1) {
  1363.                     spPrice.textContent = msg;
  1364.                     spPrice.style.fontSize = '13px';
  1365.                     spPrice.style.color    = '#888';
  1366.                     spBtn.style.display    = 'none';
  1367.                 } else {
  1368.                     // 価格確定時はボタンを表示
  1369.                     spPrice.textContent = goukei;
  1370.                     spPrice.style.fontSize = '18px';
  1371.                     spPrice.style.color    = '#c00';
  1372.                     spBtn.style.display    = 'block';
  1373.                 }
  1374.             }
  1376.             // 初期値を同期
  1377.             syncBar();
  1379.             // mitsumori_message の変化を監視
  1380.             if (msgTarget) {
  1381.                 new MutationObserver(syncBar).observe(
  1382.                     msgTarget, { childList: true, subtree: true, characterData: true }
  1383.                 );
  1384.             }
  1385.             // mitsumori_goukei の変化も監視
  1386.             if (goukeiTarget) {
  1387.                 new MutationObserver(syncBar).observe(
  1388.                     goukeiTarget, { childList: true, subtree: true, characterData: true }
  1389.                 );
  1390.             }
  1391.         })();
  1393.         // ===== 現在のお見積り額: 折りたたみトグルボタンのテキスト切り替え =====
  1394.         (function() {
  1395.             var card = document.querySelector('.mitsumori-card-pc');
  1396.             var btn  = document.querySelector('.btn-mitsumori-toggle .toggle-icon');
  1397.             if (!card || !btn) return;
  1398.             // MutationObserverでcollapsed-cardクラスの変化を監視
  1399.             new MutationObserver(function() {
  1400.                 if (card.classList.contains('collapsed-card')) {
  1401.                     btn.textContent = '▼ 詳細';
  1402.                 } else {
  1403.                     btn.textContent = '▲ 閉じる';
  1404.                 }
  1405.             }).observe(card, { attributes: true, attributeFilter: ['class'] });
  1406.         })();
  1408.         // ===== エリア案内: スマホのみタップで展開 =====
  1409.         (function() {
  1410.             var notice = document.querySelector('.ec-areaNotice');
  1411.             if (!notice) return;
  1412.             notice.addEventListener('click', function(e) {
  1413.                 if (window.innerWidth > 767) return;
  1414.                 // リンククリック時は展開/折りたたみせずリンク遷移
  1415.                 if (e.target.tagName === 'A') return;
  1416.                 notice.classList.toggle('is-open');
  1417.             });
  1418.         })();
  1420.     </script>
  1421.     <script type="application/ld+json">
  1422.     {
  1423.         "@context": "https://schema.org/",
  1424.         "@type": "Product",
  1425.         "name": "{{ Product.name }}",
  1426.         "image": [
  1427.             {% for img in Product.ProductImage %}
  1428.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  1430.             {% else %}
  1431.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  1432.             {% endfor %}
  1433.         ],
  1434.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  1435.         {% if Product.code_min %}
  1436.         "sku": "{{ Product.code_min }}",
  1437.         {% endif %}
  1438.         "offers": {
  1439.             "@type": "Offer",
  1440.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  1441.             "priceCurrency": "{{ eccube_config.currency }}",
  1442.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  1443.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  1444.         }
  1445.     }
  1446.     </script>
  1448. {% endblock %}
  1450. {% block main %}
  1451.     <div class="ec-productRole" style="margin-top:20px;">
  1452.         <div class="ec-grid2">
  1453.             <div class="ec-grid2__cell">
  1454.                 <div class="ec-sliderItemRole">
  1455.                     {# 商品名 + ブランド名 + SNSシェア #}
  1456.                     <div class="ec-productRole__title">
  1457.                         <div class="ec-productRole__titleRow">
  1458.                             <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  1459.                             <div class="ec-share-inline">
  1460.                                 <a href="https://twitter.com/share?url={{ app.request.uri|url_encode }}&text={{ Product.name|url_encode }}"
  1461.                                    class="share-twitter" target="_blank" rel="noreferrer noopener" title="Xでシェア">
  1462.                                     <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>
  1463.                                 </a>
  1464.                                 <a href="https://www.instagram.com/" class="share-facebook" target="_blank" rel="noreferrer noopener" title="Instagram">
  1465.                                     <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>
  1466.                                 </a>
  1467.                                 <a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri|url_encode }}"
  1468.                                    class="share-line" target="_blank" rel="noreferrer noopener" title="LINEでシェア">
  1469.                                     <i class="fab fa-line"></i>
  1470.                                 </a>
  1471.                             </div>
  1472.                         </div>
  1473.                     </div>
  1474.                     {% if BaseInfo.option_favorite_product %}
  1475.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  1476.                         {% if is_favorite == false %}
  1477.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  1478.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  1479.                         </form>
  1480.                         {% else %}
  1481.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  1482.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  1483.                         </form>
  1484.                         {% endif %}
  1485.                      </div>
  1486.                     {% endif %}
  1487.                     <div class="item_visual">
  1488.                         {% for ProductImage in Product.ProductImage %}
  1489.                             <div class="slide-item"><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 %}></div>
  1490.                         {% else %}
  1491.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550" style="max-height: 400px;"></div>
  1492.                         {% endfor %}
  1493.                     </div>
  1494.                     <div class="item_nav">
  1495.                         {% for ProductImage in Product.ProductImage %}
  1496.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  1497.                         {% endfor %}
  1498.                     </div>
  1500.                 </div>
  1502.                     {# ===== 施工エリア案内（見積シミュレーションの下）===== #}
  1503.                     <div class="ec-areaNotice" style="margin-top:16px;margin-right:10px;">
  1504.                         <div class="ec-areaNotice__inner">
  1505.                             <div class="ec-areaNotice__icon">📍</div>
  1506.                             <div class="ec-areaNotice__body">
  1507.                                 <p class="ec-areaNotice__title">施工対応エリアについて</p>
  1508.                                 <div class="ec-areaNotice__detail">
  1509.                                     <p class="ec-areaNotice__text">
  1510.                                         当店の施工サービスは、<strong>山梨県全域</strong>および<br>
  1511.                                         <strong>諏訪エリア（諏訪市・岡谷市・茅野市・諏訪郡）</strong>を対象としております。<br>
  1512.                                         上記エリア外のお客様には、商品のみのご購入が可能でございます。<br>
  1513.                                         ご不明な点がございましたら、お気軽にお問い合わせください。
  1514.                                     </p>
  1515.                                     <a class="ec-areaNotice__link" href="{{ url('contact') }}">エリア外のお客様・ご相談はこちら →</a>
  1516.                                 </div>
  1517.                             </div>
  1518.                         </div>
  1519.                     </div>
  1521.             </div>
  1523.             <div class="ec-grid2__cell2">
  1524.                 <div class="ec-productRole__profile" >
  1525.                     {# 関連カテゴリ #}
  1526.                     {% if Product.ProductCategories is not empty %}
  1527.                         <div class="ec-productRole__category" style="padding:10px 0;">
  1528.                             {% for ProductCategory in Product.ProductCategories %}
  1529.                                 <ul>
  1530.                                     <li>
  1531.                                         {% for Category in ProductCategory.Category.path %}
  1532.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  1533.                                             <span>＞</span>{% endif -%}
  1534.                                         {% endfor %}
  1535.                                     </li>
  1536.                                 </ul>
  1537.                             {% endfor %}
  1538.                         </div>
  1539.                     {% endif %}
  1540.                     {# 販売価格 #}
  1541.                     <div class="ec-productRole__price">
  1542.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  1543.                         {% if Product.hasProductClass -%}
  1544.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  1545.                                 <div class="ec-price">
  1546.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  1547.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  1548.                                 </div>
  1549.                             {% else %}
  1550.                                 <div class="ec-price">
  1551.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  1552.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  1553.                                 </div>
  1554.                             {% endif %}
  1555.                         {% else %}
  1556.                             <div class="ec-price">
  1557.                                 <span id="price02-display" class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  1558.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  1559.                             </div>
  1560.                         {% endif %}
  1561.                     </div>
  1562.                     {# タグ #}
  1563.                     <ul class="ec-productRole__tags">
  1564.                         {% for Tag in Product.Tags %}
  1565.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  1566.                         {% endfor %}
  1567.                     </ul>
  1568.                     {# 商品コード #}
  1569.                     {% if Product.code_min is not empty %}
  1570.                         <div class="ec-productRole__code">
  1571.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  1572.                         </div>
  1573.                     {% endif %}
  1575.                     <div class="ec-productRole__description">
  1576.                         <div class="ec-rectHeading">
  1577.                             <h4>製品情報</h4>
  1578.                         </div>
  1579.                         {{ Product.sales_infomation|raw|nl2br }}
  1580.                     </div>
  1583.                     <div class="card card-danger" style="clear:both;margin:1px;">
  1584.                       <div class="card-header">
  1585.                         <h3 class="card-title">見積シミュレーション</h3>
  1586.                       </div>
  1587.                       <div class="card-body p-2">
  1588.                         {% set related_image = getProduct_field(Product.id,"related_image") %}
  1589.                         {# related_image は配列: ["1段目画像あり","2段目画像あり","3段目画像あり"] のうち該当するものが格納 #}
  1590.                         {% set img1 = related_image and ("1段目画像あり" in related_image) %}
  1591.                         {% set img2 = related_image and ("2段目画像あり" in related_image) %}
  1592.                         {% set img3 = related_image and ("3段目画像あり" in related_image) %}
  1593.                         {% set img4 = related_image and ("4段目画像あり" in related_image) %}
  1594.                         {% set type1 = getProduct_field(Product.id,"related_name1") %}
  1595.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  1596.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  1597.                         {% set type4 = getProduct_field(Product.id,"related_name4") %}
  1598.                         {% set hasRelated = (type1 and related_product1 and related_product1|length)
  1599.                                          or (type2 and related_product2 and related_product2|length)
  1600.                                          or (type3 and related_product3 and related_product3|length)
  1601.                                          or (type4 and related_product4 and related_product4|length) %}
  1602.                         {% if hasRelated %}
  1603.                             <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  1604.                         {% endif %}
  1606.                         {# ===== 1段目 ===== #}
  1607.                         {% if type1 and related_product1 and related_product1|length %}
  1608.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1609.                           <div class="rp-section-label">{{ type1 }}{% if img1 and base_select1 %}: <span>{{ base_select1 }}</span>{% endif %}</div>
  1610.                           {% if img1 %}
  1611.                             {# --- 画像付きカード --- #}
  1612.                             <div class="rp-card-group">
  1613.                               {% for rp_id, rp_name in related_product1 %}
  1614.                                 <label class="rp-card{% if base_select1 == rp_name %} is-selected{% endif %}"
  1615.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1616.                                   <input type="radio" name="rp1" value="{{ rp_name }}"
  1617.                                          {% if base_select1 == rp_name %}checked{% endif %}>
  1618.                                   <img class="rp-card__image"
  1619.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1620.                                        alt="{{ rp_name }}"
  1621.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  1622.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  1623.                                   <span class="rp-card__name">{{ rp_name }}</span>
  1624.                                 </label>
  1625.                               {% endfor %}
  1626.                             </div>
  1627.                           {% else %}
  1628.                             {# --- ボタン式ラジオ --- #}
  1629.                             <div class="rp-btn-group">
  1630.                               {% for rp_id, rp_name in related_product1 %}
  1631.                                 <label class="rp-btn{% if base_select1 == rp_name %} is-selected{% endif %}"
  1632.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1633.                                   <input type="radio" name="rp1" value="{{ rp_name }}"
  1634.                                          {% if base_select1 == rp_name %}checked{% endif %}>
  1635.                                   {{ rp_name }}
  1636.                                 </label>
  1637.                               {% endfor %}
  1638.                             </div>
  1639.                           {% endif %}
  1640.                         </div>
  1641.                         {% endif %}
  1643.                         {# ===== 2段目 ===== #}
  1644.                         {% if type2 and related_product2 and related_product2|length %}
  1645.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1646.                           <div class="rp-section-label">{{ type2 }}{% if img2 and base_select2 %}: <span>{{ base_select2 }}</span>{% endif %}</div>
  1647.                           {% if img2 %}
  1648.                             <div class="rp-card-group">
  1649.                               {% for rp_id, rp_name in related_product2 %}
  1650.                                 <label class="rp-card{% if base_select2 == rp_name %} is-selected{% endif %}"
  1651.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1652.                                   <input type="radio" name="rp2" value="{{ rp_name }}"
  1653.                                          {% if base_select2 == rp_name %}checked{% endif %}>
  1654.                                   <img class="rp-card__image"
  1655.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1656.                                        alt="{{ rp_name }}"
  1657.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  1658.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  1659.                                   <span class="rp-card__name">{{ rp_name }}</span>
  1660.                                 </label>
  1661.                               {% endfor %}
  1662.                             </div>
  1663.                           {% else %}
  1664.                             <div class="rp-btn-group">
  1665.                               {% for rp_id, rp_name in related_product2 %}
  1666.                                 <label class="rp-btn{% if base_select2 == rp_name %} is-selected{% endif %}"
  1667.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1668.                                   <input type="radio" name="rp2" value="{{ rp_name }}"
  1669.                                          {% if base_select2 == rp_name %}checked{% endif %}>
  1670.                                   {{ rp_name }}
  1671.                                 </label>
  1672.                               {% endfor %}
  1673.                             </div>
  1674.                           {% endif %}
  1675.                         </div>
  1676.                         {% endif %}
  1678.                         {# ===== 3段目 ===== #}
  1679.                         {% if type3 and related_product3 and related_product3|length %}
  1680.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1681.                           <div class="rp-section-label">{{ type3 }}{% if img3 and base_select3 %}: <span>{{ base_select3 }}</span>{% endif %}</div>
  1682.                           {% if img3 %}
  1683.                             <div class="rp-card-group">
  1684.                               {% for rp_id, rp_name in related_product3 %}
  1685.                                 <label class="rp-card{% if base_select3 == rp_name %} is-selected{% endif %}"
  1686.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1687.                                   <input type="radio" name="rp3" value="{{ rp_name }}"
  1688.                                          {% if base_select3 == rp_name %}checked{% endif %}>
  1689.                                   <img class="rp-card__image"
  1690.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1691.                                        alt="{{ rp_name }}"
  1692.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  1693.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  1694.                                   <span class="rp-card__name">{{ rp_name }}</span>
  1695.                                 </label>
  1696.                               {% endfor %}
  1697.                             </div>
  1698.                           {% else %}
  1699.                             <div class="rp-btn-group">
  1700.                               {% for rp_id, rp_name in related_product3 %}
  1701.                                 <label class="rp-btn{% if base_select3 == rp_name %} is-selected{% endif %}"
  1702.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1703.                                   <input type="radio" name="rp3" value="{{ rp_name }}"
  1704.                                          {% if base_select3 == rp_name %}checked{% endif %}>
  1705.                                   {{ rp_name }}
  1706.                                 </label>
  1707.                               {% endfor %}
  1708.                             </div>
  1709.                           {% endif %}
  1710.                         </div>
  1711.                         {% endif %}
  1713.                         {# ===== 4段目 ===== #}
  1714.                         {% if type4 and related_product4 and related_product4|length %}
  1715.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1716.                           <div class="rp-section-label">{{ type4 }}{% if img4 and base_select4 %}: <span>{{ base_select4 }}</span>{% endif %}</div>
  1717.                           {% if img4 %}
  1718.                             {# --- 画像付きカード --- #}
  1719.                             <div class="rp-card-group">
  1720.                               {% for rp_id, rp_name in related_product4 %}
  1721.                                 <label class="rp-card{% if base_select4 == rp_name %} is-selected{% endif %}"
  1722.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1723.                                   <input type="radio" name="rp4" value="{{ rp_name }}"
  1724.                                          {% if base_select4 == rp_name %}checked{% endif %}>
  1725.                                   <img class="rp-card__image"
  1726.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1727.                                        alt="{{ rp_name }}" loading="lazy">
  1728.                                   <span class="rp-card__label">{{ rp_name }}</span>
  1729.                                 </label>
  1730.                               {% endfor %}
  1731.                             </div>
  1732.                           {% else %}
  1733.                             {# --- ボタン式ラジオ --- #}
  1734.                             <div class="rp-btn-group">
  1735.                               {% for rp_id, rp_name in related_product4 %}
  1736.                                 <label class="rp-btn{% if base_select4 == rp_name %} is-selected{% endif %}"
  1737.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1738.                                   <input type="radio" name="rp4" value="{{ rp_name }}"
  1739.                                          {% if base_select4 == rp_name %}checked{% endif %}>
  1740.                                   {{ rp_name }}
  1741.                                 </label>
  1742.                               {% endfor %}
  1743.                             </div>
  1744.                           {% endif %}
  1745.                         </div>
  1746.                         {% endif %}
  1749.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のオプションを選択してください。</label></div>
  1751.                         {% if color and color|length and ProductClass.SaleType.id != 3 %}
  1752.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1753.                           <div class="rp-section-label">カラー{% if mitsumori_json and mitsumori_json.pc %}: <span>{{ mitsumori_json.pc }}</span>{% endif %}</div>
  1754.                           <div class="opt-btn-group">
  1755.                             {% set idx = 0 %}
  1756.                             {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  1757.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %} is-selected{% endif %}"
  1758.                                      onclick="mitsumori_simulation_val('pc', '{{ cc['name']|e('js') }}');">
  1759.                                 <input type="radio" name="color" id="cc_{{ idx }}" value="{{ cc['name'] }}"
  1760.                                        {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}>
  1761.                                 {{ cc['name'] }}
  1762.                               </label>
  1763.                             {% endif %}{% endfor %}
  1764.                           </div>
  1765.                         </div>
  1766.                         {% endif %}
  1768.                         {% if p_w and p_w|length and p_w|join != "" %}
  1769.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1770.                           <div class="rp-section-label">幅{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  1771.                           <div class="opt-btn-group">
  1772.                             {% set idx = 0 %}
  1773.                             {% for pw in p_w %}{% if pw %}{% set idx = idx + 1 %}
  1774.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %} is-selected{% endif %}"
  1775.                                      onclick="mitsumori_simulation_val('pw', '{{ pw|e('js') }}');">
  1776.                                 <input type="radio" name="pw" id="pw_{{ idx }}" value="{{ pw }}"
  1777.                                        {% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %}checked{% endif %}>
  1778.                                 {{ pw }}
  1779.                               </label>
  1780.                             {% endif %}{% endfor %}
  1781.                           </div>
  1782.                         </div>
  1783.                         {% endif %}
  1785.                         {% if p_d and p_d|length and p_d|join != "" %}
  1786.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1787.                           <div class="rp-section-label">奥行き{% if mitsumori_json and mitsumori_json.pd %}: <span>{{ mitsumori_json.pd }}</span>{% endif %}</div>
  1788.                           <div class="opt-btn-group">
  1789.                             {% set idx = 0 %}
  1790.                             {% for pd in p_d %}{% if pd %}{% set idx = idx + 1 %}
  1791.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %} is-selected{% endif %}"
  1792.                                      onclick="mitsumori_simulation_val('pd', '{{ pd|e('js') }}');">
  1793.                                 <input type="radio" name="pd" id="pd_{{ idx }}" value="{{ pd }}"
  1794.                                        {% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %}checked{% endif %}>
  1795.                                 {{ pd }}
  1796.                               </label>
  1797.                             {% endif %}{% endfor %}
  1798.                           </div>
  1799.                         </div>
  1800.                         {% endif %}
  1802.                         {% if p_h and p_h|length and p_h|join != "" %}
  1803.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1804.                           <div class="rp-section-label">高さ{% if mitsumori_json and mitsumori_json.ph %}: <span>{{ mitsumori_json.ph }}</span>{% endif %}</div>
  1805.                           <div class="opt-btn-group">
  1806.                             {% set idx = 0 %}
  1807.                             {% for ph in p_h %}{% if ph %}{% set idx = idx + 1 %}
  1808.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %} is-selected{% endif %}"
  1809.                                      onclick="mitsumori_simulation_val('ph', '{{ ph|e('js') }}');">
  1810.                                 <input type="radio" name="ph" id="ph_{{ idx }}" value="{{ ph }}"
  1811.                                        {% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %}checked{% endif %}>
  1812.                                 {{ ph }}
  1813.                               </label>
  1814.                             {% endif %}{% endfor %}
  1815.                           </div>
  1816.                         </div>
  1817.                         {% endif %}
  1819.                         {% if p_m and p_m|length and p_m|join != "" %}
  1820.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1821.                           <div class="rp-section-label">素材{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  1822.                           <div class="opt-btn-group">
  1823.                             {% set idx = 0 %}
  1824.                             {% for pm in p_m %}{% if pm %}{% set idx = idx + 1 %}
  1825.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %} is-selected{% endif %}"
  1826.                                      onclick="mitsumori_simulation_val('pm', '{{ pm|e('js') }}');">
  1827.                                 <input type="radio" name="pm" id="pm_{{ idx }}" value="{{ pm }}"
  1828.                                        {% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %}checked{% endif %}>
  1829.                                 {{ pm }}
  1830.                               </label>
  1831.                             {% endif %}{% endfor %}
  1832.                           </div>
  1833.                         </div>
  1834.                         {% endif %}
  1836.                         <!-- 1: 施工見積（通常） → 幅/奥行/高さ/素材/カラーは上部の共通ブロックで表示済み -->
  1837.                         {% if ProductClass.SaleType.id == 1 %}
  1838.                         {% endif %}
  1840.                         <!-- 2: 施工見積（補助金・窓） -->
  1841.                         {% if ProductClass.SaleType.id == 2 %}
  1843.                             {# 窓サイズ（自由入力） #}
  1844.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1845.                               <label class="col-4 col-form-label">窓サイズ</label>
  1846.                               <div class="col-4">
  1847.                                 <div class="input-group">
  1848.                                   <span class="input-group-text">窓幅</span>
  1849.                                   <input type="number" name="mado_w" id="mado_w" class="form-control" value="{{ mitsumori_json.mado_w|default('') }}" placeholder="例: 90" min="1" onchange="mitsumori_simulation('mado_w','mado_w');">
  1850.                                   <span class="input-group-text">cm</span>
  1851.                                 </div>
  1852.                               </div>
  1853.                               <div class="col-4">
  1854.                                 <div class="input-group">
  1855.                                   <span class="input-group-text">窓高さ</span>
  1856.                                   <input type="number" name="mado_h" id="mado_h" class="form-control" value="{{ mitsumori_json.mado_h|default('') }}" placeholder="例: 110" min="1" onchange="mitsumori_simulation('mado_h','mado_h');">
  1857.                                   <span class="input-group-text">cm</span>
  1858.                                 </div>
  1859.                               </div>
  1860.                             </div>
  1862.                             {# 窓タイプ（p_d データから選択肢を生成） #}
  1863.                             {% if p_d and p_d|length and p_d|join != "" %}
  1864.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1865.                               <label class="col-4 col-form-label">窓タイプ</label>
  1866.                               <div class="col-8">
  1867.                                 <div class="form-group clearfix">
  1868.                                 {% set idx = 0 %}
  1869.                                 {% for pd_val in p_d %}
  1870.                                   {% if pd_val %}
  1871.                                   {% set idx = idx + 1 %}
  1872.                                   <div class="icheck-danger d-inline">
  1873.                                     <input type="radio" name="mado_type" id="mado_type_{{ idx }}" value="{{ pd_val }}"
  1874.                                       {% if (mitsumori_json and mitsumori_json.pd == pd_val) or (p_d|length == 1) %}checked{% endif %}
  1875.                                       onclick="mitsumori_simulation('pd','mado_type_{{ idx }}');">
  1876.                                     <label for="mado_type_{{ idx }}">{{ pd_val }}</label>
  1877.                                   </div>
  1878.                                   {% endif %}
  1879.                                 {% endfor %}
  1880.                                 </div>
  1881.                               </div>
  1882.                             </div>
  1883.                             {% endif %}
  1885.                             {# ガラスタイプ（p_m データから選択肢を生成） #}
  1886.                             {% if p_m and p_m|length and p_m|join != "" %}
  1887.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1888.                               <label class="col-4 col-form-label">ガラスタイプ</label>
  1889.                               <div class="col-8">
  1890.                                 <div class="form-group clearfix">
  1891.                                 {% set idx = 0 %}
  1892.                                 {% for pm_val in p_m %}
  1893.                                   {% if pm_val %}
  1894.                                   {% set idx = idx + 1 %}
  1895.                                   <div class="icheck-danger d-inline">
  1896.                                     <input type="radio" name="glass_type" id="glass_type_{{ idx }}" value="{{ pm_val }}"
  1897.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or (p_m|length == 1) %}checked{% endif %}
  1898.                                       onclick="mitsumori_simulation('pm','glass_type_{{ idx }}');">
  1899.                                     <label for="glass_type_{{ idx }}">{{ pm_val }}</label>
  1900.                                   </div>
  1901.                                   {% endif %}
  1902.                                 {% endfor %}
  1903.                                 </div>
  1904.                               </div>
  1905.                             </div>
  1906.                             {% endif %}
  1908.                             {# セット数（プルダウン） → quantity に連動 #}
  1909.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1910.                               <label class="col-4 col-form-label">セット数</label>
  1911.                               <div class="col-8">
  1912.                                 <select name="set_count" id="set_count" class="form-control" onchange="madosetSelect(this.value);">
  1913.                                   {% for i in 1..20 %}
  1914.                                     <option value="{{ i }}" {% if mitsumori_json and mitsumori_json.set_count == i %}selected{% endif %}>{{ i }} セット</option>
  1915.                                   {% endfor %}
  1916.                                 </select>
  1917.                               </div>
  1918.                             </div>
  1920.                         {% endif %}
  1922.                         <!-- 3: 施工見積（物置・ゴミステーション） -->
  1923.                         {% if ProductClass.SaleType.id == 3 %}
  1925.                             {# 幅・奥行き・高さ（p_w/p_d/p_h からラジオボタン生成） #}
  1926.                             {% if p_w and p_w|length and p_w|join != "" %}
  1927.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1928.                               <label class="col-4 col-form-label">幅</label>
  1929.                               <div class="col-8">
  1930.                                 <div class="form-group clearfix">
  1931.                                 {% set idx = 0 %}
  1932.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  1933.                                   <div class="icheck-danger d-inline">
  1934.                                     <input type="radio" name="pw" id="pw3_{{ idx }}" value="{{ pw_val }}"
  1935.                                       {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}
  1936.                                       onclick="mitsumori_simulation('pw','pw3_{{ idx }}');">
  1937.                                     <label for="pw3_{{ idx }}">{{ pw_val }}</label>
  1938.                                   </div>
  1939.                                 {% endif %}{% endfor %}
  1940.                                 </div>
  1941.                               </div>
  1942.                             </div>
  1943.                             {% endif %}
  1945.                             {% if p_d and p_d|length and p_d|join != "" %}
  1946.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1947.                               <label class="col-4 col-form-label">奥行き</label>
  1948.                               <div class="col-8">
  1949.                                 <div class="form-group clearfix">
  1950.                                 {% set idx = 0 %}
  1951.                                 {% for pd_val in p_d %}{% if pd_val %}{% set idx = idx + 1 %}
  1952.                                   <div class="icheck-danger d-inline">
  1953.                                     <input type="radio" name="pd" id="pd3_{{ idx }}" value="{{ pd_val }}"
  1954.                                       {% if (mitsumori_json and mitsumori_json.pd == pd_val) or p_d|length == 1 %}checked{% endif %}
  1955.                                       onclick="mitsumori_simulation('pd','pd3_{{ idx }}');">
  1956.                                     <label for="pd3_{{ idx }}">{{ pd_val }}</label>
  1957.                                   </div>
  1958.                                 {% endif %}{% endfor %}
  1959.                                 </div>
  1960.                               </div>
  1961.                             </div>
  1962.                             {% endif %}
  1964.                             {% if p_h and p_h|length and p_h|join != "" %}
  1965.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1966.                               <label class="col-4 col-form-label">高さ</label>
  1967.                               <div class="col-8">
  1968.                                 <div class="form-group clearfix">
  1969.                                 {% set idx = 0 %}
  1970.                                 {% for ph_val in p_h %}{% if ph_val %}{% set idx = idx + 1 %}
  1971.                                   <div class="icheck-danger d-inline">
  1972.                                     <input type="radio" name="ph" id="ph3_{{ idx }}" value="{{ ph_val }}"
  1973.                                       {% if (mitsumori_json and mitsumori_json.ph == ph_val) or p_h|length == 1 %}checked{% endif %}
  1974.                                       onclick="mitsumori_simulation('ph','ph3_{{ idx }}');">
  1975.                                     <label for="ph3_{{ idx }}">{{ ph_val }}</label>
  1976.                                   </div>
  1977.                                 {% endif %}{% endfor %}
  1978.                                 </div>
  1979.                               </div>
  1980.                             </div>
  1981.                             {% endif %}
  1983.                             {# 棚タイプ（p_m データから選択肢を生成） #}
  1984.                             {% if p_m and p_m|length and p_m|join != "" %}
  1985.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1986.                               <label class="col-4 col-form-label">棚タイプ<br><small class="text-muted">（間仕切り仕様）</small></label>
  1987.                               <div class="col-8">
  1988.                                 <div class="form-group clearfix">
  1989.                                 {% set idx = 0 %}
  1990.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  1991.                                   <div class="icheck-danger d-inline">
  1992.                                     <input type="radio" name="pm" id="pm3_{{ idx }}" value="{{ pm_val }}"
  1993.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}
  1994.                                       onclick="mitsumori_simulation('pm','pm3_{{ idx }}');">
  1995.                                     <label for="pm3_{{ idx }}">{{ pm_val }}</label>
  1996.                                   </div>
  1997.                                 {% endif %}{% endfor %}
  1998.                                 </div>
  1999.                               </div>
  2000.                             </div>
  2001.                             {% endif %}
  2003.                             {# カラー（共通の color データ使用） #}
  2004.                             {% if color and color|length %}
  2005.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2006.                               <label class="col-4 col-form-label">カラー</label>
  2007.                               <div class="col-8">
  2008.                                 <div class="form-group clearfix">
  2009.                                 {% set idx = 0 %}
  2010.                                 {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  2011.                                   <div class="icheck-danger d-inline">
  2012.                                     <input type="radio" name="color3" id="cc3_{{ idx }}" value="{{ cc['name'] }}"
  2013.                                       {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}
  2014.                                       onclick="mitsumori_simulation('pc','cc3_{{ idx }}');">
  2015.                                     <label for="cc3_{{ idx }}">{{ cc['name'] }}</label>
  2016.                                   </div>
  2017.                                 {% endif %}{% endfor %}
  2018.                                 </div>
  2019.                               </div>
  2020.                             </div>
  2021.                             {% endif %}
  2023.                             {# 台数 #}
  2024.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2025.                               <label class="col-4 col-form-label">台数</label>
  2026.                               <div class="col-4">
  2027.                                 <div class="input-group mb-3">
  2028.                                   <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');">
  2029.                                   <span class="input-group-text">台</span>
  2030.                                 </div>
  2031.                               </div>
  2032.                               <div class="col-4">
  2033.                                 <button type="button" class="btn btn-info" onclick="daisu(+1);">＋</button>
  2034.                                 <button type="button" class="btn btn-danger" onclick="daisu(-1);">ー</button>
  2035.                               </div>
  2036.                             </div>
  2038.                         {% endif %}
  2040.                         <!-- 4: 施工見積（フェンス・組み立て式） -->
  2041.                         {% if ProductClass.SaleType.id == 4 %}
  2043.                             {# 枚数 #}
  2044.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2045.                               <label class="col-4 col-form-label">枚数</label>
  2046.                               <div class="col-4 mb-3">
  2047.                                 <div class="input-group">
  2048.                                   <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');">
  2049.                                   <span class="input-group-text">枚</span>
  2050.                                 </div>
  2051.                               </div>
  2052.                               <div class="col-4">
  2053.                                 <button type="button" class="btn btn-info" onclick="maisu(+1);">＋</button>
  2054.                                 <button type="button" class="btn btn-danger" onclick="maisu(-1);">ー</button>
  2055.                               </div>
  2056.                             </div>
  2058.                         {% endif %}
  2060.                         <!-- 5: 施工見積（ウッドデッキ・タイルデッキ） -->
  2061.                         {% if ProductClass.SaleType.id == 5 %}
  2063.                             {# 施工面積（㎡ 直接入力） #}
  2064.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2065.                               <label class="col-4 col-form-label">施工面積</label>
  2066.                               <div class="col-8">
  2067.                                 <div class="input-group">
  2068.                                   <input type="number" name="area" id="area"
  2069.                                     class="form-control"
  2070.                                     value="{{ mitsumori_json.area|default('') }}"
  2071.                                     placeholder="例: 7.5"
  2072.                                     min="0.1" step="0.1"
  2073.                                     onchange="mitsumori_simulation('area','area');">
  2074.                                   <span class="input-group-text">㎡</span>
  2075.                                 </div>
  2076.                                 <small class="text-muted">幅(cm) × 奥行き(cm) ÷ 10000 = ㎡</small>
  2077.                               </div>
  2078.                             </div>
  2080.                             {# ステップの有無 #}
  2081.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2082.                               <label class="col-4 col-form-label">ステップ</label>
  2083.                               <div class="col-8">
  2084.                                 <div class="form-group clearfix">
  2085.                                   <div class="icheck-danger d-inline">
  2086.                                     <input type="radio" name="deck_step" id="deck_step_yes" value="必要"
  2087.                                       {% if mitsumori_json and mitsumori_json.deck_step == '必要' %}checked{% endif %}
  2088.                                       onclick="mitsumori_simulation('op0','deck_step_yes');">
  2089.                                     <label for="deck_step_yes">必要</label>
  2090.                                   </div>
  2091.                                   <div class="icheck-danger d-inline">
  2092.                                     <input type="radio" name="deck_step" id="deck_step_no" value="不要"
  2093.                                       {% if not mitsumori_json or mitsumori_json.deck_step == '不要' or not mitsumori_json.deck_step %}checked{% endif %}
  2094.                                       onclick="mitsumori_simulation('op0','deck_step_no');">
  2095.                                     <label for="deck_step_no">不要</label>
  2096.                                   </div>
  2097.                                 </div>
  2098.                               </div>
  2099.                             </div>
  2101.                             {# ウッドデッキフェンスの有無 #}
  2102.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2103.                               <label class="col-4 col-form-label">デッキフェンス</label>
  2104.                               <div class="col-8">
  2105.                                 <div class="form-group clearfix">
  2106.                                   <div class="icheck-danger d-inline">
  2107.                                     <input type="radio" name="deck_fence" id="deck_fence_yes" value="必要"
  2108.                                       {% if mitsumori_json and mitsumori_json.deck_fence == '必要' %}checked{% endif %}
  2109.                                       onclick="mitsumori_simulation('op1','deck_fence_yes');">
  2110.                                     <label for="deck_fence_yes">必要</label>
  2111.                                   </div>
  2112.                                   <div class="icheck-danger d-inline">
  2113.                                     <input type="radio" name="deck_fence" id="deck_fence_no" value="不要"
  2114.                                       {% if not mitsumori_json or mitsumori_json.deck_fence == '不要' or not mitsumori_json.deck_fence %}checked{% endif %}
  2115.                                       onclick="mitsumori_simulation('op1','deck_fence_no');">
  2116.                                     <label for="deck_fence_no">不要</label>
  2117.                                   </div>
  2118.                                 </div>
  2119.                               </div>
  2120.                             </div>
  2122.                         {% endif %}
  2124.                         <!-- 6: 施工見積（芝生・枚数・数量買い） -->
  2125.                         {% if ProductClass.SaleType.id == 6 %}
  2127.                             {# 規格（p_m データ → 素材から抽出） #}
  2128.                             {% if p_m and p_m|length and p_m|join != "" %}
  2129.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2130.                               <label class="col-4 col-form-label">規格</label>
  2131.                               <div class="col-8">
  2132.                                 <div class="form-group clearfix">
  2133.                                 {% set idx = 0 %}
  2134.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  2135.                                   <div class="icheck-danger d-inline">
  2136.                                     <input type="radio" name="pm" id="pm6_{{ idx }}" value="{{ pm_val }}"
  2137.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}
  2138.                                       onclick="mitsumori_simulation('pm','pm6_{{ idx }}');">
  2139.                                     <label for="pm6_{{ idx }}">{{ pm_val }}</label>
  2140.                                   </div>
  2141.                                 {% endif %}{% endfor %}
  2142.                                 </div>
  2143.                               </div>
  2144.                             </div>
  2145.                             {% endif %}
  2147.                             {# 芝の長さ（p_w データ → 幅から抽出） #}
  2148.                             {% if p_w and p_w|length and p_w|join != "" %}
  2149.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2150.                               <label class="col-4 col-form-label">芝の長さ</label>
  2151.                               <div class="col-8">
  2152.                                 <div class="form-group clearfix">
  2153.                                 {% set idx = 0 %}
  2154.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  2155.                                   <div class="icheck-danger d-inline">
  2156.                                     <input type="radio" name="pw" id="pw6_{{ idx }}" value="{{ pw_val }}"
  2157.                                       {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}
  2158.                                       onclick="mitsumori_simulation('pw','pw6_{{ idx }}');">
  2159.                                     <label for="pw6_{{ idx }}">{{ pw_val }}</label>
  2160.                                   </div>
  2161.                                 {% endif %}{% endfor %}
  2162.                                 </div>
  2163.                               </div>
  2164.                             </div>
  2165.                             {% endif %}
  2167.                             {# 施工面積（㎡ 自由入力） #}
  2168.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2169.                               <label class="col-4 col-form-label">施工面積</label>
  2170.                               <div class="col-8">
  2171.                                 <div class="input-group">
  2172.                                   <input type="number" name="area" id="area"
  2173.                                     class="form-control"
  2174.                                     value="{{ mitsumori_json.area|default('') }}"
  2175.                                     placeholder="例: 10.5"
  2176.                                     min="0.1" step="0.1"
  2177.                                     onchange="mitsumori_simulation('area','area');">
  2178.                                   <span class="input-group-text">平米</span>
  2179.                                 </div>
  2180.                               </div>
  2181.                             </div>
  2183.                         {% endif %}
  2185.                         <!-- 9: 商品のみ購入 -->
  2186.                         {% if ProductClass.SaleType.id == 9 %}
  2187.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2188.                               <label class="col-4 col-form-label">数量</label>
  2189.                               <div class="col-4">
  2190.                                 <div class="input-group mb-3">
  2191.                                   <input type="number" name="quantity_only" id="quantity_only" class="form-control" value="1" min="1" onchange="$('#quantity').val(this.value);">
  2192.                                   <span class="input-group-text">個</span>
  2193.                                 </div>
  2194.                               </div>
  2195.                               <div class="col-4">
  2196.                                 <button type="button" class="btn btn-info" onclick="quantityOnly(+1);">＋</button>
  2197.                                 <button type="button" class="btn btn-danger" onclick="quantityOnly(-1);">ー</button>
  2198.                               </div>
  2199.                             </div>
  2200.                         {% endif %}
  2205.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  2206.                         {% for i in 0..10 %}
  2207.                             {% if op and op|length >= i+1 %}
  2208.                             {% if op[i]['name'] %}
  2209.                             <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2210.                               <div class="rp-section-label">{{ op[i]['name'] }}{% if mitsumori_json and mitsumori_json.op[i] %}: <span>{{ mitsumori_json.op[i] }}</span>{% endif %}</div>
  2211.                               {% if op[i]['comment'] %}<div class="opt-comment" style="font-size:12px;color:#666;margin:4px 0 6px;">{{ op[i]['comment'] }}</div>{% endif %}
  2212.                               <div class="opt-btn-group">
  2213.                                 <label class="opt-btn{% if mitsumori_json and mitsumori_json.op[i] == op[i]['on'] %} is-selected{% endif %}"
  2214.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_1');">
  2215.                                   <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 %}>
  2216.                                   {{ op[i]['on'] }}
  2217.                                 </label>
  2218.                                 <label class="opt-btn{% if mitsumori_json and mitsumori_json.op[i] == op[i]['off'] %} is-selected{% endif %}"
  2219.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_2');">
  2220.                                   <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 %}>
  2221.                                   {{ op[i]['off'] }}
  2222.                                 </label>
  2223.                               </div>
  2224.                             </div>
  2225.                             {% endif %}
  2226.                             {% endif %}
  2227.                         {% endfor %}
  2229.                       </div>
  2230.                       <!-- /.card-body -->
  2231.                     </div>
  2234.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  2235.                         {% if Product.stock_find %}
  2236.                             <div class="ec-productRole__actions">
  2237.                                 {% if form.classcategory_id1 is defined %}
  2238.                                     <div class="ec-select">
  2239.                                         {{ form_row(form.classcategory_id1) }}
  2240.                                         {{ form_errors(form.classcategory_id1) }}
  2241.                                     </div>
  2242.                                     {% if form.classcategory_id2 is defined %}
  2243.                                         <div class="ec-select">
  2244.                                             {{ form_row(form.classcategory_id2) }}
  2245.                                             {{ form_errors(form.classcategory_id2) }}
  2246.                                         </div>
  2247.                                     {% endif %}
  2248.                                 {% endif %}
  2249.                                 <div class="ec-numberInput">
  2250.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  2251.                                     {{ form_errors(form.quantity) }}
  2252.                                 </div>
  2253.                             </div>
  2255.                         {% else %}
  2256.                             <div class="ec-productRole__btn">
  2257.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  2258.                                     {{ 'ただいま品切れ中です。'|trans }}
  2259.                                 </button>
  2260.                             </div>
  2261.                         {% endif %}
  2262.                         <div class="ec-productRole__btn mt-3">
  2263.                            <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart">施工検討リストに入れる</button>
  2264.                         </div>
  2265.                         {{ form_rest(form) }}
  2266.                     </form>
  2267.                     <div class="ec-modal add-cart-modal">
  2268.                         <div class="ec-modal-overlay">
  2269.                             <div class="ec-modal-wrap add-cart-modal__wrap">
  2270.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  2271.                                 <div id="ec-modal-header" class="text-center add-cart-modal__header">{{ '施工検討リストに追加しました。'|trans }}</div>
  2272.                                 <div class="ec-modal-box add-cart-modal__box">
  2273.                                     <div class="ec-role add-cart-modal__actions">
  2274.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action add-cart-modal__primary">{{ '施工検討リストへ進む'|trans }}</a>
  2275.                                         <span class="ec-inlineBtn--cancel add-cart-modal__secondary">{{ '商品検索を続ける'|trans }}</span>
  2276.                                     </div>
  2277.                                 </div>
  2278.                             </div>
  2279.                         </div>
  2280.                     </div>
  2281.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  2282.                     </div>
  2284.                     {# SNSシェア #}
  2285.                     <div class="ec-productRole__share">
  2286.                         <ul class="ec-share">
  2287.                             <li class="ec-share__item">
  2288.                                 <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">
  2289.                                     <i class="fab fa-twitter"></i>
  2290.                                 </a>
  2291.                             </li>
  2292.                             <li class="ec-share__item">
  2293.                                 <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">
  2294.                                     <i class="fab fa-facebook-f"></i>
  2295.                                 </a>
  2296.                             </li>
  2297.                             <li class="ec-share__item">
  2298.                                 <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">
  2299.                                     <i class="fab fa-line"></i>
  2300.                                 </a>
  2301.                             </li>
  2302.                         </ul>
  2303.                     </div>
  2304.                 </div>
  2305.                 {# ===== スマホ用 見積金額 下部固定バー ===== #}
  2306.                 <div id="sp-mitsumori-bar">
  2307.                     <div>
  2308.                         <div class="sp-bar__label">合計(工事費・税込)</div>
  2309.                         <div class="sp-bar__price" id="sp-mitsumori-price">---円</div>
  2310.                     </div>
  2311.                     <button type="button" class="sp-bar__btn"
  2312.                             onclick="document.getElementById('cart_btn2') && document.getElementById('cart_btn2').click();">
  2313.                         <i class="fas fa-shopping-cart"></i>
  2314.                         <span class="sp-bar__btn-label">検討リストへ</span>
  2315.                         {% set spTotalQty = get_carts_total_quantity() %}
  2316.                         {% if spTotalQty > 0 %}
  2317.                             <span class="sp-bar__cart-badge">{{ spTotalQty|number_format }}</span>
  2318.                         {% endif %}
  2319.                     </button>
  2320.                     <a href="{{ url('homepage') }}" class="sp-bar__home-btn" title="トップページへ">
  2321.                         <i class="fas fa-home"></i>
  2322.                     </a>
  2323.                 </div>
  2325.                 <div class="card col-12 collapsed-card sticky-top float-right mitsumori-card-pc">
  2326.                     <div class="card-header">
  2327.                       <h3 class="card-title">現在のお見積り額</h3>
  2328.                       <div class="card-tools">
  2329.                         <span class="float-left" id="mitsumori_message">395000円</span>
  2330.                         <button type="button" class="btn btn-tool btn-mitsumori-toggle" data-card-widget="collapse" title="詳細を表示">
  2331.                           <span class="toggle-icon">▼ 詳細</span>
  2332.                         </button>
  2333.                       </div>
  2334.                     </div>
  2335.                     <div class="card-body p-0">
  2336.                       <ul class="nav nav-pills flex-column">
  2337.                         <li class="nav-item active">
  2338.                           <a class="nav-link">
  2339.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  2340.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  2341.                           </a>
  2342.                         </li>
  2343.                         <li class="nav-item active">
  2344.                           <a class="nav-link">
  2345.                             <i class="far fa-file-alt"></i> 商品価格
  2346.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  2347.                           </a>
  2348.                         </li>
  2349.                         <li class="nav-item">
  2350.                           <a class="nav-link">
  2351.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  2352.                             <span class="float-right" id="maker_price">479,700円</span>
  2353.                           </a>
  2354.                         </li>
  2355.                         <li class="nav-item">
  2356.                           <a class="nav-link">
  2357.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> お値引き
  2358.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  2359.                           </a>
  2360.                         </li>
  2361.                         <li class="nav-item">
  2362.                           <a class="nav-link">
  2363.                             <i class="far fa-file-alt"></i> 基本工事費
  2364.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  2365.                           </a>
  2366.                         </li>
  2367.                         <li class="nav-item">
  2368.                           <a class="nav-link">
  2369.                             <i class="far fa-file-alt"></i> 施工オプション
  2370.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  2371.                           </a>
  2372.                         </li>
  2373.                       </ul>
  2374.                     </div>
  2375.                     <div class="card-footer">
  2376.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  2377.                           見積書表示
  2378.                         </button>
  2379.                         <button type="submit" id="cart_btn2" class="btn btn-info add-cart">施工検討リストに入れる</button>
  2381.                     </div>
  2382.                 </div>
  2383.             </div>
  2385.         </div>
  2387.     </div>
  2389.   <div class="modal" id="modal-mitsumori">
  2390.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  2391.       <div class="modal-content">
  2392.         <div class="modal-header">
  2393.           <h4 class="modal-title">お見積書</h4>
  2394.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  2395.             <span aria-hidden="true">&times;</span>
  2396.           </button>
  2397.         </div>
  2398.         <div class="modal-body">
  2399.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  2400.               <!-- title row -->
  2401.               <div class="row">
  2402.                 <div class="col-12">
  2403.                   <h2>概算お見積書 
  2404.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  2405.                   </h2>
  2406.                 </div>
  2407.                 <!-- /.col -->
  2408.               </div>
  2409.               <!-- info row -->
  2410.               <div class="row invoice-info">
  2411.                 <div class="col-sm-8 invoice-col">
  2412.                   <h3>お客様</h3>
  2413.                   <span>下記の通り、お見積もり申し上げます。</span>
  2414.                   <br />
  2415.                   <br / >
  2416.                   <br />
  2417.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  2418.                   <span>
  2419.                     <br/>
  2420.                     <br/>
  2421.                     <br/>
  2422.                     <br/>
  2423.                   </span>
  2424.                 </div>
  2425.                 <div class="col-sm-4 invoice-col">
  2426.                   <p>
  2427.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  2428.                   </p>
  2429.                   <p>有限会社プラス</p>
  2430.                   <p>〒400-0334</p>
  2431.                   <p>山梨県南アルプス市藤田1450番地2</p>
  2432.                   <p>TEL: 055-284-6480</p>
  2433.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  2434.                 </div>
  2435.                 <!-- /.col -->
  2436.                 <!-- /.col -->
  2437.               </div>
  2438.               <!-- /.row -->
  2439.               <!-- Table row -->
  2440.               <div class="row">
  2441.                 <div class="col-12 table-responsive">
  2442.                   <table class="table table-striped">
  2443.                     <thead>
  2444.                       <tr>
  2445.                         <th>項目</th>
  2446.                         <th>数量</th>
  2447.                         <th>単位</th>
  2448.                         <th>単価</th>
  2449.                         <th>小計</th>
  2450.                       </tr>
  2451.                     </thead>
  2452.                     <tbody>
  2453.                       <tr>
  2454.                         <td>プレーンルーフ 600タイプ 1台用 単体セット</td>
  2455.                         <td>1</td>
  2456.                         <td>式</td>
  2457.                         <td id="mitsumori_price_01">352,800</td>
  2458.                         <td id="mitsumori_price_02">352,800</td>
  2459.                       </tr>
  2460.                       <tr>
  2461.                         <td>基本工事費</td>
  2462.                         <td>1</td>
  2463.                         <td>式</td>
  2464.                         <td id="mitsumori_ct_01">10,000</td>
  2465.                         <td id="mitsumori_ct_02">10,000</td>
  2466.                       </tr>
  2467.                       <tr>
  2468.                         <td>残土・ガラ処理</td>
  2469.                         <td>1</td>
  2470.                         <td>式</td>
  2471.                         <td>0円</td>
  2472.                         <td></td>
  2473.                       </tr>
  2474.                       <tr>
  2475.                         <td>　</td>
  2476.                         <td></td>
  2477.                         <td></td>
  2478.                         <td></td>
  2479.                         <td></td>
  2480.                       </tr>
  2481.                     </tbody>
  2482.                   </table>
  2483.                 </div>
  2484.                 <!-- /.col -->
  2485.               </div>
  2486.               <!-- /.row -->
  2487.               <div class="row">
  2488.                 <!-- accepted payments column -->
  2489.                 <div class="col-6">
  2490.                   <p class="lead">お支払い方法</p>
  2491.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  2492.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  2493.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  2494.                   </p>
  2495.                 </div>
  2496.                 <!-- /.col -->
  2497.                 <div class="col-6">
  2498.                   <div class="table-responsive">
  2499.                     <table class="table">
  2500.                       <tbody>
  2501.                         <tr>
  2502.                           <th style="width:50%">小計:</th>
  2503.                           <td id="mitsumori_shoukei">362,800</td>
  2504.                         </tr>
  2505.                         <tr>
  2506.                           <th>消費税 (10%)</th>
  2507.                           <td id="mitsumori_tax">36,280</td>
  2508.                         </tr>
  2509.                         <tr>
  2510.                           <th>合計:</th>
  2511.                           <td id="mitsumori_goukei_02">399,080</td>
  2512.                         </tr>
  2513.                       </tbody>
  2514.                     </table>
  2515.                   </div>
  2516.                 </div>
  2517.                 <!-- /.col -->
  2518.               </div>
  2519.               <!-- /.row -->
  2520.             </div>
  2521.         </div>
  2522.         <div class="modal-footer justify-content-between">
  2523.                   {# PDF出力: mitsumori_json を POST して PDF ダウンロード #}
  2524.                   <form method="post" action="{{ url('mitsumori_pdf') }}" target="_blank" id="pdf_download_form">
  2525.                     <input type="hidden" name="_token" value="{{ csrf_token('mitsumori_pdf') }}">
  2526.                     <input type="hidden" name="mitsumori_json" id="pdf_mitsumori_json">
  2527.                     <button type="submit" class="btn btn-primary float-right" style="margin-right: 5px;" onclick="syncPdfJson();">
  2528.                       <i class="fas fa-download"></i>PDF出力
  2529.                     </button>
  2530.                   </form>
  2531.                   <button type="submit" id="cart_btn3" class="btn btn-info add-cart">施工検討リストに入れる</button>
  2532.         </div>
  2533.       </div>
  2534.       <!-- /.modal-content -->
  2535.     </div>
  2536.     <!-- /.modal-dialog -->
  2537.   </div>
  2538.   <!-- /.modal -->
  2542. {% endblock %}