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

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.             }
  653.             /* 下部バーの高さ分ページ下部にpaddingを追加 */
  654.             body {
  655.                 padding-bottom: 64px;
  656.             }
  657.         }
  658.     </style>
  659. {% endblock %}
  661. {% block javascript %}
  663.     <script>
  664.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  666.         // 規格2に選択肢を割り当てる。
  667.         function fnSetClassCategories(form, classcat_id2_selected) {
  668.             var $form = $(form);
  669.             var product_id = $form.find('input[name=product_id]').val();
  670.             var $sele1 = $form.find('select[name=classcategory_id1]');
  671.             var $sele2 = $form.find('select[name=classcategory_id2]');
  672.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  673.         }
  675.         {% if form.classcategory_id2 is defined %}
  676.         fnSetClassCategories(
  677.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  678.         );
  679.         {% elseif form.classcategory_id1 is defined %}
  680.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  681.         {% endif %}
  682.     </script>
  683.     <script>
  684.         $(function() {
  685.             // bfcache無効化
  686.             $(window).bind('pageshow', function(event) {
  687.                 if (event.originalEvent.persisted) {
  688.                     location.reload(true);
  689.                 }
  690.             });
  692.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  693.             // img タグに width, height が付与されている.
  694.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  695.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  696.             $('.ec-grid2__cell').hide();
  697.             var removeSize = function () {
  698.                 $('.slide-item').height('');
  699.                 $('.slide-item img')
  700.                     .removeAttr('width')
  701.                     .removeAttr('height')
  702.                     .removeAttr('style');
  704.             };
  705.             var slickInitial = function(slick) {
  706.                 $('.ec-grid2__cell').fadeIn(1500);
  707.                 var baseHeight = $(slick.target).height();
  708.                 var baseWidth = $(slick.target).width();
  709.                 var rate = baseWidth / baseHeight;
  710.                 if(baseHeight * rate < 400){
  711.                     $('.slide-item').height(baseHeight * rate); // 余白を削除する
  712.                 }else{
  713.                     $('.slide-item').height(400); // 余白を削除する
  714.                 }
  715.                 // transform を使用することでCLSの影響を受けないようにする
  716.                 $('.slide-item img')
  717.                     .css(
  718.                         {
  719.                             'transform-origin': 'top left',
  720.                             'transform': 'scaleY(' + rate + ')',
  721.                             'transition': 'transform .1s'
  722.                         }
  723.                     );
  724.                 // 正しいサイズに近くなったら属性を解除する
  725.                 setTimeout(removeSize, 500);
  726.             };
  727.             $('.item_visual').on('init', slickInitial);
  728.             // リサイズ時は CLS の影響を受けないため属性を解除する
  729.             $(window).resize(removeSize);
  730.             $('.item_visual').slick({
  731.                 dots: false,
  732.                 arrows: true,
  733.                 responsive: [{
  734.                     breakpoint: 768,
  735.                     settings: {
  736.                         dots: true,
  737.                         arrows: false
  738.                     }
  739.                 }]
  740.             });
  742.             $('.slideThumb').on('click', function() {
  743.                 var index = $(this).attr('data-index');
  744.                 $('.item_visual').slick('slickGoTo', index, false);
  745.             })
  746.         });
  748.     </script>
  749.     <script>
  750.         $(function() {
  751.             $('.add-cart').on('click', function(event) {
  752.                 {% if form.classcategory_id1 is defined %}
  753.                 // 規格1フォームの必須チェック
  754.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  755.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  756.                     return true;
  757.                 } else {
  758.                     $('#classcategory_id1')[0].setCustomValidity('');
  759.                 }
  760.                 {% endif %}
  762.                 {% if form.classcategory_id2 is defined %}
  763.                 // 規格2フォームの必須チェック
  764.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  765.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  766.                     return true;
  767.                 } else {
  768.                     $('#classcategory_id2')[0].setCustomValidity('');
  769.                 }
  770.                 {% endif %}
  772.                 // タイプ2: カート送信直前に set_count を quantity に同期
  773.                 if($('#set_count').length){
  774.                     var _sc = parseInt($('#set_count').val()) || 1;
  775.                     $('#quantity').val(_sc);
  776.                     $('input[name="quantity"]').val(_sc);
  777.                 }
  779.                 // 個数フォームのチェック
  780.                 if ($('#quantity').val() < 1) {
  781.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  782.                     return true;
  783.                 } else {
  784.                     $('#quantity')[0].setCustomValidity('');
  785.                 }
  787.                 event.preventDefault();
  788.                 $form = $('#form1');
  789.                 $.ajax({
  790.                     url: $form.attr('action'),
  791.                     type: $form.attr('method'),
  792.                     data: $form.serialize(),
  793.                     dataType: 'json',
  794.                     beforeSend: function(xhr, settings) {
  795.                         // Buttonを無効にする
  796.                         $('.add-cart').prop('disabled', true);
  797.                     }
  798.                 }).done(function(data) {
  799.                     // レスポンス内のメッセージをalertで表示
  800.                     $.each(data.messages, function() {
  801.                         $('#ec-modal-header').text(this);
  802.                     });
  804.                     $('.ec-modal').show()
  806.                     // カートブロックを更新する
  807.                     $.ajax({
  808.                         url: "{{ url('block_cart') }}",
  809.                         type: 'GET',
  810.                         dataType: 'html'
  811.                     }).done(function(html) {
  812.                         $('.ec-headerRole__cart').html(html);
  813.                     });
  814.                 }).fail(function(data) {
  815.                     alert('{{ '施工検討リストへの追加に失敗しました。'|trans }}');
  816.                 }).always(function(data) {
  817.                     // Buttonを有効にする
  818.                     $('.add-cart').prop('disabled', false);
  819.                 });
  820.             });
  821.         });
  823.         $('.ec-modal-wrap').on('click', function(e) {
  824.             // モーダル内の処理は外側にバブリングさせない
  825.             e.stopPropagation();
  826.         });
  827.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  828.             $('.ec-modal').hide()
  829.         });
  832.         var pw = "{% if mitsumori_json %}{{ mitsumori_json.pw }}{% endif %}";
  833.         var pd = "{% if mitsumori_json %}{{ mitsumori_json.pd }}{% endif %}";
  834.         var ph = "{% if mitsumori_json %}{{ mitsumori_json.ph }}{% endif %}";
  835.         var pm = "{% if mitsumori_json %}{{ mitsumori_json.pm }}{% endif %}";
  836.         var pc = "{% if mitsumori_json %}{{ mitsumori_json.pc }}{% endif %}";
  837.         var op0 = "{% if mitsumori_json %}{{ mitsumori_json.op[0] }}{% endif %}";
  838.         var op1 = "{% if mitsumori_json %}{{ mitsumori_json.op[1] }}{% endif %}";
  839.         var op2 = "{% if mitsumori_json %}{{ mitsumori_json.op[2] }}{% endif %}";
  840.         var op3 = "{% if mitsumori_json %}{{ mitsumori_json.op[3] }}{% endif %}";
  841.         var op4 = "{% if mitsumori_json %}{{ mitsumori_json.op[4] }}{% endif %}";
  842.         var op5 = "{% if mitsumori_json %}{{ mitsumori_json.op[5] }}{% endif %}";
  843.         var op6 = "{% if mitsumori_json %}{{ mitsumori_json.op[6] }}{% endif %}";
  844.         var op7 = "{% if mitsumori_json %}{{ mitsumori_json.op[7] }}{% endif %}";
  845.         var op8 = "{% if mitsumori_json %}{{ mitsumori_json.op[8] }}{% endif %}";
  846.         var op9 = "{% if mitsumori_json %}{{ mitsumori_json.op[9] }}{% endif %}";
  847.         var op10 = "{% if mitsumori_json %}{{ mitsumori_json.op[10] }}{% endif %}";
  849.         const formatter = new Intl.NumberFormat('ja-JP');
  851.         function mitsumori_simulation(type , value_id){
  852.             var pp = {{ pp|raw }};
  853.             if(type == "pw"){
  854.                 pw = $('#'+value_id).val();
  855.             }
  856.             if(type == "pd"){
  857.                 pd = $('#'+value_id).val();
  858.             }
  859.             if(type == "ph"){
  860.                 ph = $('#'+value_id).val();
  861.             }
  862.             if(type == "pm"){
  863.                 pm = $('#'+value_id).val();
  864.             }
  865.             if(type == "pc"){
  866.                 pc = $('#'+value_id).val();
  867.             }
  868.             if(type == "op0"){ op0 = $('#'+value_id).val(); }
  869.             if(type == "op1"){ op1 = $('#'+value_id).val(); }
  870.             if(type == "op2"){ op2 = $('#'+value_id).val(); }
  871.             if(type == "op3"){ op3 = $('#'+value_id).val(); }
  872.             if(type == "op4"){ op4 = $('#'+value_id).val(); }
  873.             if(type == "op5"){ op5 = $('#'+value_id).val(); }
  874.             if(type == "op6"){ op6 = $('#'+value_id).val(); }
  875.             if(type == "op7"){ op7 = $('#'+value_id).val(); }
  876.             if(type == "op8"){ op8 = $('#'+value_id).val(); }
  877.             if(type == "op9"){ op9 = $('#'+value_id).val(); }
  878.             if(type == "op10"){ op10 = $('#'+value_id).val(); }
  880.             // op系: ボタンの is-selected を選択中のものに付け替え + radio チェック
  881.             if(/^op\d+$/.test(type)) {
  882.                 var $clicked = $('#' + value_id);
  883.                 $clicked.prop('checked', true);
  884.                 var groupName = $clicked.attr('name');
  885.                 $('input[name="' + groupName + '"]').closest('.opt-btn').removeClass('is-selected');
  886.                 $clicked.closest('.opt-btn').addClass('is-selected');
  887.                 // ラベルの選択値テキスト更新
  888.                 var $group = $clicked.closest('.form-group');
  889.                 var $label = $group.find('.rp-section-label');
  890.                 if ($label.length) {
  891.                     var labelText = $label.text().split(':')[0].trim();
  892.                     $label.html(labelText + ': <span>' + $clicked.val() + '</span>');
  893.                 }
  894.             }
  896.             if(pm == ""){
  897.                 $('#mitsumori_message').text("素材を選択してください");
  898.             }
  899.             if(ph == ""){
  900.                 $('#mitsumori_message').text("高さを選択してください");
  901.             }
  902.             if(pd == ""){
  903.                 $('#mitsumori_message').text("奥行きを選択してください");
  904.             }
  905.             if(pw == ""){
  906.                 $('#mitsumori_message').text("幅を選択してください");
  907.             }
  908.             if(pc == ""){
  909.                 $('#mitsumori_message').text("カラーを選択してください");
  910.                 $('#mitsumori_btn').hide();
  911.                 $('#mitsumori_goukei').text("---円");
  912.                 $('#mitsumori_off').text("---円");
  913.                 $('#mitsumori_price').text("---円");
  914.                 $('#maker_price').text("---円");
  915.                 $('#mitsumori_ct').text("---円");
  916.                 $('#mitsumori_option').text("---円");
  917.             }
  918.             if(pw != "" && pd != "" && ph != "" && pm != "" && pc != ""){
  919.                 $('#mitsumori_btn').show();
  921.                 var pp_matched = false;
  922.                 pp.forEach((el) => {
  923.                   if((pw == el.w || pw == "指定なし") && (pd == el.d || pd == "指定なし") && (ph == el.h || ph == "指定なし") && (pm == el.m || pm == "指定なし") && (pc == el.c || pc == "指定なし")){
  924.                     pp_matched = true;
  926.                     if(op0 == "商品購入のみ" || op1 == "商品購入のみ" || op2 == "商品購入のみ" || op3 == "商品購入のみ" || op4 == "商品購入のみ"
  927.                         || op5 == "商品購入のみ" || op6 == "商品購入のみ" || op7 == "商品購入のみ" || op8 == "商品購入のみ" || op9 == "商品購入のみ"){
  928.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price)) + "円");
  929.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price)) + "円");
  930.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  931.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  932.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  933.                           $('#mitsumori_ct').text("0円");
  934.                           $('#mitsumori_option').text("0円");
  936.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price)) + "円");
  937.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  938.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  939.                           $('#mitsumori_ct_01').text("0円");
  940.                           $('#mitsumori_ct_02').text("0円");
  941.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price)) + "円");
  943.                         mitsumori_goukei = (parseInt(el.price));
  944.                         shoukei = mitsumori_goukei / 1.1;
  945.                         tax = parseInt(mitsumori_goukei - shoukei);
  946.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  947.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  948.                     }else{
  949.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  950.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  951.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  952.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  953.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  954.                           $('#mitsumori_ct').text(formatter.format(parseInt(el.ct)) + "円");
  955.                           $('#mitsumori_option').text("0円");
  957.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  960.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  961.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  962.                           $('#mitsumori_ct_01').text(formatter.format(parseInt(el.ct)) + "円");
  963.                           $('#mitsumori_ct_02').text(formatter.format(parseInt(el.ct)) + "円");
  964.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  966.                         mitsumori_goukei = (parseInt(el.price) + parseInt(el.ct));
  967.                         shoukei = mitsumori_goukei / 1.1;
  968.                         tax = parseInt(mitsumori_goukei - shoukei);
  970.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  971.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  973.                     }
  974.                   }
  975.                 });
  977.                 if (!pp_matched) {
  978.                     $('#mitsumori_message').text("この組み合わせは対応しておりません");
  979.                     $('#mitsumori_btn').hide();
  980.                     $('#mitsumori_goukei').text("---円");
  981.                     $('#mitsumori_off').text("---円");
  982.                     $('#mitsumori_price').text("---円");
  983.                     $('#maker_price').text("---円");
  984.                     $('#mitsumori_ct').text("---円");
  985.                     $('#mitsumori_option').text("---円");
  986.                     $('#mitsumori_kei').text("---円");
  987.                     $('#mitsumori_shoukei').text("---円");
  988.                     $('#mitsumori_tax').text("---円");
  989.                 }    
  992.                 // タイプ5: ステップ・フェンス・面積の現在値を取得
  993.                 if($('input[name=deck_step]:checked').length){ deck_step = $('input[name=deck_step]:checked').val(); }
  994.                 if($('input[name=deck_fence]:checked').length){ deck_fence = $('input[name=deck_fence]:checked').val(); }
  996.                 // タイプ2: 窓サイズ・窓タイプ・ガラスタイプ・セット数
  997.                 var mado_w_val     = $('#mado_w').val()     || '';
  998.                 var mado_h_val     = $('#mado_h').val()     || '';
  999.                 var mado_type_val  = $('input[name=mado_type]:checked').val()  || '';
  1000.                 var glass_type_val = $('input[name=glass_type]:checked').val() || '';
  1001.                 var set_count_val  = parseInt($('#set_count').val()) || 1;
  1003.                 // タイプ3: 台数
  1004.                 var daisu_val = parseInt($('#daisu').val()) || 1;
  1006.                 // タイプ4・6: 枚数
  1007.                 var maisu_val = parseInt($('#maisu').val()) || 1;
  1009.                 // タイプ5: 面積
  1010.                 var area_val = $('#area').val() || '';
  1012.                 // sale_type
  1013.                 var sale_type_id = {{ ProductClass.SaleType.id }};
  1015.                 var mitsumori_json = { "mitsumori_goukei": $('#mitsumori_goukei').text(),
  1016.                                         "mitsumori_goukei_02": $('#mitsumori_goukei_02').text(),
  1017.                                         "mitsumori_price": $('#mitsumori_price').text(),
  1018.                                         "maker_price": $('#maker_price').text(),
  1019.                                         "mitsumori_off": $('#mitsumori_off').text(),
  1020.                                         "mitsumori_ct": $('#mitsumori_ct').text(),
  1021.                                         "mitsumori_option": $('#mitsumori_option').text(),
  1022.                                         "product_id": {{ Product.id }},
  1023.                                         "sale_type": sale_type_id,
  1024.                                         "pw": pw,
  1025.                                         "pd": pd,
  1026.                                         "ph": ph,
  1027.                                         "pm": pm,
  1028.                                         "pc": pc,
  1029.                                         "op": [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10],
  1030.                                         "mado_w":     mado_w_val,
  1031.                                         "mado_h":     mado_h_val,
  1032.                                         "mado_type":  mado_type_val,
  1033.                                         "glass_type": glass_type_val,
  1034.                                         "set_count":  set_count_val,
  1035.                                         "daisu":      daisu_val,
  1036.                                         "maisu":      maisu_val,
  1037.                                         "area":       area_val,
  1038.                                         "deck_step":  deck_step,
  1039.                                         "deck_fence": deck_fence };
  1041.                 $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  1042.                 
  1043.             }
  1044.             
  1046.         }
  1048.         {% if color and color|length == 1 %}
  1049.             pc = "指定なし";
  1050.             {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  1051.         {% endif %}
  1053.         {% if p_w and (p_w|length == 1 or p_w|join == "") %}
  1054.             pw = "指定なし";
  1055.             {% for pw in p_w %}{% if pw %} pw = "{{ pw }}"; {% endif %}{% endfor %}
  1056.         {% endif %}
  1058.         {% if p_d and (p_d|length == 1 or p_d|join == "") %}
  1059.             pd = "指定なし";
  1060.             {% for pd in p_d %}{% if pd %} pd = "{{ pd }}"; {% endif %}{% endfor %}
  1061.         {% endif %}
  1063.         {% if p_h and (p_h|length == 1 or p_h|join == "") %}
  1064.             ph = "指定なし";
  1065.             {% for ph in p_h %}{% if ph %} ph = "{{ ph }}"; {% endif %}{% endfor %}
  1066.         {% endif %}
  1068.         {% if p_m and (p_m|length == 1 or p_m|join == "") %}
  1069.             pm = "指定なし";
  1070.             {% for pm in p_m %}{% if pm %} pm = "{{ pm }}"; {% endif %}{% endfor %}
  1071.         {% endif %}
  1073.         // ページ読み込み時: タイプ別に quantity の初期値をセット
  1074.         (function initQuantityByType(){
  1075.             var saleType = {{ ProductClass.SaleType.id }};
  1076.             if(saleType == 2 && $('#set_count').length){
  1077.                 var _v = parseInt($('#set_count').val()) || 1;
  1078.                 $('#quantity').val(_v);
  1079.                 $('input[name="quantity"]').val(_v);
  1080.             } else if(saleType == 3 && $('#daisu').length){
  1081.                 $('#quantity').val(parseInt($('#daisu').val()) || 1);
  1082.             } else if((saleType == 4 || saleType == 6) && $('#maisu').length){
  1083.                 $('#quantity').val(parseInt($('#maisu').val()) || 1);
  1084.             } else if(saleType == 9 && $('#quantity_only').length){
  1085.                 $('#quantity').val(parseInt($('#quantity_only').val()) || 1);
  1086.             }
  1087.         })();
  1089.         // type → ラベルのプレフィックス文字列
  1090.         var optLabelMap = {pc:'カラー', pw:'幅', pd:'奥行き', ph:'高さ', pm:'素材'};
  1091.         // type → input[name]
  1092.         var optNameMap  = {pc:'color', pw:'pw', pd:'pd', ph:'ph', pm:'pm'};
  1094.         // opt-btn用: 値を直接受け取るラッパー
  1095.         function mitsumori_simulation_val(type, value) {
  1096.             if (type === 'pc') pc = value;
  1097.             if (type === 'pw') pw = value;
  1098.             if (type === 'pd') pd = value;
  1099.             if (type === 'ph') ph = value;
  1100.             if (type === 'pm') pm = value;
  1102.             // is-selected クラスを同グループ内で付け替え
  1103.             var inputName = optNameMap[type];
  1104.             if (inputName) {
  1105.                 var $btns = $('input[name="' + inputName + '"]').closest('.opt-btn');
  1106.                 $btns.removeClass('is-selected');
  1107.                 $btns.filter(function(){
  1108.                     return $(this).find('input').val() === value;
  1109.                 }).addClass('is-selected');
  1110.             }
  1112.             // ラベル行の選択値テキストを更新（例: 「カラー: ブラック」）
  1113.             var labelPrefix = optLabelMap[type];
  1114.             if (labelPrefix) {
  1115.                 // 対象のrp-section-labelを特定（input[name]を含む親を遡る）
  1116.                 var $group = $('input[name="' + inputName + '"]').first().closest('.form-group');
  1117.                 var $label = $group.find('.rp-section-label');
  1118.                 $label.html(labelPrefix + ': <span>' + value + '</span>');
  1119.             }
  1121.             // simulation本体を呼ぶ（value_idは空でOK、グローバル変数を使う）
  1122.             mitsumori_simulation('', '');
  1123.         }
  1125.         mitsumori_simulation("","");
  1127.         // ボタン群: 親幅を超える、または3行以上になる場合は is-scroll で1行横スクロール化
  1128.         function applyBtnGroupScroll() {
  1129.             $('.rp-btn-group, .opt-btn-group').each(function() {
  1130.                 var $group = $(this);
  1131.                 $group.removeClass('is-scroll');
  1132.                 var $items = $group.children();
  1133.                 if ($items.length === 0) return;
  1135.                 var parentWidth = $group.parent().width() || $group.width();
  1136.                 var totalWidth = 0;
  1137.                 var gap = parseInt($group.css('gap'), 10) || 8;
  1138.                 $items.each(function() {
  1139.                     totalWidth += this.offsetWidth + gap;
  1140.                 });
  1142.                 // 単一ボタンが親幅を超える、もしくは合計幅が親幅を超える → 横スクロール化
  1143.                 var anyTooWide = false;
  1144.                 $items.each(function() {
  1145.                     if (this.offsetWidth > parentWidth) { anyTooWide = true; return false; }
  1146.                 });
  1148.                 // 折り返し時の行数も計測
  1149.                 var tops = {};
  1150.                 $items.each(function() { tops[this.offsetTop] = true; });
  1151.                 var rowCount = Object.keys(tops).length;
  1153.                 if (anyTooWide || totalWidth > parentWidth * 2 || rowCount >= 3) {
  1154.                     $group.addClass('is-scroll');
  1155.                 }
  1156.             });
  1157.         }
  1158.         applyBtnGroupScroll();
  1159.         $(window).on('resize', function() {
  1160.             clearTimeout(window._btnScrollTimer);
  1161.             window._btnScrollTimer = setTimeout(applyBtnGroupScroll, 150);
  1162.         });
  1164.         // onload: 見積金額が確定している場合は「工事費込み価格」表示を一致させる
  1165.         (function syncPrice02Display() {
  1166.             var goukeiEl = document.getElementById('mitsumori_goukei');
  1167.             var displayEl = document.getElementById('price02-display');
  1168.             if (!goukeiEl || !displayEl) return;
  1169.             var goukeiText = goukeiEl.textContent.trim();
  1170.             // ---円（未確定）の場合は書き換えない
  1171.             if (goukeiText && goukeiText !== '---円') {
  1172.                 displayEl.textContent = goukeiText;
  1173.             }
  1174.             // 以降の変更にも追従: mitsumori_goukei を監視
  1175.             new MutationObserver(function() {
  1176.                 var text = goukeiEl.textContent.trim();
  1177.                 if (text && text !== '---円') {
  1178.                     displayEl.textContent = text;
  1179.                 }
  1180.             }).observe(goukeiEl, { childList: true, subtree: true, characterData: true });
  1181.         })();
  1182.         function contact_form(product_id){
  1183.             $('#form1').attr('action', '{{ url('contact', {product:Product.id}) }}');
  1184.             $('#form1').submit();
  1185.         }
  1187.         // maisu / madoset は下部の新しい関数定義を使用
  1190.         function heibei(bei){
  1191.             $('#heibei').val(parseInt($('#heibei').val()) + bei);
  1192.             if(parseInt($('#heibei').val()) < 1){ $('#heibei').val(1); }
  1193.             if(parseInt($('#heibei').val()) > 100){ $('#heibei').val(100); }
  1194.             $('#quantity').val($('#heibei').val());
  1195.             mitsumori_simulation('heibei','heibei');
  1196.         }
  1197.         function daisu(dai){
  1198.             $('#daisu').val(parseInt($('#daisu').val()) + dai);
  1199.             if(parseInt($('#daisu').val()) < 1){ $('#daisu').val(1); }
  1200.             if(parseInt($('#daisu').val()) > 10){ $('#daisu').val(10); }
  1201.             $('#quantity').val($('#daisu').val());
  1202.             mitsumori_simulation('daisu','daisu');
  1203.         }
  1204.         function maisu(mai){
  1205.             $('#maisu').val(parseInt($('#maisu').val()) + mai);
  1206.             if(parseInt($('#maisu').val()) < 1){ $('#maisu').val(1); }
  1207.             if(parseInt($('#maisu').val()) > 100){ $('#maisu').val(100); }
  1208.             $('#quantity').val($('#maisu').val());
  1209.             mitsumori_simulation('maisu','maisu');
  1210.         }
  1212.         // タイプ2: セット数プルダウン連動
  1213.         function madosetSelect(val){
  1214.             var v = parseInt(val);
  1215.             if(v < 1) v = 1;
  1216.             if(v > 20) v = 20;
  1217.             // id="quantity" と name="quantity" 両方を確実に書き換え
  1218.             $('#quantity').val(v);
  1219.             $('input[name="quantity"]').val(v);
  1220.             mitsumori_simulation('set','set_count');
  1221.         }
  1222.         // タイプ2: ±ボタン版（後方互換）
  1223.         function madoset(mai){
  1224.             var current = parseInt($('#set_count').val()) || 1;
  1225.             var next = current + mai;
  1226.             if(next < 1) next = 1;
  1227.             if(next > 20) next = 20;
  1228.             $('#set_count').val(next);
  1229.             madosetSelect(next);
  1230.         }
  1232.         // タイプ5: ステップ・フェンス選択値を mitsumori_json に保存するためのグローバル変数
  1233.         var deck_step = "{% if mitsumori_json %}{{ mitsumori_json.deck_step|default('不要') }}{% else %}不要{% endif %}";
  1234.         var deck_fence = "{% if mitsumori_json %}{{ mitsumori_json.deck_fence|default('不要') }}{% else %}不要{% endif %}";
  1236.         // PDF出力: モーダルの mitsumori_json をフォームに同期してから送信
  1237.         function syncPdfJson(){
  1238.             var jsonVal = $('#mitsumori_json').val();
  1239.             $('#pdf_mitsumori_json').val(jsonVal);
  1240.         }
  1242.         // タイプ9: 商品のみ購入
  1243.         function quantityOnly(val){
  1244.             var current = parseInt($('#quantity_only').val()) || 1;
  1245.             var next = current + val;
  1246.             if(next < 1) next = 1;
  1247.             $('#quantity_only').val(next);
  1248.             $('#quantity').val(next);
  1249.         }
  1251.         // ===== スマホ用下部固定バーへの金額同期 =====
  1252.         // mitsumori_message と mitsumori_goukei を監視して下部バーを更新
  1253.         (function() {
  1254.             var msgTarget   = document.getElementById('mitsumori_message');
  1255.             var goukeiTarget = document.getElementById('mitsumori_goukei');
  1256.             var spPrice     = document.getElementById('sp-mitsumori-price');
  1257.             var spBtn       = document.querySelector('#sp-mitsumori-bar .sp-bar__btn');
  1258.             if (!spPrice || !spBtn) return;
  1260.             function syncBar() {
  1261.                 var msg    = msgTarget ? msgTarget.textContent : '';
  1262.                 var goukei = goukeiTarget ? goukeiTarget.textContent : '---円';
  1264.                 // メッセージが「〇〇を選択してください」の場合はメッセージを表示しボタンを非表示
  1265.                 if (msg.indexOf('選択してください') !== -1) {
  1266.                     spPrice.textContent = msg;
  1267.                     spPrice.style.fontSize = '13px';
  1268.                     spPrice.style.color    = '#888';
  1269.                     spBtn.style.display    = 'none';
  1270.                 } else {
  1271.                     // 価格確定時はボタンを表示
  1272.                     spPrice.textContent = goukei;
  1273.                     spPrice.style.fontSize = '18px';
  1274.                     spPrice.style.color    = '#c00';
  1275.                     spBtn.style.display    = 'block';
  1276.                 }
  1277.             }
  1279.             // 初期値を同期
  1280.             syncBar();
  1282.             // mitsumori_message の変化を監視
  1283.             if (msgTarget) {
  1284.                 new MutationObserver(syncBar).observe(
  1285.                     msgTarget, { childList: true, subtree: true, characterData: true }
  1286.                 );
  1287.             }
  1288.             // mitsumori_goukei の変化も監視
  1289.             if (goukeiTarget) {
  1290.                 new MutationObserver(syncBar).observe(
  1291.                     goukeiTarget, { childList: true, subtree: true, characterData: true }
  1292.                 );
  1293.             }
  1294.         })();
  1296.         // ===== 現在のお見積り額: 折りたたみトグルボタンのテキスト切り替え =====
  1297.         (function() {
  1298.             var card = document.querySelector('.mitsumori-card-pc');
  1299.             var btn  = document.querySelector('.btn-mitsumori-toggle .toggle-icon');
  1300.             if (!card || !btn) return;
  1301.             // MutationObserverでcollapsed-cardクラスの変化を監視
  1302.             new MutationObserver(function() {
  1303.                 if (card.classList.contains('collapsed-card')) {
  1304.                     btn.textContent = '▼ 詳細';
  1305.                 } else {
  1306.                     btn.textContent = '▲ 閉じる';
  1307.                 }
  1308.             }).observe(card, { attributes: true, attributeFilter: ['class'] });
  1309.         })();
  1311.         // ===== エリア案内: スマホのみタップで展開 =====
  1312.         (function() {
  1313.             var notice = document.querySelector('.ec-areaNotice');
  1314.             if (!notice) return;
  1315.             notice.addEventListener('click', function(e) {
  1316.                 if (window.innerWidth > 767) return;
  1317.                 // リンククリック時は展開/折りたたみせずリンク遷移
  1318.                 if (e.target.tagName === 'A') return;
  1319.                 notice.classList.toggle('is-open');
  1320.             });
  1321.         })();
  1323.     </script>
  1324.     <script type="application/ld+json">
  1325.     {
  1326.         "@context": "https://schema.org/",
  1327.         "@type": "Product",
  1328.         "name": "{{ Product.name }}",
  1329.         "image": [
  1330.             {% for img in Product.ProductImage %}
  1331.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  1333.             {% else %}
  1334.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  1335.             {% endfor %}
  1336.         ],
  1337.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  1338.         {% if Product.code_min %}
  1339.         "sku": "{{ Product.code_min }}",
  1340.         {% endif %}
  1341.         "offers": {
  1342.             "@type": "Offer",
  1343.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  1344.             "priceCurrency": "{{ eccube_config.currency }}",
  1345.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  1346.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  1347.         }
  1348.     }
  1349.     </script>
  1351. {% endblock %}
  1353. {% block main %}
  1354.     <div class="ec-productRole" style="margin-top:20px;">
  1355.         <div class="ec-grid2">
  1356.             <div class="ec-grid2__cell">
  1357.                 <div class="ec-sliderItemRole">
  1358.                     {# 商品名 + ブランド名 + SNSシェア #}
  1359.                     <div class="ec-productRole__title">
  1360.                         <div class="ec-productRole__titleRow">
  1361.                             <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  1362.                             <div class="ec-share-inline">
  1363.                                 <a href="https://twitter.com/share?url={{ app.request.uri|url_encode }}&text={{ Product.name|url_encode }}"
  1364.                                    class="share-twitter" target="_blank" rel="noreferrer noopener" title="Xでシェア">
  1365.                                     <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>
  1366.                                 </a>
  1367.                                 <a href="https://www.instagram.com/" class="share-facebook" target="_blank" rel="noreferrer noopener" title="Instagram">
  1368.                                     <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>
  1369.                                 </a>
  1370.                                 <a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri|url_encode }}"
  1371.                                    class="share-line" target="_blank" rel="noreferrer noopener" title="LINEでシェア">
  1372.                                     <i class="fab fa-line"></i>
  1373.                                 </a>
  1374.                             </div>
  1375.                         </div>
  1376.                     </div>
  1377.                     {% if BaseInfo.option_favorite_product %}
  1378.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  1379.                         {% if is_favorite == false %}
  1380.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  1381.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  1382.                         </form>
  1383.                         {% else %}
  1384.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  1385.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  1386.                         </form>
  1387.                         {% endif %}
  1388.                      </div>
  1389.                     {% endif %}
  1390.                     <div class="item_visual">
  1391.                         {% for ProductImage in Product.ProductImage %}
  1392.                             <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>
  1393.                         {% else %}
  1394.                             <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>
  1395.                         {% endfor %}
  1396.                     </div>
  1397.                     <div class="item_nav">
  1398.                         {% for ProductImage in Product.ProductImage %}
  1399.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  1400.                         {% endfor %}
  1401.                     </div>
  1403.                 </div>
  1405.                     {# ===== 施工エリア案内（見積シミュレーションの下）===== #}
  1406.                     <div class="ec-areaNotice" style="margin-top:16px;margin-right:10px;">
  1407.                         <div class="ec-areaNotice__inner">
  1408.                             <div class="ec-areaNotice__icon">📍</div>
  1409.                             <div class="ec-areaNotice__body">
  1410.                                 <p class="ec-areaNotice__title">施工対応エリアについて</p>
  1411.                                 <div class="ec-areaNotice__detail">
  1412.                                     <p class="ec-areaNotice__text">
  1413.                                         当店の施工サービスは、<strong>山梨県全域</strong>および<br>
  1414.                                         <strong>諏訪エリア（諏訪市・岡谷市・茅野市・諏訪郡）</strong>を対象としております。<br>
  1415.                                         上記エリア外のお客様には、商品のみのご購入が可能でございます。<br>
  1416.                                         ご不明な点がございましたら、お気軽にお問い合わせください。
  1417.                                     </p>
  1418.                                     <a class="ec-areaNotice__link" href="{{ url('contact') }}">エリア外のお客様・ご相談はこちら →</a>
  1419.                                 </div>
  1420.                             </div>
  1421.                         </div>
  1422.                     </div>
  1424.             </div>
  1426.             <div class="ec-grid2__cell2">
  1427.                 <div class="ec-productRole__profile" >
  1428.                     {# 関連カテゴリ #}
  1429.                     {% if Product.ProductCategories is not empty %}
  1430.                         <div class="ec-productRole__category" style="padding:10px 0;">
  1431.                             {% for ProductCategory in Product.ProductCategories %}
  1432.                                 <ul>
  1433.                                     <li>
  1434.                                         {% for Category in ProductCategory.Category.path %}
  1435.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  1436.                                             <span>＞</span>{% endif -%}
  1437.                                         {% endfor %}
  1438.                                     </li>
  1439.                                 </ul>
  1440.                             {% endfor %}
  1441.                         </div>
  1442.                     {% endif %}
  1443.                     {# 販売価格 #}
  1444.                     <div class="ec-productRole__price">
  1445.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  1446.                         {% if Product.hasProductClass -%}
  1447.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  1448.                                 <div class="ec-price">
  1449.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  1450.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  1451.                                 </div>
  1452.                             {% else %}
  1453.                                 <div class="ec-price">
  1454.                                     <span id="price02-display" class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  1455.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  1456.                                 </div>
  1457.                             {% endif %}
  1458.                         {% else %}
  1459.                             <div class="ec-price">
  1460.                                 <span id="price02-display" class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  1461.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  1462.                             </div>
  1463.                         {% endif %}
  1464.                     </div>
  1465.                     {# タグ #}
  1466.                     <ul class="ec-productRole__tags">
  1467.                         {% for Tag in Product.Tags %}
  1468.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  1469.                         {% endfor %}
  1470.                     </ul>
  1471.                     {# 商品コード #}
  1472.                     {% if Product.code_min is not empty %}
  1473.                         <div class="ec-productRole__code">
  1474.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  1475.                         </div>
  1476.                     {% endif %}
  1478.                     <div class="ec-productRole__description">
  1479.                         <div class="ec-rectHeading">
  1480.                             <h4>製品情報</h4>
  1481.                         </div>
  1482.                         {{ Product.sales_infomation|raw|nl2br }}
  1483.                     </div>
  1486.                     <div class="card card-danger" style="clear:both;margin:1px;">
  1487.                       <div class="card-header">
  1488.                         <h3 class="card-title">見積シミュレーション</h3>
  1489.                       </div>
  1490.                       <div class="card-body p-2">
  1491.                         {% set related_image = getProduct_field(Product.id,"related_image") %}
  1492.                         {# related_image は配列: ["1段目画像あり","2段目画像あり","3段目画像あり"] のうち該当するものが格納 #}
  1493.                         {% set img1 = related_image and ("1段目画像あり" in related_image) %}
  1494.                         {% set img2 = related_image and ("2段目画像あり" in related_image) %}
  1495.                         {% set img3 = related_image and ("3段目画像あり" in related_image) %}
  1496.                         {% set img4 = related_image and ("4段目画像あり" in related_image) %}
  1497.                         {% set type1 = getProduct_field(Product.id,"related_name1") %}
  1498.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  1499.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  1500.                         {% set type4 = getProduct_field(Product.id,"related_name4") %}
  1501.                         {% set hasRelated = (type1 and related_product1 and related_product1|length)
  1502.                                          or (type2 and related_product2 and related_product2|length)
  1503.                                          or (type3 and related_product3 and related_product3|length)
  1504.                                          or (type4 and related_product4 and related_product4|length) %}
  1505.                         {% if hasRelated %}
  1506.                             <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  1507.                         {% endif %}
  1509.                         {# ===== 1段目 ===== #}
  1510.                         {% if type1 and related_product1 and related_product1|length %}
  1511.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1512.                           <div class="rp-section-label">{{ type1 }}{% if img1 and base_select1 %}: <span>{{ base_select1 }}</span>{% endif %}</div>
  1513.                           {% if img1 %}
  1514.                             {# --- 画像付きカード --- #}
  1515.                             <div class="rp-card-group">
  1516.                               {% for rp_id, rp_name in related_product1 %}
  1517.                                 <label class="rp-card{% if base_select1 == rp_name %} is-selected{% endif %}"
  1518.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1519.                                   <input type="radio" name="rp1" value="{{ rp_name }}"
  1520.                                          {% if base_select1 == rp_name %}checked{% endif %}>
  1521.                                   <img class="rp-card__image"
  1522.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1523.                                        alt="{{ rp_name }}"
  1524.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  1525.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  1526.                                   <span class="rp-card__name">{{ rp_name }}</span>
  1527.                                 </label>
  1528.                               {% endfor %}
  1529.                             </div>
  1530.                           {% else %}
  1531.                             {# --- ボタン式ラジオ --- #}
  1532.                             <div class="rp-btn-group">
  1533.                               {% for rp_id, rp_name in related_product1 %}
  1534.                                 <label class="rp-btn{% if base_select1 == rp_name %} is-selected{% endif %}"
  1535.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1536.                                   <input type="radio" name="rp1" value="{{ rp_name }}"
  1537.                                          {% if base_select1 == rp_name %}checked{% endif %}>
  1538.                                   {{ rp_name }}
  1539.                                 </label>
  1540.                               {% endfor %}
  1541.                             </div>
  1542.                           {% endif %}
  1543.                         </div>
  1544.                         {% endif %}
  1546.                         {# ===== 2段目 ===== #}
  1547.                         {% if type2 and related_product2 and related_product2|length %}
  1548.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1549.                           <div class="rp-section-label">{{ type2 }}{% if img2 and base_select2 %}: <span>{{ base_select2 }}</span>{% endif %}</div>
  1550.                           {% if img2 %}
  1551.                             <div class="rp-card-group">
  1552.                               {% for rp_id, rp_name in related_product2 %}
  1553.                                 <label class="rp-card{% if base_select2 == rp_name %} is-selected{% endif %}"
  1554.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1555.                                   <input type="radio" name="rp2" value="{{ rp_name }}"
  1556.                                          {% if base_select2 == rp_name %}checked{% endif %}>
  1557.                                   <img class="rp-card__image"
  1558.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1559.                                        alt="{{ rp_name }}"
  1560.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  1561.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  1562.                                   <span class="rp-card__name">{{ rp_name }}</span>
  1563.                                 </label>
  1564.                               {% endfor %}
  1565.                             </div>
  1566.                           {% else %}
  1567.                             <div class="rp-btn-group">
  1568.                               {% for rp_id, rp_name in related_product2 %}
  1569.                                 <label class="rp-btn{% if base_select2 == rp_name %} is-selected{% endif %}"
  1570.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1571.                                   <input type="radio" name="rp2" value="{{ rp_name }}"
  1572.                                          {% if base_select2 == rp_name %}checked{% endif %}>
  1573.                                   {{ rp_name }}
  1574.                                 </label>
  1575.                               {% endfor %}
  1576.                             </div>
  1577.                           {% endif %}
  1578.                         </div>
  1579.                         {% endif %}
  1581.                         {# ===== 3段目 ===== #}
  1582.                         {% if type3 and related_product3 and related_product3|length %}
  1583.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1584.                           <div class="rp-section-label">{{ type3 }}{% if img3 and base_select3 %}: <span>{{ base_select3 }}</span>{% endif %}</div>
  1585.                           {% if img3 %}
  1586.                             <div class="rp-card-group">
  1587.                               {% for rp_id, rp_name in related_product3 %}
  1588.                                 <label class="rp-card{% if base_select3 == rp_name %} is-selected{% endif %}"
  1589.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1590.                                   <input type="radio" name="rp3" value="{{ rp_name }}"
  1591.                                          {% if base_select3 == rp_name %}checked{% endif %}>
  1592.                                   <img class="rp-card__image"
  1593.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1594.                                        alt="{{ rp_name }}"
  1595.                                        onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
  1596.                                   <div class="rp-card__placeholder" style="display:none;">📦</div>
  1597.                                   <span class="rp-card__name">{{ rp_name }}</span>
  1598.                                 </label>
  1599.                               {% endfor %}
  1600.                             </div>
  1601.                           {% else %}
  1602.                             <div class="rp-btn-group">
  1603.                               {% for rp_id, rp_name in related_product3 %}
  1604.                                 <label class="rp-btn{% if base_select3 == rp_name %} is-selected{% endif %}"
  1605.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1606.                                   <input type="radio" name="rp3" value="{{ rp_name }}"
  1607.                                          {% if base_select3 == rp_name %}checked{% endif %}>
  1608.                                   {{ rp_name }}
  1609.                                 </label>
  1610.                               {% endfor %}
  1611.                             </div>
  1612.                           {% endif %}
  1613.                         </div>
  1614.                         {% endif %}
  1616.                         {# ===== 4段目 ===== #}
  1617.                         {% if type4 and related_product4 and related_product4|length %}
  1618.                         <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1619.                           <div class="rp-section-label">{{ type4 }}{% if img4 and base_select4 %}: <span>{{ base_select4 }}</span>{% endif %}</div>
  1620.                           {% if img4 %}
  1621.                             {# --- 画像付きカード --- #}
  1622.                             <div class="rp-card-group">
  1623.                               {% for rp_id, rp_name in related_product4 %}
  1624.                                 <label class="rp-card{% if base_select4 == rp_name %} is-selected{% endif %}"
  1625.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1626.                                   <input type="radio" name="rp4" value="{{ rp_name }}"
  1627.                                          {% if base_select4 == rp_name %}checked{% endif %}>
  1628.                                   <img class="rp-card__image"
  1629.                                        src="{{ asset('p' ~ rp_id ~ '_cp_1.jpg', 'save_image') }}"
  1630.                                        alt="{{ rp_name }}" loading="lazy">
  1631.                                   <span class="rp-card__label">{{ rp_name }}</span>
  1632.                                 </label>
  1633.                               {% endfor %}
  1634.                             </div>
  1635.                           {% else %}
  1636.                             {# --- ボタン式ラジオ --- #}
  1637.                             <div class="rp-btn-group">
  1638.                               {% for rp_id, rp_name in related_product4 %}
  1639.                                 <label class="rp-btn{% if base_select4 == rp_name %} is-selected{% endif %}"
  1640.                                        onclick="location.href='/products/detail/{{ rp_id }}';">
  1641.                                   <input type="radio" name="rp4" value="{{ rp_name }}"
  1642.                                          {% if base_select4 == rp_name %}checked{% endif %}>
  1643.                                   {{ rp_name }}
  1644.                                 </label>
  1645.                               {% endfor %}
  1646.                             </div>
  1647.                           {% endif %}
  1648.                         </div>
  1649.                         {% endif %}
  1652.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のオプションを選択してください。</label></div>
  1654.                         {% if color and color|length and ProductClass.SaleType.id != 3 %}
  1655.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1656.                           <div class="rp-section-label">カラー{% if mitsumori_json and mitsumori_json.pc %}: <span>{{ mitsumori_json.pc }}</span>{% endif %}</div>
  1657.                           <div class="opt-btn-group">
  1658.                             {% set idx = 0 %}
  1659.                             {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  1660.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %} is-selected{% endif %}"
  1661.                                      onclick="mitsumori_simulation_val('pc', '{{ cc['name']|e('js') }}');">
  1662.                                 <input type="radio" name="color" id="cc_{{ idx }}" value="{{ cc['name'] }}"
  1663.                                        {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}>
  1664.                                 {{ cc['name'] }}
  1665.                               </label>
  1666.                             {% endif %}{% endfor %}
  1667.                           </div>
  1668.                         </div>
  1669.                         {% endif %}
  1671.                         {% if p_w and p_w|length and p_w|join != "" %}
  1672.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1673.                           <div class="rp-section-label">幅{% if mitsumori_json and mitsumori_json.pw %}: <span>{{ mitsumori_json.pw }}</span>{% endif %}</div>
  1674.                           <div class="opt-btn-group">
  1675.                             {% set idx = 0 %}
  1676.                             {% for pw in p_w %}{% if pw %}{% set idx = idx + 1 %}
  1677.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %} is-selected{% endif %}"
  1678.                                      onclick="mitsumori_simulation_val('pw', '{{ pw|e('js') }}');">
  1679.                                 <input type="radio" name="pw" id="pw_{{ idx }}" value="{{ pw }}"
  1680.                                        {% if (mitsumori_json and mitsumori_json.pw == pw) or p_w|length == 1 %}checked{% endif %}>
  1681.                                 {{ pw }}
  1682.                               </label>
  1683.                             {% endif %}{% endfor %}
  1684.                           </div>
  1685.                         </div>
  1686.                         {% endif %}
  1688.                         {% if p_d and p_d|length and p_d|join != "" %}
  1689.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1690.                           <div class="rp-section-label">奥行き{% if mitsumori_json and mitsumori_json.pd %}: <span>{{ mitsumori_json.pd }}</span>{% endif %}</div>
  1691.                           <div class="opt-btn-group">
  1692.                             {% set idx = 0 %}
  1693.                             {% for pd in p_d %}{% if pd %}{% set idx = idx + 1 %}
  1694.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %} is-selected{% endif %}"
  1695.                                      onclick="mitsumori_simulation_val('pd', '{{ pd|e('js') }}');">
  1696.                                 <input type="radio" name="pd" id="pd_{{ idx }}" value="{{ pd }}"
  1697.                                        {% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %}checked{% endif %}>
  1698.                                 {{ pd }}
  1699.                               </label>
  1700.                             {% endif %}{% endfor %}
  1701.                           </div>
  1702.                         </div>
  1703.                         {% endif %}
  1705.                         {% if p_h and p_h|length and p_h|join != "" %}
  1706.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1707.                           <div class="rp-section-label">高さ{% if mitsumori_json and mitsumori_json.ph %}: <span>{{ mitsumori_json.ph }}</span>{% endif %}</div>
  1708.                           <div class="opt-btn-group">
  1709.                             {% set idx = 0 %}
  1710.                             {% for ph in p_h %}{% if ph %}{% set idx = idx + 1 %}
  1711.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %} is-selected{% endif %}"
  1712.                                      onclick="mitsumori_simulation_val('ph', '{{ ph|e('js') }}');">
  1713.                                 <input type="radio" name="ph" id="ph_{{ idx }}" value="{{ ph }}"
  1714.                                        {% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1 %}checked{% endif %}>
  1715.                                 {{ ph }}
  1716.                               </label>
  1717.                             {% endif %}{% endfor %}
  1718.                           </div>
  1719.                         </div>
  1720.                         {% endif %}
  1722.                         {% if p_m and p_m|length and p_m|join != "" %}
  1723.                         <div class="form-group mt-3 pb-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1724.                           <div class="rp-section-label">素材{% if mitsumori_json and mitsumori_json.pm %}: <span>{{ mitsumori_json.pm }}</span>{% endif %}</div>
  1725.                           <div class="opt-btn-group">
  1726.                             {% set idx = 0 %}
  1727.                             {% for pm in p_m %}{% if pm %}{% set idx = idx + 1 %}
  1728.                               <label class="opt-btn{% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %} is-selected{% endif %}"
  1729.                                      onclick="mitsumori_simulation_val('pm', '{{ pm|e('js') }}');">
  1730.                                 <input type="radio" name="pm" id="pm_{{ idx }}" value="{{ pm }}"
  1731.                                        {% if (mitsumori_json and mitsumori_json.pm == pm) or p_m|length == 1 %}checked{% endif %}>
  1732.                                 {{ pm }}
  1733.                               </label>
  1734.                             {% endif %}{% endfor %}
  1735.                           </div>
  1736.                         </div>
  1737.                         {% endif %}
  1739.                         <!-- 1: 施工見積（通常） → 幅/奥行/高さ/素材/カラーは上部の共通ブロックで表示済み -->
  1740.                         {% if ProductClass.SaleType.id == 1 %}
  1741.                         {% endif %}
  1743.                         <!-- 2: 施工見積（補助金・窓） -->
  1744.                         {% if ProductClass.SaleType.id == 2 %}
  1746.                             {# 窓サイズ（自由入力） #}
  1747.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1748.                               <label class="col-4 col-form-label">窓サイズ</label>
  1749.                               <div class="col-4">
  1750.                                 <div class="input-group">
  1751.                                   <span class="input-group-text">窓幅</span>
  1752.                                   <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');">
  1753.                                   <span class="input-group-text">cm</span>
  1754.                                 </div>
  1755.                               </div>
  1756.                               <div class="col-4">
  1757.                                 <div class="input-group">
  1758.                                   <span class="input-group-text">窓高さ</span>
  1759.                                   <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');">
  1760.                                   <span class="input-group-text">cm</span>
  1761.                                 </div>
  1762.                               </div>
  1763.                             </div>
  1765.                             {# 窓タイプ（p_d データから選択肢を生成） #}
  1766.                             {% if p_d and p_d|length and p_d|join != "" %}
  1767.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1768.                               <label class="col-4 col-form-label">窓タイプ</label>
  1769.                               <div class="col-8">
  1770.                                 <div class="form-group clearfix">
  1771.                                 {% set idx = 0 %}
  1772.                                 {% for pd_val in p_d %}
  1773.                                   {% if pd_val %}
  1774.                                   {% set idx = idx + 1 %}
  1775.                                   <div class="icheck-danger d-inline">
  1776.                                     <input type="radio" name="mado_type" id="mado_type_{{ idx }}" value="{{ pd_val }}"
  1777.                                       {% if (mitsumori_json and mitsumori_json.pd == pd_val) or (p_d|length == 1) %}checked{% endif %}
  1778.                                       onclick="mitsumori_simulation('pd','mado_type_{{ idx }}');">
  1779.                                     <label for="mado_type_{{ idx }}">{{ pd_val }}</label>
  1780.                                   </div>
  1781.                                   {% endif %}
  1782.                                 {% endfor %}
  1783.                                 </div>
  1784.                               </div>
  1785.                             </div>
  1786.                             {% endif %}
  1788.                             {# ガラスタイプ（p_m データから選択肢を生成） #}
  1789.                             {% if p_m and p_m|length and p_m|join != "" %}
  1790.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1791.                               <label class="col-4 col-form-label">ガラスタイプ</label>
  1792.                               <div class="col-8">
  1793.                                 <div class="form-group clearfix">
  1794.                                 {% set idx = 0 %}
  1795.                                 {% for pm_val in p_m %}
  1796.                                   {% if pm_val %}
  1797.                                   {% set idx = idx + 1 %}
  1798.                                   <div class="icheck-danger d-inline">
  1799.                                     <input type="radio" name="glass_type" id="glass_type_{{ idx }}" value="{{ pm_val }}"
  1800.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or (p_m|length == 1) %}checked{% endif %}
  1801.                                       onclick="mitsumori_simulation('pm','glass_type_{{ idx }}');">
  1802.                                     <label for="glass_type_{{ idx }}">{{ pm_val }}</label>
  1803.                                   </div>
  1804.                                   {% endif %}
  1805.                                 {% endfor %}
  1806.                                 </div>
  1807.                               </div>
  1808.                             </div>
  1809.                             {% endif %}
  1811.                             {# セット数（プルダウン） → quantity に連動 #}
  1812.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1813.                               <label class="col-4 col-form-label">セット数</label>
  1814.                               <div class="col-8">
  1815.                                 <select name="set_count" id="set_count" class="form-control" onchange="madosetSelect(this.value);">
  1816.                                   {% for i in 1..20 %}
  1817.                                     <option value="{{ i }}" {% if mitsumori_json and mitsumori_json.set_count == i %}selected{% endif %}>{{ i }} セット</option>
  1818.                                   {% endfor %}
  1819.                                 </select>
  1820.                               </div>
  1821.                             </div>
  1823.                         {% endif %}
  1825.                         <!-- 3: 施工見積（物置・ゴミステーション） -->
  1826.                         {% if ProductClass.SaleType.id == 3 %}
  1828.                             {# 幅・奥行き・高さ（p_w/p_d/p_h からラジオボタン生成） #}
  1829.                             {% if p_w and p_w|length and p_w|join != "" %}
  1830.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1831.                               <label class="col-4 col-form-label">幅</label>
  1832.                               <div class="col-8">
  1833.                                 <div class="form-group clearfix">
  1834.                                 {% set idx = 0 %}
  1835.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  1836.                                   <div class="icheck-danger d-inline">
  1837.                                     <input type="radio" name="pw" id="pw3_{{ idx }}" value="{{ pw_val }}"
  1838.                                       {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}
  1839.                                       onclick="mitsumori_simulation('pw','pw3_{{ idx }}');">
  1840.                                     <label for="pw3_{{ idx }}">{{ pw_val }}</label>
  1841.                                   </div>
  1842.                                 {% endif %}{% endfor %}
  1843.                                 </div>
  1844.                               </div>
  1845.                             </div>
  1846.                             {% endif %}
  1848.                             {% if p_d and p_d|length and p_d|join != "" %}
  1849.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1850.                               <label class="col-4 col-form-label">奥行き</label>
  1851.                               <div class="col-8">
  1852.                                 <div class="form-group clearfix">
  1853.                                 {% set idx = 0 %}
  1854.                                 {% for pd_val in p_d %}{% if pd_val %}{% set idx = idx + 1 %}
  1855.                                   <div class="icheck-danger d-inline">
  1856.                                     <input type="radio" name="pd" id="pd3_{{ idx }}" value="{{ pd_val }}"
  1857.                                       {% if (mitsumori_json and mitsumori_json.pd == pd_val) or p_d|length == 1 %}checked{% endif %}
  1858.                                       onclick="mitsumori_simulation('pd','pd3_{{ idx }}');">
  1859.                                     <label for="pd3_{{ idx }}">{{ pd_val }}</label>
  1860.                                   </div>
  1861.                                 {% endif %}{% endfor %}
  1862.                                 </div>
  1863.                               </div>
  1864.                             </div>
  1865.                             {% endif %}
  1867.                             {% if p_h and p_h|length and p_h|join != "" %}
  1868.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1869.                               <label class="col-4 col-form-label">高さ</label>
  1870.                               <div class="col-8">
  1871.                                 <div class="form-group clearfix">
  1872.                                 {% set idx = 0 %}
  1873.                                 {% for ph_val in p_h %}{% if ph_val %}{% set idx = idx + 1 %}
  1874.                                   <div class="icheck-danger d-inline">
  1875.                                     <input type="radio" name="ph" id="ph3_{{ idx }}" value="{{ ph_val }}"
  1876.                                       {% if (mitsumori_json and mitsumori_json.ph == ph_val) or p_h|length == 1 %}checked{% endif %}
  1877.                                       onclick="mitsumori_simulation('ph','ph3_{{ idx }}');">
  1878.                                     <label for="ph3_{{ idx }}">{{ ph_val }}</label>
  1879.                                   </div>
  1880.                                 {% endif %}{% endfor %}
  1881.                                 </div>
  1882.                               </div>
  1883.                             </div>
  1884.                             {% endif %}
  1886.                             {# 棚タイプ（p_m データから選択肢を生成） #}
  1887.                             {% if p_m and p_m|length and p_m|join != "" %}
  1888.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1889.                               <label class="col-4 col-form-label">棚タイプ<br><small class="text-muted">（間仕切り仕様）</small></label>
  1890.                               <div class="col-8">
  1891.                                 <div class="form-group clearfix">
  1892.                                 {% set idx = 0 %}
  1893.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  1894.                                   <div class="icheck-danger d-inline">
  1895.                                     <input type="radio" name="pm" id="pm3_{{ idx }}" value="{{ pm_val }}"
  1896.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}
  1897.                                       onclick="mitsumori_simulation('pm','pm3_{{ idx }}');">
  1898.                                     <label for="pm3_{{ idx }}">{{ pm_val }}</label>
  1899.                                   </div>
  1900.                                 {% endif %}{% endfor %}
  1901.                                 </div>
  1902.                               </div>
  1903.                             </div>
  1904.                             {% endif %}
  1906.                             {# カラー（共通の color データ使用） #}
  1907.                             {% if color and color|length %}
  1908.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1909.                               <label class="col-4 col-form-label">カラー</label>
  1910.                               <div class="col-8">
  1911.                                 <div class="form-group clearfix">
  1912.                                 {% set idx = 0 %}
  1913.                                 {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  1914.                                   <div class="icheck-danger d-inline">
  1915.                                     <input type="radio" name="color3" id="cc3_{{ idx }}" value="{{ cc['name'] }}"
  1916.                                       {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}
  1917.                                       onclick="mitsumori_simulation('pc','cc3_{{ idx }}');">
  1918.                                     <label for="cc3_{{ idx }}">{{ cc['name'] }}</label>
  1919.                                   </div>
  1920.                                 {% endif %}{% endfor %}
  1921.                                 </div>
  1922.                               </div>
  1923.                             </div>
  1924.                             {% endif %}
  1926.                             {# 台数 #}
  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-4">
  1930.                                 <div class="input-group mb-3">
  1931.                                   <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');">
  1932.                                   <span class="input-group-text">台</span>
  1933.                                 </div>
  1934.                               </div>
  1935.                               <div class="col-4">
  1936.                                 <button type="button" class="btn btn-info" onclick="daisu(+1);">＋</button>
  1937.                                 <button type="button" class="btn btn-danger" onclick="daisu(-1);">ー</button>
  1938.                               </div>
  1939.                             </div>
  1941.                         {% endif %}
  1943.                         <!-- 4: 施工見積（フェンス・組み立て式） -->
  1944.                         {% if ProductClass.SaleType.id == 4 %}
  1946.                             {# 枚数 #}
  1947.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1948.                               <label class="col-4 col-form-label">枚数</label>
  1949.                               <div class="col-4 mb-3">
  1950.                                 <div class="input-group">
  1951.                                   <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');">
  1952.                                   <span class="input-group-text">枚</span>
  1953.                                 </div>
  1954.                               </div>
  1955.                               <div class="col-4">
  1956.                                 <button type="button" class="btn btn-info" onclick="maisu(+1);">＋</button>
  1957.                                 <button type="button" class="btn btn-danger" onclick="maisu(-1);">ー</button>
  1958.                               </div>
  1959.                             </div>
  1961.                         {% endif %}
  1963.                         <!-- 5: 施工見積（ウッドデッキ・タイルデッキ） -->
  1964.                         {% if ProductClass.SaleType.id == 5 %}
  1966.                             {# 施工面積（㎡ 直接入力） #}
  1967.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1968.                               <label class="col-4 col-form-label">施工面積</label>
  1969.                               <div class="col-8">
  1970.                                 <div class="input-group">
  1971.                                   <input type="number" name="area" id="area"
  1972.                                     class="form-control"
  1973.                                     value="{{ mitsumori_json.area|default('') }}"
  1974.                                     placeholder="例: 7.5"
  1975.                                     min="0.1" step="0.1"
  1976.                                     onchange="mitsumori_simulation('area','area');">
  1977.                                   <span class="input-group-text">㎡</span>
  1978.                                 </div>
  1979.                                 <small class="text-muted">幅(cm) × 奥行き(cm) ÷ 10000 = ㎡</small>
  1980.                               </div>
  1981.                             </div>
  1983.                             {# ステップの有無 #}
  1984.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1985.                               <label class="col-4 col-form-label">ステップ</label>
  1986.                               <div class="col-8">
  1987.                                 <div class="form-group clearfix">
  1988.                                   <div class="icheck-danger d-inline">
  1989.                                     <input type="radio" name="deck_step" id="deck_step_yes" value="必要"
  1990.                                       {% if mitsumori_json and mitsumori_json.deck_step == '必要' %}checked{% endif %}
  1991.                                       onclick="mitsumori_simulation('op0','deck_step_yes');">
  1992.                                     <label for="deck_step_yes">必要</label>
  1993.                                   </div>
  1994.                                   <div class="icheck-danger d-inline">
  1995.                                     <input type="radio" name="deck_step" id="deck_step_no" value="不要"
  1996.                                       {% if not mitsumori_json or mitsumori_json.deck_step == '不要' or not mitsumori_json.deck_step %}checked{% endif %}
  1997.                                       onclick="mitsumori_simulation('op0','deck_step_no');">
  1998.                                     <label for="deck_step_no">不要</label>
  1999.                                   </div>
  2000.                                 </div>
  2001.                               </div>
  2002.                             </div>
  2004.                             {# ウッドデッキフェンスの有無 #}
  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.                                   <div class="icheck-danger d-inline">
  2010.                                     <input type="radio" name="deck_fence" id="deck_fence_yes" value="必要"
  2011.                                       {% if mitsumori_json and mitsumori_json.deck_fence == '必要' %}checked{% endif %}
  2012.                                       onclick="mitsumori_simulation('op1','deck_fence_yes');">
  2013.                                     <label for="deck_fence_yes">必要</label>
  2014.                                   </div>
  2015.                                   <div class="icheck-danger d-inline">
  2016.                                     <input type="radio" name="deck_fence" id="deck_fence_no" value="不要"
  2017.                                       {% if not mitsumori_json or mitsumori_json.deck_fence == '不要' or not mitsumori_json.deck_fence %}checked{% endif %}
  2018.                                       onclick="mitsumori_simulation('op1','deck_fence_no');">
  2019.                                     <label for="deck_fence_no">不要</label>
  2020.                                   </div>
  2021.                                 </div>
  2022.                               </div>
  2023.                             </div>
  2025.                         {% endif %}
  2027.                         <!-- 6: 施工見積（芝生・枚数・数量買い） -->
  2028.                         {% if ProductClass.SaleType.id == 6 %}
  2030.                             {# 規格（p_m データ → 素材から抽出） #}
  2031.                             {% if p_m and p_m|length and p_m|join != "" %}
  2032.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2033.                               <label class="col-4 col-form-label">規格</label>
  2034.                               <div class="col-8">
  2035.                                 <div class="form-group clearfix">
  2036.                                 {% set idx = 0 %}
  2037.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  2038.                                   <div class="icheck-danger d-inline">
  2039.                                     <input type="radio" name="pm" id="pm6_{{ idx }}" value="{{ pm_val }}"
  2040.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}
  2041.                                       onclick="mitsumori_simulation('pm','pm6_{{ idx }}');">
  2042.                                     <label for="pm6_{{ idx }}">{{ pm_val }}</label>
  2043.                                   </div>
  2044.                                 {% endif %}{% endfor %}
  2045.                                 </div>
  2046.                               </div>
  2047.                             </div>
  2048.                             {% endif %}
  2050.                             {# 芝の長さ（p_w データ → 幅から抽出） #}
  2051.                             {% if p_w and p_w|length and p_w|join != "" %}
  2052.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2053.                               <label class="col-4 col-form-label">芝の長さ</label>
  2054.                               <div class="col-8">
  2055.                                 <div class="form-group clearfix">
  2056.                                 {% set idx = 0 %}
  2057.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  2058.                                   <div class="icheck-danger d-inline">
  2059.                                     <input type="radio" name="pw" id="pw6_{{ idx }}" value="{{ pw_val }}"
  2060.                                       {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}
  2061.                                       onclick="mitsumori_simulation('pw','pw6_{{ idx }}');">
  2062.                                     <label for="pw6_{{ idx }}">{{ pw_val }}</label>
  2063.                                   </div>
  2064.                                 {% endif %}{% endfor %}
  2065.                                 </div>
  2066.                               </div>
  2067.                             </div>
  2068.                             {% endif %}
  2070.                             {# 施工面積（㎡ 自由入力） #}
  2071.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2072.                               <label class="col-4 col-form-label">施工面積</label>
  2073.                               <div class="col-8">
  2074.                                 <div class="input-group">
  2075.                                   <input type="number" name="area" id="area"
  2076.                                     class="form-control"
  2077.                                     value="{{ mitsumori_json.area|default('') }}"
  2078.                                     placeholder="例: 10.5"
  2079.                                     min="0.1" step="0.1"
  2080.                                     onchange="mitsumori_simulation('area','area');">
  2081.                                   <span class="input-group-text">平米</span>
  2082.                                 </div>
  2083.                               </div>
  2084.                             </div>
  2086.                         {% endif %}
  2088.                         <!-- 9: 商品のみ購入 -->
  2089.                         {% if ProductClass.SaleType.id == 9 %}
  2090.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2091.                               <label class="col-4 col-form-label">数量</label>
  2092.                               <div class="col-4">
  2093.                                 <div class="input-group mb-3">
  2094.                                   <input type="number" name="quantity_only" id="quantity_only" class="form-control" value="1" min="1" onchange="$('#quantity').val(this.value);">
  2095.                                   <span class="input-group-text">個</span>
  2096.                                 </div>
  2097.                               </div>
  2098.                               <div class="col-4">
  2099.                                 <button type="button" class="btn btn-info" onclick="quantityOnly(+1);">＋</button>
  2100.                                 <button type="button" class="btn btn-danger" onclick="quantityOnly(-1);">ー</button>
  2101.                               </div>
  2102.                             </div>
  2103.                         {% endif %}
  2108.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  2109.                         {% for i in 0..10 %}
  2110.                             {% if op and op|length >= i+1 %}
  2111.                             {% if op[i]['name'] %}
  2112.                             <div class="form-group mt-3 pb-3" style="border-bottom:1px solid rgba(0,0,0,.125)">
  2113.                               <div class="rp-section-label">{{ op[i]['name'] }}{% if mitsumori_json and mitsumori_json.op[i] %}: <span>{{ mitsumori_json.op[i] }}</span>{% endif %}</div>
  2114.                               {% if op[i]['comment'] %}<div class="opt-comment" style="font-size:12px;color:#666;margin:4px 0 6px;">{{ op[i]['comment'] }}</div>{% endif %}
  2115.                               <div class="opt-btn-group">
  2116.                                 <label class="opt-btn{% if mitsumori_json and mitsumori_json.op[i] == op[i]['on'] %} is-selected{% endif %}"
  2117.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_1');">
  2118.                                   <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 %}>
  2119.                                   {{ op[i]['on'] }}
  2120.                                 </label>
  2121.                                 <label class="opt-btn{% if mitsumori_json and mitsumori_json.op[i] == op[i]['off'] %} is-selected{% endif %}"
  2122.                                        onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_2');">
  2123.                                   <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 %}>
  2124.                                   {{ op[i]['off'] }}
  2125.                                 </label>
  2126.                               </div>
  2127.                             </div>
  2128.                             {% endif %}
  2129.                             {% endif %}
  2130.                         {% endfor %}
  2132.                       </div>
  2133.                       <!-- /.card-body -->
  2134.                     </div>
  2137.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  2138.                         {% if Product.stock_find %}
  2139.                             <div class="ec-productRole__actions">
  2140.                                 {% if form.classcategory_id1 is defined %}
  2141.                                     <div class="ec-select">
  2142.                                         {{ form_row(form.classcategory_id1) }}
  2143.                                         {{ form_errors(form.classcategory_id1) }}
  2144.                                     </div>
  2145.                                     {% if form.classcategory_id2 is defined %}
  2146.                                         <div class="ec-select">
  2147.                                             {{ form_row(form.classcategory_id2) }}
  2148.                                             {{ form_errors(form.classcategory_id2) }}
  2149.                                         </div>
  2150.                                     {% endif %}
  2151.                                 {% endif %}
  2152.                                 <div class="ec-numberInput">
  2153.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  2154.                                     {{ form_errors(form.quantity) }}
  2155.                                 </div>
  2156.                             </div>
  2158.                         {% else %}
  2159.                             <div class="ec-productRole__btn">
  2160.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  2161.                                     {{ 'ただいま品切れ中です。'|trans }}
  2162.                                 </button>
  2163.                             </div>
  2164.                         {% endif %}
  2165.                         <div class="ec-productRole__btn mt-3">
  2166.                            <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart">施工検討リストに入れる</button>
  2167.                         </div>
  2168.                         {{ form_rest(form) }}
  2169.                     </form>
  2170.                     <div class="ec-modal">
  2171.                         <div class="ec-modal-overlay">
  2172.                             <div class="ec-modal-wrap">
  2173.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  2174.                                 <div id="ec-modal-header" class="text-center">{{ '施工検討リストに追加しました。'|trans }}</div>
  2175.                                 <div class="ec-modal-box">
  2176.                                     <div class="ec-role">
  2177.                                         <span class="ec-inlineBtn--cancel">{{ '商品検索を続ける'|trans }}</span>
  2178.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ '施工検討リストへ進む'|trans }}</a>
  2179.                                     </div>
  2180.                                 </div>
  2181.                             </div>
  2182.                         </div>
  2183.                     </div>
  2184.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  2185.                     </div>
  2187.                     {# SNSシェア #}
  2188.                     <div class="ec-productRole__share">
  2189.                         <ul class="ec-share">
  2190.                             <li class="ec-share__item">
  2191.                                 <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">
  2192.                                     <i class="fab fa-twitter"></i>
  2193.                                 </a>
  2194.                             </li>
  2195.                             <li class="ec-share__item">
  2196.                                 <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">
  2197.                                     <i class="fab fa-facebook-f"></i>
  2198.                                 </a>
  2199.                             </li>
  2200.                             <li class="ec-share__item">
  2201.                                 <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">
  2202.                                     <i class="fab fa-line"></i>
  2203.                                 </a>
  2204.                             </li>
  2205.                         </ul>
  2206.                     </div>
  2207.                 </div>
  2208.                 {# ===== スマホ用 見積金額 下部固定バー ===== #}
  2209.                 <div id="sp-mitsumori-bar">
  2210.                     <div>
  2211.                         <div class="sp-bar__label">合計(工事費・税込)</div>
  2212.                         <div class="sp-bar__price" id="sp-mitsumori-price">---円</div>
  2213.                     </div>
  2214.                     <button type="button" class="sp-bar__btn"
  2215.                             onclick="document.getElementById('cart_btn2') && document.getElementById('cart_btn2').click();">
  2216.                         検討リストへ
  2217.                     </button>
  2218.                 </div>
  2220.                 <div class="card col-12 collapsed-card sticky-top float-right mitsumori-card-pc">
  2221.                     <div class="card-header">
  2222.                       <h3 class="card-title">現在のお見積り額</h3>
  2223.                       <div class="card-tools">
  2224.                         <span class="float-left" id="mitsumori_message">395000円</span>
  2225.                         <button type="button" class="btn btn-tool btn-mitsumori-toggle" data-card-widget="collapse" title="詳細を表示">
  2226.                           <span class="toggle-icon">▼ 詳細</span>
  2227.                         </button>
  2228.                       </div>
  2229.                     </div>
  2230.                     <div class="card-body p-0">
  2231.                       <ul class="nav nav-pills flex-column">
  2232.                         <li class="nav-item active">
  2233.                           <a class="nav-link">
  2234.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  2235.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  2236.                           </a>
  2237.                         </li>
  2238.                         <li class="nav-item active">
  2239.                           <a class="nav-link">
  2240.                             <i class="far fa-file-alt"></i> 商品価格
  2241.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  2242.                           </a>
  2243.                         </li>
  2244.                         <li class="nav-item">
  2245.                           <a class="nav-link">
  2246.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  2247.                             <span class="float-right" id="maker_price">479,700円</span>
  2248.                           </a>
  2249.                         </li>
  2250.                         <li class="nav-item">
  2251.                           <a class="nav-link">
  2252.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> お値引き
  2253.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  2254.                           </a>
  2255.                         </li>
  2256.                         <li class="nav-item">
  2257.                           <a class="nav-link">
  2258.                             <i class="far fa-file-alt"></i> 基本工事費
  2259.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  2260.                           </a>
  2261.                         </li>
  2262.                         <li class="nav-item">
  2263.                           <a class="nav-link">
  2264.                             <i class="far fa-file-alt"></i> 施工オプション
  2265.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  2266.                           </a>
  2267.                         </li>
  2268.                       </ul>
  2269.                     </div>
  2270.                     <div class="card-footer">
  2271.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  2272.                           見積書表示
  2273.                         </button>
  2274.                         <button type="submit" id="cart_btn2" class="btn btn-info add-cart">施工検討リストに入れる</button>
  2276.                     </div>
  2277.                 </div>
  2278.             </div>
  2280.         </div>
  2282.     </div>
  2284.   <div class="modal" id="modal-mitsumori">
  2285.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  2286.       <div class="modal-content">
  2287.         <div class="modal-header">
  2288.           <h4 class="modal-title">お見積書</h4>
  2289.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  2290.             <span aria-hidden="true">&times;</span>
  2291.           </button>
  2292.         </div>
  2293.         <div class="modal-body">
  2294.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  2295.               <!-- title row -->
  2296.               <div class="row">
  2297.                 <div class="col-12">
  2298.                   <h2>概算お見積書 
  2299.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  2300.                   </h2>
  2301.                 </div>
  2302.                 <!-- /.col -->
  2303.               </div>
  2304.               <!-- info row -->
  2305.               <div class="row invoice-info">
  2306.                 <div class="col-sm-8 invoice-col">
  2307.                   <h3>お客様</h3>
  2308.                   <span>下記の通り、お見積もり申し上げます。</span>
  2309.                   <br />
  2310.                   <br / >
  2311.                   <br />
  2312.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  2313.                   <span>
  2314.                     <br/>
  2315.                     <br/>
  2316.                     <br/>
  2317.                     <br/>
  2318.                   </span>
  2319.                 </div>
  2320.                 <div class="col-sm-4 invoice-col">
  2321.                   <p>
  2322.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  2323.                   </p>
  2324.                   <p>有限会社プラス</p>
  2325.                   <p>〒400-0334</p>
  2326.                   <p>山梨県南アルプス市藤田1450番地2</p>
  2327.                   <p>TEL: 055-284-6480</p>
  2328.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  2329.                 </div>
  2330.                 <!-- /.col -->
  2331.                 <!-- /.col -->
  2332.               </div>
  2333.               <!-- /.row -->
  2334.               <!-- Table row -->
  2335.               <div class="row">
  2336.                 <div class="col-12 table-responsive">
  2337.                   <table class="table table-striped">
  2338.                     <thead>
  2339.                       <tr>
  2340.                         <th>項目</th>
  2341.                         <th>数量</th>
  2342.                         <th>単位</th>
  2343.                         <th>単価</th>
  2344.                         <th>小計</th>
  2345.                       </tr>
  2346.                     </thead>
  2347.                     <tbody>
  2348.                       <tr>
  2349.                         <td>プレーンルーフ 600タイプ 1台用 単体セット</td>
  2350.                         <td>1</td>
  2351.                         <td>式</td>
  2352.                         <td id="mitsumori_price_01">352,800</td>
  2353.                         <td id="mitsumori_price_02">352,800</td>
  2354.                       </tr>
  2355.                       <tr>
  2356.                         <td>基本工事費</td>
  2357.                         <td>1</td>
  2358.                         <td>式</td>
  2359.                         <td id="mitsumori_ct_01">10,000</td>
  2360.                         <td id="mitsumori_ct_02">10,000</td>
  2361.                       </tr>
  2362.                       <tr>
  2363.                         <td>残土・ガラ処理</td>
  2364.                         <td>1</td>
  2365.                         <td>式</td>
  2366.                         <td>0円</td>
  2367.                         <td></td>
  2368.                       </tr>
  2369.                       <tr>
  2370.                         <td>　</td>
  2371.                         <td></td>
  2372.                         <td></td>
  2373.                         <td></td>
  2374.                         <td></td>
  2375.                       </tr>
  2376.                     </tbody>
  2377.                   </table>
  2378.                 </div>
  2379.                 <!-- /.col -->
  2380.               </div>
  2381.               <!-- /.row -->
  2382.               <div class="row">
  2383.                 <!-- accepted payments column -->
  2384.                 <div class="col-6">
  2385.                   <p class="lead">お支払い方法</p>
  2386.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  2387.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  2388.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  2389.                   </p>
  2390.                 </div>
  2391.                 <!-- /.col -->
  2392.                 <div class="col-6">
  2393.                   <div class="table-responsive">
  2394.                     <table class="table">
  2395.                       <tbody>
  2396.                         <tr>
  2397.                           <th style="width:50%">小計:</th>
  2398.                           <td id="mitsumori_shoukei">362,800</td>
  2399.                         </tr>
  2400.                         <tr>
  2401.                           <th>消費税 (10%)</th>
  2402.                           <td id="mitsumori_tax">36,280</td>
  2403.                         </tr>
  2404.                         <tr>
  2405.                           <th>合計:</th>
  2406.                           <td id="mitsumori_goukei_02">399,080</td>
  2407.                         </tr>
  2408.                       </tbody>
  2409.                     </table>
  2410.                   </div>
  2411.                 </div>
  2412.                 <!-- /.col -->
  2413.               </div>
  2414.               <!-- /.row -->
  2415.             </div>
  2416.         </div>
  2417.         <div class="modal-footer justify-content-between">
  2418.                   {# PDF出力: mitsumori_json を POST して PDF ダウンロード #}
  2419.                   <form method="post" action="{{ url('mitsumori_pdf') }}" target="_blank" id="pdf_download_form">
  2420.                     <input type="hidden" name="_token" value="{{ csrf_token('mitsumori_pdf') }}">
  2421.                     <input type="hidden" name="mitsumori_json" id="pdf_mitsumori_json">
  2422.                     <button type="submit" class="btn btn-primary float-right" style="margin-right: 5px;" onclick="syncPdfJson();">
  2423.                       <i class="fas fa-download"></i>PDF出力
  2424.                     </button>
  2425.                   </form>
  2426.                   <button type="submit" id="cart_btn3" class="btn btn-info add-cart">施工検討リストに入れる</button>
  2427.         </div>
  2428.       </div>
  2429.       <!-- /.modal-content -->
  2430.     </div>
  2431.     <!-- /.modal-dialog -->
  2432.   </div>
  2433.   <!-- /.modal -->
  2437. {% endblock %}