@extends('layout.basic.main')
@section('title',empty($id) ? 'リッチメニュー画像作成（作成）':'リッチメニュー画像作成（編集）')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/menu_rich/new.css?v={{config("sns-line.version")}}" type="text/css">
    <style>

        .action-item .btn{
            padding: 4px 8px 6px;
            color: #51595C;
            font-size: 18px;
        }
        .style-text {
            font-weight: bold;
            font-size: 18px;
            padding: 6px 0 6px 15px;
        }


        input[type='text']{
            height: 36px !important;
        }
        #addImageRich .custom-radio:checked + label:after{
            background-color: #08BF5A !important;
        }
        .input-cal{
            padding-left: 30px !important;
            border-radius: 5px;
            height: 34px;
            width: 242px !important;
        }
        .ic-cal-ip{
            position: absolute;
            left: 8px;
            top: 6px;
            color: rgba(190,190,190,1);
        }
        .box-preview{
            padding: 20px 30px 30px 30px;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            opacity: 1;
            margin-top: 15px;
        }
        #addImageRich .btn-sns-line-new{
            box-shadow: 0px 3px 0px #00000080;
        }
        .txt-number{
            border: 1px solid #51595C;
            border-radius: 50%;
            padding: 2px 6px 4px 7px;
            font-size: 12px;
        }
        h2, a , div {
            font-weight: bold;
        }
        .btn-action-richitem{
            border: none !important;
        }
        .input-color-container {
            position: relative;
            overflow: hidden;
            width: 35px;
            height: 35px;
            border-radius: 40px;
            box-shadow: 0px 3px 6px #00000029;
        }

        .input-color {
            position: absolute;
            right: -8px;
            top: -8px;
            width: 56px;
            height: 56px;
            border: none;
        }

        .input-color-label {
            cursor: pointer;
            text-decoration: underline;
            color: #3498db;
        }
        .md_tab_box_lg{
            /*border: 1px solid #707070;*/
            box-shadow: 0px 0px 6px #51595C80;

            padding-top: 15px;
            margin: 0 auto;
            /*margin-top: 20px;*/
            /*margin-bottom: 15px;*/
        }
        .md_tab_box_lg .nav-tabs{
            display: flex;
            flex-direction: row;
            width: 100%;
            margin: 0 auto;
        }
        .md_tab_box_lg .nav-tabs > li{
            /*border: none;*/
            border: 1px solid #ccc;
            box-shadow: 0px 0px 6px #51595C80;
            border-bottom: none;
            border-radius: 0px;
            margin-left: 10px;
            flex-grow: 1;
        }
        .md_tab_box_lg .nav-tabs > li:last-child{
            margin-right: 10px;
        }
        .md_tab_box_lg .nav-tabs>li>a{
            border-radius: 0;
            /*border: 1px solid #ccc;*/
            border:none;
            margin-right: -1px;
            margin-left: -1px;
            /*background: #FFD6D6;*/
            padding: 11px 0;
            text-align: center;
            /*padding: 11px 34px;*/
        }
        /*.md_tab_box_lg .nav-tabs>li.active.haveLayout::after {*/
        /*    background-color: rgb(199, 224, 250);*/
        /*    height: 20px;*/
        /*    content: "";*/
        /*    position: absolute;*/
        /*    bottom: -20px;*/
        /*    left: -2px;*/
        /*    right: 0px;*/
        /*}*/
        .md_tab_box_lg .nav-tabs>li.active>a,
        .md_tab_box_lg .nav-tabs>li.active>a:focus,
        .md_tab_box_lg .nav-tabs>li.active>a:hover{
            border: none;
            background: #FFD6D6;
            /*border-bottom-color: #C7E0FA ;*/
            border-radius: 2px 2px 0px 0;
        }

        .md_tab_box_lg .nav-tabs{
            /*border-bottom: 1px solid #707070;*/
        }
        .md_tab_box_lg  li.active >a , .md_tab_box_lg  .tab-content .active{
            background: #FFD6D6 ;
        }
        .md_tab_box_lg .tab-pane{
            /*height: 200px;*/
        }

        .md_tab_box .nav-tabs{
            display: flex;
            flex-direction: row;
            width: 504px;
            margin: 0 auto;
        }
        .md_tab_box{
            border: 1px solid #707070;
            padding-top: 15px;
            max-width: 505px;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 15px;
        }
        .md_tab_box .nav-tabs > li{
            /*border: 1px solid #e4e4e4;*/
            border:none;
            border-bottom: none;
             border-radius: 0px;
            margin-left: 15px;
            flex-grow: 1;
        }
        .md_tab_box .nav-tabs>li>a{
            border-radius: 0;
            border: 1px solid #707070;
            margin-right: -1px;
            margin-left: -1px;
            padding: 22px 34px;
            background: #eee;
            text-align: center;
        }
        .md_tab_box .nav-tabs>li:last-child{
            margin-right: 15px;
        }
        .md_tab_box .nav-tabs>li.active>a,
        .md_tab_box .nav-tabs>li.active>a:focus,
        .md_tab_box .nav-tabs>li.active>a:hover{
            border: 1px solid #707070;
            /*border-bottom-color: #C7E0FA ;*/
            border-radius: 0;
        }

        .md_tab_box .nav-tabs{
            border-bottom: 1px solid #707070;
        }
        .md_tab_box  li.active >a , .md_tab_box  .tab-content .active{
            background: #eee ;
        }
        .md_tab_box .tab-pane{
            height: 200px;
        }
        .box_itemUi{
            margin: 15px;
            /*box-shadow: 0px 0px 6px #51595C80;*/
        }
        .item_ui{
            width: 50px;
            height: 50px;
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            background: rgb(125, 145, 149);
            margin: 0 auto;
            margin-top: 7px;
            margin-bottom: 13px;
        }
        .txt-lg{
            font-size: 19px;
        }
        .txt-sm{
            font-size: 14px;
        }


        .box_content_itemUI{
            border: 2px solid #ffffff00;
            padding: 6px;
            padding-bottom: 0px;
            /*margin-top: 32px;*/
            position: relative;
            margin-bottom: 1px;
        }
        .box_content_itemUI_odd{
            border: 2px solid rgb(244, 251, 242);
        }
        .box_content_itemUI:hover{
            border:  2px dashed #5799DB;
            padding: 6px;
            padding-bottom: 0px;
            /*opacity: 0.7;*/
        }
        .box_content_itemUI:hover .ic_close_ui,
        .box_content_itemUI:hover .btn_contentUI,
        .box_content_itemUI:hover .btn_contentTextLgUI
        {
            display: block;
        }

        #image_html_0 .box_content_itemUI_top{
            margin-bottom: 8%;
        }
        .box_content_itemUI_top_2{
            margin-bottom: 2%;
        }
        .ic_close_ui{
            position: absolute;
            color: red;
            font-size: 26px;
            top: -12px;
            right: -14px;
            display: none;
            background: white;
            border-radius: 50%;
        }
        .btn_contentUI{
            background: #1476d9;
            color: white;
            font-size: 9px;
            padding: 2px 8px;
            position: absolute;
            z-index: 1;
            top: 31px;
            cursor: pointer;
            right: 43%;
            display: none;
        }
        .btn_contentTextLgUI{
            background: #1476d9;
            color: white;
            font-size: 9px;
            padding: 2px 8px;
            margin-top: 2px;
            position: absolute;
            z-index: 1;
            top: 3px;
            cursor: pointer;
            right: 44%;
            display: none;
        }
        .box_parent_itemui{
            padding: 0px;
            /*border: 3px solid;*/
            /*height: 241px;*/
        }

        /*.box_parent_itemui:hover{*/
        /*    border: 3px solid #5799DB;*/
        /*}*/
        .box_parent_itemui:hover .btnPreviewItem
        ,.box_parent_itemui:hover .btnEditItem {
            display: block;
        }
        .btnPreviewItem{
            display: none;
            font-size: 13px;
        }
        .btnEditItem{
            display: none;
            font-size: 13px;
        }
        .box-area-lg{
            /*border-top: 1px solid #ccccccd4;*/
            width: 900px;
            /*height: 463px;*/
            display: flex;
            flex-wrap: wrap;
            /*margin: 0 auto;*/
            /*border-bottom: none*/
        }
        #image_html_1{
            margin-left: 0px;
        }
        #image_html_1 .box-area-lg{
            margin: 0 auto;
        }

        .box-area-sm{
            /*border: 1px solid rgb(0 0 0 / 0%);*/
            border: none;
            width: 900px;
            /*min-height: 243px;*/
            border-bottom: none
        }
        #image_html_1 .box-area-sm{
            margin-left: 0;
            display: flex;
        }
        #image_html_0 .box-area-sm{
            /*margin-left: 0;*/
            display: flex;
        }
        .txt_lg_pr{
            margin-top: 0px;
            padding: 0px !important;
            margin-bottom: 3px;
        }
        .txt_sm_pr{
            padding: 0px !important;
            margin-top: -4px;
            /*margin-bottom: 4px;*/
        }
        .txt_sm_pr .btn_contentTextLgUI{
            top: 0px;
        }
        .ic_box{
            border:2px solid #f1eeee ;
            margin: 10px;
            padding: 0;
            height: 115px;
            width: 128px;
            cursor: pointer;
        }
        .md_ic_label{
            font-size: 13px;
            margin-top: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ic_id{
            background: #f1eeee;
            height: 24px;
        }
        .ic_box:hover{
            border-color: #08BF5A;
            background-color: #F4FBF3;
        }
        .ic_box:hover .ic_id{
            background-color: #e1f1df;
        }
        .areaItem{
            /*min-height: 224px;*/
            padding: 3px !important;
        }
        .box_content_itemUI img{
            height: 86px;
        }

        .box_content_itemUI_tab{
            border: 2px solid #ffffff00;
            padding: 6px 2px;
            /*padding-bottom: 0px;*/
            min-width: 70px;
            text-align: center;
            position: relative;
            margin-bottom: 1px;
            margin: 0 5px;
        }

        .box_content_itemUI_tab:hover{
            border:  2px dashed #5799DB;
            padding: 6px 2px;
            /*padding-bottom: 0px;*/
            opacity: 0.7;
            margin: 0 5px;
        }
        .box_content_itemUI_tab:hover .ic_close_ui,
        .box_content_itemUI_tab:hover .btn_contentUI,
        .box_content_itemUI_tab:hover .btn_contentTextUI_tab
        {
            display: block;
        }
        .btn_contentTextUI_tab{
            background: #1476d9;
            color: white;
            font-size: 10px;
            padding: 2px 8px;
            position: absolute;
            z-index: 1;
            cursor: pointer;
            display: none;
            margin-left: 42%;
        }
        .img4{
            display: flex;
            align-items: center;
        }
        input[type='number']{
            text-align: center;
        }
        #modalChooseLayout .template-btn .btn-default:hover{
            border:2px solid #08BF5A !important;
        }
        #modalChooseLayout .template-btn .btn-default:hover .box-opa{
            display: block;
        }
        #modalChooseLayout .template-btn .btn-default:focus .box-opa{
            display: block;
        }
        #modalChooseLayout .template-btn .btn-default:active .box-opa{
            display: block;
        }
        .box-opa{
            width: 165px;
            position: absolute;
            background-color: #00B900;
            top: 1px;
            opacity: 20%;
            display: none;
        }
        /*.box_parent_itemui:nth-of-type(odd)>.areaItem {*/
        /*    background-color:#fff;*/
        /*}*/

        /*.box_parent_itemui:nth-of-type(even)>.areaItem {*/
        /*    background-color:#F4FBF2;*/
        /*}*/
           .md_scroll::-webkit-scrollbar, #tag_id_2 .list-group::-webkit-scrollbar{
            width: 10px;
        }
        .md_scroll::-webkit-scrollbar-track, #tag_id_2 .list-group::-webkit-scrollbar-track{
            /*box-shadow: inset 0 0 5px grey;*/
            border-radius: 10px;
        }
        .md_scroll::-webkit-scrollbar-thumb, #tag_id_2 .list-group::-webkit-scrollbar-thumb{
            background: #96ADB2;
            border-radius: 10px;
        }
        .md_scroll{
            max-height: 547px;
            overflow: auto;
        }
        .top_img_3{
            top:-24px;
        }
        .line_tt{
            height: 34px;
            width: 9px;
            background-color: rgb(8, 191, 90);
            border-radius: 2px;
        }
        .inp_number::-webkit-inner-spin-button,
        .inp_number::-webkit-outer-spin-button, .inp_number {
            opacity: 1 !important;
            -webkit-appearance: textfield !important;
            margin: 0;
        }
        .tab_sub_top{
            margin-top: 20px;
        }
        .tab_rich{
            position: relative;
        }
        .tab_rich:hover .btnPreviewItem, .tab_rich:hover .btnEditItem{
            display: block;
        }
        .label_color_cus{
            right: 0;
            background-color: #5799DB;
            color: white !important;
            padding: 4px 7px 6px 7px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }
        .input_col_cus{
            opacity: 0;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            cursor: pointer;
        }
        .cus_btn-color{
            position: absolute;
            display: none;
            z-index: 99;
            right: 0;
            top: -21px;
            cursor: pointer;
        }
        .btnPreviewItemTab:hover{
            opacity: 1;
        }
        .input_col_cus:hover  .cus_btn-color{
            display: none;
        }
        .tab_li:hover .cus_btn-color, .tab_li:hover .btnPreviewItemTab, .cus_btn-color:hover {
            display: inline-block;
        }
        .w-img{
            width: 399px !important;
        }
        .content_ic{
            height: 75px;
        }
        .img_pre_content{
            width: 114px;
            margin-bottom: 2px;
            margin-top: -3px;
        }
        .title_layout{
            margin-top: 13px;
            display: flex;
            margin-left: 0px;
            align-items: baseline;
        }
        #addImageRich .modal-content{
            border: none;
            margin-top: 83px;
        }

        .item_pos_ex{
            position: absolute;
            z-index: 1;
            top: -1px
        }
        .box_content_itemUI i{

        }
        #image_html_0 .icon_content i{
            font-size: 80px;
            margin-top: 0px;
        }
        #image_html_1 .icon_content i{
            font-size: 80px;
            margin-top: -5px;
        }
        #contentBlack, .img4{
            margin-left: 0px;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div  id="addImageRich" v-cloak>

                <div class="row">
                    <div class="col-sm-12">

                        <h2 style="font-size: 22px; font-weight: bold; padding: 10px 10px 10px 0" v-if="id != ''">[@{{ name }}]編集</h2>
                        <h2 v-else style="font-size: 22px; font-weight: bold; padding: 10px 10px 10px 0">リッチメニュー画像作成</h2>
                    </div>
                </div>

                <div class="row" style="margin-top: 13px;margin-top: 13px;
                                                    display: flex;
                                                    margin-left: 0px;
                                                    align-items: baseline;">
                    <div style="margin-right: 99px" >

                        <div  style="margin-bottom: 10px;display: flex ;align-items: flex-end; justify-content: space-between">
                            <label style="font-size: 18px">管理名 </label>
                            <span>@{{name.length}}/20</span>
                        </div>
                        <input type="text" name="name" id="name" placeholder=""
                               data-vv-as="管理名"
                               v-model="name"
                               v-validate="{required: true, max: 20}"
                               class="form-control w-img" aria-required="true" aria-invalid="false">
                        <small class="help-block text-danger" v-show="errors.has('name')">
                            @{{ errors.first('name') }}
                        </small>
                    </div>

                    <div >
                        <label  style="font-size: 18px;margin-bottom: 10px ">フォルダ</label>
                        <select  class="form-control text-center my_class w-img" v-model="group_id"
                                 name="group_id" style="height: 36px;margin-bottom: 13px; color: #96ADB2 ">
                            <option value="0">未分類</option>
                            <option  v-for="(item,index) in groups" :value="item.id">@{{ item.name }}</option>
                        </select>
                    </div>
                </div>

                <div class="row" style="overflow: auto;margin-bottom: 20px;">
                    <div class="col-md-11" v-bind:style="'padding-left:'+ (type_content == 0 ? '0': '')">
                        <div class="box_itemUi" id="image_html_0" v-if="type_content == 0">
                            <div v-if="detail_tab.length >0 && imageLayout=='image_1'"
                                 class="row box-area-lg" id="contentBlack"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"

                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class=" text-center box_parent_itemui"
                                        {{--                                     v-bind:style="'padding:'+ margin_box +'px;'"--}}
                                >

                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                         +';padding: 14px;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px; '
                                    "
                                    >

                                        {{--                                        <img :src="area.css.bg_img_item_url" style="">--}}

                                        <div class="d-flex align-item-center justify-content-between box_content_itemUI_top" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>
                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"

                                               style=""></i>
                                            <label class="btn_contentUI"  data-toggle='modal'
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"
                                                       ></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                            @{{ area.text_lg }}
                                        </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_2'"
                                 class="row box-area-lg"  id="contentBlack" style=""
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class=" text-center box_parent_itemui">

                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                         +';padding: 14px;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px; '
                                    "
                                    >
                                        <div class="d-flex align-item-center justify-content-between box_content_itemUI_top" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    v-on:click="resetArea(index)"
                                                    style="float: left"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI" style="right: 46%"
                                                   data-toggle='modal'
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"
                                                    ></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 46%"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                            @{{ area.text_lg }}
                                        </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 46%"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_3'"
                                 id="contentBlack" class="row box-area-lg"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
{{--                                     :class="index == 0 ? 'col-md-12' : 'col-md-4'"--}}
                                     class=" text-center box_parent_itemui" >

                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                         + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                         +';padding: 14px;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                     +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px; '
                                    "
                                    >
                                        <div class="d-flex align-item-center justify-content-between "
                                             v-bind:class="index > 0 ? 'box_content_itemUI_top' : 'box_content_itemUI_top_2'"
                                             style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI" v-bind:style="(index ==0)?'right: 48%;' : ''"
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="' color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index ==0)?'right: 48%;' : ''"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                            @{{ area.text_lg }}
                                        </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index ==0)?'right: 48%;' : ''"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>

                                    </div>

                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_4'" class="row box-area-lg img4"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     v-if="index == 0"
{{--                                     :class="index == 0 ? 'col-md-8' : ''"--}}
                                     class=" text-center box_parent_itemui"
                                        {{--                                     v-bind:style="index == 0 ? 'height:482px':''"--}}
                                >
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                        + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px'--}}
                                         +';padding: 14px !important;'
                                        +';margin-top:'+ area.top +'px; '
                                        +';margin-left:'+ area.left +'px; '
                                        +';margin-right:'+ area.right +'px; '
                                        +';margin-bottom:'+ area.bottom +'px; '
                                        +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px;  '"
                                    >
                                        <div class="d-flex align-item-center justify-content-between " style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI"  v-bind:style="index == 0 ? 'margin-top:30%' : ''" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI" v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                   data-toggle='modal'
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="' color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index ==0)?'right: 45%;' : ''"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index ==0)?'right: 45%;' : ''"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div >
                                    <div v-for="(area,index) in detail_tab"
                                         :id="'box_area_'+index"
                                         v-if="index > 0"
                                         {{--                                             :class="index > 0 ? 'col-md-12' : ''"--}}
                                         class=" text-center box_parent_itemui" style="overflow: auto;">
                                        <div class="areaItem"
                                            :class="'bg_img_item_url_' + index"
                                             v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px'--}}
                                                     +'; padding: 14px !important;'
                                                    +';margin-top:'+ area.top +'px; '
                                                    +';margin-left:'+ area.left +'px; '
                                                    +';margin-right:'+ area.right +'px; '
                                                    +';margin-bottom:'+ area.bottom +'px; '
                                                   +';width:'+ area.width +'px; '
                                                    +'height:'+ area.height +'px;  '"
                                        >

                                            <div class="d-flex align-item-center justify-content-between box_content_itemUI_top" style="height: 30px;">
                                                <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                        style="float: left"
                                                        v-on:click="resetArea(index)"
                                                >リセット</button>
                                                <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                        v-on:click="openSettingBoxItem('item',index,area)"
                                                        data-toggle='modal'
                                                        data-target='#modalSettingBox'
                                                        style="float: right;">背景枠設定</button>
                                            </div>

                                            <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                <i class="fas fa-times-circle ic_close_ui"
                                                   :id="'ic_close_content_area_'+index"
                                                   v-on:click="remoteContentArea(index,area)"
                                                   style=""></i>
                                                <label class="btn_contentUI" v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                       data-toggle='modal'
                                                       v-on:click="openMdIcon(index,area)"
                                                       data-target='#modalSettingItemIcon'>設定</label>
                                                <div v-if="area.icon_type == 1" class="icon_content">
                                                    <div class="text-center" style="height: 87px">
                                                        <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                           v-bind:style="' color:' + area.icon_color"></i>
                                                    </div>
                                                </div>
                                                <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                    <img :src="area.icon_img_url" style="width: 138px;margin-bottom: 6px;">
                                                </div>
                                                <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                </div>
                                            </div>

                                            <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                                <i class="fas fa-times-circle ic_close_ui"
                                                   :id="'ic_close_lg_'+index"
                                                   v-on:click="remoteText('lg',index,area)"
                                                   style=""></i>
                                                <label class="btn_contentTextLgUI"
                                                       v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                       v-on:click="openMdText('lg',index,area)"
                                                       data-toggle='modal'
                                                       data-target='#modalSettingItemText'>設定</label>
                                                <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                    @{{ area.text_lg }}
                                                </span>
                                            </div>

                                            <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                <i class="fas fa-times-circle ic_close_ui"
                                                   :id="'ic_close_sm_'+index"
                                                   v-on:click="remoteText('sm',index,area)"
                                                   style=""></i>
                                                <label class="btn_contentTextLgUI"
                                                       v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                       v-on:click="openMdText('sm',index,area)"
                                                       data-toggle='modal'
                                                       data-target='#modalSettingItemText'>設定</label>
                                                <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                                    @{{ area.text_sm }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_5'"
                                 id="contentBlack" class="row box-area-lg"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class="text-center box_parent_itemui"
                                >
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                         + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
                                         +';padding: 14px;'
                                        +';margin-top:'+ area.top +'px; '
                                        +';margin-left:'+ area.left +'px; '
                                        +';margin-right:'+ area.right +'px; '
                                        +';margin-bottom:'+ area.bottom +'px; '
                                        +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px;  '
                                        "
{{--                                        +';margin:'+ margin_box +'px; padding: 15px;'"--}}
                                    >
                                        <div class="d-flex align-item-center justify-content-between box_content_itemUI_top_2" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               v-bind:style="area.icon_color"></i>
                                            <label class="btn_contentUI" style="right: 48%"
                                                   data-toggle='modal'
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>


                                        <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 48%"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>
                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 48%"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_6'"
                                 id="contentBlack" class="row box-area-lg" style=" display: flex;"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')">
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class=" text-center box_parent_itemui">
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px'--}}
                                                 +';padding: 14px;'
                                       +';margin-top:'+ area.top +'px; '
                                       +';margin-left:'+ area.left +'px; '
                                       +';margin-right:'+ area.right +'px; '
                                       +';margin-bottom:'+ area.bottom +'px; '
                                       +';width:'+ area.width +'px; '
                                       +'height:'+ area.height +'px;  '"
                                    >

                                        <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    style="float: right;"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                            >背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1"
                                            style="margin-top:40%">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI" style="right: 45%"
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 45%"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 45%"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_7'"
                                 id="contentBlack" class="row box-area-lg"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class="text-center box_parent_itemui" style="height: 100%;">
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px'--}}
                                         +';padding: 12px !important;'
                                        +';margin-top:'+ area.top +'px; '
                                        +';margin-left:'+ area.left +'px; '
                                        +';margin-right:'+ area.right +'px; '
                                        +';margin-bottom:'+ area.bottom +'px; '
                                        +';width:'+ area.width +'px; '
                                       +'height:'+ area.height +'px;  '"
                                    >
                                        <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" style="margin-top: 19%" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI"  style="right: 48%"
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-toggle='modal'  data-target='#modalSettingItemIcon'
                                            >設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 48%"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 48%"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_1c'"
                                 id="contentBlack" class="row box-area-sm"
                                 v-bind:style="'display: flex;background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class=" text-center box_parent_itemui" >
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                         +';padding: 14px;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px;  '"
                                    >
                                        <div class="d-flex align-item-center justify-content-between box_content_itemUI_top" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI"
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_2c'"
                                 id="contentBlack"class="row box-area-sm"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class="text-center box_parent_itemui" >
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                         +';padding: 11px !important;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px;  '"
                                    >
                                        <div class="d-flex align-item-center justify-content-between box_content_itemUI_top_2" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI" style="right: 46%"
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="' color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 46%"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right: 46%"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_3c'"
                                 id="contentBlack" class="row box-area-sm"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
{{--                                     :class="(index == 0 ) ? 'col-md-8' : 'col-md-4'"--}}
                                     class="text-center box_parent_itemui" >
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                         + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                         +';11px !important;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px;  '"
                                    >
                                        <div class="d-flex align-item-center justify-content-between"
                                             v-bind:style="(index ==0) ?  'margin-bottom:4%;height: 30px;' : 'margin-bottom:6%;height: 30px;'">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI"  v-bind:style="(index == 0) ? 'right:47%': ''"
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index == 0) ? 'right:47%': ''"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index == 0) ? 'right:47%': ''"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_5c'"
                                 id="contentBlack" class="row box-area-sm"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
{{--                                     :class="(index == 0 ) ? 'col-md-4' : 'col-md-8'"--}}
                                     class="text-center box_parent_itemui" >
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                         +';padding: 14px;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px;  '"
                                    >
                                        <div class="d-flex align-item-center justify-content-between "
                                             v-bind:style="(index ==0) ?  'margin-bottom:6%;height: 30px;' : 'margin-bottom:4%;height: 30px;'"
                                        >
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI"  v-bind:style="(index == 0) ? 'right:43%': 'right:47%'"
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="'color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index == 0) ? 'right:40%': 'right:45%'"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1" >
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   v-bind:style="(index == 0) ? 'right:40%': 'right:45%'"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="detail_tab.length >0 && imageLayout=='image_4c'"
                                 id="contentBlack" class="row box-area-sm"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"
                            >
                                <div v-for="(area,index) in detail_tab"
                                     :id="'box_area_'+index"
                                     class=" text-center box_parent_itemui" >
                                    <div class="areaItem"
                                         :class="'bg_img_item_url_' + index"
                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                                 +';padding: 14px !important;'
                                       +';margin-top:'+ area.top +'px; '
                                       +';margin-left:'+ area.left +'px; '
                                       +';margin-right:'+ area.right +'px; '
                                       +';margin-bottom:'+ area.bottom +'px; '
                                       +';width:'+ area.width +'px; '
                                       +'height:'+ area.height +'px;  '"
                                    >

                                        <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                    style="float: left"
                                                    v-on:click="resetArea(index)"
                                            >リセット</button>
                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                    data-toggle='modal'
                                                    data-target='#modalSettingBox'
                                                    style="float: right;">背景枠設定</button>
                                        </div>

                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_content_area_'+index"
                                               v-on:click="remoteContentArea(index,area)"
                                               style=""></i>
                                            <label class="btn_contentUI"
                                                   style="right:48%"
                                                   data-toggle='modal'
                                                   v-on:click="openMdIcon(index,area)"
                                                   data-target='#modalSettingItemIcon'>設定</label>
                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                <div class="text-center" style="height: 87px">
                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                       v-bind:style="' color:' + area.icon_color"></i>
                                                </div>
                                            </div>
                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                <img :src="area.icon_img_url"
                                                     :class="'icon_img_url_' + index"
                                                     style="width: 138px;margin-bottom: 6px;">
                                            </div>
                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                            </div>
                                        </div>

                                        <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_lg_'+index"
                                               v-on:click="remoteText('lg',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right:48%"
                                                   v-on:click="openMdText('lg',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                        </div>

                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                            <i class="fas fa-times-circle ic_close_ui"
                                               :id="'ic_close_sm_'+index"
                                               v-on:click="remoteText('sm',index,area)"
                                               style=""></i>
                                            <label class="btn_contentTextLgUI"
                                                   style="right:48%"
                                                   v-on:click="openMdText('sm',index,area)"
                                                   data-toggle='modal'
                                                   data-target='#modalSettingItemText'>設定</label>
                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box_itemUi" id="image_html_1" v-if="type_content==1" style="width: 900px">
                            <div class="md_tab_box_lg" id="content_image_html_1"
                                 v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')
                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +');background-size: 100%;':'')"

                            >
                                <ul class="nav nav-tabs" style="border-bottom:none">
                                    <li  v-for="(tab,index) in tabs" class="tab_li"
                                         v-on:mouseover="hoverLabelColor(index)"
{{--                                         @focusout="hoverLabelColorOut()"--}}
                                         :id="'liBoxColor' + index"
                                         v-bind:class="{'active' : (index == tab_active), 'haveLayout' : imageLayout != '', 'tab_sub_top': (index != tab_active) }"
                                         v-bind:style="'margin-bottom: -2px;min-width: 121px;position: relative;border-radius:'+ tab.tab_radius +'px '
                                         + tab.tab_radius +'px 0 0;background:' +((index == tab_active) ? tab.color_tab_main : tab.color_tab_sub)
                                         +'!important;border-color:'+ ((index == tab_active) ? tab.color_tab_main : tab.color_tab_sub) +'!important;'"
                                            {{--                                         :class="(index == tab_active) ? 'active' : ''"--}}
                                    >
                                        <div class="cus_btn-color " :id="'btn_color_cus_' + index" style=""  v-if="(index != tab_active)" >
                                            <label class="label_color_cus" :for="'lb_color_cus_' + index" style="">カラー設定</label>
                                            <input type="color" :id="'lb_color_cus_' + index" v-model="tab.color_tab_sub" class="input_col_cus" style="">
                                        </div>
                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default
                                         btnPreviewItemTab" :id="'btnItemTabReset' + index"
                                                style="position: absolute; top: -21px; left: 0; z-index: 99;
                                                            /*padding: 4px 8px !important;*/
                                                            /*font-size: 11px;*/
                                                            /*font-weight: bold;*/
                                                            "
                                                v-if="(index != tab_active)"
                                                v-on:click="resetAreaTab(index)"
                                        >リセット</button>


                                        <a data-toggle="tab" class="tab_rich"
                                           {{--                                           :href="'#tabContent'+index"--}}
{{--                                           v-bind:style="(index == tab_active)--}}
{{--                                               ? 'background:'+tab.color_tab_main+ ';border-bottom-color:'+tab.color_tab_main--}}
{{--                                               : 'background:'+tab.color_tab_sub + 'border-radius:'+ tab.tab_radius +'px' + tab.tab_radius +'px 0 0'--}}
                                                v-bind:style="'background:'+ ((index == tab_active) ? tab.color_tab_main : tab.color_tab_sub )
                                                + ';border-bottom-color:'+tab.color_tab_main
                                                        + ';border-radius:'+ tab.tab_radius +'px ' + tab.tab_radius +'px 0 0'
                                                        + ';padding: ' + ((index == tab_active) ? '46px 0;' : '36px 0;')"
                                        >



                                            <div class="box_content_itemUI_tab"  >
                                                <label class="btn_contentTextUI_tab"
                                                       v-on:click="openMdText('tab',index,tab)"
                                                       data-toggle='modal'
                                                       data-target='#modalSettingItemText'>設定</label>
                                                <span class="txt-lg" v-bind:style="tab.name_tab ? 'color:'+tab.color_name : 'color:#51595C'">
                                                  @{{ tab.name_tab }}
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" v-bind:style="'border: none; position: relative;height:'+(hParentContent-1) +'px;'"
                                >
                                    <div  v-for="(tab,index) in tabs"
                                          {{--                                          :id="'tabContent'+index"--}}
                                          :class="index == tab_active ? 'tab-pane fade in active':'tab-pane fade'"
                                    >
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_1'"
                                             class="row box-area-lg item_pos_ex"
                                             v-bind:style=" 'background:'+ ((index == tab_active) ? tab.color_tab_main : '')+'!important' "
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class=" text-center box_parent_itemui"
                                                    {{--                                     v-bind:style="'padding:'+ margin_box +'px;'"--}}
                                            >

                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                         + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'--}}
                                        +';padding: 14px;'
                                        +';margin-top:'+ area.top +'px; '
                                        +';margin-left:'+ area.left +'px; '
                                        +';margin-right:'+ area.right +'px; '
                                        +';margin-bottom:'+ area.bottom +'px; '
                                        +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px; '
                                        "
                                                >
                                                    {{--                                        <img :src="area.css.bg_img_item_url" style="">--}}

                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>
                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI"  data-toggle='modal'
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1"  class="icon_content">
                                                            <div class="text-center content_ic">
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="' color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 style="width: 114px;margin-bottom: 6px;">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                            @{{ area.text_lg }}
                                        </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_2'"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important' : ''"
                                             class="row box-area-lg item_pos_ex" style=""
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class=" text-center box_parent_itemui">
                                                {{--       col-md-6                             @{{ area }}--}}

                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                         + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'--}}
                                          +';padding: 14px;'
                                        +';margin-top:'+ area.top +'px; '
                                        +';margin-left:'+ area.left +'px; '
                                        +';margin-right:'+ area.right +'px; '
                                        +';margin-bottom:'+ area.bottom +'px; '
                                        +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px; '
                                        "
                                                >
                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                v-on:click="resetArea(index)"
                                                                style="float: left"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI" style="right: 46%"
                                                               data-toggle='modal'
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="' color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 style="width: 114px;margin-bottom: 6px;">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 46%"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                            @{{ area.text_lg }}
                                        </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 46%"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_3'" class="row box-area-lg item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
{{--                                                 :class="index == 0 ? 'col-md-12' : 'col-md-4'"--}}
                                                 class=" text-center box_parent_itemui" >

                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                            +';margin:'+ margin_box +'px; padding: 14px;'--}}
                                          +';padding: 14px;'
                                        +';margin-top:'+ area.top +'px; '
                                        +';margin-left:'+ area.left +'px; '
                                        +';margin-right:'+ area.right +'px; '
                                        +';margin-bottom:'+ area.bottom +'px; '
                                          +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px; '
                                        "
                                                >
                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI" v-bind:style="(index ==0)?'right: 48%;' : ''"
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="'color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index ==0)?'right: 48%;' : ''"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                            @{{ area.text_lg }}
                                        </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index ==0)?'right: 48%;' : ''"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_4'" class="row box-area-lg img4 item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : ''"
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 v-if="index == 0"
                                                 class=" text-center box_parent_itemui"
                                            >
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
                                                             +';padding: 14px !important;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                     +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px; '
