<style>@media only screen and (min-width: 1024px) { body.have_curtain .ec-overlayRole{ display: block; } .modal_font_size-main.modal-main.modal-main_2{ grid-template-columns: 1fr; } .modal_font_size-main.modal-main.modal-main_2 .modal-main-item{ border-bottom: 1px dashed; margin-bottom: 16px; padding: 10px; } .modal_font_size-main-header .alert{ margin-top: 0; background-color: #fff; border-color: #fff; color: #3C4246; display: flex; gap: 4px; }}</style><div id="modal_font_size" class="modal"> <div class="modal_font_size-item modal-item"> <div class="modal_font_size-header modal-header"> <h3 class="modal_font_size-title modal-title">線の細さ目安</h3> </div> <div class="modal_font_size-body modal-body"> <div class="modal_font_size-main-wrap modal-main-wrap step01 step"> <div class="modal_font_size-main modal-main modal-main_2"> <div class="modal_font_size-main-header modal-main-header"> <div class="alert alert-primary"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.5816 0 0 3.5816 0 8C0 12.4184 3.5816 16 8 16C12.4184 16 16 12.4184 16 8C16 3.5816 12.4184 0 8 0ZM8.8 12H7.2V10.4H8.8V12ZM8.8 8.8H7.2L6.8 4H9.2L8.8 8.8Z" fill="#FB2A4F"/></svg> 目安が満たされている場合でもデザインの内容によっては製作が難しくなる場合がございます。<br>その場合はその旨ご連絡させて頂きますので、何卒ご容赦くださいますようお願い申し上げます。 </div> </div> <div class="modal_font_size-main-body modal-main-body"> <div class="modal-main-item"> <div class="content-item-grid"> <div class="grid-item"> <div class="modal-main-item-img"><img src="{{ asset('assets/img/estimate/img-setting_attention-cotting-item08.png') }}"></div> </div> <div class="grid-item"> <table class="st-table"> <tr> <th><span class="label">素材</span></th> <th><span class="label text-primary">欧文</span></th> <th><span class="label text-success">漢字</span></th> </tr> <tr> <td>・一般色の全色<br>・ガラス内側から貼る<br>・メタリックのブラック以外</td> <td>7〜10mm</td> <td>15mm</td> </tr> <tr> <td>・ラメ</td> <td>10〜15mm</td> <td>20mm</td> </tr> <tr> <td>・ミラー</td> <td>7〜10mm</td> <td>15mm</td> </tr> <tr> <td>・反射<br>・メタリックのブラック</td> <td>20〜35mm</td> <td>40mm</td> </tr> </table> </div> </div> </div> <div class="modal-main-item"> <div class="content-item-grid"> <div class="grid-item"> <div class="modal-main-item-img"><img src="{{ asset('assets/img/estimate/img-setting_attention-cotting-item09.png') }}"></div> </div> <div class="grid-item"> <table class="st-table"> <tr> <th><span class="label">素材</span></th> <th><span class="label text-primary">欧文</span></th> <th><span class="label text-success">漢字</span></th> </tr> <tr> <td>・一般色の全色<br>・ガラス内側から貼る<br>・メタリックのブラック以外</td> <td>4〜6mm</td> <td>10mm</td> </tr> <tr> <td>・ラメ</td> <td>6〜8mm</td> <td>10mm</td> </tr> <tr> <td>・ミラー</td> <td>4〜6mm</td> <td>10mm</td> </tr> <tr> <td>・反射<br>・メタリックのブラック</td> <td>10〜15mm</td> <td>20mm</td> </tr> </table> </div> </div> </div> <div class="modal-main-item"> <div class="content-item-grid"> <div class="grid-item"> <div class="modal-main-item-img"><img src="{{ asset('assets/img/estimate/img-setting_attention-cotting-item10.png') }}"></div> </div> <div class="grid-item"> <table class="st-table"> <tr> <th><span class="label">素材</span></th> <th><span class="label text-primary">欧文</span></th> <th><span class="label text-success">漢字</span></th> </tr> <tr> <td>・一般色の全色<br>・ガラス内側から貼る<br>・メタリックのブラック以外</td> <td>7〜9mm</td> <td>20mm</td> </tr> <tr> <td>・ラメ</td> <td>7〜9mm</td> <td>25mm</td> </tr> <tr> <td>・ミラー</td> <td>7〜9mm</td> <td>20mm</td> </tr> <tr> <td>・反射<br>・メタリックのブラック</td> <td>12〜16mm</td> <td>20mm</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> <div class="modal_font_size-bottom modal-bottom"> <span class="modal-btn ec-inlineBtn--cancel">OK</span> </div> </div></div><script>$(function() { $('#open-modal_font_size').on('click', function(){ $('#modal_font_size').addClass('is-active'); $('body').addClass('have_curtain'); }); $('.ec-inlineBtn--cancel').on('click', function(){ $('#modal_font_size').removeClass('is-active'); $('body').removeClass('have_curtain'); });});</script>