"
                                                >

                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI"
                                                         v-if="area.is_delete_box !=1"
                                                         v-bind:style="index == 0 ? 'margin-top:17%' : ''">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI" v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                               data-toggle='modal'
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="' color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
{{--                                            <div class="col-md-4">--}}
                                            <div class="">
                                                <div v-for="(area,index) in detail_tab"
                                                     :id="'box_area_'+index"
                                                     v-if="index > 0"
                                                     {{--                                                         :class="index > 0 ? 'col-md-12' : ''"--}}
                                                     class=" text-center box_parent_itemui" style="    overflow: auto;" >
                                                    <div class="areaItem"
                                                        :class="'bg_img_item_url_' + index"
                                                         v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
                                        +'; padding: 5px !important'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px;  '
{{--                                        ';min-height:'+( margin_box >0 ? ((241-margin_box/2)+2): 241)+'px;height:100%'--}}
                                                                 "
                                                    >

                                                        <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                            <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                    style="float: left"
                                                                    v-on:click="resetArea(index)"
                                                            >リセット</button>
                                                            <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                    v-on:click="openSettingBoxItem('item',index,area)"
                                                                    data-toggle='modal'
                                                                    data-target='#modalSettingBox'
                                                                    style="float: right;">背景枠設定</button>
                                                        </div>

                                                        <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                            <i class="fas fa-times-circle ic_close_ui"
                                                               :id="'ic_close_content_area_'+index"
                                                               v-on:click="remoteContentArea(index,area)"
                                                               style=""></i>
                                                            <label class="btn_contentUI" v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                                   data-toggle='modal'
                                                                   v-on:click="openMdIcon(index,area)"
                                                                   data-target='#modalSettingItemIcon'>設定</label>
                                                            <div v-if="area.icon_type == 1" class="icon_content">
                                                                <div class="text-center content_ic">
                                                                    <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                       v-bind:style="'color:' + area.icon_color"></i>
                                                                </div>
                                                            </div>
                                                            <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                                <img :src="area.icon_img_url" class="img_pre_content">
                                                            </div>
                                                            <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                            </div>
                                                        </div>

                                                        <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                            <i class="fas fa-times-circle ic_close_ui"
                                                               :id="'ic_close_lg_'+index"
                                                               v-on:click="remoteText('lg',index,area)"
                                                               style=""></i>
                                                            <label class="btn_contentTextLgUI"
                                                                   v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                                   v-on:click="openMdText('lg',index,area)"
                                                                   data-toggle='modal'
                                                                   data-target='#modalSettingItemText'>設定</label>
                                                            <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                    @{{ area.text_lg }}
                                                </span>
                                                        </div>

                                                        <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                            <i class="fas fa-times-circle ic_close_ui"
                                                               :id="'ic_close_sm_'+index"
                                                               v-on:click="remoteText('sm',index,area)"
                                                               style=""></i>
                                                            <label class="btn_contentTextLgUI"
                                                                   v-bind:style="(index ==0)?'right: 47%;' : ''"
                                                                   v-on:click="openMdText('sm',index,area)"
                                                                   data-toggle='modal'
                                                                   data-target='#modalSettingItemText'>設定</label>
                                                            <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                                    @{{ area.text_sm }}
                                                </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div v-if="detail_tab.length >0 && imageLayout=='image_5'" class="row box-area-lg item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class="text-center box_parent_itemui"
                                            >
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                      +';padding: 14px;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                    +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px; '"
                                                >
                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI" style="right: 48%"
                                                               data-toggle='modal'
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="'color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>


                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 48%"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>
                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 48%"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div v-if="detail_tab.length >0 && imageLayout=='image_6'" class="row box-area-lg item_pos_ex" style=" display: flex;"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : '' + 'display: flex;'"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class=" text-center box_parent_itemui">
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px'--}}
                                          +';padding: 14px;'
                                    +';margin-top:'+ area.top +'px; '
                                    +';margin-left:'+ area.left +'px; '
                                    +';margin-right:'+ area.right +'px; '
                                    +';margin-bottom:'+ area.bottom +'px; '
                                      +';width:'+ area.width +'px; '
                                    +'height:'+ area.height +'px;  '
{{--                                        +';min-height:'+(margin_box >0 ? ((482-margin_box/2)+2): 482)+'px;'--}}
"
                                                >

                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                style="float: right;"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                        >背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI"
                                                         v-if="area.is_delete_box !=1"
                                                         v-bind:style="'margin-top:'+ (margin_box > 0 ? (35-margin_box/2) : 35) + '%'">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI" style="right: 46%"
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="'color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 46%"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 46%"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div v-if="detail_tab.length >0 && imageLayout=='image_7'" class="row box-area-lg item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class=" text-center box_parent_itemui" style="height: 100%;">
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                         + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px'--}}
                                            +';padding: 14px;'
                                        +';margin-top:'+ area.top +'px; '
                                        +';margin-left:'+ area.left +'px; '
                                        +';margin-right:'+ area.right +'px; '
                                        +';margin-bottom:'+ area.bottom +'px; '
                                        +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px;  '
{{--                                        +';min-height:'+(margin_box >0 ? ((482-margin_box/2)+2): 482)+'px;height:100%'--}}
                                    "
                                                >
                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" style="margin-top: 11%" v-if="area.is_delete_box !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI"  style="right: 48%"
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-toggle='modal'  data-target='#modalSettingItemIcon'
                                                        >設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic">
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="'color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 48%"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 48%"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_1c'" class="row box-area-sm item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class=" text-center box_parent_itemui" >
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                         + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
                                     +';padding: 14px;'
                                     +';margin-top:'+ area.top +'px; '
                                     +';margin-left:'+ area.left +'px; '
                                     +';margin-right:'+ area.right +'px; '
                                     +';margin-bottom:'+ area.bottom +'px; '
                                     +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px;  '"

                                             >
                                                 <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI"
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="'color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_2c'" class="row box-area-sm item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class="text-center box_parent_itemui" >
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                        + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                                     +';padding: 14px;'
                                                +';margin-top:'+ area.top +'px; '
                                                +';margin-left:'+ area.left +'px; '
                                                +';margin-right:'+ area.right +'px; '
                                                +';margin-bottom:'+ area.bottom +'px; '
                                                +';width:'+ area.width +'px; '
                                                +'height:'+ area.height +'px;  '"
                                                >
                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI" style="right: 46%"
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="'color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 46%"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               style="right: 46%"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_3c'" class="row box-area-sm item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
{{--                                                 :class="(index == 0 ) ? 'col-md-8' : 'col-md-4'"--}}
                                                 class="text-center box_parent_itemui" >
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                                     +';padding: 14px;'
                                                +';margin-top:'+ area.top +'px; '
                                                +';margin-left:'+ area.left +'px; '
                                                +';margin-right:'+ area.right +'px; '
                                                +';margin-bottom:'+ area.bottom +'px; '
                                                 +';width:'+ area.width +'px; '
                                                 +'height:'+ area.height +'px;  '"
                                                >
                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI"  v-bind:style="(index == 0) ? 'right:47%': ''"
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="' color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index == 0) ? 'right:47%': ''"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index == 0) ? 'right:47%': ''"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_5c'" class="row box-area-sm item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
{{--                                                 :class="(index == 0 ) ? 'col-md-4' : 'col-md-8'"--}}
                                                 class="text-center box_parent_itemui" >
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
{{--                                        +';margin:'+ margin_box +'px; padding: 14px;'"--}}
                                                     +';padding: 14px;'
                                                +';margin-top:'+ area.top +'px; '
                                                +';margin-left:'+ area.left +'px; '
                                                +';margin-right:'+ area.right +'px; '
                                                +';margin-bottom:'+ area.bottom +'px; '
                                                 +';width:'+ area.width +'px; '
                                                 +'height:'+ area.height +'px;  '"
                                                >
                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI"  v-bind:style="(index == 0) ? 'right:44%': 'right:47%'"
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-toggle='modal'  data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="' color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr" v-if="area.is_delete_lg !=1" >
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index == 0) ? 'right:44%': 'right:47%'"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index == 0) ? 'right:44%': 'right:47%'"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="detail_tab.length >0 && imageLayout=='image_4c'" class="row box-area-sm item_pos_ex"
                                             v-bind:style="(index == tab_active) ? 'background:'+tab.color_tab_main+'!important;' : ''"
                                                {{--                                             v-bind:style="'background-color:'+ (bg_image_type == 0 ? bg_image_color:'')--}}
                                                {{--                                         + ';background-image:'+(bg_image_type == 1 ? 'url('+ bg_image_img_url +')':'')"--}}
                                        >
                                            <div v-for="(area,index) in detail_tab"
                                                 :id="'box_area_'+index"
                                                 class=" text-center box_parent_itemui" >
                                                <div class="areaItem"
                                                     :class="'bg_img_item_url_' + index"
                                                     v-bind:style="'background-color:'+ (area.css.bg_type == 0 ? area.css.bg_color:'')
                                         + ';background-image:'+(area.css.bg_type == 1 ? 'url('+ area.css.bg_img_item_url +');background-size: 100%;':'')
                                         +'; opacity:'+ (area.css.bg_opacity >0 ? area.css.bg_opacity : 100) +'%;'
                                          + 'border:'+ (area.css.bg_border_type == 1 ? area.css.bg_border_xp : 0) +'px solid ' +(area.css.bg_border_type == 1 ? area.css.bg_border_color :'#51595C')
{{--                                        + 'border-color:' + (area.css.bg_border_type == 1 ? area.css.bg_border_color :'')--}}
                                        +'; border-radius:' + area.css.bg_radius +'px;'
                                        +'box-shadow:'+ (area.css.bg_shadow_type == 1 ? ('0px 0px 6px '+area.css.bg_shadow_color) : '')
                                        +';margin:'+ margin_box +'px; padding: 14px;'
                                        +';width:'+ area.width +'px; '
                                        +'height:'+ area.height +'px;  '"
                                                >


                                                    <div class="d-flex align-item-center justify-content-between" style="height: 30px;">
                                                        <button class="btn btnPreviewItem btn-sns-line btn-sns-line-sm btn-sns-line-outline-default"
                                                                style="float: left"
                                                                v-on:click="resetArea(index)"
                                                        >リセット</button>
                                                        <button class="btn btn-sns-line btnEditItem btn-sns-line-sm btn-sns-line-primary"
                                                                v-on:click="openSettingBoxItem('item',index,area)"
                                                                data-toggle='modal'
                                                                data-target='#modalSettingBox'
                                                                style="float: right;">背景枠設定</button>
                                                    </div>

                                                    <div class="box_content_itemUI" v-if="area.is_delete_box !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_content_area_'+index"
                                                           v-on:click="remoteContentArea(index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentUI"
                                                               v-bind:style="(index == 0) ? 'right:48%': ''"
                                                               data-toggle='modal'
                                                               v-on:click="openMdIcon(index,area)"
                                                               data-target='#modalSettingItemIcon'>設定</label>
                                                        <div v-if="area.icon_type == 1" class="icon_content">
                                                            <div class="text-center content_ic" >
                                                                <i :class="area.icon.prefix_cus+ ' fa-'+ area.icon.id "
                                                                   v-bind:style="'color:' + area.icon_color"></i>
                                                            </div>
                                                        </div>
                                                        <div v-if="area.icon_type == 0 && area.icon_img_url !=''">
                                                            <img :src="area.icon_img_url"
                                                                 :class="'icon_img_url_' + index"
                                                                 class="img_pre_content">
                                                        </div>
                                                        <div class="item_ui" v-if="area.icon_type == 0 && area.icon_img_url == ''" >
                                                        </div>
                                                    </div>

                                                    <div class="box_content_itemUI txt_lg_pr"  v-if="area.is_delete_lg !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_lg_'+index"
                                                           v-on:click="remoteText('lg',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index == 0) ? 'right:48%': ''"
                                                               v-on:click="openMdText('lg',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-lg" v-bind:style="area.text_color_lg ? 'color:'+area.text_color_lg : '#51595C'">
                                                @{{ area.text_lg }}
                                            </span>
                                                    </div>

                                                    <div class="box_content_itemUI txt_sm_pr" v-if="area.is_delete_sm !=1">
                                                        <i class="fas fa-times-circle ic_close_ui"
                                                           :id="'ic_close_sm_'+index"
                                                           v-on:click="remoteText('sm',index,area)"
                                                           style=""></i>
                                                        <label class="btn_contentTextLgUI"
                                                               v-bind:style="(index == 0) ? 'right:48%': ''"
                                                               v-on:click="openMdText('sm',index,area)"
                                                               data-toggle='modal'
                                                               data-target='#modalSettingItemText'>設定</label>
                                                        <span class="txt-sm" v-bind:style="area.text_color_sm ? 'color:'+area.text_color_sm : '#51595C'">
                                            @{{ area.text_sm }}
                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>


                <div class="row" style="margin-top: 13px;
                                                    display: flex;
                                                    margin-left: 0px;
                                                    align-items: baseline;">
                    <div class="" style="width: 498px">
                        <div style="display: flex;align-items: center;     margin-bottom: 20px;">
                            <div class="line_tt"></div>
                            <label class="style-text">レイアウト選択</label>
                        </div>
                        <div style="margin-bottom: 7px; margin-top: 7px ; display: flex;align-items: center;">
                            <button class="btn btn-sns-line btn-sns-line-new btn-sns-line-dark" type="button"
                                    data-toggle='modal'  data-target='#modalChooseLayout'
                                    v-on:click="openChooseLayout"

                                    style="width: 143px; background-color: #96ADB2">選択</button>
                        </div>
                    </div>
                    <div class="" style=" ">
{{--                        <label class="style-text">タブ</label>--}}
                        <div style="display: flex;align-items: center;     margin-bottom: 20px;">
                            <div class="line_tt"></div>
                            <label class="style-text">タブ</label>
                        </div>
                        <div class=" d-flex" style="position: relative;padding-right: 0">
                            <input type="radio" class="request_reservation custom-radio"
                                   id="type_content" name="type_content" value="0"
                                   v-model="type_content">
                            <label for="type_content" class="font-weight-bold"
                                   style="font-size: 15px">利用しない</label>
                        </div>
                        <div class="d-flex" style="position: relative;padding-right: 0; margin-top: 15px; margin-bottom: 15px; align-items: baseline" >
                            <input type="radio" class="request_reservation custom-radio"
                                   v-model="type_content"
                                   id="type_content1" name="type_content" value="1">
                            <label for="type_content1" class="font-weight-bold"
                                   style="font-size: 15px;width: 137px">利用する</label>

                            <button class="btn btn-sns-line btn-sns-line-new btn-sns-line-dark" type="button"
                                    data-toggle='modal'  data-target='#modalChooseTab'
                                    v-on:click="openTab"
                                    style="width: 128px;background-color: #96ADB2">設定</button>
                        </div>
                    </div>

                </div>

                <div class="row" >
                    <div class="col-sm-6">
{{--                        <label class="style-text">デザイン編集</label>--}}
                        <div style="display: flex;align-items: center;margin-bottom: 20px;margin-top: 20px;">
                            <div class="line_tt"></div>
                            <label class="style-text">デザイン編集</label>
                        </div>
                    </div>
                </div>
                <div class="row title_layout" style="">

                    <div class="" style="display: flex; align-items: center ;width: 498px">
                        <label>全体背景設定</label>
                        <input type="radio" class="request_reservation custom-radio"
                               id="bg_image_type" name="bg_image_type" v-model="bg_image_type" value="0">
                        <label for="bg_image_type" class="font-weight-bold"
                               style="font-size: 15px; margin-left: 83px; margin-right: 74px">カラー</label>
                        <div class="input-color-container">
                            <input id="bg_image_color" v-model="bg_image_color" class="input-color" type="color">
                        </div>


                    </div>
                    <div class="" style="display: flex; align-items: center">
                        <input type="radio" class="request_reservation custom-radio"
                               id="bg_image_type1" name="bg_image_type" value="1" v-model="bg_image_type">
                        <label for="bg_image_type1" class="font-weight-bold"
                               style="font-size: 15px;  margin-right: 66px">画像</label>

                        <label for="imageUpload_Bg_tab_input">
                            <span class="btn btn-sns-line btn-sns-line-new btn-sns-line-primary" style="background-color: #5799DB">アップロード</span>
                            <input accept="image/jpeg|image/png" class="mdBtnUploadInput hidden"
                                   name="bg_image_img" type="file" id="imageUpload_Bg_tab_input"
                                   v-on:change="openUploadFileBgTab(event)">
                        </label>
                        <img id="imageUploadBgTab" style="width:200px; margin-left: 20px">
                    </div>

                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div style="margin-bottom: 28px; margin-top: 33px ; display: flex;align-items: center;">
                            <div class="" style="width: 175px ">背景枠一括設定</div>
                            <button class="btn btn-sns-line btn-sns-line-new btn-sns-line-dark" type="button"
                                    v-on:click="openSettingBox('all')"
                                    data-toggle='modal'  data-target='#modalSettingBox'
                                    style="width: 128px;background-color: #96ADB2">設定</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div style="margin-bottom: 24px; margin-top: 7px ; display: flex;align-items: center;">
                            <div class="" style="width: 175px ">背景枠同士の間隔</div>
                            <div style="display: flex;    align-items: flex-end; ">
                                <input type="number" v-model="margin_box" class="form-control inp_number"
                                       name="margin_box"
                                       data-vv-as="背景枠同士の間隔"
                                       v-validate="{required: true, min_value: 0}"
                                       style="width:80px; height: 37px; margin-right: 10px" >
                                <span>px</span>
                            </div>

                        </div>
                        <small class="help-block text-danger" v-show="errors.has('margin_box')">
                            @{{ errors.first('margin_box') }}
                        </small>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success"
                                v-on:click="saveCreateImage"
                        style="width:160px;box-shadow: 0px 2px 0px #00000080;">
                            保存
                        </button>
                        <a class="btn btn-sns-line btn-sns-line-lg btn-sns-line-dark"
                                id="btn-Convert-Html2Image"
                           v-on:click="downLoadImageRich"
                           style="background-color: #96ADB2;box-shadow: 0px 2px 0px #00000080;width:160px;"
                        >
                            <i class="fas fa-arrow-to-bottom"></i> ダウンロード
                        </a>
                    </div>
                </div>
                <div class="row" style="margin-top: 15px">
                    <div class="col-md-8">
                        <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-secondary"
                                v-on:click="backToList"
                                style="width:130px; background: #F6F6F6; color: #51595C!important;box-shadow: 0px 2px 0px #00000080;">
                            戻る
                        </button>
                    </div>
                </div>
                <div id="previewImage"></div>

                <div class="modal fade" id="modalSettingItemIcon"
                     tabindex="-1" role="dialog"
                     aria-labelledby="modalSettingItemIcon">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="border-bottom: none; ">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                    <span class="line-icon line-icon-close"><i class="fas fa-times" style="color:#8E8E8E ;"></i></span>
                                </button>
                                <h2 class="text-center">アイコン</h2>

                            </div>
                            <div class="modal-body md_scroll">
                                <div class="row "  >
                                    <div class="col-md-1"></div>
                                    <div class="col-md-10 " style="display: flex; align-items: center">
                                        <input type="radio" class="request_reservation custom-radio"
                                               id="icon_type" v-model="icon_type" value="0">
                                        <label for="icon_type" class="font-weight-bold"
                                               style="font-size: 15px;  margin-right: 20px; width: 170px">画像</label>

                                        <label for="imageUpload_icon_input">
                                            <span class="btn btn-sns-line btn-sns-line-new btn-sns-line-primary" style="background-color: #5799DB">アップロード</span>
                                            <input accept="image/jpeg|image/png" class="mdBtnUploadInput hidden"
                                                   name="icon_img" type="file" id="imageUpload_icon_input"
                                                   v-on:change="openUploadFileIcon(event)">
                                        </label>
                                        <img id="imageUploadIc" style="width:200px; margin-left: 20px">
                                    </div>
                                </div>
                                <div class="row "  style="    margin-top: 30px;    margin-bottom: 15px;">
                                    <div class="col-md-1"></div>
                                    <div class="col-md-10 " style="display: flex; align-items: center">
                                        <input type="radio" class="request_reservation custom-radio"
                                               id="icon_type1" v-model="icon_type" value="1">
                                        <label for="icon_type1" class="font-weight-bold"
                                               style="font-size: 15px;  margin-right: 20px;    width: 170px;">アイコン検索</label>

                                        <label style=" margin-right: 20px;  ">アイコンカラー</label>
                                        <div class="input-color-container">
                                            <input id="icon_color" v-model="icon_color" class="input-color" type="color" >
                                        </div>

                                    </div>
                                </div>
                                <div class="row " >
                                    <div class="col-md-1"></div>
                                    <div class="col-md-10 " >
                                        <input type="text" placeholder="キーワード検索" class="form-control"
                                               v-model="keyword_search_ic"
                                               v-on:keyup="searchIcon"
                                               style="border-color: #96ADB2; text-align: center; margin-top: 20px; margin-bottom: 15px">
                                        <div class="row">
                                            <div class="col-md-2 ic_box"
                                                 v-if="icons.length > 0" v-for="(icon,index) in icons"
                                                 v-on:click="selectedIcon(icon,index)"
                                                 v-bind:style="(icon.id == iconActive.id) ? 'border-color: #08BF5A;background-color: #F4FBF3;':''"
                                                 style="">
{{--                                                <i :class="(icon.shim ? (icon.shim.prefix ? icon.shim.prefix : 'fas') : '') + ' fa-'+ icon.id "></i>--}}
                                                <div class="text-center" style="height: 87px">
                                                    <i :class=" icon.prefix_cus+ ' fa-'+ icon.id " style="font-size: 30px;margin-top: 23%;"></i>
                                                </div>
                                                <div class="text-center ic_id"
                                                     v-bind:style="(icon.id == iconActive.id) ? 'background-color: #e1f1df;':''"
                                                >
                                                    <label class="md_ic_label">@{{ icon.id  }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="text-center mb-3">
                                <button type="button" class="btn  btn-sns-line btn-sns-line-success"  v-on:click="saveContentIcon"
                                        style="width: 170px;box-shadow: 0px 3px 0px #00000080;height: 40px;     margin-top: 20px;margin-bottom: 30px "
                                >決定</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modalSettingItemText"
                     tabindex="-1" role="dialog"
                     aria-labelledby="modalSettingItemText">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="border-bottom: none; ">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                    <span class="line-icon line-icon-close"><i class="fas fa-times" style="color:#8E8E8E;"></i></span>
                                </button>
                                <h2 class="text-center">テキスト編集</h2>

                            </div>
                            <div class="modal-body">
                                <div class="row "  style="margin-left: 28px">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8 " style="display: flex; align-items: center">
                                        <label style="width: 170px">テキストカラー</label>
                                        <div class="input-color-container">
                                            <input id="text_color" v-model="text_color" class="input-color" type="color" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-body">
                                <div class="row "  style="margin-left: 28px">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8 " style="display: flex; align-items: flex-end">
                                        <input type="text" class="form-control"
                                               v-model="text_ic"
                                               placeholder="テキスト"
                                               style="border-color: #96ADB2; text-align: center;width: 80%; margin-right: 10px">

                                        <span>
                                          @{{ text_ic.length }}/10文字
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center mb-3">
                                <button type="button" class="btn  btn-sns-line btn-sns-line-success"
                                        v-on:click="saveChangeText"
                                        style="width: 170px;box-shadow: 0px 3px 0px #00000080;height: 40px; margin-bottom: 30px ; margin-top: 20px"
                                >決定</button>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal fade" id="modalSettingBox"
                     tabindex="-1" role="dialog"
                     aria-labelledby="chatSettingStatus">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="border-bottom: none; ">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                    <span class="line-icon line-icon-close"><i class="fas fa-times" style="color: #8E8E8E"></i></span>
                                </button>
                                <h2 class="text-center">背景枠設定</h2>

                            </div>
                            <div class="modal-body md_scroll">
                                <div class="row">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-3">
                                        <div style="display: flex;align-items: center;     margin-bottom: 20px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">基本設定</label>
                                        </div>

                                    </div>
                                    <div class="col-sm-6">
                                        <div class="row">
                                            <div class="col-md-8" style="display: flex;align-items: center;margin-bottom: 15px;">
                                                <div>
                                                    <input type="radio" class="request_reservation custom-radio"
                                                           id="bg_type" v-model="bg_type" value="0">
                                                    <label for="bg_type" class="font-weight-bold"
                                                           style="font-size: 15px;  margin-right: 20px">カラー</label>
                                                </div>

                                                <div class="input-color-container">
                                                    <input id="bg_color"  class="input-color" v-model="bg_color" type="color">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-8">
                                                <input type="radio" class="request_reservation custom-radio"
                                                       id="bg_type1" v-model="bg_type" value="1">
                                                <label for="bg_type1" class="font-weight-bold"
                                                       style="font-size: 15px;  margin-right: 20px">画像</label>

                                                <label for="imageBgItem_input">
                                                    <span class="btn btn-sns-line btn-sns-line-new btn-sns-line-primary" style="background-color: #5799DB">アップロード</span>
                                                    <input accept="image/jpeg|image/png" class="mdBtnUploadInput hidden"
                                                           name="bg_img" type="file" id="imageBgItem_input"
                                                           v-on:change="openUploadFileCss(event)">
                                                </label>
                                                <img id="imageUploadBgImgItem" style="width:200px; margin-left: 20px; margin-top: 10px">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 29px">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-3">
                                        <div style="display: flex;align-items: center;     margin-bottom: 20px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">透明度</label>
                                        </div>
{{--                                        <label class="style-text" style="margin-top: 0">透明度</label>--}}
                                    </div>
                                    <div class="col-md-6" style="    display: flex;align-items: flex-end;">
                                        <input type="number" v-model="bg_opacity"
                                               data-vv-as="透明度"
                                               name="bg_opacity"
                                               v-validate="{required: true, max_value: 100, min_value:0}"
                                               class="form-control" style="height: 37px; width: 80px; margin-right: 10px" >

                                        <span>%</span>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-3">
                                    </div>
                                    <div class="col-md-6" style="">
                                        <small class="help-block text-danger" v-show="errors.has('bg_opacity')">
                                            @{{ errors.first('bg_opacity') }}
                                        </small>
                                    </div>

                                </div>
                                <div class="row" style="margin-top: 15px">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-3">
                                        <div style="display: flex;align-items: center;     margin-bottom: 20px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">枠線</label>
                                        </div>
{{--                                        <label class="style-text" style="margin-top: 0">枠線</label>--}}
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-8" style="display: flex;align-items: center;margin-bottom: 15px; margin-top: 11px">
                                                <div>
                                                    <input type="radio" class="request_reservation custom-radio"
                                                           id="bg_border_type" v-model="bg_border_type" value="0">
                                                    <label for="bg_border_type" class="font-weight-bold"
                                                           style="font-size: 15px;  margin-right: 20px">設定しない</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-8" style="display: flex;align-items: center;margin-bottom: 15px;">
                                                <div>
                                                    <input type="radio" class="request_reservation custom-radio"
                                                           id="bg_border_type1" v-model="bg_border_type" value="1">
                                                    <label for="bg_border_type1" class="font-weight-bold"
                                                           style="font-size: 15px;  margin-right: 20px">設定する</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12" style="display: flex;align-items: center;margin-bottom: 15px;">
                                                <span>太さ</span>
                                                <div style="margin: 0 17px; display: flex; align-items: flex-end">
                                                    <input type="number" v-model="bg_border_xp" class="form-control"
                                                           name="bg_border_xp"
                                                           data-vv-as="太さ"
                                                           v-validate="{required: true, min_value: 0}"
                                                           style="height: 37px; width: 80px; margin-right: 10px">
                                                    <span>px</span>
                                                    <br>
                                                </div>

                                                <div style="width:95px">カラー</div>
                                                <div class="input-color-container">
                                                    <input id="bg_border_color" v-model="bg_border_color"  class="input-color" type="color">
                                                </div>
                                            </div>
                                            <small class="help-block text-danger" v-show="errors.has('bg_border_xp')">
                                                @{{ errors.first('bg_border_xp') }}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-3">
                                        <div style="display: flex;align-items: center;     margin-bottom: 20px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">ドロップシャドウ</label>
                                        </div>
{{--                                        <label class="style-text" style="margin-top: 0">ドロップシャドウ</label>--}}
                                    </div>
                                    <div class="col-sm-6" style="display: flex; align-items: center;    margin-top: 6px;">
                                        <div style="width:144px">
                                            <input type="radio" class="request_reservation custom-radio"
                                                   id="bg_shadow_type" v-model="bg_shadow_type" value="0">
                                            <label for="bg_shadow_type" class="font-weight-bold"
                                                   style="font-size: 15px;  margin-right: 20px">設定しない</label>
                                        </div>
                                        <div>
                                            <input type="radio" class="request_reservation custom-radio"
                                                   id="bg_shadow_type1" v-model="bg_shadow_type" value="1">
                                            <label for="bg_shadow_type1" class="font-weight-bold"
                                                   style="font-size: 15px;  margin-right: 36px">設定する</label>
                                        </div>
                                        <div class="input-color-container">
                                            <input id="bg_shadow_color" v-model="bg_shadow_color"  class="input-color" type="color">
                                        </div>
                                    </div>

                                </div>
                                <div class="row" style="margin-top: 15px">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-3">
                                        <div style="display: flex;align-items: center;     margin-bottom: 20px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">角丸</label>
                                        </div>
{{--                                        <label class="style-text" style="margin-top: 0">角丸</label>--}}
                                    </div>
                                    <div class="col-md-6" style=" display: flex;align-items: flex-end;">
                                        <input type="number" v-model="bg_radius"
                                               name="bg_radius"
                                               data-vv-as="角丸"
                                               v-validate="{required: true, min_value: 0}"
                                               class="form-control" style="height: 37px; width: 80px; margin-right: 10px" >
                                        <span>px</span>
                                        <br>

                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-3">
                                     </div>
                                    <div class="col-sm-5">
                                        <small class="help-block text-danger" v-show="errors.has('bg_radius')">
                                            @{{ errors.first('bg_radius') }}
                                        </small>
                                    </div>
                                </div>


                            </div>
                            <div class="text-center mb-3">
                                <button type="button" class="btn  btn-sns-line btn-sns-line-success"  v-on:click="saveSettingBox"
                                        style="width: 170px;box-shadow: 0px 3px 0px #00000080;height: 40px; margin-bottom: 30px "
                                >決定</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modalChooseTab"
                     tabindex="-1" role="dialog"
                     aria-labelledby="chatSettingStatus">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="border-bottom: none; ">
                                <button type="button"
                                        v-on:click="closeSettingTab"
                                        class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                    <span class="line-icon line-icon-close"><i class="fas fa-times" style="color: #8E8E8E"></i></span>
                                </button>
                                <h2 class="text-center">タブ設定</h2>

                            </div>

                            <div class="modal-body">
                                <div class="row "  style="margin-left: 28px">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8 " style="display: flex; align-items: center;  margin-bottom: 20px;">
{{--                                        <div style="width: 150px">タブ数</div>--}}
                                        <div style="display: flex;align-items: center;  width: 195px;  ">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">タブ数</label>
                                        </div>
                                        <input type="number" name="number_tab" v-model="number_tab"
                                               data-vv-as="タブ数"
                                               v-validate="{required: true, max_value: 5, min_value:2}"
                                               class="form-control" style="width: 80px; height: 37px">
                                        <span style="margin-top: 16px">（2~5）</span>
                                    </div>
                                </div>
                                <div class="row "  style="margin-left: 28px">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <small class="help-block text-danger" v-show="errors.has('number_tab')">
                                            @{{ errors.first('number_tab') }}
                                        </small>
                                    </div>
                                </div>

                                <div class="row "  style="margin-left: 28px">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8" style="display: flex; align-items: center; margin-top: 10px;margin-bottom: 20px;">
                                        <div style="display: flex;align-items: center;  width: 195px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">メインタブ選択</label>
                                        </div>
{{--                                        <div style="width: 150px">メインタブ</div>--}}
                                        <div v-for="(tab,index) in renderTab">
                                            <input type="radio" class="request_reservation custom-radio"
                                                   :id="'tab'+index" v-model="tab_active_md" :value="index">
                                            <label :for="'tab'+index" class="font-weight-bold"
                                                   style="font-size: 15px;  margin-right: 20px">@{{ tab.name_tab_md }}</label>
                                        </div>
{{--                                        <div>--}}
{{--                                            <input type="radio" class="request_reservation custom-radio"--}}
{{--                                                   id="tab2" name="tab" value="1">--}}
{{--                                            <label for="tab2" class="font-weight-bold"--}}
{{--                                                   style="font-size: 15px; margin-left: 20px; margin-right: 20px">B</label>--}}
{{--                                        </div>--}}



                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px; margin-left: 28px;">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-10" style="display: flex;align-items: center; margin-bottom: 20px;">
                                        <div style="display: flex;align-items: center;width: 195px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">メインタブカラー</label>
                                        </div>
                                        <div class="input-color-container">
                                            <input id="input-color" v-model="color_tab_main_md" class="input-color" type="color">
                                        </div>
                                        <label class="style-text" style="width: 231px;    text-align: center;">サブタブカラー</label>
                                        <div class="input-color-container">
                                            <input id="input-color" v-model="color_tab_sub_md" class="input-color" type="color">
                                        </div>
                                    </div>

                                </div>
                                <div class="row" style="margin-top: 15px; margin-left: 28px;">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-8" style="display: flex;align-items: center;     margin-bottom: 20px; ">
                                        <div style="display: flex;align-items: center; width: 195px;">
                                            <div class="line_tt"></div>
                                            <label class="style-text" style="margin-top: 0">角丸</label>
                                        </div>
                                        <div style=" display: flex;align-items: flex-end;">
                                            <input type="number" v-model="tab_radius_md"
                                                   name="tab_radius_md"
                                                   data-vv-as="角丸"
                                                   v-validate="{required: true, min_value: 0}"
                                                   class="form-control" style="height: 37px; width: 80px; margin-right: 10px" >
                                            <span>px</span>
                                            <br>

                                        </div>
                                    </div>

                                </div>

                                <div class="md_tab_box">
                                    <ul class="nav nav-tabs">
                                        <li  v-for="(tab,index) in renderTab"
                                             :class="index == tab_active_md ? 'active' : ''"
{{--                                             v-bind:style="(index == tab_active_md)--}}
{{--                                               ? 'background:'+color_tab_main_md+ '!important ;border-bottom-color:'+color_tab_main_md--}}
{{--                                               : 'background:'+color_tab_sub_md"--}}
                                             v-bind:style=" 'border-bottom-color:'+color_tab_main_md + ';background: ' + ((index == tab_active_md) ? color_tab_main_md :'unset') +' !important;margin-bottom: ' + ((index == tab_active_md) ? '-2px' :'-1px') "
                                        >
                                            <a data-toggle="tab"
{{--                                               :href="'#tabContent'+index"--}}
                                                v-bind:style=" 'border-bottom-color:'+ ((index == tab_active_md)? color_tab_main_md : '') + ';background: ' + ((index == tab_active_md) ? color_tab_main_md :color_tab_sub_md) "
                                            >
                                                <span  v-bind:style="tab.name_tab ? 'color:'+tab.color_name : 'color:#51595C'">
                                                  @{{ tab.name_tab_md }}
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div  v-for="(tab,index) in renderTab"
{{--                                              :id="'tabContent'+index"--}}
                                              v-bind:style="(index == tab_active_md) ? 'background:'+color_tab_main_md+'!important' : ''"
                                              :class="index == tab_active_md ? 'tab-pane fade in active':'tab-pane fade'">
                                        </div>
{{--                                        <div id="menu1" class="tab-pane fade">--}}
{{--                                        </div>--}}
{{--                                        <div id="menu2" class="tab-pane fade">--}}
{{--                                          </div>--}}
                                    </div>

                                </div>


                            </div>
                            <div class="text-center mb-3">
                                <button type="button" class="btn  btn-sns-line btn-sns-line-success"
                                        v-on:click="saveTabs"
                                        style="box-shadow: 0px 3px 0px #00000080; width: 150px; height: 40px;margin-bottom: 30px;"
                                >決定</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modalChooseLayout"
                     tabindex="-1" role="dialog"
                     aria-labelledby="chatSettingStatus">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="border-bottom: none; padding-bottom: 0">
                                <button type="button" class="close"
                                        v-on:click="closeChangUI"
                                        data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                    <span class="line-icon line-icon-close"><i class="fas fa-times" style="color: #8E8E8E"></i></span>
                                </button>
                                <h2 class="text-center" style="margin-top: 6px;    margin-bottom: 20px;">レイアウト選択</h2>

                            </div>
                            <div class="modal-body">
                                <div class="row "  style=" margin-left: 59px">
                                    <div class="">
                                        <div class="template-btn-wrapper" style="margin-bottom: 0">
                                                <div class="template-btn" v-for="(item, key) in settings.layouts.large"
                                                      @click="changeLayout(item.numberBoxs, item.type, 'large',item)"
                                                >
                                                    <div class="btn btn-default" style="padding: 0; position: relative; "
                                                         v-bind:style="(imageLayoutNew == item.value) ? 'border:2px solid #08BF5A ' : 'border: none'"
{{--                                                          v-bind:style="(item.value == imageLayoutNew)  ? ' border:2px solid #08BF5A !important;' : ''--}}
                                                    >

                                                        <img :id="'type_image_map_large_'+(item.type)" :src="'